@veeqo/ui 14.11.0-beta-4 → 14.11.1-beta-3

package/dist/components/LegacyDataTable/cells/ClickableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n  color: ${theme.text.link.color};\n  text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n  <Cell {...otherProps}>\n    <ClickableButton onClick={onClick}>{children}</ClickableButton>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,iBAAA,EACX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
+{"version":3,"file":"ClickableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface ClickableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={buildClassnames([styles.cellButton, styles.clickableButton])} onClick={onClick}>\n      {children}\n    </button>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;;MAUa,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,EAC5G,QAAQ,CACF,CACJ;;;;"}

package/dist/components/LegacyDataTable/cells/EditableCell.cjs

@@ -1,19 +1,16 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var styled$2 = require('./styled.cjs');
-var styled$1 = require('../styled.cjs');
+var styled = require('../styled.cjs');
+var cells_module = require('./cells.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
-const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$1.Cell, { ...otherProps },
-    React__default.default.createElement(styled$2.CellButton, { onClick: onClick },
-        React__default.default.createElement(Content, null, children))));
+const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled.Cell, { ...otherProps },
+    React__default.default.createElement("button", { type: "button", className: cells_module.cellButton, onClick: onClick },
+        React__default.default.createElement("div", { className: cells_module.editableContent }, children))));
 
 exports.EditableCell = EditableCell;
 //# sourceMappingURL=EditableCell.cjs.map

package/dist/components/LegacyDataTable/cells/EditableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFC,sBAAA,CAAA,aAAA,CAACC,aAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface EditableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={styles.cellButton} onClick={onClick}>\n      <div className={styles.editableContent}>{children}</div>\n    </button>\n  </Cell>\n);\n"],"names":["React","Cell","styles"],"mappings":";;;;;;;;;;MASa,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,sBAAA,CAAA,aAAA,CAACC,WAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAEE,YAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA;QAClEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,YAAM,CAAC,eAAe,EAAA,EAAG,QAAQ,CAAO,CACjD,CACJ;;;;"}

package/dist/components/LegacyDataTable/cells/EditableCell.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CellProps } from '../styled';
-export interface EditableCellProps extends CellProps {
+export interface EditableCellProps extends Omit<CellProps, 'onClick'> {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     children: React.ReactNode;
 }

package/dist/components/LegacyDataTable/cells/EditableCell.js

@@ -1,12 +1,10 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { CellButton } from './styled.js';
 import { Cell } from '../styled.js';
+import styles from './cells.module.scss.js';
 
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
 const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
-    React__default.createElement(CellButton, { onClick: onClick },
-        React__default.createElement(Content, null, children))));
+    React__default.createElement("button", { type: "button", className: styles.cellButton, onClick: onClick },
+        React__default.createElement("div", { className: styles.editableContent }, children))));
 
 export { EditableCell };
 //# sourceMappingURL=EditableCell.js.map

package/dist/components/LegacyDataTable/cells/EditableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface EditableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={styles.cellButton} onClick={onClick}>\n      <div className={styles.editableContent}>{children}</div>\n    </button>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;MASa,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA;QAClEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,EAAG,QAAQ,CAAO,CACjD,CACJ;;;;"}

package/dist/components/LegacyDataTable/cells/cells.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._cellButton_13hn1_1 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + var(--sizes-md));\n  margin: calc(-1 * var(--sizes-3));\n  padding: var(--sizes-3);\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n}\n._cellButton_13hn1_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_13hn1_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_13hn1_25 {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}");
+var styles = {"cellButton":"_cellButton_13hn1_1","clickableButton":"_clickableButton_13hn1_20","editableContent":"_editableContent_13hn1_25"};
+
+module.exports = styles;
+//# sourceMappingURL=cells.module.scss.cjs.map

package/dist/components/LegacyDataTable/cells/cells.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.module.scss.cjs","sources":["../../../../src/components/LegacyDataTable/cells/cells.module.scss"],"sourcesContent":[".cellButton {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + var(--sizes-md));\n  margin: calc(-1 * var(--sizes-3));\n  padding: var(--sizes-3);\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.clickableButton {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n.editableContent {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+uBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

package/dist/components/LegacyDataTable/cells/cells.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._cellButton_13hn1_1 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + var(--sizes-md));\n  margin: calc(-1 * var(--sizes-3));\n  padding: var(--sizes-3);\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n}\n._cellButton_13hn1_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_13hn1_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_13hn1_25 {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}");
+var styles = {"cellButton":"_cellButton_13hn1_1","clickableButton":"_clickableButton_13hn1_20","editableContent":"_editableContent_13hn1_25"};
+
+export { styles as default };
+//# sourceMappingURL=cells.module.scss.js.map

