@veeqo/ui 11.4.0 → 11.4.2

package/dist/components/DataGrid/DataGrid.cjs

@@ -27,8 +27,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 /**
- * [WIP]
- *
  * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
  * component, the `DataGrid` supports both flat and hierarchical (tree) data.
  *

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  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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"}
+{"version":3,"file":"DataGrid.cjs","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  '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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { DataGridProps } from './types';
 /**
- * [WIP]
- *
  * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
  * component, the `DataGrid` supports both flat and hierarchical (tree) data.
  *

package/dist/components/DataGrid/DataGrid.js

@@ -21,8 +21,6 @@ import { useColumnWidthState } from './hooks/useColumnWidthState.js';
 import { useExpandedState } from './hooks/useExpandedState.js';
 
 /**
- * [WIP]
- *
  * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`
  * component, the `DataGrid` supports both flat and hierarchical (tree) data.
  *

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  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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"}
+{"version":3,"file":"DataGrid.js","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["import React, { useMemo, useRef } from 'react';\nimport { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table';\n\nimport { useDragToScroll } from '../../hooks';\n\nimport { DataGridProps } from './types';\nimport { getAriaRoles } from './utils';\nimport { GridContainer, Header, Body, Footer, Columns } from './components';\nimport { EmptyBody, LoadingBody, MemoizedBody } from './components/Body';\n\nimport {\n  usePinnedColumnLayout,\n  useSortingState,\n  useKeyboardNavigation,\n  useColumnState,\n  useExpandedState,\n  useColumnWidthState,\n  useSelectionState,\n} from './hooks';\n\n/**\n * A DataGrid component which renders data in a two-dimensional format, with columns and rows. Unlike the `DataTable`\n * component, the `DataGrid` supports both flat and hierarchical (tree) data.\n *\n * Under the hood, it uses [TanStack Table](http://tanstack.com/table/) for table management, and aims to replicate functionality\n * available in major third party grid components such as CloudScape's Table component, AgGrid, etc.\n *\n * Supported features include:\n * - Pinning, resizing (incl. smooth resizing), reordering, and hiding of columns\n * - Selection (single and multiple) and disabling of rows.\n * - Rendering of arbitrarily nested data, expanding/collapsing, and custom full-width 'group' rows.\n * - In-built keyboard navigation with arrow keys, and drag to scroll.\n * - Configurable density.\n *\n * *Important: This component uses CSS modules, and therefore requires a `<ThemeInjector />` to be present on your page.*\n */\nexport const DataGrid = ({\n  density = 'base',\n  striped = true,\n  borderMode = 'full',\n  resizeMode = 'off',\n  containerStyle,\n  enableKeyboardNavigation = false,\n\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n\n  data,\n  getRowId,\n  rowThemes,\n\n  sortState,\n  onSortChanged,\n\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n\n  rowGrouping,\n\n  columnWidths,\n  onColumnsResized,\n\n  isLoading,\n  loadingRowCount,\n\n  emptyState,\n  emptySlot,\n\n  '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":";;;;;;;;;;;;;;;;;;;;;;AAoBA;;;;;;;;;;;;;;;AAeG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,MAAM,EAChB,OAAO,GAAG,IAAI,EACd,UAAU,GAAG,MAAM,EACnB,UAAU,GAAG,KAAK,EAClB,cAAc,EACd,wBAAwB,GAAG,KAAK,EAEhC,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EAEb,IAAI,EACJ,QAAQ,EACR,SAAS,EAET,SAAS,EACT,aAAa,EAEb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAElB,WAAW,EAEX,YAAY,EACZ,gBAAgB,EAEhB,SAAS,EACT,eAAe,EAEf,UAAU,EACV,SAAS,EAET,YAAY,EAAE,SAAS,GACT,KAAI;AAClB;;AAEG;AACH,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC;AAE/C,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,MAAM,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,YAAY,CAAC,EACjE,CAAC,SAAS,EAAE,OAAO,CAAC,CACrB;IACD,MAAM,SAAS,GAAG,OAAO,CACvB,MAAM,YAAY,CAAC,EAAE,wBAAwB,EAAE,WAAW,EAAE,CAAC,EAC7D,CAAC,wBAAwB,EAAE,WAAW,CAAC,CACxC;AACD,IAAA,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,UAAU,KAAK,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;AAE9E;;AAEG;IACH,MAAM,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,YAAY,EAAE,oBAAoB,EAAE,GACvF,iBAAiB,CAAC;QAChB,aAAa;QACb,YAAY;QACZ,YAAY;QACZ,kBAAkB;AACnB,KAAA,CAAC;IAEJ,MAAM,EACJ,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,eAAe,GAChB,GAAG,eAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;AAE1D,IAAA,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,GAChF,gBAAgB,CAAC,WAAW,CAAC;AAE/B;;AAEG;IACH,MAAM,EAAE,uBAAuB,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,GAAG,cAAc,CAAC;QAC/F,OAAO;QACP,aAAa;QACb,cAAc;QACd,aAAa;QACb,kBAAkB,EAAE,CAAC,CAAC,kBAAkB;AACzC,KAAA,CAAC;AAEF,IAAA,MAAM,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,mBAAmB,CAAC;QACjE,uBAAuB;QACvB,YAAY;QACZ,gBAAgB;AACjB,KAAA,CAAC;AAEF;;;AAGG;IACH,MAAM,KAAK,GAAG,aAAa,CAAM;QAC/B,IAAI;AACJ,QAAA,OAAO,EAAE,uBAAuB;;QAGhC,gBAAgB,EAAE,UAAU,KAAK,KAAK,GAAG,SAAS,GAAG,UAAU;QAC/D,oBAAoB;QACpB,oBAAoB;;QAGpB,QAAQ;QACR,eAAe,EAAE,eAAe,EAAE;;QAGlC,aAAa;QACb,oBAAoB;QACpB,iBAAiB;QACjB,aAAa;QACb,eAAe;;AAGf,QAAA,mBAAmB,EAAE,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;;QAG/E,kBAAkB;QAClB,uBAAuB;QACvB,oBAAoB;;QAGpB,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,mBAAmB,EAAE,eAAe,GAAG,mBAAmB,EAAE,GAAG,SAAS;;AAGxE,QAAA,KAAK,EAAE;YACL,WAAW;YACX,gBAAgB;YAChB,aAAa;YACb,OAAO;YACP,YAAY;YACZ,QAAQ;YACR,YAAY;AACb,SAAA;AACF,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE;;AAEG;IACH,eAAe,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,CAAC;AACzF,IAAA,qBAAqB,CAAC,EAAE,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IAE7D,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,IAAI,SAAS,EAAE;YACb,OAAOA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,eAAe,aAAf,eAAe,KAAA,SAAA,GAAf,eAAe,GAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,CAAI;AAC9F;AAED,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAI;AACjF;AAED,QAAA,MAAM,SAAS,GAAG;YAChB,KAAK;YACL,SAAS;YACT,OAAO;YACP,SAAS;SACV;QAED,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;AACtD,YAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAK,EAAA,GAAA,SAAS,GAAI;AACvC;AAED,QAAA,OAAOA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAK,EAAA,GAAA,SAAS,GAAI;AAChC,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,aAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,EAAE,GAAG,cAAc,EAAE,GAAG,wBAAwB,EAAE,EACnE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,oBAAoB,EAC7C,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,gBACA,SAAS,EAAA;AAGpB,QAAA,oBAAoB,IAAIA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGlD,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAI,CAAA;AAGvB,QAAA,UAAU,EAAE;AAGZ,QAAA,UAAU,IAAIA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAI,CAAA,CAC/C;AAEpB;;;;"}

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

@@ -11,11 +11,18 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 /**
  * A body component for the DataGrid that displays a set number of skeleton loading rows.
  */
-const LoadingBody = React__default.default.memo(({ table, loadingRowCount, striped }) => (React__default.default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
-    // Since we don't have actual row data, we'll just pass a placeholder row object.
-    const row = { id: `loading-row-${index}`, index, depth: 0 };
-    return (React__default.default.createElement(Row.Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, table.getVisibleFlatColumns().map((column) => (React__default.default.createElement(LoadingBodyCell.LoadingBodyCell, { key: column.id, column: column })))));
-}))));
+const LoadingBody = ({ table, loadingRowCount, striped }) => {
+    const columns = [
+        ...table.getLeftVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getRightVisibleLeafColumns(),
+    ];
+    return (React__default.default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
+        // Since we don't have actual row data, we'll just pass a placeholder row object.
+        const row = { id: `loading-row-${index}`, index, depth: 0 };
+        return (React__default.default.createElement(Row.Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, columns.map((column) => (React__default.default.createElement(LoadingBodyCell.LoadingBodyCell, { key: column.id, column: column })))));
+    })));
+};
 
 exports.LoadingBody = LoadingBody;
 //# sourceMappingURL=LoadingBody.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingBody.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = React.memo(({ table, loadingRowCount, striped }: LoadingBodyProps) => (\n  <tbody aria-busy=\"true\">\n    {Array.from({ length: loadingRowCount }, (_, index) => {\n      // Since we don't have actual row data, we'll just pass a placeholder row object.\n      const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n      return (\n        <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n          {table.getVisibleFlatColumns().map((column) => (\n            <LoadingBodyCell key={column.id} column={column} />\n          ))}\n        </Row>\n      );\n    })}\n  </tbody>\n));\n"],"names":["React","Row","LoadingBodyCell"],"mappings":";;;;;;;;;;AAuBA;;AAEG;AACU,MAAA,WAAW,GAAGA,sBAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,MAC1FA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAiB,MAAM,EACpB,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,IAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IAE3D,QACEA,sBAAC,CAAA,aAAA,CAAAC,OAAG,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,MACxCD,sBAAA,CAAA,aAAA,CAACE,+BAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;AAEV,CAAC,CAAC,CACI,CACT;;;;"}
