@veeqo/ui 10.0.0-beta.1 → 10.0.0-beta.3

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_1grno_1 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n  border-width: var(--sizes-line);\n  border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n  border-width: var(--sizes-none);\n  border-left-width: var(--sizes-line);\n  border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n  border-width: var(--sizes-none);\n}");
+var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
+
+module.exports = styles;
+//# sourceMappingURL=Container.module.scss.cjs.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &.borderModeFull {\n    border-width: var(--sizes-line);\n    border-radius: var(--radius-base);\n  }\n\n  &.borderModeVertical {\n    border-width: var(--sizes-none);\n    border-left-width: var(--sizes-line);\n    border-right-width: var(--sizes-line);\n  }\n\n  &.borderModeNone {\n    border-width: var(--sizes-none);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._container_1grno_1 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n  border-width: var(--sizes-line);\n  border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n  border-width: var(--sizes-none);\n  border-left-width: var(--sizes-line);\n  border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n  border-width: var(--sizes-none);\n}");
+var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
+
+export { styles as default };
+//# sourceMappingURL=Container.module.scss.js.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &.borderModeFull {\n    border-width: var(--sizes-line);\n    border-radius: var(--radius-base);\n  }\n\n  &.borderModeVertical {\n    border-width: var(--sizes-none);\n    border-left-width: var(--sizes-line);\n    border-right-width: var(--sizes-line);\n  }\n\n  &.borderModeNone {\n    border-width: var(--sizes-none);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -4,8 +4,15 @@ var React = require('react');
 var index = require('../../../../theme/index.cjs');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 var Container = require('./Container/Container.cjs');
-var GridContainer_module = require('./GridContainer.module.css.cjs');
+var GridContainer_module = require('./GridContainer.module.scss.cjs');
 var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
