@veeqo/ui 11.3.2 → 11.4.0

package/dist/components/DataGrid/DataGrid.cjs

@@ -44,7 +44,7 @@ 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, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -138,10 +138,16 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         if (data.length === 0) {
             return React__default.default.createElement(EmptyBody.EmptyBody, { table: table, emptyState: emptyState, emptySlot: emptySlot });
         }
+        const bodyProps = {
+            table,
+            ariaRoles,
+            striped,
+            rowThemes,
+        };
         if (table.getState().columnSizingInfo.isResizingColumn) {
-            return React__default.default.createElement(Body.MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped });
+            return React__default.default.createElement(Body.MemoizedBody, { ...bodyProps });
         }
-        return React__default.default.createElement(Body.Body, { table: table, ariaRoles: ariaRoles, striped: striped });
+        return React__default.default.createElement(Body.Body, { ...bodyProps });
     };
     return (React__default.default.createElement(GridContainer.GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.default.createElement(Columns.Columns, { table: table }),

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, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [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  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />;\n    }\n\n    return <Body table={table} ariaRoles={ariaRoles} striped={striped} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [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  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["useRef","useMemo","getAriaRoles","useSelectionState","useSortingState","useExpandedState","useColumnState","useColumnWidthState","useReactTable","getCoreRowModel","getExpandedRowModel","usePinnedColumnLayout","useDragToScroll","useKeyboardNavigation","React","LoadingBody","EmptyBody","MemoizedBody","Body","GridContainer","Columns","Header","Footer"],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.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, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;
+export declare const DataGrid: ({ density, striped, borderMode, resizeMode, containerStyle, enableKeyboardNavigation, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, "aria-label": ariaLabel, }: DataGridProps) => React.JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -38,7 +38,7 @@ import { useExpandedState } from './hooks/useExpandedState.js';
  *
  * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*
  */
-const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
+const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resizeMode = 'off', containerStyle, enableKeyboardNavigation = false, columns, hiddenColumns, columnOrdering, pinnedColumns, data, getRowId, rowThemes, sortState, onSortChanged, selectionMode, selectedRows, disabledRows, onSelectionChanged, rowGrouping, columnWidths, onColumnsResized, isLoading, loadingRowCount, emptyState, emptySlot, 'aria-label': ariaLabel, }) => {
     /**
      * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.
      */
@@ -132,10 +132,16 @@ const DataGrid = ({ density = 'base', striped = true, borderMode = 'full', resiz
         if (data.length === 0) {
             return React__default.createElement(EmptyBody, { table: table, emptyState: emptyState, emptySlot: emptySlot });
         }
+        const bodyProps = {
+            table,
+            ariaRoles,
+            striped,
+            rowThemes,
+        };
         if (table.getState().columnSizingInfo.isResizingColumn) {
-            return React__default.createElement(MemoizedBody, { table: table, ariaRoles: ariaRoles, striped: striped });
+            return React__default.createElement(MemoizedBody, { ...bodyProps });
         }
-        return React__default.createElement(Body, { table: table, ariaRoles: ariaRoles, striped: striped });
+        return React__default.createElement(Body, { ...bodyProps });
     };
     return (React__default.createElement(GridContainer, { containerRef: containerRef, tableRef: tableRef, borderMode: borderMode, containerStyles: { ...containerStyle, ...pinnedColumnLayoutStyles }, ariaRoles: ariaRoles, enableResizeableColumns: enableColumnResizing, density: density, table: table, "aria-label": ariaLabel },
         enableColumnResizing && React__default.createElement(Columns, { table: table }),

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, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [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  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody table={table} ariaRoles={ariaRoles} striped={striped} />;\n    }\n\n    return <Body table={table} ariaRoles={ariaRoles} striped={striped} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * [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  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  'aria-label': ariaLabel,\n}: DataGridProps) => {\n  /**\n   * Refs to the table and table container. Used for keyboard navigation and drag-to-scroll.\n   */\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tableRef = useRef<HTMLTableElement>(null);\n\n  const showFooter = useMemo(\n    () => !isLoading && columns.some((column) => column.renderFooter),\n    [isLoading, columns],\n  );\n  const ariaRoles = useMemo(\n    () => getAriaRoles({ enableKeyboardNavigation, rowGrouping }),\n    [enableKeyboardNavigation, rowGrouping],\n  );\n  const enableColumnResizing = useMemo(() => resizeMode !== 'off', [resizeMode]);\n\n  /**\n   * Hooks to handle state for selection, sorting, and expanded/collapsed.\n   */\n  const { enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange } =\n    useSelectionState({\n      selectionMode,\n      selectedRows,\n      disabledRows,\n      onSelectionChanged,\n    });\n\n  const {\n    enableSorting,\n    enableMultiRemove,\n    enableSortingRemoval,\n    manualSorting,\n    sorting,\n    onSortingChange,\n  } = useSortingState({ columns, sortState, onSortChanged });\n\n  const { expanded, onExpandedChange, enableExpanding, getRowCanExpand, getSubRows } =\n    useExpandedState(rowGrouping);\n\n  /**\n   * Hooks to setup column state, including visibility, ordering, pinning, and width(s).\n   */\n  const { mappedColumnDefinitions, columnOrder, columnVisibility, columnPinning } = useColumnState({\n    columns,\n    hiddenColumns,\n    columnOrdering,\n    pinnedColumns,\n    enableRowSelection: !!enableRowSelection,\n  });\n\n  const { columnSizing, onColumnSizingChange } = useColumnWidthState({\n    mappedColumnDefinitions,\n    columnWidths,\n    onColumnsResized,\n  });\n\n  /**\n   * Setup the TanStack table, including mapped column definitions, row data, and any additional state such as\n   * column visibility and ordering.\n   */\n  const table = useReactTable<any>({\n    data,\n    columns: mappedColumnDefinitions,\n\n    // Column settings\n    columnResizeMode: resizeMode === 'off' ? undefined : resizeMode,\n    enableColumnResizing,\n    onColumnSizingChange,\n\n    // Row model\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n\n    // Sorting\n    enableSorting,\n    enableSortingRemoval,\n    enableMultiRemove,\n    manualSorting,\n    onSortingChange,\n\n    // Pinning\n    enableColumnPinning: columnPinning.left.length + columnPinning.right.length > 0,\n\n    // Selection\n    enableRowSelection,\n    enableMultiRowSelection,\n    onRowSelectionChange,\n\n    // Row grouping\n    getSubRows,\n    getRowCanExpand,\n    onExpandedChange,\n    enableExpanding,\n    getExpandedRowModel: enableExpanding ? getExpandedRowModel() : undefined,\n\n    // Inject external table state\n    state: {\n      columnOrder,\n      columnVisibility,\n      columnPinning,\n      sorting,\n      rowSelection,\n      expanded,\n      columnSizing,\n    },\n  });\n\n  /**\n   * Pinned column layout\n   */\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  /**\n   * Other hooks\n   */\n  useDragToScroll({ targetRef: containerRef, ignoreClassName: 'data-grid-column-resizer' });\n  useKeyboardNavigation({ tableRef, enableKeyboardNavigation });\n\n  const renderBody = () => {\n    if (isLoading) {\n      return <LoadingBody table={table} loadingRowCount={loadingRowCount ?? 5} striped={striped} />;\n    }\n\n    if (data.length === 0) {\n      return <EmptyBody table={table} emptyState={emptyState} emptySlot={emptySlot} />;\n    }\n\n    const bodyProps = {\n      table,\n      ariaRoles,\n      striped,\n      rowThemes,\n    };\n\n    if (table.getState().columnSizingInfo.isResizingColumn) {\n      return <MemoizedBody {...bodyProps} />;\n    }\n\n    return <Body {...bodyProps} />;\n  };\n\n  return (\n    <GridContainer\n      containerRef={containerRef}\n      tableRef={tableRef}\n      borderMode={borderMode}\n      containerStyles={{ ...containerStyle, ...pinnedColumnLayoutStyles }}\n      ariaRoles={ariaRoles}\n      enableResizeableColumns={enableColumnResizing}\n      density={density}\n      table={table}\n      aria-label={ariaLabel}\n    >\n      {/* Columns */}\n      {enableColumnResizing && <Columns table={table} />}\n\n      {/* Header */}\n      <Header table={table} />\n\n      {/* Body */}\n      {renderBody()}\n\n      {/* Footer */}\n      {showFooter && <Footer table={table} ariaRoles={ariaRoles} />}\n    </GridContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -8,11 +8,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Body = ({ table, striped, ariaRoles }) => {
+const Body = ({ table, striped, rowThemes, 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", "aria-busy": "false" }, 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 }))))))));
+    return (React__default.default.createElement("tbody", { className: "data-grid-body", "aria-busy": "false" }, table.getRowModel().rows.map((row) => {
+        const rowTheme = rowThemes === null || rowThemes === undefined ? undefined : rowThemes[row.id];
+        const selected = row.getIsSelected();
+        return (React__default.default.createElement(Row.Row, { key: row.id, row: row, striped: striped, selected: selected, rowTheme: rowTheme, 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  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\" aria-busy=\"false\">\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,WAAA,EAAW,OAAO,EAChD,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAC,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAC3E,EAAA,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;;;;;"}
+{"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, RowThemeMap } 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   * Map of row ID's to custom theming properties.\n   */\n  rowThemes?: RowThemeMap;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, rowThemes, 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\" aria-busy=\"false\">\n      {table.getRowModel().rows.map((row) => {\n        const rowTheme = rowThemes?.[row.id];\n        const selected = row.getIsSelected();\n\n        return (\n          <Row\n            key={row.id}\n            row={row}\n            striped={striped}\n            selected={selected}\n            rowTheme={rowTheme}\n            enableExpanding={enableExpanding}\n          >\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      })}\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":";;;;;;;;;;AA6BO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAa,KAAI;;IAC1E,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;IAEpE,QACEA,gDAAO,SAAS,EAAC,gBAAgB,EAAW,WAAA,EAAA,OAAO,IAChD,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACpC,QAAA,MAAM,QAAQ,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,GAAG,CAAC,EAAE,CAAC;AACpC,QAAA,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE;AAEpC,QAAA,QACEA,sBAAA,CAAA,aAAA,CAACC,OAAG,EAAA,EACF,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,IAE/B,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,EACxC,CAAA,CACH,CAAC,CACE;KAET,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.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table } from '@tanstack/react-table';
-import { AriaRoles } from '../../types';
+import { AriaRoles, RowThemeMap } from '../../types';
 type BodyProps = {
     /**
      * TanStack table instance.
@@ -10,14 +10,18 @@ type BodyProps = {
      * Whether the rows should be striped or not.
      */
     striped: boolean;
+    /**
+     * Map of row ID's to custom theming properties.
+     */
+    rowThemes?: RowThemeMap;
     /**
      * ARIA roles for the table.
      */
     ariaRoles: AriaRoles;
 };
-export declare const Body: ({ table, striped, ariaRoles }: BodyProps) => React.JSX.Element;
+export declare const Body: ({ table, striped, rowThemes, ariaRoles }: BodyProps) => React.JSX.Element;
 /**
  * Memoized table body, used to prevent rerenders when columns are being resized.
  */
-export declare const MemoizedBody: React.MemoExoticComponent<({ table, striped, ariaRoles }: BodyProps) => React.JSX.Element>;
+export declare const MemoizedBody: React.MemoExoticComponent<({ table, striped, rowThemes, ariaRoles }: BodyProps) => React.JSX.Element>;
 export {};

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

@@ -2,11 +2,15 @@ import React__default from 'react';
 import { BodyCell } from './BodyCell/BodyCell.js';
 import { Row } from './Row/Row.js';
 
-const Body = ({ table, striped, ariaRoles }) => {
+const Body = ({ table, striped, rowThemes, 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", "aria-busy": "false" }, 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 }))))))));
+    return (React__default.createElement("tbody", { className: "data-grid-body", "aria-busy": "false" }, table.getRowModel().rows.map((row) => {
+        const rowTheme = rowThemes === null || rowThemes === undefined ? undefined : rowThemes[row.id];
+        const selected = row.getIsSelected();
+        return (React__default.createElement(Row, { key: row.id, row: row, striped: striped, selected: selected, rowTheme: rowTheme, 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  const enableExpanding = table.options.enableExpanding ?? false;\n  const enableRowSelection = table.options.enableRowSelection ?? false;\n\n  return (\n    <tbody className=\"data-grid-body\" aria-busy=\"false\">\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,WAAA,EAAW,OAAO,EAChD,EAAA,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAC,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAC3E,EAAA,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;;;;"}
+{"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, RowThemeMap } 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   * Map of row ID's to custom theming properties.\n   */\n  rowThemes?: RowThemeMap;\n\n  /**\n   * ARIA roles for the table.\n   */\n  ariaRoles: AriaRoles;\n};\n\nexport const Body = ({ table, striped, rowThemes, 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\" aria-busy=\"false\">\n      {table.getRowModel().rows.map((row) => {\n        const rowTheme = rowThemes?.[row.id];\n        const selected = row.getIsSelected();\n\n        return (\n          <Row\n            key={row.id}\n            row={row}\n            striped={striped}\n            selected={selected}\n            rowTheme={rowTheme}\n            enableExpanding={enableExpanding}\n          >\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      })}\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":";;;;AA6BO,MAAM,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAa,KAAI;;IAC1E,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;IAEpE,QACEA,wCAAO,SAAS,EAAC,gBAAgB,EAAW,WAAA,EAAA,OAAO,IAChD,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;AACpC,QAAA,MAAM,QAAQ,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,SAAA,GAAA,SAAA,GAAT,SAAS,CAAG,GAAG,CAAC,EAAE,CAAC;AACpC,QAAA,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE;AAEpC,QAAA,QACEA,cAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,IAE/B,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,EACxC,CAAA,CACH,CAAC,CACE;KAET,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

@@ -27,7 +27,7 @@ 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, enableRowSelection, enableExpanding, }) => {
-    const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
+    const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({ column: cell.column });
     const { expandButtonProps, contentMarginLeft } = useExpandableCell.useExpandableCell({
@@ -40,12 +40,14 @@ const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) =>
         pinnedCellClassName,
         'data-grid-cell',
     ]);
-    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 },
+    const cellContext = cell.getContext();
+    const cellTestId = React.useMemo(() => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined), [generateDataTestId, cellContext.row.original]);
+    return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles, "data-testid": cellTestId },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: {
                 marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            }, expandButtonProps: expandButtonProps }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }, expandButtonProps: expandButtonProps }, reactTable.flexRender(cell.column.columnDef.cell, cellContext))));
 };
 
 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 { 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;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;AACa,aAAA,EAE1B,iBAAiB,EAAE,iBAAiB,IAEnCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

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

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React__default, { useMemo } from 'react';
 import { flexRender } from '@tanstack/react-table';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
@@ -21,7 +21,7 @@ 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, enableRowSelection, enableExpanding, }) => {
-    const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
+    const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });
     const { expandButtonProps, contentMarginLeft } = useExpandableCell({
@@ -34,12 +34,14 @@ const BodyCell = ({ cell, ariaRoles, enableRowSelection, enableExpanding, }) =>
         pinnedCellClassName,
         'data-grid-cell',
     ]);
-    return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
+    const cellContext = cell.getContext();
+    const cellTestId = useMemo(() => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined), [generateDataTestId, cellContext.row.original]);
+    return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles, "data-testid": cellTestId },
         React__default.createElement(CellContent, { contentStyle: {
                 marginLeft: contentMarginLeft,
                 justifyContent,
                 textAlign,
-            }, expandButtonProps: expandButtonProps }, flexRender(cell.column.columnDef.cell, cell.getContext()))));
+            }, expandButtonProps: expandButtonProps }, flexRender(cell.column.columnDef.cell, cellContext))));
 };
 
 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 { 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;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether row selection is enabled.\n   */\n  enableRowSelection: boolean;\n\n  /**\n   * Whether row expanding is enabled for the grid.\n   */\n  enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n  cell,\n  ariaRoles,\n  enableRowSelection,\n  enableExpanding,\n}: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n    cell,\n    enableExpanding,\n    enableRowSelection,\n  });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  const cellContext = cell.getContext();\n  const cellTestId = useMemo(\n    () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n    [generateDataTestId, cellContext.row.original],\n  );\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n      data-testid={cellTestId}\n    >\n      <CellContent\n        contentStyle={\n          {\n            marginLeft: contentMarginLeft,\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n        expandButtonProps={expandButtonProps}\n      >\n        {flexRender(cell.column.columnDef.cell, cellContext)}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;AACa,aAAA,EAE1B,iBAAiB,EAAE,iBAAiB,IAEnC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
-var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
+___$insertStyle("._baseCell_1vcew_1, ._bodyCell_1vcew_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1vcew_1:focus, ._bodyCell_1vcew_1:focus, ._baseCell_1vcew_1:focus-visible, ._bodyCell_1vcew_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1vcew_10::after, ._pinnedColumnRight_1vcew_10::after, ._pinnedColumnLeft_1vcew_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1vcew_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1vcew_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1vcew_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
+var styles = {"baseCell":"_baseCell_1vcew_1","bodyCell":"_bodyCell_1vcew_1","pinnedColumnBase":"_pinnedColumnBase_1vcew_10","pinnedColumnRight":"_pinnedColumnRight_1vcew_10","pinnedColumnLeft":"_pinnedColumnLeft_1vcew_10"};
 
 module.exports = styles;
 //# sourceMappingURL=BodyCell.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6vCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
-var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
+insertStyle("._baseCell_1vcew_1, ._bodyCell_1vcew_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1vcew_1:focus, ._bodyCell_1vcew_1:focus, ._baseCell_1vcew_1:focus-visible, ._bodyCell_1vcew_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1vcew_10::after, ._pinnedColumnRight_1vcew_10::after, ._pinnedColumnLeft_1vcew_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1vcew_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1vcew_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1vcew_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
+var styles = {"baseCell":"_baseCell_1vcew_1","bodyCell":"_bodyCell_1vcew_1","pinnedColumnBase":"_pinnedColumnBase_1vcew_10","pinnedColumnRight":"_pinnedColumnRight_1vcew_10","pinnedColumnLeft":"_pinnedColumnLeft_1vcew_10"};
 
 export { styles as default };
 //# sourceMappingURL=BodyCell.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6vCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

@@ -3,12 +3,23 @@
 var React = require('react');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
+var useRowTheme = require('./hooks/useRowTheme.cjs');
+var Row_module = require('./Row.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-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));
+const Row = ({ row, striped, selected, enableExpanding, rowTheme, children }) => {
+    const { themeVars, themeClasses } = useRowTheme.useRowTheme({ rowTheme });
+    const classNames = buildClassnames.buildClassnames([
+        Row_module.row,
+        striped && Row_module.striped,
+        selected && Row_module.selected,
+        themeClasses,
+    ]);
+    return (React__default.default.createElement("tr", { className: classNames, key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined, style: themeVars }, 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 { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\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":";;;;;;;;;;AA8BO,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;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { RowTheme } from '../../../types';\nimport { useRowTheme } from './hooks';\n\nimport styles from './Row.module.scss';\n\nexport type RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether the row is selected.\n   */\n  selected?: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Optional theming properties for this row.\n   */\n  rowTheme?: RowTheme;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, selected, enableExpanding, rowTheme, children }: RowProps) => {\n  const { themeVars, themeClasses } = useRowTheme({ rowTheme });\n\n  const classNames = buildClassnames([\n    styles.row,\n    striped && styles.striped,\n    selected && styles.selected,\n    themeClasses,\n  ]);\n\n  return (\n    <tr\n      className={classNames}\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      style={themeVars}\n    >\n      {children}\n    </tr>\n  );\n};"],"names":["useRowTheme","buildClassnames","styles","React"],"mappings":";;;;;;;;;;;;AA4Ca,MAAA,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAY,KAAI;AAC/F,IAAA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAGA,uBAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE7D,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAAC,UAAM,CAAC,GAAG;QACV,OAAO,IAAIA,UAAM,CAAC,OAAO;QACzB,QAAQ,IAAIA,UAAM,CAAC,QAAQ;QAC3B,YAAY;AACb,KAAA,CAAC;AAEF,IAAA,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,UAAU,EACrB,GAAG,EAAE,GAAG,CAAC,EAAE,EAEI,eAAA,EAAA,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EACvD,KAAK,EAAE,SAAS,IAEf,QAAQ,CACN;AAET;;;;"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-type RowProps = {
+import { RowTheme } from '../../../types';
+export type RowProps = {
     /**
      * Row information, including id, index, and depth (typically the TanStack table row).
      */
@@ -12,14 +13,21 @@ type RowProps = {
      * Whether rows should be striped or not.
      */
     striped: boolean;
+    /**
+     * Whether the row is selected.
+     */
+    selected?: boolean;
     /**
      * Whether row expanding is enabled.
      */
     enableExpanding: boolean;
+    /**
+     * Optional theming properties for this row.
+     */
+    rowTheme?: RowTheme;
     /**
      * Child elements (table cells).
      */
     children: React.ReactNode;
 };
-export declare const Row: ({ row, striped, enableExpanding, children }: RowProps) => React.JSX.Element;
-export {};
+export declare const Row: ({ row, striped, selected, enableExpanding, rowTheme, children }: RowProps) => React.JSX.Element;

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

@@ -1,8 +1,19 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
+import { useRowTheme } from './hooks/useRowTheme.js';
+import styles from './Row.module.scss.js';
 
-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));
+const Row = ({ row, striped, selected, enableExpanding, rowTheme, children }) => {
+    const { themeVars, themeClasses } = useRowTheme({ rowTheme });
+    const classNames = buildClassnames([
+        styles.row,
+        striped && styles.striped,
+        selected && styles.selected,
+        themeClasses,
+    ]);
+    return (React__default.createElement("tr", { className: classNames, key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined, style: themeVars }, 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 { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\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":";;;;AA8BO,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;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { RowTheme } from '../../../types';\nimport { useRowTheme } from './hooks';\n\nimport styles from './Row.module.scss';\n\nexport type RowProps = {\n  /**\n   * Row information, including id, index, and depth (typically the TanStack table row).\n   */\n  row: {\n    id: string;\n    index: number;\n    depth: number;\n  };\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether the row is selected.\n   */\n  selected?: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Optional theming properties for this row.\n   */\n  rowTheme?: RowTheme;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, selected, enableExpanding, rowTheme, children }: RowProps) => {\n  const { themeVars, themeClasses } = useRowTheme({ rowTheme });\n\n  const classNames = buildClassnames([\n    styles.row,\n    striped && styles.striped,\n    selected && styles.selected,\n    themeClasses,\n  ]);\n\n  return (\n    <tr\n      className={classNames}\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      style={themeVars}\n    >\n      {children}\n    </tr>\n  );\n};"],"names":["React"],"mappings":";;;;;;AA4Ca,MAAA,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,EAAY,KAAI;AAC/F,IAAA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IAE7D,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,MAAM,CAAC,GAAG;QACV,OAAO,IAAI,MAAM,CAAC,OAAO;QACzB,QAAQ,IAAI,MAAM,CAAC,QAAQ;QAC3B,YAAY;AACb,KAAA,CAAC;AAEF,IAAA,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,UAAU,EACrB,GAAG,EAAE,GAAG,CAAC,EAAE,EAEI,eAAA,EAAA,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EACvD,KAAK,EAAE,SAAS,IAEf,QAAQ,CACN;AAET;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._row_c0qye_1:not(._selected_c0qye_1)._striped_c0qye_1:nth-of-type(odd) td, ._row_c0qye_1:not(._selected_c0qye_1)._striped_c0qye_1:nth-of-type(odd) th {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._row_c0qye_1:not(._selected_c0qye_1):hover td, ._row_c0qye_1:not(._selected_c0qye_1):hover th, ._row_c0qye_1:not(._selected_c0qye_1):hover._striped_c0qye_1 td, ._row_c0qye_1:not(._selected_c0qye_1):hover._striped_c0qye_1 th {\n  background-color: #f2f8fc;\n}\n._row_c0qye_1._selected_c0qye_1 td, ._row_c0qye_1._selected_c0qye_1 th {\n  background-color: var(--colors-brand-blue-lightest);\n}\n._row_c0qye_1 + ._row_c0qye_1 td, ._row_c0qye_1 + ._row_c0qye_1 th {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n._accentColor_c0qye_14 > td:first-of-type::before, ._accentColor_c0qye_14 > th:first-of-type::before {\n  content: \"\";\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: var(--sizes-none);\n  left: var(--sizes-none);\n  width: var(--sizes-1);\n  background-color: var(--accent-color);\n}");
+var styles = {"row":"_row_c0qye_1","selected":"_selected_c0qye_1","striped":"_striped_c0qye_1","accentColor":"_accentColor_c0qye_14"};
+
+module.exports = styles;
+//# sourceMappingURL=Row.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Row.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.module.scss"],"sourcesContent":[".row {\n  &:not(.selected) {\n    // Striping styles\n    &.striped:nth-of-type(odd) {\n      td, th {\n        background-color: var(--colors-neutral-grey-lightest);\n      }\n    }\n\n    // Hover styles\n    &:hover, &:hover.striped {\n      td, th {\n        background-color: #f2f8fc;\n      }\n    }\n  }\n\n  // Selected row cell styles\n  &.selected {\n    td, th {\n      background-color: var(--colors-brand-blue-lightest);\n    }\n  }\n\n  // Row borders\n  & + .row {\n    td, th {\n      border-top: 1px solid var(--colors-neutral-grey-base);\n    }\n  }\n}\n\n.accentColor {\n  & > td:first-of-type,\n  & > th:first-of-type {\n    &::before {\n      content: '';\n\n      position: absolute;\n      top: var(--sizes-none);\n      bottom: var(--sizes-none);\n      left: var(--sizes-none);\n      width: var(--sizes-1);\n\n      background-color: var(--accent-color);\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AAKQ,eAAA,CAAA,mhCAAA;;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._row_c0qye_1:not(._selected_c0qye_1)._striped_c0qye_1:nth-of-type(odd) td, ._row_c0qye_1:not(._selected_c0qye_1)._striped_c0qye_1:nth-of-type(odd) th {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n._row_c0qye_1:not(._selected_c0qye_1):hover td, ._row_c0qye_1:not(._selected_c0qye_1):hover th, ._row_c0qye_1:not(._selected_c0qye_1):hover._striped_c0qye_1 td, ._row_c0qye_1:not(._selected_c0qye_1):hover._striped_c0qye_1 th {\n  background-color: #f2f8fc;\n}\n._row_c0qye_1._selected_c0qye_1 td, ._row_c0qye_1._selected_c0qye_1 th {\n  background-color: var(--colors-brand-blue-lightest);\n}\n._row_c0qye_1 + ._row_c0qye_1 td, ._row_c0qye_1 + ._row_c0qye_1 th {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n._accentColor_c0qye_14 > td:first-of-type::before, ._accentColor_c0qye_14 > th:first-of-type::before {\n  content: \"\";\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: var(--sizes-none);\n  left: var(--sizes-none);\n  width: var(--sizes-1);\n  background-color: var(--accent-color);\n}");
+var styles = {"row":"_row_c0qye_1","selected":"_selected_c0qye_1","striped":"_striped_c0qye_1","accentColor":"_accentColor_c0qye_14"};
+
+export { styles as default };
+//# sourceMappingURL=Row.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Row.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.module.scss"],"sourcesContent":[".row {\n  &:not(.selected) {\n    // Striping styles\n    &.striped:nth-of-type(odd) {\n      td, th {\n        background-color: var(--colors-neutral-grey-lightest);\n      }\n    }\n\n    // Hover styles\n    &:hover, &:hover.striped {\n      td, th {\n        background-color: #f2f8fc;\n      }\n    }\n  }\n\n  // Selected row cell styles\n  &.selected {\n    td, th {\n      background-color: var(--colors-brand-blue-lightest);\n    }\n  }\n\n  // Row borders\n  & + .row {\n    td, th {\n      border-top: 1px solid var(--colors-neutral-grey-base);\n    }\n  }\n}\n\n.accentColor {\n  & > td:first-of-type,\n  & > th:first-of-type {\n    &::before {\n      content: '';\n\n      position: absolute;\n      top: var(--sizes-none);\n      bottom: var(--sizes-none);\n      left: var(--sizes-none);\n      width: var(--sizes-1);\n\n      background-color: var(--accent-color);\n    }\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAKQA,WAAA,CAAA,mhCAAA;;;;;"}

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

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

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var buildClassnames = require('../../../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../../../../utils/assignCssVars.cjs');
+var Row_module = require('../Row.module.scss.cjs');
+
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+const useRowTheme = ({ rowTheme }) => {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+        return {
+            themeVars: {},
+            themeClasses: undefined,
+        };
+    }
+    const themeClasses = buildClassnames.buildClassnames([(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) ? Row_module.accentColor : undefined]);
+    return {
+        themeVars: assignCssVars.assignCssVars(rowTheme || {}),
+        themeClasses,
+    };
+};
+
+exports.useRowTheme = useRowTheme;
+//# sourceMappingURL=useRowTheme.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRowTheme.cjs","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":["buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAGA,+BAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAGC,UAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAEC,2BAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { RowTheme } from '../../../../types';
+type UseRowThemeProps = {
+    rowTheme?: RowTheme;
+};
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+export declare const useRowTheme: ({ rowTheme }: UseRowThemeProps) => {
+    themeVars: {};
+    themeClasses: undefined;
+} | {
+    themeVars: import("react").CSSProperties;
+    themeClasses: string;
+};
+export {};

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

@@ -0,0 +1,24 @@
+import { buildClassnames } from '../../../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../../../../utils/assignCssVars.js';
+import styles from '../Row.module.scss.js';
+
+/**
+ * Hook to generate theming variables and classes for a given row theme.
+ */
+const useRowTheme = ({ rowTheme }) => {
+    if (!(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor)) {
+        return {
+            themeVars: {},
+            themeClasses: undefined,
+        };
+    }
+    const themeClasses = buildClassnames([(rowTheme === null || rowTheme === undefined ? undefined : rowTheme.accentColor) ? styles.accentColor : undefined]);
+    return {
+        themeVars: assignCssVars(rowTheme || {}),
+        themeClasses,
+    };
+};
+
+export { useRowTheme };
+//# sourceMappingURL=useRowTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useRowTheme.js","sources":["../../../../../../../src/components/DataGrid/components/Body/Row/hooks/useRowTheme.ts"],"sourcesContent":["import { RowTheme } from '../../../../types';\nimport { buildClassnames, assignCssVars } from '../../../../../../utils';\n\nimport styles from '../Row.module.scss';\n\ntype UseRowThemeProps = {\n  rowTheme?: RowTheme;\n};\n\n/**\n * Hook to generate theming variables and classes for a given row theme.\n */\nexport const useRowTheme = ({ rowTheme }: UseRowThemeProps) => {\n  if (!rowTheme?.accentColor) {\n    return {\n      themeVars: {},\n      themeClasses: undefined,\n    };\n  }\n\n  const themeClasses = buildClassnames([rowTheme?.accentColor ? styles.accentColor : undefined]);\n  return {\n    themeVars: assignCssVars(rowTheme || {}),\n    themeClasses,\n  };\n};\n"],"names":[],"mappings":";;;;;AASA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAoB,KAAI;IAC5D,IAAI,EAAC,QAAQ,KAAR,IAAA,IAAA,QAAQ,6BAAR,QAAQ,CAAE,WAAW,CAAA,EAAE;QAC1B,OAAO;AACL,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,YAAY,EAAE,SAAS;SACxB;AACF;IAED,MAAM,YAAY,GAAG,eAAe,CAAC,CAAC,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,SAAA,GAAA,SAAA,GAAR,QAAQ,CAAE,WAAW,IAAG,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC;IAC9F,OAAO;AACL,QAAA,SAAS,EAAE,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACxC,YAAY;KACb;AACH;;;;"}

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

@@ -5,7 +5,7 @@ export type ColumnAccessor<T> = (row: T) => any;
 /**
  * Basic column definition.
  */
-export type BaseColumnDefinition = {
+export type BaseColumnDefinition<T> = {
     /**
      * Column ID, this must be a string.
      */
@@ -60,18 +60,24 @@ export type BaseColumnDefinition = {
      * Optional render method used to render a custom column header in place of the column title.
      */
     renderHeader?: () => ReactElement;
+    /**
+     * Optional function to generate a `data-testid` for cells in this column.
+     * @param row The row data for which the test ID should be generated.
+     * @returns The generated test ID string.
+     */
+    generateDataTestId?: (row: T) => string;
 };
 /**
  * Column which has an underlying value in the model, can be sorted.
  */
-export type DataColumnDefinition<T> = BaseColumnDefinition & {
+export type DataColumnDefinition<T> = BaseColumnDefinition<T> & {
     field: DeepKeys<T> | ColumnAccessor<T>;
     renderCell?: (fieldValue: any, row: T) => ReactElement | null | string;
 };
 /**
  * Column which is purely for display, not part of the model, cannot be sorted.
  */
-export type DisplayColumnDefinition<T> = BaseColumnDefinition & {
+export type DisplayColumnDefinition<T> = BaseColumnDefinition<T> & {
     renderCell: (row: T) => ReactElement | null | string;
 };
 export type ColumnDefinition<T> = DataColumnDefinition<T> | DisplayColumnDefinition<T>;

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

@@ -1,4 +1,4 @@
-import React, { AriaAttributes, ReactElement } from 'react';
+import React, { AriaAttributes } from 'react';
 import { SizeScale } from 'Theme/modules/sizes';
 import { BorderMode, ResizeMode, SelectionMode } from './enums';
 import { ColumnDefinition } from './ColumnDefinition';
@@ -7,11 +7,7 @@ import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
 import { ColumnWidths } from './ColumnWidths';
 import { EmptyState } from './EmptyState';
-export type CustomState = {
-    iconSlot: ReactElement;
-    heading: string;
-    subHeading?: string;
-};
+import { RowThemeMap } from './RowTheme';
 export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
     /** General config */
     /**
@@ -81,6 +77,10 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Getter which returns the ID to use for a row (a string). If one isn't provided, the row index will be used instead.
      */
     getRowId?: (row: any, index: number, parent?: any) => string;
+    /**
+     * A map of row ID's to custom theming properties.
+     */
+    rowThemes?: RowThemeMap;
     /** Sorting */
     /**
      * The current sort state, including the selected column ID and sort direction.

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

@@ -0,0 +1,13 @@
+/**
+ * Theming properties for a row within the DataGrid.
+ */
+export type RowTheme = {
+    /**
+     * The accent color for the row.
+     */
+    accentColor?: string;
+};
+/**
+ * A map of row ID's to custom theming properties.
+ */
+export type RowThemeMap = Record<string, RowTheme>;

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

@@ -5,5 +5,6 @@ declare module '@tanstack/react-table' {
         textAlign: string;
         justifyContent: string;
         getAriaLabel?: () => string;
+        generateDataTestId?: (row: TData) => string;
     }
 }

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

@@ -6,3 +6,4 @@ export { SortState } from './SortState';
 export { PinnedColumnState } from './PinnedColumnState';
 export { RowGroupingConfiguration, ExpandedRows } from './RowGroupingConfiguration';
 export { EmptyState } from './EmptyState';
+export { RowTheme, RowThemeMap } from './RowTheme';

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

@@ -73,6 +73,7 @@ class ColumnMapper {
                 justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : constants.DEFAULT_CELL_ALIGN),
                 textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : constants.DEFAULT_CELL_ALIGN,
                 getAriaLabel: definition.getAriaLabel,
+                generateDataTestId: definition.generateDataTestId,
             },
         };
         validateColumnDefinition(definition);

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.cjs","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":["createColumnHelper","DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MAXIMUM_WIDTH","DEFAULT_COLUMN_MINIMUM_WIDTH","DEFAULT_CELL_ALIGN"],"mappings":"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"}

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

@@ -71,6 +71,7 @@ class ColumnMapper {
                 justifyContent: alignmentToFlex((_e = definition.align) !== null && _e !== undefined ? _e : DEFAULT_CELL_ALIGN),
                 textAlign: (_f = definition.align) !== null && _f !== undefined ? _f : DEFAULT_CELL_ALIGN,
                 getAriaLabel: definition.getAriaLabel,
+                generateDataTestId: definition.generateDataTestId,
             },
         };
         validateColumnDefinition(definition);

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ColumnMapper.js","sources":["../../../../src/components/DataGrid/utils/ColumnMapper.ts"],"sourcesContent":["import { ColumnDef, ColumnHelper, createColumnHelper } from '@tanstack/react-table';\nimport { ColumnDefinition, DataColumnDefinition, ColumnAlignment } from '../types/ColumnDefinition';\nimport {\n  DEFAULT_CELL_ALIGN,\n  DEFAULT_COLUMN_MAXIMUM_WIDTH,\n  DEFAULT_COLUMN_MINIMUM_WIDTH,\n  DEFAULT_COLUMN_WIDTH,\n} from '../constants';\n\n/**\n * Helper method which checks whether a given column definition is a `DataColumn`.\n * @param column The column definition to check.\n * @returns True if the column definition is a `DataColumn`, false otherwise.\n */\nconst isDataColumn = <T>(column: ColumnDefinition<T>): column is DataColumnDefinition<T> => {\n  return (column as DataColumnDefinition<T>).field !== undefined;\n};\n\n/**\n * Maps a column alignment to the equivalent flexbox alignment.\n * @param align The column alingment to map.\n * @returns The flexbox alignment.\n */\nfunction alignmentToFlex(align: ColumnAlignment) {\n  switch (align) {\n    case 'left':\n      return 'flex-start';\n    case 'center':\n      return 'center';\n    case 'right':\n      return 'flex-end';\n    default:\n      return 'flex-start';\n  }\n}\n\n/**\n * Validates a column definition, ensuring required properties are defined and values make sense.\n * @param definition The column definition to validate.\n * @throws Error if the column definition is invalid.\n */\nconst validateColumnDefinition = (definition: ColumnDefinition<any>) => {\n  if (!definition.id) {\n    throw new Error(\"[ColumnMapper] Column definition is missing an 'id' property.\");\n  }\n\n  if (!isDataColumn(definition)) {\n    if (!definition.renderCell) {\n      throw new Error(\n        `[ColumnMapper] Column '${definition.id}' is a display column but is missing a 'renderCell' property.`,\n      );\n    }\n  }\n\n  if (definition.width && definition.minWidth && definition.width < definition.minWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is smaller than its minimum size of ${definition.minWidth}.`,\n    );\n  }\n\n  if (definition.width && definition.maxWidth && definition.width > definition.maxWidth) {\n    throw new Error(\n      `[ColumnMapper] Column '${definition.id}' has a size of ${definition.width} which is larger than its maximum size of ${definition.maxWidth}.`,\n    );\n  }\n};\n\n/**\n * Mapper which validates and converts our ColumnDefinition's to a ColumnDef for use in TanStack Table.\n */\nexport class ColumnMapper {\n  private columnHelper: ColumnHelper<any>;\n\n  constructor() {\n    this.columnHelper = createColumnHelper<any>();\n  }\n\n  mapColumnDefinition(definition: ColumnDefinition<any>): ColumnDef<any, any> {\n    const sharedColumnProps = {\n      id: definition.id,\n      enableResizing: !!definition.resizeable,\n      enableSorting: !!definition.sortable,\n\n      header: definition.renderHeader ?? definition.title,\n      footer: definition.renderFooter,\n\n      size: definition.width ?? DEFAULT_COLUMN_WIDTH,\n      maxSize: definition.maxWidth ?? DEFAULT_COLUMN_MAXIMUM_WIDTH,\n      minSize: definition.minWidth ?? DEFAULT_COLUMN_MINIMUM_WIDTH,\n\n      meta: {\n        rowHeader: !!definition.rowHeader,\n        // Generate flex and text alignment based off column.align\n        justifyContent: alignmentToFlex(definition.align ?? DEFAULT_CELL_ALIGN),\n        textAlign: definition.align ?? DEFAULT_CELL_ALIGN,\n        getAriaLabel: definition.getAriaLabel,\n        generateDataTestId: definition.generateDataTestId,\n      },\n    };\n\n    validateColumnDefinition(definition);\n\n    if (isDataColumn(definition)) {\n      return this.columnHelper.accessor(definition.field, {\n        ...sharedColumnProps,\n        // enableSorting: definition.sortable ?? false,\n        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    return this.columnHelper.display({\n      ...sharedColumnProps,\n      cell: (context) => definition.renderCell(context.row.original),\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

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