npm - @veeqo/ui - Versions diffs - 9.9.1 → 9.9.2 - Mend

@veeqo/ui 9.9.1 → 9.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/components/DataGrid/DataGrid.cjs CHANGED Viewed

@@ -15,6 +15,9 @@ var Footer = require('./components/Footer/Footer.cjs');
 var GridContainer = require('./components/GridContainer/GridContainer.cjs');
 var useSortingState = require('./hooks/useSortingState.cjs');
 var usePinnedColumnLayout = require('./hooks/usePinnedColumnLayout.cjs');
+var useSelectionState = require('./hooks/useSelectionState.cjs');
+var constants = require('./constants.cjs');
+var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -38,20 +41,32 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = React.useRef(null);
     const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
     const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(), []);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Hooks to handle state for selection and sorting.
+     */
+    const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
+        selectionMode,
+        selectedRows,
+        disabledRows,
+        onSelectionChanged,
+    });
+    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
     /**
      * Mapping of column definitions.
      */
     const columnMapper = React.useRef(new ColumnMapper.ColumnMapper());
     const mappedColumnDefinitions = React.useMemo(() => {
         const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        if (enableRowSelection) {
+            mappedColumns.unshift(SelectionColumnDefinition.SelectionColumnDefinition);
+        }
         return mappedColumns;
-    }, [columns]);
-    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
+    }, [columns, enableRowSelection]);
     /**
      * Stable references for column states (visibility, order, pinning).
      */
@@ -60,8 +75,12 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         if (!columnOrdering || columnOrdering.length === 0) {
             return undefined;
         }
+        // If we have a custom column order, we need to make sure the selection column always appears first.
+        if (enableRowSelection) {
+            return ['selection', ...columnOrdering];
+        }
         return columnOrdering;
