@veeqo/ui 9.10.2 → 9.10.3

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -4,6 +4,13 @@ import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import { Container } from './Container/Container.js';
 import styles from './GridContainer.module.scss.js';
 import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
+import '@tanstack/react-table';
+import '../../../Stack/Stack.js';
+import '../../../Choice/components/styled.js';
+import '../../../Text/Text.js';
+import '../../../Checkbox/styled.js';
+import 'uid/secure';
+import '../../../Radio/Radio.js';
 
 const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

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

@@ -4,8 +4,16 @@ var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
-var isLastColumn = require('../../../utils/isLastColumn.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
+require('../../../../Stack/Stack.cjs');
+require('../../../../../theme/modules/shadows.cjs');
+require('../../../../../theme/modules/sizes.cjs');
+require('../../../../../theme/modules/text.cjs');
+require('styled-components');
+require('../../../../Choice/components/styled.cjs');
+require('../../../../Text/Text.cjs');
+require('../../../../Checkbox/styled.cjs');
+require('../../../../Radio/Radio.cjs');
 var Resizer = require('../Resizer/Resizer.cjs');
 var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
 var SortIcon = require('./SortIcon/SortIcon.cjs');
@@ -32,7 +40,7 @@ const HeaderCell = ({ table, header, index }) => {
     const ariaSort = getAriaSort(isSorted);
     const resizeable = table.options.enableColumnResizing &&
         header.column.getCanResize() &&
-        !isLastColumn.isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
+        !header.column.getIsLastColumn(); // Last column can't be resized since it occupies all remaining space.
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
         column: header.column,
     });

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    styles.headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? styles.clickableHeaderContent : styles.headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={styles.headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
+{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !header.column.getIsLastColumn(); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    styles.headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? styles.clickableHeaderContent : styles.headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={styles.headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}

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

@@ -2,8 +2,16 @@ import React__default from 'react';
 import { flexRender } from '@tanstack/react-table';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { isLastColumn } from '../../../utils/isLastColumn.js';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
+import '../../../../Stack/Stack.js';
+import '../../../../../theme/modules/shadows.js';
+import '../../../../../theme/modules/sizes.js';
+import '../../../../../theme/modules/text.js';
+import 'styled-components';
+import '../../../../Choice/components/styled.js';
+import '../../../../Text/Text.js';
+import '../../../../Checkbox/styled.js';
+import '../../../../Radio/Radio.js';
 import { Resizer } from '../Resizer/Resizer.js';
 import styles from './HeaderCell.module.scss.js';
 import { SortIcon } from './SortIcon/SortIcon.js';
@@ -26,7 +34,7 @@ const HeaderCell = ({ table, header, index }) => {
     const ariaSort = getAriaSort(isSorted);
     const resizeable = table.options.enableColumnResizing &&
         header.column.getCanResize() &&
-        !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
+        !header.column.getIsLastColumn(); // Last column can't be resized since it occupies all remaining space.
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
         column: header.column,
     });

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    styles.headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? styles.clickableHeaderContent : styles.headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={styles.headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !header.column.getIsLastColumn(); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    styles.headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? styles.clickableHeaderContent : styles.headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={styles.headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_k0pyd_1, ._headerCell_k0pyd_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_k0pyd_1:focus, ._headerCell_k0pyd_1:focus, ._baseCell_k0pyd_1:focus-visible, ._headerCell_k0pyd_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_k0pyd_10::after, ._pinnedColumnRight_k0pyd_10::after, ._pinnedColumnLeft_k0pyd_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_k0pyd_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_k0pyd_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_k0pyd_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_k0pyd_37, ._clickableHeaderContent_k0pyd_37 {\n  display: flex;\n  height: var(--sizes-6);\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_k0pyd_51 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_k0pyd_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_k0pyd_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_k0pyd_37:hover ._sortIcon_k0pyd_69 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_k0pyd_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_k0pyd_1","headerCell":"_headerCell_k0pyd_1","pinnedColumnBase":"_pinnedColumnBase_k0pyd_10","pinnedColumnRight":"_pinnedColumnRight_k0pyd_10","pinnedColumnLeft":"_pinnedColumnLeft_k0pyd_10","headerContent":"_headerContent_k0pyd_37","clickableHeaderContent":"_clickableHeaderContent_k0pyd_37","headerOverflow":"_headerOverflow_k0pyd_51","sortIcon":"_sortIcon_k0pyd_69"};
+___$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"};
 
 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  height: var(--sizes-6);\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,46EAAA;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  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;;;;"}

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

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_k0pyd_1, ._headerCell_k0pyd_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_k0pyd_1:focus, ._headerCell_k0pyd_1:focus, ._baseCell_k0pyd_1:focus-visible, ._headerCell_k0pyd_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_k0pyd_10::after, ._pinnedColumnRight_k0pyd_10::after, ._pinnedColumnLeft_k0pyd_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_k0pyd_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_k0pyd_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_k0pyd_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_k0pyd_37, ._clickableHeaderContent_k0pyd_37 {\n  display: flex;\n  height: var(--sizes-6);\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_k0pyd_51 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_k0pyd_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_k0pyd_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_k0pyd_37:hover ._sortIcon_k0pyd_69 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_k0pyd_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_k0pyd_1","headerCell":"_headerCell_k0pyd_1","pinnedColumnBase":"_pinnedColumnBase_k0pyd_10","pinnedColumnRight":"_pinnedColumnRight_k0pyd_10","pinnedColumnLeft":"_pinnedColumnLeft_k0pyd_10","headerContent":"_headerContent_k0pyd_37","clickableHeaderContent":"_clickableHeaderContent_k0pyd_37","headerOverflow":"_headerOverflow_k0pyd_51","sortIcon":"_sortIcon_k0pyd_69"};
+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"};
 
 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  height: var(--sizes-6);\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,46EAAA;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  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;;;;"}

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

@@ -1,4 +1,8 @@
 export { useSortingState } from './useSortingState';
+export { useSelectionState } from './useSelectionState';
 export { usePinnedColumnStyles } from './usePinnedColumnStyles';
 export { usePinnedColumnLayout } from './usePinnedColumnLayout';
 export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useColumnState } from './useColumnState';
+export { useColumnWidthState } from './useColumnWidthState';
+export { useExpandedState } from './useExpandedState';

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var React = require('react');
+var ColumnMapper = require('../utils/ColumnMapper.cjs');
+var SelectionColumnDefinition = require('../columns/SelectionColumnDefinition.cjs');
+var constants = require('../constants.cjs');
+
+const useColumnState = ({ columns, hiddenColumns, columnOrdering, pinnedColumns, enableRowSelection, }) => {
+    /**
+     * Mapping of column definitions.
+     */
+    const columnMapper = React.useRef(new ColumnMapper.ColumnMapper());
+    const mappedColumnDefinitions = React.useMemo(() => {
+        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        if (enableRowSelection) {
+            mappedColumns.unshift(SelectionColumnDefinition.SelectionColumnDefinition);
+        }
+        return mappedColumns;
+    }, [columns, enableRowSelection]);
+    /**
+     * Stable references for column states (visibility, order, pinning).
+     */
+    // Column render order - the order of the array indicates the order on screen.
+    const columnOrder = React.useMemo(() => {
+        if (!columnOrdering || columnOrdering.length === 0) {
+            return undefined;
+        }
+        // If we have a custom column order, we need to make sure the selection column always appears first.
+        if (enableRowSelection) {
+            return ['selection', ...columnOrdering];
+        }
+        return columnOrdering;
+    }, [columnOrdering, enableRowSelection]);
+    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
+    const columnVisibility = React.useMemo(() => {
+        // We can't have no columns visible - if the array is empty we show them all.
+        if (!hiddenColumns || hiddenColumns.length === columns.length) {
+            return undefined;
+        }
+        return columns.reduce((acc, column) => ({
+            ...acc,
+            [column.id]: !hiddenColumns.includes(column.id),
+        }), {});
+    }, [hiddenColumns, columns]);
+    // Pinned columns
+    const columnPinning = React.useMemo(() => {
+        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) {
+            left = [constants.SELECTION_COLUMN_ID, ...left];
+        }
+        return {
+            left,
+            right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
+        };
+    }, [pinnedColumns, enableRowSelection]);
+    return {
+        mappedColumnDefinitions,
+        columnOrder,
+        columnVisibility,
+        columnPinning,
+    };
+};
+
+exports.useColumnState = useColumnState;
+//# sourceMappingURL=useColumnState.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,14 @@
+import { DataGridProps } from '../types';
+type UseColumnStateProps = Pick<DataGridProps, 'columns' | 'hiddenColumns' | 'columnOrdering' | 'pinnedColumns'> & {
+    enableRowSelection: boolean;
+};
+export declare const useColumnState: ({ columns, hiddenColumns, columnOrdering, pinnedColumns, enableRowSelection, }: UseColumnStateProps) => {
+    mappedColumnDefinitions: import("@tanstack/table-core").ColumnDef<any, any>[];
+    columnOrder: string[] | undefined;
+    columnVisibility: {} | undefined;
+    columnPinning: {
+        left: string[];
+        right: string[];
+    };
+};
+export {};

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

@@ -0,0 +1,65 @@
+import { useRef, useMemo } from 'react';
+import { ColumnMapper } from '../utils/ColumnMapper.js';
+import { SelectionColumnDefinition } from '../columns/SelectionColumnDefinition.js';
+import { SELECTION_COLUMN_ID } from '../constants.js';
+
+const useColumnState = ({ columns, hiddenColumns, columnOrdering, pinnedColumns, enableRowSelection, }) => {
+    /**
+     * Mapping of column definitions.
+     */
+    const columnMapper = useRef(new ColumnMapper());
+    const mappedColumnDefinitions = useMemo(() => {
+        const mappedColumns = columns.map((column) => columnMapper.current.mapColumnDefinition(column));
+        if (enableRowSelection) {
+            mappedColumns.unshift(SelectionColumnDefinition);
+        }
+        return mappedColumns;
+    }, [columns, enableRowSelection]);
+    /**
+     * Stable references for column states (visibility, order, pinning).
+     */
+    // Column render order - the order of the array indicates the order on screen.
+    const columnOrder = useMemo(() => {
+        if (!columnOrdering || columnOrdering.length === 0) {
+            return undefined;
+        }
+        // If we have a custom column order, we need to make sure the selection column always appears first.
+        if (enableRowSelection) {
+            return ['selection', ...columnOrdering];
+        }
+        return columnOrdering;
+    }, [columnOrdering, enableRowSelection]);
+    // Column visibiilty - record of column ID's to visibility, where false/no value = hidden.
+    const columnVisibility = useMemo(() => {
+        // We can't have no columns visible - if the array is empty we show them all.
+        if (!hiddenColumns || hiddenColumns.length === columns.length) {
+            return undefined;
+        }
+        return columns.reduce((acc, column) => ({
+            ...acc,
+            [column.id]: !hiddenColumns.includes(column.id),
+        }), {});
+    }, [hiddenColumns, columns]);
+    // Pinned columns
+    const columnPinning = useMemo(() => {
+        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) {
+            left = [SELECTION_COLUMN_ID, ...left];
+        }
+        return {
+            left,
+            right: (_b = pinnedColumns === null || pinnedColumns === undefined ? undefined : pinnedColumns.right) !== null && _b !== undefined ? _b : [],
+        };
+    }, [pinnedColumns, enableRowSelection]);
+    return {
+        mappedColumnDefinitions,
+        columnOrder,
+        columnVisibility,
+        columnPinning,
+    };
+};
+
+export { useColumnState };
+//# sourceMappingURL=useColumnState.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within
+ * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for
+ * that behaviour.
+ * @param columnDefinitions Mapped column definitions.
+ * @param columnWidths An object containing the current widths of the columns.
+ * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.
+ */
+const normalizeColumnWidths = (columnDefinitions, columnWidths) => {
+    const normalizedColumnWidths = {};
+    Object.entries(columnWidths).forEach(([columnId, width]) => {
+        const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId);
+        // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.
+        if (!minSize || !maxSize) {
+            normalizedColumnWidths[columnId] = width;
+            return;
+        }
+        const newWidth = Math.max(minSize, Math.min(maxSize, width));
+        normalizedColumnWidths[columnId] = newWidth;
+    });
+    return normalizedColumnWidths;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+const useColumnWidthState = ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }) => {
+    // Internal state to store the column widths if the user doesn't provide them.
+    const [internalColumnWidthState, setInternalColumnWidthState] = React.useState({});
+    // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.
+    const isControlledExternally = columnWidths && onColumnsResized;
+    const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;
+    const onColumnSizingChange = React.useCallback((onUpdate) => {
+        const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;
+        const normalizedColumnSizing = normalizeColumnWidths(mappedColumnDefinitions, newColumnSizing);
+        if (isControlledExternally || onColumnsResized) {
+            onColumnsResized(normalizedColumnSizing);
+        }
+        setInternalColumnWidthState(normalizedColumnSizing);
+    }, [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions]);
+    return {
+        columnSizing,
+        onColumnSizingChange,
+    };
+};
+
+exports.useColumnWidthState = useColumnWidthState;
+//# sourceMappingURL=useColumnWidthState.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnWidthState.cjs","sources":["../../../../src/components/DataGrid/hooks/useColumnWidthState.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';\n\nimport { ColumnWidths } from '../types/ColumnWidths';\n\ntype UseColumnWidthStateProps = {\n  /**\n   * The TanStack Table column definitions.\n   */\n  mappedColumnDefinitions: ColumnDef<any, any>[];\n\n  /**\n   * The current widths of the columns.\n   */\n  columnWidths?: ColumnWidths;\n\n  /**\n   * Callback function to be called when the columns are resized.\n   */\n  onColumnsResized?: (columnWidths: ColumnWidths) => void;\n};\n\n/**\n * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within\n * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for\n * that behaviour.\n * @param columnDefinitions Mapped column definitions.\n * @param columnWidths An object containing the current widths of the columns.\n * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.\n */\nconst normalizeColumnWidths = (\n  columnDefinitions: ColumnDef<any, any>[],\n  columnWidths: ColumnWidths,\n) => {\n  const normalizedColumnWidths: Record<string, number> = {};\n\n  Object.entries(columnWidths).forEach(([columnId, width]) => {\n    const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId)!;\n\n    // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.\n    if (!minSize || !maxSize) {\n      normalizedColumnWidths[columnId] = width;\n      return;\n    }\n\n    const newWidth = Math.max(minSize, Math.min(maxSize, width));\n    normalizedColumnWidths[columnId] = newWidth;\n  });\n\n  return normalizedColumnWidths;\n};\n\n/**\n * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths\n * and onColumnsResized props to the grid, it will use those to manage the column widths externally.\n */\nexport const useColumnWidthState = ({\n  mappedColumnDefinitions,\n  columnWidths,\n  onColumnsResized,\n}: UseColumnWidthStateProps) => {\n  // Internal state to store the column widths if the user doesn't provide them.\n  const [internalColumnWidthState, setInternalColumnWidthState] = useState<ColumnWidths>({});\n\n  // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.\n  const isControlledExternally = columnWidths && onColumnsResized;\n\n  const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;\n\n  const onColumnSizingChange: OnChangeFn<ColumnSizingState> = useCallback(\n    (onUpdate) => {\n      const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;\n      const normalizedColumnSizing = normalizeColumnWidths(\n        mappedColumnDefinitions,\n        newColumnSizing,\n      );\n\n      if (isControlledExternally || onColumnsResized) {\n        onColumnsResized(normalizedColumnSizing);\n      }\n\n      setInternalColumnWidthState(normalizedColumnSizing);\n    },\n    [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions],\n  );\n\n  return {\n    columnSizing,\n    onColumnSizingChange,\n  };\n};\n"],"names":["useState","useCallback"],"mappings":";;;;AAsBA;;;;;;;AAOG;AACH,MAAM,qBAAqB,GAAG,CAC5B,iBAAwC,EACxC,YAA0B,KACxB;IACF,MAAM,sBAAsB,GAA2B,EAAE;AAEzD,IAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAE;;AAGlF,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;AACxB,YAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,KAAK;YACxC;AACD;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5D,QAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,QAAQ;AAC7C,KAAC,CAAC;AAEF,IAAA,OAAO,sBAAsB;AAC/B,CAAC;AAED;;;AAGG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,uBAAuB,EACvB,YAAY,EACZ,gBAAgB,GACS,KAAI;;IAE7B,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAGA,cAAQ,CAAe,EAAE,CAAC;;AAG1F,IAAA,MAAM,sBAAsB,GAAG,YAAY,IAAI,gBAAgB;IAE/D,MAAM,YAAY,GAAG,sBAAsB,GAAG,YAAY,GAAG,wBAAwB;AAErF,IAAA,MAAM,oBAAoB,GAAkCC,iBAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,QAAQ;QAC1F,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,uBAAuB,EACvB,eAAe,CAChB;QAED,IAAI,sBAAsB,IAAI,gBAAgB,EAAE;YAC9C,gBAAgB,CAAC,sBAAsB,CAAC;AACzC;QAED,2BAA2B,CAAC,sBAAsB,CAAC;KACpD,EACD,CAAC,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,CAClF;IAED,OAAO;QACL,YAAY;QACZ,oBAAoB;KACrB;AACH;;;;"}

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

