@veeqo/ui 14.9.0 → 14.10.0-beta-1

package/dist/components/DataTable/components/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sources":["../../../../src/components/DataTable/components/Row.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface RowProps {\n  accentColor?: string;\n  selected?: boolean;\n  expanded?: boolean;\n  disabled?: boolean;\n}\n\nexport const Row = styled.tr<RowProps>`\n  display: contents;\n\n  ${({ selected }) =>\n    selected &&\n    `\n    &&&& > td {\n      background-color: ${theme.colors.brand.blue.lightest};\n    }\n  `};\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    &> *:first-child {\n      position: relative;\n    }\n\n    & > *:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;AAUO,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAGxB,CAAC,EAAE,QAAQ,EAAE,KACb,QAAQ;AACR,IAAA;;AAEsB,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAEvD,EAAA,CAAA,CAAA,CAAA,EAEC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;;;;;;;;;;;;0BAYsB,WAAW,CAAA;;AAElC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"Row.js","sources":["../../../../src/components/DataTable/components/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  accentColor?: string;\n  selected?: boolean;\n  expanded?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const Row = React.forwardRef<HTMLTableRowElement, RowProps>(\n  // expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.\n  // They are used by parent components for state tracking.\n  ({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (\n    <tr\n      ref={ref}\n      className={buildClassnames([\n        styles.row,\n        selected && styles.rowSelected,\n        accentColor && styles.rowAccentColor,\n        className,\n      ])}\n      style={{\n        ...assignCssVars({\n          rowAccentColor: accentColor,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </tr>\n  ),\n);\n\nRow.displayName = 'Row';\n"],"names":["React"],"mappings":";;;;;;AAaO,MAAM,GAAG,GAAGA,cAAK,CAAC,UAAU;AACjC;AACA;AACA,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC5GA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC;AACzB,QAAA,MAAM,CAAC,GAAG;QACV,QAAQ,IAAI,MAAM,CAAC,WAAW;QAC9B,WAAW,IAAI,MAAM,CAAC,cAAc;QACpC,SAAS;KACV,CAAC,EACF,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,cAAc,EAAE,WAAW;SAC5B,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}

package/dist/components/DataTable/components/ScrollContainer.cjs

@@ -1,12 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const ScrollContainer = styled__default.default.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.scrollContainer, className]), ...rest }, children)));
+ScrollContainer.displayName = 'ScrollContainer';
 
 exports.ScrollContainer = ScrollContainer;
 //# sourceMappingURL=ScrollContainer.cjs.map

package/dist/components/DataTable/components/ScrollContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContainer.cjs","sources":["../../../../src/components/DataTable/components/ScrollContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const ScrollContainer = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,eAAe,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"ScrollContainer.cjs","sources":["../../../../src/components/DataTable/components/ScrollContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface ScrollContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const ScrollContainer = React.forwardRef<HTMLDivElement, ScrollContainerProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.scrollContainer, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nScrollContainer.displayName = 'ScrollContainer';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;MASa,eAAe,GAAGA,sBAAK,CAAC,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IACrF,QAAQ,CACL,CACP;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DataTable/components/ScrollContainer.d.ts

@@ -1 +1,6 @@
-export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export interface ScrollContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ScrollContainer: React.ForwardRefExoticComponent<ScrollContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/ScrollContainer.js

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-const ScrollContainer = styled.div.withConfig({ displayName: "vui--ScrollContainer", componentId: "vui--1bx96p0" }) `position:relative;width:100%;overflow-x:auto;overflow-y:hidden;`;
+const ScrollContainer = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.scrollContainer, className]), ...rest }, children)));
+ScrollContainer.displayName = 'ScrollContainer';
 
 export { ScrollContainer };
 //# sourceMappingURL=ScrollContainer.js.map

package/dist/components/DataTable/components/ScrollContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollContainer.js","sources":["../../../../src/components/DataTable/components/ScrollContainer.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const ScrollContainer = styled.div`\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n`;\n"],"names":[],"mappings":";;MAEa,eAAe,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"ScrollContainer.js","sources":["../../../../src/components/DataTable/components/ScrollContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface ScrollContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const ScrollContainer = React.forwardRef<HTMLDivElement, ScrollContainerProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.scrollContainer, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nScrollContainer.displayName = 'ScrollContainer';\n"],"names":["React"],"mappings":";;;;;MASa,eAAe,GAAGA,cAAK,CAAC,UAAU,CAC7C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IACrF,QAAQ,CACL,CACP;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DataTable/components/TableGrid.cjs

@@ -1,14 +1,22 @@
 'use strict';
 
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var useTableId = require('../hooks/useTableId.cjs');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const defaultDensity = 'base';
-const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = React__default.default.forwardRef(({ css, className, children, style, ...rest }, ref) => {
+    const tableId = useTableId.useTableId();
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        css && (React__default.default.createElement("style", null, `[data-table-id="${tableId}"] { ${css} }`)),
+        React__default.default.createElement("table", { ref: ref, "data-table-id": tableId, className: buildClassnames.buildClassnames([DataTable_module.tableGrid, className]), style: style, ...rest }, children)));
+});
+TableGrid.displayName = 'TableGrid';
 
 exports.TableGrid = TableGrid;
 //# sourceMappingURL=TableGrid.cjs.map

package/dist/components/DataTable/components/TableGrid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMtB,MAAM,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtBC,WAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}
+{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { useTableId } from '../hooks/useTableId';\nimport styles from './DataTable.module.scss';\n\nexport interface TableGridProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Dynamic CSS string from generateTableCss. Rendered in a scoped <style> tag.\n   * Requires native CSS nesting support (Chrome 120+, Firefox 117+, Safari 17.2+).\n   * @internal Only accepts output from generateTableCss. Do not pass user-controlled strings.\n   */\n  css: string;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const TableGrid = React.forwardRef<HTMLTableElement, TableGridProps>(\n  ({ css, className, children, style, ...rest }, ref) => {\n    const tableId = useTableId();\n\n    return (\n      <>\n        {/* SAFETY: css must only contain internally-generated CSS from generateTableCss.\n            Do not pass user-controlled strings.\n            NOTE: Relies on CSS nesting (Chrome 120+, Firefox 117+, Safari 17.2+). */}\n        {css && (\n          <style>{`[data-table-id=\"${tableId}\"] { ${css} }`}</style>\n        )}\n        <table\n          ref={ref}\n          data-table-id={tableId}\n          className={buildClassnames([styles.tableGrid, className])}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </table>\n      </>\n    );\n  },\n);\n\nTableGrid.displayName = 'TableGrid';\n"],"names":["React","useTableId","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAgBO,MAAM,SAAS,GAAGA,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACpD,IAAA,MAAM,OAAO,GAAGC,qBAAU,EAAE;AAE5B,IAAA,QACED,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QAIG,GAAG,KACFA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,CAAA,gBAAA,EAAmB,OAAO,CAAA,KAAA,EAAQ,GAAG,CAAA,EAAA,CAAI,CAAS,CAC3D;AACD,QAAAA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EAAA,eAAA,EACO,OAAO,EACtB,SAAS,EAAEE,+BAAe,CAAC,CAACC,gBAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EACzD,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAAA,EAEP,QAAQ,CACH,CACP;AAEP,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/DataTable/components/TableGrid.d.ts

@@ -1,4 +1,12 @@
-export interface TableGridProps {
+import React from 'react';
+export interface TableGridProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Dynamic CSS string from generateTableCss. Rendered in a scoped <style> tag.
+     * Requires native CSS nesting support (Chrome 120+, Firefox 117+, Safari 17.2+).
+     * @internal Only accepts output from generateTableCss. Do not pass user-controlled strings.
+     */
     css: string;
+    children?: React.ReactNode;
+    className?: string;
 }
-export declare const TableGrid: import("styled-components").StyledComponent<"table", any, TableGridProps, never>;
+export declare const TableGrid: React.ForwardRefExoticComponent<TableGridProps & React.RefAttributes<HTMLTableElement>>;

package/dist/components/DataTable/components/TableGrid.js

@@ -1,8 +1,16 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { useTableId } from '../hooks/useTableId.js';
+import styles from './DataTable.module.scss.js';
 
-const defaultDensity = 'base';
-const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+const TableGrid = React__default.forwardRef(({ css, className, children, style, ...rest }, ref) => {
+    const tableId = useTableId();
+    return (React__default.createElement(React__default.Fragment, null,
+        css && (React__default.createElement("style", null, `[data-table-id="${tableId}"] { ${css} }`)),
+        React__default.createElement("table", { ref: ref, "data-table-id": tableId, className: buildClassnames([styles.tableGrid, className]), style: style, ...rest }, children)));
+});
+TableGrid.displayName = 'TableGrid';
 
 export { TableGrid };
 //# sourceMappingURL=TableGrid.js.map

package/dist/components/DataTable/components/TableGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst defaultDensity = 'base';\n\nexport interface TableGridProps {\n  css: string;\n}\n\nexport const TableGrid = styled.table<TableGridProps>`\n  min-width: 100%;\n  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: ${theme.sizes[defaultDensity]};\n\n  && tr:hover td {\n    background-color: #f2f8fc;\n  }\n\n  ${({ css }) => css}/* CSS styles generate by hooks */\n`;\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMtB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtB,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}
+{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { useTableId } from '../hooks/useTableId';\nimport styles from './DataTable.module.scss';\n\nexport interface TableGridProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Dynamic CSS string from generateTableCss. Rendered in a scoped <style> tag.\n   * Requires native CSS nesting support (Chrome 120+, Firefox 117+, Safari 17.2+).\n   * @internal Only accepts output from generateTableCss. Do not pass user-controlled strings.\n   */\n  css: string;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const TableGrid = React.forwardRef<HTMLTableElement, TableGridProps>(\n  ({ css, className, children, style, ...rest }, ref) => {\n    const tableId = useTableId();\n\n    return (\n      <>\n        {/* SAFETY: css must only contain internally-generated CSS from generateTableCss.\n            Do not pass user-controlled strings.\n            NOTE: Relies on CSS nesting (Chrome 120+, Firefox 117+, Safari 17.2+). */}\n        {css && (\n          <style>{`[data-table-id=\"${tableId}\"] { ${css} }`}</style>\n        )}\n        <table\n          ref={ref}\n          data-table-id={tableId}\n          className={buildClassnames([styles.tableGrid, className])}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </table>\n      </>\n    );\n  },\n);\n\nTableGrid.displayName = 'TableGrid';\n"],"names":["React"],"mappings":";;;;;;AAgBO,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACpD,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAE5B,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QAIG,GAAG,KACFA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,CAAA,gBAAA,EAAmB,OAAO,CAAA,KAAA,EAAQ,GAAG,CAAA,EAAA,CAAI,CAAS,CAC3D;AACD,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EAAA,eAAA,EACO,OAAO,EACtB,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EACzD,KAAK,EAAE,KAAK,EAAA,GACR,IAAI,EAAA,EAEP,QAAQ,CACH,CACP;AAEP,CAAC;AAGH,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/DataTable/components/Truncate.cjs

@@ -1,12 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.truncate, className]), ...rest }, children)));
+Truncate.displayName = 'Truncate';
 
 exports.Truncate = Truncate;
 //# sourceMappingURL=Truncate.cjs.map

