@veeqo/ui 9.10.0 → 9.10.2

package/dist/components/Anchor/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Anchor';
+export * from './utils/urlUtils';
 export * from './types';

package/dist/components/DataGrid/DataGrid.cjs

@@ -19,6 +19,7 @@ var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.cjs');
 var useSelectionState = require('./hooks/useSelectionState.cjs');
 var constants = require('./constants.cjs');
 var SelectionColumnDefinition = require('./columns/SelectionColumnDefinition.cjs');
+var useExpandedState = require('./hooks/useExpandedState.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -42,14 +43,14 @@ 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, enableKeyboardNavigation = false, 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, rowGrouping, '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(enableKeyboardNavigation), [enableKeyboardNavigation]);
+    const ariaRoles = React.useMemo(() => getAriaRoles.getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = React.useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
-     * Hooks to handle state for selection and sorting.
+     * Hooks to handle state for selection, sorting, and expanded/collapsed.
      */
     const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState.useSelectionState({
         selectionMode,
@@ -58,6 +59,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         onSelectionChanged,
     });
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState.useSortingState({ columns, sortState, onSortChanged });
+    const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState.useExpandedState(rowGrouping);
     /**
      * Mapping of column definitions.
      */
@@ -132,6 +134,12 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         enableRowSelection,
         enableMultiRowSelection,
         onRowSelectionChange,
+        // Row grouping
+        getSubRows,
+        getRowCanExpand,
+        onExpandedChange,
+        enableExpanding,
+        getExpandedRowModel: enableExpanding ? reactTable.getExpandedRowModel() : undefined,
         // Inject external table state
         state: {
             columnOrder,
@@ -139,6 +147,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             columnPinning,
             sorting,
             rowSelection,
+            expanded,
         },
     });
     /**

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, 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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"}
+{"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 { 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';\nimport { useExpandedState } from './hooks/useExpandedState';\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  rowGrouping,\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, 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\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   * 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    // 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    },\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","useExpandedState","ColumnMapper","SelectionColumnDefinition","SELECTION_COLUMN_ID","useReactTable","getCoreRowModel","getExpandedRowModel","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, enableKeyboardNavigation, 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, rowGrouping, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -1,5 +1,5 @@
 import React__default, { useRef, useMemo } from 'react';
-import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getExpandedRowModel } from '@tanstack/react-table';
 import '../../hooks/useFocusVisible.js';
 import 'uid/secure';
 import { useDragToScroll } from '../../hooks/useDragToScroll.js';
@@ -17,6 +17,7 @@ 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';
+import { useExpandedState } from './hooks/useExpandedState.js';
 
 /**
  * [WIP]
@@ -36,14 +37,14 @@ 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, enableKeyboardNavigation = false, 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, rowGrouping, 'aria-label': ariaLabel, }) => {
     const containerRef = useRef(null);
     const tableRef = useRef(null);
     const showFooter = useMemo(() => columns.some((column) => column.renderFooter), [columns]);
-    const ariaRoles = useMemo(() => getAriaRoles(enableKeyboardNavigation), [enableKeyboardNavigation]);
+    const ariaRoles = useMemo(() => getAriaRoles({ enableKeyboardNavigation, rowGrouping }), [enableKeyboardNavigation, rowGrouping]);
     const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);
     /**
-     * Hooks to handle state for selection and sorting.
+     * Hooks to handle state for selection, sorting, and expanded/collapsed.
      */
     const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } = useSelectionState({
         selectionMode,
@@ -52,6 +53,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         onSelectionChanged,
     });
     const { enableSorting, enableMultiRemove, enableSortingRemoval, manualSorting, sorting, onSortingChange, } = useSortingState({ columns, sortState, onSortChanged });
+    const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } = useExpandedState(rowGrouping);
     /**
      * Mapping of column definitions.
      */
@@ -126,6 +128,12 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         enableRowSelection,
         enableMultiRowSelection,
         onRowSelectionChange,
