@veeqo/ui 9.9.2 → 9.9.5

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

@@ -1,17 +1,17 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { container, borderModeFull, borderModeVertical, borderModeNone } from './Container.module.css.js';
+import styles from './Container.module.scss.js';
 
 const borderModeClassMap = {
-    full: borderModeFull,
-    vertical: borderModeVertical,
-    none: borderModeNone,
+    full: styles.borderModeFull,
+    vertical: styles.borderModeVertical,
+    none: styles.borderModeNone,
 };
 /**
  * A container element, which wraps the grid and applies a border and overflow.
  */
-const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([container, borderModeClassMap[borderMode]]), style: style }, children)));
+const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.container, borderModeClassMap[borderMode]]), style: style }, children)));
 
 export { Container };
 //# sourceMappingURL=Container.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport {\n  container,\n  borderModeFull,\n  borderModeVertical,\n  borderModeNone,\n} from './Container.module.css';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: borderModeFull,\n  vertical: borderModeVertical,\n  none: borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AA6BA,MAAM,kBAAkB,GAAG;AACzB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,IAAI,EAAE,cAAc;CACrB;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EACvE,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC,kBAAkB;IACnC,IAAI,EAAE,MAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}

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,7 +4,7 @@ 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');
 
 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,10 @@ 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';
 
-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

@@ -7,7 +7,7 @@ require('uid/secure');
 var isLastColumn = require('../../../utils/isLastColumn.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.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 }; }

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';\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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"}

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

@@ -5,7 +5,7 @@ import 'uid/secure';
 import { isLastColumn } from '../../../utils/isLastColumn.js';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.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) => {
@@ -31,14 +31,14 @@ const HeaderCell = ({ table, header, index }) => {
         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 +47,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';\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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"}

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_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"};
+
+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  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;;;;"}

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

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

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,3 +1,4 @@
 export { useSortingState } from './useSortingState';
 export { usePinnedColumnStyles } from './usePinnedColumnStyles';
 export { usePinnedColumnLayout } from './usePinnedColumnLayout';
+export { useKeyboardNavigation } from './useKeyboardNavigation';

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var tabbableSelectors = require('../../../utils/tabbableSelectors.cjs');
+
+/**
+ * Finds a target element to be selected within a table cell element. If the table cell
+ * contains focusable children, the first child will be returned, otherwise we'll simply
+ * focus on the table cell.
+ */
+const findTargetElement = (tableCell) => {
+    const validChildTarget = tableCell.querySelector(tabbableSelectors.TABBABLE_SELECTORS);
+    return validChildTarget !== null && validChildTarget !== undefined ? validChildTarget : tableCell;
+};
+/**
+ * Finds the next available cell that can be focused by the user, within the next row.
+ */
+const findNextCell = (nextRow, nextCellIndex) => {
+    if (nextCellIndex >= nextRow.cells.length ||
+        nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')) {
+        // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.
+        return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));
+    }
+    return nextRow.cells[nextCellIndex];
+};
+/**
+ * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.
+ * @param table The table element.
+ * @param event The keyboard event.
+ */
+const handleKeyDown = (table, event) => {
+    var _a;
+    const target = event.target;
+    if (!table)
+        return;
+    const currentCell = target.closest('td, th');
+    if (!currentCell)
+        return;
+    const currentRow = currentCell.parentElement;
+    if (!currentRow)
+        return;
+    const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);
+    const cellIndex = Array.from(currentRow.children).indexOf(currentCell);
+    let nextRowIndex = rowIndex;
+    let nextCellIndex = cellIndex;
+    switch (event.key) {
+        case 'ArrowUp':
+            event.preventDefault();
+            nextRowIndex = Math.max(0, rowIndex - 1);
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);
+            break;
+        case 'ArrowLeft':
+            event.preventDefault();
+            nextCellIndex = Math.max(0, cellIndex - 1);
+            break;
+        case 'ArrowRight':
+            event.preventDefault();
+            nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);
+            break;
+        default:
+            return;
+    }
+    const nextRow = table.rows[nextRowIndex];
+    const nextCell = findNextCell(nextRow, nextCellIndex);
+    if (nextCell) {
+        const nextTarget = findTargetElement(nextCell);
+        nextTarget.setAttribute('tabindex', '0');
+        (_a = nextTarget.scrollIntoView) === null || _a === undefined ? undefined : _a.call(nextTarget, { inline: 'nearest', block: 'nearest' });
+        nextTarget.focus();
+        // Clear the tabindex when the element loses focus
+        nextTarget.addEventListener('blur', () => {
+            if (nextTarget.attributes.getNamedItem('data-first')) {
+                return;
+            }
+            nextTarget.removeAttribute('tabindex');
+        }, { once: true });
+    }
+};
+/**
+ * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled
+ * with the `enableKeyboardNavigation` prop.
+ *
+ * Supports navigating between cells and rows, with the focus directed either towards the cell element, or
+ * the first interactive child if one is present.
+ */
+const useKeyboardNavigation = ({ enableKeyboardNavigation, tableRef, }) => {
+    React.useEffect(() => {
+        if (!tableRef.current || !enableKeyboardNavigation) {
+            return undefined;
+        }
+        const table = tableRef.current;
+        // Find the first column header in the table, and assign it a tabindex.
+        const firstElement = table.querySelector('th');
+        if (!firstElement)
+            return undefined;
+        const firstTarget = findTargetElement(firstElement);
+        firstTarget.setAttribute('tabindex', '0');
+        firstTarget.setAttribute('data-first', '');
+        const handler = (event) => handleKeyDown(table, event);
+        table.addEventListener('keydown', handler);
+        return () => {
+            table.removeEventListener('keydown', handler);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableRef, enableKeyboardNavigation]);
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;
+//# sourceMappingURL=useKeyboardNavigation.cjs.map