+{"version":3,"file":"LoadingBody.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = ({ table, loadingRowCount, striped }: LoadingBodyProps) => {\n  const columns = [\n    ...table.getLeftVisibleLeafColumns(),\n    ...table.getCenterVisibleLeafColumns(),\n    ...table.getRightVisibleLeafColumns(),\n  ];\n\n  return (\n    <tbody aria-busy=\"true\">\n      {Array.from({ length: loadingRowCount }, (_, index) => {\n        // Since we don't have actual row data, we'll just pass a placeholder row object.\n        const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n        return (\n          <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n            {columns.map((column) => (\n              <LoadingBodyCell key={column.id} column={column} />\n            ))}\n          </Row>\n        );\n      })}\n    </tbody>\n  );\n};\n"],"names":["React","Row","LoadingBodyCell"],"mappings":";;;;;;;;;;AAuBA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,KAAI;AACnF,IAAA,MAAM,OAAO,GAAG;QACd,GAAG,KAAK,CAAC,yBAAyB,EAAE;QACpC,GAAG,KAAK,CAAC,2BAA2B,EAAE;QACtC,GAAG,KAAK,CAAC,0BAA0B,EAAE;KACtC;AAED,IAAA,QACEA,sBAAiB,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAA,MAAM,IACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,QAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;QAE3D,QACEA,qCAACC,OAAG,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBD,sBAAA,CAAA,aAAA,CAACE,+BAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;KAET,CAAC,CACI;AAEZ;;;;"}

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

