Merge branch 'main' into unit-format

rajsite · web-flow · commit ed6ab8b08132 · 2026-01-15T06:52:37.000-06:00
diff --git a/beachball.config.js b/beachball.config.js
@@ -10,5 +10,10 @@ module.exports = {
                 return `- ${entry.comment} ([ni/nimble@${entry.commit.substring(0, 7)}](https://github.com/ni/nimble/commit/${entry.commit}))`;
             }
         }
-    }
+    },
+    ignorePatterns: [
+        '**/docs/**',
+        '**/specs/**',
+        '**/tests/**',
+    ]
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-workspace/nimble-react/CHANGELOG.json b/packages/react-workspace/nimble-react/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@ni/nimble-react",
   "entries": [
+    {
+      "date": "Thu, 15 Jan 2026 05:18:11 GMT",
+      "version": "0.10.0",
+      "tag": "@ni/nimble-react_v0.10.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "1588923+rajsite@users.noreply.github.com",
+            "package": "@ni/nimble-react",
+            "commit": "414a6b5000e34f9a3cb6bc8c7594f05dec69e277",
+            "comment": "Create fromDialogRef, fromDrawerRef, and fromTableRef helpers"
+          }
+        ]
+      }
+    },
     {
       "date": "Fri, 02 Jan 2026 06:16:54 GMT",
       "version": "0.9.0",
diff --git a/packages/react-workspace/nimble-react/CHANGELOG.md b/packages/react-workspace/nimble-react/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Change Log - @ni/nimble-react
 
-<!-- This log was last generated on Fri, 02 Jan 2026 06:16:54 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 15 Jan 2026 05:18:11 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 0.10.0
+
+Thu, 15 Jan 2026 05:18:11 GMT
+
+### Minor changes
+
+- Create fromDialogRef, fromDrawerRef, and fromTableRef helpers ([ni/nimble@414a6b5](https://github.com/ni/nimble/commit/414a6b5000e34f9a3cb6bc8c7594f05dec69e277))
+
 ## 0.9.0
 
 Fri, 02 Jan 2026 06:16:54 GMT
diff --git a/packages/react-workspace/nimble-react/package.json b/packages/react-workspace/nimble-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-react",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "React components for the NI Nimble Design System",
   "keywords": [
     "ni",
diff --git a/packages/react-workspace/nimble-react/src/dialog/index.ts b/packages/react-workspace/nimble-react/src/dialog/index.ts
@@ -1,8 +1,14 @@
 import { Dialog, UserDismissed as DialogUserDismissed } from '@ni/nimble-components/dist/esm/dialog';
-import type { LegacyRef } from 'react';
+import type { RefAttributes, RefObject } from 'react';
 import { wrap } from '../utilities/react-wrapper';
 
 export { type Dialog, DialogUserDismissed };
 export const NimbleDialog = wrap(Dialog);
 
-export type DialogRef = LegacyRef<Dialog>;
+/**
+ * Helper to assign Dialog refs with generics to ref bindings
+ * See: https://github.com/ni/nimble/issues/2784
+ * @param dialogRef A ref to a dialog created with `useRef`
+ * @returns A ref type compatible with normal `ref` bindings
+ */
+export const fromDialogRef = <T>(dialogRef: RefObject<Dialog<T> | null>): RefAttributes<Dialog>['ref'] => dialogRef as RefAttributes<Dialog>['ref'];
diff --git a/packages/react-workspace/nimble-react/src/drawer/index.ts b/packages/react-workspace/nimble-react/src/drawer/index.ts
@@ -1,9 +1,15 @@
 import { Drawer, UserDismissed as DrawerUserDismissed } from '@ni/nimble-components/dist/esm/drawer';
 import { DrawerLocation } from '@ni/nimble-components/dist/esm/drawer/types';
-import type { LegacyRef } from 'react';
+import type { RefAttributes, RefObject } from 'react';
 import { wrap } from '../utilities/react-wrapper';
 
 export { type Drawer, DrawerUserDismissed, DrawerLocation };
 export const NimbleDrawer = wrap(Drawer);
 
-export type DrawerRef = LegacyRef<Drawer>;
+/**
+ * Helper to assign Drawer refs with generics to ref bindings
+ * See: https://github.com/ni/nimble/issues/2784
+ * @param drawerRef A ref to a drawer created with `useRef`
+ * @returns A ref type compatible with normal `ref` bindings
+ */
+export const fromDrawerRef = <T>(drawerRef: RefObject<Drawer<T> | null>): RefAttributes<Drawer>['ref'] => drawerRef as RefAttributes<Drawer>['ref'];
diff --git a/packages/react-workspace/nimble-react/src/table/index.ts b/packages/react-workspace/nimble-react/src/table/index.ts
@@ -7,7 +7,7 @@ import type {
     TableRecord,
     TableSetRecordHierarchyOptions
 } from '@ni/nimble-components/dist/esm/table/types';
-import type { LegacyRef } from 'react';
+import type { RefAttributes, RefObject } from 'react';
 import { wrap, type EventName } from '../utilities/react-wrapper';
 
 export { type Table, type TableRecord, type TableSetRecordHierarchyOptions };
@@ -36,4 +36,10 @@ export interface TableRowExpandToggleEvent extends CustomEvent<TableRowExpansion
     target: Table;
 }
 
-export type TableRef = LegacyRef<Table>;
+/**
+ * Helper to assign Table refs with generics to ref bindings
+ * See: https://github.com/ni/nimble/issues/2784
+ * @param tableRef A ref to a table created with `useRef`
+ * @returns A ref type compatible with normal `ref` bindings
+ */
+export const fromTableRef = <T extends TableRecord>(tableRef: RefObject<Table<T> | null>): RefAttributes<Table>['ref'] => tableRef as RefAttributes<Table>['ref'];
diff --git a/packages/react-workspace/react-client-app/package.json b/packages/react-workspace/react-client-app/package.json
@@ -6,7 +6,6 @@
   "scripts": {
     "start": "vite",
     "build": "tsc -b && vite build",
-    "test": "tsc -p ./tsconfig.legacy.json",
     "lint": "eslint .",
     "format": "eslint . --fix",
     "pack": "npm pack"
diff --git a/packages/react-workspace/react-client-app/src/components/App.tsx b/packages/react-workspace/react-client-app/src/components/App.tsx
@@ -16,8 +16,8 @@ import { NimbleCheckbox } from '@ni/nimble-react/checkbox';
 import { NimbleRadioGroup } from '@ni/nimble-react/radio-group';
 import { NimbleRadio } from '@ni/nimble-react/radio';
 import { NimbleTextField } from '@ni/nimble-react/text-field';
-import { NimbleDialog, type Dialog, type DialogRef, DialogUserDismissed } from '@ni/nimble-react/dialog';
-import { NimbleDrawer, type Drawer, type DrawerRef, DrawerUserDismissed, DrawerLocation } from '@ni/nimble-react/drawer';
+import { NimbleDialog, type Dialog, DialogUserDismissed, fromDialogRef } from '@ni/nimble-react/dialog';
+import { NimbleDrawer, type Drawer, DrawerUserDismissed, DrawerLocation, fromDrawerRef } from '@ni/nimble-react/drawer';
 import { NimbleMenu } from '@ni/nimble-react/menu';
 import { NimbleMenuItem, type MenuItemChangeEvent } from '@ni/nimble-react/menu-item';
 import { NimbleAnchorMenuItem } from '@ni/nimble-react/anchor-menu-item';
@@ -27,7 +27,7 @@ import { NimbleIconCheck } from '@ni/nimble-react/icons/check';
 import { NimbleIconXmarkCheck } from '@ni/nimble-react/icons/xmark-check';
 import { NimbleSpinner } from '@ni/nimble-react/spinner';
 import { NimbleSwitch } from '@ni/nimble-react/switch';
-import { NimbleTable, type Table, type TableRef, type TableRowExpandToggleEvent, type TableRecord, type TableSetRecordHierarchyOptions } from '@ni/nimble-react/table';
+import { NimbleTable, type Table, type TableRowExpandToggleEvent, type TableRecord, type TableSetRecordHierarchyOptions, fromTableRef } from '@ni/nimble-react/table';
 import { NimbleTableColumnText } from '@ni/nimble-react/table-column/text';
 import { NimbleTableColumnAnchor } from '@ni/nimble-react/table-column/anchor';
 import { NimbleTableColumnDateText } from '@ni/nimble-react/table-column/date-text';
@@ -668,9 +668,7 @@ export function App(): React.JSX.Element {
                                 <div className="sub-container">
                                     <div className="container-label">Dialog</div>
                                     <NimbleDialog
-                                        // Note: Generic types such as Dialog require using the workaround ref type
-                                        // See: https://github.com/ni/nimble/issues/2784
-                                        ref={dialogRef as unknown as DialogRef}
+                                        ref={fromDialogRef(dialogRef)}
                                     >
                                         <span slot="title">This is a dialog</span>
                                         <div>It opened when you pushed the button</div>
@@ -691,9 +689,7 @@ export function App(): React.JSX.Element {
                                 <div className="sub-container">
                                     <div className="container-label">Drawer</div>
                                     <NimbleDrawer
-                                        // Note: Generic types such as Drawer require using the workaround ref type
-                                        // See: https://github.com/ni/nimble/issues/2784
-                                        ref={drawerRef as unknown as DrawerRef}
+                                        ref={fromDrawerRef(drawerRef)}
                                         location={drawerLocation}
                                     >
                                         <header>This is a drawer</header>
@@ -931,9 +927,7 @@ export function App(): React.JSX.Element {
                                 <div className="sub-container">
                                     <div className="container-label">Table</div>
                                     <NimbleTable
-                                        // Note: Generic types such as Table require using the workaround ref type
-                                        // See: https://github.com/ni/nimble/issues/2784
-                                        ref={tableRef as unknown as TableRef}
+                                        ref={fromTableRef(tableRef)}
                                         idFieldName="id"
                                         parentIdFieldName="parentId"
                                         selectionMode="multiple"
@@ -1028,9 +1022,7 @@ export function App(): React.JSX.Element {
                                 <div className="sub-container">
                                     <div className="container-label">Table with delayed hierarchy</div>
                                     <NimbleTable
-                                        // Note: Generic types such as Table require using the workaround ref type
-                                        // See: https://github.com/ni/nimble/issues/2784
-                                        ref={delayedHierarchyTableRef as unknown as TableRef}
+                                        ref={fromTableRef(delayedHierarchyTableRef)}
                                         idFieldName="id" parentIdFieldName="parentId" selectionMode="multiple"
                                         onRowExpandToggle={onRowExpandToggle}
                                     >
diff --git a/packages/react-workspace/react-client-app/tsconfig.json b/packages/react-workspace/react-client-app/tsconfig.json
@@ -12,6 +12,18 @@
     "verbatimModuleSyntax": true,
     "jsx": "react-jsx",
     "incremental": true,
+
+    // Used for improved nimble dev workflow, not needed in normal apps
+    // Keep in sync with vite.config.mjs
+    "paths": {
+      "@ni/nimble-react/*": [
+          "../nimble-react/src/*"
+      ],
+      "@ni/spright-react/*": [
+          "../spright-react/src/*"
+      ],
+      "@ni/ok-react/*": ["../ok-react/src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
 }
diff --git a/packages/react-workspace/react-client-app/tsconfig.legacy.json b/packages/react-workspace/react-client-app/tsconfig.legacy.json
diff --git a/packages/react-workspace/react-client-app/vite.config.mjs b/packages/react-workspace/react-client-app/vite.config.mjs
@@ -1,10 +1,45 @@
+import * as path from 'node:path';
+import { createRequire } from 'node:module';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 
+const require = createRequire(import.meta.url);
+
 export default defineConfig({
     plugins: [react()],
     base: './',
     build: {
         chunkSizeWarningLimit: 5 * 1024 * 1024
+    },
+
+    // Used for improved nimble dev workflow, not needed in normal apps
+    // Keep in sync with typescript.json
+    resolve: {
+        alias: [
+            {
+                find: /^@ni\/nimble-react\/styles\/(.*)/,
+                replacement: `${getAbsolutePath('@ni/nimble-react')}/styles/$1.scss`
+            },
+            {
+                find: /^@ni\/nimble-react\/icons\/(.*)/,
+                replacement: `${getAbsolutePath('@ni/nimble-react')}/src/icons/$1.ts`
+            },
+            {
+                find: /^@ni\/nimble-react\/(.*)/,
+                replacement: `${getAbsolutePath('@ni/nimble-react')}/src/$1/index.ts`
+            },
+            {
+                find: /^@ni\/spright-react\/(.*)/,
+                replacement: `${getAbsolutePath('@ni/spright-react')}/src/$1/index.ts`
+            },
+            {
+                find: /^@ni\/ok-react\/(.*)/,
+                replacement: `${getAbsolutePath('@ni/ok-react')}/src/$1/index.ts`
+            },
+        ]
     }
 });
+
+function getAbsolutePath(value) {
+    return path.dirname(require.resolve(path.join(value, 'package.json')));
+}
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js
@@ -1,4 +1,4 @@
-import { dirname, join } from 'node:path';
+import * as path from 'node:path';
 import { createRequire } from 'node:module';
 import remarkGfm from 'remark-gfm';
 
@@ -45,6 +45,10 @@ export async function viteFinal(config) {
             find: '@ni/ok-components/dist/esm',
             replacement: '@ni/ok-components/src'
         },
+        {
+            find: /^@ni\/nimble-react\/styles\/(.*)/,
+            replacement: `${getAbsolutePath('@ni/nimble-react')}/styles/$1.scss`
+        },
         {
             find: /^@ni\/nimble-react\/icons\/(.*)/,
             replacement: `${getAbsolutePath('@ni/nimble-react')}/src/icons/$1.ts`
@@ -72,5 +76,5 @@ export const framework = {
 };
 
 function getAbsolutePath(value) {
-    return dirname(require.resolve(join(value, 'package.json')));
+    return path.dirname(require.resolve(path.join(value, 'package.json')));
 }
diff --git a/packages/storybook/.storybook/theme.js b/packages/storybook/.storybook/theme.js
@@ -31,8 +31,8 @@ const light = create({
 
     // Toolbar default and active colors
     barTextColor: tokenValues.bodyFontColor.light,
-    barHoverColor: tokenValues.fillHoverColor.light,
-    barSelectedColor: tokenValues.fillHoverSelectedColor.light,
+    barHoverColor: tokenValues.borderHoverColor.light,
+    barSelectedColor: tokenValues.borderHoverColor.light,
     barBg: tokenValues.headerBackgroundColor.light,
 
     // Form colors
@@ -74,8 +74,8 @@ const dark = create({
 
     // Toolbar default and active colors
     barTextColor: tokenValues.bodyFontColor.dark,
-    barHoverColor: tokenValues.fillHoverColor.dark,
-    barSelectedColor: tokenValues.fillHoverSelectedColor.dark,
+    barHoverColor: tokenValues.borderHoverColor.dark,
+    barSelectedColor: tokenValues.borderHoverColor.dark,
     barBg: tokenValues.headerBackgroundColor.dark,
 
     // Form colors
diff --git a/packages/storybook/src/nimble/dialog/dialog.mdx b/packages/storybook/src/nimble/dialog/dialog.mdx
@@ -97,6 +97,16 @@ private class DialogData
 }
 ```
 
+### React
+
+When assigning a ref created with `useRef` to a `NimbleDialog`, make sure to use the `fromDialogRef` helper to avoid type issues due to the generic component reference. For example:
+
+```tsx
+<NimbleDialog ref={fromDialogRef(dialogRef)}></NimbleDialog>
+```
+
+For more information see [ni/nimble#2784](https://github.com/ni/nimble/issues/2784).
+
 {/* ## Examples */}
 
 {/* ## Accessibility */}
diff --git a/packages/storybook/src/nimble/drawer/drawer.mdx b/packages/storybook/src/nimble/drawer/drawer.mdx
@@ -19,6 +19,18 @@ used for a configuration pane.
 
 {/* ## Usage */}
 
+## Usage
+
+### React
+
+When assigning a ref created with `useRef` to a `NimbleDrawer`, make sure to use the `fromDrawerRef` helper to avoid type issues due to the generic component reference. For example:
+
+```tsx
+<NimbleDrawer ref={fromDrawerRef(drawerRef)}></NimbleDrawer>
+```
+
+For more information see [ni/nimble#2784](https://github.com/ni/nimble/issues/2784).
+
 {/* ## Examples */}
 
 {/* ## Accessibility */}
diff --git a/packages/storybook/src/nimble/label-provider/base/label-providers.mdx b/packages/storybook/src/nimble/label-provider/base/label-providers.mdx
@@ -25,7 +25,7 @@ for specific usage guidance with Angular.
 ### Blazor
 
 See the
-[Localization section of the blazor-workspace readme](https://github.com/ni/nimble/tree/main/packages/blazor-workspace#localization-optional)
+[Localization section of the NimbleBlazor readme](https://github.com/ni/nimble/tree/main/packages/blazor-workspace/NimbleBlazor/README.md#localization-optional)
 for specific usage guidance for the label providers with Blazor.
 
 ## Core Label Provider
diff --git a/packages/storybook/src/nimble/table/table.mdx b/packages/storybook/src/nimble/table/table.mdx

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,10 @@ module.exports = {`
`10`	`10`	return `- ${entry.comment} ([ni/nimble@${entry.commit.substring(0, 7)}](https://github.com/ni/nimble/commit/${entry.commit}))`;
`11`	`11`	`}`
`12`	`12`	`}`
`13`		`- }`
	`13`	`+ },`
	`14`	`+ ignorePatterns: [`
	`15`	`+ '/docs/',`
	`16`	`+ '/specs/',`
	`17`	`+ '/tests/',`
	`18`	`+ ]`
`14`	`19`	`};`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@ni/nimble-react",`
`3`		`- "version": "0.9.0",`
	`3`	`+ "version": "0.10.0",`
`4`	`4`	`"description": "React components for the NI Nimble Design System",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"ni",`