@veeqo/ui 14.10.0-beta-2 → 14.10.1

package/dist/components/LegacyDataTable/styled.cjs

@@ -1,139 +1,122 @@
 'use strict';
 
-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 styled = require('styled-components');
+var index = require('../../theme/index.cjs');
 var constants = require('./utils/constants.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);
 
-/* --- 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}`;
+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;
     }
-    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} }`);
+    
+    &::-webkit-scrollbar-track {
+      background: ${scrollbar.background}; 
     }
-    if (firstEndFixedColumnsIndex) {
-        rules.push(`td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`);
+    
+    &::-webkit-scrollbar-thumb {
+      background: ${scrollbar.thumb};
+      border-radius: 4px; 
     }
-    return rules;
-}
-const Wrapper = React__default.default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
-    const tableId = useLegacyTableId();
-    const shadowRules = getScopedShadowRules({
-        scrollDisabled,
-        scrollPosition,
-        lastStartFixedColumnsIndex,
-        firstEndFixedColumnsIndex,
-    });
-    const scopeSelector = `[data-legacy-table-id="${tableId}"]`;
-    const scopedStyle = shadowRules.length > 0
-        ? 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 shouldRenderStyle = fixedColumnsStyle && tableId;
-    return (React__default.default.createElement("tbody", { className: buildClassnames.buildClassnames([LegacyDataTable_module.body, LegacyDataTable_module.bodyBorderTop, className]), ...rest },
-        shouldRenderStyle && React__default.default.createElement("style", null, `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.body} tr { ${fixedColumnsStyle} }`),
-        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 --- */
+    `
+    : ''} ${({ 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};  
+    }
+  `}`;
+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};}`;
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-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 shouldRenderStyle = fixedColumnsStyle && tableId;
-    return (React__default.default.createElement("tfoot", { className: buildClassnames.buildClassnames([LegacyDataTable_module.footer, className]), ...rest },
-        shouldRenderStyle && React__default.default.createElement("style", null, `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.footer} tr { ${fixedColumnsStyle} }`),
-        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;
+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" }) ``;
 
 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.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 shadowRules = getScopedShadowRules({\n      scrollDisabled,\n      scrollPosition,\n      lastStartFixedColumnsIndex,\n      firstEndFixedColumnsIndex,\n    });\n    const scopeSelector = `[data-legacy-table-id=\"${tableId}\"]`;\n    const scopedStyle = shadowRules.length > 0\n      ? 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 shouldRenderStyle = fixedColumnsStyle && tableId;\n  return (\n    <tbody className={buildClassnames([styles.body, styles.bodyBorderTop, className])} {...rest}>\n      {/* Style rendered inside tbody: technically invalid HTML but browsers handle it correctly.\n          This feature (fixedColumnsStyle) has zero production usage. Moving to a portal or\n          hoisting to Wrapper would require API changes for a dead feature. */}\n      {shouldRenderStyle && <style>{`[data-legacy-table-id=\"${tableId}\"] .${styles.body} tr { ${fixedColumnsStyle} }`}</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 shouldRenderStyle = fixedColumnsStyle && tableId;\n  return (\n    <tfoot className={buildClassnames([styles.footer, className])} {...rest}>\n      {shouldRenderStyle && <style>{`[data-legacy-table-id=\"${tableId}\"] .${styles.footer} tr { ${fixedColumnsStyle} }`}</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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"}
+{"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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"}

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

@@ -1,58 +1,46 @@
-import React from 'react';
+import { NoWrapType, StripedType } from './utils/types';
 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 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> {
+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 {
     accentColor?: string;
 }
-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> {
+export declare const Row: import("styled-components").StyledComponent<"tr", any, RowProps, never>;
+export interface CellProps {
     align?: 'left' | 'center' | 'right';
     grow?: boolean;
 }
-export declare const HeaderCell: ({ align, grow, className, children, style, ...rest }: HeaderCellProps) => React.JSX.Element;
-export interface HeaderCellLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+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 {
     align?: 'left' | 'center' | 'right';
 }
-export declare const HeaderCellLayout: ({ align, className, children, style, ...rest }: HeaderCellLayoutProps) => React.JSX.Element;
-interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
-    striped?: boolean;
-    noWrap?: boolean;
+export declare const HeaderCellLayout: import("styled-components").StyledComponent<"div", any, HeaderCellLayoutProps, never>;
+type TablePropTypes = {
+    striped?: StripedType;
+    noWrap?: NoWrapType;
     tableLoading?: boolean;
     isFixedLayout?: boolean;
-}
-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 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 {};