@veeqo/ui 14.10.3-beta-3 → 14.10.4-beta-1

package/dist/components/DataTable/components/Header.js

@@ -1,24 +1,12 @@
-import React__default from 'react';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../../utils/assignCssVars.js';
+import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 import { alignmentToFlex } from '../utils/alignmentToFlex.js';
 import '../types.js';
+import 'react';
 import '../../../theme/modules/sizes.js';
-import { defaultCellSpacing } from '../constants.js';
-import styles from './DataTable.module.scss.js';
+import { headerCellHeight, defaultCellSpacing } from '../constants.js';
 
-const Header = React__default.forwardRef(({ align = 'left', spacing = defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (React__default.createElement("th", { ref: ref, className: buildClassnames([styles.header, className]), style: {
-        ...assignCssVars({
-            cellAlign: alignmentToFlex(align),
-            cellSpacing: theme.sizes[spacing],
-            cellSpan: span,
-            'header-z-index': zIndex,
-        }),
-        ...style,
-    }, ...rest }, children)));
-Header.displayName = 'Header';
+const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};border-bottom:1px solid ${theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
 
 export { Header };
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { theme } from '../../../theme';\nimport { HeaderProps } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing } from '../constants';\nimport styles from './DataTable.module.scss';\n\nexport const Header = React.forwardRef<HTMLTableCellElement, HeaderProps>(\n  ({ align = 'left', spacing = defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (\n    <th\n      ref={ref}\n      className={buildClassnames([styles.header, className])}\n      style={{\n        ...assignCssVars({\n          cellAlign: alignmentToFlex(align),\n          cellSpacing: theme.sizes[spacing],\n          cellSpan: span,\n          'header-z-index': zIndex,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </th>\n  ),\n);\n\nHeader.displayName = 'Header';\n"],"names":["React"],"mappings":";;;;;;;;;;;AAQO,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,kBAAkB,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC/GA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;AACjC,YAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,gBAAgB,EAAE,MAAM;SACzB,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"names":[],"mappings":";;;;;;;;AAMO,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EACnB,gBAAgB,sEAKP,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,CAAA,SAAA,EACtD,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,MAAM,CAAA,qCAAA,EAGrB,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBACzD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,yBAAA,EAChD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EAEtC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAA,CAAE;;;;"}

package/dist/components/DataTable/components/LoadingCellContent.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var React = require('react');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-require('uid/secure');
-var DataTable_module = require('./DataTable.module.scss.cjs');
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const LoadingCellContent = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.loadingCellContent, className]), ...rest })));
-LoadingCellContent.displayName = 'LoadingCellContent';
+/* Loading content shimmer animation */
+const shimmerLight = index.theme.colors.neutral.grey.base;
+const shimmerDark = index.theme.colors.neutral.grey.dark;
+const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${index.theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
 
 exports.LoadingCellContent = LoadingCellContent;
 //# sourceMappingURL=LoadingCellContent.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingCellContent.cjs","sources":["../../../../src/components/DataTable/components/LoadingCellContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface LoadingCellContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nexport const LoadingCellContent = React.forwardRef<HTMLDivElement, LoadingCellContentProps>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.loadingCellContent, className])} {...rest} />\n  ),\n);\n\nLoadingCellContent.displayName = 'LoadingCellContent';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AAQO,MAAM,kBAAkB,GAAGA,sBAAK,CAAC,UAAU,CAChD,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAChG;AAGH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"LoadingCellContent.cjs","sources":["../../../../src/components/DataTable/components/LoadingCellContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\n/* Loading content shimmer animation */\nconst shimmerLight = theme.colors.neutral.grey.base;\nconst shimmerDark = theme.colors.neutral.grey.dark;\n\nexport const LoadingCellContent = styled.div`\n  height: 20px;\n  width: 75%;\n  border-radius: ${theme.radius.base};\n\n  background: ${shimmerLight};\n  background-image: linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n\n  @keyframes placeholderShimmer {\n    0% {\n      background-position: -468px 0;\n    }\n\n    100% {\n      background-position: 468px 0;\n    }\n  }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA;AACA,MAAM,YAAY,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACnD,MAAM,WAAW,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAE3C,MAAM,kBAAkB,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oCAAA,EAGzBD,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,YAAA,EAEpB,YAAY,CAAA,uDAAA,EAGtB,YAAY,CAAA,UAAA,EACZ,WAAW,cACX,YAAY,CAAA,WAAA,EACZ,YAAY,CAAA,8TAAA;;;;"}

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

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

package/dist/components/DataTable/components/LoadingCellContent.js

@@ -1,10 +1,10 @@
-import React__default from 'react';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './DataTable.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-const LoadingCellContent = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.loadingCellContent, className]), ...rest })));
-LoadingCellContent.displayName = 'LoadingCellContent';
+/* Loading content shimmer animation */
+const shimmerLight = theme.colors.neutral.grey.base;
+const shimmerDark = theme.colors.neutral.grey.dark;
+const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
 
 export { LoadingCellContent };
 //# sourceMappingURL=LoadingCellContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingCellContent.js","sources":["../../../../src/components/DataTable/components/LoadingCellContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface LoadingCellContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nexport const LoadingCellContent = React.forwardRef<HTMLDivElement, LoadingCellContentProps>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.loadingCellContent, className])} {...rest} />\n  ),\n);\n\nLoadingCellContent.displayName = 'LoadingCellContent';\n"],"names":["React"],"mappings":";;;;;AAQO,MAAM,kBAAkB,GAAGA,cAAK,CAAC,UAAU,CAChD,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAChG;AAGH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
+{"version":3,"file":"LoadingCellContent.js","sources":["../../../../src/components/DataTable/components/LoadingCellContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\n/* Loading content shimmer animation */\nconst shimmerLight = theme.colors.neutral.grey.base;\nconst shimmerDark = theme.colors.neutral.grey.dark;\n\nexport const LoadingCellContent = styled.div`\n  height: 20px;\n  width: 75%;\n  border-radius: ${theme.radius.base};\n\n  background: ${shimmerLight};\n  background-image: linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n\n  @keyframes placeholderShimmer {\n    0% {\n      background-position: -468px 0;\n    }\n\n    100% {\n      background-position: 468px 0;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAGA;AACA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACnD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAE3C,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oCAAA,EAGzB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,YAAA,EAEpB,YAAY,CAAA,uDAAA,EAGtB,YAAY,CAAA,UAAA,EACZ,WAAW,cACX,YAAY,CAAA,WAAA,EACZ,YAAY,CAAA,8TAAA;;;;"}

package/dist/components/DataTable/components/NoWrap.cjs

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

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

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

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

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

package/dist/components/DataTable/components/NoWrap.js

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

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

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

package/dist/components/DataTable/components/Row.cjs

@@ -1,30 +1,33 @@
 'use strict';
 
-var React = require('react');
-var buildClassnames = require('../../../utils/buildClassnames.cjs');
-require('uid/secure');
-var assignCssVars = require('../../../utils/assignCssVars.cjs');
-var DataTable_module = require('./DataTable.module.scss.cjs');
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const Row = React__default.default.forwardRef(
-// expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.
-// They are used by parent components for state tracking.
-({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (React__default.default.createElement("tr", { ref: ref, className: buildClassnames.buildClassnames([
-        DataTable_module.row,
-        selected && DataTable_module.rowSelected,
-        accentColor && DataTable_module.rowAccentColor,
-        className,
-    ]), style: {
-        ...assignCssVars.assignCssVars({
-            rowAccentColor: accentColor,
-        }),
-        ...style,
-    }, ...rest }, children)));
-Row.displayName = 'Row';
+const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+    `
+    &&&& > td {
+      background-color: ${index.theme.colors.brand.blue.lightest};
+    }
+  `};${({ accentColor }) => accentColor &&
+    `
+    &> *:first-child {
+      position: relative;
+    }
+
+    & > *:first-child::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: ${accentColor};
+    }
+  `}`;
 
 exports.Row = Row;
 //# sourceMappingURL=Row.cjs.map

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

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

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

@@ -1,10 +1,7 @@
-import React from 'react';
-export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface RowProps {
     accentColor?: string;
     selected?: boolean;
     expanded?: boolean;
     disabled?: boolean;
-    children?: React.ReactNode;
-    className?: string;
 }
-export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>>;
+export declare const Row: import("styled-components").StyledComponent<"tr", any, RowProps, never>;

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

@@ -1,24 +1,27 @@
-import React__default from 'react';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-import { assignCssVars } from '../../../utils/assignCssVars.js';
-import styles from './DataTable.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-const Row = React__default.forwardRef(
-// expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.
-// They are used by parent components for state tracking.
-({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (React__default.createElement("tr", { ref: ref, className: buildClassnames([
-        styles.row,
-        selected && styles.rowSelected,
-        accentColor && styles.rowAccentColor,
-        className,
-    ]), style: {
-        ...assignCssVars({
-            rowAccentColor: accentColor,
-        }),
-        ...style,
-    }, ...rest }, children)));
-Row.displayName = 'Row';
+const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
+    `
+    &&&& > td {
+      background-color: ${theme.colors.brand.blue.lightest};
+    }
+  `};${({ accentColor }) => accentColor &&
+    `
+    &> *:first-child {
+      position: relative;
+    }
+
+    & > *:first-child::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 4px;
+      background-color: ${accentColor};
+    }
+  `}`;
 
 export { Row };
 //# sourceMappingURL=Row.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -113,8 +113,6 @@ function StickyHead({ children, intersectionTargetRef, containerRef, cellWidths,
     // Render sticky header
     if (!isVisible)
         return null;
-    // Generate rules to sync sticky columns with "real" columns
-    const columnRules = cellWidths.map((width, index) => `th:nth-child(${index + 1}) { width: ${width}px; }`);
     const containerStyle = {
         ...containerRect,
         height: constants.headerCellHeight,
@@ -127,8 +125,18 @@ function StickyHead({ children, intersectionTargetRef, containerRef, cellWidths,
         boxShadow: shadows.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;
     return (React__default.default.createElement("div", { style: containerStyle, ref: stickyContainerRef },
-        React__default.default.createElement(TableGrid.TableGrid, { tableCss: tableCss, extraRules: columnRules },
+        React__default.default.createElement(TableGrid.TableGrid, { css: allCss },
             React__default.default.createElement("thead", null, children))));
 }
 

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 { 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  // 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  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  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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"}
+{"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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"}

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

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

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

@@ -105,8 +105,6 @@ function StickyHead({ children, intersectionTargetRef, containerRef, cellWidths,
     // Render sticky header
     if (!isVisible)
         return null;
-    // Generate rules to sync sticky columns with "real" columns
-    const columnRules = cellWidths.map((width, index) => `th:nth-child(${index + 1}) { width: ${width}px; }`);
     const containerStyle = {
         ...containerRect,
         height: headerCellHeight,
@@ -119,8 +117,18 @@ 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;
     return (React__default.createElement("div", { style: containerStyle, ref: stickyContainerRef },
-        React__default.createElement(TableGrid, { tableCss: tableCss, extraRules: columnRules },
+        React__default.createElement(TableGrid, { css: allCss },
             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 { 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  // 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  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  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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"}
+{"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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"}