@veeqo/ui 9.9.2 → 10.0.0-beta.1

package/dist/components/ChoiceList/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n\n  & > * + * {\n    margin-top: 16px;\n  }\n`;\n\nexport const Legend = styled.legend`\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-style: ${theme.text.inputLabel.fontStyle};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  text-decoration: ${theme.text.inputLabel.textDecoration};\n  color: ${theme.text.inputLabel.color};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAGa,QAAQ,GAAGA,uBAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n\n  & > * + * {\n    margin-top: 16px;\n  }\n`;\n\nexport const Legend = styled.legend`\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-style: ${theme.text.inputLabel.fontStyle};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  text-decoration: ${theme.text.inputLabel.textDecoration};\n  color: ${theme.text.inputLabel.color};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;MAGa,QAAQ,GAAGA,uBAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAGA,uBAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClBC,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9BA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;;"}

package/dist/components/ChoiceList/styled.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 
-const Fieldset = styled.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--bygv6o" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
-const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--18baj4v" }) `font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-style:${theme.text.inputLabel.fontStyle};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};text-decoration:${theme.text.inputLabel.textDecoration};color:${theme.text.inputLabel.color};`;
+const Fieldset = styled.fieldset.withConfig({ displayName: "vui--Fieldset", componentId: "vui--z1f13i" }) `padding:0;display:flex;flex-direction:column;border:0;& > * + *{margin-top:16px;}`;
+const Legend = styled.legend.withConfig({ displayName: "vui--Legend", componentId: "vui--snr02n" }) `font-family:${theme.text.inputLabel.fontFamily};font-size:${theme.text.inputLabel.fontSize};font-style:${theme.text.inputLabel.fontStyle};font-weight:${theme.text.inputLabel.fontWeight};line-height:${theme.text.inputLabel.lineHeight};text-decoration:${theme.text.inputLabel.textDecoration};color:${theme.text.inputLabel.color};`;
 
 export { Fieldset, Legend };
 //# sourceMappingURL=styled.js.map

