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

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

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Row = ({ row, striped, children }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+const Row = ({ row, striped, enableExpanding, children }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined }, children));
 
 exports.Row = Row;
 //# sourceMappingURL=Row.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAE3B,EAAA,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React","buildClassnames"],"mappings":";;;;;;;;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAEC,+BAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

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

@@ -9,10 +9,14 @@ type RowProps = {
      * Whether rows should be striped or not.
      */
     striped: boolean;
+    /**
+     * Whether row expanding is enabled.
+     */
+    enableExpanding: boolean;
     /**
      * Child elements (table cells).
      */
     children: React.ReactNode;
 };
-export declare const Row: ({ row, striped, children }: RowProps) => React.JSX.Element;
+export declare const Row: ({ row, striped, enableExpanding, children }: RowProps) => React.JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import React__default from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 
-const Row = ({ row, striped, children }) => (React__default.createElement("tr", { className: buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2 }, children));
+const Row = ({ row, striped, enableExpanding, children }) => (React__default.createElement("tr", { className: buildClassnames(['data-grid-row', striped ? 'striped' : undefined]), key: row.id, "aria-rowindex": row.index + 2, "aria-level": enableExpanding ? row.depth + 1 : undefined }, children));
 
 export { Row };
 //# sourceMappingURL=Row.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;MAuBa,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAY,MACtDA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAE3B,EAAA,QAAQ,CACN;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../../../src/components/DataGrid/components/Body/Row/Row.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Row as RowItem } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\ntype RowProps = {\n  /**\n   * The row within the TanStack Table instance.\n   */\n  row: RowItem<any>;\n\n  /**\n   * Whether rows should be striped or not.\n   */\n  striped: boolean;\n\n  /**\n   * Whether row expanding is enabled.\n   */\n  enableExpanding: boolean;\n\n  /**\n   * Child elements (table cells).\n   */\n  children: React.ReactNode;\n};\n\nexport const Row = ({ row, striped, enableExpanding, children }: RowProps) => (\n  <tr\n    className={buildClassnames(['data-grid-row', striped ? 'striped' : undefined])}\n    key={row.id}\n    // 0-based index + header row.\n    aria-rowindex={row.index + 2}\n    aria-level={enableExpanding ? row.depth + 1 : undefined}\n  >\n    {children}\n  </tr>\n);\n"],"names":["React"],"mappings":";;;;AA4BO,MAAM,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAY,MACvEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC,EAC9E,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,eAAA,EAEI,GAAG,CAAC,KAAK,GAAG,CAAC,EAChB,YAAA,EAAA,eAAe,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,SAAS,EAAA,EAEtD,QAAQ,CACN;;;;"}

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

@@ -3,7 +3,8 @@
 var React = require('react');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 require('uid/secure');
