@veeqo/ui 9.8.0 → 9.9.1

package/dist/components/DataGrid/components/GridContainer/Container/Container.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BorderMode } from '../../../types/enums';
+type ContainerProps = {
+    /**
+     * Border mode.
+     */
+    borderMode: BorderMode;
+    /**
+     * Additional container styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Child elements.
+     */
+    children: React.ReactNode;
+};
+/**
+ * A container element, which wraps the grid and applies a border and overflow.
+ */
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +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';
+
+const borderModeClassMap = {
+    full: borderModeFull,
+    vertical: borderModeVertical,
+    none: 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)));
+
+export { Container };
+//# sourceMappingURL=Container.js.map

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

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

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

@@ -0,0 +1,17 @@
+'use strict';
+
+const cssContents = `._container_esq8v_1{border-color:var(--colors-neutral-grey-dark);border-style:solid;overflow-x:auto;overflow-y:hidden;position:relative;width:100%;&._borderModeFull_esq8v_10{border-radius:var(--radius-base);border-width:var(--sizes-line)}&._borderModeVertical_esq8v_15{border-width:var(--sizes-none);border-left-width:var(--sizes-line);border-right-width:var(--sizes-line)}&._borderModeNone_esq8v_21{border-width:var(--sizes-none)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5lci5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9CQUlFLDRDQUE2QyxDQUQ3QyxrQkFBbUIsQ0FHbkIsZUFBZ0IsQ0FDaEIsaUJBQWtCLENBTGxCLGlCQUFrQixDQURsQixVQUFXLENBUVgsMkJBRUUsZ0NBQWlDLENBRGpDLDhCQUVGLENBRUEsK0JBQ0UsOEJBQStCLENBQy9CLG1DQUFvQyxDQUNwQyxvQ0FDRixDQUVBLDJCQUNFLDhCQUNGLENBQ0YiLCJmaWxlIjoiQ29udGFpbmVyLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWRhcmspO1xuXG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6IGhpZGRlbjtcblxuICAmLmJvcmRlck1vZGVGdWxsIHtcbiAgICBib3JkZXItd2lkdGg6IHZhcigtLXNpemVzLWxpbmUpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy1iYXNlKTtcbiAgfVxuXG4gICYuYm9yZGVyTW9kZVZlcnRpY2FsIHtcbiAgICBib3JkZXItd2lkdGg6IHZhcigtLXNpemVzLW5vbmUpO1xuICAgIGJvcmRlci1sZWZ0LXdpZHRoOiB2YXIoLS1zaXplcy1saW5lKTtcbiAgICBib3JkZXItcmlnaHQtd2lkdGg6IHZhcigtLXNpemVzLWxpbmUpO1xuICB9XG5cbiAgJi5ib3JkZXJNb2RlTm9uZSB7XG4gICAgYm9yZGVyLXdpZHRoOiB2YXIoLS1zaXplcy1ub25lKTtcbiAgfVxufVxuIl19 */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const container = '_container_esq8v_1';
+const borderModeFull = '_borderModeFull_esq8v_10';
+const borderModeVertical = '_borderModeVertical_esq8v_15';
+const borderModeNone = '_borderModeNone_esq8v_21';
+
+exports.borderModeFull = borderModeFull;
+exports.borderModeNone = borderModeNone;
+exports.borderModeVertical = borderModeVertical;
+exports.container = container;
+//# sourceMappingURL=Container.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.css"],"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":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,ymCAAymC,CAAC;AAC1mC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,SAAS,GAAG;AACb,MAAC,cAAc,GAAG;AAClB,MAAC,kBAAkB,GAAG;AACtB,MAAC,cAAc,GAAG;;;;;;;"}

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

@@ -0,0 +1,12 @@
+const cssContents = `._container_esq8v_1{border-color:var(--colors-neutral-grey-dark);border-style:solid;overflow-x:auto;overflow-y:hidden;position:relative;width:100%;&._borderModeFull_esq8v_10{border-radius:var(--radius-base);border-width:var(--sizes-line)}&._borderModeVertical_esq8v_15{border-width:var(--sizes-none);border-left-width:var(--sizes-line);border-right-width:var(--sizes-line)}&._borderModeNone_esq8v_21{border-width:var(--sizes-none)}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5lci5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG9CQUlFLDRDQUE2QyxDQUQ3QyxrQkFBbUIsQ0FHbkIsZUFBZ0IsQ0FDaEIsaUJBQWtCLENBTGxCLGlCQUFrQixDQURsQixVQUFXLENBUVgsMkJBRUUsZ0NBQWlDLENBRGpDLDhCQUVGLENBRUEsK0JBQ0UsOEJBQStCLENBQy9CLG1DQUFvQyxDQUNwQyxvQ0FDRixDQUVBLDJCQUNFLDhCQUNGLENBQ0YiLCJmaWxlIjoiQ29udGFpbmVyLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuY29udGFpbmVyIHtcbiAgd2lkdGg6IDEwMCU7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgYm9yZGVyLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWRhcmspO1xuXG4gIG92ZXJmbG93LXg6IGF1dG87XG4gIG92ZXJmbG93LXk6IGhpZGRlbjtcblxuICAmLmJvcmRlck1vZGVGdWxsIHtcbiAgICBib3JkZXItd2lkdGg6IHZhcigtLXNpemVzLWxpbmUpO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLXJhZGl1cy1iYXNlKTtcbiAgfVxuXG4gICYuYm9yZGVyTW9kZVZlcnRpY2FsIHtcbiAgICBib3JkZXItd2lkdGg6IHZhcigtLXNpemVzLW5vbmUpO1xuICAgIGJvcmRlci1sZWZ0LXdpZHRoOiB2YXIoLS1zaXplcy1saW5lKTtcbiAgICBib3JkZXItcmlnaHQtd2lkdGg6IHZhcigtLXNpemVzLWxpbmUpO1xuICB9XG5cbiAgJi5ib3JkZXJNb2RlTm9uZSB7XG4gICAgYm9yZGVyLXdpZHRoOiB2YXIoLS1zaXplcy1ub25lKTtcbiAgfVxufVxuIl19 */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const container = '_container_esq8v_1';
+const borderModeFull = '_borderModeFull_esq8v_10';
+const borderModeVertical = '_borderModeVertical_esq8v_15';
+const borderModeNone = '_borderModeNone_esq8v_21';
+
+export { borderModeFull, borderModeNone, borderModeVertical, container };
+//# sourceMappingURL=Container.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.css.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.css"],"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":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,ymCAAymC,CAAC;AAC1mC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,SAAS,GAAG;AACb,MAAC,cAAc,GAAG;AAClB,MAAC,kBAAkB,GAAG;AACtB,MAAC,cAAc,GAAG;;;;"}

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

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

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

@@ -0,0 +1,30 @@
+'use strict';
+
+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 usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_module.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).
+ */
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
+    return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+        React__default.default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+                tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
+                '--density': index.theme.sizes[density],
+                ...pinnedColumnLayoutStyles,
+            }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+};
+
+exports.GridContainer = GridContainer;
+//# sourceMappingURL=GridContainer.cjs.map

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

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

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