-    }, [columnOrdering]);
+    }, [columnOrdering, enableRowSelection]);
     // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
     const columnVisibility = React.useMemo(() => {
         // We can't have no columns visible - if the array is empty we show them all.
@@ -76,11 +95,16 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     // Pinned columns
     const columnPinning = React.useMemo(() => {
         var _a, _b;
+        let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
+        // If we have any left-pinned columns, we need to include the selection column as it should appear first.
+        if (enableRowSelection && left.length > 0) {
+            left = [constants.SELECTION_COLUMN_ID, ...left];
+        }
         return {
-            left: (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [],
+            left,
             right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
         };
-    }, [pinnedColumns]);
+    }, [pinnedColumns, enableRowSelection]);
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -102,12 +126,17 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         onSortingChange,
         // Pinning
         enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,
+        // Selection
+        enableRowSelection,
+        enableMultiRowSelection,
+        onRowSelectionChange,
         // Inject external table state
         state: {
             columnOrder,
             columnVisibility,
             columnPinning,
             sorting,
+            rowSelection,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState } from './hooks';\n\n/*\n [WIP]\n \n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n\n sortState,\n onSortChanged,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n const containerRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n const ariaRoles = useMemo(() => getAriaRoles(), []);\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Mapping of column definitions.\n /\n const columnMapper = useRef(new ColumnMapper());\n const mappedColumnDefinitions = useMemo(() => {\n const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n return mappedColumns;\n }, [columns]);\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n /\n Stable references for column states (visibility, order, pinning).\n /\n\n // Column render order - the order of the array indicates the order on screen.\n const columnOrder = useMemo(() => {\n if (!columnOrdering \|\| columnOrdering.length === 0) {\n return undefined;\n }\n\n return columnOrdering;\n }, [columnOrdering]);\n\n // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n const columnVisibility = useMemo(() => {\n // We can't have no columns visible - if the array is empty we show them all.\n if (!hiddenColumns \|\| hiddenColumns.length === columns.length) {\n return undefined;\n }\n\n return columns.reduce(\n (acc, column) => ({\n ...acc,\n [column.id]: !hiddenColumns.includes(column.id),\n }),\n {},\n );\n }, [hiddenColumns, columns]);\n\n // Pinned columns\n const columnPinning = useMemo(() => {\n return {\n left: pinnedColumns?.left ?? [],\n right: pinnedColumns?.right ?? [],\n };\n }, [pinnedColumns]);\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n return (\n <GridContainer\n containerRef={containerRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {table.getState().columnSizingInfo.isResizingColumn ? (\n <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n ) : (\n <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n )}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","ColumnMapper","useSortingState","useReactTable","getCoreRowModel","usePinnedColumnLayout","useDragToScroll","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\n\n/*\n [WIP]\n \n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n const containerRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n const ariaRoles = useMemo(() => getAriaRoles(), []);\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection and sorting.\n /\n\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n /\n Mapping of column definitions.\n /\n const columnMapper = useRef(new ColumnMapper());\n const mappedColumnDefinitions = useMemo(() => {\n const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n if (enableRowSelection) {\n mappedColumns.unshift(SelectionColumnDefinition);\n }\n\n return mappedColumns;\n }, [columns, enableRowSelection]);\n\n /\n Stable references for column states (visibility, order, pinning).\n /\n\n // Column render order - the order of the array indicates the order on screen.\n const columnOrder = useMemo(() => {\n if (!columnOrdering \|\| columnOrdering.length === 0) {\n return undefined;\n }\n\n // If we have a custom column order, we need to make sure the selection column always appears first.\n if (enableRowSelection) {\n return ['selection', ...columnOrdering];\n }\n\n return columnOrdering;\n }, [columnOrdering, enableRowSelection]);\n\n // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n const columnVisibility = useMemo(() => {\n // We can't have no columns visible - if the array is empty we show them all.\n if (!hiddenColumns \|\| hiddenColumns.length === columns.length) {\n return undefined;\n }\n\n return columns.reduce(\n (acc, column) => ({\n ...acc,\n [column.id]: !hiddenColumns.includes(column.id),\n }),\n {},\n );\n }, [hiddenColumns, columns]);\n\n // Pinned columns\n const columnPinning = useMemo(() => {\n let left = pinnedColumns?.left ?? [];\n\n // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n if (enableRowSelection && left.length > 0) {\n left = [SELECTION_COLUMN_ID, ...left];\n }\n\n return {\n left,\n right: pinnedColumns?.right ?? [],\n };\n }, [pinnedColumns, enableRowSelection]);\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n return (\n <GridContainer\n containerRef={containerRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {table.getState().columnSizingInfo.isResizingColumn ? (\n <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n ) : (\n <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n )}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","ColumnMapper","SelectionColumnDefinition","SELECTION_COLUMN_ID","useReactTable","getCoreRowModel","usePinnedColumnLayout","useDragToScroll","React","GridContainer","Columns","Header","MemoizedBody","Body","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.d.ts CHANGED Viewed

@@ -18,4 +18,4 @@ import { DataGridProps } from './types';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js CHANGED Viewed

@@ -13,6 +13,9 @@ import { Footer } from './components/Footer/Footer.js';
 import { GridContainer } from './components/GridContainer/GridContainer.js';
 import { useSortingState } from './hooks/useSortingState.js';
 import { usePinnedColumnLayout } from './hooks/usePinnedColumnLayout.js';
+import { useSelectionState } from './hooks/useSelectionState.js';
+import { SELECTION_COLUMN_ID } from './constants.js';
+import { SelectionColumnDefinition } from './columns/SelectionColumnDefinition.js';
 /**
  * [WIP]
@@ -32,20 +35,32 @@ import { usePinnedColumnLayout } from './hooks/usePinnedColumnLayout.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = useRef(null);
     const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
     const ariaRoles = useMemo(() => getAriaRoles(), []);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
+    /**
+     * Hooks to handle state for selection and sorting.
+     */
+    const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState({
+        selectionMode,
+        selectedRows,
+        disabledRows,
+        onSelectionChanged,
+    });
+    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
     /**
      * Mapping of column definitions.
      */
     const columnMapper = useRef(new ColumnMapper());
     const mappedColumnDefinitions = useMemo(() => {
         const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        if (enableRowSelection) {
+            mappedColumns.unshift(SelectionColumnDefinition);
+        }
         return mappedColumns;
-    }, [columns]);
-    const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
+    }, [columns, enableRowSelection]);
     /**
      * Stable references for column states (visibility, order, pinning).
      */