-var CellContent_module = require('./CellContent.module.css.cjs');
+var CellContent_module = require('./CellContent.module.scss.cjs');
+var ExpandButton = require('./ExpandButton/ExpandButton.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -13,8 +14,10 @@ const cellContentClassname = buildClassnames.buildClassnames([CellContent_module
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children }) => {
-    return (React__default.default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children));
+const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        expandButtonProps && React__default.default.createElement(ExpandButton.ExpandButton, { ...expandButtonProps }),
+        React__default.default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children)));
 };
 
 exports.CellContent = CellContent;

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport { cellContent } from './CellContent.module.css';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["buildClassnames","cellContent","React"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,8BAAW,EAAE,wBAAwB,CAAC,CAAC;AAErF;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<\n    React.CSSProperties,\n    'marginLeft' | 'justifyContent' | 'textAlign' | 'marginLeft'\n  >;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Props for an expand/collapse button, if applicable.\n   */\n  expandButtonProps?: ExpandButtonProps;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children, expandButtonProps }: CellContentProps) => {\n  return (\n    <>\n      {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n      <div\n        data-testid=\"data-grid-cell-content\"\n        className={cellContentClassname}\n        style={contentStyle}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["buildClassnames","styles","React","ExpandButton"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAoB,KAAI;AAC7F,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,sBAAA,CAAA,aAAA,CAACC,yBAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;AAC7D,QAAAD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,EAElB,EAAA,QAAQ,CACL,CACL;AAEP;;;;"}

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

@@ -1,15 +1,20 @@
 import React from 'react';
+import { ExpandButtonProps } from './ExpandButton';
 export interface CellContentProps {
     /**
      * Styles to be applied to the cell content wrapper.
      */
-    contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;
+    contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign' | 'marginLeft'>;
     /**
      * Child elements.
      */
     children?: React.ReactNode;
+    /**
+     * Props for an expand/collapse button, if applicable.
+     */
+    expandButtonProps?: ExpandButtonProps;
 }
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-export declare const CellContent: ({ contentStyle, children }: CellContentProps) => React.JSX.Element;
+export declare const CellContent: ({ contentStyle, children, expandButtonProps }: CellContentProps) => React.JSX.Element;

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

@@ -1,14 +1,17 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { cellContent } from './CellContent.module.css.js';
+import styles from './CellContent.module.scss.js';
+import { ExpandButton } from './ExpandButton/ExpandButton.js';
 
-const cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);
+const cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */
-const CellContent = ({ contentStyle, children }) => {
-    return (React__default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children));
+const CellContent = ({ contentStyle, children, expandButtonProps }) => {
+    return (React__default.createElement(React__default.Fragment, null,
+        expandButtonProps && React__default.createElement(ExpandButton, { ...expandButtonProps }),
+        React__default.createElement("div", { "data-testid": "data-grid-cell-content", className: cellContentClassname, style: contentStyle }, children)));
 };
 
 export { CellContent };

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

@@ -1 +1 @@
-{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport { cellContent } from './CellContent.module.css';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAErF;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\nimport { ExpandButton, ExpandButtonProps } from './ExpandButton';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<\n    React.CSSProperties,\n    'marginLeft' | 'justifyContent' | 'textAlign' | 'marginLeft'\n  >;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Props for an expand/collapse button, if applicable.\n   */\n  expandButtonProps?: ExpandButtonProps;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children, expandButtonProps }: CellContentProps) => {\n  return (\n    <>\n      {expandButtonProps && <ExpandButton {...expandButtonProps} />}\n      <div\n        data-testid=\"data-grid-cell-content\"\n        className={cellContentClassname}\n        style={contentStyle}\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AA2BA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAoB,KAAI;AAC7F,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACG,QAAA,iBAAiB,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAA,GAAK,iBAAiB,EAAI,CAAA;AAC7D,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,wBAAwB,EACpC,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,YAAY,EAElB,EAAA,QAAQ,CACL,CACL;AAEP;;;;"}

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

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

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

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

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

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

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

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

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var DownArrowIcon = require('../../../../../tempIcons/DownArrowIcon.cjs');
+var RightArrowIcon = require('../../../../../tempIcons/RightArrowIcon.cjs');
+require('../../../../../theme/modules/sizes.cjs');
+var Button = require('../../../../Button/Button.cjs');
+var ExpandButton_module = require('./ExpandButton.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ExpandButton = ({ isExpanded, onToggle, containerStyle }) => {
+    return (React__default.default.createElement("div", { className: ExpandButton_module.expandButtonContainer, style: containerStyle },
+        React__default.default.createElement(Button.Button, { size: "sm", variant: "flat", className: ExpandButton_module.expandButton, iconSlot: isExpanded ? React__default.default.createElement(DownArrowIcon.DownArrowIcon, null) : React__default.default.createElement(RightArrowIcon.RightArrowIcon, null), onClick: onToggle, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', "aria-expanded": isExpanded })));
+};
+
+exports.ExpandButton = ExpandButton;
+//# sourceMappingURL=ExpandButton.cjs.map

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.cjs","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DownArrowIcon, RightArrowIcon } from '../../../../../tempIcons';\nimport { Button } from '../../../../Button';\n\nimport styles from './ExpandButton.module.scss';\n\ntype ExpandButtonProps = {\n  isExpanded: boolean;\n  onToggle: () => void;\n  containerStyle?: React.CSSProperties;\n};\n\nconst ExpandButton = ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => {\n  return (\n    <div className={styles.expandButtonContainer} style={containerStyle}>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        className={styles.expandButton}\n        iconSlot={isExpanded ? <DownArrowIcon /> : <RightArrowIcon />}\n        onClick={onToggle}\n        aria-label={isExpanded ? 'Collapse row' : 'Expand row'}\n        aria-expanded={isExpanded}\n      />\n    </div>\n  );\n};\n\nexport { ExpandButton };\nexport type { ExpandButtonProps };\n"],"names":["React","styles","Button","DownArrowIcon","RightArrowIcon"],"mappings":";;;;;;;;;;;;;AAaM,MAAA,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAqB,KAAI;IACnF,QACEA,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,mBAAM,CAAC,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAA;QACjED,sBAAC,CAAA,aAAA,CAAAE,aAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,SAAS,EAAED,mBAAM,CAAC,YAAY,EAC9B,QAAQ,EAAE,UAAU,GAAGD,sBAAA,CAAA,aAAA,CAACG,2BAAa,EAAA,IAAA,CAAG,GAAGH,qCAACI,6BAAc,EAAA,IAAA,CAAG,EAC7D,OAAO,EAAE,QAAQ,EAAA,YAAA,EACL,UAAU,GAAG,cAAc,GAAG,YAAY,mBACvC,UAAU,EAAA,CACzB,CACE;AAEV;;;;"}

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type ExpandButtonProps = {
+    isExpanded: boolean;
+    onToggle: () => void;
+    containerStyle?: React.CSSProperties;
+};
+declare const ExpandButton: ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => React.JSX.Element;
+export { ExpandButton };
+export type { ExpandButtonProps };

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.js

@@ -0,0 +1,14 @@
+import React__default from 'react';
+import { DownArrowIcon } from '../../../../../tempIcons/DownArrowIcon.js';
+import { RightArrowIcon } from '../../../../../tempIcons/RightArrowIcon.js';
+import '../../../../../theme/modules/sizes.js';
+import { Button } from '../../../../Button/Button.js';
+import styles from './ExpandButton.module.scss.js';
+
+const ExpandButton = ({ isExpanded, onToggle, containerStyle }) => {
+    return (React__default.createElement("div", { className: styles.expandButtonContainer, style: containerStyle },
+        React__default.createElement(Button, { size: "sm", variant: "flat", className: styles.expandButton, iconSlot: isExpanded ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(RightArrowIcon, null), onClick: onToggle, "aria-label": isExpanded ? 'Collapse row' : 'Expand row', "aria-expanded": isExpanded })));
+};
+
+export { ExpandButton };
+//# sourceMappingURL=ExpandButton.js.map

package/dist/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.js","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DownArrowIcon, RightArrowIcon } from '../../../../../tempIcons';\nimport { Button } from '../../../../Button';\n\nimport styles from './ExpandButton.module.scss';\n\ntype ExpandButtonProps = {\n  isExpanded: boolean;\n  onToggle: () => void;\n  containerStyle?: React.CSSProperties;\n};\n\nconst ExpandButton = ({ isExpanded, onToggle, containerStyle }: ExpandButtonProps) => {\n  return (\n    <div className={styles.expandButtonContainer} style={containerStyle}>\n      <Button\n        size=\"sm\"\n        variant=\"flat\"\n        className={styles.expandButton}\n        iconSlot={isExpanded ? <DownArrowIcon /> : <RightArrowIcon />}\n        onClick={onToggle}\n        aria-label={isExpanded ? 'Collapse row' : 'Expand row'}\n        aria-expanded={isExpanded}\n      />\n    </div>\n  );\n};\n\nexport { ExpandButton };\nexport type { ExpandButtonProps };\n"],"names":["React"],"mappings":";;;;;;;AAaM,MAAA,YAAY,GAAG,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAqB,KAAI;IACnF,QACEA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAA;QACjEA,cAAC,CAAA,aAAA,CAAA,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,QAAQ,EAAE,UAAU,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,6BAAC,cAAc,EAAA,IAAA,CAAG,EAC7D,OAAO,EAAE,QAAQ,EAAA,YAAA,EACL,UAAU,GAAG,cAAc,GAAG,YAAY,mBACvC,UAAU,EAAA,CACzB,CACE;AAEV;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._expandButton_153ka_1[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n._expandButtonContainer_153ka_7 {\n  display: flex;\n  height: 100%;\n  position: absolute;\n  top: var(--sizes-none);\n  align-items: center;\n  justify-content: flex-end;\n}");
+var styles = {"expandButton":"_expandButton_153ka_1","expandButtonContainer":"_expandButtonContainer_153ka_7"};
+
+module.exports = styles;
+//# sourceMappingURL=ExpandButton.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss"],"sourcesContent":[".expandButton[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n.expandButtonContainer {\n  display: flex;\n  height: 100%;\n\n  position: absolute;\n  top: var(--sizes-none);\n\n  align-items: center;\n  justify-content: flex-end;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,mTAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._expandButton_153ka_1[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n._expandButtonContainer_153ka_7 {\n  display: flex;\n  height: 100%;\n  position: absolute;\n  top: var(--sizes-none);\n  align-items: center;\n  justify-content: flex-end;\n}");
+var styles = {"expandButton":"_expandButton_153ka_1","expandButtonContainer":"_expandButtonContainer_153ka_7"};
+
+export { styles as default };
+//# sourceMappingURL=ExpandButton.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/CellContent/ExpandButton/ExpandButton.module.scss"],"sourcesContent":[".expandButton[aria-expanded] {\n  padding: var(--sizes-none);\n  width: var(--sizes-6);\n  height: var(--sizes-6);\n}\n\n.expandButtonContainer {\n  display: flex;\n  height: 100%;\n\n  position: absolute;\n  top: var(--sizes-none);\n\n  align-items: center;\n  justify-content: flex-end;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,mTAAA;AACA,aAAA,CAAA,cAAA,CAAA,uBAAA,CAAA,uBAAA,CAAA,gCAAA;;;;"}

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

@@ -0,0 +1,2 @@
+export { ExpandButton } from './ExpandButton';
+export type { ExpandButtonProps } from './ExpandButton';

package/dist/components/DataGrid/components/Columns/Columns.cjs

@@ -5,8 +5,6 @@ require('../../../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 var useResizeObserver = require('../../../../hooks/useResizeObserver.cjs');
 require('lodash.throttle');
-var isLastColumn = require('../../utils/isLastColumn.cjs');
-require('@tanstack/react-table');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -21,17 +19,20 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  */
 const Columns = ({ table }) => {
     const headers = table.getLeafHeaders();
-    // Setup state and hook to observe the last column in the table. If the last column is larger than its
-    // default size, we allow it to render with `width: auto;` to ensure the table fills the container.
-    // If the last column is smaller than its default size, the table should start to 'overflow' its parent,
-    // so we switch to using a fixed width on the column instead.
+    /**
+     * Setup state and hook to observe the last column in the table. If the last column is larger than its
+     * default size, we allow it to render with `width: auto;` to ensure the table fills the container.
+     *
+     * If the last column is smaller than its default size, the table should start to 'overflow' its parent,
+     * so we switch to using a fixed width on the column instead.
+     */
     const lastColumnRef = React.useRef(null);
     const [lastColumnAuto, setLastColumnAuto] = React.useState(true);
     useResizeObserver.useResizeObserver({
         targetRef: lastColumnRef,
         resizeHandler: ({ width }) => {
             const lastHeader = headers[headers.length - 1];
-            if (width <= lastHeader.column.columnDef.size) {
+            if (width <= lastHeader.column.getSize()) {
                 setLastColumnAuto(false);
             }
             else {
@@ -42,7 +43,7 @@ const Columns = ({ table }) => {
     });
     // Memoized columns.
     const columns = React.useMemo(() => (React__default.default.createElement("colgroup", null, headers.map((header) => {
-        const lastColumn = isLastColumn.isLastColumn(table, header.column);
+        const lastColumn = header.column.getIsLastColumn();
         const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
         return (React__default.default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
     }))), 

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  // Setup state and hook to observe the last column in the table. If the last column is larger than its\n  // default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n  // If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n  // so we switch to using a fixed width on the column instead.\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n\n      if (width <= lastHeader.column.columnDef.size!) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = isLastColumn(table, header.column);\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["useRef","useState","useResizeObserver","useMemo","React","isLastColumn"],"mappings":";;;;;;;;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;;;;;AAMtC,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;AAC1D,IAAAC,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK,EAAE;gBAC9C,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAGC,aAAO,CACrB,OACEC,sBACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAGC,yBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACED,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
+{"version":3,"file":"Columns.cjs","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  /**\n   * Setup state and hook to observe the last column in the table. If the last column is larger than its\n   * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n   *\n   * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n   * so we switch to using a fixed width on the column instead.\n   */\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n      if (width <= lastHeader.column.getSize()) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = header.column.getIsLastColumn();\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["useRef","useState","useResizeObserver","useMemo","React"],"mappings":";;;;;;;;;;;;AAYA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;AAC1D,IAAAC,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAGC,aAAO,CACrB,OACEC,sBACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;QAClD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}

package/dist/components/DataGrid/components/Columns/Columns.js

@@ -3,8 +3,6 @@ import '../../../../hooks/useFocusVisible.js';
 import 'uid/secure';
 import { useResizeObserver } from '../../../../hooks/useResizeObserver.js';
 import 'lodash.throttle';
-import { isLastColumn } from '../../utils/isLastColumn.js';
-import '@tanstack/react-table';
 
 /**
  * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including
@@ -15,17 +13,20 @@ import '@tanstack/react-table';
  */
 const Columns = ({ table }) => {
     const headers = table.getLeafHeaders();
-    // Setup state and hook to observe the last column in the table. If the last column is larger than its
-    // default size, we allow it to render with `width: auto;` to ensure the table fills the container.
-    // If the last column is smaller than its default size, the table should start to 'overflow' its parent,
-    // so we switch to using a fixed width on the column instead.
+    /**
+     * Setup state and hook to observe the last column in the table. If the last column is larger than its
+     * default size, we allow it to render with `width: auto;` to ensure the table fills the container.
+     *
+     * If the last column is smaller than its default size, the table should start to 'overflow' its parent,
+     * so we switch to using a fixed width on the column instead.
+     */
     const lastColumnRef = useRef(null);
     const [lastColumnAuto, setLastColumnAuto] = useState(true);
     useResizeObserver({
         targetRef: lastColumnRef,
         resizeHandler: ({ width }) => {
             const lastHeader = headers[headers.length - 1];
-            if (width <= lastHeader.column.columnDef.size) {
+            if (width <= lastHeader.column.getSize()) {
                 setLastColumnAuto(false);
             }
             else {
@@ -36,7 +37,7 @@ const Columns = ({ table }) => {
     });
     // Memoized columns.
     const columns = useMemo(() => (React__default.createElement("colgroup", null, headers.map((header) => {
-        const lastColumn = isLastColumn(table, header.column);
+        const lastColumn = header.column.getIsLastColumn();
         const columnWidth = lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;
         return (React__default.createElement("col", { ref: lastColumn ? lastColumnRef : undefined, key: header.column.id, style: { width: columnWidth, minWidth: header.column.columnDef.minSize } }));
     }))), 

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\nimport { isLastColumn } from '../../utils';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  // Setup state and hook to observe the last column in the table. If the last column is larger than its\n  // default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n  // If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n  // so we switch to using a fixed width on the column instead.\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n\n      if (width <= lastHeader.column.columnDef.size!) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = isLastColumn(table, header.column);\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;;;;;AAMtC,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC1D,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK,EAAE;gBAC9C,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,OACEA,cACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC;QACrD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}
+{"version":3,"file":"Columns.js","sources":["../../../../../src/components/DataGrid/components/Columns/Columns.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { useResizeObserver } from '../../../../hooks';\n\ntype ColumnsProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n};\n\n/**\n * Renders the colgroup and col's for the table, responsible for controlling the width of columns within the table, including\n * handling situations where overflow may be necessary while resizing.\n *\n * Separated from the Header component to allow for better performance, since we can reliably memoize col's and limit updates only\n * to when the table sizing state changes.\n */\nexport const Columns = ({ table }: ColumnsProps) => {\n  const headers = table.getLeafHeaders();\n\n  /**\n   * Setup state and hook to observe the last column in the table. If the last column is larger than its\n   * default size, we allow it to render with `width: auto;` to ensure the table fills the container.\n   *\n   * If the last column is smaller than its default size, the table should start to 'overflow' its parent,\n   * so we switch to using a fixed width on the column instead.\n   */\n  const lastColumnRef = useRef<HTMLTableColElement>(null);\n  const [lastColumnAuto, setLastColumnAuto] = useState(true);\n  useResizeObserver({\n    targetRef: lastColumnRef,\n    resizeHandler: ({ width }) => {\n      const lastHeader = headers[headers.length - 1];\n      if (width <= lastHeader.column.getSize()) {\n        setLastColumnAuto(false);\n      } else {\n        setLastColumnAuto(true);\n      }\n    },\n    throttleMs: 10,\n  });\n\n  // Memoized columns.\n  const columns = useMemo(\n    () => (\n      <colgroup>\n        {headers.map((header) => {\n          const lastColumn = header.column.getIsLastColumn();\n          const columnWidth =\n            lastColumn && lastColumnAuto ? 'auto' : `${header.column.getSize()}px`;\n\n          return (\n            <col\n              ref={lastColumn ? lastColumnRef : undefined}\n              key={header.column.id}\n              style={{ width: columnWidth, minWidth: header.column.columnDef.minSize }}\n            />\n          );\n        })}\n      </colgroup>\n    ),\n    // Dependencies here are as recommended by TanStack docs (https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [table.getState().columnSizingInfo, table.getState().columnSizing, lastColumnAuto, headers],\n  );\n\n  return columns;\n};\n"],"names":["React"],"mappings":";;;;;;AAYA;;;;;;AAMG;MACU,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,KAAI;AACjD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,cAAc,EAAE;AAEtC;;;;;;AAMG;AACH,IAAA,MAAM,aAAa,GAAG,MAAM,CAAsB,IAAI,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AAC1D,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,KAAI;YAC3B,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9C,IAAI,KAAK,IAAI,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE;gBACxC,iBAAiB,CAAC,KAAK,CAAC;AACzB;AAAM,iBAAA;gBACL,iBAAiB,CAAC,IAAI,CAAC;AACxB;SACF;AACD,QAAA,UAAU,EAAE,EAAE;AACf,KAAA,CAAC;;AAGF,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,OACEA,cACG,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;QAClD,MAAM,WAAW,GACf,UAAU,IAAI,cAAc,GAAG,MAAM,GAAG,CAAA,EAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI;AAExE,QAAA,QACEA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,GAAG,aAAa,GAAG,SAAS,EAC3C,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,EACrB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,EAAA,CACxE;KAEL,CAAC,CACO,CACZ;;;AAGD,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,OAAO,CAAC,CAC5F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs

@@ -6,7 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var CellContent = require('../../CellContent/CellContent.cjs');
-var FooterCell_module = require('./FooterCell.module.css.cjs');
+var FooterCell_module = require('./FooterCell.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","footerCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;QAC1CC,4BAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    styles.footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;AAC1C,QAAAC,iBAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js

@@ -4,7 +4,7 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
 import { CellContent } from '../../CellContent/CellContent.js';
-import { footerCell } from './FooterCell.module.css.js';
+import styles from './FooterCell.module.scss.js';
 
 /**
  * Renders a footer cell element, and its content, for a given column.
@@ -15,7 +15,7 @@ const FooterCell = ({ header, ariaRoles }) => {
         column: header.column,
     });
     const footerCellClassname = buildClassnames([
-        footerCell,
+        styles.footerCell,
         pinnedCellClassName,
         'data-grid-footer-cell',
     ]);

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;QAC1C,UAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    styles.footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;AAC1C,QAAA,MAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_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_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_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_1v1wo_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_1v1wo_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._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+
+module.exports = styles;
+//# sourceMappingURL=FooterCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_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_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_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_1v1wo_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_1v1wo_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._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+
+export { styles as default };
+//# sourceMappingURL=FooterCell.module.scss.js.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","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":["borderModeFull","borderModeVertical","borderModeNone","React","buildClassnames","container"],"mappings":";;;;;;;;;;;AA6BA,MAAM,kBAAkB,GAAG;AACzB,IAAA,IAAI,EAAEA,+BAAc;AACpB,IAAA,QAAQ,EAAEC,mCAAkB;AAC5B,IAAA,IAAI,EAAEC,+BAAc;CACrB;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,0BAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EACvE,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.cjs","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":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAEA,gBAAM,CAAC,cAAc;IAC3B,QAAQ,EAAEA,gBAAM,CAAC,kBAAkB;IACnC,IAAI,EAAEA,gBAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,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.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;;;;"}