@@ -0,0 +1,49 @@
+import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';
+import { Table } from '@tanstack/react-table';
+import { SizeScale } from 'Theme/modules/sizes';
+import { BorderMode } from '../../types/enums';
+import { AriaRoles } from '../../types';
+type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {
+    /**
+     * Reference to be used for the outer container element.
+     */
+    containerRef?: RefObject<HTMLDivElement>;
+    /**
+     * Reference to be used for the table element.
+     */
+    tableRef?: RefObject<HTMLTableElement>;
+    /**
+     * Border mode.
+     */
+    borderMode: BorderMode;
+    /**
+     * Additional container styles.
+     */
+    containerStyles?: CSSProperties;
+    /**
+     * ARIA roles used in the grid.
+     */
+    ariaRoles: AriaRoles;
+    /**
+     * Whether resizeable columns are enabled or not.
+     */
+    enableResizeableColumns: boolean;
+    /**
+     * Density of the grid.
+     */
+    density: keyof SizeScale;
+    /**
+     * The TanStack Table instance.
+     */
+    table: Table<any>;
+    /**
+     * Child elements (table contents).
+     */
+    children: ReactNode;
+};
+/**
+ * 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).
+ */
+export declare const GridContainer: ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, "aria-label": ariaLabel, }: GridContainerProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+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 { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
+
+const gridContainerClassname = buildClassnames([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).
+ */
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
+    return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+        React__default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+                tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
+                '--density': theme.sizes[density],
+                ...pinnedColumnLayoutStyles,
+            }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+};
+
+export { GridContainer };
+//# sourceMappingURL=GridContainer.js.map

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

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

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