@@ -54,8 +69,12 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         if (!columnOrdering || columnOrdering.length === 0) {
             return undefined;
         }
+        // If we have a custom column order, we need to make sure the selection column always appears first.
+        if (enableRowSelection) {
+            return ['selection', ...columnOrdering];
+        }
         return columnOrdering;
-    }, [columnOrdering]);
+    }, [columnOrdering, enableRowSelection]);
     // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
     const columnVisibility = useMemo(() => {
         // We can't have no columns visible - if the array is empty we show them all.
@@ -70,11 +89,16 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
     // Pinned columns
     const columnPinning = useMemo(() => {
         var _a, _b;
+        let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
+        // If we have any left-pinned columns, we need to include the selection column as it should appear first.
+        if (enableRowSelection && left.length > 0) {
+            left = [SELECTION_COLUMN_ID, ...left];
+        }
         return {
-            left: (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [],
+            left,
             right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
         };
-    }, [pinnedColumns]);
+    }, [pinnedColumns, enableRowSelection]);
     /**
      * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as
      * column visibility and ordering.
@@ -96,12 +120,17 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         onSortingChange,
         // Pinning
         enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,
+        // Selection
+        enableRowSelection,
+        enableMultiRowSelection,
+        onRowSelectionChange,
         // Inject external table state
         state: {
             columnOrder,
             columnVisibility,
             columnPinning,
             sorting,
+            rowSelection,
         },
     });
     /**

package/dist/components/DataGrid/DataGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState } from './hooks';\n\n/*\n [WIP]\n \n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n\n sortState,\n onSortChanged,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n const containerRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n const ariaRoles = useMemo(() => getAriaRoles(), []);\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Mapping of column definitions.\n /\n const columnMapper = useRef(new ColumnMapper());\n const mappedColumnDefinitions = useMemo(() => {\n const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n return mappedColumns;\n }, [columns]);\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n /\n Stable references for column states (visibility, order, pinning).\n /\n\n // Column render order - the order of the array indicates the order on screen.\n const columnOrder = useMemo(() => {\n if (!columnOrdering \|\| columnOrdering.length === 0) {\n return undefined;\n }\n\n return columnOrdering;\n }, [columnOrdering]);\n\n // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n const columnVisibility = useMemo(() => {\n // We can't have no columns visible - if the array is empty we show them all.\n if (!hiddenColumns \|\| hiddenColumns.length === columns.length) {\n return undefined;\n }\n\n return columns.reduce(\n (acc, column) => ({\n ...acc,\n [column.id]: !hiddenColumns.includes(column.id),\n }),\n {},\n );\n }, [hiddenColumns, columns]);\n\n // Pinned columns\n const columnPinning = useMemo(() => {\n return {\n left: pinnedColumns?.left ?? [],\n right: pinnedColumns?.right ?? [],\n };\n }, [pinnedColumns]);\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n return (\n <GridContainer\n containerRef={containerRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {table.getState().columnSizingInfo.isResizingColumn ? (\n <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n ) : (\n <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n )}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { ColumnMapper, getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { MemoizedBody } from './components/Body';\n\nimport { usePinnedColumnLayout, useSortingState } from './hooks';\n\nimport { useSelectionState } from './hooks/useSelectionState';\nimport { SELECTION_COLUMN_ID } from './constants';\nimport { SelectionColumnDefinition } from './columns';\n\n/*\n [WIP]\n \n A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n \n Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n \n Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n \n Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.\n /\nexport const DataGrid = ({\n density = 'base',\n striped = true,\n borderMode = 'full',\n resizeMode = 'off',\n containerStyle,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n const containerRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);\n const ariaRoles = useMemo(() => getAriaRoles(), []);\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection and sorting.\n /\n\n const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n useSelectionState({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n });\n\n const {\n enableSorting,\n enableMultiRemove,\n enableSortingRemoval,\n manualSorting,\n sorting,\n onSortingChange,\n } = useSortingState({ columns, sortState, onSortChanged });\n\n /\n Mapping of column definitions.\n /\n const columnMapper = useRef(new ColumnMapper());\n const mappedColumnDefinitions = useMemo(() => {\n const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n if (enableRowSelection) {\n mappedColumns.unshift(SelectionColumnDefinition);\n }\n\n return mappedColumns;\n }, [columns, enableRowSelection]);\n\n /\n Stable references for column states (visibility, order, pinning).\n /\n\n // Column render order - the order of the array indicates the order on screen.\n const columnOrder = useMemo(() => {\n if (!columnOrdering \|\| columnOrdering.length === 0) {\n return undefined;\n }\n\n // If we have a custom column order, we need to make sure the selection column always appears first.\n if (enableRowSelection) {\n return ['selection', ...columnOrdering];\n }\n\n return columnOrdering;\n }, [columnOrdering, enableRowSelection]);\n\n // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n const columnVisibility = useMemo(() => {\n // We can't have no columns visible - if the array is empty we show them all.\n if (!hiddenColumns \|\| hiddenColumns.length === columns.length) {\n return undefined;\n }\n\n return columns.reduce(\n (acc, column) => ({\n ...acc,\n [column.id]: !hiddenColumns.includes(column.id),\n }),\n {},\n );\n }, [hiddenColumns, columns]);\n\n // Pinned columns\n const columnPinning = useMemo(() => {\n let left = pinnedColumns?.left ?? [];\n\n // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n if (enableRowSelection && left.length > 0) {\n left = [SELECTION_COLUMN_ID, ...left];\n }\n\n return {\n left,\n right: pinnedColumns?.right ?? [],\n };\n }, [pinnedColumns, enableRowSelection]);\n\n /\n Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n * column visibility and ordering.\n /\n const table = useReactTable<any>({\n data,\n columns: mappedColumnDefinitions,\n\n // Column settings\n columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n enableColumnResizing,\n\n // Row model\n getRowId,\n getCoreRowModel: getCoreRowModel(),\n\n // Sorting\n enableSorting,\n enableSortingRemoval,\n enableMultiRemove,\n manualSorting,\n onSortingChange,\n\n // Pinning\n enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n // Selection\n enableRowSelection,\n enableMultiRowSelection,\n onRowSelectionChange,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n },\n });\n\n /\n Pinned column layout\n /\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n /\n Other hooks\n /\n useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n\n return (\n <GridContainer\n containerRef={containerRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {table.getState().columnSizingInfo.isResizingColumn ? (\n <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />\n ) : (\n <Body table={table} ariaRoles={ariaRoles} striped={striped} />\n )}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs ADDED Viewed

@@ -0,0 +1,36 @@
+'use strict';
+var React = require('react');
+var Checkbox = require('../../Checkbox/Checkbox.cjs');
+var Radio = require('../../Radio/Radio.cjs');
+var constants = require('../constants.cjs');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+const headerRenderer = ({ table }) => table.options.enableMultiRowSelection && (React__default.default.createElement(Checkbox.Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => table.toggleAllRowsSelected() }));
+const cellRenderer = ({ row }) => {
+    if (row.getCanMultiSelect()) {
+        return (React__default.default.createElement(Checkbox.Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+    }
+    return (React__default.default.createElement(Radio.Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+};
+const SelectionColumnDefinition = {
+    id: constants.SELECTION_COLUMN_ID,
+    header: headerRenderer,
+    cell: cellRenderer,
+    size: 50,
+    minSize: 50,
+    maxSize: 50,
+    enableResizing: false,
+    enableSorting: false,
+    meta: {
+        rowHeader: false,
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+};
+exports.SelectionColumnDefinition = SelectionColumnDefinition;
+//# sourceMappingURL=SelectionColumnDefinition.cjs.map

package/dist/components/DataGrid/columns/SelectionColumnDefinition.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SelectionColumnDefinition.cjs","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) =>\n table.options.enableMultiRowSelection && (\n <Checkbox\n ariaLabel=\"Select all rows\"\n indeterminate={table.getIsSomeRowsSelected()}\n checked={table.getIsAllRowsSelected()}\n onChange={() => table.toggleAllRowsSelected()}\n />\n );\n\nconst cellRenderer = ({ row }: { row: Row<any> }) => {\n if (row.getCanMultiSelect()) {\n return (\n <Checkbox\n ariaLabel=\"Select row\"\n checked={row.getIsSelected()}\n onChange={row.getToggleSelectedHandler()}\n disabled={!row.getCanSelect()}\n />\n );\n }\n\n return (\n <Radio\n aria-label=\"Select row\"\n checked={row.getIsSelected()}\n onChange={row.getToggleSelectedHandler()}\n disabled={!row.getCanSelect()}\n />\n );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n id: SELECTION_COLUMN_ID,\n header: headerRenderer,\n cell: cellRenderer,\n size: 50,\n minSize: 50,\n maxSize: 50,\n enableResizing: false,\n enableSorting: false,\n meta: {\n rowHeader: false,\n justifyContent: 'center',\n textAlign: 'center',\n },\n};\n"],"names":["React","Checkbox","Radio","SELECTION_COLUMN_ID"],"mappings":";;;;;;;;;;;AASA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KACtD,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EACP,EAAA,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAM,KAAK,CAAC,qBAAqB,EAAE,EAC7C,CAAA,CACH;AAEH,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAqB,KAAI;AAClD,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACED,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEL;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,WAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAEC,6BAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}

package/dist/components/DataGrid/columns/SelectionColumnDefinition.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { DisplayColumnDef } from '@tanstack/react-table';
2	+ export declare const SelectionColumnDefinition: DisplayColumnDef<any>;

package/dist/components/DataGrid/columns/SelectionColumnDefinition.js ADDED Viewed

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Radio } from '../../Radio/Radio.js';
+import { SELECTION_COLUMN_ID } from '../constants.js';
+const headerRenderer = ({ table }) => table.options.enableMultiRowSelection && (React__default.createElement(Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => table.toggleAllRowsSelected() }));
+const cellRenderer = ({ row }) => {
+    if (row.getCanMultiSelect()) {
+        return (React__default.createElement(Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+    }
+    return (React__default.createElement(Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+};
+const SelectionColumnDefinition = {
+    id: SELECTION_COLUMN_ID,
+    header: headerRenderer,
+    cell: cellRenderer,
+    size: 50,
+    minSize: 50,
+    maxSize: 50,
+    enableResizing: false,
+    enableSorting: false,
+    meta: {
+        rowHeader: false,
+        justifyContent: 'center',
+        textAlign: 'center',
+    },
+};
+export { SelectionColumnDefinition };
+//# sourceMappingURL=SelectionColumnDefinition.js.map

package/dist/components/DataGrid/columns/SelectionColumnDefinition.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SelectionColumnDefinition.js","sources":["../../../../src/components/DataGrid/columns/SelectionColumnDefinition.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayColumnDef, Row, Table } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\n\nimport { SELECTION_COLUMN_ID } from '../constants';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) =>\n table.options.enableMultiRowSelection && (\n <Checkbox\n ariaLabel=\"Select all rows\"\n indeterminate={table.getIsSomeRowsSelected()}\n checked={table.getIsAllRowsSelected()}\n onChange={() => table.toggleAllRowsSelected()}\n />\n );\n\nconst cellRenderer = ({ row }: { row: Row<any> }) => {\n if (row.getCanMultiSelect()) {\n return (\n <Checkbox\n ariaLabel=\"Select row\"\n checked={row.getIsSelected()}\n onChange={row.getToggleSelectedHandler()}\n disabled={!row.getCanSelect()}\n />\n );\n }\n\n return (\n <Radio\n aria-label=\"Select row\"\n checked={row.getIsSelected()}\n onChange={row.getToggleSelectedHandler()}\n disabled={!row.getCanSelect()}\n />\n );\n};\n\nexport const SelectionColumnDefinition: DisplayColumnDef<any> = {\n id: SELECTION_COLUMN_ID,\n header: headerRenderer,\n cell: cellRenderer,\n size: 50,\n minSize: 50,\n maxSize: 50,\n enableResizing: false,\n enableSorting: false,\n meta: {\n rowHeader: false,\n justifyContent: 'center',\n textAlign: 'center',\n },\n};\n"],"names":["React"],"mappings":";;;;;AASA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KACtD,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,cAAA,CAAA,aAAA,CAAC,QAAQ,EACP,EAAA,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAM,KAAK,CAAC,qBAAqB,EAAE,EAC7C,CAAA,CACH;AAEH,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAqB,KAAI;AAClD,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEL;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACO,YAAY,EACvB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,EACxC,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAAA,CAC7B;AAEN,CAAC;AAEY,MAAA,yBAAyB,GAA0B;AAC9D,IAAA,EAAE,EAAE,mBAAmB;AACvB,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,IAAI,EAAE,EAAE;AACR,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,cAAc,EAAE,KAAK;AACrB,IAAA,aAAa,EAAE,KAAK;AACpB,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,KAAK;AAChB,QAAA,cAAc,EAAE,QAAQ;AACxB,QAAA,SAAS,EAAE,QAAQ;AACpB,KAAA;;;;;"}

package/dist/components/DataGrid/columns/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SelectionColumnDefinition } from './SelectionColumnDefinition';

package/dist/components/DataGrid/constants.cjs CHANGED Viewed

@@ -4,9 +4,11 @@ const DEFAULT_COLUMN_WIDTH = 200;
 const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;
 const DEFAULT_CELL_ALIGN = 'left';
+const SELECTION_COLUMN_ID = 'selection';
 exports.DEFAULT_CELL_ALIGN = DEFAULT_CELL_ALIGN;
 exports.DEFAULT_COLUMN_MAXIMUM_WIDTH = DEFAULT_COLUMN_MAXIMUM_WIDTH;
 exports.DEFAULT_COLUMN_MINIMUM_WIDTH = DEFAULT_COLUMN_MINIMUM_WIDTH;
 exports.DEFAULT_COLUMN_WIDTH = DEFAULT_COLUMN_WIDTH;
+exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/DataGrid/constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.cjs","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n"],"names":[],"mappings":";;AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG~~;;;;;;;~~"}
1	+ {"version":3,"file":"constants.cjs","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n\nexport const SELECTION_COLUMN_ID = 'selection';\n"],"names":[],"mappings":";;AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;AAE3B,MAAM,mBAAmB,GAAG;;;;;;;;"}

package/dist/components/DataGrid/constants.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ export declare const DEFAULT_COLUMN_WIDTH = 200;
 export declare const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 export declare const DEFAULT_COLUMN_MAXIMUM_WIDTH: number;
 export declare const DEFAULT_CELL_ALIGN = "left";
+export declare const SELECTION_COLUMN_ID = "selection";

package/dist/components/DataGrid/constants.js CHANGED Viewed

@@ -2,6 +2,7 @@ const DEFAULT_COLUMN_WIDTH = 200;
 const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;
 const DEFAULT_CELL_ALIGN = 'left';
+const SELECTION_COLUMN_ID = 'selection';
-export { DEFAULT_CELL_ALIGN, DEFAULT_COLUMN_MAXIMUM_WIDTH, DEFAULT_COLUMN_MINIMUM_WIDTH, DEFAULT_COLUMN_WIDTH };
+export { DEFAULT_CELL_ALIGN, DEFAULT_COLUMN_MAXIMUM_WIDTH, DEFAULT_COLUMN_MINIMUM_WIDTH, DEFAULT_COLUMN_WIDTH, SELECTION_COLUMN_ID };
 //# sourceMappingURL=constants.js.map

package/dist/components/DataGrid/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;;;;"}
1	+ {"version":3,"file":"constants.js","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n\nexport const SELECTION_COLUMN_ID = 'selection';\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;AAE3B,MAAM,mBAAmB,GAAG;;;;"}

package/dist/components/DataGrid/hooks/useSelectionState.cjs ADDED Viewed

@@ -0,0 +1,51 @@
+'use strict';
+var React = require('react');
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = React.useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = React.useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = React.useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = React.useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+exports.useSelectionState = useSelectionState;
+//# sourceMappingURL=useSelectionState.cjs.map

package/dist/components/DataGrid/hooks/useSelectionState.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSelectionState.cjs","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n selectionMode?: SelectionMode;\n selectedRows?: string[];\n disabledRows?: string[];\n onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n}: UseSelectionProps) => {\n const internalSelectionState: RowSelectionState = useMemo(() => {\n if (!selectedRows || !onSelectionChanged) return {};\n\n return selectedRows.reduce(\n (acc, rowId) => ({\n ...acc,\n [rowId]: true,\n }),\n {},\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedRows]);\n\n const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n (onUpdate) => {\n if (!onSelectionChanged) return;\n\n const newSelectionState =\n typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n const rowIds = Object.entries(newSelectionState)\n .filter(([, selected]) => selected)\n .map(([rowId]) => rowId);\n\n onSelectionChanged(rowIds);\n },\n [onSelectionChanged, internalSelectionState],\n );\n\n // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n // array of disabled row ID's.\n const enableRowSelection = useMemo(() => {\n if (selectedRows === undefined || onSelectionChanged === undefined) {\n return false;\n }\n\n return (row: Row<any>) => !disabledRows?.includes(row.id);\n }, [selectedRows, onSelectionChanged, disabledRows]);\n\n const enableMultiRowSelection = useMemo(() => {\n if (!enableRowSelection) {\n return false;\n }\n return selectionMode === 'multiple';\n }, [enableRowSelection, selectionMode]);\n\n return {\n enableRowSelection,\n enableMultiRowSelection,\n rowSelection: internalSelectionState,\n onRowSelectionChange: setInternalSelectionState,\n };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsBA,aAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkCC,iBAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAGD,aAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAGA,aAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSelectionState.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
+import { SelectionMode } from '../types/enums';
+type UseSelectionProps = {
+    selectionMode?: SelectionMode;
+    selectedRows?: string[];
+    disabledRows?: string[];
+    onSelectionChanged?: (rowIds: string[]) => void;
+};
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+export declare const useSelectionState: ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }: UseSelectionProps) => {
+    enableRowSelection: boolean | ((row: Row<any>) => boolean);
+    enableMultiRowSelection: boolean;
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: OnChangeFn<RowSelectionState>;
+};
+export {};

package/dist/components/DataGrid/hooks/useSelectionState.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { useMemo, useCallback } from 'react';
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+export { useSelectionState };
+//# sourceMappingURL=useSelectionState.js.map

package/dist/components/DataGrid/hooks/useSelectionState.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSelectionState.js","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n selectionMode?: SelectionMode;\n selectedRows?: string[];\n disabledRows?: string[];\n onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n}: UseSelectionProps) => {\n const internalSelectionState: RowSelectionState = useMemo(() => {\n if (!selectedRows || !onSelectionChanged) return {};\n\n return selectedRows.reduce(\n (acc, rowId) => ({\n ...acc,\n [rowId]: true,\n }),\n {},\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedRows]);\n\n const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n (onUpdate) => {\n if (!onSelectionChanged) return;\n\n const newSelectionState =\n typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n const rowIds = Object.entries(newSelectionState)\n .filter(([, selected]) => selected)\n .map(([rowId]) => rowId);\n\n onSelectionChanged(rowIds);\n },\n [onSelectionChanged, internalSelectionState],\n );\n\n // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n // array of disabled row ID's.\n const enableRowSelection = useMemo(() => {\n if (selectedRows === undefined || onSelectionChanged === undefined) {\n return false;\n }\n\n return (row: Row<any>) => !disabledRows?.includes(row.id);\n }, [selectedRows, onSelectionChanged, disabledRows]);\n\n const enableMultiRowSelection = useMemo(() => {\n if (!enableRowSelection) {\n return false;\n }\n return selectionMode === 'multiple';\n }, [enableRowSelection, selectionMode]);\n\n return {\n enableRowSelection,\n enableMultiRowSelection,\n rowSelection: internalSelectionState,\n onRowSelectionChange: setInternalSelectionState,\n };\n};\n"],"names":[],"mappings":";;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsB,OAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkC,WAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/types/DataGridProps.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { AriaAttributes, ReactElement } from 'react';
 import { SizeScale } from 'Theme/modules/sizes';
-import { BorderMode, ResizeMode } from './enums';
+import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
@@ -82,4 +82,21 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Handler called when the sort state changes.
      */
     onSortChanged?: (sortState: SortState) => void;
+    /** Selection */
+    /**
+     * The selection mode, single or multiple.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * An array of row ID's that are selected in the grid.
+     */
+    selectedRows?: string[];
+    /**
+     * An array of row ID's that are disabled.
+     */
+    disabledRows?: string[];
+    /**
+     * Handler called when the row selection is changed.
+     */
+    onSelectionChanged?: (selectedRows: string[]) => void;
 };