+        // Row grouping
+        getSubRows,
+        getRowCanExpand,
+        onExpandedChange,
+        enableExpanding,
+        getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,
         // Inject external table state
         state: {
             columnOrder,
@@ -133,6 +141,7 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
             columnPinning,
             sorting,
             rowSelection,
+            expanded,
         },
     });
     /**

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, 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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"}
+{"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 { 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';\nimport { useExpandedState } from './hooks/useExpandedState';\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  rowGrouping,\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, 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\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   * 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    // 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    },\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/components/Body/Body.cjs

@@ -9,7 +9,10 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const Body = ({ table, striped, ariaRoles }) => {
-    return (React__default.default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.default.createElement(Row.Row, { key: row.id, row: row, striped: striped }, row.getVisibleCells().map((cell) => (React__default.default.createElement(BodyCell.BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles }))))))));
+    var _a, _b;
+    const enableExpanding = (_a = table.options.enableExpanding) !== null && _a !== undefined ? _a : false;
+    const enableRowSelection = (_b = table.options.enableRowSelection) !== null && _b !== undefined ? _b : false;
+    return (React__default.default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.default.createElement(Row.Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.default.createElement(BodyCell.BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
 };
 /**
  * Memoized table body, used to prevent rerenders when columns are being resized.

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

@@ -1 +1 @@
-{"version":3,"file":"Body.cjs","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell cell={cell} key={cell.id} ariaRoles={ariaRoles} />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React","Row","BodyCell"],"mappings":";;;;;;;;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;AAC/D,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gBAAgB,EAC9B,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EACzC,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC7D,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGF,sBAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;"}
+{"version":3,"file":"Body.cjs","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React","Row","BodyCell"],"mappings":";;;;;;;;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAC9B,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAC,CAAA,aAAA,CAAAC,OAAG,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,IAC3E,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BD,qCAACE,iBAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGF,sBAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;"}

package/dist/components/DataGrid/components/Body/Body.js

@@ -3,7 +3,10 @@ import { BodyCell } from './BodyCell/BodyCell.js';
 import { Row } from './Row/Row.js';
 
 const Body = ({ table, striped, ariaRoles }) => {
-    return (React__default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.createElement(Row, { key: row.id, row: row, striped: striped }, row.getVisibleCells().map((cell) => (React__default.createElement(BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles }))))))));
+    var _a, _b;
+    const enableExpanding = (_a = table.options.enableExpanding) !== null && _a !== undefined ? _a : false;
+    const enableRowSelection = (_b = table.options.enableRowSelection) !== null && _b !== undefined ? _b : false;
+    return (React__default.createElement("tbody", { className: "data-grid-body" }, table.getRowModel().rows.map((row) => (React__default.createElement(Row, { key: row.id, row: row, striped: striped, enableExpanding: enableExpanding }, row.getVisibleCells().map((cell) => (React__default.createElement(BodyCell, { cell: cell, key: cell.id, ariaRoles: ariaRoles, enableExpanding: enableExpanding, enableRowSelection: !!enableRowSelection }))))))));
 };
 /**
  * Memoized table body, used to prevent rerenders when columns are being resized.

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

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell cell={cell} key={cell.id} ariaRoles={ariaRoles} />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;AAC/D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,gBAAgB,EAC9B,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EACzC,EAAA,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC7D,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGA,cAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;"}
+{"version":3,"file":"Body.js","sources":["../../../../../src/components/DataGrid/components/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { BodyCell } from './BodyCell';\nimport { Row } from './Row';\nimport { AriaRoles } from '../../types';\n\ntype BodyProps = {\n  /**\n   * TanStack table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Whether the rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, ariaRoles }: BodyProps) => {\n  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\">\n      {table.getRowModel().rows.map((row) => (\n        <Row key={row.id} row={row} striped={striped} enableExpanding={enableExpanding}>\n          {row.getVisibleCells().map((cell) => (\n            <BodyCell\n              cell={cell}\n              key={cell.id}\n              ariaRoles={ariaRoles}\n              enableExpanding={enableExpanding}\n              enableRowSelection={!!enableRowSelection}\n            />\n          ))}\n        </Row>\n      ))}\n    </tbody>\n  );\n};\n\n/**\n * Memoized table body, used to prevent rerenders when columns are being resized.\n */\nexport const MemoizedBody = React.memo(\n  Body,\n  (prev, next) => prev.table.options.data === next.table.options.data,\n);\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAa,KAAI;;IAC/D,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,eAAe,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;IAC9D,MAAM,kBAAkB,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,OAAO,CAAC,kBAAkB,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,KAAK;AAEpE,IAAA,QACEA,cAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAC9B,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAC,CAAA,aAAA,CAAA,GAAG,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,IAC3E,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,6BAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,CAAC,CAAC,kBAAkB,EAAA,CACxC,CACH,CAAC,CACE,CACP,CAAC,CACI;AAEZ;AAEA;;AAEG;AACI,MAAM,YAAY,GAAGA,cAAK,CAAC,IAAI,CACpC,IAAI,EACJ,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -6,6 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent = require('../../CellContent/CellContent.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
+var useExpandableCell = require('./hooks/useExpandableCell.cjs');
 var BodyCell_module = require('./BodyCell.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -15,10 +16,15 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
  */
-const BodyCell = ({ cell, ariaRoles }) => {
+const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({ column: cell.column });
+    const { expandButtonProps, contentMarginLeft } = useExpandableCell.useExpandableCell({
+        cell,
+        enableExpanding,
+        enableRowSelection,
+    });
     const bodyCellClassname = buildClassnames.buildClassnames([
         BodyCell_module.bodyCell,
         pinnedCellClassName,
@@ -26,9 +32,10 @@ const BodyCell = ({ cell, ariaRoles }) => {
     ]);
     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 },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: {
+                marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            } }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }, expandButtonProps: expandButtonProps }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))));
 };
 
 exports.BodyCell = BodyCell;

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

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React 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 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/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\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    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,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;IAEhG,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,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;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React 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 } = 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  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    >\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, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","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,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,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;IAEF,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;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

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

@@ -10,9 +10,17 @@ type ColumnCellProps = {
      * ARIA roles for the grid.
      */
     ariaRoles: AriaRoles;
+    /**
+     * Whether row selection is enabled.
+     */
+    enableRowSelection: boolean;
+    /**
+     * Whether row expanding is enabled for the grid.
+     */
+    enableExpanding: boolean;
 };
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
  */
-export declare const BodyCell: ({ cell, ariaRoles }: ColumnCellProps) => React.JSX.Element;
+export declare const BodyCell: ({ cell, ariaRoles, enableRowSelection, enableExpanding, }: ColumnCellProps) => React.JSX.Element;
 export {};

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

