@ni/nimble-react 0.8.2 → 0.10.0

package/dist/esm/dialog/index.d.ts

@@ -1,5 +1,11 @@
 import { Dialog, UserDismissed as DialogUserDismissed } from '@ni/nimble-components/dist/esm/dialog';
-import type { LegacyRef } from 'react';
+import type { RefAttributes, RefObject } from 'react';
 export { type Dialog, DialogUserDismissed };
 export declare const NimbleDialog: import("@lit/react").ReactWebComponent<Dialog<void>, {}>;
-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 declare const fromDialogRef: <T>(dialogRef: RefObject<Dialog<T> | null>) => RefAttributes<Dialog>["ref"];

package/dist/esm/dialog/index.js

@@ -2,4 +2,11 @@ import { Dialog, UserDismissed as DialogUserDismissed } from '@ni/nimble-compone
 import { wrap } from '../utilities/react-wrapper';
 export { DialogUserDismissed };
 export const NimbleDialog = wrap(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 = (dialogRef) => dialogRef;
 //# sourceMappingURL=index.js.map

package/dist/esm/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAErG,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAe,mBAAmB,EAAE,CAAC;AAC5C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { Dialog, UserDismissed as DialogUserDismissed } from '@ni/nimble-components/dist/esm/dialog';\nimport type { LegacyRef } from 'react';\nimport { wrap } from '../utilities/react-wrapper';\n\nexport { type Dialog, DialogUserDismissed };\nexport const NimbleDialog = wrap(Dialog);\n\nexport type DialogRef = LegacyRef<Dialog>;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAErG,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAe,mBAAmB,EAAE,CAAC;AAC5C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,SAAsC,EAAgC,EAAE,CAAC,SAAyC,CAAC","sourcesContent":["import { Dialog, UserDismissed as DialogUserDismissed } from '@ni/nimble-components/dist/esm/dialog';\nimport type { RefAttributes, RefObject } from 'react';\nimport { wrap } from '../utilities/react-wrapper';\n\nexport { type Dialog, DialogUserDismissed };\nexport const NimbleDialog = wrap(Dialog);\n\n/**\n * Helper to assign Dialog refs with generics to ref bindings\n * See: https://github.com/ni/nimble/issues/2784\n * @param dialogRef A ref to a dialog created with `useRef`\n * @returns A ref type compatible with normal `ref` bindings\n */\nexport const fromDialogRef = <T>(dialogRef: RefObject<Dialog<T> | null>): RefAttributes<Dialog>['ref'] => dialogRef as RefAttributes<Dialog>['ref'];\n"]}

package/dist/esm/drawer/index.d.ts

@@ -1,6 +1,12 @@
 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';
 export { type Drawer, DrawerUserDismissed, DrawerLocation };
 export declare const NimbleDrawer: import("@lit/react").ReactWebComponent<Drawer<void>, {}>;
-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 declare const fromDrawerRef: <T>(drawerRef: RefObject<Drawer<T> | null>) => RefAttributes<Drawer>["ref"];

package/dist/esm/drawer/index.js

@@ -3,4 +3,11 @@ import { DrawerLocation } from '@ni/nimble-components/dist/esm/drawer/types';
 import { wrap } from '../utilities/react-wrapper';
 export { DrawerUserDismissed, DrawerLocation };
 export const NimbleDrawer = wrap(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 = (drawerRef) => drawerRef;
 //# sourceMappingURL=index.js.map

package/dist/esm/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAe,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { Drawer, UserDismissed as DrawerUserDismissed } from '@ni/nimble-components/dist/esm/drawer';\nimport { DrawerLocation } from '@ni/nimble-components/dist/esm/drawer/types';\nimport type { LegacyRef } from 'react';\nimport { wrap } from '../utilities/react-wrapper';\n\nexport { type Drawer, DrawerUserDismissed, DrawerLocation };\nexport const NimbleDrawer = wrap(Drawer);\n\nexport type DrawerRef = LegacyRef<Drawer>;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AACrG,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD,OAAO,EAAe,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC5D,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAI,SAAsC,EAAgC,EAAE,CAAC,SAAyC,CAAC","sourcesContent":["import { Drawer, UserDismissed as DrawerUserDismissed } from '@ni/nimble-components/dist/esm/drawer';\nimport { DrawerLocation } from '@ni/nimble-components/dist/esm/drawer/types';\nimport type { RefAttributes, RefObject } from 'react';\nimport { wrap } from '../utilities/react-wrapper';\n\nexport { type Drawer, DrawerUserDismissed, DrawerLocation };\nexport const NimbleDrawer = wrap(Drawer);\n\n/**\n * Helper to assign Drawer refs with generics to ref bindings\n * See: https://github.com/ni/nimble/issues/2784\n * @param drawerRef A ref to a drawer created with `useRef`\n * @returns A ref type compatible with normal `ref` bindings\n */\nexport const fromDrawerRef = <T>(drawerRef: RefObject<Drawer<T> | null>): RefAttributes<Drawer>['ref'] => drawerRef as RefAttributes<Drawer>['ref'];\n"]}

package/dist/esm/table/index.d.ts

@@ -1,6 +1,6 @@
 import { Table } from '@ni/nimble-components/dist/esm/table';
 import type { TableActionMenuToggleEventDetail, TableRowExpansionToggleEventDetail, TableColumnConfigurationChangeEventDetail, TableRowSelectionEventDetail, TableRecord, TableSetRecordHierarchyOptions } from '@ni/nimble-components/dist/esm/table/types';
-import type { LegacyRef } from 'react';
+import type { RefAttributes, RefObject } from 'react';
 import { type EventName } from '../utilities/react-wrapper';
 export { type Table, type TableRecord, type TableSetRecordHierarchyOptions };
 export declare const NimbleTable: import("@lit/react").ReactWebComponent<Table<TableRecord>, {
@@ -25,4 +25,10 @@ export interface TableColumnConfigurationChangeEvent extends CustomEvent<TableCo
 export interface TableRowExpandToggleEvent extends CustomEvent<TableRowExpansionToggleEventDetail> {
     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 declare const fromTableRef: <T extends TableRecord>(tableRef: RefObject<Table<T> | null>) => RefAttributes<Table>["ref"];

package/dist/esm/table/index.js

@@ -10,4 +10,11 @@ export const NimbleTable = wrap(Table, {
         onRowExpandToggle: 'row-expand-toggle',
     }
 });
+/**
+ * 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 = (tableRef) => tableRef;
 //# sourceMappingURL=index.js.map

package/dist/esm/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAU7D,OAAO,EAAE,IAAI,EAAkB,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAqE,CAAC;AAC7E,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE;QACJ,wBAAwB,EAAE,0BAAyE;QACnG,kBAAkB,EAAE,oBAA6D;QACjF,iBAAiB,EAAE,kBAA0D;QAC7E,2BAA2B,EAAE,6BAA+E;QAC5G,iBAAiB,EAAE,mBAA2D;KACjF;CACJ,CAAC,CAAC","sourcesContent":["import { Table } from '@ni/nimble-components/dist/esm/table';\nimport type {\n    TableActionMenuToggleEventDetail,\n    TableRowExpansionToggleEventDetail,\n    TableColumnConfigurationChangeEventDetail,\n    TableRowSelectionEventDetail,\n    TableRecord,\n    TableSetRecordHierarchyOptions\n} from '@ni/nimble-components/dist/esm/table/types';\nimport type { LegacyRef } from 'react';\nimport { wrap, type EventName } from '../utilities/react-wrapper';\n\nexport { type Table, type TableRecord, type TableSetRecordHierarchyOptions };\nexport const NimbleTable = wrap(Table, {\n    events: {\n        onActionMenuBeforeToggle: 'action-menu-beforetoggle' as EventName<TableActionMenuBeforeToggleEvent>,\n        onActionMenuToggle: 'action-menu-toggle' as EventName<TableActionMenuToggleEvent>,\n        onSelectionChange: 'selection-change' as EventName<TableSelectionChangeEvent>,\n        onColumnConfigurationChange: 'column-configuration-change' as EventName<TableColumnConfigurationChangeEvent>,\n        onRowExpandToggle: 'row-expand-toggle' as EventName<TableRowExpandToggleEvent>,\n    }\n});\nexport interface TableActionMenuBeforeToggleEvent extends CustomEvent<TableActionMenuToggleEventDetail> {\n    target: Table;\n}\nexport interface TableActionMenuToggleEvent extends CustomEvent<TableActionMenuToggleEventDetail> {\n    target: Table;\n}\nexport interface TableSelectionChangeEvent extends CustomEvent<TableRowSelectionEventDetail> {\n    target: Table;\n}\nexport interface TableColumnConfigurationChangeEvent extends CustomEvent<TableColumnConfigurationChangeEventDetail> {\n    target: Table;\n}\nexport interface TableRowExpandToggleEvent extends CustomEvent<TableRowExpansionToggleEventDetail> {\n    target: Table;\n}\n\nexport type TableRef = LegacyRef<Table>;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAU7D,OAAO,EAAE,IAAI,EAAkB,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAqE,CAAC;AAC7E,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE;QACJ,wBAAwB,EAAE,0BAAyE;QACnG,kBAAkB,EAAE,oBAA6D;QACjF,iBAAiB,EAAE,kBAA0D;QAC7E,2BAA2B,EAAE,6BAA+E;QAC5G,iBAAiB,EAAE,mBAA2D;KACjF;CACJ,CAAC,CAAC;AAiBH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAwB,QAAoC,EAA+B,EAAE,CAAC,QAAuC,CAAC","sourcesContent":["import { Table } from '@ni/nimble-components/dist/esm/table';\nimport type {\n    TableActionMenuToggleEventDetail,\n    TableRowExpansionToggleEventDetail,\n    TableColumnConfigurationChangeEventDetail,\n    TableRowSelectionEventDetail,\n    TableRecord,\n    TableSetRecordHierarchyOptions\n} from '@ni/nimble-components/dist/esm/table/types';\nimport type { RefAttributes, RefObject } from 'react';\nimport { wrap, type EventName } from '../utilities/react-wrapper';\n\nexport { type Table, type TableRecord, type TableSetRecordHierarchyOptions };\nexport const NimbleTable = wrap(Table, {\n    events: {\n        onActionMenuBeforeToggle: 'action-menu-beforetoggle' as EventName<TableActionMenuBeforeToggleEvent>,\n        onActionMenuToggle: 'action-menu-toggle' as EventName<TableActionMenuToggleEvent>,\n        onSelectionChange: 'selection-change' as EventName<TableSelectionChangeEvent>,\n        onColumnConfigurationChange: 'column-configuration-change' as EventName<TableColumnConfigurationChangeEvent>,\n        onRowExpandToggle: 'row-expand-toggle' as EventName<TableRowExpandToggleEvent>,\n    }\n});\nexport interface TableActionMenuBeforeToggleEvent extends CustomEvent<TableActionMenuToggleEventDetail> {\n    target: Table;\n}\nexport interface TableActionMenuToggleEvent extends CustomEvent<TableActionMenuToggleEventDetail> {\n    target: Table;\n}\nexport interface TableSelectionChangeEvent extends CustomEvent<TableRowSelectionEventDetail> {\n    target: Table;\n}\nexport interface TableColumnConfigurationChangeEvent extends CustomEvent<TableColumnConfigurationChangeEventDetail> {\n    target: Table;\n}\nexport interface TableRowExpandToggleEvent extends CustomEvent<TableRowExpansionToggleEventDetail> {\n    target: Table;\n}\n\n/**\n * Helper to assign Table refs with generics to ref bindings\n * See: https://github.com/ni/nimble/issues/2784\n * @param tableRef A ref to a table created with `useRef`\n * @returns A ref type compatible with normal `ref` bindings\n */\nexport const fromTableRef = <T extends TableRecord>(tableRef: RefObject<Table<T> | null>): RefAttributes<Table>['ref'] => tableRef as RefAttributes<Table>['ref'];\n"]}

package/dist/esm/utilities/{react-wrapper/index.js → react-wrapper.js}

@@ -9,4 +9,4 @@ export function wrap(elementClass, options = {}) {
         tagName: customElements.getName(elementClass)
     });
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=react-wrapper.js.map

package/dist/esm/utilities/react-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-wrapper.js","sourceRoot":"","sources":["../../../src/utilities/react-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,MAAM,YAAY,CAAC;AAW5C,MAAM,UAAU,IAAI,CAChB,YAA4B,EAC5B,UAAsB,EAAE;IAExB,OAAO,eAAe,CAAO;QACzB,GAAG,OAAO;QACV,YAAY;QACZ,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,YAAY,CAAE;KACjD,CAAC,CAAC;AACP,CAAC","sourcesContent":["import type { EventName, Options, ReactWebComponent } from '@lit/react';\nimport { createComponent } from '@lit/react';\nimport React from 'react';\n\nexport { type EventName } from '@lit/react';\nexport interface EventNames {\n    [key: string]: EventName | string;\n}\n\ntype Constructor<T> = new () => T;\ntype Opts<\n    I extends HTMLElement,\n    E extends EventNames = NonNullable<unknown>\n> = Omit<Options<I, E>, 'elementClass' | 'react' | 'tagName'>;\n\nexport function wrap<I extends HTMLElement, E extends EventNames = NonNullable<unknown>>(\n    elementClass: Constructor<I>,\n    options: Opts<I, E> = {},\n): ReactWebComponent<I, E> {\n    return createComponent<I, E>({\n        ...options,\n        elementClass,\n        react: React,\n        tagName: customElements.getName(elementClass)!\n    });\n}\n"]}

package/package.json

@@ -1,17 +1,38 @@
 {
   "name": "@ni/nimble-react",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "description": "React components for the NI Nimble Design System",
   "keywords": [
     "ni",
     "nimble",
     "react"
   ],
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles/*": "./styles/*",
+    "./icons/*": {
+      "types": "./dist/esm/icons/*.d.ts",
+      "import": "./dist/esm/icons/*.js"
+    },
+    "./*": {
+      "types": "./dist/esm/*.d.ts",
+      "import": "./dist/esm/*/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "icons/*": [
+        "dist/esm/icons/*.d.ts"
+      ],
+      "*": [
+        "dist/esm/*/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "build": "npm run build:icons && npm run build:components",
-    "build:icons": "npm run build:icons:bundle && npm run build:icons:run",
-    "build:icons:bundle": "rollup --bundleConfigAsCjs --config build/generate-icons/rollup.config.js",
-    "build:icons:run": "node build/generate-icons/dist/index.js",
+    "build:icons": "node build/generate-icons.mjs",
     "build:components": "tsc -p ./tsconfig.json",
     "lint": "eslint .",
     "format": "eslint . --fix",
@@ -32,8 +53,6 @@
     "@ni/fast-web-utilities": "^10.0.0",
     "@ni/nimble-components": "^34.10.3",
     "@ni/nimble-tokens": "^8.13.6",
-    "@rollup/plugin-node-resolve": "^16.0.0",
-    "rollup": "^4.12.0",
     "typescript": "~5.8.3"
   },
   "peerDependencies": {

package/styles/fonts.scss

@@ -0,0 +1,4 @@
+// Nimble React Fonts SCSS
+// Only @use once in the global styles.scss
+
+@forward '@ni/nimble-components/dist/fonts';

package/styles/tokens.scss

@@ -0,0 +1,4 @@
+// Nimble React Tokens SCSS
+// @use once per SCSS file that is leveraging the tokens (helpful for autocomplete features, etc)
+
+@forward '@ni/nimble-components/dist/tokens';

package/dist/esm/utilities/react-wrapper/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/utilities/react-wrapper/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,MAAM,YAAY,CAAC;AAW5C,MAAM,UAAU,IAAI,CAChB,YAA4B,EAC5B,UAAsB,EAAE;IAExB,OAAO,eAAe,CAAO;QACzB,GAAG,OAAO;QACV,YAAY;QACZ,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,YAAY,CAAE;KACjD,CAAC,CAAC;AACP,CAAC","sourcesContent":["import type { EventName, Options, ReactWebComponent } from '@lit/react';\nimport { createComponent } from '@lit/react';\nimport React from 'react';\n\nexport { type EventName } from '@lit/react';\nexport interface EventNames {\n    [key: string]: EventName | string;\n}\n\ntype Constructor<T> = new () => T;\ntype Opts<\n    I extends HTMLElement,\n    E extends EventNames = NonNullable<unknown>\n> = Omit<Options<I, E>, 'elementClass' | 'react' | 'tagName'>;\n\nexport function wrap<I extends HTMLElement, E extends EventNames = NonNullable<unknown>>(\n    elementClass: Constructor<I>,\n    options: Opts<I, E> = {},\n): ReactWebComponent<I, E> {\n    return createComponent<I, E>({\n        ...options,\n        elementClass,\n        react: React,\n        tagName: customElements.getName(elementClass)!\n    });\n}\n"]}