@@ -0,0 +1,11 @@
+'use strict';
+
+const cssContents = `._dataGridStyle_1c5q0_1{border-spacing:var(--sizes-none);box-sizing:border-box;inline-size:100%;position:relative}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWRDb250YWluZXIubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx3QkFHRSxnQ0FBaUMsQ0FDakMscUJBQXNCLENBRXRCLGdCQUFpQixDQUxqQixpQkFNRiIsImZpbGUiOiJHcmlkQ29udGFpbmVyLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZGF0YUdyaWRTdHlsZSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBib3JkZXItc3BhY2luZzogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgaW5saW5lLXNpemU6IDEwMCU7XG59XG4iXX0= */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const dataGridStyle = '_dataGridStyle_1c5q0_1';
+
+exports.dataGridStyle = dataGridStyle;
+//# sourceMappingURL=GridContainer.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.css.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.css"],"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":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,qeAAqe,CAAC;AACte,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,aAAa,GAAG;;;;"}

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

@@ -0,0 +1,9 @@
+const cssContents = `._dataGridStyle_1c5q0_1{border-spacing:var(--sizes-none);box-sizing:border-box;inline-size:100%;position:relative}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWRDb250YWluZXIubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSx3QkFHRSxnQ0FBaUMsQ0FDakMscUJBQXNCLENBRXRCLGdCQUFpQixDQUxqQixpQkFNRiIsImZpbGUiOiJHcmlkQ29udGFpbmVyLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuZGF0YUdyaWRTdHlsZSB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuICBib3JkZXItc3BhY2luZzogdmFyKC0tc2l6ZXMtbm9uZSk7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgaW5saW5lLXNpemU6IDEwMCU7XG59XG4iXX0= */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const dataGridStyle = '_dataGridStyle_1c5q0_1';
+
+export { dataGridStyle };
+//# sourceMappingURL=GridContainer.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.css.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.css"],"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":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,qeAAqe,CAAC;AACte,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,aAAa,GAAG;;;;"}

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

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

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

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var HeaderCell = require('./HeaderCell/HeaderCell.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * Renders the grid header row and header cells.
+ */
+const Header = ({ table }) => {
+    const headers = table.getLeafHeaders();
+    return (React__default.default.createElement("thead", { className: "data-grid-header" },
+        React__default.default.createElement("tr", { className: "data-grid-header-row", "aria-rowindex": 1 }, headers.map((header) => (React__default.default.createElement(HeaderCell.HeaderCell, { table: table, header: header, index: header.index, key: header.id }))))));
+};
+
+exports.Header = Header;
+//# sourceMappingURL=Header.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/DataGrid/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\nimport { HeaderCell } from './HeaderCell/HeaderCell';\n\ntype HeaderProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the grid header row and header cells.\n */\nexport const Header = ({ table }: HeaderProps) => {\n  const headers = table.getLeafHeaders();\n\n  return (\n    <thead className=\"data-grid-header\">\n      <tr className=\"data-grid-header-row\" aria-rowindex={1}>\n        {headers.map((header) => (\n          <HeaderCell table={table} header={header} index={header.index} key={header.id} />\n        ))}\n      </tr>\n    </thead>\n  );\n};\n"],"names":["React","HeaderCell"],"mappings":";;;;;;;;;AAaA;;AAEG;MACU,MAAM,GAAG,CAAC,EAAE,KAAK,EAAe,KAAI;AAC/C,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC,IAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,sBAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,CAAC,EAClD,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,qCAACC,qBAAU,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,EAAI,CAAA,CAClF,CAAC,CACC,CACC;AAEZ;;;;"}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+type HeaderProps = {
+    /**
+     * The TanStack Table instance.
+     */
+    table: Table<any>;
+};
+/**
+ * Renders the grid header row and header cells.
+ */
+export declare const Header: ({ table }: HeaderProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { HeaderCell } from './HeaderCell/HeaderCell.js';
+
+/**
+ * Renders the grid header row and header cells.
+ */
+const Header = ({ table }) => {
+    const headers = table.getLeafHeaders();
+    return (React__default.createElement("thead", { className: "data-grid-header" },
+        React__default.createElement("tr", { className: "data-grid-header-row", "aria-rowindex": 1 }, headers.map((header) => (React__default.createElement(HeaderCell, { table: table, header: header, index: header.index, key: header.id }))))));
+};
+
+export { Header };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/DataGrid/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\nimport { HeaderCell } from './HeaderCell/HeaderCell';\n\ntype HeaderProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the grid header row and header cells.\n */\nexport const Header = ({ table }: HeaderProps) => {\n  const headers = table.getLeafHeaders();\n\n  return (\n    <thead className=\"data-grid-header\">\n      <tr className=\"data-grid-header-row\" aria-rowindex={1}>\n        {headers.map((header) => (\n          <HeaderCell table={table} header={header} index={header.index} key={header.id} />\n        ))}\n      </tr>\n    </thead>\n  );\n};\n"],"names":["React"],"mappings":";;;AAaA;;AAEG;MACU,MAAM,GAAG,CAAC,EAAE,KAAK,EAAe,KAAI;AAC/C,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,kBAAkB,EAAA;QACjCA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,eAAA,EAAgB,CAAC,EAClD,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAClBA,6BAAC,UAAU,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,EAAI,CAAA,CAClF,CAAC,CACC,CACC;AAEZ;;;;"}

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

@@ -0,0 +1,64 @@
+'use strict';
+
+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');
+var Resizer = require('../Resizer/Resizer.cjs');
+var HeaderCell_module = require('./HeaderCell.module.css.cjs');
+var SortIcon = require('./SortIcon/SortIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const getAriaSort = (sortDirection) => {
+    if (!sortDirection) {
+        return undefined;
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+};
+/**
+ * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,
+ * if resizing is enabled.
+ */
+const HeaderCell = ({ table, header, index }) => {
+    const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta;
+    const headerRenderer = header.column.columnDef.header;
+    const sortable = table.options.enableSorting && header.column.getCanSort();
+    const isSorted = header.column.getIsSorted();
+    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.
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
+        column: header.column,
+    });
+    const headerCellClassname = buildClassnames.buildClassnames([
+        HeaderCell_module.headerCell,
+        pinnedCellClassName,
+        'data-grid-header-cell',
+    ]);
+    const HeaderContents = reactTable.flexRender(headerRenderer, header.getContext());
+    const HeaderContentComponent = sortable ? 'button' : 'div';
+    const headerContentClassname = buildClassnames.buildClassnames([
+        sortable ? HeaderCell_module.clickableHeaderContent : HeaderCell_module.headerContent,
+        'data-grid-header-content',
+    ]);
+    const headerContentProps = {
+        justifyContent,
+        textAlign,
+    };
+    return (React__default.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.default.createElement(HeaderContentComponent, { className: headerContentClassname, style: headerContentProps, onClick: sortable ? header.column.getToggleSortingHandler() : undefined },
+            typeof headerRenderer === 'string' ? (React__default.default.createElement("span", { className: HeaderCell_module.headerOverflow }, HeaderContents)) : (HeaderContents),
+            sortable && React__default.default.createElement(SortIcon.SortIcon, { isSorted: isSorted })),
+        resizeable && (React__default.default.createElement(Resizer.Resizer, { getIsResizing: header.column.getIsResizing, getResizeHandler: header.getResizeHandler(), resetSize: header.column.resetSize, deltaOffset: table.options.columnResizeMode === 'onChange'
+                ? null
+                : table.getState().columnSizingInfo.deltaOffset }))));
+};
+
+exports.HeaderCell = HeaderCell;
+//# sourceMappingURL=HeaderCell.cjs.map

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

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

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Header, Table } from '@tanstack/react-table';
+type HeaderCellProps = {
+    /**
+     * The TanStack Table instance.
+     */
+    table: Table<any>;
+    /**
+     * The Header within the TanStack Table instance.
+     */
+    header: Header<any, any>;
+    /**
+     * The index of this header in the grid.
+     */
+    index: number;
+};
+/**
+ * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,
+ * if resizing is enabled.
+ */
+export declare const HeaderCell: ({ table, header, index }: HeaderCellProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+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 { Resizer } from '../Resizer/Resizer.js';
+import { headerCell, clickableHeaderContent, headerContent, headerOverflow } from './HeaderCell.module.css.js';
+import { SortIcon } from './SortIcon/SortIcon.js';
+
+const getAriaSort = (sortDirection) => {
+    if (!sortDirection) {
+        return undefined;
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+};
+/**
+ * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,
+ * if resizing is enabled.
+ */
+const HeaderCell = ({ table, header, index }) => {
+    const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta;
+    const headerRenderer = header.column.columnDef.header;
+    const sortable = table.options.enableSorting && header.column.getCanSort();
+    const isSorted = header.column.getIsSorted();
+    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.
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
+        column: header.column,
+    });
+    const headerCellClassname = buildClassnames([
+        headerCell,
+        pinnedCellClassName,
+        'data-grid-header-cell',
+    ]);
+    const HeaderContents = flexRender(headerRenderer, header.getContext());
+    const HeaderContentComponent = sortable ? 'button' : 'div';
+    const headerContentClassname = buildClassnames([
+        sortable ? clickableHeaderContent : headerContent,
+        'data-grid-header-content',
+    ]);
+    const headerContentProps = {
+        justifyContent,
+        textAlign,
+    };
+    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),
+            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
+                : table.getState().columnSizingInfo.deltaOffset }))));
+};
+
+export { HeaderCell };
+//# sourceMappingURL=HeaderCell.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._headerCell_42pod_1{background-color:#fff;border-bottom:var(--sizes-line) solid var(--colors-neutral-grey-base)}._headerContent_42pod_8{align-items:center;color:var(--text-heading-table-color);display:flex;font-family:var(--text-heading-table-font-family);font-size:var(--text-heading-table-font-size);font-weight:var(--text-heading-table-font-weight);gap:var(--sizes-sm);height:var(--sizes-6);line-height:var(--text-heading-table-line-height);padding:var(--density);white-space:nowrap}._headerOverflow_42pod_24{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._clickableHeaderContent_42pod_30{appearance:none;background-color:transparent;border:var(--sizes-none);border-radius:var(--sizes-sm);cursor:pointer;width:100%;&:focus-visible{box-shadow:var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);outline:var(--sizes-none)}&:hover{._sortIcon_42pod_47{background-color:var(--colors-neutral-grey-light);color:var(--colors-neutral-ink-base)}}}._sortIcon_42pod_47{align-items:center;background-color:#fff;color:var(--colors-neutral-ink-lightest);display:flex;height:var(--sizes-4);justify-content:center;width:var(--sizes-4)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiSGVhZGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsNEJBQUEsUUFBQSxZQUFBLHNCQUFBLFdBQUEsb0JBQUEsa0JBQUEsc0JBQUEsV0FBQSxDQUFBLDRCQUFBLFFBQUEsa0RBQUEsd0JBQUEsMEJBQUEsQ0FBQSw2QkFBQSxRQUFBLG1EQUFBLHVCQUFBLDJCQUFBLENBQUEsQUNBQSxxQkFHRSxxQkFBdUIsQ0FDdkIscUVBQ0YsQ0FFQSx3QkFHRSxrQkFBbUIsQ0FNbkIscUNBQXNDLENBUnRDLFlBQWEsQ0FTYixpREFBa0QsQ0FDbEQsNkNBQThDLENBQzlDLGlEQUFrRCxDQVJsRCxtQkFBb0IsQ0FGcEIscUJBQXNCLENBV3RCLGlEQUFrRCxDQU5sRCxzQkFBdUIsQ0FGdkIsa0JBU0YsQ0FFQSwwQkFDRSxlQUFnQixDQUNoQixzQkFBdUIsQ0FDdkIsa0JBQ0YsQ0FFQSxrQ0FHRSxlQUFnQixDQUNoQiw0QkFBNkIsQ0FHN0Isd0JBQXlCLENBQ3pCLDZCQUE4QixDQUg5QixjQUFlLENBSWYsVUFBVyxDQUVYLGdCQUVFLHVHQUF3RyxDQUR4Ryx5QkFFRixDQUVBLFFBQ0Usb0JBQ0UsaURBQWtELENBQ2xELG9DQUNGLENBQ0YsQ0FDRixDQUVBLG9CQUtFLGtCQUFtQixDQUduQixxQkFBdUIsQ0FDdkIsd0NBQXlDLENBTHpDLFlBQWEsQ0FGYixxQkFBc0IsQ0FJdEIsc0JBQXVCLENBTHZCLG9CQVNGIiwiZmlsZSI6IkhlYWRlckNlbGwubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbCwiLmhlYWRlckNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIGJvcmRlci1ib3R0b206IHZhcigtLXNpemVzLWxpbmUpIHNvbGlkIHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktYmFzZSk7XG59XG5cbi5oZWFkZXJDb250ZW50IHtcbiAgZGlzcGxheTogZmxleDtcbiAgaGVpZ2h0OiB2YXIoLS1zaXplcy02KTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiB2YXIoLS1zaXplcy1zbSk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cbiAgcGFkZGluZzogdmFyKC0tZGVuc2l0eSk7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWhlYWRpbmctdGFibGUtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1saW5lLWhlaWdodCk7XG59XG5cbi5oZWFkZXJPdmVyZmxvdyB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuXG4uY2xpY2thYmxlSGVhZGVyQ29udGVudCB7XG4gIGNvbXBvc2VzOiBoZWFkZXJDb250ZW50O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgYm9yZGVyOiB2YXIoLS1zaXplcy1ub25lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2l6ZXMtc20pO1xuICB3aWR0aDogMTAwJTtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IHZhcigtLXNpemVzLW5vbmUpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIDJweCB2YXIoLS1jb2xvcnMtc2Vjb25kYXJ5LWJsdWUtbGlnaHQpO1xuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgLnNvcnRJY29uIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHQpO1xuICAgICAgY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWluay1iYXNlKTtcbiAgICB9XG4gIH1cbn1cblxuLnNvcnRJY29uIHtcbiAgd2lkdGg6IHZhcigtLXNpemVzLTQpO1xuICBoZWlnaHQ6IHZhcigtLXNpemVzLTQpO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICBjb2xvcjogdmFyKC0tY29sb3JzLW5ldXRyYWwtaW5rLWxpZ2h0ZXN0KTtcbn0iXX0= */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const headerCell = '_headerCell_42pod_1 _baseCell_13swz_1';
+const headerContent = '_headerContent_42pod_8';
+const headerOverflow = '_headerOverflow_42pod_24';
+const clickableHeaderContent = '_clickableHeaderContent_42pod_30 _headerContent_42pod_8';
+const sortIcon = '_sortIcon_42pod_47';
+
+exports.clickableHeaderContent = clickableHeaderContent;
+exports.headerCell = headerCell;
+exports.headerContent = headerContent;
+exports.headerOverflow = headerOverflow;
+exports.sortIcon = sortIcon;
+//# sourceMappingURL=HeaderCell.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\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  composes: 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 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}"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,q+FAAq+F,CAAC;AACt+F,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;AAClB,MAAC,sBAAsB,GAAG;AAC1B,MAAC,QAAQ,GAAG;;;;;;;;"}

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