@@ -0,0 +1,25 @@
+import { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';
+import { ColumnWidths } from '../types/ColumnWidths';
+type UseColumnWidthStateProps = {
+    /**
+     * The TanStack Table column definitions.
+     */
+    mappedColumnDefinitions: ColumnDef<any, any>[];
+    /**
+     * The current widths of the columns.
+     */
+    columnWidths?: ColumnWidths;
+    /**
+     * Callback function to be called when the columns are resized.
+     */
+    onColumnsResized?: (columnWidths: ColumnWidths) => void;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+export declare const useColumnWidthState: ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }: UseColumnWidthStateProps) => {
+    columnSizing: ColumnWidths;
+    onColumnSizingChange: OnChangeFn<ColumnSizingState>;
+};
+export {};

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

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within
+ * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for
+ * that behaviour.
+ * @param columnDefinitions Mapped column definitions.
+ * @param columnWidths An object containing the current widths of the columns.
+ * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.
+ */
+const normalizeColumnWidths = (columnDefinitions, columnWidths) => {
+    const normalizedColumnWidths = {};
+    Object.entries(columnWidths).forEach(([columnId, width]) => {
+        const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId);
+        // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.
+        if (!minSize || !maxSize) {
+            normalizedColumnWidths[columnId] = width;
+            return;
+        }
+        const newWidth = Math.max(minSize, Math.min(maxSize, width));
+        normalizedColumnWidths[columnId] = newWidth;
+    });
+    return normalizedColumnWidths;
+};
+/**
+ * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths
+ * and onColumnsResized props to the grid, it will use those to manage the column widths externally.
+ */
+const useColumnWidthState = ({ mappedColumnDefinitions, columnWidths, onColumnsResized, }) => {
+    // Internal state to store the column widths if the user doesn't provide them.
+    const [internalColumnWidthState, setInternalColumnWidthState] = useState({});
+    // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.
+    const isControlledExternally = columnWidths && onColumnsResized;
+    const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;
+    const onColumnSizingChange = useCallback((onUpdate) => {
+        const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;
+        const normalizedColumnSizing = normalizeColumnWidths(mappedColumnDefinitions, newColumnSizing);
+        if (isControlledExternally || onColumnsResized) {
+            onColumnsResized(normalizedColumnSizing);
+        }
+        setInternalColumnWidthState(normalizedColumnSizing);
+    }, [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions]);
+    return {
+        columnSizing,
+        onColumnSizingChange,
+    };
+};
+
+export { useColumnWidthState };
+//# sourceMappingURL=useColumnWidthState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnWidthState.js","sources":["../../../../src/components/DataGrid/hooks/useColumnWidthState.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { ColumnDef, ColumnSizingState, OnChangeFn } from '@tanstack/react-table';\n\nimport { ColumnWidths } from '../types/ColumnWidths';\n\ntype UseColumnWidthStateProps = {\n  /**\n   * The TanStack Table column definitions.\n   */\n  mappedColumnDefinitions: ColumnDef<any, any>[];\n\n  /**\n   * The current widths of the columns.\n   */\n  columnWidths?: ColumnWidths;\n\n  /**\n   * Callback function to be called when the columns are resized.\n   */\n  onColumnsResized?: (columnWidths: ColumnWidths) => void;\n};\n\n/**\n * Normalizes the column widths to ensure they are within the min/max bounds defined in the column definitions. Internally within\n * the columnSizing state, TanStack will allow columns to be resized to values exceeding the min/max bounds - this corrects for\n * that behaviour.\n * @param columnDefinitions Mapped column definitions.\n * @param columnWidths An object containing the current widths of the columns.\n * @returns An object containing the current widths of the columns, with the min/max sizes taken into account.\n */\nconst normalizeColumnWidths = (\n  columnDefinitions: ColumnDef<any, any>[],\n  columnWidths: ColumnWidths,\n) => {\n  const normalizedColumnWidths: Record<string, number> = {};\n\n  Object.entries(columnWidths).forEach(([columnId, width]) => {\n    const { minSize, maxSize } = columnDefinitions.find((col) => col.id === columnId)!;\n\n    // Both minSize and maxSize properties should always be defined since they're set to defaults by the ColumnMapper - but, just in case.\n    if (!minSize || !maxSize) {\n      normalizedColumnWidths[columnId] = width;\n      return;\n    }\n\n    const newWidth = Math.max(minSize, Math.min(maxSize, width));\n    normalizedColumnWidths[columnId] = newWidth;\n  });\n\n  return normalizedColumnWidths;\n};\n\n/**\n * Hook used to handle column width state for the grid. By default, it sets up internal state, but if the user provides columnWidths\n * and onColumnsResized props to the grid, it will use those to manage the column widths externally.\n */\nexport const useColumnWidthState = ({\n  mappedColumnDefinitions,\n  columnWidths,\n  onColumnsResized,\n}: UseColumnWidthStateProps) => {\n  // Internal state to store the column widths if the user doesn't provide them.\n  const [internalColumnWidthState, setInternalColumnWidthState] = useState<ColumnWidths>({});\n\n  // If the user provides columnWidths and an onColumnsResized callback, we use them to control the column widths externally.\n  const isControlledExternally = columnWidths && onColumnsResized;\n\n  const columnSizing = isControlledExternally ? columnWidths : internalColumnWidthState;\n\n  const onColumnSizingChange: OnChangeFn<ColumnSizingState> = useCallback(\n    (onUpdate) => {\n      const newColumnSizing = typeof onUpdate === 'function' ? onUpdate(columnSizing) : onUpdate;\n      const normalizedColumnSizing = normalizeColumnWidths(\n        mappedColumnDefinitions,\n        newColumnSizing,\n      );\n\n      if (isControlledExternally || onColumnsResized) {\n        onColumnsResized(normalizedColumnSizing);\n      }\n\n      setInternalColumnWidthState(normalizedColumnSizing);\n    },\n    [columnSizing, isControlledExternally, onColumnsResized, mappedColumnDefinitions],\n  );\n\n  return {\n    columnSizing,\n    onColumnSizingChange,\n  };\n};\n"],"names":[],"mappings":";;AAsBA;;;;;;;AAOG;AACH,MAAM,qBAAqB,GAAG,CAC5B,iBAAwC,EACxC,YAA0B,KACxB;IACF,MAAM,sBAAsB,GAA2B,EAAE;AAEzD,IAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAI;QACzD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,QAAQ,CAAE;;AAGlF,QAAA,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;AACxB,YAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,KAAK;YACxC;AACD;AAED,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5D,QAAA,sBAAsB,CAAC,QAAQ,CAAC,GAAG,QAAQ;AAC7C,KAAC,CAAC;AAEF,IAAA,OAAO,sBAAsB;AAC/B,CAAC;AAED;;;AAGG;AACI,MAAM,mBAAmB,GAAG,CAAC,EAClC,uBAAuB,EACvB,YAAY,EACZ,gBAAgB,GACS,KAAI;;IAE7B,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC;;AAG1F,IAAA,MAAM,sBAAsB,GAAG,YAAY,IAAI,gBAAgB;IAE/D,MAAM,YAAY,GAAG,sBAAsB,GAAG,YAAY,GAAG,wBAAwB;AAErF,IAAA,MAAM,oBAAoB,GAAkC,WAAW,CACrE,CAAC,QAAQ,KAAI;AACX,QAAA,MAAM,eAAe,GAAG,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,QAAQ;QAC1F,MAAM,sBAAsB,GAAG,qBAAqB,CAClD,uBAAuB,EACvB,eAAe,CAChB;QAED,IAAI,sBAAsB,IAAI,gBAAgB,EAAE;YAC9C,gBAAgB,CAAC,sBAAsB,CAAC;AACzC;QAED,2BAA2B,CAAC,sBAAsB,CAAC;KACpD,EACD,CAAC,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,CAClF;IAED,OAAO;QACL,YAAY;QACZ,oBAAoB;KACrB;AACH;;;;"}

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