+require('@tanstack/react-table');
+require('../../../Stack/Stack.cjs');
+require('../../../Choice/components/styled.cjs');
+require('../../../Text/Text.cjs');
+require('../../../Checkbox/styled.cjs');
+require('uid/secure');
+require('../../../Radio/Radio.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","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 { dataGridStyle } from './GridContainer.module.css';\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([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":["buildClassnames","dataGridStyle","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,kCAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;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,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,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,EAAEE,WAAK,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.cjs","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":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,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,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,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,EAAEE,WAAK,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/GridContainer/GridContainer.js

@@ -2,10 +2,17 @@ import React__default from 'react';
 import { theme } from '../../../../theme/index.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import { Container } from './Container/Container.js';
-import { dataGridStyle } from './GridContainer.module.css.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([dataGridStyle, 'data-grid']);
+const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
 /**
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).

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 { dataGridStyle } from './GridContainer.module.css';\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([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,aAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;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/GridContainer/GridContainer.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._dataGridStyle_1irlp_1 {\n  position: relative;\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n  inline-size: 100%;\n}");
+var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
+
+module.exports = styles;
+//# sourceMappingURL=GridContainer.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n  position: relative;\n\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n\n  inline-size: 100%;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._dataGridStyle_1irlp_1 {\n  position: relative;\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n  inline-size: 100%;\n}");
+var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
+
+export { styles as default };
+//# sourceMappingURL=GridContainer.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.scss.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n  position: relative;\n\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n\n  inline-size: 100%;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

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

@@ -4,10 +4,18 @@ 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.css.cjs');
+var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
 var SortIcon = require('./SortIcon/SortIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -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 {\n  headerCell,\n  headerContent,\n  headerOverflow,\n  clickableHeaderContent,\n} from './HeaderCell.module.css';\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    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 ? clickableHeaderContent : 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={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","headerCell","flexRender","clickableHeaderContent","headerContent","React","headerOverflow","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,10 +2,18 @@ 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 { headerCell, clickableHeaderContent, headerContent, headerOverflow } from './HeaderCell.module.css.js';
+import styles from './HeaderCell.module.scss.js';
 import { SortIcon } from './SortIcon/SortIcon.js';
 
 const getAriaSort = (sortDirection) => {
@@ -26,19 +34,19 @@ 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,
     });
     const headerCellClassname = buildClassnames([
-        headerCell,
+        styles.headerCell,
         pinnedCellClassName,
         'data-grid-header-cell',
     ]);
     const HeaderContents = flexRender(headerRenderer, header.getContext());
     const HeaderContentComponent = sortable ? 'button' : 'div';
     const headerContentClassname = buildClassnames([
-        sortable ? clickableHeaderContent : headerContent,
+        sortable ? styles.clickableHeaderContent : styles.headerContent,
         'data-grid-header-content',
     ]);
     const headerContentProps = {
@@ -47,7 +55,7 @@ const HeaderCell = ({ table, header, index }) => {
     };
     return (React__default.createElement("th", { className: headerCellClassname, role: "columnheader", scope: "col", "aria-colindex": index + 1, "aria-label": getAriaLabel === null || getAriaLabel === undefined ? undefined : getAriaLabel(), style: pinnedCellStyles, "aria-sort": ariaSort },
         React__default.createElement(HeaderContentComponent, { className: headerContentClassname, style: headerContentProps, onClick: sortable ? header.column.getToggleSortingHandler() : undefined },
-            typeof headerRenderer === 'string' ? (React__default.createElement("span", { className: headerOverflow }, HeaderContents)) : (HeaderContents),
+            typeof headerRenderer === 'string' ? (React__default.createElement("span", { className: styles.headerOverflow }, HeaderContents)) : (HeaderContents),
             sortable && React__default.createElement(SortIcon, { isSorted: isSorted })),
         resizeable && (React__default.createElement(Resizer, { getIsResizing: header.column.getIsResizing, getResizeHandler: header.getResizeHandler(), resetSize: header.column.resetSize, deltaOffset: table.options.columnResizeMode === 'onChange'
                 ? null

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 {\n  headerCell,\n  headerContent,\n  headerOverflow,\n  clickableHeaderContent,\n} from './HeaderCell.module.css';\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    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 ? clickableHeaderContent : 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={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

@@ -0,0 +1,9 @@
+'use strict';
+
+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"};
+
+module.exports = styles;
+//# sourceMappingURL=HeaderCell.module.scss.cjs.map

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

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

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

@@ -0,0 +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"};
+
+export { styles as default };
+//# sourceMappingURL=HeaderCell.module.scss.js.map

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

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

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

@@ -6,7 +6,7 @@ var ArrowDownIcon = require('../../../../../../tempIcons/ArrowDownIcon.cjs');
 var ArrowUpIcon = require('../../../../../../tempIcons/ArrowUpIcon.cjs');
 var DoubleArrowIcon = require('../../../../../../tempIcons/DoubleArrowIcon.cjs');
 require('../../../../../../theme/modules/sizes.cjs');
-var HeaderCell_module = require('../HeaderCell.module.css.cjs');
+var HeaderCell_module = require('../HeaderCell.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -1 +1 @@
-{"version":3,"file":"SortIcon.cjs","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport { sortIcon } from '../HeaderCell.module.css';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={sortIcon}>{icon}</span>;\n};\n"],"names":["useMemo","React","DoubleArrowIcon","ArrowUpIcon","theme","ArrowDownIcon","sortIcon"],"mappings":";;;;;;;;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAGA,aAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOC,qCAACC,+BAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBD,sBAAC,CAAA,aAAA,CAAAE,uBAAW,EAAC,EAAA,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAC,EAAA,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAOH,+CAAM,SAAS,EAAEK,0BAAQ,EAAG,EAAA,IAAI,CAAQ;AACjD;;;;"}
+{"version":3,"file":"SortIcon.cjs","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport styles from '../HeaderCell.module.scss';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={styles.sortIcon}>{icon}</span>;\n};\n"],"names":["useMemo","React","DoubleArrowIcon","ArrowUpIcon","theme","ArrowDownIcon","styles"],"mappings":";;;;;;;;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAGA,aAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOC,qCAACC,+BAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBD,sBAAC,CAAA,aAAA,CAAAE,uBAAW,EAAC,EAAA,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAC,EAAA,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAOH,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEK,iBAAM,CAAC,QAAQ,EAAA,EAAG,IAAI,CAAQ;AACxD;;;;"}

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

@@ -4,7 +4,7 @@ import { ArrowDownIcon } from '../../../../../../tempIcons/ArrowDownIcon.js';
 import { ArrowUpIcon } from '../../../../../../tempIcons/ArrowUpIcon.js';
 import { DoubleArrowIcon } from '../../../../../../tempIcons/DoubleArrowIcon.js';
 import '../../../../../../theme/modules/sizes.js';
-import { sortIcon } from '../HeaderCell.module.css.js';
+import styles from '../HeaderCell.module.scss.js';
 
 /**
  * Sort icon for a column header.
@@ -16,7 +16,7 @@ const SortIcon = ({ isSorted }) => {
         }
         return isSorted === 'asc' ? (React__default.createElement(ArrowUpIcon, { color: theme.colors.neutral.ink.dark, size: 5 })) : (React__default.createElement(ArrowDownIcon, { color: theme.colors.neutral.ink.dark, size: 5 }));
     }, [isSorted]);
-    return React__default.createElement("span", { className: sortIcon }, icon);
+    return React__default.createElement("span", { className: styles.sortIcon }, icon);
 };
 
 export { SortIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"SortIcon.js","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport { sortIcon } from '../HeaderCell.module.css';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={sortIcon}>{icon}</span>;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOA,6BAAC,eAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAOA,uCAAM,SAAS,EAAE,QAAQ,EAAG,EAAA,IAAI,CAAQ;AACjD;;;;"}
+{"version":3,"file":"SortIcon.js","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport styles from '../HeaderCell.module.scss';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={styles.sortIcon}>{icon}</span>;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOA,6BAAC,eAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,OAAOA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,EAAG,IAAI,CAAQ;AACxD;;;;"}

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

@@ -3,7 +3,7 @@
 var React = require('react');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
-var Resizer_module = require('./Resizer.module.css.cjs');
+var Resizer_module = require('./Resizer.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

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

@@ -1 +1 @@
-{"version":3,"file":"Resizer.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { resizer } from './Resizer.module.css';\n\ntype ResizerProps = {\n  /**\n   * Handler called when the column size is reset (resize element is double clicked).\n   */\n  resetSize: () => void;\n\n  /**\n   * Gets the resize handler to modify column size in the TanStack Table instance.\n   */\n  getResizeHandler: (event: any) => void;\n\n  /**\n   * Getter which returns current resize state for the column.\n   */\n  getIsResizing: () => boolean;\n\n  /**\n   * Delta offset (how much the resizer bar has been moved).\n   */\n  deltaOffset: number | null;\n};\n\nconst resizerClassname = buildClassnames([resizer, 'data-grid-column-resizer']);\n\nexport const Resizer = ({\n  resetSize,\n  getResizeHandler,\n  getIsResizing,\n  deltaOffset,\n}: ResizerProps) => {\n  const isResizing = getIsResizing();\n  const resizerStyle = useMemo(() => {\n    if (isResizing) {\n      return { transform: `translateX(${deltaOffset || 0}px)` };\n    }\n\n    return undefined;\n  }, [isResizing, deltaOffset]);\n\n  return (\n    <div\n      data-testid=\"data-grid-column-resizer\"\n      className={resizerClassname}\n      onDoubleClick={resetSize}\n      onMouseDown={getResizeHandler}\n      onTouchStart={getResizeHandler}\n      style={resizerStyle}\n    />\n  );\n};\n"],"names":["buildClassnames","resizer","useMemo","React"],"mappings":";;;;;;;;;;;AA4BA,MAAM,gBAAgB,GAAGA,+BAAe,CAAC,CAACC,sBAAO,EAAE,0BAA0B,CAAC,CAAC;AAExE,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,WAAW,GACE,KAAI;AACjB,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,EAAE;YACd,OAAO,EAAE,SAAS,EAAE,CAAA,WAAA,EAAc,WAAW,IAAI,CAAC,CAAK,GAAA,CAAA,EAAE;AAC1D;AAED,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE7B,QACEC,sBACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,0BAA0B,EACtC,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,YAAY,EACnB,CAAA;AAEN;;;;"}
+{"version":3,"file":"Resizer.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport styles from './Resizer.module.scss';\n\ntype ResizerProps = {\n  /**\n   * Handler called when the column size is reset (resize element is double clicked).\n   */\n  resetSize: () => void;\n\n  /**\n   * Gets the resize handler to modify column size in the TanStack Table instance.\n   */\n  getResizeHandler: (event: any) => void;\n\n  /**\n   * Getter which returns current resize state for the column.\n   */\n  getIsResizing: () => boolean;\n\n  /**\n   * Delta offset (how much the resizer bar has been moved).\n   */\n  deltaOffset: number | null;\n};\n\nconst resizerClassname = buildClassnames([styles.resizer, 'data-grid-column-resizer']);\n\nexport const Resizer = ({\n  resetSize,\n  getResizeHandler,\n  getIsResizing,\n  deltaOffset,\n}: ResizerProps) => {\n  const isResizing = getIsResizing();\n  const resizerStyle = useMemo(() => {\n    if (isResizing) {\n      return { transform: `translateX(${deltaOffset || 0}px)` };\n    }\n\n    return undefined;\n  }, [isResizing, deltaOffset]);\n\n  return (\n    <div\n      data-testid=\"data-grid-column-resizer\"\n      className={resizerClassname}\n      onDoubleClick={resetSize}\n      onMouseDown={getResizeHandler}\n      onTouchStart={getResizeHandler}\n      style={resizerStyle}\n    />\n  );\n};\n"],"names":["buildClassnames","styles","useMemo","React"],"mappings":";;;;;;;;;;;AA4BA,MAAM,gBAAgB,GAAGA,+BAAe,CAAC,CAACC,cAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;AAE/E,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,WAAW,GACE,KAAI;AACjB,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,YAAY,GAAGC,aAAO,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,EAAE;YACd,OAAO,EAAE,SAAS,EAAE,CAAA,WAAA,EAAc,WAAW,IAAI,CAAC,CAAK,GAAA,CAAA,EAAE;AAC1D;AAED,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE7B,QACEC,sBACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,0BAA0B,EACtC,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,YAAY,EACnB,CAAA;AAEN;;;;"}

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