package/dist/components/DataTable/components/Truncate.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.cjs","sources":["../../../../src/components/DataTable/components/Truncate.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Truncate = styled.div`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,QAAQ,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"Truncate.cjs","sources":["../../../../src/components/DataTable/components/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface TruncateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const Truncate = React.forwardRef<HTMLDivElement, TruncateProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.truncate, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nTruncate.displayName = 'Truncate';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;MASa,QAAQ,GAAGA,sBAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC9E,QAAQ,CACL,CACP;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/DataTable/components/Truncate.d.ts

@@ -1 +1,6 @@
-export declare const Truncate: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export interface TruncateProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Truncate: React.ForwardRefExoticComponent<TruncateProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/Truncate.js

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+const Truncate = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.truncate, className]), ...rest }, children)));
+Truncate.displayName = 'Truncate';
 
 export { Truncate };
 //# sourceMappingURL=Truncate.js.map

package/dist/components/DataTable/components/Truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncate.js","sources":["../../../../src/components/DataTable/components/Truncate.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Truncate = styled.div`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n"],"names":[],"mappings":";;MAEa,QAAQ,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"Truncate.js","sources":["../../../../src/components/DataTable/components/Truncate.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface TruncateProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const Truncate = React.forwardRef<HTMLDivElement, TruncateProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.truncate, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nTruncate.displayName = 'Truncate';\n"],"names":["React"],"mappings":";;;;;MASa,QAAQ,GAAGA,cAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC9E,QAAQ,CACL,CACP;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/DataTable/components/Wrapper.cjs