@@ -17,5 +17,5 @@ type LoadingBodyProps = {
 /**
  * A body component for the DataGrid that displays a set number of skeleton loading rows.
  */
-export declare const LoadingBody: React.MemoExoticComponent<({ table, loadingRowCount, striped }: LoadingBodyProps) => React.JSX.Element>;
+export declare const LoadingBody: ({ table, loadingRowCount, striped }: LoadingBodyProps) => React.JSX.Element;
 export {};

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

@@ -5,11 +5,18 @@ import { LoadingBodyCell } from './LoadingBodyCell.js';
 /**
  * A body component for the DataGrid that displays a set number of skeleton loading rows.
  */
-const LoadingBody = React__default.memo(({ table, loadingRowCount, striped }) => (React__default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
-    // Since we don't have actual row data, we'll just pass a placeholder row object.
-    const row = { id: `loading-row-${index}`, index, depth: 0 };
-    return (React__default.createElement(Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, table.getVisibleFlatColumns().map((column) => (React__default.createElement(LoadingBodyCell, { key: column.id, column: column })))));
-}))));
+const LoadingBody = ({ table, loadingRowCount, striped }) => {
+    const columns = [
+        ...table.getLeftVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getRightVisibleLeafColumns(),
+    ];
+    return (React__default.createElement("tbody", { "aria-busy": "true" }, Array.from({ length: loadingRowCount }, (_, index) => {
+        // Since we don't have actual row data, we'll just pass a placeholder row object.
+        const row = { id: `loading-row-${index}`, index, depth: 0 };
+        return (React__default.createElement(Row, { row: row, striped: striped, key: row.id, enableExpanding: false }, columns.map((column) => (React__default.createElement(LoadingBodyCell, { key: column.id, column: column })))));
+    })));
+};
 
 export { LoadingBody };
 //# sourceMappingURL=LoadingBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingBody.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = React.memo(({ table, loadingRowCount, striped }: LoadingBodyProps) => (\n  <tbody aria-busy=\"true\">\n    {Array.from({ length: loadingRowCount }, (_, index) => {\n      // Since we don't have actual row data, we'll just pass a placeholder row object.\n      const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n      return (\n        <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n          {table.getVisibleFlatColumns().map((column) => (\n            <LoadingBodyCell key={column.id} column={column} />\n          ))}\n        </Row>\n      );\n    })}\n  </tbody>\n));\n"],"names":["React"],"mappings":";;;;AAuBA;;AAEG;AACU,MAAA,WAAW,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,MAC1FA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAiB,MAAM,EACpB,EAAA,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,IAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;IAE3D,QACEA,cAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,MACxCA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;AAEV,CAAC,CAAC,CACI,CACT;;;;"}