@@ -0,0 +1,13 @@
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._headerCell_42pod_1{background-color:#fff;border-bottom:var(--sizes-line) solid var(--colors-neutral-grey-base)}._headerContent_42pod_8{align-items:center;color:var(--text-heading-table-color);display:flex;font-family:var(--text-heading-table-font-family);font-size:var(--text-heading-table-font-size);font-weight:var(--text-heading-table-font-weight);gap:var(--sizes-sm);height:var(--sizes-6);line-height:var(--text-heading-table-line-height);padding:var(--density);white-space:nowrap}._headerOverflow_42pod_24{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._clickableHeaderContent_42pod_30{appearance:none;background-color:transparent;border:var(--sizes-none);border-radius:var(--sizes-sm);cursor:pointer;width:100%;&:focus-visible{box-shadow:var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);outline:var(--sizes-none)}&:hover{._sortIcon_42pod_47{background-color:var(--colors-neutral-grey-light);color:var(--colors-neutral-ink-base)}}}._sortIcon_42pod_47{align-items:center;background-color:#fff;color:var(--colors-neutral-ink-lightest);display:flex;height:var(--sizes-4);justify-content:center;width:var(--sizes-4)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiSGVhZGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsNEJBQUEsUUFBQSxZQUFBLHNCQUFBLFdBQUEsb0JBQUEsa0JBQUEsc0JBQUEsV0FBQSxDQUFBLDRCQUFBLFFBQUEsa0RBQUEsd0JBQUEsMEJBQUEsQ0FBQSw2QkFBQSxRQUFBLG1EQUFBLHVCQUFBLDJCQUFBLENBQUEsQUNBQSxxQkFHRSxxQkFBdUIsQ0FDdkIscUVBQ0YsQ0FFQSx3QkFHRSxrQkFBbUIsQ0FNbkIscUNBQXNDLENBUnRDLFlBQWEsQ0FTYixpREFBa0QsQ0FDbEQsNkNBQThDLENBQzlDLGlEQUFrRCxDQVJsRCxtQkFBb0IsQ0FGcEIscUJBQXNCLENBV3RCLGlEQUFrRCxDQU5sRCxzQkFBdUIsQ0FGdkIsa0JBU0YsQ0FFQSwwQkFDRSxlQUFnQixDQUNoQixzQkFBdUIsQ0FDdkIsa0JBQ0YsQ0FFQSxrQ0FHRSxlQUFnQixDQUNoQiw0QkFBNkIsQ0FHN0Isd0JBQXlCLENBQ3pCLDZCQUE4QixDQUg5QixjQUFlLENBSWYsVUFBVyxDQUVYLGdCQUVFLHVHQUF3RyxDQUR4Ryx5QkFFRixDQUVBLFFBQ0Usb0JBQ0UsaURBQWtELENBQ2xELG9DQUNGLENBQ0YsQ0FDRixDQUVBLG9CQUtFLGtCQUFtQixDQUduQixxQkFBdUIsQ0FDdkIsd0NBQXlDLENBTHpDLFlBQWEsQ0FGYixxQkFBc0IsQ0FJdEIsc0JBQXVCLENBTHZCLG9CQVNGIiwiZmlsZSI6IkhlYWRlckNlbGwubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbCwiLmhlYWRlckNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIGJvcmRlci1ib3R0b206IHZhcigtLXNpemVzLWxpbmUpIHNvbGlkIHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktYmFzZSk7XG59XG5cbi5oZWFkZXJDb250ZW50IHtcbiAgZGlzcGxheTogZmxleDtcbiAgaGVpZ2h0OiB2YXIoLS1zaXplcy02KTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiB2YXIoLS1zaXplcy1zbSk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cbiAgcGFkZGluZzogdmFyKC0tZGVuc2l0eSk7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWhlYWRpbmctdGFibGUtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1saW5lLWhlaWdodCk7XG59XG5cbi5oZWFkZXJPdmVyZmxvdyB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuXG4uY2xpY2thYmxlSGVhZGVyQ29udGVudCB7XG4gIGNvbXBvc2VzOiBoZWFkZXJDb250ZW50O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgYm9yZGVyOiB2YXIoLS1zaXplcy1ub25lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2l6ZXMtc20pO1xuICB3aWR0aDogMTAwJTtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IHZhcigtLXNpemVzLW5vbmUpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIDJweCB2YXIoLS1jb2xvcnMtc2Vjb25kYXJ5LWJsdWUtbGlnaHQpO1xuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgLnNvcnRJY29uIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHQpO1xuICAgICAgY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWluay1iYXNlKTtcbiAgICB9XG4gIH1cbn1cblxuLnNvcnRJY29uIHtcbiAgd2lkdGg6IHZhcigtLXNpemVzLTQpO1xuICBoZWlnaHQ6IHZhcigtLXNpemVzLTQpO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICBjb2xvcjogdmFyKC0tY29sb3JzLW5ldXRyYWwtaW5rLWxpZ2h0ZXN0KTtcbn0iXX0= */`;
+const style = document.createElement('style');
+style.innerHTML = cssContents;
+document.head.appendChild(style);
+const headerCell = '_headerCell_42pod_1 _baseCell_13swz_1';
+const headerContent = '_headerContent_42pod_8';
+const headerOverflow = '_headerOverflow_42pod_24';
+const clickableHeaderContent = '_clickableHeaderContent_42pod_30 _headerContent_42pod_8';
+const sortIcon = '_sortIcon_42pod_47';
+
+export { clickableHeaderContent, headerCell, headerContent, headerOverflow, sortIcon };
+//# sourceMappingURL=HeaderCell.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\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  composes: 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 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}"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,q+FAAq+F,CAAC;AACt+F,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;AAClB,MAAC,sBAAsB,GAAG;AAC1B,MAAC,QAAQ,GAAG;;;;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../../../../../theme/index.cjs');
+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');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * Sort icon for a column header.
+ */
+const SortIcon = ({ isSorted }) => {
+    const icon = React.useMemo(() => {
+        if (!isSorted) {
+            return React__default.default.createElement(DoubleArrowIcon.DoubleArrowIcon, { size: 5 });
+        }
+        return isSorted === 'asc' ? (React__default.default.createElement(ArrowUpIcon.ArrowUpIcon, { color: index.theme.colors.neutral.ink.dark, size: 5 })) : (React__default.default.createElement(ArrowDownIcon.ArrowDownIcon, { color: index.theme.colors.neutral.ink.dark, size: 5 }));
+    }, [isSorted]);
+    return React__default.default.createElement("span", { className: HeaderCell_module.sortIcon }, icon);
+};
+
+exports.SortIcon = SortIcon;
+//# sourceMappingURL=SortIcon.cjs.map