@@ -4,15 +4,21 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { CellContent } from '../../CellContent/CellContent.js';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
+import { useExpandableCell } from './hooks/useExpandableCell.js';
 import styles from './BodyCell.module.scss.js';
 
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
  */
-const BodyCell = ({ cell, ariaRoles }) => {
+const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });
+    const { expandButtonProps, contentMarginLeft } = useExpandableCell({
+        cell,
+        enableExpanding,
+        enableRowSelection,
+    });
     const bodyCellClassname = buildClassnames([
         styles.bodyCell,
         pinnedCellClassName,
@@ -20,9 +26,10 @@ const BodyCell = ({ cell, ariaRoles }) => {
     ]);
     return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
         React__default.createElement(CellContent, { contentStyle: {
+                marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            } }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }, expandButtonProps: expandButtonProps }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
 };
 
 export { BodyCell };

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

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React 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 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/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\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    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,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;IAEhG,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,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;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React 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 } = 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  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    >\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, cell.getContext())}\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,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,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;IAEF,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;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EAAA,EAEnC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

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

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

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
+    /**
+     * If this cell is the first column, and the row can be expanded, then we need to show the expand button.
+     */
+    const isFirstColumn = enableRowSelection
+        ? cell.column.getIndex() === 1
+        : cell.column.getIndex() === 0;
+    const isExpanded = cell.row.getIsExpanded();
+    // Margin to use for the expand button, based on the row depth.
+    const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;
+    // Props for the expand button within the cell content.
+    const expandButtonProps = React.useMemo(() => {
+        // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).
+        if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {
+            return undefined;
+        }
+        return {
+            isExpanded,
+            onToggle: cell.row.getToggleExpandedHandler(),
+            containerStyle: {
+                width: expandMargin,
+            },
+        };
+    }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);
+    const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;
+    return { expandButtonProps, contentMarginLeft };
+};
+
+exports.useExpandableCell = useExpandableCell;
+//# sourceMappingURL=useExpandableCell.cjs.map

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableCell.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  /**\n   * If this cell is the first column, and the row can be expanded, then we need to show the expand button.\n   */\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n\n  // Margin to use for the expand button, based on the row depth.\n  const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;\n\n  // Props for the expand button within the cell content.\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).\n    if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: expandMargin,\n      },\n    };\n  }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);\n\n  const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":["useMemo"],"mappings":";;;;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;AAC3B;;AAEG;IACH,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;IAG3C,MAAM,YAAY,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG;;AAGnE,IAAA,MAAM,iBAAiB,GAAkCA,aAAO,CAAC,MAAK;;AAEpE,QAAA,IAAI,CAAC,eAAe,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE;AAClE,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;AAExE,IAAA,MAAM,iBAAiB,GAAG,aAAa,IAAI,eAAe,GAAG,YAAY,GAAG,SAAS;AAErF,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.d.ts

@@ -0,0 +1,21 @@
+import { Cell } from '@tanstack/react-table';
+import { ExpandButtonProps } from '../../../CellContent/ExpandButton';
+type UseExpandableCellProps = {
+    /**
+     * Cell within the table.
+     */
+    cell: Cell<any, any>;
+    /**
+     * Whether row selection is enabled.
+     */
+    enableRowSelection: boolean;
+    /**
+     * Whether row expanding is enabled.
+     */
+    enableExpanding: boolean;
+};
+export declare const useExpandableCell: ({ cell, enableRowSelection, enableExpanding, }: UseExpandableCellProps) => {
+    expandButtonProps: ExpandButtonProps | undefined;
+    contentMarginLeft: string | undefined;
+};
+export {};

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+
+const useExpandableCell = ({ cell, enableRowSelection, enableExpanding, }) => {
+    /**
+     * If this cell is the first column, and the row can be expanded, then we need to show the expand button.
+     */
+    const isFirstColumn = enableRowSelection
+        ? cell.column.getIndex() === 1
+        : cell.column.getIndex() === 0;
+    const isExpanded = cell.row.getIsExpanded();
+    // Margin to use for the expand button, based on the row depth.
+    const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;
+    // Props for the expand button within the cell content.
+    const expandButtonProps = useMemo(() => {
+        // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).
+        if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {
+            return undefined;
+        }
+        return {
+            isExpanded,
+            onToggle: cell.row.getToggleExpandedHandler(),
+            containerStyle: {
+                width: expandMargin,
+            },
+        };
+    }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);
+    const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;
+    return { expandButtonProps, contentMarginLeft };
+};
+
+export { useExpandableCell };
+//# sourceMappingURL=useExpandableCell.js.map