+{"version":3,"file":"LoadingBody.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBody.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { Row } from '../Row';\nimport { LoadingBodyCell } from './LoadingBodyCell';\n\ntype LoadingBodyProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The number of loading rows to display.\n   */\n  loadingRowCount: number;\n\n  /**\n   * Whether striped rows are enabled or not.\n   */\n  striped: boolean;\n};\n\n/**\n * A body component for the DataGrid that displays a set number of skeleton loading rows.\n */\nexport const LoadingBody = ({ table, loadingRowCount, striped }: LoadingBodyProps) => {\n  const columns = [\n    ...table.getLeftVisibleLeafColumns(),\n    ...table.getCenterVisibleLeafColumns(),\n    ...table.getRightVisibleLeafColumns(),\n  ];\n\n  return (\n    <tbody aria-busy=\"true\">\n      {Array.from({ length: loadingRowCount }, (_, index) => {\n        // Since we don't have actual row data, we'll just pass a placeholder row object.\n        const row = { id: `loading-row-${index}`, index, depth: 0 };\n\n        return (\n          <Row row={row} striped={striped} key={row.id} enableExpanding={false}>\n            {columns.map((column) => (\n              <LoadingBodyCell key={column.id} column={column} />\n            ))}\n          </Row>\n        );\n      })}\n    </tbody>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAuBA;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAoB,KAAI;AACnF,IAAA,MAAM,OAAO,GAAG;QACd,GAAG,KAAK,CAAC,yBAAyB,EAAE;QACpC,GAAG,KAAK,CAAC,2BAA2B,EAAE;QACtC,GAAG,KAAK,CAAC,0BAA0B,EAAE;KACtC;AAED,IAAA,QACEA,cAAiB,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,WAAA,EAAA,MAAM,IACpB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;;AAEpD,QAAA,MAAM,GAAG,GAAG,EAAE,EAAE,EAAE,CAAe,YAAA,EAAA,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;QAE3D,QACEA,6BAAC,GAAG,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,eAAe,EAAE,KAAK,EAAA,EACjE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACpD,CAAC,CACE;KAET,CAAC,CACI;AAEZ;;;;"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._cellContent_un8dp_1 {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
-var styles = {"cellContent":"_cellContent_un8dp_1"};
+___$insertStyle("._cellContent_l6fzz_1 {\n  display: flex;\n  padding: var(--density) var(--sizes-2);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
+var styles = {"cellContent":"_cellContent_l6fzz_1"};
 
 module.exports = styles;
 //# sourceMappingURL=CellContent.module.scss.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"CellContent.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n\n  padding: var(--density) var(--sizes-2);\n\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,0IAAA;AAEA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../_virtual/____insertStyle.js';
 
-insertStyle("._cellContent_un8dp_1 {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
-var styles = {"cellContent":"_cellContent_un8dp_1"};
+insertStyle("._cellContent_l6fzz_1 {\n  display: flex;\n  padding: var(--density) var(--sizes-2);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
+var styles = {"cellContent":"_cellContent_l6fzz_1"};
 
 export { styles as default };
 //# sourceMappingURL=CellContent.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.module.scss.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}
+{"version":3,"file":"CellContent.module.scss.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n\n  padding: var(--density) var(--sizes-2);\n\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,0IAAA;AAEA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_6gs1a_1, ._headerCell_6gs1a_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_6gs1a_1:focus, ._headerCell_6gs1a_1:focus, ._baseCell_6gs1a_1:focus-visible, ._headerCell_6gs1a_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_6gs1a_10::after, ._pinnedColumnRight_6gs1a_10::after, ._pinnedColumnLeft_6gs1a_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_6gs1a_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_6gs1a_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._headerCell_6gs1a_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_6gs1a_37, ._clickableHeaderContent_6gs1a_37 {\n  display: flex;\n  min-height: var(--sizes-12);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_6gs1a_51 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_6gs1a_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_6gs1a_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_6gs1a_37:hover ._sortIcon_6gs1a_69 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_6gs1a_69 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_6gs1a_1","headerCell":"_headerCell_6gs1a_1","pinnedColumnBase":"_pinnedColumnBase_6gs1a_10","pinnedColumnRight":"_pinnedColumnRight_6gs1a_10","pinnedColumnLeft":"_pinnedColumnLeft_6gs1a_10","headerContent":"_headerContent_6gs1a_37","clickableHeaderContent":"_clickableHeaderContent_6gs1a_37","headerOverflow":"_headerOverflow_6gs1a_51","sortIcon":"_sortIcon_6gs1a_69"};
+___$insertStyle("._baseCell_h19s0_1, ._headerCell_h19s0_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_h19s0_1:focus, ._headerCell_h19s0_1:focus, ._baseCell_h19s0_1:focus-visible, ._headerCell_h19s0_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_h19s0_10::after, ._pinnedColumnRight_h19s0_10::after, ._pinnedColumnLeft_h19s0_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_h19s0_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_h19s0_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._headerCell_h19s0_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_h19s0_37, ._clickableHeaderContent_h19s0_37 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_h19s0_50 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_h19s0_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_h19s0_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_h19s0_37:hover ._sortIcon_h19s0_68 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_h19s0_68 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_h19s0_1","headerCell":"_headerCell_h19s0_1","pinnedColumnBase":"_pinnedColumnBase_h19s0_10","pinnedColumnRight":"_pinnedColumnRight_h19s0_10","pinnedColumnLeft":"_pinnedColumnLeft_h19s0_10","headerContent":"_headerContent_h19s0_37","clickableHeaderContent":"_clickableHeaderContent_h19s0_37","headerOverflow":"_headerOverflow_h19s0_50","sortIcon":"_sortIcon_h19s0_68"};
 
 module.exports = styles;
 //# sourceMappingURL=HeaderCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  min-height: var(--sizes-12);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,i7EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g6EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_6gs1a_1, ._headerCell_6gs1a_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_6gs1a_1:focus, ._headerCell_6gs1a_1:focus, ._baseCell_6gs1a_1:focus-visible, ._headerCell_6gs1a_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_6gs1a_10::after, ._pinnedColumnRight_6gs1a_10::after, ._pinnedColumnLeft_6gs1a_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_6gs1a_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_6gs1a_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._headerCell_6gs1a_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_6gs1a_37, ._clickableHeaderContent_6gs1a_37 {\n  display: flex;\n  min-height: var(--sizes-12);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_6gs1a_51 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_6gs1a_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_6gs1a_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_6gs1a_37:hover ._sortIcon_6gs1a_69 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_6gs1a_69 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_6gs1a_1","headerCell":"_headerCell_6gs1a_1","pinnedColumnBase":"_pinnedColumnBase_6gs1a_10","pinnedColumnRight":"_pinnedColumnRight_6gs1a_10","pinnedColumnLeft":"_pinnedColumnLeft_6gs1a_10","headerContent":"_headerContent_6gs1a_37","clickableHeaderContent":"_clickableHeaderContent_6gs1a_37","headerOverflow":"_headerOverflow_6gs1a_51","sortIcon":"_sortIcon_6gs1a_69"};
+insertStyle("._baseCell_h19s0_1, ._headerCell_h19s0_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_h19s0_1:focus, ._headerCell_h19s0_1:focus, ._baseCell_h19s0_1:focus-visible, ._headerCell_h19s0_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_h19s0_10::after, ._pinnedColumnRight_h19s0_10::after, ._pinnedColumnLeft_h19s0_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_h19s0_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_h19s0_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._headerCell_h19s0_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_h19s0_37, ._clickableHeaderContent_h19s0_37 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_h19s0_50 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_h19s0_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_h19s0_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_h19s0_37:hover ._sortIcon_h19s0_68 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_h19s0_68 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_h19s0_1","headerCell":"_headerCell_h19s0_1","pinnedColumnBase":"_pinnedColumnBase_h19s0_10","pinnedColumnRight":"_pinnedColumnRight_h19s0_10","pinnedColumnLeft":"_pinnedColumnLeft_h19s0_10","headerContent":"_headerContent_h19s0_37","clickableHeaderContent":"_clickableHeaderContent_h19s0_37","headerOverflow":"_headerOverflow_h19s0_50","sortIcon":"_sortIcon_h19s0_68"};
 
 export { styles as default };
 //# sourceMappingURL=HeaderCell.module.scss.js.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  min-height: var(--sizes-12);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,i7EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g6EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -47,7 +47,7 @@ const useColumnState = ({ columns, hiddenColumns, columnOrdering, pinnedColumns,
         var _a, _b;
         let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
         // If we have any left-pinned columns, we need to include the selection column as it should appear first.
-        if (enableRowSelection && left.length > 0) {
+        if (enableRowSelection && left.length > 0 && !left.includes(constants.SELECTION_COLUMN_ID)) {
             left = [constants.SELECTION_COLUMN_ID, ...left];
         }
         return {

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnState.cjs","sources":["../../../../src/components/DataGrid/hooks/useColumnState.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { ColumnMapper } from '../utils';\nimport { DataGridProps } from '../types';\nimport { SelectionColumnDefinition } from '../columns';\nimport { SELECTION_COLUMN_ID } from '../constants';\n\ntype UseColumnStateProps = Pick<\n  DataGridProps,\n  'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'\n> & {\n  enableRowSelection: boolean;\n};\n\nexport const useColumnState = ({\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n  enableRowSelection,\n}: UseColumnStateProps) => {\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  return {\n    mappedColumnDefinitions,\n    columnOrder,\n    columnVisibility,\n    columnPinning,\n  };\n};\n"],"names":["useRef","ColumnMapper","useMemo","SelectionColumnDefinition","SELECTION_COLUMN_ID"],"mappings":";;;;;;;AAaa,MAAA,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,GACE,KAAI;AACxB;;AAEG;IACH,MAAM,YAAY,GAAGA,YAAM,CAAC,IAAIC,yBAAY,EAAE,CAAC;AAC/C,IAAA,MAAM,uBAAuB,GAAGC,aAAO,CAAC,MAAK;QAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAE/F,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,aAAa,CAAC,OAAO,CAACC,mDAAyB,CAAC;AACjD;AAED,QAAA,OAAO,aAAa;AACtB,KAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAEjC;;AAEG;;AAGH,IAAA,MAAM,WAAW,GAAGD,aAAO,CAAC,MAAK;QAC/B,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB;;AAGD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,OAAO,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC;AACxC;AAED,QAAA,OAAO,cAAc;AACvB,KAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;;AAGxC,IAAA,MAAM,gBAAgB,GAAGA,aAAO,CAAC,MAAK;;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AAC7D,YAAA,OAAO,SAAS;AACjB;QAED,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,MAAM,MAAM;AAChB,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD,CAAC,EACF,EAAE,CACH;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;AAG5B,IAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;;AACjC,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;;AAGpC,QAAA,IAAI,kBAAkB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AACzC,YAAA,IAAI,GAAG,CAACE,6BAAmB,EAAE,GAAG,IAAI,CAAC;AACtC;QAED,OAAO;YACL,IAAI;YACJ,KAAK,EAAE,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAE;SAClC;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;IAEvC,OAAO;QACL,uBAAuB;QACvB,WAAW;QACX,gBAAgB;QAChB,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useColumnState.cjs","sources":["../../../../src/components/DataGrid/hooks/useColumnState.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { ColumnMapper } from '../utils';\nimport { DataGridProps } from '../types';\nimport { SelectionColumnDefinition } from '../columns';\nimport { SELECTION_COLUMN_ID } from '../constants';\n\ntype UseColumnStateProps = Pick<\n  DataGridProps,\n  'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'\n> & {\n  enableRowSelection: boolean;\n};\n\nexport const useColumnState = ({\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n  enableRowSelection,\n}: UseColumnStateProps) => {\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0 && !left.includes(SELECTION_COLUMN_ID)) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  return {\n    mappedColumnDefinitions,\n    columnOrder,\n    columnVisibility,\n    columnPinning,\n  };\n};\n"],"names":["useRef","ColumnMapper","useMemo","SelectionColumnDefinition","SELECTION_COLUMN_ID"],"mappings":";;;;;;;AAaa,MAAA,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,GACE,KAAI;AACxB;;AAEG;IACH,MAAM,YAAY,GAAGA,YAAM,CAAC,IAAIC,yBAAY,EAAE,CAAC;AAC/C,IAAA,MAAM,uBAAuB,GAAGC,aAAO,CAAC,MAAK;QAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAE/F,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,aAAa,CAAC,OAAO,CAACC,mDAAyB,CAAC;AACjD;AAED,QAAA,OAAO,aAAa;AACtB,KAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAEjC;;AAEG;;AAGH,IAAA,MAAM,WAAW,GAAGD,aAAO,CAAC,MAAK;QAC/B,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB;;AAGD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,OAAO,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC;AACxC;AAED,QAAA,OAAO,cAAc;AACvB,KAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;;AAGxC,IAAA,MAAM,gBAAgB,GAAGA,aAAO,CAAC,MAAK;;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AAC7D,YAAA,OAAO,SAAS;AACjB;QAED,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,MAAM,MAAM;AAChB,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD,CAAC,EACF,EAAE,CACH;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;AAG5B,IAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;;AACjC,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;;AAGpC,QAAA,IAAI,kBAAkB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAACE,6BAAmB,CAAC,EAAE;AAChF,YAAA,IAAI,GAAG,CAACA,6BAAmB,EAAE,GAAG,IAAI,CAAC;AACtC;QAED,OAAO;YACL,IAAI;YACJ,KAAK,EAAE,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAE;SAClC;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;IAEvC,OAAO;QACL,uBAAuB;QACvB,WAAW;QACX,gBAAgB;QAChB,aAAa;KACd;AACH;;;;"}

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

@@ -45,7 +45,7 @@ const useColumnState = ({ columns, hiddenColumns, columnOrdering, pinnedColumns,
         var _a, _b;
         let left = (_a = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.left) !== null && _a !== undefined ? _a : [];
         // If we have any left-pinned columns, we need to include the selection column as it should appear first.
-        if (enableRowSelection && left.length > 0) {
+        if (enableRowSelection && left.length > 0 && !left.includes(SELECTION_COLUMN_ID)) {
             left = [SELECTION_COLUMN_ID, ...left];
         }
         return {

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnState.js","sources":["../../../../src/components/DataGrid/hooks/useColumnState.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { ColumnMapper } from '../utils';\nimport { DataGridProps } from '../types';\nimport { SelectionColumnDefinition } from '../columns';\nimport { SELECTION_COLUMN_ID } from '../constants';\n\ntype UseColumnStateProps = Pick<\n  DataGridProps,\n  'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'\n> & {\n  enableRowSelection: boolean;\n};\n\nexport const useColumnState = ({\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n  enableRowSelection,\n}: UseColumnStateProps) => {\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  return {\n    mappedColumnDefinitions,\n    columnOrder,\n    columnVisibility,\n    columnPinning,\n  };\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,GACE,KAAI;AACxB;;AAEG;IACH,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;AAC/C,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAE/F,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,aAAa,CAAC,OAAO,CAAC,yBAAyB,CAAC;AACjD;AAED,QAAA,OAAO,aAAa;AACtB,KAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAEjC;;AAEG;;AAGH,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC/B,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB;;AAGD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,OAAO,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC;AACxC;AAED,QAAA,OAAO,cAAc;AACvB,KAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;;AAGxC,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAK;;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AAC7D,YAAA,OAAO,SAAS;AACjB;QAED,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,MAAM,MAAM;AAChB,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD,CAAC,EACF,EAAE,CACH;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;AAG5B,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;;AACjC,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;;AAGpC,QAAA,IAAI,kBAAkB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;AACzC,YAAA,IAAI,GAAG,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC;AACtC;QAED,OAAO;YACL,IAAI;YACJ,KAAK,EAAE,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAE;SAClC;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;IAEvC,OAAO;QACL,uBAAuB;QACvB,WAAW;QACX,gBAAgB;QAChB,aAAa;KACd;AACH;;;;"}
+{"version":3,"file":"useColumnState.js","sources":["../../../../src/components/DataGrid/hooks/useColumnState.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { ColumnMapper } from '../utils';\nimport { DataGridProps } from '../types';\nimport { SelectionColumnDefinition } from '../columns';\nimport { SELECTION_COLUMN_ID } from '../constants';\n\ntype UseColumnStateProps = Pick<\n  DataGridProps,\n  'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'\n> & {\n  enableRowSelection: boolean;\n};\n\nexport const useColumnState = ({\n  columns,\n  hiddenColumns,\n  columnOrdering,\n  pinnedColumns,\n  enableRowSelection,\n}: UseColumnStateProps) => {\n  /**\n   * Mapping of column definitions.\n   */\n  const columnMapper = useRef(new ColumnMapper());\n  const mappedColumnDefinitions = useMemo(() => {\n    const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));\n\n    if (enableRowSelection) {\n      mappedColumns.unshift(SelectionColumnDefinition);\n    }\n\n    return mappedColumns;\n  }, [columns, enableRowSelection]);\n\n  /**\n   * Stable references for column states (visibility, order, pinning).\n   */\n\n  // Column render order - the order of the array indicates the order on screen.\n  const columnOrder = useMemo(() => {\n    if (!columnOrdering || columnOrdering.length === 0) {\n      return undefined;\n    }\n\n    // If we have a custom column order, we need to make sure the selection column always appears first.\n    if (enableRowSelection) {\n      return ['selection', ...columnOrdering];\n    }\n\n    return columnOrdering;\n  }, [columnOrdering, enableRowSelection]);\n\n  // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.\n  const columnVisibility = useMemo(() => {\n    // We can't have no columns visible - if the array is empty we show them all.\n    if (!hiddenColumns || hiddenColumns.length === columns.length) {\n      return undefined;\n    }\n\n    return columns.reduce(\n      (acc, column) => ({\n        ...acc,\n        [column.id]: !hiddenColumns.includes(column.id),\n      }),\n      {},\n    );\n  }, [hiddenColumns, columns]);\n\n  // Pinned columns\n  const columnPinning = useMemo(() => {\n    let left = pinnedColumns?.left ?? [];\n\n    // If we have any left-pinned columns, we need to include the selection column as it should appear first.\n    if (enableRowSelection && left.length > 0 && !left.includes(SELECTION_COLUMN_ID)) {\n      left = [SELECTION_COLUMN_ID, ...left];\n    }\n\n    return {\n      left,\n      right: pinnedColumns?.right ?? [],\n    };\n  }, [pinnedColumns, enableRowSelection]);\n\n  return {\n    mappedColumnDefinitions,\n    columnOrder,\n    columnVisibility,\n    columnPinning,\n  };\n};\n"],"names":[],"mappings":";;;;;AAaa,MAAA,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,aAAa,EACb,cAAc,EACd,aAAa,EACb,kBAAkB,GACE,KAAI;AACxB;;AAEG;IACH,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,YAAY,EAAE,CAAC;AAC/C,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAE/F,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,aAAa,CAAC,OAAO,CAAC,yBAAyB,CAAC;AACjD;AAED,QAAA,OAAO,aAAa;AACtB,KAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AAEjC;;AAEG;;AAGH,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC/B,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB;;AAGD,QAAA,IAAI,kBAAkB,EAAE;AACtB,YAAA,OAAO,CAAC,WAAW,EAAE,GAAG,cAAc,CAAC;AACxC;AAED,QAAA,OAAO,cAAc;AACvB,KAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;;AAGxC,IAAA,MAAM,gBAAgB,GAAG,OAAO,CAAC,MAAK;;QAEpC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE;AAC7D,YAAA,OAAO,SAAS;AACjB;QAED,OAAO,OAAO,CAAC,MAAM,CACnB,CAAC,GAAG,EAAE,MAAM,MAAM;AAChB,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;SAChD,CAAC,EACF,EAAE,CACH;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;;AAG5B,IAAA,MAAM,aAAa,GAAG,OAAO,CAAC,MAAK;;AACjC,QAAA,IAAI,IAAI,GAAG,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,KAAb,SAAA,GAAA,SAAA,GAAA,aAAa,CAAE,IAAI,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAA,EAAE;;AAGpC,QAAA,IAAI,kBAAkB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE;AAChF,YAAA,IAAI,GAAG,CAAC,mBAAmB,EAAE,GAAG,IAAI,CAAC;AACtC;QAED,OAAO;YACL,IAAI;YACJ,KAAK,EAAE,CAAA,EAAA,GAAA,aAAa,KAAb,IAAA,IAAA,aAAa,6BAAb,aAAa,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,EAAE;SAClC;AACH,KAAC,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC,CAAC;IAEvC,OAAO;QACL,uBAAuB;QACvB,WAAW;QACX,gBAAgB;QAChB,aAAa;KACd;AACH;;;;"}

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

@@ -1 +1,2 @@
 export { DataGrid } from './DataGrid';
+export { SELECTION_COLUMN_ID as SelectionColumnId } from './constants';

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

@@ -66,6 +66,9 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
     columnOrdering?: string[];
     /**
      * Pinned columns, an object with two arrays of column ID's, one for columns pinned to the left and another for the right.
+     *
+     * If row selection is enabled, and any columns are pinned to the left, the selection column will be pinned as the first
+     * column by default. Positioning can be overridden by including the `SelectionColumnId` in the left array.
      */
     pinnedColumns?: PinnedColumnState;
     /** Rows */

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

@@ -80,12 +80,20 @@ class ColumnMapper {
         if (isDataColumn(definition)) {
             return this.columnHelper.accessor(definition.field, {
                 ...sharedColumnProps,
-                // enableSorting: definition.sortable ?? false,
                 cell: definition.renderCell
                     ? (context) => definition.renderCell(context.getValue(), context.row.original)
                     : (context) => context.getValue(),
             });
         }
+        // If the column is a display column, but needs to be sortable, we create it as an accessor
+        // column that just uses the row data as the field value.
+        // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.
+        if (definition.sortable && !isDataColumn(definition)) {
+            return this.columnHelper.accessor((row) => row, {
+                ...sharedColumnProps,
+                cell: (context) => definition.renderCell(context.row.original),
+            });
+        }
         return this.columnHelper.display({
             ...sharedColumnProps,
             cell: (context) => definition.renderCell(context.row.original),

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        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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"}
+{"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        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => definition.renderCell(context.row.original),\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

@@ -78,12 +78,20 @@ class ColumnMapper {
         if (isDataColumn(definition)) {
             return this.columnHelper.accessor(definition.field, {
                 ...sharedColumnProps,
-                // enableSorting: definition.sortable ?? false,
                 cell: definition.renderCell
                     ? (context) => definition.renderCell(context.getValue(), context.row.original)
                     : (context) => context.getValue(),
             });
         }
+        // If the column is a display column, but needs to be sortable, we create it as an accessor
+        // column that just uses the row data as the field value.
+        // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.
+        if (definition.sortable && !isDataColumn(definition)) {
+            return this.columnHelper.accessor((row) => row, {
+                ...sharedColumnProps,
+                cell: (context) => definition.renderCell(context.row.original),
+            });
+        }
         return this.columnHelper.display({
             ...sharedColumnProps,
             cell: (context) => definition.renderCell(context.row.original),

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        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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"}
+{"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        cell: definition.renderCell\n          ? (context) => definition.renderCell!(context.getValue(), context.row.original)\n          : (context) => context.getValue(),\n      });\n    }\n\n    // If the column is a display column, but needs to be sortable, we create it as an accessor\n    // column that just uses the row data as the field value.\n    // Note: This wouldn't work for tables that use in-built sorting behaviour, but we don't use that.\n    if (definition.sortable && !isDataColumn(definition)) {\n      return this.columnHelper.accessor((row) => row, {\n        ...sharedColumnProps,\n        cell: (context) => definition.renderCell(context.row.original),\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/dist/components/DataGrid/utils/isLastColumn.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
 const isLastColumn = (table, column) => {
-    if (table.getIsSomeColumnsPinned('right')) {
+    if (table.getIsSomeColumnsPinned('right') && table.getRightVisibleLeafColumns().length > 0) {
         return column.getIsLastColumn('right');
     }
-    return column.getIsLastColumn();
+    return column.getIsLastColumn('center');
 };
 
 exports.isLastColumn = isLastColumn;

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

@@ -1 +1 @@
-{"version":3,"file":"isLastColumn.cjs","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right')) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn();\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}
+{"version":3,"file":"isLastColumn.cjs","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right') && table.getRightVisibleLeafColumns().length > 0) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn('center');\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,0BAA0B,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1F,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;AACzC;;;;"}

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

@@ -1,8 +1,8 @@
 const isLastColumn = (table, column) => {
-    if (table.getIsSomeColumnsPinned('right')) {
+    if (table.getIsSomeColumnsPinned('right') && table.getRightVisibleLeafColumns().length > 0) {
         return column.getIsLastColumn('right');
     }
-    return column.getIsLastColumn();
+    return column.getIsLastColumn('center');
 };
 
 export { isLastColumn };

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

@@ -1 +1 @@
-{"version":3,"file":"isLastColumn.js","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right')) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn();\n};\n"],"names":[],"mappings":"MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;AACzC,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,EAAE;AACjC;;;;"}
+{"version":3,"file":"isLastColumn.js","sources":["../../../../src/components/DataGrid/utils/isLastColumn.ts"],"sourcesContent":["import { Column, Table } from '@tanstack/react-table';\n\nexport const isLastColumn = (table: Table<any>, column: Column<any, any>) => {\n  if (table.getIsSomeColumnsPinned('right') && table.getRightVisibleLeafColumns().length > 0) {\n    return column.getIsLastColumn('right');\n  }\n\n  return column.getIsLastColumn('center');\n};\n"],"names":[],"mappings":"MAEa,YAAY,GAAG,CAAC,KAAiB,EAAE,MAAwB,KAAI;AAC1E,IAAA,IAAI,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,0BAA0B,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1F,QAAA,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC;AACvC;AAED,IAAA,OAAO,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC;AACzC;;;;"}

package/package.json

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