package/dist/components/DataGrid/types/enums.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export type ResizeMode = 'onChange' | 'onEnd' | 'off';
 export type BorderMode = 'full' | 'vertical' | 'none';
 export type SortDirection = 'asc' | 'desc';
+export type SelectionMode = 'single' | 'multiple';

package/dist/components/DataGrid/types/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { ResizeMode, BorderMode } from './enums';
+export { ResizeMode, BorderMode, SelectionMode, SortDirection } from './enums';
 export { DataGridProps } from './DataGridProps';
 export { AriaRoles } from './AriaRoles';
 export { ColumnDefinition } from './ColumnDefinition';

package/dist/components/Radio/Radio.cjs CHANGED Viewed

@@ -9,13 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, ...otherProps }, ref) => {
+const Radio = React.forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = React.useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = id !== null && id !== undefined ? id : generateId.generateId('radio');
     return (React__default.default.createElement(Choice.Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
+        React__default.default.createElement(styled.Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
         children));
 });

package/dist/components/Radio/Radio.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,~~CAAC~~,~~EAAE~~,OAAO,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,QAAQ,~~EAAE~~,QAAQ,~~EAAE~~,EAAE,~~EAAE~~,QAAQ,EAAE,GAAG,UAAU,~~EAAc~~,~~EAAE~~,GAAG,~~KAAI~~;~~AAC7F~~,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,~~EACR~~,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","generateId","React","Choice","Input"],"mappings":";;;;;;;;;;;AAkBO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,aAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,YAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/dist/components/Radio/Radio.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import React, { AriaAttributes, ReactNode } from 'react';
 import { ForwardedChoiceProps } from '../Choice';
 type RadioValue = string | number;