package/dist/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandableCell.js","sources":["../../../../../../../src/components/DataGrid/components/Body/BodyCell/hooks/useExpandableCell.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Cell } from '@tanstack/react-table';\n\nimport { ExpandButtonProps } from '../../../CellContent/ExpandButton';\n\ntype UseExpandableCellProps = {\n  /**\n   * Cell within the table.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n};\n\nexport const useExpandableCell = ({\n  cell,\n  enableRowSelection,\n  enableExpanding,\n}: UseExpandableCellProps) => {\n  /**\n   * If this cell is the first column, and the row can be expanded, then we need to show the expand button.\n   */\n  const isFirstColumn = enableRowSelection\n    ? cell.column.getIndex() === 1\n    : cell.column.getIndex() === 0;\n\n  const isExpanded = cell.row.getIsExpanded();\n\n  // Margin to use for the expand button, based on the row depth.\n  const expandMargin = `calc(var(--sizes-6) * ${cell.row.depth + 1})`;\n\n  // Props for the expand button within the cell content.\n  const expandButtonProps: ExpandButtonProps | undefined = useMemo(() => {\n    // If this cell is not the first column, or the row cannot be expanded, return undefined (don't show the button).\n    if (!enableExpanding || !isFirstColumn || !cell.row.getCanExpand()) {\n      return undefined;\n    }\n\n    return {\n      isExpanded,\n      onToggle: cell.row.getToggleExpandedHandler(),\n      containerStyle: {\n        width: expandMargin,\n      },\n    };\n  }, [isFirstColumn, cell.row, enableExpanding, isExpanded, expandMargin]);\n\n  const contentMarginLeft = isFirstColumn && enableExpanding ? expandMargin : undefined;\n\n  return { expandButtonProps, contentMarginLeft };\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,kBAAkB,EAClB,eAAe,GACQ,KAAI;AAC3B;;AAEG;IACH,MAAM,aAAa,GAAG;UAClB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK;UAC3B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEhC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;;IAG3C,MAAM,YAAY,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG;;AAGnE,IAAA,MAAM,iBAAiB,GAAkC,OAAO,CAAC,MAAK;;AAEpE,QAAA,IAAI,CAAC,eAAe,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,EAAE;AAClE,YAAA,OAAO,SAAS;AACjB;QAED,OAAO;YACL,UAAU;AACV,YAAA,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE;AAC7C,YAAA,cAAc,EAAE;AACd,gBAAA,KAAK,EAAE,YAAY;AACpB,aAAA;SACF;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG,EAAE,eAAe,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;AAExE,IAAA,MAAM,iBAAiB,GAAG,aAAa,IAAI,eAAe,GAAG,YAAY,GAAG,SAAS;AAErF,IAAA,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE;AACjD;;;;"}

package/dist/components/DataGrid/components/Body/Row/Row.cjs

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Row = ({ row, striped, children }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+const Row = ({ row, striped, enableExpanding, children }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined }, children));
 
 exports.Row = Row;
 //# sourceMappingURL=Row.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAE3B,EAAA,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

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

@@ -9,10 +9,14 @@ type RowProps = {
      * Whether rows should be striped or not.
      */
     striped: boolean;
+    /**
+     * Whether row expanding is enabled.
+     */
+    enableExpanding: boolean;
     /**
      * Child elements (table cells).
      */
     children: React.ReactNode;
 };
-export declare const Row: ({ row, striped, children }: RowProps) => React.JSX.Element;
+export declare const Row: ({ row, striped, enableExpanding, children }: RowProps) => React.JSX.Element;
 export {};

package/dist/components/DataGrid/components/Body/Row/Row.js

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 
-const Row = ({ row, striped, children }) => (React__default.createElement("tr", { className: buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+const Row = ({ row, striped, enableExpanding, children }) => (React__default.createElement("tr", { className: buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined }, children));
 
 export { Row };
 //# sourceMappingURL=Row.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAE3B,EAAA,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

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

@@ -4,6 +4,7 @@ var React = require('react');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent_module = require('./CellContent.module.scss.cjs');
+var ExpandButton = require('./ExpandButton/ExpandButton.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,8 +14,10 @@ const cellContentClassname = buildClassnames.buildClassnames([CellContent_module
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children }) => {
-    return (React__default.default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children));
+const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+    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)));
 };
 
 exports.CellContent = CellContent;

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

@@ -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';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\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 }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"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;;;;"}

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

@@ -1,15 +1,20 @@
 import React from 'react';
+import { ExpandButtonProps } from './ExpandButton';
 export interface CellContentProps {
     /**
      * Styles to be applied to the cell content wrapper.
      */
-    contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;
+    contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign' | 'marginLeft'>;
     /**
      * Child elements.
      */
     children?: React.ReactNode;
+    /**
+     * Props for an expand/collapse button, if applicable.
+     */
+    expandButtonProps?: ExpandButtonProps;
 }
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-export declare const CellContent: ({ contentStyle, children }: CellContentProps) => React.JSX.Element;
+export declare const CellContent: ({ contentStyle, children, expandButtonProps }: CellContentProps) => React.JSX.Element;

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

@@ -2,13 +2,16 @@ import React__default from 'react';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import styles from './CellContent.module.scss.js';
+import { ExpandButton } from './ExpandButton/ExpandButton.js';
 
 const cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children }) => {
-    return (React__default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children));
+const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+    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)));
 };
 
 export { CellContent };

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

