npm - @veeqo/ui - Versions diffs - 13.7.1 → 13.8.0 - Mend

@veeqo/ui 13.7.1 → 13.8.0

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 (42) hide show

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

@@ -48,6 +48,13 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      */
     const containerRef = React.useRef(null);
     const tableRef = React.useRef(null);
+    /**
+     * Mutable object to track shift key state and last selected row for range selection.
+     */
+    const rangeSelectionState = React.useRef({
+        lastSelectedRowId: undefined,
+        isShiftKeyPressed: false,
+    }).current;
     const showFooter = React.useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
@@ -119,6 +126,9 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             expanded,
             columnSizing,
         },
+        meta: {
+            rangeSelectionState,
+        },
     });
     /**
      * Pinned column layout

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, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\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 enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\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 const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\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 onColumnSizingChange,\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 // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\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 useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;;;;;;;;;AAeG;AACU,MAAA,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,MAAM,EACnB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,wBAAwB,GAAG,KAAK,EAEhC,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EAEb,IAAI,EACJ,QAAQ,EACR,SAAS,EAET,SAAS,EACT,aAAa,EAEb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAElB,WAAW,EAEX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,eAAe,EAEf,UAAU,EACV,SAAS,EAET,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACT,KAAI;AAClB;;AAEG;AACH,IAAA,MAAM,YAAY,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,MAAM,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,YAAY,CAAC,EACjE,CAAC,SAAS,EAAE,OAAO,CAAC,CACrB;IACD,MAAM,SAAS,GAAGA,aAAO,CACvB,MAAMC,yBAAY,CAAC,EAAE,wBAAwB,EAAE,WAAW,EAAE,CAAC,EAC7D,CAAC,wBAAwB,EAAE,WAAW,CAAC,CACxC;AACD,IAAA,MAAM,oBAAoB,GAAGD,aAAO,CAAC,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;AAE9E;;AAEG;IACH,MAAM,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,YAAY,EAAE,oBAAoB,EAAE,GACvFE,mCAAiB,CAAC;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,EACJ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,eAAe,GAChB,GAAGC,+BAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;AAE1D,IAAA,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,GAChFC,iCAAgB,CAAC,WAAW,CAAC;AAE/B;;AAEG;IACH,MAAM,EAAE,uBAAuB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAGC,6BAAc,CAAC;QAC/F,OAAO;QACP,aAAa;QACb,cAAc;QACd,aAAa;QACb,kBAAkB,EAAE,CAAC,CAAC,kBAAkB;AACzC,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAGC,uCAAmB,CAAC;QACjE,uBAAuB;QACvB,YAAY;QACZ,gBAAgB;AACjB,KAAA,CAAC;AAEF;;;AAGG;IACH,MAAM,KAAK,GAAGC,wBAAa,CAAM;QAC/B,IAAI;AACJ,QAAA,OAAO,EAAE,uBAAuB;;QAGhC,gBAAgB,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,GAAG,UAAU;QAC/D,oBAAoB;QACpB,oBAAoB;;QAGpB,QAAQ;QACR,eAAe,EAAEC,0BAAe,EAAE;;QAGlC,aAAa;QACb,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;QACb,eAAe;;AAGf,QAAA,mBAAmB,EAAE,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;QAG/E,kBAAkB;QAClB,uBAAuB;QACvB,oBAAoB;;QAGpB,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,mBAAmB,EAAE,eAAe,GAAGC,8BAAmB,EAAE,GAAG,SAAS;;AAGxE,QAAA,KAAK,EAAE;YACL,WAAW;YACX,gBAAgB;YAChB,aAAa;YACb,OAAO;YACP,YAAY;YACZ,QAAQ;YACR,YAAY;AACb,SAAA;AACF,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE;;AAEG;IACHC,+BAAe,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,CAAC;AACzF,IAAAC,2CAAqB,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IAE7D,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOC,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,aAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI;AAC9F;AAED,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,YAAA,OAAOD,sBAAC,CAAA,aAAA,CAAAE,mBAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAI;AACjF;AAED,QAAA,MAAM,SAAS,GAAG;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,SAAS;SACV;QAED,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;AACtD,YAAA,OAAOF,sBAAC,CAAA,aAAA,CAAAG,iBAAY,EAAK,EAAA,GAAA,SAAS,GAAI;AACvC;AAED,QAAA,OAAOH,sBAAC,CAAA,aAAA,CAAAI,SAAI,EAAK,EAAA,GAAA,SAAS,GAAI;AAChC,KAAC;IAED,QACEJ,qCAACK,2BAAa,EAAA,EACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,wBAAwB,EAAE,EACnE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,oBAAoB,EAC7C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EAAA,YAAA,EACR,SAAS,EAAA;AAGpB,QAAA,oBAAoB,IAAIL,sBAAC,CAAA,aAAA,CAAAM,eAAO,IAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGlD,QAAAN,sBAAA,CAAA,aAAA,CAACO,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGvB,QAAA,UAAU,EAAE;AAGZ,QAAA,UAAU,IAAIP,sBAAA,CAAA,aAAA,CAACQ,aAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC/C;AAEpB;;;;"}
1	+ {"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\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 enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\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 const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\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 onColumnSizingChange,\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 // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\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 useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\n\n {/ Footer */}\n {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n </GridContainer>\n );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

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

@@ -42,6 +42,13 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      */
     const containerRef = useRef(null);
     const tableRef = useRef(null);
+    /**
+     * Mutable object to track shift key state and last selected row for range selection.
+     */
+    const rangeSelectionState = useRef({
+        lastSelectedRowId: undefined,
+        isShiftKeyPressed: false,
+    }).current;
     const showFooter = useMemo(() => !isLoading && columns.some((column) => column.renderFooter), [isLoading, columns]);
     const ariaRoles = useMemo(() => getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
@@ -113,6 +120,9 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             expanded,
             columnSizing,
         },