package/dist/components/LegacyDataTable/cells/cells.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.module.scss.js","sources":["../../../../src/components/LegacyDataTable/cells/cells.module.scss"],"sourcesContent":[".cellButton {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + var(--sizes-md));\n  margin: calc(-1 * var(--sizes-3));\n  padding: var(--sizes-3);\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.clickableButton {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n.editableContent {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+uBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

package/dist/components/LegacyDataTable/styled.cjs

@@ -1,122 +1,163 @@
 '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 assignCssVars = require('../../utils/assignCssVars.cjs');
+var LegacyDataTable_module = require('./LegacyDataTable.module.scss.cjs');
 var constants = require('./utils/constants.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 { text, sizes } = index.theme;
-const { blue } = index.theme.colors.secondary;
-const { grey } = index.theme.colors.neutral;
-const { scrollbar } = index.theme.colors.system;
-const fixedColumnShadow = `
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  width: 30px;
-  content: "";
-  pointer-events: none;
-  box-sizing: border-box;
-  transition: box-shadow .3s;
-`;
-const startFixedColumnShadow = `
-  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const endFixedColumnShadow = `
-  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
-    ? `
-    scrollbar-width: auto;
-
-    &::-webkit-scrollbar {
-      margin-top: 10px;
-      width: 6px;
-      height: 6px;
-    }
-    
-    &::-webkit-scrollbar-track {
-      background: ${scrollbar.background}; 
+/* --- Instance ID for scoped styles --- */
+let legacyTableIdCounter = 0;
+function useLegacyTableId() {
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        legacyTableIdCounter += 1;
+        idRef.current = `ldt-${legacyTableIdCounter}`;
     }
-    
-    &::-webkit-scrollbar-thumb {
-      background: ${scrollbar.thumb};
-      border-radius: 4px; 
+    return idRef.current;
+}
+const TableIdContext = React.createContext('');
+function getScopedShadowRules({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, }) {
+    if (scrollDisabled)
+        return [];
+    if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex)
+        return [];
+    const fixedColumnShadow = 'position: absolute; top: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; transition: box-shadow .3s;';
+    const startShadowVisible = scrollPosition === constants.ScrollPosition.middle || scrollPosition === constants.ScrollPosition.end;
+    const endShadowVisible = scrollPosition === constants.ScrollPosition.start || scrollPosition === constants.ScrollPosition.middle;
+    const startShadow = startShadowVisible
+        ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const endShadow = endShadowVisible
+        ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const rules = [];
+    if (lastStartFixedColumnsIndex) {
+        rules.push(`td:nth-child(${lastStartFixedColumnsIndex}):after, th:nth-child(${lastStartFixedColumnsIndex}):after { right: 0; transform: translate(100%); ${fixedColumnShadow} ${startShadow} }`);
     }
-    `
-    : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
-    ? ''
-    : `
-    td:nth-child(${lastStartFixedColumnsIndex}):after,
-    th:nth-child(${lastStartFixedColumnsIndex}):after {
-      right: 0;
-      transform: translate(100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === constants.ScrollPosition.middle || scrollPosition === constants.ScrollPosition.end
-        ? startFixedColumnShadow
-        : ''};
-    };
-
-    td:nth-last-child(${firstEndFixedColumnsIndex}):after,
-    th:nth-last-child(${firstEndFixedColumnsIndex}):after {
-      left: 0;
-      transform: translate(-100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === constants.ScrollPosition.start || scrollPosition === constants.ScrollPosition.middle
-        ? endFixedColumnShadow
-        : ''};
-    };
-  `}`;
-const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
-const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
-const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
-styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
-    `
-    & > td:first-child::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: ${accentColor};  
+    if (firstEndFixedColumnsIndex) {
+        rules.push(`td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`);
     }
-  `}`;
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
-const HeaderCell = styled__default.default(Cell).attrs({
-    as: 'th',
-}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
+    return rules;
+}
+const Wrapper = React__default.default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
+    const tableId = useLegacyTableId();
+    const scopeSelector = `[data-legacy-table-id="${tableId}"]`;
+    const scopedStyle = (() => {
+        const shadowRules = getScopedShadowRules({
+            scrollDisabled,
+            scrollPosition,
+            lastStartFixedColumnsIndex,
+            firstEndFixedColumnsIndex,
+        });
+        if (shadowRules.length === 0)
+            return '';
+        return shadowRules.map((rule) => {
+            const braceIndex = rule.indexOf('{');
+            if (braceIndex === -1)
+                return `${scopeSelector} ${rule}`;
+            const selectorPart = rule.slice(0, braceIndex).trim();
+            const bodyPart = rule.slice(braceIndex);
+            const scopedSelectors = selectorPart
+                .split(',')
+                .map((sel) => `${scopeSelector} ${sel.trim()}`)
+                .join(', ');
+            return `${scopedSelectors} ${bodyPart}`;
+        }).join('\n');
+    })();
+    return (React__default.default.createElement("div", { ref: ref, "data-legacy-table-id": tableId, className: buildClassnames.buildClassnames([
+            LegacyDataTable_module.wrapper,
+            scrollDisabled ? LegacyDataTable_module.wrapperScrollDisabled : LegacyDataTable_module.wrapperScrollEnabled,
+            showScrollbar && LegacyDataTable_module.wrapperShowScrollbar,
+            className,
+        ]), ...rest },
+        scopedStyle && React__default.default.createElement("style", null, scopedStyle),
+        React__default.default.createElement(TableIdContext.Provider, { value: tableId }, children)));
+});
+Wrapper.displayName = 'Wrapper';
+const WrapperBordered = React__default.default.forwardRef((props, ref) => (React__default.default.createElement(Wrapper, { ref: ref, ...props, className: buildClassnames.buildClassnames([LegacyDataTable_module.wrapperBordered, props.className]) })));
+WrapperBordered.displayName = 'WrapperBordered';
+/* --- TooltipContent --- */
+const TooltipContent = ({ children, ...rest }) => (React__default.default.createElement("div", { className: LegacyDataTable_module.tooltipContent, ...rest }, children));
+/* --- Head --- */
+const Head = ({ children, ...rest }) => (React__default.default.createElement("thead", { className: LegacyDataTable_module.head, ...rest }, children));
+const Body = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = React.useContext(TableIdContext);
+    const scopedFixedStyle = (() => {
+        if (!fixedColumnsStyle || !tableId)
+            return '';
+        return fixedColumnsStyle.split('\n').filter(Boolean).map((rule) => {
+            const braceIndex = rule.indexOf('{');
+            if (braceIndex === -1)
+                return '';
+            const selector = rule.slice(0, braceIndex).trim();
+            const body = rule.slice(braceIndex);
+            return `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.body} ${selector} ${body}`;
+        }).join('\n');
+    })();
+    return (React__default.default.createElement("tbody", { className: buildClassnames.buildClassnames([LegacyDataTable_module.body, LegacyDataTable_module.bodyBorderTop, className]), ...rest },
+        scopedFixedStyle && React__default.default.createElement("style", null, scopedFixedStyle),
+        children));
+};
+const Row = ({ accentColor, className, children, style, ...rest }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames([LegacyDataTable_module.row, accentColor && LegacyDataTable_module.rowAccentColor, className]), style: {
+        ...assignCssVars.assignCssVars({ rowAccentColor: accentColor }),
+        ...style,
+    }, ...rest }, children));
+const Cell = ({ align, grow, className, children, style, ...rest }) => (React__default.default.createElement("td", { className: buildClassnames.buildClassnames([LegacyDataTable_module.cell, grow && LegacyDataTable_module.cellGrow, className]), style: {
+        ...assignCssVars.assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+const HeaderCell = ({ align, grow, className, children, style, ...rest }) => (React__default.default.createElement("th", { className: buildClassnames.buildClassnames([LegacyDataTable_module.headerCell, grow && LegacyDataTable_module.cellGrow, className]), style: {
+        ...assignCssVars.assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+/* --- HeaderCellLayout --- */
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
-const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
-    `
-    & ${Body}:nth-child(even) td {
-      background-color: ${grey.lightest};
-    }
-  `} & *{box-sizing:border-box;${({ tableLoading }) => tableLoading &&
-    `
-      user-select: none;
-      pointer-events: none;
-    `}}${({ noWrap }) => noWrap &&
-    `
-    & ${HeaderCell}, & ${HeaderCell} span {
-      white-space: nowrap;
-    }
-  `}`;
-const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
-const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
-const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
+const HeaderCellLayout = ({ align, className, children, style, ...rest }) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([LegacyDataTable_module.headerCellLayout, className]), style: {
+        ...assignCssVars.assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),
+        ...style,
+    }, ...rest }, children));
+const Table = React__default.default.forwardRef(({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (React__default.default.createElement("table", { ref: ref, className: buildClassnames.buildClassnames([
+        LegacyDataTable_module.table,
+        isFixedLayout && LegacyDataTable_module.tableFixedLayout,
+        tableLoading && LegacyDataTable_module.tableLoading,
+        striped && LegacyDataTable_module.tableStriped,
+        noWrap && LegacyDataTable_module.tableNoWrap,
+        className,
+    ]), ...rest }, children)));
+Table.displayName = 'Table';
+const Footer = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = React.useContext(TableIdContext);
+    const scopedFixedStyle = (() => {
+        if (!fixedColumnsStyle || !tableId)
+            return '';
+        return fixedColumnsStyle.split('\n').filter(Boolean).map((rule) => {
+            const braceIndex = rule.indexOf('{');
+            if (braceIndex === -1)
+                return '';
+            const selector = rule.slice(0, braceIndex).trim();
+            const body = rule.slice(braceIndex);
+            return `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.footer} ${selector} ${body}`;
+        }).join('\n');
+    })();
+    return (React__default.default.createElement("tfoot", { className: buildClassnames.buildClassnames([LegacyDataTable_module.footer, className]), ...rest },
+        scopedFixedStyle && React__default.default.createElement("style", null, scopedFixedStyle),
+        children));
+};
+/* --- StickyHeaderWrapper --- */
+const StickyHeaderWrapper = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([LegacyDataTable_module.stickyHeaderWrapper, className]), ...rest }, children)));
+StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
+/* --- FakeHeaderTable (same as Table) --- */
+const FakeHeaderTable = Table;
 
 exports.Body = Body;
 exports.Cell = Cell;

package/dist/components/LegacyDataTable/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { NoWrapType, StripedType } from './utils/types';\nimport { ScrollPosition } from './utils/constants';\n\nconst { text, sizes } = theme;\nconst { blue } = theme.colors.secondary;\nconst { grey } = theme.colors.neutral;\nconst { scrollbar } = theme.colors.system;\n\nconst fixedColumnShadow = `\n  position: absolute;\n  top: 0;\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: box-shadow .3s;\n`;\n\nconst startFixedColumnShadow = `\n  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\nconst endFixedColumnShadow = `\n  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);\n`;\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n};\n\nexport const TooltipContent = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nexport const Wrapper = styled.div<WrapperPropTypes>`\n  width: 100%;\n  overflow-x: ${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid ${grey.dark};\n  border-bottom: 1px solid ${grey.dark};\n\n  ${({ showScrollbar }) =>\n    showScrollbar\n      ? `\n    scrollbar-width: auto;\n\n    &::-webkit-scrollbar {\n      margin-top: 10px;\n      width: 6px;\n      height: 6px;\n    }\n    \n    &::-webkit-scrollbar-track {\n      background: ${scrollbar.background}; \n    }\n    \n    &::-webkit-scrollbar-thumb {\n      background: ${scrollbar.thumb};\n      border-radius: 4px; \n    }\n    `\n      : ''}\n\n  ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) =>\n    scrollDisabled\n      ? ''\n      : `\n    td:nth-child(${lastStartFixedColumnsIndex}):after,\n    th:nth-child(${lastStartFixedColumnsIndex}):after {\n      right: 0;\n      transform: translate(100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end\n          ? startFixedColumnShadow\n          : ''\n      };\n    };\n\n    td:nth-last-child(${firstEndFixedColumnsIndex}):after,\n    th:nth-last-child(${firstEndFixedColumnsIndex}):after {\n      left: 0;\n      transform: translate(-100%);\n      ${fixedColumnShadow};\n\n      ${\n        scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle\n          ? endFixedColumnShadow\n          : ''\n      };\n    };\n  `}\n`;\n\nexport const WrapperBordered = styled(Wrapper)`\n  border: 1px solid ${grey.dark};\n  border-radius: 4px;\n`;\n\nexport const Head = styled.thead`\n  background-color: white;\n`;\n\nexport const Body = styled.tbody<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & + & > tr:first-child > td {\n    border-top: 1px solid ${grey.base};\n  }\n\n  tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n\n  &&& tr:hover td {\n    background-color: #ebf4fb; /* TODO: Remove magic hex value */\n  }\n`;\n\nexport const Foot = styled.tfoot`\n  & td {\n    background-color: ${grey.lightest};\n    padding: 1.5rem 1rem;\n    border-top: 1px solid ${blue.base};\n  }\n`;\n\nexport interface RowProps {\n  accentColor?: string;\n}\n\nexport const Row = styled.tr<RowProps>`\n  &.hidden {\n    visibility: collapse;\n  }\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    & > td: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\nexport interface CellProps {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = styled.td<CellProps>`\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: ${({ align }) => align || 'left'};\n  background-color: white;\n\n  font-family: ${text.bodySmall.fontFamily};\n  font-size: ${text.bodySmall.fontSize};\n  font-weight: ${text.bodySmall.fontWeight};\n  color: ${text.bodySmall.color};\n  line-height: ${sizes.base};\n\n  width: ${({ grow }) => (grow ? '100%' : 'auto')};\n\n  & > * {\n    vertical-align: middle;\n  }\n`;\n\nexport const HeaderCell = styled(Cell).attrs({\n  as: 'th',\n})`\n  user-select: none;\n  border-bottom: 1px solid ${grey.dark};\n\n  font-family: ${text.bodySmallBold.fontFamily};\n  font-size: ${text.bodySmallBold.fontSize};\n  font-weight: ${text.bodySmallBold.fontWeight};\n  color: ${text.bodySmallBold.color};\n\n  & span {\n    white-space: pre-line;\n  }\n\n  &.sortable:hover {\n    cursor: pointer;\n    background-color: ${grey.light};\n  }\n`;\n\nconst alignmentMap = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = styled.div<HeaderCellLayoutProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align }) => (align ? alignmentMap[align] : 'flex-start')};\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n`;\n\ntype TablePropTypes = {\n  striped?: StripedType;\n  noWrap?: NoWrapType;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n};\n\nexport const Table = styled.table<TablePropTypes>`\n  width: 100%;\n  border-spacing: 0;\n  table-layout: ${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};\n\n  ${({ striped }) =>\n    striped &&\n    `\n    & ${Body}:nth-child(even) td {\n      background-color: ${grey.lightest};\n    }\n  `}\n\n  & * {\n    box-sizing: border-box;\n\n    ${({ tableLoading }) =>\n      tableLoading &&\n      `\n      user-select: none;\n      pointer-events: none;\n    `}\n  }\n\n  ${({ noWrap }) =>\n    noWrap &&\n    `\n    & ${HeaderCell}, & ${HeaderCell} span {\n      white-space: nowrap;\n    }\n  `}\n`;\n\nexport const Footer = styled.tfoot<{ fixedColumnsStyle?: string }>`\n  tr {\n    ${({ fixedColumnsStyle }) => fixedColumnsStyle};\n  }\n\n  & ${Cell} {\n    border-top: 1px solid ${grey.dark};\n    background-color: ${grey.lightest};\n    padding-top: ${sizes.base};\n    padding-bottom: ${sizes.base};\n    line-height: 2rem;\n  }\n`;\n\nexport const StickyHeaderWrapper = styled.div`\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n`;\n\nexport const FakeHeaderTable = styled(Table)``;\n"],"names":["theme","styled","ScrollPosition"],"mappings":"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"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/LegacyDataTable/styled.tsx"],"sourcesContent":["import React, { createContext, useContext, useRef } from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport styles from './LegacyDataTable.module.scss';\nimport { ScrollPosition } from './utils/constants';\n\n/* --- Instance ID for scoped styles --- */\n\nlet legacyTableIdCounter = 0;\n\nfunction useLegacyTableId(): string {\n  const idRef = useRef<string | null>(null);\n\n  if (idRef.current === null) {\n    legacyTableIdCounter += 1;\n    idRef.current = `ldt-${legacyTableIdCounter}`;\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 resetLegacyTableIdCounter(): void {\n  legacyTableIdCounter = 0;\n}\n\nconst TableIdContext = createContext<string>('');\n\n/* --- Wrapper --- */\n\ntype WrapperPropTypes = {\n  scrollDisabled: boolean;\n  scrollPosition?: ScrollPosition;\n  lastStartFixedColumnsIndex?: number;\n  firstEndFixedColumnsIndex?: number;\n  showScrollbar?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n};\n\nfunction getScopedShadowRules({\n  scrollDisabled,\n  scrollPosition,\n  lastStartFixedColumnsIndex,\n  firstEndFixedColumnsIndex,\n}: Pick<WrapperPropTypes, 'scrollDisabled' | 'scrollPosition' | 'lastStartFixedColumnsIndex' | 'firstEndFixedColumnsIndex'>): string[] {\n  if (scrollDisabled) return [];\n  if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex) return [];\n\n  const fixedColumnShadow = 'position: absolute; top: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; transition: box-shadow .3s;';\n\n  const startShadowVisible =\n    scrollPosition === ScrollPosition.middle || scrollPosition === ScrollPosition.end;\n  const endShadowVisible =\n    scrollPosition === ScrollPosition.start || scrollPosition === ScrollPosition.middle;\n\n  const startShadow = startShadowVisible\n    ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n  const endShadow = endShadowVisible\n    ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'\n    : '';\n\n  const rules: string[] = [];\n\n  if (lastStartFixedColumnsIndex) {\n    rules.push(\n      `td:nth-child(${lastStartFixedColumnsIndex}):after, th:nth-child(${lastStartFixedColumnsIndex}):after { right: 0; transform: translate(100%); ${fixedColumnShadow} ${startShadow} }`,\n    );\n  }\n\n  if (firstEndFixedColumnsIndex) {\n    rules.push(\n      `td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`,\n    );\n  }\n\n  return rules;\n}\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (\n    {\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\n      showScrollbar,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const tableId = useLegacyTableId();\n    const scopeSelector = `[data-legacy-table-id=\"${tableId}\"]`;\n    const scopedStyle = (() => {\n      const shadowRules = getScopedShadowRules({\n        scrollDisabled,\n        scrollPosition,\n        lastStartFixedColumnsIndex,\n        firstEndFixedColumnsIndex,\n      });\n      if (shadowRules.length === 0) return '';\n      return shadowRules.map((rule) => {\n        const braceIndex = rule.indexOf('{');\n        if (braceIndex === -1) return `${scopeSelector} ${rule}`;\n        const selectorPart = rule.slice(0, braceIndex).trim();\n        const bodyPart = rule.slice(braceIndex);\n        const scopedSelectors = selectorPart\n          .split(',')\n          .map((sel) => `${scopeSelector} ${sel.trim()}`)\n          .join(', ');\n        return `${scopedSelectors} ${bodyPart}`;\n      }).join('\\n');\n    })();\n\n    return (\n      <div\n        ref={ref}\n        data-legacy-table-id={tableId}\n        className={buildClassnames([\n          styles.wrapper,\n          scrollDisabled ? styles.wrapperScrollDisabled : styles.wrapperScrollEnabled,\n          showScrollbar && styles.wrapperShowScrollbar,\n          className,\n        ])}\n        {...rest}\n      >\n        {scopedStyle && <style>{scopedStyle}</style>}\n        <TableIdContext.Provider value={tableId}>\n          {children}\n        </TableIdContext.Provider>\n      </div>\n    );\n  },\n);\n\nWrapper.displayName = 'Wrapper';\n\nexport const WrapperBordered = React.forwardRef<HTMLDivElement, WrapperPropTypes>(\n  (props, ref) => (\n    <Wrapper ref={ref} {...props} className={buildClassnames([styles.wrapperBordered, props.className])} />\n  ),\n);\n\nWrapperBordered.displayName = 'WrapperBordered';\n\n/* --- TooltipContent --- */\n\nexport const TooltipContent = ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={styles.tooltipContent} {...rest}>\n    {children}\n  </div>\n);\n\n/* --- Head --- */\n\nexport const Head = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <thead className={styles.head} {...rest}>\n    {children}\n  </thead>\n);\n\n/* --- Body --- */\n\ninterface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Body = ({ fixedColumnsStyle, className, children, ...rest }: BodyProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopedFixedStyle = (() => {\n    if (!fixedColumnsStyle || !tableId) return '';\n    return fixedColumnsStyle.split('\\n').filter(Boolean).map((rule) => {\n      const braceIndex = rule.indexOf('{');\n      if (braceIndex === -1) return '';\n      const selector = rule.slice(0, braceIndex).trim();\n      const body = rule.slice(braceIndex);\n      return `[data-legacy-table-id=\"${tableId}\"] .${styles.body} ${selector} ${body}`;\n    }).join('\\n');\n  })();\n  return (\n    <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n      {scopedFixedStyle && <style>{scopedFixedStyle}</style>}\n      {children}\n    </tbody>\n  );\n};\n\n/* --- Foot --- */\n\nexport const Foot = ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => (\n  <tfoot className={styles.foot} {...rest}>\n    {children}\n  </tfoot>\n);\n\n/* --- Row --- */\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  accentColor?: string;\n}\n\nexport const Row = ({ accentColor, className, children, style, ...rest }: RowProps) => (\n  <tr\n    className={buildClassnames([styles.row, accentColor && styles.rowAccentColor, className])}\n    style={{\n      ...assignCssVars({ rowAccentColor: accentColor }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </tr>\n);\n\n/* --- Cell --- */\n\nexport interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const Cell = ({ align, grow, className, children, style, ...rest }: CellProps) => (\n  <td\n    className={buildClassnames([styles.cell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </td>\n);\n\n/* --- HeaderCell --- */\n\nexport interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  align?: 'left' | 'center' | 'right';\n  grow?: boolean;\n}\n\nexport const HeaderCell = ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => (\n  <th\n    className={buildClassnames([styles.headerCell, grow && styles.cellGrow, className])}\n    style={{\n      ...assignCssVars({ cellAlign: align }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </th>\n);\n\n/* --- HeaderCellLayout --- */\n\nconst alignmentMap: Record<string, string> = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n};\n\nexport interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  align?: 'left' | 'center' | 'right';\n}\n\nexport const HeaderCellLayout = ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => (\n  <div\n    className={buildClassnames([styles.headerCellLayout, className])}\n    style={{\n      ...assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),\n      ...style,\n    }}\n    {...rest}\n  >\n    {children}\n  </div>\n);\n\n/* --- Table --- */\n\ninterface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  striped?: boolean;\n  noWrap?: boolean;\n  tableLoading?: boolean;\n  isFixedLayout?: boolean;\n}\n\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (\n    <table\n      ref={ref}\n      className={buildClassnames([\n        styles.table,\n        isFixedLayout && styles.tableFixedLayout,\n        tableLoading && styles.tableLoading,\n        striped && styles.tableStriped,\n        noWrap && styles.tableNoWrap,\n        className,\n      ])}\n      {...rest}\n    >\n      {children}\n    </table>\n  ),\n);\n\nTable.displayName = 'Table';\n\n/* --- Footer --- */\n\ninterface FooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {\n  fixedColumnsStyle?: string;\n}\n\nexport const Footer = ({ fixedColumnsStyle, className, children, ...rest }: FooterProps) => {\n  const tableId = useContext(TableIdContext);\n  const scopedFixedStyle = (() => {\n    if (!fixedColumnsStyle || !tableId) return '';\n    return fixedColumnsStyle.split('\\n').filter(Boolean).map((rule) => {\n      const braceIndex = rule.indexOf('{');\n      if (braceIndex === -1) return '';\n      const selector = rule.slice(0, braceIndex).trim();\n      const body = rule.slice(braceIndex);\n      return `[data-legacy-table-id=\"${tableId}\"] .${styles.footer} ${selector} ${body}`;\n    }).join('\\n');\n  })();\n  return (\n    <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n      {scopedFixedStyle && <style>{scopedFixedStyle}</style>}\n      {children}\n    </tfoot>\n  );\n};\n\n/* --- StickyHeaderWrapper --- */\n\nexport const StickyHeaderWrapper = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.stickyHeaderWrapper, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nStickyHeaderWrapper.displayName = 'StickyHeaderWrapper';\n\n/* --- FakeHeaderTable (same as Table) --- */\n\nexport const FakeHeaderTable = Table;\n"],"names":["useRef","createContext","ScrollPosition","React","buildClassnames","styles","useContext","assignCssVars"],"mappings":"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"}

package/dist/components/LegacyDataTable/styled.d.ts

@@ -1,46 +1,58 @@
-import { NoWrapType, StripedType } from './utils/types';
+import React from 'react';
 import { ScrollPosition } from './utils/constants';
+/**
+ * Reset the counter between test runs for deterministic snapshots.
+ * @internal Test utility only.
+ */
+export declare function resetLegacyTableIdCounter(): void;
 type WrapperPropTypes = {
     scrollDisabled: boolean;
     scrollPosition?: ScrollPosition;
     lastStartFixedColumnsIndex?: number;
     firstEndFixedColumnsIndex?: number;
     showScrollbar?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 };
-export declare const TooltipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperPropTypes, never>;
-export declare const WrapperBordered: import("styled-components").StyledComponent<"div", any, WrapperPropTypes, never>;
-export declare const Head: import("styled-components").StyledComponent<"thead", any, {}, never>;
-export declare const Body: import("styled-components").StyledComponent<"tbody", any, {
-    fixedColumnsStyle?: string | undefined;
-}, never>;
-export declare const Foot: import("styled-components").StyledComponent<"tfoot", any, {}, never>;
-export interface RowProps {
+export declare const Wrapper: React.ForwardRefExoticComponent<WrapperPropTypes & React.RefAttributes<HTMLDivElement>>;
+export declare const WrapperBordered: React.ForwardRefExoticComponent<WrapperPropTypes & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipContent: ({ children, ...rest }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const Head: ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    fixedColumnsStyle?: string;
+}
+export declare const Body: ({ fixedColumnsStyle, className, children, ...rest }: BodyProps) => React.JSX.Element;
+export declare const Foot: ({ children, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) => React.JSX.Element;
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     accentColor?: string;
 }
-export declare const Row: import("styled-components").StyledComponent<"tr", any, RowProps, never>;
-export interface CellProps {
+export declare const Row: ({ accentColor, className, children, style, ...rest }: RowProps) => React.JSX.Element;
+export interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+    grow?: boolean;
+}
+export declare const Cell: ({ align, grow, className, children, style, ...rest }: CellProps) => React.JSX.Element;
+export interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     align?: 'left' | 'center' | 'right';
     grow?: boolean;
 }
-export declare const Cell: import("styled-components").StyledComponent<"td", any, CellProps, never>;
-export declare const HeaderCell: import("styled-components").StyledComponent<"td", any, CellProps & {
-    as: string;
-}, "as">;
-export interface HeaderCellLayoutProps {
+export declare const HeaderCell: ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => React.JSX.Element;
+export interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: 'left' | 'center' | 'right';
 }
-export declare const HeaderCellLayout: import("styled-components").StyledComponent<"div", any, HeaderCellLayoutProps, never>;
-type TablePropTypes = {
-    striped?: StripedType;
-    noWrap?: NoWrapType;
+export declare const HeaderCellLayout: ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => React.JSX.Element;
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    striped?: boolean;
+    noWrap?: boolean;
     tableLoading?: boolean;
     isFixedLayout?: boolean;
-};
-export declare const Table: import("styled-components").StyledComponent<"table", any, TablePropTypes, never>;
-export declare const Footer: import("styled-components").StyledComponent<"tfoot", any, {
-    fixedColumnsStyle?: string | undefined;
-}, never>;
-export declare const StickyHeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FakeHeaderTable: import("styled-components").StyledComponent<"table", any, TablePropTypes, never>;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+interface FooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+    fixedColumnsStyle?: string;
+}
+export declare const Footer: ({ fixedColumnsStyle, className, children, ...rest }: FooterProps) => React.JSX.Element;
+export declare const StickyHeaderWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const FakeHeaderTable: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 export {};