package/dist/components/ChoiceList/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n\n  & > * + * {\n    margin-top: 16px;\n  }\n`;\n\nexport const Legend = styled.legend`\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-style: ${theme.text.inputLabel.fontStyle};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  text-decoration: ${theme.text.inputLabel.textDecoration};\n  color: ${theme.text.inputLabel.color};\n`;\n"],"names":[],"mappings":";;;MAGa,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ChoiceList/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\n\nexport const Fieldset = styled.fieldset`\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  border: 0;\n\n  & > * + * {\n    margin-top: 16px;\n  }\n`;\n\nexport const Legend = styled.legend`\n  font-family: ${theme.text.inputLabel.fontFamily};\n  font-size: ${theme.text.inputLabel.fontSize};\n  font-style: ${theme.text.inputLabel.fontStyle};\n  font-weight: ${theme.text.inputLabel.fontWeight};\n  line-height: ${theme.text.inputLabel.lineHeight};\n  text-decoration: ${theme.text.inputLabel.textDecoration};\n  color: ${theme.text.inputLabel.color};\n`;\n"],"names":[],"mappings":";;;MAGa,QAAQ,GAAG,MAAM,CAAC,QAAQ;AAWhC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EAClB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAClC,WAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAC7B,YAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAA,aAAA,EAC9B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAC5B,iBAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAC9C,OAAA,EAAA,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;;;"}

package/dist/components/CopyToClipboard/CopyToClipboard.cjs

@@ -19,7 +19,7 @@ const iconSizes = { width: sizes.sizes.base, height: sizes.sizes.base };
  * Created in here to fix orders table sizes. Bad pattern to use in main button component, as
  * touch target is below A11y guidelines.
  */
-const XSButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `padding:1px;height:unset;span{height:${sizes.sizes.base};width:${sizes.sizes.base};top:unset;}`;
+const XSButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--n9oowl" }) `padding:1px;height:unset;span{height:${sizes.sizes.base};width:${sizes.sizes.base};top:unset;}`;
 /**
  * A dynamic button to facilitate copying text to a users' keyboard when clicked.
  */

package/dist/components/CopyToClipboard/CopyToClipboard.js

@@ -12,7 +12,7 @@ const iconSizes = { width: sizes.base, height: sizes.base };
  * Created in here to fix orders table sizes. Bad pattern to use in main button component, as
  * touch target is below A11y guidelines.
  */
-const XSButton = styled(Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--e6p1xr" }) `padding:1px;height:unset;span{height:${sizes.base};width:${sizes.base};top:unset;}`;
+const XSButton = styled(Button).withConfig({ displayName: "vui--XSButton", componentId: "vui--n9oowl" }) `padding:1px;height:unset;span{height:${sizes.base};width:${sizes.base};top:unset;}`;
 /**
  * A dynamic button to facilitate copying text to a users' keyboard when clicked.
  */

package/dist/components/DataGrid/DataGrid.cjs

@@ -15,6 +15,7 @@ var Footer = require('./components/Footer/Footer.cjs');
 var GridContainer = require('./components/GridContainer/GridContainer.cjs');
 var useSortingState = require('./hooks/useSortingState.cjs');
 var usePinnedColumnLayout = require('./hooks/usePinnedColumnLayout.cjs');
+var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.cjs');
 var useSelectionState = require('./hooks/useSelectionState.cjs');
 var constants = require('./constants.cjs');
 var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
@@ -41,10 +42,11 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = React.useRef(null);
+    const tableRef = React.useRef(null);
     const showFooter = React.useMemo(() => columns.some((column) => column.renderFooter), [columns]);
-    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(), []);
+    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles(enableKeyboardNavigation), [enableKeyboardNavigation]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
      * Hooks to handle state for selection and sorting.
@@ -147,7 +149,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      * Other hooks
      */
     useDragToScroll.useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
-    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    useKeyboardNavigation.useKeyboardNavigation({ tableRef, enableKeyboardNavigation });
+    return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),
         React__default.default.createElement(Header.Header, { table: table }),
         table.getState().columnSizingInfo.isResizingColumn ? (React__default.default.createElement(Body.MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.default.createElement(Body.Body, { table: table, ariaRoles: ariaRoles, striped: striped })),

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

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

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

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

package/dist/components/DataGrid/DataGrid.js

@@ -13,6 +13,7 @@ import { Footer } from './components/Footer/Footer.js';
 import { GridContainer } from './components/GridContainer/GridContainer.js';
 import { useSortingState } from './hooks/useSortingState.js';
 import { usePinnedColumnLayout } from './hooks/usePinnedColumnLayout.js';
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
 import { useSelectionState } from './hooks/useSelectionState.js';
 import { SELECTION_COLUMN_ID } from './constants.js';
 import { SelectionColumnDefinition } from './columns/SelectionColumnDefinition.js';
@@ -35,10 +36,11 @@ import { SelectionColumnDefinition } from './columns/SelectionColumnDefinition.j
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, 'aria-label': ariaLabel, }) => {
     const containerRef = useRef(null);
+    const tableRef = useRef(null);
     const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
-    const ariaRoles = useMemo(() => getAriaRoles(), []);
+    const ariaRoles = useMemo(() => getAriaRoles(enableKeyboardNavigation), [enableKeyboardNavigation]);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
      * Hooks to handle state for selection and sorting.
@@ -141,7 +143,8 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
      * Other hooks
      */
     useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });
-    return (React__default.createElement(GridContainer, { containerRef: containerRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
+    useKeyboardNavigation({ tableRef, enableKeyboardNavigation });
+    return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),
         React__default.createElement(Header, { table: table }),
         table.getState().columnSizingInfo.isResizingColumn ? (React__default.createElement(MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped })) : (React__default.createElement(Body, { table: table, ariaRoles: ariaRoles, striped: striped })),

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

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

package/dist/components/DataGrid/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useSortingState } from './useSortingState';
 export { usePinnedColumnStyles } from './usePinnedColumnStyles';
 export { usePinnedColumnLayout } from './usePinnedColumnLayout';
+export { useKeyboardNavigation } from './useKeyboardNavigation';

package/dist/components/DataGrid/hooks/useKeyboardNavigation.cjs

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var tabbableSelectors = require('../../../utils/tabbableSelectors.cjs');
+
+/**
+ * Finds a target element to be selected within a table cell element. If the table cell
+ * contains focusable children, the first child will be returned, otherwise we'll simply
+ * focus on the table cell.
+ */
+const findTargetElement = (tableCell) => {
+    const validChildTarget = tableCell.querySelector(tabbableSelectors.TABBABLE_SELECTORS);
+    return validChildTarget !== null && validChildTarget !== undefined ? validChildTarget : tableCell;
+};
+/**
+ * Finds the next available cell that can be focused by the user, within the next row.
+ */
+const findNextCell = (nextRow, nextCellIndex) => {
+    if (nextCellIndex >= nextRow.cells.length ||
+        nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')) {
+        // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.
+        return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));
+    }
+    return nextRow.cells[nextCellIndex];
+};
+/**
+ * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.
+ * @param table The table element.
+ * @param event The keyboard event.
+ */
+const handleKeyDown = (table, event) => {
+    var _a;
+    const target = event.target;
+    if (!table)
+        return;
+    const currentCell = target.closest('td, th');
+    if (!currentCell)
+        return;
+    const currentRow = currentCell.parentElement;
+    if (!currentRow)
+        return;
+    const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);
+    const cellIndex = Array.from(currentRow.children).indexOf(currentCell);
+    let nextRowIndex = rowIndex;
+    let nextCellIndex = cellIndex;
+    switch (event.key) {
+        case 'ArrowUp':
+            event.preventDefault();
+            nextRowIndex = Math.max(0, rowIndex - 1);
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            nextCellIndex = Math.max(0, cellIndex - 1);
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);
+            break;
+        default:
+            return;
+    }
+    const nextRow = table.rows[nextRowIndex];
+    const nextCell = findNextCell(nextRow, nextCellIndex);
+    if (nextCell) {
+        const nextTarget = findTargetElement(nextCell);
+        nextTarget.setAttribute('tabindex', '0');
+        (_a = nextTarget.scrollIntoView) === null || _a === undefined ? undefined : _a.call(nextTarget, { inline: 'nearest', block: 'nearest' });
+        nextTarget.focus();
+        // Clear the tabindex when the element loses focus
+        nextTarget.addEventListener('blur', () => {
+            if (nextTarget.attributes.getNamedItem('data-first')) {
+                return;
+            }
+            nextTarget.removeAttribute('tabindex');
+        }, { once: true });
+    }
+};
+/**
+ * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled
+ * with the `enableKeyboardNavigation` prop.
+ *
+ * Supports navigating between cells and rows, with the focus directed either towards the cell element, or
+ * the first interactive child if one is present.
+ */
+const useKeyboardNavigation = ({ enableKeyboardNavigation, tableRef, }) => {
+    React.useEffect(() => {
+        if (!tableRef.current || !enableKeyboardNavigation) {
+            return undefined;
+        }
+        const table = tableRef.current;
+        // Find the first column header in the table, and assign it a tabindex.
+        const firstElement = table.querySelector('th');
+        if (!firstElement)
+            return undefined;
+        const firstTarget = findTargetElement(firstElement);
+        firstTarget.setAttribute('tabindex', '0');
+        firstTarget.setAttribute('data-first', '');
+        const handler = (event) => handleKeyDown(table, event);
+        table.addEventListener('keydown', handler);
+        return () => {
+            table.removeEventListener('keydown', handler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableRef, enableKeyboardNavigation]);
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;
+//# sourceMappingURL=useKeyboardNavigation.cjs.map

package/dist/components/DataGrid/hooks/useKeyboardNavigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.cjs","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":["TABBABLE_SELECTORS","useEffect"],"mappings":"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"}

package/dist/components/DataGrid/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { DataGridProps } from '../types';
+type UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {
+    tableRef: RefObject<HTMLTableElement>;
+};
+/**
+ * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled
+ * with the `enableKeyboardNavigation` prop.
+ *
+ * Supports navigating between cells and rows, with the focus directed either towards the cell element, or
+ * the first interactive child if one is present.
+ */
+export declare const useKeyboardNavigation: ({ enableKeyboardNavigation, tableRef, }: UseKeyboardNavigationProps) => void;
+export {};

package/dist/components/DataGrid/hooks/useKeyboardNavigation.js

@@ -0,0 +1,110 @@
+import { useEffect } from 'react';
+import { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors.js';
+
+/**
+ * Finds a target element to be selected within a table cell element. If the table cell
+ * contains focusable children, the first child will be returned, otherwise we'll simply
+ * focus on the table cell.
+ */
+const findTargetElement = (tableCell) => {
+    const validChildTarget = tableCell.querySelector(TABBABLE_SELECTORS);
+    return validChildTarget !== null && validChildTarget !== undefined ? validChildTarget : tableCell;
+};
+/**
+ * Finds the next available cell that can be focused by the user, within the next row.
+ */
+const findNextCell = (nextRow, nextCellIndex) => {
+    if (nextCellIndex >= nextRow.cells.length ||
+        nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')) {
+        // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.
+        return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));
+    }
+    return nextRow.cells[nextCellIndex];
+};
+/**
+ * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.
+ * @param table The table element.
+ * @param event The keyboard event.
+ */
+const handleKeyDown = (table, event) => {
+    var _a;
+    const target = event.target;
+    if (!table)
+        return;
+    const currentCell = target.closest('td, th');
+    if (!currentCell)
+        return;
+    const currentRow = currentCell.parentElement;
+    if (!currentRow)
+        return;
+    const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);
+    const cellIndex = Array.from(currentRow.children).indexOf(currentCell);
+    let nextRowIndex = rowIndex;
+    let nextCellIndex = cellIndex;
+    switch (event.key) {
+        case 'ArrowUp':
+            event.preventDefault();
+            nextRowIndex = Math.max(0, rowIndex - 1);
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            nextCellIndex = Math.max(0, cellIndex - 1);
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);
+            break;
+        default:
+            return;
+    }
+    const nextRow = table.rows[nextRowIndex];
+    const nextCell = findNextCell(nextRow, nextCellIndex);
+    if (nextCell) {
+        const nextTarget = findTargetElement(nextCell);
+        nextTarget.setAttribute('tabindex', '0');
+        (_a = nextTarget.scrollIntoView) === null || _a === undefined ? undefined : _a.call(nextTarget, { inline: 'nearest', block: 'nearest' });
+        nextTarget.focus();
+        // Clear the tabindex when the element loses focus
+        nextTarget.addEventListener('blur', () => {
+            if (nextTarget.attributes.getNamedItem('data-first')) {
+                return;
+            }
+            nextTarget.removeAttribute('tabindex');
+        }, { once: true });
+    }
+};
+/**
+ * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled
+ * with the `enableKeyboardNavigation` prop.
+ *
+ * Supports navigating between cells and rows, with the focus directed either towards the cell element, or
+ * the first interactive child if one is present.
+ */
+const useKeyboardNavigation = ({ enableKeyboardNavigation, tableRef, }) => {
+    useEffect(() => {
+        if (!tableRef.current || !enableKeyboardNavigation) {
+            return undefined;
+        }
+        const table = tableRef.current;
+        // Find the first column header in the table, and assign it a tabindex.
+        const firstElement = table.querySelector('th');
+        if (!firstElement)
+            return undefined;
+        const firstTarget = findTargetElement(firstElement);
+        firstTarget.setAttribute('tabindex', '0');
+        firstTarget.setAttribute('data-first', '');
+        const handler = (event) => handleKeyDown(table, event);
+        table.addEventListener('keydown', handler);
+        return () => {
+            table.removeEventListener('keydown', handler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableRef, enableKeyboardNavigation]);
+};
+
+export { useKeyboardNavigation };
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/components/DataGrid/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":[],"mappings":"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"}

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

@@ -44,6 +44,11 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Additional styles to be applied to the grid container.
      */
     containerStyle?: React.CSSProperties;
+    /**
+     * Enable/disable keyboard navigation within the grid. Using the arrow keys will move users between cells and rows, selecting either the cell (if no interactive children are found),
+     * or the first interactive child within the cell (if one is present).
+     */
+    enableKeyboardNavigation?: boolean;
     /** Columns */
     /**
      * Column definitions. It is not recommended that you modify these once the table has been initialized, since internal state

package/dist/components/DataGrid/utils/getAriaRoles.cjs

@@ -1,9 +1,15 @@
 'use strict';
 
-const getAriaRoles = () => {
+const getAriaRoles = (enableKeyboardNavigation) => {
+    if (!enableKeyboardNavigation) {
+        return {
+            table: 'table',
+            cell: 'cell',
+        };
+    }
     return {
-        table: 'table',
-        cell: 'cell',
+        table: 'grid',
+        cell: 'gridcell',
     };
 };
 

package/dist/components/DataGrid/utils/getAriaRoles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}

package/dist/components/DataGrid/utils/getAriaRoles.d.ts

@@ -1,2 +1,2 @@
 import { AriaRoles } from '../types/AriaRoles';
-export declare const getAriaRoles: () => AriaRoles;
+export declare const getAriaRoles: (enableKeyboardNavigation: boolean) => AriaRoles;

package/dist/components/DataGrid/utils/getAriaRoles.js

@@ -1,7 +1,13 @@
-const getAriaRoles = () => {
+const getAriaRoles = (enableKeyboardNavigation) => {
+    if (!enableKeyboardNavigation) {
+        return {
+            table: 'table',
+            cell: 'cell',
+        };
+    }
     return {
-        table: 'table',
-        cell: 'cell',
+        table: 'grid',
+        cell: 'gridcell',
     };
 };
 

package/dist/components/DataGrid/utils/getAriaRoles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (): AriaRoles => {\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,GAAG,MAAgB;IAC1C,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}
+{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { AriaRoles } from '../types/AriaRoles';\n\nexport const getAriaRoles = (enableKeyboardNavigation: boolean): AriaRoles => {\n  if (!enableKeyboardNavigation) {\n    return {\n      table: 'table',\n      cell: 'cell',\n    };\n  }\n\n  return {\n    table: 'grid',\n    cell: 'gridcell',\n  };\n};\n"],"names":[],"mappings":"AAEa,MAAA,YAAY,GAAG,CAAC,wBAAiC,KAAe;IAC3E,IAAI,CAAC,wBAAwB,EAAE;QAC7B,OAAO;AACL,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,IAAI,EAAE,MAAM;SACb;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,IAAI,EAAE,UAAU;KACjB;AACH;;;;"}

package/dist/components/DataTable/components/ActionBar.cjs

@@ -11,8 +11,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
+const Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--uoc40o" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
+const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--x1996k" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = React.useState(false);