+        meta: {
+            rangeSelectionState,
+        },
     });
     /**
      * Pinned column layout

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, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\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 enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\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 const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\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 onColumnSizingChange,\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 // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\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 useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\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, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n usePinnedColumnLayout,\n useSortingState,\n useKeyboardNavigation,\n useColumnState,\n useExpandedState,\n useColumnWidthState,\n useSelectionState,\n} from './hooks';\n\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 enableKeyboardNavigation = false,\n\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n\n data,\n getRowId,\n rowThemes,\n\n sortState,\n onSortChanged,\n\n selectionMode,\n selectedRows,\n disabledRows,\n onSelectionChanged,\n\n rowGrouping,\n\n columnWidths,\n onColumnsResized,\n\n isLoading,\n loadingRowCount,\n\n emptyState,\n emptySlot,\n\n id,\n className,\n 'aria-label': ariaLabel,\n}: DataGridProps) => {\n /\n Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n /\n const containerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n\n /\n Mutable object to track shift key state and last selected row for range selection.\n /\n const rangeSelectionState = useRef({\n lastSelectedRowId: undefined as string \| undefined,\n isShiftKeyPressed: false,\n }).current;\n\n const showFooter = useMemo(\n () => !isLoading && columns.some((column) => column.renderFooter),\n [isLoading, columns],\n );\n const ariaRoles = useMemo(\n () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n [enableKeyboardNavigation, rowGrouping],\n );\n const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n /\n Hooks to handle state for selection, sorting, and expanded/collapsed.\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 const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n useExpandedState(rowGrouping);\n\n /\n Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n /\n const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n columns,\n hiddenColumns,\n columnOrdering,\n pinnedColumns,\n enableRowSelection: !!enableRowSelection,\n });\n\n const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n mappedColumnDefinitions,\n columnWidths,\n onColumnsResized,\n });\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 onColumnSizingChange,\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 // Row grouping\n getSubRows,\n getRowCanExpand,\n onExpandedChange,\n enableExpanding,\n getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n // Inject external table state\n state: {\n columnOrder,\n columnVisibility,\n columnPinning,\n sorting,\n rowSelection,\n expanded,\n columnSizing,\n },\n meta: {\n rangeSelectionState,\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 useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n const renderBody = () => {\n if (isLoading) {\n return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n }\n\n if (data.length === 0) {\n return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n }\n\n const bodyProps = {\n table,\n ariaRoles,\n striped,\n rowThemes,\n };\n\n if (table.getState().columnSizingInfo.isResizingColumn) {\n return <MemoizedBody {...bodyProps} />;\n }\n\n return <Body {...bodyProps} />;\n };\n\n return (\n <GridContainer\n containerRef={containerRef}\n tableRef={tableRef}\n borderMode={borderMode}\n containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n ariaRoles={ariaRoles}\n enableResizeableColumns={enableColumnResizing}\n density={density}\n table={table}\n id={id}\n className={className}\n aria-label={ariaLabel}\n >\n {/ Columns /}\n {enableColumnResizing && <Columns table={table} />}\n\n {/ Header /}\n <Header table={table} />\n\n {/ Body /}\n {renderBody()}\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 CHANGED Viewed

@@ -4,15 +4,45 @@ var React = require('react');
 var Checkbox = require('../../Checkbox/Checkbox.cjs');
 var Radio = require('../../Radio/Radio.cjs');
 var constants = require('../constants.cjs');
+var getRangeSelection = require('../utils/getRangeSelection.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 }) => {
+const headerRenderer = ({ table }) => {
+    const { rangeSelectionState } = table.options.meta || {};
+    return (table.options.enableMultiRowSelection && (React__default.default.createElement(Checkbox.Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => {
+            table.toggleAllRowsSelected();
+            if (rangeSelectionState)
+                rangeSelectionState.lastSelectedRowId = undefined;
+        } })));
+};
+const cellRenderer = ({ row, table }) => {
+    const { rangeSelectionState } = table.options.meta || {};
+    const handleChange = () => {
+        const isShiftKeyPressed = (rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.isShiftKeyPressed) || false;
+        const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;
+        const newSelection = canUseRangeSelection
+            ? getRangeSelection.getRangeSelection({
+                table,
+                currentRow: row,
+                lastSelectedRowId: rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.lastSelectedRowId,
+            })
+            : null;
+        if (newSelection) {
+            table.setRowSelection(newSelection);
+        }
+        else {
+            row.toggleSelected();
+        }
+        if (rangeSelectionState) {
+            rangeSelectionState.lastSelectedRowId = row.id;
+            rangeSelectionState.isShiftKeyPressed = false;
+        }
+    };
     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(Checkbox.Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: handleChange, disabled: !row.getCanSelect() }));
     }
     return (React__default.default.createElement(Radio.Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
 };

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

	@@ -1 +1 @@
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;;;;;"}
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';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n const { rangeSelectionState } = table.options.meta \|\| {};\n\n return (\n table.options.enableMultiRowSelection && (\n <Checkbox\n ariaLabel=\"Select all rows\"\n indeterminate={table.getIsSomeRowsSelected()}\n checked={table.getIsAllRowsSelected()}\n onChange={() => {\n table.toggleAllRowsSelected();\n if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n }}\n />\n )\n );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n const { rangeSelectionState } = table.options.meta \|\| {};\n\n const handleChange = () => {\n const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed \|\| false;\n const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n const newSelection = canUseRangeSelection\n ? getRangeSelection({\n table,\n currentRow: row,\n lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n })\n : null;\n\n if (newSelection) {\n table.setRowSelection(newSelection);\n } else {\n row.toggleSelected();\n }\n\n if (rangeSelectionState) {\n rangeSelectionState.lastSelectedRowId = row.id;\n rangeSelectionState.isShiftKeyPressed = false;\n }\n };\n\n if (row.getCanMultiSelect()) {\n return (\n <Checkbox\n ariaLabel=\"Select row\"\n checked={row.getIsSelected()}\n onChange={handleChange}\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","getRangeSelection","Radio","SELECTION_COLUMN_ID"],"mappings":";;;;;;;;;;;;AAUA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KAAI;IAC1D,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AAExD,IAAA,QACE,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAK;YACb,KAAK,CAAC,qBAAqB,EAAE;AAC7B,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,SAAS;SAC3E,EAAA,CACD,CACH;AAEL,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,EAAwC,KAAI;IAC5E,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;IAExD,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,MAAM,iBAAiB,GAAG,CAAA,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB,KAAI,KAAK;QACzE,MAAM,oBAAoB,GAAG,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB;QAEvF,MAAM,YAAY,GAAG;cACjBC,mCAAiB,CAAC;gBAChB,KAAK;AACL,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,iBAAiB,EAAE,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB;aAC1D;cACD,IAAI;AAER,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC;AACpC;AAAM,aAAA;YACL,GAAG,CAAC,cAAc,EAAE;AACrB;AAED,QAAA,IAAI,mBAAmB,EAAE;AACvB,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAAE;AAC9C,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,KAAK;AAC9C;AACH,KAAC;AAED,IAAA,IAAI,GAAG,CAAC,iBAAiB,EAAE,EAAE;AAC3B,QAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAA,EACP,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAC7B,CAAA;AAEL;AAED,IAAA,QACED,sBAAA,CAAA,aAAA,CAACG,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.js CHANGED Viewed

@@ -2,11 +2,41 @@ import React__default from 'react';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
 import { Radio } from '../../Radio/Radio.js';
 import { SELECTION_COLUMN_ID } from '../constants.js';
+import { getRangeSelection } from '../utils/getRangeSelection.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 }) => {
+const headerRenderer = ({ table }) => {
+    const { rangeSelectionState } = table.options.meta || {};
+    return (table.options.enableMultiRowSelection && (React__default.createElement(Checkbox, { ariaLabel: "Select all rows", indeterminate: table.getIsSomeRowsSelected(), checked: table.getIsAllRowsSelected(), onChange: () => {
+            table.toggleAllRowsSelected();
+            if (rangeSelectionState)
+                rangeSelectionState.lastSelectedRowId = undefined;
+        } })));
+};
+const cellRenderer = ({ row, table }) => {
+    const { rangeSelectionState } = table.options.meta || {};
+    const handleChange = () => {
+        const isShiftKeyPressed = (rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.isShiftKeyPressed) || false;
+        const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;
+        const newSelection = canUseRangeSelection
+            ? getRangeSelection({
+                table,
+                currentRow: row,
+                lastSelectedRowId: rangeSelectionState === null || rangeSelectionState === undefined ? undefined : rangeSelectionState.lastSelectedRowId,
+            })
+            : null;
+        if (newSelection) {
+            table.setRowSelection(newSelection);
+        }
+        else {
+            row.toggleSelected();
+        }
+        if (rangeSelectionState) {
+            rangeSelectionState.lastSelectedRowId = row.id;
+            rangeSelectionState.isShiftKeyPressed = false;
+        }
+    };
     if (row.getCanMultiSelect()) {
-        return (React__default.createElement(Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
+        return (React__default.createElement(Checkbox, { ariaLabel: "Select row", checked: row.getIsSelected(), onChange: handleChange, disabled: !row.getCanSelect() }));
     }
     return (React__default.createElement(Radio, { "aria-label": "Select row", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler(), disabled: !row.getCanSelect() }));
 };

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

	@@ -1 +1 @@
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;;;;;"}
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';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nconst headerRenderer = ({ table }: { table: Table<any> }) => {\n const { rangeSelectionState } = table.options.meta \|\| {};\n\n return (\n table.options.enableMultiRowSelection && (\n <Checkbox\n ariaLabel=\"Select all rows\"\n indeterminate={table.getIsSomeRowsSelected()}\n checked={table.getIsAllRowsSelected()}\n onChange={() => {\n table.toggleAllRowsSelected();\n if (rangeSelectionState) rangeSelectionState.lastSelectedRowId = undefined;\n }}\n />\n )\n );\n};\n\nconst cellRenderer = ({ row, table }: { row: Row<any>; table: Table<any> }) => {\n const { rangeSelectionState } = table.options.meta \|\| {};\n\n const handleChange = () => {\n const isShiftKeyPressed = rangeSelectionState?.isShiftKeyPressed \|\| false;\n const canUseRangeSelection = isShiftKeyPressed && table.options.enableMultiRowSelection;\n\n const newSelection = canUseRangeSelection\n ? getRangeSelection({\n table,\n currentRow: row,\n lastSelectedRowId: rangeSelectionState?.lastSelectedRowId,\n })\n : null;\n\n if (newSelection) {\n table.setRowSelection(newSelection);\n } else {\n row.toggleSelected();\n }\n\n if (rangeSelectionState) {\n rangeSelectionState.lastSelectedRowId = row.id;\n rangeSelectionState.isShiftKeyPressed = false;\n }\n };\n\n if (row.getCanMultiSelect()) {\n return (\n <Checkbox\n ariaLabel=\"Select row\"\n checked={row.getIsSelected()}\n onChange={handleChange}\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":";;;;;;AAUA,MAAM,cAAc,GAAG,CAAC,EAAE,KAAK,EAAyB,KAAI;IAC1D,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AAExD,IAAA,QACE,KAAK,CAAC,OAAO,CAAC,uBAAuB,KACnCA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EACP,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAE,KAAK,CAAC,qBAAqB,EAAE,EAC5C,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,MAAK;YACb,KAAK,CAAC,qBAAqB,EAAE;AAC7B,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,SAAS;SAC3E,EAAA,CACD,CACH;AAEL,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,EAAwC,KAAI;IAC5E,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;IAExD,MAAM,YAAY,GAAG,MAAK;AACxB,QAAA,MAAM,iBAAiB,GAAG,CAAA,mBAAmB,KAAnB,IAAA,IAAA,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB,KAAI,KAAK;QACzE,MAAM,oBAAoB,GAAG,iBAAiB,IAAI,KAAK,CAAC,OAAO,CAAC,uBAAuB;QAEvF,MAAM,YAAY,GAAG;cACjB,iBAAiB,CAAC;gBAChB,KAAK;AACL,gBAAA,UAAU,EAAE,GAAG;AACf,gBAAA,iBAAiB,EAAE,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,SAAA,GAAA,SAAA,GAAA,mBAAmB,CAAE,iBAAiB;aAC1D;cACD,IAAI;AAER,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC;AACpC;AAAM,aAAA;YACL,GAAG,CAAC,cAAc,EAAE;AACrB;AAED,QAAA,IAAI,mBAAmB,EAAE;AACvB,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,GAAG,CAAC,EAAE;AAC9C,YAAA,mBAAmB,CAAC,iBAAiB,GAAG,KAAK;AAC9C;AACH,KAAC;AAED,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,YAAY,EACtB,QAAQ,EAAE,CAAC,GAAG,CAAC,YAAY,EAAE,EAC7B,CAAA;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/components/Body/BodyCell/BodyCell.cjs CHANGED Viewed

@@ -2,6 +2,7 @@
 var React = require('react');
 var reactTable = require('@tanstack/react-table');
+var constants = require('../../../constants.cjs');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent = require('../../CellContent/CellContent.cjs');
@@ -41,12 +42,26 @@ const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) =>
     ]);
     const cellContext = cell.getContext();
     const cellTestId = React.useMemo(() => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined), [generateDataTestId, cellContext.row.original]);
+    const isSelectionCol = enableRowSelection && cell.column.id === constants.SELECTION_COLUMN_ID;
+    // Capture shift key state for range selection in selection column.
+    const captureShiftKeyForSelection = isSelectionCol
+        ? (e) => {
+            if ('key' in e && e.key !== ' ')
+                return;
+            const { row, table } = cell.getContext();
+            if (!row.getCanSelect())
+                return;
+            const { rangeSelectionState } = table.options.meta || {};
+            if (rangeSelectionState)
+                rangeSelectionState.isShiftKeyPressed = e.shiftKey;
+        }
+        : undefined;
     return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles, "data-testid": cellTestId },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: {
                 marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            }, expandButtonProps: expandButtonProps }, reactTable.flexRender(cell.column.columnDef.cell, cellContext))));
+            }, expandButtonProps: expandButtonProps, onMouseDown: captureShiftKeyForSelection, onKeyDown: captureShiftKeyForSelection }, reactTable.flexRender(cell.column.columnDef.cell, cellContext))));
 };
 exports.BodyCell = BodyCell;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /*\n Cell within the TanStack Table instance.\n /\n cell: Cell<any, any>;\n\n /\n ARIA roles for the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether row selection is enabled.\n /\n enableRowSelection: boolean;\n\n /\n Whether row expanding is enabled for the grid.\n /\n enableExpanding: boolean;\n};\n\n/\n Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","React","CellContent","flexRender"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;AAmCA~~;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;~~AACa~~,~~aAAA,~~EAE1B,iBAAiB,EAAE,iBAAiB,~~IAEnCC~~,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
1	+ {"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /*\n Cell within the TanStack Table instance.\n /\n cell: Cell<any, any>;\n\n /\n ARIA roles for the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether row selection is enabled.\n /\n enableRowSelection: boolean;\n\n /\n Whether row expanding is enabled for the grid.\n /\n enableExpanding: boolean;\n};\n\n/\n Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> \| React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta \|\| {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;;UAE7E,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAErC,EAAAC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

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

@@ -1,5 +1,6 @@
 import React__default, { useMemo } from 'react';
 import { flexRender } from '@tanstack/react-table';
+import { SELECTION_COLUMN_ID } from '../../../constants.js';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { CellContent } from '../../CellContent/CellContent.js';
@@ -35,12 +36,26 @@ const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) =>
     ]);
     const cellContext = cell.getContext();
     const cellTestId = useMemo(() => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined), [generateDataTestId, cellContext.row.original]);
+    const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;
+    // Capture shift key state for range selection in selection column.
+    const captureShiftKeyForSelection = isSelectionCol
+        ? (e) => {
+            if ('key' in e && e.key !== ' ')
+                return;
+            const { row, table } = cell.getContext();
+            if (!row.getCanSelect())
+                return;
+            const { rangeSelectionState } = table.options.meta || {};
+            if (rangeSelectionState)
+                rangeSelectionState.isShiftKeyPressed = e.shiftKey;
+        }
+        : undefined;
     return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles, "data-testid": cellTestId },
         React__default.createElement(CellContent, { contentStyle: {
                 marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            }, expandButtonProps: expandButtonProps }, flexRender(cell.column.columnDef.cell, cellContext))));
+            }, expandButtonProps: expandButtonProps, onMouseDown: captureShiftKeyForSelection, onKeyDown: captureShiftKeyForSelection }, flexRender(cell.column.columnDef.cell, cellContext))));
 };
 export { BodyCell };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /*\n Cell within the TanStack Table instance.\n /\n cell: Cell<any, any>;\n\n /\n ARIA roles for the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether row selection is enabled.\n /\n enableRowSelection: boolean;\n\n /\n Whether row expanding is enabled for the grid.\n /\n enableExpanding: boolean;\n};\n\n/\n Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAmCA~~;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;~~AACa~~,~~aAAA,~~EAE1B,iBAAiB,EAAE,iBAAiB,~~IAEnC~~,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
1	+ {"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /*\n Cell within the TanStack Table instance.\n /\n cell: Cell<any, any>;\n\n /\n ARIA roles for the grid.\n /\n ariaRoles: AriaRoles;\n\n /\n Whether row selection is enabled.\n /\n enableRowSelection: boolean;\n\n /\n Whether row expanding is enabled for the grid.\n /\n enableExpanding: boolean;\n};\n\n/\n Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> \| React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta \|\| {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;;UAE7E,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAErC,EAAA,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

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

@@ -14,10 +14,10 @@ const cellContentClassname = buildClassnames.buildClassnames([CellContent_module
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+const CellContent = ({ contentStyle, children, expandButtonProps, onKeyDown, onMouseDown, }) => {
     return (React__default.default.createElement(React__default.default.Fragment, null,
         expandButtonProps && React__default.default.createElement(ExpandButton.ExpandButton, { ...expandButtonProps }),
-        React__default.default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children)));
+        React__default.default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle, onMouseDown: onMouseDown, onKeyDown: onKeyDown }, children)));
 };
 exports.CellContent = CellContent;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n /*\n Styles to be applied to the cell content wrapper.\n /\n contentStyle: Pick<\n React.CSSProperties,\n 'marginLeft' \| 'justifyContent' \| 'textAlign' \| 'marginLeft'\n >;\n\n /\n Child elements.\n /\n children?: React.ReactNode;\n\n /\n Props for an expand/collapse button, if applicable.\n /\n expandButtonProps?: ExpandButtonProps;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/\n Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children, expandButtonProps }: CellContentProps) => {\n return (\n <>\n {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n <div\n data-testid=\"data-grid-cell-content\"\n className={cellContentClassname}\n style={contentStyle}\n >\n {children}\n </div>\n </>\n );\n};\n"],"names":["buildClassnames","styles","React","ExpandButton"],"mappings":";;;;;;;;;;;;~~AA2BA~~,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;~~AACI~~,~~MAAM~~,WAAW,GAAG,CAAC,~~EAAE~~,YAAY,~~EAAE~~,QAAQ,~~EAAE~~,iBAAiB,~~EAAoB~~,KAAI;~~AAC7F~~,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;~~AAC7D~~,~~QAAAD~~,~~sBAAA,~~CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,~~EACc~~,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,~~EAElB~~,~~EAAA~~,QAAQ,CACL,CACL;AAEP;;;;"}
1	+ {"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n /*\n Styles to be applied to the cell content wrapper.\n /\n contentStyle: Pick<\n React.CSSProperties,\n 'marginLeft' \| 'justifyContent' \| 'textAlign' \| 'marginLeft'\n >;\n\n /\n Child elements.\n /\n children?: React.ReactNode;\n\n /\n Props for an expand/collapse button, if applicable.\n /\n expandButtonProps?: ExpandButtonProps;\n\n /\n Mouse down handler for selection interactions.\n /\n onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;\n\n /\n Key down handler for selection interactions.\n /\n onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/\n Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({\n contentStyle,\n children,\n expandButtonProps,\n onKeyDown,\n onMouseDown,\n}: CellContentProps) => {\n return (\n <>\n {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n <div\n data-testid=\"data-grid-cell-content\"\n className={cellContentClassname}\n style={contentStyle}\n onMouseDown={onMouseDown}\n onKeyDown={onKeyDown}\n >\n {children}\n </div>\n </>\n );\n};\n"],"names":["buildClassnames","styles","React","ExpandButton"],"mappings":";;;;;;;;;;;;AAqCA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAC1B,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,WAAW,GACM,KAAI;AACrB,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;QAC7DD,sBACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACL,CACL;AAEP;;;;"}

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

@@ -13,8 +13,16 @@ export interface CellContentProps {
      * Props for an expand/collapse button, if applicable.
      */
     expandButtonProps?: ExpandButtonProps;