@@ -0,0 +1 @@
+export type ColumnWidths = Record<string, number>;

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

@@ -5,6 +5,7 @@ import { ColumnDefinition } from './ColumnDefinition';
 import { SortState } from './SortState';
 import { PinnedColumnState } from './PinnedColumnState';
 import { RowGroupingConfiguration } from './RowGroupingConfiguration';
+import { ColumnWidths } from './ColumnWidths';
 export type CustomState = {
     iconSlot: ReactElement;
     heading: string;
@@ -110,4 +111,13 @@ export type DataGridProps = Pick<AriaAttributes, 'aria-label'> & {
      * Row grouping configuration for rendering nested data in the grid.
      */
     rowGrouping?: RowGroupingConfiguration;
+    /** Column widths */
+    /**
+     * Column widths, a map of column ID's to their widths in pixels. If this is undefined, or a column isn't included, the default width will be used.
+     */
+    columnWidths?: ColumnWidths;
+    /**
+     * Callback which is raised when the column widths change.
+     */
+    onColumnsResized?: (columnWidths: ColumnWidths) => void;
 };

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

@@ -1,4 +1,3 @@
-export { isLastColumn } from './isLastColumn';
 export { ColumnMapper } from './ColumnMapper';
 export { getAriaRoles } from './getAriaRoles';
 export { getPinnedColumnStyles, getPinnedColumnClassNames } from './pinnedColumnUtils';