-export interface RadioProps extends ForwardedChoiceProps {
+export interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {
     id?: string;
     className?: string;
     checked: boolean;

package/dist/components/Radio/Radio.js CHANGED Viewed

@@ -3,13 +3,13 @@ import { Choice } from '../Choice/Choice.js';
 import { Input } from './styled.js';
 import { generateId } from '../../utils/generateId.js';
-const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, ...otherProps }, ref) => {
+const Radio = forwardRef(({ checked, value, name, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
     const handleChange = useCallback((e) => {
         onChange(e.currentTarget.checked, value);
     }, [onChange, value]);
     const componentId = id !== null && id !== undefined ? id : generateId('radio');
     return (React__default.createElement(Choice, { id: componentId, disabled: disabled, ...otherProps },
-        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref }),
+        React__default.createElement(Input, { id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel }),
         children));
 });

package/dist/components/Radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n ({ checked, value, name, disabled, onChange, id, children, ...otherProps }: RadioProps, ref) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,~~CAAC~~,~~EAAE~~,OAAO,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,QAAQ,~~EAAE~~,QAAQ,~~EAAE~~,EAAE,~~EAAE~~,QAAQ,EAAE,GAAG,UAAU,~~EAAc~~,~~EAAE~~,GAAG,~~KAAI~~;~~AAC7F~~,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,~~EACR~~,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { Input } from './styled';\nimport { generateId } from '../../utils/generateId';\n\ntype RadioValue = string \| number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = id ?? generateId('radio');\n\n return (\n <Choice id={componentId} disabled={disabled} {...otherProps}>\n <Input\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AAkBO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;AAED,IAAA,MAAM,WAAW,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,SAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC;AAE7C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAM,UAAU,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EACJ,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,SAAS,EACrB,CAAA;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.9.1",
+  "version": "9.9.2",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",