@veeqo/ui 14.10.0-beta-1 → 14.10.0-beta-2

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHead.cjs","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { CSSProperties, ReactNode, RefObject, useEffect, useRef, useState } from 'react';\nimport throttle from 'lodash.throttle';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { theme } from '../../../theme';\n\nimport { headerCellHeight } from '../constants';\nimport { TableGrid } from './TableGrid';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: string;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n  cellWidths: number[];\n  stickyHeaderTop?: number;\n}\n\nexport function StickyHead({\n  children,\n  intersectionTargetRef,\n  containerRef,\n  cellWidths,\n  tableCss,\n  stickyHeaderTop = 0,\n}: StickyHeadProps) {\n  const stickyContainerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [containerRect, setContainerRect] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n    height: 0,\n  });\n\n  const lastLeftValue = useRef<null | number>(null);\n  const THROTTE_TIME_MS = 30;\n\n  const updateContainerDimensions = () => {\n    const targetRect = containerRef.current?.getBoundingClientRect();\n    const newRect = {\n      left: targetRect?.left || 0,\n      width: targetRect?.width || 0,\n      top: 0,\n      height: 48,\n    };\n    setContainerRect(newRect);\n  };\n\n  const updateContainerScrollPosition = () => {\n    if (!containerRef.current) return;\n    const xScrollOffset = containerRef.current.scrollLeft;\n    stickyContainerRef.current?.scrollTo(xScrollOffset, 0);\n  };\n\n  // Configure intersection observer to toggle sticky header on/off\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const options = {\n      rootMargin: `-${stickyHeaderTop}px 100% 0px 100%`,\n      threshold: 1.0,\n    };\n    const intersectionCallback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsVisible(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(intersectionCallback, options);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [intersectionTargetRef.current]);\n\n  // Calculate sticky header position and size to match table container\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    updateContainerDimensions();\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when container element is resized\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const resizeObserverCallback = throttle(updateContainerDimensions, THROTTE_TIME_MS); // Throttle events\n    const resizeObserver = new ResizeObserver(resizeObserverCallback);\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when document scrolls\n  // will only call updateContainerDimensions on horizontal scroll\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const scrollCallback = throttle(() => {\n      const { left } = containerRef.current?.getBoundingClientRect() || {};\n      if (left && lastLeftValue.current !== left) {\n        updateContainerDimensions();\n        lastLeftValue.current = left;\n      }\n    }, THROTTE_TIME_MS); // Throttle events\n    document.addEventListener('scroll', scrollCallback);\n    return () => document.removeEventListener('scroll', scrollCallback); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Sync container scrolling\n\n  useEffect(() => {\n    updateContainerScrollPosition();\n  }, [isVisible]);\n\n  useEffect(() => {\n    containerRef.current?.addEventListener('scroll', updateContainerScrollPosition);\n    return () => {\n      containerRef.current?.removeEventListener('scroll', updateContainerScrollPosition);\n    };\n  }, [containerRef.current]);\n\n  // Render sticky header\n\n  if (!isVisible) return null;\n\n  const containerStyle: CSSProperties = {\n    ...containerRect,\n    height: headerCellHeight,\n    position: 'fixed',\n    zIndex: 5,\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,\n    borderTop: `1px solid ${theme.colors.neutral.grey.base}`,\n    boxShadow: Shadows.base,\n    top: `${stickyHeaderTop}px` || '0px',\n  };\n\n  // Generate styles to sync sticky columns with \"real\" columns\n  const columnsCss = cellWidths\n    .map(\n      (width, index) => `\n    & th:nth-child(${index + 1}) {\n      width: ${width}px;\n    }\n  `,\n    )\n    .join('');\n  // Append to generated table styles\n  const allCss = tableCss + columnsCss;\n\n  return (\n    <div style={containerStyle} ref={stickyContainerRef}>\n      <TableGrid css={allCss}>\n        <thead>{children}</thead>\n      </TableGrid>\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","throttle","ResizeObserver","headerCellHeight","theme","Shadows","React","TableGrid"],"mappings":"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"}
+{"version":3,"file":"StickyHead.cjs","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { CSSProperties, ReactNode, RefObject, useEffect, useRef, useState } from 'react';\nimport throttle from 'lodash.throttle';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { theme } from '../../../theme';\n\nimport { headerCellHeight } from '../constants';\nimport { TableGrid } from './TableGrid';\nimport { TableCssOutput } from '../utils/generateTableCss';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: TableCssOutput;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n  cellWidths: number[];\n  stickyHeaderTop?: number;\n}\n\nexport function StickyHead({\n  children,\n  intersectionTargetRef,\n  containerRef,\n  cellWidths,\n  tableCss,\n  stickyHeaderTop = 0,\n}: StickyHeadProps) {\n  const stickyContainerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [containerRect, setContainerRect] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n    height: 0,\n  });\n\n  const lastLeftValue = useRef<null | number>(null);\n  const THROTTE_TIME_MS = 30;\n\n  const updateContainerDimensions = () => {\n    const targetRect = containerRef.current?.getBoundingClientRect();\n    const newRect = {\n      left: targetRect?.left || 0,\n      width: targetRect?.width || 0,\n      top: 0,\n      height: 48,\n    };\n    setContainerRect(newRect);\n  };\n\n  const updateContainerScrollPosition = () => {\n    if (!containerRef.current) return;\n    const xScrollOffset = containerRef.current.scrollLeft;\n    stickyContainerRef.current?.scrollTo(xScrollOffset, 0);\n  };\n\n  // Configure intersection observer to toggle sticky header on/off\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const options = {\n      rootMargin: `-${stickyHeaderTop}px 100% 0px 100%`,\n      threshold: 1.0,\n    };\n    const intersectionCallback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsVisible(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(intersectionCallback, options);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [intersectionTargetRef.current]);\n\n  // Calculate sticky header position and size to match table container\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    updateContainerDimensions();\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when container element is resized\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const resizeObserverCallback = throttle(updateContainerDimensions, THROTTE_TIME_MS); // Throttle events\n    const resizeObserver = new ResizeObserver(resizeObserverCallback);\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when document scrolls\n  // will only call updateContainerDimensions on horizontal scroll\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const scrollCallback = throttle(() => {\n      const { left } = containerRef.current?.getBoundingClientRect() || {};\n      if (left && lastLeftValue.current !== left) {\n        updateContainerDimensions();\n        lastLeftValue.current = left;\n      }\n    }, THROTTE_TIME_MS); // Throttle events\n    document.addEventListener('scroll', scrollCallback);\n    return () => document.removeEventListener('scroll', scrollCallback); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Sync container scrolling\n\n  useEffect(() => {\n    updateContainerScrollPosition();\n  }, [isVisible]);\n\n  useEffect(() => {\n    containerRef.current?.addEventListener('scroll', updateContainerScrollPosition);\n    return () => {\n      containerRef.current?.removeEventListener('scroll', updateContainerScrollPosition);\n    };\n  }, [containerRef.current]);\n\n  // Render sticky header\n\n  if (!isVisible) return null;\n\n  const containerStyle: CSSProperties = {\n    ...containerRect,\n    height: headerCellHeight,\n    position: 'fixed',\n    zIndex: 5,\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,\n    borderTop: `1px solid ${theme.colors.neutral.grey.base}`,\n    boxShadow: Shadows.base,\n    top: `${stickyHeaderTop}px` || '0px',\n  };\n\n  // Generate rules to sync sticky columns with \"real\" columns\n  const columnRules = cellWidths.map(\n    (width, index) => `th:nth-child(${index + 1}) { width: ${width}px; }`,\n  );\n\n  return (\n    <div style={containerStyle} ref={stickyContainerRef}>\n      <TableGrid tableCss={tableCss} extraRules={columnRules}>\n        <thead>{children}</thead>\n      </TableGrid>\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","throttle","ResizeObserver","headerCellHeight","theme","Shadows","React","TableGrid"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import React, { ReactNode, RefObject } from 'react';
+import { TableCssOutput } from '../utils/generateTableCss';
 export interface StickyHeadProps {
-    tableCss: string;
+    tableCss: TableCssOutput;
     children?: ReactNode;
     intersectionTargetRef: RefObject<HTMLElement>;
     containerRef: RefObject<HTMLElement>;

package/dist/components/DataTable/components/StickyHead.js

@@ -117,18 +117,10 @@ function StickyHead({ children, intersectionTargetRef, containerRef, cellWidths,
         boxShadow: Shadows.base,
         top: `${stickyHeaderTop}px` || '0px',
     };
-    // Generate styles to sync sticky columns with "real" columns
-    const columnsCss = cellWidths
-        .map((width, index) => `
-    & th:nth-child(${index + 1}) {
-      width: ${width}px;
-    }
-  `)
-        .join('');
-    // Append to generated table styles
-    const allCss = tableCss + columnsCss;
+    // Generate rules to sync sticky columns with "real" columns
+    const columnRules = cellWidths.map((width, index) => `th:nth-child(${index + 1}) { width: ${width}px; }`);
     return (React__default.createElement("div", { style: containerStyle, ref: stickyContainerRef },
-        React__default.createElement(TableGrid, { css: allCss },
+        React__default.createElement(TableGrid, { tableCss: tableCss, extraRules: columnRules },
             React__default.createElement("thead", null, children))));
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHead.js","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { CSSProperties, ReactNode, RefObject, useEffect, useRef, useState } from 'react';\nimport throttle from 'lodash.throttle';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { theme } from '../../../theme';\n\nimport { headerCellHeight } from '../constants';\nimport { TableGrid } from './TableGrid';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: string;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n  cellWidths: number[];\n  stickyHeaderTop?: number;\n}\n\nexport function StickyHead({\n  children,\n  intersectionTargetRef,\n  containerRef,\n  cellWidths,\n  tableCss,\n  stickyHeaderTop = 0,\n}: StickyHeadProps) {\n  const stickyContainerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [containerRect, setContainerRect] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n    height: 0,\n  });\n\n  const lastLeftValue = useRef<null | number>(null);\n  const THROTTE_TIME_MS = 30;\n\n  const updateContainerDimensions = () => {\n    const targetRect = containerRef.current?.getBoundingClientRect();\n    const newRect = {\n      left: targetRect?.left || 0,\n      width: targetRect?.width || 0,\n      top: 0,\n      height: 48,\n    };\n    setContainerRect(newRect);\n  };\n\n  const updateContainerScrollPosition = () => {\n    if (!containerRef.current) return;\n    const xScrollOffset = containerRef.current.scrollLeft;\n    stickyContainerRef.current?.scrollTo(xScrollOffset, 0);\n  };\n\n  // Configure intersection observer to toggle sticky header on/off\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const options = {\n      rootMargin: `-${stickyHeaderTop}px 100% 0px 100%`,\n      threshold: 1.0,\n    };\n    const intersectionCallback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsVisible(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(intersectionCallback, options);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [intersectionTargetRef.current]);\n\n  // Calculate sticky header position and size to match table container\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    updateContainerDimensions();\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when container element is resized\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const resizeObserverCallback = throttle(updateContainerDimensions, THROTTE_TIME_MS); // Throttle events\n    const resizeObserver = new ResizeObserver(resizeObserverCallback);\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when document scrolls\n  // will only call updateContainerDimensions on horizontal scroll\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const scrollCallback = throttle(() => {\n      const { left } = containerRef.current?.getBoundingClientRect() || {};\n      if (left && lastLeftValue.current !== left) {\n        updateContainerDimensions();\n        lastLeftValue.current = left;\n      }\n    }, THROTTE_TIME_MS); // Throttle events\n    document.addEventListener('scroll', scrollCallback);\n    return () => document.removeEventListener('scroll', scrollCallback); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Sync container scrolling\n\n  useEffect(() => {\n    updateContainerScrollPosition();\n  }, [isVisible]);\n\n  useEffect(() => {\n    containerRef.current?.addEventListener('scroll', updateContainerScrollPosition);\n    return () => {\n      containerRef.current?.removeEventListener('scroll', updateContainerScrollPosition);\n    };\n  }, [containerRef.current]);\n\n  // Render sticky header\n\n  if (!isVisible) return null;\n\n  const containerStyle: CSSProperties = {\n    ...containerRect,\n    height: headerCellHeight,\n    position: 'fixed',\n    zIndex: 5,\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,\n    borderTop: `1px solid ${theme.colors.neutral.grey.base}`,\n    boxShadow: Shadows.base,\n    top: `${stickyHeaderTop}px` || '0px',\n  };\n\n  // Generate styles to sync sticky columns with \"real\" columns\n  const columnsCss = cellWidths\n    .map(\n      (width, index) => `\n    & th:nth-child(${index + 1}) {\n      width: ${width}px;\n    }\n  `,\n    )\n    .join('');\n  // Append to generated table styles\n  const allCss = tableCss + columnsCss;\n\n  return (\n    <div style={containerStyle} ref={stickyContainerRef}>\n      <TableGrid css={allCss}>\n        <thead>{children}</thead>\n      </TableGrid>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"StickyHead.js","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\nimport React, { CSSProperties, ReactNode, RefObject, useEffect, useRef, useState } from 'react';\nimport throttle from 'lodash.throttle';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { theme } from '../../../theme';\n\nimport { headerCellHeight } from '../constants';\nimport { TableGrid } from './TableGrid';\nimport { TableCssOutput } from '../utils/generateTableCss';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: TableCssOutput;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n  cellWidths: number[];\n  stickyHeaderTop?: number;\n}\n\nexport function StickyHead({\n  children,\n  intersectionTargetRef,\n  containerRef,\n  cellWidths,\n  tableCss,\n  stickyHeaderTop = 0,\n}: StickyHeadProps) {\n  const stickyContainerRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n  const [containerRect, setContainerRect] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n    height: 0,\n  });\n\n  const lastLeftValue = useRef<null | number>(null);\n  const THROTTE_TIME_MS = 30;\n\n  const updateContainerDimensions = () => {\n    const targetRect = containerRef.current?.getBoundingClientRect();\n    const newRect = {\n      left: targetRect?.left || 0,\n      width: targetRect?.width || 0,\n      top: 0,\n      height: 48,\n    };\n    setContainerRect(newRect);\n  };\n\n  const updateContainerScrollPosition = () => {\n    if (!containerRef.current) return;\n    const xScrollOffset = containerRef.current.scrollLeft;\n    stickyContainerRef.current?.scrollTo(xScrollOffset, 0);\n  };\n\n  // Configure intersection observer to toggle sticky header on/off\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const options = {\n      rootMargin: `-${stickyHeaderTop}px 100% 0px 100%`,\n      threshold: 1.0,\n    };\n    const intersectionCallback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsVisible(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(intersectionCallback, options);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [intersectionTargetRef.current]);\n\n  // Calculate sticky header position and size to match table container\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    updateContainerDimensions();\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when container element is resized\n\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const resizeObserverCallback = throttle(updateContainerDimensions, THROTTE_TIME_MS); // Throttle events\n    const resizeObserver = new ResizeObserver(resizeObserverCallback);\n    resizeObserver.observe(containerRef.current);\n    return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Update dimensions when document scrolls\n  // will only call updateContainerDimensions on horizontal scroll\n  useEffect(() => {\n    if (!isVisible) return;\n    if (!containerRef.current) return;\n    const scrollCallback = throttle(() => {\n      const { left } = containerRef.current?.getBoundingClientRect() || {};\n      if (left && lastLeftValue.current !== left) {\n        updateContainerDimensions();\n        lastLeftValue.current = left;\n      }\n    }, THROTTE_TIME_MS); // Throttle events\n    document.addEventListener('scroll', scrollCallback);\n    return () => document.removeEventListener('scroll', scrollCallback); // eslint-disable-line consistent-return\n  }, [containerRef.current, isVisible]);\n\n  // Sync container scrolling\n\n  useEffect(() => {\n    updateContainerScrollPosition();\n  }, [isVisible]);\n\n  useEffect(() => {\n    containerRef.current?.addEventListener('scroll', updateContainerScrollPosition);\n    return () => {\n      containerRef.current?.removeEventListener('scroll', updateContainerScrollPosition);\n    };\n  }, [containerRef.current]);\n\n  // Render sticky header\n\n  if (!isVisible) return null;\n\n  const containerStyle: CSSProperties = {\n    ...containerRect,\n    height: headerCellHeight,\n    position: 'fixed',\n    zIndex: 5,\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,\n    borderTop: `1px solid ${theme.colors.neutral.grey.base}`,\n    boxShadow: Shadows.base,\n    top: `${stickyHeaderTop}px` || '0px',\n  };\n\n  // Generate rules to sync sticky columns with \"real\" columns\n  const columnRules = cellWidths.map(\n    (width, index) => `th:nth-child(${index + 1}) { width: ${width}px; }`,\n  );\n\n  return (\n    <div style={containerStyle} ref={stickyContainerRef}>\n      <TableGrid tableCss={tableCss} extraRules={columnRules}>\n        <thead>{children}</thead>\n      </TableGrid>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":"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"}

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

@@ -10,10 +10,46 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const TableGrid = React__default.default.forwardRef(({ css, className, children, style, ...rest }, ref) => {
+/**
+ * Prefixes each selector in a rule with the scope selector.
+ * Handles comma-separated selector lists (e.g. "th::after, td::after { ... }")
+ * by scoping every selector, not just the first.
+ */
+function scopeRule(scopeSelector, 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((selector) => `${scopeSelector} ${selector.trim()}`)
+        .join(', ');
+    return `${scopedSelectors} ${bodyPart}`;
+}
+/**
+ * Builds a complete scoped stylesheet from properties and rules.
+ * No CSS nesting dependency.
+ */
+function buildScopedStyle(scopeSelector, properties, rules) {
+    const parts = [];
+    if (properties) {
+        parts.push(`${scopeSelector} { ${properties} }`);
+    }
+    rules.forEach((rule) => {
+        parts.push(scopeRule(scopeSelector, rule));
+    });
+    return parts.join('\n');
+}
+const TableGrid = React__default.default.forwardRef(({ tableCss, extraRules, className, children, style, ...rest }, ref) => {
     const tableId = useTableId.useTableId();
+    const scopeSelector = `[data-table-id="${tableId}"]`;
+    const scopedStyle = React.useMemo(() => {
+        const allRules = extraRules ? [...tableCss.rules, ...extraRules] : tableCss.rules;
+        return buildScopedStyle(scopeSelector, tableCss.properties, allRules);
+    }, [tableCss, extraRules, scopeSelector]);
     return (React__default.default.createElement(React__default.default.Fragment, null,
-        css && (React__default.default.createElement("style", null, `[data-table-id="${tableId}"] { ${css} }`)),
+        scopedStyle && React__default.default.createElement("style", null, scopedStyle),
         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';

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { useTableId } from '../hooks/useTableId';\nimport { TableCssOutput } from '../utils/generateTableCss';\nimport styles from './DataTable.module.scss';\n\nexport interface TableGridProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Structured CSS output from generateTableCss */\n  tableCss: TableCssOutput;\n  /** Additional CSS rules to scope to this table (e.g. StickyHead column widths) */\n  extraRules?: string[];\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Prefixes each selector in a rule with the scope selector.\n * Handles comma-separated selector lists (e.g. \"th::after, td::after { ... }\")\n * by scoping every selector, not just the first.\n */\nfunction scopeRule(scopeSelector: string, rule: string): string {\n  const braceIndex = rule.indexOf('{');\n  if (braceIndex === -1) return `${scopeSelector} ${rule}`;\n\n  const selectorPart = rule.slice(0, braceIndex).trim();\n  const bodyPart = rule.slice(braceIndex);\n\n  const scopedSelectors = selectorPart\n    .split(',')\n    .map((selector) => `${scopeSelector} ${selector.trim()}`)\n    .join(', ');\n\n  return `${scopedSelectors} ${bodyPart}`;\n}\n\n/**\n * Builds a complete scoped stylesheet from properties and rules.\n * No CSS nesting dependency.\n */\nfunction buildScopedStyle(scopeSelector: string, properties: string, rules: string[]): string {\n  const parts: string[] = [];\n\n  if (properties) {\n    parts.push(`${scopeSelector} { ${properties} }`);\n  }\n\n  rules.forEach((rule) => {\n    parts.push(scopeRule(scopeSelector, rule));\n  });\n\n  return parts.join('\\n');\n}\n\nexport const TableGrid = React.forwardRef<HTMLTableElement, TableGridProps>(\n  ({ tableCss, extraRules, className, children, style, ...rest }, ref) => {\n    const tableId = useTableId();\n    const scopeSelector = `[data-table-id=\"${tableId}\"]`;\n\n    const scopedStyle = useMemo(() => {\n      const allRules = extraRules ? [...tableCss.rules, ...extraRules] : tableCss.rules;\n      return buildScopedStyle(scopeSelector, tableCss.properties, allRules);\n    }, [tableCss, extraRules, scopeSelector]);\n\n    return (\n      <>\n        {scopedStyle && <style>{scopedStyle}</style>}\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","useMemo","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAeA;;;;AAIG;AACH,SAAS,SAAS,CAAC,aAAqB,EAAE,IAAY,EAAA;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACpC,IAAI,UAAU,KAAK,EAAE;AAAE,QAAA,OAAO,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,IAAI,EAAE;AAExD,IAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,IAAI,EAAE;IACrD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;IAEvC,MAAM,eAAe,GAAG;SACrB,KAAK,CAAC,GAAG;AACT,SAAA,GAAG,CAAC,CAAC,QAAQ,KAAK,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAC,IAAI,EAAE,EAAE;SACvD,IAAI,CAAC,IAAI,CAAC;AAEb,IAAA,OAAO,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,QAAQ,EAAE;AACzC;AAEA;;;AAGG;AACH,SAAS,gBAAgB,CAAC,aAAqB,EAAE,UAAkB,EAAE,KAAe,EAAA;IAClF,MAAM,KAAK,GAAa,EAAE;AAE1B,IAAA,IAAI,UAAU,EAAE;QACd,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,aAAa,CAAA,GAAA,EAAM,UAAU,CAAA,EAAA,CAAI,CAAC;AACjD,IAAA;AAED,IAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;QACrB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAC5C,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;AACzB;AAEO,MAAM,SAAS,GAAGA,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,OAAO,GAAGC,qBAAU,EAAE;AAC5B,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,OAAO,IAAI;AAEpD,IAAA,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK;QACjF,OAAO,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;IACvE,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AAEzC,IAAA,QACEF,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;QACG,WAAW,IAAIA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,WAAW,CAAS;AAC5C,QAAAA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,EAAA,eAAA,EACO,OAAO,EACtB,SAAS,EAAEG,+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,11 +1,10 @@
 import React from 'react';
+import { TableCssOutput } from '../utils/generateTableCss';
 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;
+    /** Structured CSS output from generateTableCss */
+    tableCss: TableCssOutput;
+    /** Additional CSS rules to scope to this table (e.g. StickyHead column widths) */
+    extraRules?: string[];
     children?: React.ReactNode;
     className?: string;
 }

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

@@ -1,13 +1,49 @@
-import React__default from 'react';
+import React__default, { useMemo } 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 TableGrid = React__default.forwardRef(({ css, className, children, style, ...rest }, ref) => {
+/**
+ * Prefixes each selector in a rule with the scope selector.
+ * Handles comma-separated selector lists (e.g. "th::after, td::after { ... }")
+ * by scoping every selector, not just the first.
+ */
+function scopeRule(scopeSelector, 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((selector) => `${scopeSelector} ${selector.trim()}`)
+        .join(', ');
+    return `${scopedSelectors} ${bodyPart}`;
+}
+/**
+ * Builds a complete scoped stylesheet from properties and rules.
+ * No CSS nesting dependency.
+ */
+function buildScopedStyle(scopeSelector, properties, rules) {
+    const parts = [];
+    if (properties) {
+        parts.push(`${scopeSelector} { ${properties} }`);
+    }
+    rules.forEach((rule) => {
+        parts.push(scopeRule(scopeSelector, rule));
+    });
+    return parts.join('\n');
+}
+const TableGrid = React__default.forwardRef(({ tableCss, extraRules, className, children, style, ...rest }, ref) => {
     const tableId = useTableId();
+    const scopeSelector = `[data-table-id="${tableId}"]`;
+    const scopedStyle = useMemo(() => {
+        const allRules = extraRules ? [...tableCss.rules, ...extraRules] : tableCss.rules;
+        return buildScopedStyle(scopeSelector, tableCss.properties, allRules);
+    }, [tableCss, extraRules, scopeSelector]);
     return (React__default.createElement(React__default.Fragment, null,
-        css && (React__default.createElement("style", null, `[data-table-id="${tableId}"] { ${css} }`)),
+        scopedStyle && React__default.createElement("style", null, scopedStyle),
         React__default.createElement("table", { ref: ref, "data-table-id": tableId, className: buildClassnames([styles.tableGrid, className]), style: style, ...rest }, children)));
 });
 TableGrid.displayName = 'TableGrid';

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

@@ -1 +1 @@
-{"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;;;;"}
+{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { useTableId } from '../hooks/useTableId';\nimport { TableCssOutput } from '../utils/generateTableCss';\nimport styles from './DataTable.module.scss';\n\nexport interface TableGridProps extends React.TableHTMLAttributes<HTMLTableElement> {\n  /** Structured CSS output from generateTableCss */\n  tableCss: TableCssOutput;\n  /** Additional CSS rules to scope to this table (e.g. StickyHead column widths) */\n  extraRules?: string[];\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Prefixes each selector in a rule with the scope selector.\n * Handles comma-separated selector lists (e.g. \"th::after, td::after { ... }\")\n * by scoping every selector, not just the first.\n */\nfunction scopeRule(scopeSelector: string, rule: string): string {\n  const braceIndex = rule.indexOf('{');\n  if (braceIndex === -1) return `${scopeSelector} ${rule}`;\n\n  const selectorPart = rule.slice(0, braceIndex).trim();\n  const bodyPart = rule.slice(braceIndex);\n\n  const scopedSelectors = selectorPart\n    .split(',')\n    .map((selector) => `${scopeSelector} ${selector.trim()}`)\n    .join(', ');\n\n  return `${scopedSelectors} ${bodyPart}`;\n}\n\n/**\n * Builds a complete scoped stylesheet from properties and rules.\n * No CSS nesting dependency.\n */\nfunction buildScopedStyle(scopeSelector: string, properties: string, rules: string[]): string {\n  const parts: string[] = [];\n\n  if (properties) {\n    parts.push(`${scopeSelector} { ${properties} }`);\n  }\n\n  rules.forEach((rule) => {\n    parts.push(scopeRule(scopeSelector, rule));\n  });\n\n  return parts.join('\\n');\n}\n\nexport const TableGrid = React.forwardRef<HTMLTableElement, TableGridProps>(\n  ({ tableCss, extraRules, className, children, style, ...rest }, ref) => {\n    const tableId = useTableId();\n    const scopeSelector = `[data-table-id=\"${tableId}\"]`;\n\n    const scopedStyle = useMemo(() => {\n      const allRules = extraRules ? [...tableCss.rules, ...extraRules] : tableCss.rules;\n      return buildScopedStyle(scopeSelector, tableCss.properties, allRules);\n    }, [tableCss, extraRules, scopeSelector]);\n\n    return (\n      <>\n        {scopedStyle && <style>{scopedStyle}</style>}\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":";;;;;;AAeA;;;;AAIG;AACH,SAAS,SAAS,CAAC,aAAqB,EAAE,IAAY,EAAA;IACpD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACpC,IAAI,UAAU,KAAK,EAAE;AAAE,QAAA,OAAO,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,IAAI,EAAE;AAExD,IAAA,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,IAAI,EAAE;IACrD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;IAEvC,MAAM,eAAe,GAAG;SACrB,KAAK,CAAC,GAAG;AACT,SAAA,GAAG,CAAC,CAAC,QAAQ,KAAK,CAAA,EAAG,aAAa,CAAA,CAAA,EAAI,QAAQ,CAAC,IAAI,EAAE,EAAE;SACvD,IAAI,CAAC,IAAI,CAAC;AAEb,IAAA,OAAO,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,QAAQ,EAAE;AACzC;AAEA;;;AAGG;AACH,SAAS,gBAAgB,CAAC,aAAqB,EAAE,UAAkB,EAAE,KAAe,EAAA;IAClF,MAAM,KAAK,GAAa,EAAE;AAE1B,IAAA,IAAI,UAAU,EAAE;QACd,KAAK,CAAC,IAAI,CAAC,CAAA,EAAG,aAAa,CAAA,GAAA,EAAM,UAAU,CAAA,EAAA,CAAI,CAAC;AACjD,IAAA;AAED,IAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;QACrB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAC5C,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;AACzB;AAEO,MAAM,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACrE,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE;AAC5B,IAAA,MAAM,aAAa,GAAG,CAAA,gBAAA,EAAmB,OAAO,IAAI;AAEpD,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK;QACjF,OAAO,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC;IACvE,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;AAEzC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACG,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,WAAW,CAAS;AAC5C,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/utils/generateTableCss.cjs

@@ -5,86 +5,50 @@ var parseWidth = require('./parseWidth.cjs');
 var sumAll = require('./sumAll.cjs');
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    const pinnedLeftStyles = pinnedLeft.map((_, index) => `
-    th:nth-child(${index + 1}),
-    td:nth-child(${index + 1}) {
-      position: sticky;
-      left: ${cellWidths ? sumAll.sumAllBeforeIndex(cellWidths, index + 1) : 0}px;
-      z-index: 2;
-    }
-  `);
-    const pinnedRightStyles = pinnedRight.map((_, index) => `
-    th:nth-last-child(${index + 1}),
-    td:nth-last-child(${index + 1}) {
-      position: sticky;
-      right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
-    }
-  `);
-    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
-    const leftShadow = `
-    th:nth-child(${pinnedLeft.length})::after,
-    td:nth-child(${pinnedLeft.length})::after {
-      position: absolute;
-      transform: translate(100%);
-      top: 0;
-      right: 0;
-      bottom: -1px;
-      width: 30px;
-      content: "";
-      pointer-events: none;
-      box-sizing: border-box;
-      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
-    }
-  `;
-    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
-    const rightShadow = `
-    th:nth-last-child(${pinnedRight.length})::after,
-    td:nth-last-child(${pinnedRight.length})::after {
-      position: absolute;
-      transform: translate(-100%);
-      top: 0;
-      left: 0;
-      bottom: -1px;
-      width: 30px;
-      content: "";
-      pointer-events: none;
-      box-sizing: border-box;
-      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
-    }
-  `;
-    const stripingRow = `
-    tr:nth-child(odd) > td {
-      background-color: ${index.theme.colors.neutral.grey.lightest};
-    }
-
-    tr + tr > td {
-      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
-    }
-  `;
-    const stripingNested = `
-    tbody:nth-of-type(odd) > tr > td {
-      background-color: ${index.theme.colors.neutral.grey.lightest};
-    }
-
-    tbody + tbody > tr:first-child > td {
-      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
-    }
-  `;
-    return `
-    grid-template-columns: ${columns.map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); }).join(' ')};
-
-    th::after, td::after {
-      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
-    }
-
-    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
-    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
-
-    ${pinnedLeft.length > 0 ? leftShadow : ''}
-    ${pinnedRight.length > 0 ? rightShadow : ''}
-
-    ${stripingMode === 'nested' ? stripingNested : stripingRow}
-  `;
+    const rules = [];
+    // Pinned left columns
+    if (pinnedLeft.length > 0) {
+        pinnedLeft.forEach((_, index) => {
+            rules.push(`th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAll.sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`);
+        });
+    }
+    // Pinned right columns
+    if (pinnedRight.length > 0) {
+        pinnedRight.forEach((_, index) => {
+            rules.push(`th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`);
+        });
+    }
+    // Pseudo-element transition (only needed when pinned columns have shadows)
+    if (pinnedLeft.length > 0 || pinnedRight.length > 0) {
+        rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);
+    }
+    // Left shadow
+    if (pinnedLeft.length > 0) {
+        const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
+        rules.push(`th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
+    }
+    // Right shadow
+    if (pinnedRight.length > 0) {
+        const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
+        rules.push(`th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
+    }
+    // Striping
+    if (stripingMode === 'nested') {
+        rules.push(`tbody:nth-of-type(odd) > tr > td { background-color: ${index.theme.colors.neutral.grey.lightest}; }`);
+        rules.push(`tbody + tbody > tr:first-child > td { border-top: 1px solid ${index.theme.colors.neutral.grey.base}; }`);
+    }
+    else {
+        rules.push(`tr:nth-child(odd) > td { background-color: ${index.theme.colors.neutral.grey.lightest}; }`);
+        rules.push(`tr + tr > td { border-top: 1px solid ${index.theme.colors.neutral.grey.base}; }`);
+    }
+    // Grid template columns (applied as a property on the table element)
+    const gridTemplateColumns = columns
+        .map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); })
+        .join(' ');
+    return {
+        properties: `grid-template-columns: ${gridTemplateColumns};`,
+        rules,
+    };
 }
 
 exports.generateTableCss = generateTableCss;

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    ${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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"}
+{"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 type TableCssOutput = {\n  /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */\n  properties: string;\n  /** Fully-formed CSS rule blocks to be scoped to the table instance */\n  rules: string[];\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs): TableCssOutput {\n  const rules: string[] = [];\n\n  // Pinned left columns\n  if (pinnedLeft.length > 0) {\n    pinnedLeft.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`,\n      );\n    });\n  }\n\n  // Pinned right columns\n  if (pinnedRight.length > 0) {\n    pinnedRight.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`,\n      );\n    });\n  }\n\n  // Pseudo-element transition (only needed when pinned columns have shadows)\n  if (pinnedLeft.length > 0 || pinnedRight.length > 0) {\n    rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);\n  }\n\n  // Left shadow\n  if (pinnedLeft.length > 0) {\n    const isLeftShadowVisible =\n      !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Right shadow\n  if (pinnedRight.length > 0) {\n    const isRightShadowVisible =\n      !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Striping\n  if (stripingMode === 'nested') {\n    rules.push(\n      `tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  } else {\n    rules.push(\n      `tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  }\n\n  // Grid template columns (applied as a property on the table element)\n  const gridTemplateColumns = columns\n    .map((column) => parseWidth(columnWidths[column.id] ?? column.width))\n    .join(' ');\n\n  return {\n    properties: `grid-template-columns: ${gridTemplateColumns};`,\n    rules,\n  };\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":"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"}

package/dist/components/DataTable/utils/generateTableCss.d.ts

@@ -10,4 +10,10 @@ export type GenerateTableCssArgs = {
     columns: ColumnConfigs;
     enableTransition?: boolean;
 };
-export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): string;
+export type TableCssOutput = {
+    /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */
+    properties: string;
+    /** Fully-formed CSS rule blocks to be scoped to the table instance */
+    rules: string[];
+};
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): TableCssOutput;