@@ -1,18 +1,21 @@
 'use strict';
 
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const borderModeStyles = {
-    full: `border-width: 1px; border-radius: ${index.theme.radius.base};`,
-    vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
-    none: 'border-width: 0;',
+const borderModeClassMap = {
+    full: DataTable_module.borderFull,
+    vertical: DataTable_module.borderVertical,
+    none: DataTable_module.borderNone,
 };
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = React__default.default.forwardRef(({ borderMode = 'full', className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.wrapper, borderModeClassMap[borderMode], className]), ...rest }, children)));
+Wrapper.displayName = 'Wrapper';
 
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=Wrapper.cjs.map

package/dist/components/DataTable/components/Wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BorderMode } from '../types';\n\nconst borderModeStyles = {\n  full: `border-width: 1px; border-radius: ${theme.radius.base};`,\n  vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',\n  none: 'border-width: 0;',\n};\n\nexport interface WrapperProps {\n  borderMode?: BorderMode;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: ${theme.colors.neutral.grey.dark};\n\n  ${({ borderMode = 'full' }) => borderModeStyles[borderMode]}\n\n  &, & * {\n    box-sizing: border-box;\n  }\n\n  .hideHeaderDetails th {\n    > * {\n      opacity: 0.1;\n    }\n\n    .th-divider {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAA,kCAAA,EAAqCA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA,CAAG;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAIfD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}
+{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { BorderMode } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  borderMode?: BorderMode;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nconst borderModeClassMap: Record<BorderMode, string> = {\n  full: styles.borderFull,\n  vertical: styles.borderVertical,\n  none: styles.borderNone,\n};\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperProps>(\n  ({ borderMode = 'full', className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nWrapper.displayName = 'Wrapper';\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAWA,MAAM,kBAAkB,GAA+B;IACrD,IAAI,EAAEA,gBAAM,CAAC,UAAU;IACvB,QAAQ,EAAEA,gBAAM,CAAC,cAAc;IAC/B,IAAI,EAAEA,gBAAM,CAAC,UAAU;CACxB;AAEM,MAAM,OAAO,GAAGC,sBAAK,CAAC,UAAU,CACrC,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACzDA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACnF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/components/DataTable/components/Wrapper.d.ts

@@ -1,5 +1,8 @@
+import React from 'react';
 import { BorderMode } from '../types';
-export interface WrapperProps {
+export interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     borderMode?: BorderMode;
+    children?: React.ReactNode;
+    className?: string;
 }
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
+export declare const Wrapper: React.ForwardRefExoticComponent<WrapperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/Wrapper.js

@@ -1,12 +1,15 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-const borderModeStyles = {
-    full: `border-width: 1px; border-radius: ${theme.radius.base};`,
-    vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
-    none: 'border-width: 0;',
+const borderModeClassMap = {
+    full: styles.borderFull,
+    vertical: styles.borderVertical,
+    none: styles.borderNone,
 };
-const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+const Wrapper = React__default.forwardRef(({ borderMode = 'full', className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className]), ...rest }, children)));
+Wrapper.displayName = 'Wrapper';
 
 export { Wrapper };
 //# sourceMappingURL=Wrapper.js.map

package/dist/components/DataTable/components/Wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BorderMode } from '../types';\n\nconst borderModeStyles = {\n  full: `border-width: 1px; border-radius: ${theme.radius.base};`,\n  vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',\n  none: 'border-width: 0;',\n};\n\nexport interface WrapperProps {\n  borderMode?: BorderMode;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: ${theme.colors.neutral.grey.dark};\n\n  ${({ borderMode = 'full' }) => borderModeStyles[borderMode]}\n\n  &, & * {\n    box-sizing: border-box;\n  }\n\n  .hideHeaderDetails th {\n    > * {\n      opacity: 0.1;\n    }\n\n    .th-divider {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAA,kCAAA,EAAqC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA,CAAG;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAIf,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}
+{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { BorderMode } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  borderMode?: BorderMode;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nconst borderModeClassMap: Record<BorderMode, string> = {\n  full: styles.borderFull,\n  vertical: styles.borderVertical,\n  none: styles.borderNone,\n};\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperProps>(\n  ({ borderMode = 'full', className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nWrapper.displayName = 'Wrapper';\n"],"names":["React"],"mappings":";;;;;AAWA,MAAM,kBAAkB,GAA+B;IACrD,IAAI,EAAE,MAAM,CAAC,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAC,cAAc;IAC/B,IAAI,EAAE,MAAM,CAAC,UAAU;CACxB;AAEM,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACzDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACnF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}

package/dist/components/DataTable/constants.cjs

@@ -2,9 +2,7 @@
 
 const defaultCellSpacing = 3;
 const headerCellHeight = '56px';
-const footerCellHeight = '56px';
 
 exports.defaultCellSpacing = defaultCellSpacing;
-exports.footerCellHeight = footerCellHeight;
 exports.headerCellHeight = headerCellHeight;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/DataTable/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;;;"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;;;;;"}

package/dist/components/DataTable/constants.js

@@ -1,6 +1,5 @@
 const defaultCellSpacing = 3;
 const headerCellHeight = '56px';
-const footerCellHeight = '56px';
 
-export { defaultCellSpacing, footerCellHeight, headerCellHeight };
+export { defaultCellSpacing, headerCellHeight };
 //# sourceMappingURL=constants.js.map

package/dist/components/DataTable/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;;;;"}

package/dist/components/DataTable/hooks/useTableId.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+
+let tableIdCounter = 0;
+/**
+ * Generates a unique stable ID per component instance for scoping
+ * dynamic CSS to a specific DataTable. Compatible with React 17+.
+ *
+ * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
+ * If SSR support is needed, use a context-based ID provider.
+ */
+function useTableId() {
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        tableIdCounter += 1;
+        idRef.current = `dt-${tableIdCounter}`;
+    }
+    return idRef.current;
+}
+
+exports.useTableId = useTableId;
+//# sourceMappingURL=useTableId.cjs.map

package/dist/components/DataTable/hooks/useTableId.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableId.cjs","sources":["../../../../src/components/DataTable/hooks/useTableId.ts"],"sourcesContent":["import { useRef } from 'react';\n\nlet tableIdCounter = 0;\n\n/**\n * Generates a unique stable ID per component instance for scoping\n * dynamic CSS to a specific DataTable. Compatible with React 17+.\n *\n * Note: Uses a module-level counter. Not SSR-safe (render order dependent).\n * If SSR support is needed, use a context-based ID provider.\n */\nexport function useTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    tableIdCounter += 1;\n    idRef.current = `dt-${tableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetTableIdCounter(): void {\n  tableIdCounter = 0;\n}\n"],"names":["useRef"],"mappings":";;;;AAEA,IAAI,cAAc,GAAG,CAAC;AAEtB;;;;;;AAMG;SACa,UAAU,GAAA;AACxB,IAAA,MAAM,KAAK,GAAGA,YAAM,CAAgB,IAAI,CAAC;AAEzC,IAAA,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAC1B,cAAc,IAAI,CAAC;AACnB,QAAA,KAAK,CAAC,OAAO,GAAG,CAAA,GAAA,EAAM,cAAc,EAAE;AACvC,IAAA;IAED,OAAO,KAAK,CAAC,OAAO;AACtB;;;;"}

package/dist/components/DataTable/hooks/useTableId.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generates a unique stable ID per component instance for scoping
+ * dynamic CSS to a specific DataTable. Compatible with React 17+.
+ *
+ * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
+ * If SSR support is needed, use a context-based ID provider.
+ */
+export declare function useTableId(): string;
+/**
+ * Reset the counter between test runs for deterministic snapshots.
+ * @internal Test utility only.
+ */
+export declare function resetTableIdCounter(): void;

package/dist/components/DataTable/hooks/useTableId.js

@@ -0,0 +1,21 @@
+import { useRef } from 'react';
+
+let tableIdCounter = 0;
+/**
+ * Generates a unique stable ID per component instance for scoping
+ * dynamic CSS to a specific DataTable. Compatible with React 17+.
+ *
+ * Note: Uses a module-level counter. Not SSR-safe (render order dependent).
+ * If SSR support is needed, use a context-based ID provider.
+ */
+function useTableId() {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        tableIdCounter += 1;
+        idRef.current = `dt-${tableIdCounter}`;
+    }
+    return idRef.current;
+}
+
+export { useTableId };
+//# sourceMappingURL=useTableId.js.map

package/dist/components/DataTable/hooks/useTableId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableId.js","sources":["../../../../src/components/DataTable/hooks/useTableId.ts"],"sourcesContent":["import { useRef } from 'react';\n\nlet tableIdCounter = 0;\n\n/**\n * Generates a unique stable ID per component instance for scoping\n * dynamic CSS to a specific DataTable. Compatible with React 17+.\n *\n * Note: Uses a module-level counter. Not SSR-safe (render order dependent).\n * If SSR support is needed, use a context-based ID provider.\n */\nexport function useTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    tableIdCounter += 1;\n    idRef.current = `dt-${tableIdCounter}`;\n  }\n\n  return idRef.current;\n}\n\n/**\n * Reset the counter between test runs for deterministic snapshots.\n * @internal Test utility only.\n */\nexport function resetTableIdCounter(): void {\n  tableIdCounter = 0;\n}\n"],"names":[],"mappings":";;AAEA,IAAI,cAAc,GAAG,CAAC;AAEtB;;;;;;AAMG;SACa,UAAU,GAAA;AACxB,IAAA,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC;AAEzC,IAAA,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAC1B,cAAc,IAAI,CAAC;AACnB,QAAA,KAAK,CAAC,OAAO,GAAG,CAAA,GAAA,EAAM,cAAc,EAAE;AACvC,IAAA;IAED,OAAO,KAAK,CAAC,OAAO;AACtB;;;;"}

package/dist/components/DataTable/utils/generateTableCss.cjs

@@ -80,8 +80,8 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
     ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
 
-    ${leftShadow}
-    ${rightShadow}
+    ${pinnedLeft.length > 0 ? leftShadow : ''}
+    ${pinnedRight.length > 0 ? rightShadow : ''}
 
     ${stripingMode === 'nested' ? stripingNested : stripingRow}
   `;

package/dist/components/DataTable/utils/generateTableCss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${leftShadow}\n    ${rightShadow}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
+{"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${pinnedLeft.length > 0 ? leftShadow : ''}\n    ${pinnedRight.length > 0 ? rightShadow : ''}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":"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"}

package/dist/components/DataTable/utils/generateTableCss.js

@@ -78,8 +78,8 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
     ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
 
-    ${leftShadow}
-    ${rightShadow}
+    ${pinnedLeft.length > 0 ? leftShadow : ''}
+    ${pinnedRight.length > 0 ? rightShadow : ''}
 
     ${stripingMode === 'nested' ? stripingNested : stripingRow}
   `;

package/dist/components/DataTable/utils/generateTableCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${leftShadow}\n    ${rightShadow}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
+{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${pinnedLeft.length > 0 ? leftShadow : ''}\n    ${pinnedRight.length > 0 ? rightShadow : ''}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DateInputField/DateInputField.cjs

@@ -6,7 +6,7 @@ var styled = require('./styled.cjs');
 var Button = require('../Button/Button.cjs');
 var Stack = require('../Stack/Stack.cjs');
 require('../Calendars/components/RangeCalendar/styled.cjs');
-require('../Grid/index.cjs');
+require('../Grid/Grid.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('../Calendars/types.cjs');

package/dist/components/DateInputField/DateInputField.js

@@ -4,7 +4,7 @@ import { DateRangeGroup } from './styled.js';
 import { Button } from '../Button/Button.js';
 import { Stack } from '../Stack/Stack.js';
 import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/index.js';
+import '../Grid/Grid.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import '../Calendars/types.js';

package/dist/components/DatePicker/DatePicker.cjs

@@ -7,7 +7,7 @@ var index = require('../DateInputField/index.cjs');
 var Popover = require('../Popover/Popover.cjs');
 var Card = require('../Card/Card.cjs');
 require('../Calendars/components/RangeCalendar/styled.cjs');
-require('../Grid/index.cjs');
+require('../Grid/Grid.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('react-aria-components');

package/dist/components/DatePicker/DatePicker.js

@@ -5,7 +5,7 @@ import { DateInputField } from '../DateInputField/index.js';
 import { Popover } from '../Popover/Popover.js';
 import { Card } from '../Card/Card.js';
 import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/index.js';
+import '../Grid/Grid.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -6,7 +6,7 @@ var Select = require('../Select/Select.cjs');
 var index$1 = require('../DateInputField/index.cjs');
 var RangeCalendar = require('../Calendars/components/RangeCalendar/RangeCalendar.cjs');
 require('../Calendars/components/Calendar/styled.cjs');
-require('../Grid/index.cjs');
+require('../Grid/Grid.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('react-aria-components');