@@ -1,9 +1,9 @@
 import React__default, { useMemo } from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { resizer } from './Resizer.module.css.js';
+import styles from './Resizer.module.scss.js';
 
-const resizerClassname = buildClassnames([resizer, 'data-grid-column-resizer']);
+const resizerClassname = buildClassnames([styles.resizer, 'data-grid-column-resizer']);
 const Resizer = ({ resetSize, getResizeHandler, getIsResizing, deltaOffset, }) => {
     const isResizing = getIsResizing();
     const resizerStyle = useMemo(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Resizer.js","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { resizer } from './Resizer.module.css';\n\ntype ResizerProps = {\n  /**\n   * Handler called when the column size is reset (resize element is double clicked).\n   */\n  resetSize: () => void;\n\n  /**\n   * Gets the resize handler to modify column size in the TanStack Table instance.\n   */\n  getResizeHandler: (event: any) => void;\n\n  /**\n   * Getter which returns current resize state for the column.\n   */\n  getIsResizing: () => boolean;\n\n  /**\n   * Delta offset (how much the resizer bar has been moved).\n   */\n  deltaOffset: number | null;\n};\n\nconst resizerClassname = buildClassnames([resizer, 'data-grid-column-resizer']);\n\nexport const Resizer = ({\n  resetSize,\n  getResizeHandler,\n  getIsResizing,\n  deltaOffset,\n}: ResizerProps) => {\n  const isResizing = getIsResizing();\n  const resizerStyle = useMemo(() => {\n    if (isResizing) {\n      return { transform: `translateX(${deltaOffset || 0}px)` };\n    }\n\n    return undefined;\n  }, [isResizing, deltaOffset]);\n\n  return (\n    <div\n      data-testid=\"data-grid-column-resizer\"\n      className={resizerClassname}\n      onDoubleClick={resetSize}\n      onMouseDown={getResizeHandler}\n      onTouchStart={getResizeHandler}\n      style={resizerStyle}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA4BA,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;AAExE,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,WAAW,GACE,KAAI;AACjB,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,EAAE;YACd,OAAO,EAAE,SAAS,EAAE,CAAA,WAAA,EAAc,WAAW,IAAI,CAAC,CAAK,GAAA,CAAA,EAAE;AAC1D;AAED,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE7B,QACEA,cACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,0BAA0B,EACtC,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,YAAY,EACnB,CAAA;AAEN;;;;"}
+{"version":3,"file":"Resizer.js","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport styles from './Resizer.module.scss';\n\ntype ResizerProps = {\n  /**\n   * Handler called when the column size is reset (resize element is double clicked).\n   */\n  resetSize: () => void;\n\n  /**\n   * Gets the resize handler to modify column size in the TanStack Table instance.\n   */\n  getResizeHandler: (event: any) => void;\n\n  /**\n   * Getter which returns current resize state for the column.\n   */\n  getIsResizing: () => boolean;\n\n  /**\n   * Delta offset (how much the resizer bar has been moved).\n   */\n  deltaOffset: number | null;\n};\n\nconst resizerClassname = buildClassnames([styles.resizer, 'data-grid-column-resizer']);\n\nexport const Resizer = ({\n  resetSize,\n  getResizeHandler,\n  getIsResizing,\n  deltaOffset,\n}: ResizerProps) => {\n  const isResizing = getIsResizing();\n  const resizerStyle = useMemo(() => {\n    if (isResizing) {\n      return { transform: `translateX(${deltaOffset || 0}px)` };\n    }\n\n    return undefined;\n  }, [isResizing, deltaOffset]);\n\n  return (\n    <div\n      data-testid=\"data-grid-column-resizer\"\n      className={resizerClassname}\n      onDoubleClick={resetSize}\n      onMouseDown={getResizeHandler}\n      onTouchStart={getResizeHandler}\n      style={resizerStyle}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA4BA,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;AAE/E,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,WAAW,GACE,KAAI;AACjB,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE;AAClC,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,MAAK;AAChC,QAAA,IAAI,UAAU,EAAE;YACd,OAAO,EAAE,SAAS,EAAE,CAAA,WAAA,EAAc,WAAW,IAAI,CAAC,CAAK,GAAA,CAAA,EAAE;AAC1D;AAED,QAAA,OAAO,SAAS;AAClB,KAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE7B,QACEA,cACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,0BAA0B,EACtC,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,gBAAgB,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,YAAY,EACnB,CAAA;AAEN;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._resizer_cqhc8_1 {\n  position: absolute;\n  right: var(--sizes-none);\n  top: 25%;\n  width: var(--sizes-line);\n  min-height: 50%;\n  cursor: col-resize;\n  user-select: none;\n  background: var(--colors-neutral-grey-dark);\n}\n._resizer_cqhc8_1::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: var(--sizes-none);\n  width: var(--sizes-4);\n  min-height: 400%;\n  z-index: var(--layers-grid-resizer);\n  /* Shift the ::before so it's centered on the bar */\n  transform: translateX(calc(var(--sizes-2) * -1));\n}");
+var styles = {"resizer":"_resizer_cqhc8_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Resizer.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.module.scss"],"sourcesContent":[".resizer {\n  position: absolute;\n  right: var(--sizes-none);\n  top: 25%;\n  width: var(--sizes-line);\n  min-height: 50%;\n\n  cursor: col-resize;\n  user-select: none;\n\n  background: var(--colors-neutral-grey-dark);\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: var(--sizes-none);\n    width: var(--sizes-4);\n    min-height: 400%;\n    z-index: var(--layers-grid-resizer);\n\n    /* Shift the ::before so it's centered on the bar */\n    transform: translateX(calc(var(--sizes-2) * -1));\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+hBAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._resizer_cqhc8_1 {\n  position: absolute;\n  right: var(--sizes-none);\n  top: 25%;\n  width: var(--sizes-line);\n  min-height: 50%;\n  cursor: col-resize;\n  user-select: none;\n  background: var(--colors-neutral-grey-dark);\n}\n._resizer_cqhc8_1::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: var(--sizes-none);\n  width: var(--sizes-4);\n  min-height: 400%;\n  z-index: var(--layers-grid-resizer);\n  /* Shift the ::before so it's centered on the bar */\n  transform: translateX(calc(var(--sizes-2) * -1));\n}");
+var styles = {"resizer":"_resizer_cqhc8_1"};
+
+export { styles as default };
+//# sourceMappingURL=Resizer.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/Resizer/Resizer.module.scss"],"sourcesContent":[".resizer {\n  position: absolute;\n  right: var(--sizes-none);\n  top: 25%;\n  width: var(--sizes-line);\n  min-height: 50%;\n\n  cursor: col-resize;\n  user-select: none;\n\n  background: var(--colors-neutral-grey-dark);\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: var(--sizes-none);\n    width: var(--sizes-4);\n    min-height: 400%;\n    z-index: var(--layers-grid-resizer);\n\n    /* Shift the ::before so it's centered on the bar */\n    transform: translateX(calc(var(--sizes-2) * -1));\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+hBAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA;;;;"}

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 {};