+    /**
+     * Mouse down handler for selection interactions.
+     */
+    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Key down handler for selection interactions.
+     */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-export declare const CellContent: ({ contentStyle, children, expandButtonProps }: CellContentProps) => React.JSX.Element;
+export declare const CellContent: ({ contentStyle, children, expandButtonProps, onKeyDown, onMouseDown, }: CellContentProps) => React.JSX.Element;

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

@@ -8,10 +8,10 @@ const cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cel
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+const CellContent = ({ contentStyle, children, expandButtonProps, onKeyDown, onMouseDown, }) => {
     return (React__default.createElement(React__default.Fragment, null,
         expandButtonProps && React__default.createElement(ExpandButton, { ...expandButtonProps }),
-        React__default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children)));
+        React__default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle, onMouseDown: onMouseDown, onKeyDown: onKeyDown }, children)));
 };
 export { CellContent };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n /*\n Styles to be applied to the cell content wrapper.\n /\n contentStyle: Pick<\n React.CSSProperties,\n 'marginLeft' \| 'justifyContent' \| 'textAlign' \| 'marginLeft'\n >;\n\n /\n Child elements.\n /\n children?: React.ReactNode;\n\n /\n Props for an expand/collapse button, if applicable.\n /\n expandButtonProps?: ExpandButtonProps;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/\n Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children, expandButtonProps }: CellContentProps) => {\n return (\n <>\n {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n <div\n data-testid=\"data-grid-cell-content\"\n className={cellContentClassname}\n style={contentStyle}\n >\n {children}\n </div>\n </>\n );\n};\n"],"names":["React"],"mappings":";;;;;;~~AA2BA~~,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;~~AACI~~,~~MAAM~~,WAAW,GAAG,CAAC,~~EAAE~~,YAAY,~~EAAE~~,QAAQ,~~EAAE~~,iBAAiB,~~EAAoB~~,KAAI;~~AAC7F~~,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;~~AAC7D~~,~~QAAAA~~,~~cAAA,~~CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,~~EACc~~,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,~~EAElB~~,~~EAAA~~,QAAQ,CACL,CACL;AAEP;;;;"}
1	+ {"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n /*\n Styles to be applied to the cell content wrapper.\n /\n contentStyle: Pick<\n React.CSSProperties,\n 'marginLeft' \| 'justifyContent' \| 'textAlign' \| 'marginLeft'\n >;\n\n /\n Child elements.\n /\n children?: React.ReactNode;\n\n /\n Props for an expand/collapse button, if applicable.\n /\n expandButtonProps?: ExpandButtonProps;\n\n /\n Mouse down handler for selection interactions.\n /\n onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;\n\n /\n Key down handler for selection interactions.\n /\n onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/\n Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({\n contentStyle,\n children,\n expandButtonProps,\n onKeyDown,\n onMouseDown,\n}: CellContentProps) => {\n return (\n <>\n {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n <div\n data-testid=\"data-grid-cell-content\"\n className={cellContentClassname}\n style={contentStyle}\n onMouseDown={onMouseDown}\n onKeyDown={onKeyDown}\n >\n {children}\n </div>\n </>\n );\n};\n"],"names":["React"],"mappings":";;;;;;AAqCA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAC1B,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,WAAW,GACM,KAAI;AACrB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;QAC7DA,cACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACL,CACL;AAEP;;;;"}

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

@@ -4,6 +4,9 @@ var React = require('react');
 /**
  * Hook which manages interop between selection props and the internal TanStack selection state.
+ *
+ * Note: Row ID order in onSelectionChanged may not match visual order when using numeric
+ * string IDs (e.g., '1', '2') due to JavaScript's automatic sorting of numeric-like object keys.
  */
 const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
     const internalSelectionState = React.useMemo(() => {

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

	@@ -1 +1 @@
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;;;;"}
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 \n Note: Row ID order in onSelectionChanged may not match visual order when using numeric\n * string IDs (e.g., '1', '2') due to JavaScript's automatic sorting of numeric-like object keys.\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;;;;;AAKG;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 CHANGED Viewed

@@ -8,6 +8,9 @@ type UseSelectionProps = {
 };
 /**
  * Hook which manages interop between selection props and the internal TanStack selection state.
+ *
+ * Note: Row ID order in onSelectionChanged may not match visual order when using numeric
+ * string IDs (e.g., '1', '2') due to JavaScript's automatic sorting of numeric-like object keys.
  */
 export declare const useSelectionState: ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }: UseSelectionProps) => {
     enableRowSelection: boolean | ((row: Row<any>) => boolean);

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

@@ -2,6 +2,9 @@ import { useMemo, useCallback } from 'react';
 /**
  * Hook which manages interop between selection props and the internal TanStack selection state.
+ *
+ * Note: Row ID order in onSelectionChanged may not match visual order when using numeric
+ * string IDs (e.g., '1', '2') due to JavaScript's automatic sorting of numeric-like object keys.
  */
 const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
     const internalSelectionState = useMemo(() => {

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

	@@ -1 +1 @@
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;;;;"}
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 \n Note: Row ID order in onSelectionChanged may not match visual order when using numeric\n * string IDs (e.g., '1', '2') due to JavaScript's automatic sorting of numeric-like object keys.\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;;;;;AAKG;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/declarations.d.ts CHANGED Viewed

@@ -7,4 +7,10 @@ declare module '@tanstack/react-table' {
         getAriaLabel?: () => string;
         generateDataTestId?: (row: TData) => string;
     }
+    interface TableMeta<TData extends RowData> {
+        rangeSelectionState?: {
+            isShiftKeyPressed: boolean;
+            lastSelectedRowId: string | undefined;
+        };
+    }
 }

package/dist/components/DataGrid/utils/getRangeSelection.cjs ADDED Viewed

@@ -0,0 +1,36 @@
+'use strict';
+/**
+ * Calculates range selection state for rows between the last selected row and current row.
+ *
+ * Only visible rows in the current row model are considered - collapsed child rows
+ * are excluded for better UX so users only select what they can see.
+ *
+ * @returns New selection state object, or null if range selection cannot be applied.
+ */
+const getRangeSelection = ({ table, currentRow, lastSelectedRowId, }) => {
+    var _a;
+    const { rows } = table.getRowModel();
+    const currentIdx = rows.findIndex((r) => r.id === currentRow.id);
+    const lastIdx = lastSelectedRowId ? rows.findIndex((r) => r.id === lastSelectedRowId) : -1;
+    if (currentIdx < 0 || lastIdx < 0)
+        return null;
+    const start = Math.min(lastIdx, currentIdx);
+    const end = Math.max(lastIdx, currentIdx);
+    const shouldSelect = !currentRow.getIsSelected();
+    const newSelection = { ...table.getState().rowSelection };
+    for (let i = start; i <= end; i += 1) {
+        if ((_a = rows[i]) === null || _a === undefined ? undefined : _a.getCanSelect()) {
+            if (shouldSelect) {
+                newSelection[rows[i].id] = true;
+            }
+            else {
+                delete newSelection[rows[i].id];
+            }
+        }
+    }
+    return newSelection;
+};
+exports.getRangeSelection = getRangeSelection;
+//# sourceMappingURL=getRangeSelection.cjs.map

package/dist/components/DataGrid/utils/getRangeSelection.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getRangeSelection.cjs","sources":["../../../../src/components/DataGrid/utils/getRangeSelection.ts"],"sourcesContent":["import { Row, RowSelectionState, Table } from '@tanstack/react-table';\n\ntype CalculateRangeSelectionParams = {\n table: Table<any>;\n currentRow: Row<any>;\n lastSelectedRowId: string | undefined;\n};\n\n/**\n * Calculates range selection state for rows between the last selected row and current row.\n *\n * Only visible rows in the current row model are considered - collapsed child rows\n * are excluded for better UX so users only select what they can see.\n *\n * @returns New selection state object, or null if range selection cannot be applied.\n */\nexport const getRangeSelection = ({\n table,\n currentRow,\n lastSelectedRowId,\n}: CalculateRangeSelectionParams): RowSelectionState | null => {\n const { rows } = table.getRowModel();\n\n const currentIdx = rows.findIndex((r) => r.id === currentRow.id);\n const lastIdx = lastSelectedRowId ? rows.findIndex((r) => r.id === lastSelectedRowId) : -1;\n\n if (currentIdx < 0 || lastIdx < 0) return null;\n\n const start = Math.min(lastIdx, currentIdx);\n const end = Math.max(lastIdx, currentIdx);\n const shouldSelect = !currentRow.getIsSelected();\n\n const newSelection: RowSelectionState = { ...table.getState().rowSelection };\n\n for (let i = start; i <= end; i += 1) {\n if (rows[i]?.getCanSelect()) {\n if (shouldSelect) {\n newSelection[rows[i].id] = true;\n } else {\n delete newSelection[rows[i].id];\n }\n }\n }\n\n return newSelection;\n};\n"],"names":[],"mappings":";;AAQA;;;;;;;AAOG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,UAAU,EACV,iBAAiB,GACa,KAA8B;;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE;AAEpC,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,CAAC;IAChE,MAAM,OAAO,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,GAAG,EAAE;AAE1F,IAAA,IAAI,UAAU,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC;AAAE,QAAA,OAAO,IAAI;IAE9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;IAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,CAAC,UAAU,CAAC,aAAa,EAAE;IAEhD,MAAM,YAAY,GAAsB,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE;AAE5E,IAAA,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE;QACpC,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,YAAY,EAAE,EAAE;AAC3B,YAAA,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI;AAChC;AAAM,iBAAA;gBACL,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAChC;AACF;AACF;AAED,IAAA,OAAO,YAAY;AACrB;;;;"}

package/dist/components/DataGrid/utils/getRangeSelection.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { Row, RowSelectionState, Table } from '@tanstack/react-table';
+type CalculateRangeSelectionParams = {
+    table: Table<any>;
+    currentRow: Row<any>;
+    lastSelectedRowId: string | undefined;
+};
+/**
+ * Calculates range selection state for rows between the last selected row and current row.
+ *
+ * Only visible rows in the current row model are considered - collapsed child rows
+ * are excluded for better UX so users only select what they can see.
+ *
+ * @returns New selection state object, or null if range selection cannot be applied.
+ */
+export declare const getRangeSelection: ({ table, currentRow, lastSelectedRowId, }: CalculateRangeSelectionParams) => RowSelectionState | null;
+export {};

package/dist/components/DataGrid/utils/getRangeSelection.js ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * Calculates range selection state for rows between the last selected row and current row.
+ *
+ * Only visible rows in the current row model are considered - collapsed child rows
+ * are excluded for better UX so users only select what they can see.
+ *
+ * @returns New selection state object, or null if range selection cannot be applied.
+ */
+const getRangeSelection = ({ table, currentRow, lastSelectedRowId, }) => {
+    var _a;
+    const { rows } = table.getRowModel();
+    const currentIdx = rows.findIndex((r) => r.id === currentRow.id);
+    const lastIdx = lastSelectedRowId ? rows.findIndex((r) => r.id === lastSelectedRowId) : -1;
+    if (currentIdx < 0 || lastIdx < 0)
+        return null;
+    const start = Math.min(lastIdx, currentIdx);
+    const end = Math.max(lastIdx, currentIdx);
+    const shouldSelect = !currentRow.getIsSelected();
+    const newSelection = { ...table.getState().rowSelection };
+    for (let i = start; i <= end; i += 1) {
+        if ((_a = rows[i]) === null || _a === undefined ? undefined : _a.getCanSelect()) {
+            if (shouldSelect) {
+                newSelection[rows[i].id] = true;
+            }
+            else {
+                delete newSelection[rows[i].id];
+            }
+        }
+    }
+    return newSelection;
+};
+export { getRangeSelection };
+//# sourceMappingURL=getRangeSelection.js.map

package/dist/components/DataGrid/utils/getRangeSelection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"getRangeSelection.js","sources":["../../../../src/components/DataGrid/utils/getRangeSelection.ts"],"sourcesContent":["import { Row, RowSelectionState, Table } from '@tanstack/react-table';\n\ntype CalculateRangeSelectionParams = {\n table: Table<any>;\n currentRow: Row<any>;\n lastSelectedRowId: string | undefined;\n};\n\n/**\n * Calculates range selection state for rows between the last selected row and current row.\n *\n * Only visible rows in the current row model are considered - collapsed child rows\n * are excluded for better UX so users only select what they can see.\n *\n * @returns New selection state object, or null if range selection cannot be applied.\n */\nexport const getRangeSelection = ({\n table,\n currentRow,\n lastSelectedRowId,\n}: CalculateRangeSelectionParams): RowSelectionState | null => {\n const { rows } = table.getRowModel();\n\n const currentIdx = rows.findIndex((r) => r.id === currentRow.id);\n const lastIdx = lastSelectedRowId ? rows.findIndex((r) => r.id === lastSelectedRowId) : -1;\n\n if (currentIdx < 0 || lastIdx < 0) return null;\n\n const start = Math.min(lastIdx, currentIdx);\n const end = Math.max(lastIdx, currentIdx);\n const shouldSelect = !currentRow.getIsSelected();\n\n const newSelection: RowSelectionState = { ...table.getState().rowSelection };\n\n for (let i = start; i <= end; i += 1) {\n if (rows[i]?.getCanSelect()) {\n if (shouldSelect) {\n newSelection[rows[i].id] = true;\n } else {\n delete newSelection[rows[i].id];\n }\n }\n }\n\n return newSelection;\n};\n"],"names":[],"mappings":"AAQA;;;;;;;AAOG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,UAAU,EACV,iBAAiB,GACa,KAA8B;;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE;AAEpC,IAAA,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,EAAE,CAAC;IAChE,MAAM,OAAO,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,iBAAiB,CAAC,GAAG,EAAE;AAE1F,IAAA,IAAI,UAAU,GAAG,CAAC,IAAI,OAAO,GAAG,CAAC;AAAE,QAAA,OAAO,IAAI;IAE9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;IAC3C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,UAAU,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,CAAC,UAAU,CAAC,aAAa,EAAE;IAEhD,MAAM,YAAY,GAAsB,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE;AAE5E,IAAA,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE;QACpC,IAAI,CAAA,EAAA,GAAA,IAAI,CAAC,CAAC,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,YAAY,EAAE,EAAE;AAC3B,YAAA,IAAI,YAAY,EAAE;gBAChB,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI;AAChC;AAAM,iBAAA;gBACL,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;AAChC;AACF;AACF;AAED,IAAA,OAAO,YAAY;AACrB;;;;"}

package/dist/components/DataTable/components/SelectionCell.cjs CHANGED Viewed

@@ -13,6 +13,8 @@ function SelectionCell({ selected, rowId, onChange, selectionMode, disabled, ...
     const shiftKeyRef = React.useRef(false);
     // Detect shift on click OR space checks
     const handleInteraction = React.useCallback((e) => {
+        if ('key' in e && e.key !== ' ')
+            return;
         shiftKeyRef.current = e.shiftKey;
     }, []);
     const handleChange = React.useCallback((checked) => {

package/dist/components/DataTable/components/SelectionCell.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCell.cjs","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["useRef","useCallback","React","Cell","Radio","Checkbox"],"mappings":";;;;;;;;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CAAC,CAAC,CAAyC,KAAI;~~AAClF~~,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBD,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/ED,sBAAC,CAAA,aAAA,CAAAG,iBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}
1	+ {"version":3,"file":"SelectionCell.cjs","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n if ('key' in e && e.key !== ' ') return;\n\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["useRef","useCallback","React","Cell","Radio","Checkbox"],"mappings":";;;;;;;;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAGC,iBAAW,CAAC,CAAC,CAAyC,KAAI;QAClF,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE;AAEjC,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAGA,iBAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBD,sBAAC,CAAA,aAAA,CAAAE,WAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEF,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/ED,sBAAC,CAAA,aAAA,CAAAG,iBAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}

package/dist/components/DataTable/components/SelectionCell.js CHANGED Viewed

@@ -7,6 +7,8 @@ function SelectionCell({ selected, rowId, onChange, selectionMode, disabled, ...
     const shiftKeyRef = useRef(false);
     // Detect shift on click OR space checks
     const handleInteraction = useCallback((e) => {
+        if ('key' in e && e.key !== ' ')
+            return;
         shiftKeyRef.current = e.shiftKey;
     }, []);
     const handleChange = useCallback((checked) => {

package/dist/components/DataTable/components/SelectionCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectionCell.js","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["React"],"mappings":";;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAyC,KAAI;~~AAClF~~,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/EA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}
1	+ {"version":3,"file":"SelectionCell.js","sources":["../../../../src/components/DataTable/components/SelectionCell.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { Checkbox } from '../../Checkbox';\nimport { Radio } from '../../Radio';\nimport { Cell, CellProps } from './Cell';\nimport { RowId, SelectionMode, SetSelectedAction } from '../types';\n\nexport interface SelectionCellProps extends CellProps {\n rowId: RowId;\n selected: boolean;\n onChange: SetSelectedAction;\n selectionMode: SelectionMode;\n disabled: boolean;\n}\n\nexport function SelectionCell({\n selected,\n rowId,\n onChange,\n selectionMode,\n disabled,\n ...cellProps\n}: SelectionCellProps) {\n const shiftKeyRef = useRef(false);\n\n // Detect shift on click OR space checks\n const handleInteraction = useCallback((e: React.MouseEvent \| React.KeyboardEvent) => {\n if ('key' in e && e.key !== ' ') return;\n\n shiftKeyRef.current = e.shiftKey;\n }, []);\n\n const handleChange = useCallback(\n (checked: boolean) => {\n onChange(checked, rowId, shiftKeyRef.current ? { shiftKey: true } : undefined);\n shiftKeyRef.current = false;\n },\n [onChange, rowId],\n );\n\n if (selectionMode === 'single') {\n return (\n <Cell {...cellProps}>\n <Radio value={rowId} checked={selected} disabled={disabled} onChange={onChange} />\n </Cell>\n );\n }\n\n return (\n <Cell {...cellProps} onMouseDown={handleInteraction} onKeyDown={handleInteraction}>\n <Checkbox value={rowId} checked={selected} disabled={disabled} onChange={handleChange} />\n </Cell>\n );\n}\n"],"names":["React"],"mappings":";;;;;SAcgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,GAAG,SAAS,EACO,EAAA;AACnB,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;;AAGjC,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,CAAC,CAAyC,KAAI;QAClF,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;YAAE;AAEjC,QAAA,WAAW,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ;KACjC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,OAAgB,KAAI;QACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,OAAO,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;AAC9E,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK;AAC7B,KAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE;AAC9B,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA;YACjBA,cAAC,CAAA,aAAA,CAAA,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CAC7E;AAEV;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAA;QAC/EA,cAAC,CAAA,aAAA,CAAA,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAI,CAAA,CACpF;AAEX;;;;"}

package/dist/components/DataTable/hooks/useSelection.cjs CHANGED Viewed

@@ -66,9 +66,11 @@ function useSelection({ selectionMode = 'multiple', selectionState, enabledRowId
     const toggleAllSelected = () => {
         if (selectedRowIds.length === enabledRowIds.length) {
             setSelectedRowIds([]);
-            return;
         }
-        setSelectedRowIds(enabledRowIds);
+        else {
+            setSelectedRowIds(enabledRowIds);
+        }
+        lastClickedRef.current = null;
     };
     // TODO: Memoise this
     const selectionColumn = {

package/dist/components/DataTable/hooks/useSelection.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelection.cjs","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n ~~return;\n~~ }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["useRef","getRangeSelection","React","SelectionHeader","SelectionCell"],"mappings":";;;;;;;;;;;AAAA;AAuBA,MAAM,mBAAmB,GAAmB,CAAC,EAAE,EAAE,MAAK,GAAG,CAAC;AAEpD,SAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,UAAU,EAC1B,cAAc,EACd,aAAa,GACM,EAAA;AACnB,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,cAAc,IAAI,mBAAmB;AACjF,IAAA,MAAM,cAAc,GAAGA,YAAM,CAAe,IAAI,CAAC;;IAGjD,MAAM,WAAW,GAAsB,CACrC,QAAiB,EACjB,KAAwB,EACxB,OAAgC,KAC9B;AACF,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO;AAElD,QAAA,IAAI,SAAS;AACb,QAAA,IAAI,MAAuB;QAC3B,MAAM,cAAc,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,QAAQ;AACxC,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAE1C,QAAA,IAAI,cAAc,IAAI,WAAW,IAAI,aAAa,KAAK,UAAU,EAAE;YACjE,MAAM,GAAG,OAAO;AACjB;AAAM,aAAA,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,EAAE;YACjD,MAAM,GAAG,QAAQ;AAClB;AAAM,aAAA,IAAI,QAAQ,EAAE;YACnB,MAAM,GAAG,KAAK;AACf;AAAM,aAAA;YACL,MAAM,GAAG,QAAQ;AAClB;AAED,QAAA,QAAQ,MAAM;AACZ,YAAA,KAAK,OAAO;gBACV,SAAS,GAAGC,mCAAiB,CAAC;oBAC5B,KAAK;AACL,oBAAA,WAAW,EAAE,WAAY;oBACzB,QAAQ;oBACR,aAAa;oBACb,cAAc;AACf,iBAAA,CAAC;gBACF;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,CAAC,KAAK,CAAC;gBACnB;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE;AACpC,gBAAA,SAAS,GAAG,CAAC,GAAG,cAAc,EAAE,KAAK,CAAC;gBACtC;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC;gBACvD;AACF,YAAA;gBACE;AACH;QAED,iBAAiB,CAAC,SAAS,CAAC;AAC5B,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AAChC,KAAC;;IAGD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YAClD,iBAAiB,CAAC,EAAE,CAAC;~~YACrB~~;~~AACD~~;~~QACD~~,iBAAiB,CAAC,aAAa,CAAC;~~AAClC~~,KAAC;;AAGD,IAAA,MAAM,eAAe,GAAiB;AACpC,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,MAChCC,sBAAC,CAAA,aAAA,CAAAC,+BAAe,OACV,WAAW,EACf,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EACxD,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EACxF,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH;QACD,UAAU,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,MAC5CD,qCAACE,2BAAa,EAAA,EAAA,GACR,SAAS,EACb,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,OAAO,CAAC,WAAW,EAC7B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAA,CAC3B,CACH;KACF;IAED,OAAO;QACL,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,WAAW;KACZ;AACH;;;;"}
1	+ {"version":3,"file":"useSelection.cjs","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n } else {\n setSelectedRowIds(enabledRowIds);\n }\n lastClickedRef.current = null;\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["useRef","getRangeSelection","React","SelectionHeader","SelectionCell"],"mappings":";;;;;;;;;;;AAAA;AAuBA,MAAM,mBAAmB,GAAmB,CAAC,EAAE,EAAE,MAAK,GAAG,CAAC;AAEpD,SAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,UAAU,EAC1B,cAAc,EACd,aAAa,GACM,EAAA;AACnB,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,cAAc,IAAI,mBAAmB;AACjF,IAAA,MAAM,cAAc,GAAGA,YAAM,CAAe,IAAI,CAAC;;IAGjD,MAAM,WAAW,GAAsB,CACrC,QAAiB,EACjB,KAAwB,EACxB,OAAgC,KAC9B;AACF,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO;AAElD,QAAA,IAAI,SAAS;AACb,QAAA,IAAI,MAAuB;QAC3B,MAAM,cAAc,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,QAAQ;AACxC,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAE1C,QAAA,IAAI,cAAc,IAAI,WAAW,IAAI,aAAa,KAAK,UAAU,EAAE;YACjE,MAAM,GAAG,OAAO;AACjB;AAAM,aAAA,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,EAAE;YACjD,MAAM,GAAG,QAAQ;AAClB;AAAM,aAAA,IAAI,QAAQ,EAAE;YACnB,MAAM,GAAG,KAAK;AACf;AAAM,aAAA;YACL,MAAM,GAAG,QAAQ;AAClB;AAED,QAAA,QAAQ,MAAM;AACZ,YAAA,KAAK,OAAO;gBACV,SAAS,GAAGC,mCAAiB,CAAC;oBAC5B,KAAK;AACL,oBAAA,WAAW,EAAE,WAAY;oBACzB,QAAQ;oBACR,aAAa;oBACb,cAAc;AACf,iBAAA,CAAC;gBACF;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,CAAC,KAAK,CAAC;gBACnB;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE;AACpC,gBAAA,SAAS,GAAG,CAAC,GAAG,cAAc,EAAE,KAAK,CAAC;gBACtC;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC;gBACvD;AACF,YAAA;gBACE;AACH;QAED,iBAAiB,CAAC,SAAS,CAAC;AAC5B,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AAChC,KAAC;;IAGD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YAClD,iBAAiB,CAAC,EAAE,CAAC;AACtB;AAAM,aAAA;YACL,iBAAiB,CAAC,aAAa,CAAC;AACjC;AACD,QAAA,cAAc,CAAC,OAAO,GAAG,IAAI;AAC/B,KAAC;;AAGD,IAAA,MAAM,eAAe,GAAiB;AACpC,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,MAChCC,sBAAC,CAAA,aAAA,CAAAC,+BAAe,OACV,WAAW,EACf,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EACxD,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EACxF,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH;QACD,UAAU,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,MAC5CD,qCAACE,2BAAa,EAAA,EAAA,GACR,SAAS,EACb,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,OAAO,CAAC,WAAW,EAC7B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAA,CAC3B,CACH;KACF;IAED,OAAO;QACL,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,WAAW;KACZ;AACH;;;;"}

package/dist/components/DataTable/hooks/useSelection.js CHANGED Viewed

@@ -60,9 +60,11 @@ function useSelection({ selectionMode = 'multiple', selectionState, enabledRowId
     const toggleAllSelected = () => {
         if (selectedRowIds.length === enabledRowIds.length) {
             setSelectedRowIds([]);
-            return;
         }
-        setSelectedRowIds(enabledRowIds);
+        else {
+            setSelectedRowIds(enabledRowIds);
+        }
+        lastClickedRef.current = null;
     };
     // TODO: Memoise this
     const selectionColumn = {

package/dist/components/DataTable/hooks/useSelection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n ~~return;\n~~ }\n setSelectedRowIds(enabledRowIds);\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["React"],"mappings":";;;;;AAAA;AAuBA,MAAM,mBAAmB,GAAmB,CAAC,EAAE,EAAE,MAAK,GAAG,CAAC;AAEpD,SAAU,YAAY,CAAC,EAC3B,aAAa,GAAG,UAAU,EAC1B,cAAc,EACd,aAAa,GACM,EAAA;AACnB,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,cAAc;IACzC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,cAAc,IAAI,mBAAmB;AACjF,IAAA,MAAM,cAAc,GAAG,MAAM,CAAe,IAAI,CAAC;;IAGjD,MAAM,WAAW,GAAsB,CACrC,QAAiB,EACjB,KAAwB,EACxB,OAAgC,KAC9B;AACF,QAAA,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO;AAElD,QAAA,IAAI,SAAS;AACb,QAAA,IAAI,MAAuB;QAC3B,MAAM,cAAc,GAAG,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,SAAA,GAAA,SAAA,GAAA,OAAO,CAAE,QAAQ;AACxC,QAAA,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAE1C,QAAA,IAAI,cAAc,IAAI,WAAW,IAAI,aAAa,KAAK,UAAU,EAAE;YACjE,MAAM,GAAG,OAAO;AACjB;AAAM,aAAA,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,EAAE;YACjD,MAAM,GAAG,QAAQ;AAClB;AAAM,aAAA,IAAI,QAAQ,EAAE;YACnB,MAAM,GAAG,KAAK;AACf;AAAM,aAAA;YACL,MAAM,GAAG,QAAQ;AAClB;AAED,QAAA,QAAQ,MAAM;AACZ,YAAA,KAAK,OAAO;gBACV,SAAS,GAAG,iBAAiB,CAAC;oBAC5B,KAAK;AACL,oBAAA,WAAW,EAAE,WAAY;oBACzB,QAAQ;oBACR,aAAa;oBACb,cAAc;AACf,iBAAA,CAAC;gBACF;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,CAAC,KAAK,CAAC;gBACnB;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;oBAAE;AACpC,gBAAA,SAAS,GAAG,CAAC,GAAG,cAAc,EAAE,KAAK,CAAC;gBACtC;AACF,YAAA,KAAK,QAAQ;AACX,gBAAA,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC;gBACvD;AACF,YAAA;gBACE;AACH;QAED,iBAAiB,CAAC,SAAS,CAAC;AAC5B,QAAA,cAAc,CAAC,OAAO,GAAG,KAAK;AAChC,KAAC;;IAGD,MAAM,iBAAiB,GAAG,MAAK;AAC7B,QAAA,IAAI,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YAClD,iBAAiB,CAAC,EAAE,CAAC;~~YACrB~~;~~AACD~~;~~QACD~~,iBAAiB,CAAC,aAAa,CAAC;~~AAClC~~,KAAC;;AAGD,IAAA,MAAM,eAAe,GAAiB;AACpC,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,KAAK,EAAE,WAAW;AAClB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,KAAK,EAAE,QAAQ;AACf,QAAA,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,CAAC,MAAM,EAAE,WAAW,MAChCA,cAAC,CAAA,aAAA,CAAA,eAAe,OACV,WAAW,EACf,QAAQ,EAAE,cAAc,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EACxD,aAAa,EAAE,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,cAAc,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EACxF,QAAQ,EAAE,iBAAiB,EAC3B,aAAa,EAAE,aAAa,EAAA,CAC5B,CACH;QACD,UAAU,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,MAC5CA,6BAAC,aAAa,EAAA,EAAA,GACR,SAAS,EACb,KAAK,EAAE,GAAG,CAAC,EAAE,EACb,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,OAAO,CAAC,WAAW,EAC7B,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAAA,CAC3B,CACH;KACF;IAED,OAAO;QACL,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,WAAW;KACZ;AACH;;;;"}
1	+ {"version":3,"file":"useSelection.js","sources":["../../../../src/components/DataTable/hooks/useSelection.tsx"],"sourcesContent":["/* eslint-disable react/destructuring-assignment */\n\nimport React, { useRef } from 'react';\n\nimport {\n ColumnConfig,\n RowId,\n SelectionState,\n SelectionMode,\n SetSelectedAction,\n SelectionIntent,\n} from '../types';\n\nimport { SelectionHeader } from '../components/SelectionHeader';\nimport { SelectionCell } from '../components/SelectionCell';\nimport { getRangeSelection } from '../utils/getRangeSelection';\n\nexport type UseSelectionConfig = {\n selectionMode?: SelectionMode;\n selectionState?: SelectionState;\n enabledRowIds: RowId[];\n};\n\nconst emptySelectionState: SelectionState = [[], () => {}];\n\nexport function useSelection({\n selectionMode = 'multiple',\n selectionState,\n enabledRowIds,\n}: UseSelectionConfig) {\n const selectionEnabled = !!selectionState;\n const [selectedRowIds, setSelectedRowIds] = selectionState \|\| emptySelectionState;\n const lastClickedRef = useRef<RowId \| null>(null);\n\n // TODO: Memoise this\n const setSelected: SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n ) => {\n if (rowId === undefined \|\| rowId === null) return; // Can't use falsey, must allow number 0\n\n let newRowIds;\n let intent: SelectionIntent;\n const isShiftPressed = options?.shiftKey;\n const lastClicked = lastClickedRef.current;\n\n if (isShiftPressed && lastClicked && selectionMode === 'multiple') {\n intent = 'range';\n } else if (selected && selectionMode === 'single') {\n intent = 'single';\n } else if (selected) {\n intent = 'add';\n } else {\n intent = 'remove';\n }\n\n switch (intent) {\n case 'range':\n newRowIds = getRangeSelection({\n rowId,\n lastClicked: lastClicked!,\n selected,\n enabledRowIds,\n selectedRowIds,\n });\n break;\n case 'single':\n newRowIds = [rowId];\n break;\n case 'add':\n if (selectedRowIds.includes(rowId)) return;\n newRowIds = [...selectedRowIds, rowId];\n break;\n case 'remove':\n newRowIds = selectedRowIds.filter((id) => id !== rowId);\n break;\n default:\n return;\n }\n\n setSelectedRowIds(newRowIds);\n lastClickedRef.current = rowId;\n };\n\n // TODO: Memoise this\n const toggleAllSelected = () => {\n if (selectedRowIds.length === enabledRowIds.length) {\n setSelectedRowIds([]);\n } else {\n setSelectedRowIds(enabledRowIds);\n }\n lastClickedRef.current = null;\n };\n\n // TODO: Memoise this\n const selectionColumn: ColumnConfig = {\n id: 'selection',\n title: 'Selection',\n width: '40px',\n align: 'center',\n pinned: 'left',\n renderHeader: (column, headerProps) => (\n <SelectionHeader\n {...headerProps}\n selected={selectedRowIds.length === enabledRowIds.length}\n indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}\n onChange={toggleAllSelected}\n selectionMode={selectionMode}\n />\n ),\n renderCell: (row, cellProps, actions, rowState) => (\n <SelectionCell\n {...cellProps}\n rowId={row.id}\n selected={rowState.selected}\n onChange={actions.setSelected}\n selectionMode={selectionMode}\n disabled={rowState.disabled}\n />\n ),\n };\n\n return {\n selectionEnabled,\n selectedRowIds,\n selectionColumn,\n setSelected,\n };\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -21,7 +21,7 @@ export { Container } from './Container';
 export { CopyToClipboard } from './CopyToClipboard';
 export { DateInputField } from './DateInputField';
 export { DatePicker } from './DatePicker';
-export { DateRangePicker, DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, type DateRanges, getDateRange, } from './DateRangePicker';
+export { DateRangePicker, DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, DateRanges, getDateRange, } from './DateRangePicker';
 export { DataTable, type ColumnWidthsType, type ColumnConfig, useCellWidths, useColumns, useNested, useScrollPosition, useSelection, } from './DataTable';
 export { DescriptionList } from './DescriptionList';
 export { DetailPage } from './DetailPage';
@@ -61,7 +61,7 @@ export { Toggle } from './Toggle';
 export { ToggleButton } from './ToggleButton';
 export { Tooltip } from './Tooltip';
 export { UploadFile } from './UploadFile';
-export { type AcceptedFileTypes, type FileSizeUnit } from './UploadFile/constants';
+export { AcceptedFileTypes, FileSizeUnit } from './UploadFile/constants';
 export { UploadedFile } from './UploadedFile';
 export { VeeqoLogo, type LogoVariant, type ColorVariant } from './VeeqoLogo';
 export { VideoModal, Popup } from './VideoModal';

package/dist/index.cjs CHANGED Viewed

@@ -72,6 +72,7 @@ var Toggle = require('./components/Toggle/Toggle.cjs');
 var ToggleButton = require('./components/ToggleButton/ToggleButton.cjs');
 var Tooltip = require('./components/Tooltip/Tooltip.cjs');
 var UploadFile = require('./components/UploadFile/UploadFile.cjs');
+var constants$1 = require('./components/UploadFile/constants.cjs');
 var UploadedFile = require('./components/UploadedFile/UploadedFile.cjs');
 var VeeqoLogo = require('./components/VeeqoLogo/VeeqoLogo.cjs');
 var VideoModal = require('./components/VideoModal/VideoModal.cjs');
@@ -366,6 +367,10 @@ exports.DateRangePicker = DateRangePicker.DateRangePicker;
 exports.DATE_RANGE_OPTIONS = constants.DATE_RANGE_OPTIONS;
 exports.DEFAULT_PRESET = constants.DEFAULT_PRESET;
 exports.DEFAULT_RANGE = constants.DEFAULT_RANGE;
+Object.defineProperty(exports, "DateRanges", {
+	enumerable: true,
+	get: function () { return constants.DateRanges; }
+});
 exports.getDateRange = constants.getDateRange;
 exports.DataTable = DataTable.DataTable;
 exports.useCellWidths = useCellWidths.useCellWidths;
@@ -411,6 +416,14 @@ exports.Toggle = Toggle.Toggle;
 exports.ToggleButton = ToggleButton.ToggleButton;
 exports.Tooltip = Tooltip.Tooltip;
 exports.UploadFile = UploadFile.UploadFile;
+Object.defineProperty(exports, "AcceptedFileTypes", {
+	enumerable: true,
+	get: function () { return constants$1.AcceptedFileTypes; }
+});
+Object.defineProperty(exports, "FileSizeUnit", {
+	enumerable: true,
+	get: function () { return constants$1.FileSizeUnit; }
+});
 exports.UploadedFile = UploadedFile.UploadedFile;
 exports.VeeqoLogo = VeeqoLogo.VeeqoLogo;
 exports.VideoModal = VideoModal.VideoModal;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js CHANGED Viewed

@@ -25,7 +25,7 @@ export { CopyToClipboard } from './components/CopyToClipboard/CopyToClipboard.js
 export { DateInputField } from './components/DateInputField/index.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { DateRangePicker } from './components/DateRangePicker/DateRangePicker.js';
-export { DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, getDateRange } from './components/DateRangePicker/constants.js';
+export { DATE_RANGE_OPTIONS, DEFAULT_PRESET, DEFAULT_RANGE, DateRanges, getDateRange } from './components/DateRangePicker/constants.js';
 export { DataTable } from './components/DataTable/DataTable.js';
 export { useCellWidths } from './components/DataTable/hooks/useCellWidths.js';
 export { useColumns } from './components/DataTable/hooks/useColumns.js';
@@ -70,6 +70,7 @@ export { Toggle } from './components/Toggle/Toggle.js';
 export { ToggleButton } from './components/ToggleButton/ToggleButton.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 export { UploadFile } from './components/UploadFile/UploadFile.js';
+export { AcceptedFileTypes, FileSizeUnit } from './components/UploadFile/constants.js';
 export { UploadedFile } from './components/UploadedFile/UploadedFile.js';
 export { VeeqoLogo } from './components/VeeqoLogo/VeeqoLogo.js';
 export { VideoModal } from './components/VideoModal/VideoModal.js';

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json CHANGED Viewed

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