@@ -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';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\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 }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"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;;;;"}

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var DownArrowIcon = require('../../../../../tempIcons/DownArrowIcon.cjs');
+var RightArrowIcon = require('../../../../../tempIcons/RightArrowIcon.cjs');
+require('../../../../../theme/modules/sizes.cjs');
+var Button = require('../../../../Button/Button.cjs');
+var ExpandButton_module = require('./ExpandButton.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ExpandButton = ({ isExpanded, onToggle, containerStyle }) => {
+    return (React__default.default.createElement("div", { className: ExpandButton_module.expandButtonContainer, style: containerStyle },
+        React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", className: ExpandButton_module.expandButton, iconSlot: isExpanded ? React__default.default.createElement(DownArrowIcon.DownArrowIcon, null) : React__default.default.createElement(RightArrowIcon.RightArrowIcon, null), onClick: onToggle, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', "aria-expanded": isExpanded })));
+};
+
+exports.ExpandButton = ExpandButton;
+//# sourceMappingURL=ExpandButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.cjs","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DownArrowIcon, RightArrowIcon } from '../../../../../tempIcons';\nimport { Button } from '../../../../Button';\n\nimport styles from './ExpandButton.module.scss';\n\ntype ExpandButtonProps = {\n  isExpanded: boolean;\n  onToggle: () => void;\n  containerStyle?: React.CSSProperties;\n};\n\nconst ExpandButton = ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => {\n  return (\n    <div className={styles.expandButtonContainer} style={containerStyle}>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        className={styles.expandButton}\n        iconSlot={isExpanded ? <DownArrowIcon /> : <RightArrowIcon />}\n        onClick={onToggle}\n        aria-label={isExpanded ? 'Collapse row' : 'Expand row'}\n        aria-expanded={isExpanded}\n      />\n    </div>\n  );\n};\n\nexport { ExpandButton };\nexport type { ExpandButtonProps };\n"],"names":["React","styles","Button","DownArrowIcon","RightArrowIcon"],"mappings":";;;;;;;;;;;;;AAaM,MAAA,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAqB,KAAI;IACnF,QACEA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAA;QACjED,sBAAC,CAAA,aAAA,CAAAE,aAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,SAAS,EAAED,mBAAM,CAAC,YAAY,EAC9B,QAAQ,EAAE,UAAU,GAAGD,sBAAA,CAAA,aAAA,CAACG,2BAAa,EAAA,IAAA,CAAG,GAAGH,qCAACI,6BAAc,EAAA,IAAA,CAAG,EAC7D,OAAO,EAAE,QAAQ,EAAA,YAAA,EACL,UAAU,GAAG,cAAc,GAAG,YAAY,mBACvC,UAAU,EAAA,CACzB,CACE;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+type ExpandButtonProps = {
+    isExpanded: boolean;
+    onToggle: () => void;
+    containerStyle?: React.CSSProperties;
+};
+declare const ExpandButton: ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => React.JSX.Element;
+export { ExpandButton };
+export type { ExpandButtonProps };

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { DownArrowIcon } from '../../../../../tempIcons/DownArrowIcon.js';
+import { RightArrowIcon } from '../../../../../tempIcons/RightArrowIcon.js';
+import '../../../../../theme/modules/sizes.js';
+import { Button } from '../../../../Button/Button.js';
+import styles from './ExpandButton.module.scss.js';
+
+const ExpandButton = ({ isExpanded, onToggle, containerStyle }) => {
+    return (React__default.createElement("div", { className: styles.expandButtonContainer, style: containerStyle },
+        React__default.createElement(Button, { size: "sm", variant: "flat", className: styles.expandButton, iconSlot: isExpanded ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(RightArrowIcon, null), onClick: onToggle, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', "aria-expanded": isExpanded })));
+};
+
+export { ExpandButton };
+//# sourceMappingURL=ExpandButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.js","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DownArrowIcon, RightArrowIcon } from '../../../../../tempIcons';\nimport { Button } from '../../../../Button';\n\nimport styles from './ExpandButton.module.scss';\n\ntype ExpandButtonProps = {\n  isExpanded: boolean;\n  onToggle: () => void;\n  containerStyle?: React.CSSProperties;\n};\n\nconst ExpandButton = ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => {\n  return (\n    <div className={styles.expandButtonContainer} style={containerStyle}>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        className={styles.expandButton}\n        iconSlot={isExpanded ? <DownArrowIcon /> : <RightArrowIcon />}\n        onClick={onToggle}\n        aria-label={isExpanded ? 'Collapse row' : 'Expand row'}\n        aria-expanded={isExpanded}\n      />\n    </div>\n  );\n};\n\nexport { ExpandButton };\nexport type { ExpandButtonProps };\n"],"names":["React"],"mappings":";;;;;;;AAaM,MAAA,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAqB,KAAI;IACnF,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAA;QACjEA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAE,UAAU,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,6BAAC,cAAc,EAAA,IAAA,CAAG,EAC7D,OAAO,EAAE,QAAQ,EAAA,YAAA,EACL,UAAU,GAAG,cAAc,GAAG,YAAY,mBACvC,UAAU,EAAA,CACzB,CACE;AAEV;;;;"}

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._expandButton_153ka_1[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n._expandButtonContainer_153ka_7 {\n  display: flex;\n  height: 100%;\n  position: absolute;\n  top: var(--sizes-none);\n  align-items: center;\n  justify-content: flex-end;\n}");
+var styles = {"expandButton":"_expandButton_153ka_1","expandButtonContainer":"_expandButtonContainer_153ka_7"};
+
+module.exports = styles;
+//# sourceMappingURL=ExpandButton.module.scss.cjs.map

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss"],"sourcesContent":[".expandButton[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n.expandButtonContainer {\n  display: flex;\n  height: 100%;\n\n  position: absolute;\n  top: var(--sizes-none);\n\n  align-items: center;\n  justify-content: flex-end;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mTAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._expandButton_153ka_1[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n._expandButtonContainer_153ka_7 {\n  display: flex;\n  height: 100%;\n  position: absolute;\n  top: var(--sizes-none);\n  align-items: center;\n  justify-content: flex-end;\n}");
+var styles = {"expandButton":"_expandButton_153ka_1","expandButtonContainer":"_expandButtonContainer_153ka_7"};
+
+export { styles as default };
+//# sourceMappingURL=ExpandButton.module.scss.js.map

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss"],"sourcesContent":[".expandButton[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n.expandButtonContainer {\n  display: flex;\n  height: 100%;\n\n  position: absolute;\n  top: var(--sizes-none);\n\n  align-items: center;\n  justify-content: flex-end;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mTAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

package/dist/components/DataGrid/components/CellContent/ExpandButton/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandButton } from './ExpandButton';
+export type { ExpandButtonProps } from './ExpandButton';

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+
+const useExpandedState = (rowGrouping) => {
+    const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};
+    const internalExpandedState = React.useMemo(() => {
+        if (!expandedRows || !onRowExpanded)
+            return {};
+        return expandedRows;
+    }, [expandedRows, onRowExpanded]);
+    const setInternalExpandedState = React.useCallback((onUpdate) => {
+        if (!onRowExpanded)
+            return;
+        const newExpandedState = typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;
+        onRowExpanded(newExpandedState);
+    }, [onRowExpanded, internalExpandedState]);
+    const enableExpanding = !!getChildData;
+    const getRowCanExpand = React.useCallback((row) => {
+        if (!getChildData)
+            return false;
+        return getChildData(row.original) !== undefined;
+    }, [getChildData]);
+    return {
+        enableExpanding,
+        getSubRows: getChildData,
+        getRowCanExpand,
+        expanded: internalExpandedState,
+        onExpandedChange: setInternalExpandedState,
+    };
+};
+
+exports.useExpandedState = useExpandedState;
+//# sourceMappingURL=useExpandedState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandedState.cjs","sources":["../../../../src/components/DataGrid/hooks/useExpandedState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { ExpandedState, OnChangeFn } from '@tanstack/react-table';\nimport { RowGroupingConfiguration } from '../types';\n\nexport const useExpandedState = (rowGrouping?: RowGroupingConfiguration) => {\n  const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};\n\n  const internalExpandedState = useMemo(() => {\n    if (!expandedRows || !onRowExpanded) return {};\n\n    return expandedRows;\n  }, [expandedRows, onRowExpanded]);\n\n  const setInternalExpandedState: OnChangeFn<ExpandedState> = useCallback(\n    (onUpdate) => {\n      if (!onRowExpanded) return;\n\n      const newExpandedState =\n        typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;\n\n      onRowExpanded(newExpandedState);\n    },\n    [onRowExpanded, internalExpandedState],\n  );\n\n  const enableExpanding = !!getChildData;\n  const getRowCanExpand = useCallback(\n    (row: any) => {\n      if (!getChildData) return false;\n\n      return getChildData(row.original) !== undefined;\n    },\n    [getChildData],\n  );\n\n  return {\n    enableExpanding,\n    getSubRows: getChildData,\n    getRowCanExpand,\n    expanded: internalExpandedState,\n    onExpandedChange: setInternalExpandedState,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAKa,MAAA,gBAAgB,GAAG,CAAC,WAAsC,KAAI;IACzE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,WAAW,IAAI,EAAE;AAEvE,IAAA,MAAM,qBAAqB,GAAGA,aAAO,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,EAAE;AAE9C,QAAA,OAAO,YAAY;AACrB,KAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAEjC,IAAA,MAAM,wBAAwB,GAA8BC,iBAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;AAEpB,QAAA,MAAM,gBAAgB,GACpB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,qBAAqB,CAAC,GAAG,QAAQ;QAE7E,aAAa,CAAC,gBAAgB,CAAC;AACjC,KAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY;AACtC,IAAA,MAAM,eAAe,GAAGA,iBAAW,CACjC,CAAC,GAAQ,KAAI;AACX,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;QAE/B,OAAO,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,SAAS;AACjD,KAAC,EACD,CAAC,YAAY,CAAC,CACf;IAED,OAAO;QACL,eAAe;AACf,QAAA,UAAU,EAAE,YAAY;QACxB,eAAe;AACf,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,gBAAgB,EAAE,wBAAwB;KAC3C;AACH;;;;"}

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

@@ -0,0 +1,9 @@
+import { ExpandedState, OnChangeFn } from '@tanstack/react-table';
+import { RowGroupingConfiguration } from '../types';
+export declare const useExpandedState: (rowGrouping?: RowGroupingConfiguration) => {
+    enableExpanding: boolean;
+    getSubRows: ((row: any) => any) | undefined;
+    getRowCanExpand: (row: any) => boolean;
+    expanded: import("../types").ExpandedRows;
+    onExpandedChange: OnChangeFn<ExpandedState>;
+};

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

@@ -0,0 +1,32 @@
+import { useMemo, useCallback } from 'react';
+
+const useExpandedState = (rowGrouping) => {
+    const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};
+    const internalExpandedState = useMemo(() => {
+        if (!expandedRows || !onRowExpanded)
+            return {};
+        return expandedRows;
+    }, [expandedRows, onRowExpanded]);
+    const setInternalExpandedState = useCallback((onUpdate) => {
+        if (!onRowExpanded)
+            return;
+        const newExpandedState = typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;
+        onRowExpanded(newExpandedState);
+    }, [onRowExpanded, internalExpandedState]);
+    const enableExpanding = !!getChildData;
+    const getRowCanExpand = useCallback((row) => {
+        if (!getChildData)
+            return false;
+        return getChildData(row.original) !== undefined;
+    }, [getChildData]);
+    return {
+        enableExpanding,
+        getSubRows: getChildData,
+        getRowCanExpand,
+        expanded: internalExpandedState,
+        onExpandedChange: setInternalExpandedState,
+    };
+};
+
+export { useExpandedState };
+//# sourceMappingURL=useExpandedState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useExpandedState.js","sources":["../../../../src/components/DataGrid/hooks/useExpandedState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { ExpandedState, OnChangeFn } from '@tanstack/react-table';\nimport { RowGroupingConfiguration } from '../types';\n\nexport const useExpandedState = (rowGrouping?: RowGroupingConfiguration) => {\n  const { getChildData, expandedRows, onRowExpanded } = rowGrouping || {};\n\n  const internalExpandedState = useMemo(() => {\n    if (!expandedRows || !onRowExpanded) return {};\n\n    return expandedRows;\n  }, [expandedRows, onRowExpanded]);\n\n  const setInternalExpandedState: OnChangeFn<ExpandedState> = useCallback(\n    (onUpdate) => {\n      if (!onRowExpanded) return;\n\n      const newExpandedState =\n        typeof onUpdate === 'function' ? onUpdate(internalExpandedState) : onUpdate;\n\n      onRowExpanded(newExpandedState);\n    },\n    [onRowExpanded, internalExpandedState],\n  );\n\n  const enableExpanding = !!getChildData;\n  const getRowCanExpand = useCallback(\n    (row: any) => {\n      if (!getChildData) return false;\n\n      return getChildData(row.original) !== undefined;\n    },\n    [getChildData],\n  );\n\n  return {\n    enableExpanding,\n    getSubRows: getChildData,\n    getRowCanExpand,\n    expanded: internalExpandedState,\n    onExpandedChange: setInternalExpandedState,\n  };\n};\n"],"names":[],"mappings":";;AAKa,MAAA,gBAAgB,GAAG,CAAC,WAAsC,KAAI;IACzE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,GAAG,WAAW,IAAI,EAAE;AAEvE,IAAA,MAAM,qBAAqB,GAAG,OAAO,CAAC,MAAK;AACzC,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,EAAE;AAE9C,QAAA,OAAO,YAAY;AACrB,KAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AAEjC,IAAA,MAAM,wBAAwB,GAA8B,WAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;AAEpB,QAAA,MAAM,gBAAgB,GACpB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,qBAAqB,CAAC,GAAG,QAAQ;QAE7E,aAAa,CAAC,gBAAgB,CAAC;AACjC,KAAC,EACD,CAAC,aAAa,EAAE,qBAAqB,CAAC,CACvC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY;AACtC,IAAA,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,GAAQ,KAAI;AACX,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,KAAK;QAE/B,OAAO,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,SAAS;AACjD,KAAC,EACD,CAAC,YAAY,CAAC,CACf;IAED,OAAO;QACL,eAAe;AACf,QAAA,UAAU,EAAE,YAAY;QACxB,eAAe;AACf,QAAA,QAAQ,EAAE,qBAAqB;AAC/B,QAAA,gBAAgB,EAAE,wBAAwB;KAC3C;AACH;;;;"}

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

@@ -4,6 +4,7 @@ import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
+import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -104,4 +105,9 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Handler called when the row selection is changed.
      */
     onSelectionChanged?: (selectedRows: string[]) => void;
+    /** Row grouping */
+    /**
+     * Row grouping configuration for rendering nested data in the grid.
+     */
+    rowGrouping?: RowGroupingConfiguration;
 };

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

@@ -0,0 +1,22 @@
+export type ExpandedRows = true | Record<string, boolean>;
+/**
+ * Configuration for row grouping within the `DataGrid` component.
+ */
+export type RowGroupingConfiguration<TRow = any> = {
+    /**
+     * Getter used to fetch children within the tree data structure.
+     * @param row The row data to fetch children for.
+     * @returns The children of the given row.
+     */
+    getChildData: (row: TRow) => any;
+    /**
+     * Expanded row state. This can either be:
+     * - `true` - every row is expanded by default.
+     * - a record of row ID's to a boolean value indicating whether the row is expanded or not.
+     */
+    expandedRows: ExpandedRows;
+    /**
+     * Setter called when a row is expanded within the table.
+     */
+    onRowExpanded: (expandedRows: ExpandedRows) => void;
+};

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

@@ -4,3 +4,4 @@ export { AriaRoles } from './AriaRoles';
 export { ColumnDefinition } from './ColumnDefinition';
 export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
+export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';

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

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

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 = (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;;;;"}
+{"version":3,"file":"getAriaRoles.cjs","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { DataGridProps } from '../types';\nimport { AriaRoles } from '../types/AriaRoles';\n\ntype GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;\n\nexport const getAriaRoles = ({\n  enableKeyboardNavigation,\n  rowGrouping,\n}: GetAriaRolesProps): AriaRoles => {\n  if (rowGrouping) {\n    return {\n      table: 'treegrid',\n      cell: 'gridcell',\n    };\n  }\n\n  if (enableKeyboardNavigation) {\n    return {\n      table: 'grid',\n      cell: 'gridcell',\n    };\n  }\n\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":";;AAKa,MAAA,YAAY,GAAG,CAAC,EAC3B,wBAAwB,EACxB,WAAW,GACO,KAAe;AACjC,IAAA,IAAI,WAAW,EAAE;QACf,OAAO;AACL,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAO;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

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

@@ -1,2 +1,5 @@
+import { DataGridProps } from '../types';
 import { AriaRoles } from '../types/AriaRoles';
-export declare const getAriaRoles: (enableKeyboardNavigation: boolean) => AriaRoles;
+type GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;
+export declare const getAriaRoles: ({ enableKeyboardNavigation, rowGrouping, }: GetAriaRolesProps) => AriaRoles;
+export {};

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

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

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 = (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;;;;"}
+{"version":3,"file":"getAriaRoles.js","sources":["../../../../src/components/DataGrid/utils/getAriaRoles.ts"],"sourcesContent":["import { DataGridProps } from '../types';\nimport { AriaRoles } from '../types/AriaRoles';\n\ntype GetAriaRolesProps = Pick<DataGridProps, 'enableKeyboardNavigation' | 'rowGrouping'>;\n\nexport const getAriaRoles = ({\n  enableKeyboardNavigation,\n  rowGrouping,\n}: GetAriaRolesProps): AriaRoles => {\n  if (rowGrouping) {\n    return {\n      table: 'treegrid',\n      cell: 'gridcell',\n    };\n  }\n\n  if (enableKeyboardNavigation) {\n    return {\n      table: 'grid',\n      cell: 'gridcell',\n    };\n  }\n\n  return {\n    table: 'table',\n    cell: 'cell',\n  };\n};\n"],"names":[],"mappings":"AAKa,MAAA,YAAY,GAAG,CAAC,EAC3B,wBAAwB,EACxB,WAAW,GACO,KAAe;AACjC,IAAA,IAAI,WAAW,EAAE;QACf,OAAO;AACL,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;AAED,IAAA,IAAI,wBAAwB,EAAE;QAC5B,OAAO;AACL,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,UAAU;SACjB;AACF;IAED,OAAO;AACL,QAAA,KAAK,EAAE,OAAO;AACd,QAAA,IAAI,EAAE,MAAM;KACb;AACH;;;;"}

package/dist/components/index.d.ts

@@ -2,7 +2,7 @@ export { Accordion } from './Accordion';
 export { ActionMenu } from './ActionMenu';
 export { Alert } from './Alerts/Alert';
 export { MiniAlert } from './Alerts/MiniAlert';
-export { Anchor } from './Anchor';
+export { Anchor, AnchorProps, isAnchorUrl, isRelativeUrl, createContextAwareUrl, addPrefixToUrl, shouldAddPrefix, } from './Anchor';
 export { AnimatedDropdown } from './AnimatedDropdown';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';

package/dist/index.cjs

@@ -5,6 +5,7 @@ var ActionMenu = require('./components/ActionMenu/ActionMenu.cjs');
 var Alert = require('./components/Alerts/Alert/Alert.cjs');
 var MiniAlert = require('./components/Alerts/MiniAlert/MiniAlert.cjs');
 var Anchor = require('./components/Anchor/Anchor.cjs');
+var urlUtils = require('./components/Anchor/utils/urlUtils.cjs');
 var AnimatedDropdown = require('./components/AnimatedDropdown/AnimatedDropdown.cjs');
 var Avatar = require('./components/Avatar/Avatar.cjs');
 var Badge = require('./components/Badge/Badge.cjs');
@@ -140,6 +141,11 @@ exports.ActionMenu = ActionMenu.ActionMenu;
 exports.Alert = Alert.Alert;
 exports.MiniAlert = MiniAlert.MiniAlert;
 exports.Anchor = Anchor.Anchor;
+exports.addPrefixToUrl = urlUtils.addPrefixToUrl;
+exports.createContextAwareUrl = urlUtils.createContextAwareUrl;
+exports.isAnchorUrl = urlUtils.isAnchorUrl;
+exports.isRelativeUrl = urlUtils.isRelativeUrl;
+exports.shouldAddPrefix = urlUtils.shouldAddPrefix;
 exports.AnimatedDropdown = AnimatedDropdown.AnimatedDropdown;
 exports.Avatar = Avatar.Avatar;
 exports.Badge = Badge.Badge;

package/dist/index.cjs.map

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

package/dist/index.js

@@ -3,6 +3,7 @@ export { ActionMenu } from './components/ActionMenu/ActionMenu.js';
 export { Alert } from './components/Alerts/Alert/Alert.js';
 export { MiniAlert } from './components/Alerts/MiniAlert/MiniAlert.js';
 export { Anchor } from './components/Anchor/Anchor.js';
+export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix } from './components/Anchor/utils/urlUtils.js';
 export { AnimatedDropdown } from './components/AnimatedDropdown/AnimatedDropdown.js';
 export { Avatar } from './components/Avatar/Avatar.js';
 export { Badge } from './components/Badge/Badge.js';

package/dist/index.js.map

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

package/package.json

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