@veeqo/ui 14.14.0-beta-1 → 14.14.0

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs

@@ -14,18 +14,15 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/**
- * MiniAlert component for compact inline status indicators with an icon and text label.
- */
-const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
+const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
     const DefaultIcon = constants.IconMap[variant];
-    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
+    return (React__default.default.createElement(FlexRow.FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.default.createElement(FlexRow.FlexRow, { style: assignCssVars.assignCssVars({ iconColor: customIconColour }), className: buildClassnames.buildClassnames([
                 Alerts_module.icon,
                 Alerts_module[`${variant}-alert-variant`],
                 MiniAlert_module['mini-alert-size'],
-            ]), flexWrap: "nowrap" }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
-        titleSlot || (React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title))));
+            ]) }, iconSlot || React__default.default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.default.createElement(Text.Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars.assignCssVars({ textColor: customTitleColour }), className: buildClassnames.buildClassnames([MiniAlert_module.text, MiniAlert_module[`${variant}-variant`]]) }, title)));
 };
 
 exports.MiniAlert = MiniAlert;

package/dist/components/Alerts/MiniAlert/MiniAlert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n  title,\n  titleSlot,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      {titleSlot || (\n        <Text\n          variant={isBold ? 'bodyBold' : 'body'}\n          style={assignCssVars({ textColor: customTitleColour })}\n          className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n        >\n          {title}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,sBAAA,CAAA,aAAA,CAACM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}
+{"version":3,"file":"MiniAlert.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      <Text\n        variant={isBold ? 'bodyBold' : 'body'}\n        style={assignCssVars({ textColor: customTitleColour })}\n        className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n      >\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["IconMap","React","FlexRow","assignCssVars","buildClassnames","alertStyles","styles","Text"],"mappings":";;;;;;;;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAGA,iBAAO,CAAC,OAAO,CAAC;IAEpC,QACEC,qCAACC,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAD,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EACN,KAAK,EAAEC,2BAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAEC,+BAAe,CAAC;AACzB,gBAAAC,aAAW,CAAC,IAAI;AAChB,gBAAAA,aAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvCC,gBAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIL,sBAAA,CAAA,aAAA,CAAC,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,sBAAA,CAAA,aAAA,CAACM,SAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAEJ,2BAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAEC,+BAAe,CAAC,CAACE,gBAAM,CAAC,IAAI,EAAEA,gBAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.d.ts

@@ -1,6 +1,3 @@
 import React from 'react';
 import { MiniAlertProps } from './types';
-/**
- * MiniAlert component for compact inline status indicators with an icon and text label.
- */
-export declare const MiniAlert: ({ title, titleSlot, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;
+export declare const MiniAlert: ({ title, variant, iconSlot, customTitleColour, customIconColour, isBold, className, ...divProps }: MiniAlertProps) => React.JSX.Element;

package/dist/components/Alerts/MiniAlert/MiniAlert.js

@@ -8,18 +8,15 @@ import { Text } from '../../Text/Text.js';
 import styles from './MiniAlert.module.scss.js';
 import alertStyles from '../Alerts.module.scss.js';
 
-/**
- * MiniAlert component for compact inline status indicators with an icon and text label.
- */
-const MiniAlert = ({ title, titleSlot, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
+const MiniAlert = ({ title, variant = 'default', iconSlot, customTitleColour, customIconColour, isBold = true, className, ...divProps }) => {
     const DefaultIcon = IconMap[variant];
-    return (React__default.createElement(FlexRow, { gap: "sm", role: "status", flexWrap: "nowrap", ...divProps, className: className },
+    return (React__default.createElement(FlexRow, { gap: "xs", role: "status", flexWrap: "nowrap", ...divProps, className: className },
         React__default.createElement(FlexRow, { style: assignCssVars({ iconColor: customIconColour }), className: buildClassnames([
                 alertStyles.icon,
                 alertStyles[`${variant}-alert-variant`],
                 styles['mini-alert-size'],
-            ]), flexWrap: "nowrap" }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
-        titleSlot || (React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title))));
+            ]) }, iconSlot || React__default.createElement(DefaultIcon, { role: "presentation" })),
+        React__default.createElement(Text, { variant: isBold ? 'bodyBold' : 'body', style: assignCssVars({ textColor: customTitleColour }), className: buildClassnames([styles.text, styles[`${variant}-variant`]]) }, title)));
 };
 
 export { MiniAlert };

package/dist/components/Alerts/MiniAlert/MiniAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\n/**\n * MiniAlert component for compact inline status indicators with an icon and text label.\n */\nexport const MiniAlert = ({\n  title,\n  titleSlot,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"sm\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n        flexWrap=\"nowrap\"\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      {titleSlot || (\n        <Text\n          variant={isBold ? 'bodyBold' : 'body'}\n          style={assignCssVars({ textColor: customTitleColour })}\n          className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n        >\n          {title}\n        </Text>\n      )}\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWA;;AAEG;AACI,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;AAC1B,aAAA,CAAC,EACF,QAAQ,EAAC,QAAQ,IAEhB,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAC,cAAc,GAAG,CACxC;QACT,SAAS,KACRA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,EAAA,EAEtE,KAAK,CACD,CACR,CACO;AAEd;;;;"}
+{"version":3,"file":"MiniAlert.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { FlexRow } from '../../Flex/FlexRow';\nimport { IconMap } from '../constants';\nimport { Text } from '../../Text';\n\nimport { MiniAlertProps } from './types';\n\nimport styles from './MiniAlert.module.scss';\nimport alertStyles from '../Alerts.module.scss';\n\nexport const MiniAlert = ({\n  title,\n  variant = 'default',\n  iconSlot,\n  customTitleColour,\n  customIconColour,\n  isBold = true,\n  className,\n  ...divProps\n}: MiniAlertProps) => {\n  const DefaultIcon = IconMap[variant];\n\n  return (\n    <FlexRow gap=\"xs\" role=\"status\" flexWrap=\"nowrap\" {...divProps} className={className}>\n      <FlexRow\n        style={assignCssVars({ iconColor: customIconColour })}\n        className={buildClassnames([\n          alertStyles.icon,\n          alertStyles[`${variant}-alert-variant`],\n          styles['mini-alert-size'],\n        ])}\n      >\n        {iconSlot || <DefaultIcon role=\"presentation\" />}\n      </FlexRow>\n      <Text\n        variant={isBold ? 'bodyBold' : 'body'}\n        style={assignCssVars({ textColor: customTitleColour })}\n        className={buildClassnames([styles.text, styles[`${variant}-variant`]])}\n      >\n        {title}\n      </Text>\n    </FlexRow>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAWO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,GAAG,QAAQ,EACI,KAAI;AACnB,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;IAEpC,QACEA,6BAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAA;AAClF,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,EACrD,SAAS,EAAE,eAAe,CAAC;AACzB,gBAAA,WAAW,CAAC,IAAI;AAChB,gBAAA,WAAW,CAAC,CAAA,EAAG,OAAO,CAAA,cAAA,CAAgB,CAAC;gBACvC,MAAM,CAAC,iBAAiB,CAAC;aAC1B,CAAC,EAAA,EAED,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,WAAW,IAAC,IAAI,EAAC,cAAc,EAAA,CAAG,CACxC;QACVA,cAAA,CAAA,aAAA,CAAC,IAAI,IACH,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,EACrC,KAAK,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC,EACtD,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAA,QAAA,CAAU,CAAC,CAAC,CAAC,IAEtE,KAAK,CACD,CACC;AAEd;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._text_1x68v_1 {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
-var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
+___$insertStyle("._text_hueci_1 {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n._error-variant_hueci_5 {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n._default-variant_hueci_9,\n._success-variant_hueci_10,\n._info-variant_hueci_11,\n._warning-variant_hueci_12,\n._recommended-variant_hueci_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_hueci_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
+var styles = {"text":"_text_hueci_1","error-variant":"_error-variant_hueci_5","default-variant":"_default-variant_hueci_9","success-variant":"_success-variant_hueci_10","info-variant":"_info-variant_hueci_11","warning-variant":"_warning-variant_hueci_12","recommended-variant":"_recommended-variant_hueci_13","mini-alert-size":"_mini-alert-size_hueci_17"};
 
 module.exports = styles;
 //# sourceMappingURL=MiniAlert.module.scss.cjs.map

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AAEE,eAAA,CAAA,kcAAA;;;;;"}
+{"version":3,"file":"MiniAlert.module.scss.cjs","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommended-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kcAAA;;;;;"}

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../_virtual/____insertStyle.js';
 
-insertStyle("._text_1x68v_1 {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n._error-variant_1x68v_5 {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n._default-variant_1x68v_9,\n._success-variant_1x68v_10,\n._info-variant_1x68v_11,\n._warning-variant_1x68v_12,\n._recommend-variant_1x68v_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_1x68v_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
-var styles = {"text":"_text_1x68v_1","error-variant":"_error-variant_1x68v_5","default-variant":"_default-variant_1x68v_9","success-variant":"_success-variant_1x68v_10","info-variant":"_info-variant_1x68v_11","warning-variant":"_warning-variant_1x68v_12","recommend-variant":"_recommend-variant_1x68v_13","mini-alert-size":"_mini-alert-size_1x68v_17"};
+insertStyle("._text_hueci_1 {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n._error-variant_hueci_5 {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n._default-variant_hueci_9,\n._success-variant_hueci_10,\n._info-variant_hueci_11,\n._warning-variant_hueci_12,\n._recommended-variant_hueci_13 {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n._mini-alert-size_hueci_17 {\n  --alert-icon-size: var(--sizes-base);\n}");
+var styles = {"text":"_text_hueci_1","error-variant":"_error-variant_hueci_5","default-variant":"_default-variant_hueci_9","success-variant":"_success-variant_hueci_10","info-variant":"_info-variant_hueci_11","warning-variant":"_warning-variant_hueci_12","recommended-variant":"_recommended-variant_hueci_13","mini-alert-size":"_mini-alert-size_hueci_17"};
 
 export { styles as default };
 //# sourceMappingURL=MiniAlert.module.scss.js.map

package/dist/components/Alerts/MiniAlert/MiniAlert.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":["// !important needed to override Text component's inline variant colour\n.text {\n  color: var(--text-color, var(--colors-neutral-ink-dark)) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-dark);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommend-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEEA,WAAA,CAAA,kcAAA;;;;;"}
+{"version":3,"file":"MiniAlert.module.scss.js","sources":["../../../../src/components/Alerts/MiniAlert/MiniAlert.module.scss"],"sourcesContent":[".text {\n  color: var(--text-color, --colors-neutral-ink-dark) !important;\n}\n\n.error-variant {\n  --text-color: var(--colors-secondary-red-darkest);\n}\n\n.default-variant,\n.success-variant,\n.info-variant,\n.warning-variant,\n.recommended-variant {\n  --text-color: var(--colors-neutral-ink-dark);\n}\n\n.mini-alert-size {\n  --alert-icon-size: var(--sizes-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kcAAA;;;;;"}

package/dist/components/Alerts/MiniAlert/index.d.ts

@@ -1,2 +1 @@
 export { MiniAlert } from './MiniAlert';
-export type { MiniAlertProps } from './types';

package/dist/components/Alerts/MiniAlert/types.d.ts

@@ -1,15 +1,7 @@
 /// <reference types="react" />
-import { BaseAlertProps, MiniAlertVariants } from '../types';
-export type { MiniAlertVariants } from '../types';
-export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & Omit<BaseAlertProps, 'variant'> & {
-    /** Visual style variant */
-    variant?: MiniAlertVariants;
-    /** Replaces the default title text with custom content (e.g. text with inline links) */
-    titleSlot?: React.ReactNode;
-    /** Override the icon colour */
+import { BaseAlertProps } from '../types';
+export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & BaseAlertProps & {
     customIconColour?: string;
-    /** Override the title text colour */
     customTitleColour?: string;
-    /** Whether the title text is bold. Defaults to `true` */
     isBold?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":["InfoFillIcon","CriticalIcon","SuccessFillIcon","HelpFillIcon","WarningIcon","RecommendIcon"],"mappings":";;;;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAEA,2BAAY;AACrB,IAAA,KAAK,EAAEC,2BAAY;AACnB,IAAA,OAAO,EAAEC,8BAAe;AACxB,IAAA,IAAI,EAAEC,2BAAY;AAClB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;;;;"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { AlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":["InfoFillIcon","CriticalIcon","SuccessFillIcon","HelpFillIcon","WarningIcon","RecommendIcon"],"mappings":";;;;;;;;;;AAWO,MAAM,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAEA,2BAAY;AACrB,IAAA,KAAK,EAAEC,2BAAY;AACnB,IAAA,OAAO,EAAEC,8BAAe;AACxB,IAAA,IAAI,EAAEC,2BAAY;AAClB,IAAA,OAAO,EAAEC,0BAAW;AACpB,IAAA,SAAS,EAAEC,2BAAa;;;;;"}

package/dist/components/Alerts/constants.d.ts

@@ -1,3 +1,3 @@
 import type { IconComponent } from 'src/icons/types';
-import { MiniAlertVariants } from './types';
-export declare const IconMap: Record<MiniAlertVariants, IconComponent>;
+import { AlertVariants } from './types';
+export declare const IconMap: Record<AlertVariants, IconComponent>;

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { MiniAlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<MiniAlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,OAAO,GAA6C;AAC/D,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/Alerts/constants.ts"],"sourcesContent":["import type { IconComponent } from 'src/icons/types';\nimport { AlertVariants } from './types';\nimport {\n  CriticalIcon,\n  HelpFillIcon,\n  InfoFillIcon,\n  RecommendIcon,\n  SuccessFillIcon,\n  WarningIcon,\n} from '../../icons';\n\nexport const IconMap: Record<AlertVariants, IconComponent> = {\n  default: InfoFillIcon,\n  error: CriticalIcon,\n  success: SuccessFillIcon,\n  info: HelpFillIcon,\n  warning: WarningIcon,\n  recommend: RecommendIcon,\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,OAAO,GAAyC;AAC3D,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,SAAS,EAAE,aAAa;;;;;"}

package/dist/components/Alerts/types.d.ts

@@ -3,15 +3,9 @@ export type AlertColours = {
     primary: string;
     background: string;
 };
-/** Visual style variants for the Alert component */
-export type AlertVariants = 'default' | 'error' | 'success' | 'warning';
-/** Extended variants available to MiniAlert only */
-export type MiniAlertVariants = AlertVariants | 'info' | 'recommend';
+export type AlertVariants = 'default' | 'error' | 'success' | 'info' | 'warning' | 'recommend';
 export type BaseAlertProps = {
-    /** Alert heading text */
     title?: string;
-    /** Visual style variant */
     variant?: AlertVariants;
-    /** Replaces the default variant icon */
     iconSlot?: React.ReactNode;
 };

package/dist/components/AnimatedDropdown/hooks/useClickAway.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.cjs","sources":["../../../../src/components/AnimatedDropdown/hooks/useClickAway.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport const useClickAway = (\n  ref: React.RefObject<HTMLElement>,\n  onClickAway: (event: Event) => void,\n) => {\n  useEffect(() => {\n    const handleClickAway = (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onClickAway(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickAway);\n    return () => {\n      document.removeEventListener('mousedown', handleClickAway);\n    };\n  }, [ref, onClickAway]);\n};\n"],"names":["useEffect"],"mappings":";;;;MAEa,YAAY,GAAG,CAC1B,GAAiC,EACjC,WAAmC,KACjC;IACFA,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,CAAC,KAAY,KAAI;AACvC,YAAA,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D,WAAW,CAAC,KAAK,CAAC;AACnB,YAAA;AACH,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACvD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;AACxB;;;;"}
+{"version":3,"file":"useClickAway.cjs","sources":["../../../../src/components/AnimatedDropdown/hooks/useClickAway.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport const useClickAway = (\n  ref: React.RefObject<HTMLElement | null>,\n  onClickAway: (event: Event) => void,\n) => {\n  useEffect(() => {\n    const handleClickAway = (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onClickAway(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickAway);\n    return () => {\n      document.removeEventListener('mousedown', handleClickAway);\n    };\n  }, [ref, onClickAway]);\n};\n"],"names":["useEffect"],"mappings":";;;;MAEa,YAAY,GAAG,CAC1B,GAAwC,EACxC,WAAmC,KACjC;IACFA,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,CAAC,KAAY,KAAI;AACvC,YAAA,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D,WAAW,CAAC,KAAK,CAAC;AACnB,YAAA;AACH,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACvD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;AACxB;;;;"}

package/dist/components/AnimatedDropdown/hooks/useClickAway.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const useClickAway: (ref: React.RefObject<HTMLElement>, onClickAway: (event: Event) => void) => void;
+export declare const useClickAway: (ref: React.RefObject<HTMLElement | null>, onClickAway: (event: Event) => void) => void;

package/dist/components/AnimatedDropdown/hooks/useClickAway.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.js","sources":["../../../../src/components/AnimatedDropdown/hooks/useClickAway.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport const useClickAway = (\n  ref: React.RefObject<HTMLElement>,\n  onClickAway: (event: Event) => void,\n) => {\n  useEffect(() => {\n    const handleClickAway = (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onClickAway(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickAway);\n    return () => {\n      document.removeEventListener('mousedown', handleClickAway);\n    };\n  }, [ref, onClickAway]);\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAC1B,GAAiC,EACjC,WAAmC,KACjC;IACF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,CAAC,KAAY,KAAI;AACvC,YAAA,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D,WAAW,CAAC,KAAK,CAAC;AACnB,YAAA;AACH,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACvD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;AACxB;;;;"}
+{"version":3,"file":"useClickAway.js","sources":["../../../../src/components/AnimatedDropdown/hooks/useClickAway.ts"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport const useClickAway = (\n  ref: React.RefObject<HTMLElement | null>,\n  onClickAway: (event: Event) => void,\n) => {\n  useEffect(() => {\n    const handleClickAway = (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        onClickAway(event);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickAway);\n    return () => {\n      document.removeEventListener('mousedown', handleClickAway);\n    };\n  }, [ref, onClickAway]);\n};\n"],"names":[],"mappings":";;MAEa,YAAY,GAAG,CAC1B,GAAwC,EACxC,WAAmC,KACjC;IACF,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,eAAe,GAAG,CAAC,KAAY,KAAI;AACvC,YAAA,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D,WAAW,CAAC,KAAK,CAAC;AACnB,YAAA;AACH,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC;AACvD,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;AACxB;;;;"}

package/dist/components/Button/Button.d.ts

@@ -8,7 +8,7 @@ export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTM
     children?: React.ReactNode;
     variant?: ButtonVariant | undefined;
     size?: import("./types").ButtonSize | undefined;
-    iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    iconSlot?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
@@ -16,7 +16,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHT
     children?: React.ReactNode;
     variant?: ButtonVariant | undefined;
     size?: import("./types").ButtonSize | undefined;
-    iconSlot?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    iconSlot?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
     dropdown?: boolean | undefined;
     loading?: boolean | undefined;
 } & React.RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement | null>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement | null>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.d.ts

@@ -7,11 +7,11 @@ type GridContainerProps = Pick<AriaAttributes, 'aria-label'> & Pick<React.HTMLAt
     /**
      * Reference to be used for the outer container element.
      */
-    containerRef?: RefObject<HTMLDivElement>;
+    containerRef?: RefObject<HTMLDivElement | null>;
     /**
      * Reference to be used for the table element.
      */
-    tableRef?: RefObject<HTMLTableElement>;
+    tableRef?: RefObject<HTMLTableElement | null>;
     /**
      * Border mode.
      */

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement | null>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement | null>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const hideShadows = !scrollPosition || scrollPosition === 'none';\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n    '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n    '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/hooks/useKeyboardNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.cjs","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":["TABBABLE_SELECTORS","useEffect"],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.cjs","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement | null>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":["TABBABLE_SELECTORS","useEffect"],"mappings":"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"}

package/dist/components/DataGrid/hooks/useKeyboardNavigation.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { DataGridProps } from '../types';
 type UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {
-    tableRef: RefObject<HTMLTableElement>;
+    tableRef: RefObject<HTMLTableElement | null>;
 };
 /**
  * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled

package/dist/components/DataGrid/hooks/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../src/components/DataGrid/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nimport { TABBABLE_SELECTORS } from '../../../utils/tabbableSelectors';\nimport { DataGridProps } from '../types';\n\ntype UseKeyboardNavigationProps = Pick<DataGridProps, 'enableKeyboardNavigation'> & {\n  tableRef: RefObject<HTMLTableElement | null>;\n};\n\n/**\n * Finds a target element to be selected within a table cell element. If the table cell\n * contains focusable children, the first child will be returned, otherwise we'll simply\n * focus on the table cell.\n */\nconst findTargetElement = (tableCell: HTMLElement): HTMLElement => {\n  const validChildTarget: HTMLElement | null = tableCell.querySelector(TABBABLE_SELECTORS);\n  return validChildTarget ?? tableCell;\n};\n\n/**\n * Finds the next available cell that can be focused by the user, within the next row.\n */\nconst findNextCell = (nextRow: HTMLTableRowElement, nextCellIndex: number) => {\n  if (\n    nextCellIndex >= nextRow.cells.length ||\n    nextRow.cells[nextCellIndex].hasAttribute('aria-hidden')\n  ) {\n    // Ignore (skip) cells that are marked as hidden. Find the next available cell (if there is one) that is visible.\n    return [...nextRow.cells].reverse().find((cell) => !cell.hasAttribute('aria-hidden'));\n  }\n\n  return nextRow.cells[nextCellIndex];\n};\n\n/**\n * Handles a `keydown` event from within the table. Navigates between cells using the arrow keys.\n * @param table The table element.\n * @param event The keyboard event.\n */\nconst handleKeyDown = (table: HTMLTableElement, event: KeyboardEvent) => {\n  const target = event.target as HTMLElement;\n\n  if (!table) return;\n\n  const currentCell = target.closest('td, th') as HTMLElement;\n  if (!currentCell) return;\n\n  const currentRow = currentCell.parentElement as HTMLTableRowElement;\n  if (!currentRow) return;\n\n  const rowIndex = Array.from(table.querySelectorAll('tr')).indexOf(currentRow);\n  const cellIndex = Array.from(currentRow.children).indexOf(currentCell);\n\n  let nextRowIndex = rowIndex;\n  let nextCellIndex = cellIndex;\n\n  switch (event.key) {\n    case 'ArrowUp':\n      event.preventDefault();\n      nextRowIndex = Math.max(0, rowIndex - 1);\n      break;\n    case 'ArrowDown':\n      event.preventDefault();\n      nextRowIndex = Math.min(table.rows.length - 1, rowIndex + 1);\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      nextCellIndex = Math.max(0, cellIndex - 1);\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      nextCellIndex = Math.min(currentRow.cells.length - 1, cellIndex + 1);\n      break;\n    default:\n      return;\n  }\n\n  const nextRow = table.rows[nextRowIndex];\n  const nextCell = findNextCell(nextRow, nextCellIndex);\n\n  if (nextCell) {\n    const nextTarget = findTargetElement(nextCell);\n    nextTarget.setAttribute('tabindex', '0');\n    nextTarget.scrollIntoView?.({ inline: 'nearest', block: 'nearest' });\n    nextTarget.focus();\n\n    // Clear the tabindex when the element loses focus\n    nextTarget.addEventListener(\n      'blur',\n      () => {\n        if (nextTarget.attributes.getNamedItem('data-first')) {\n          return;\n        }\n\n        nextTarget.removeAttribute('tabindex');\n      },\n      { once: true },\n    );\n  }\n};\n\n/**\n * Hook which sets up keyboard navigation within the `DataGrid` component using the arrow keys, can be disabled\n * with the `enableKeyboardNavigation` prop.\n *\n * Supports navigating between cells and rows, with the focus directed either towards the cell element, or\n * the first interactive child if one is present.\n */\nexport const useKeyboardNavigation = ({\n  enableKeyboardNavigation,\n  tableRef,\n}: UseKeyboardNavigationProps) => {\n  useEffect(() => {\n    if (!tableRef.current || !enableKeyboardNavigation) {\n      return undefined;\n    }\n\n    const table = tableRef.current;\n\n    // Find the first column header in the table, and assign it a tabindex.\n    const firstElement = table.querySelector('th') as HTMLElement;\n    if (!firstElement) return undefined;\n    const firstTarget = findTargetElement(firstElement);\n\n    firstTarget.setAttribute('tabindex', '0');\n    firstTarget.setAttribute('data-first', '');\n\n    const handler = (event: KeyboardEvent) => handleKeyDown(table, event);\n    table.addEventListener('keydown', handler);\n\n    return () => {\n      table.removeEventListener('keydown', handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tableRef, enableKeyboardNavigation]);\n};\n"],"names":[],"mappings":";;;AASA;;;;AAIG;AACH,MAAM,iBAAiB,GAAG,CAAC,SAAsB,KAAiB;IAChE,MAAM,gBAAgB,GAAuB,SAAS,CAAC,aAAa,CAAC,kBAAkB,CAAC;AACxF,IAAA,OAAO,gBAAgB,KAAA,IAAA,IAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,SAAS;AACtC,CAAC;AAED;;AAEG;AACH,MAAM,YAAY,GAAG,CAAC,OAA4B,EAAE,aAAqB,KAAI;AAC3E,IAAA,IACE,aAAa,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM;QACrC,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,EACxD;;QAEA,OAAO,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;AACtF,IAAA;AAED,IAAA,OAAO,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC;AACrC,CAAC;AAED;;;;AAIG;AACH,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,KAAoB,KAAI;;AACtE,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAE1C,IAAA,IAAI,CAAC,KAAK;QAAE;IAEZ,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAgB;AAC3D,IAAA,IAAI,CAAC,WAAW;QAAE;AAElB,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,aAAoC;AACnE,IAAA,IAAI,CAAC,UAAU;QAAE;AAEjB,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC;AAC7E,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;IAEtE,IAAI,YAAY,GAAG,QAAQ;IAC3B,IAAI,aAAa,GAAG,SAAS;IAE7B,QAAQ,KAAK,CAAC,GAAG;AACf,QAAA,KAAK,SAAS;YACZ,KAAK,CAAC,cAAc,EAAE;YACtB,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC;YACxC;AACF,QAAA,KAAK,WAAW;YACd,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC;YAC5D;AACF,QAAA,KAAK,WAAW;YACd,KAAK,CAAC,cAAc,EAAE;YACtB,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC;YAC1C;AACF,QAAA,KAAK,YAAY;YACf,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC;YACpE;AACF,QAAA;YACE;AACH;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC;IACxC,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC;AAErD,IAAA,IAAI,QAAQ,EAAE;AACZ,QAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,QAAQ,CAAC;AAC9C,QAAA,UAAU,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;AACxC,QAAA,CAAA,EAAA,GAAA,UAAU,CAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACpE,UAAU,CAAC,KAAK,EAAE;;AAGlB,QAAA,UAAU,CAAC,gBAAgB,CACzB,MAAM,EACN,MAAK;YACH,IAAI,UAAU,CAAC,UAAU,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;gBACpD;AACD,YAAA;AAED,YAAA,UAAU,CAAC,eAAe,CAAC,UAAU,CAAC;AACxC,QAAA,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf;AACF,IAAA;AACH,CAAC;AAED;;;;;;AAMG;AACI,MAAM,qBAAqB,GAAG,CAAC,EACpC,wBAAwB,EACxB,QAAQ,GACmB,KAAI;IAC/B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,wBAAwB,EAAE;AAClD,YAAA,OAAO,SAAS;AACjB,QAAA;AAED,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;;QAG9B,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAgB;AAC7D,QAAA,IAAI,CAAC,YAAY;AAAE,YAAA,OAAO,SAAS;AACnC,QAAA,MAAM,WAAW,GAAG,iBAAiB,CAAC,YAAY,CAAC;AAEnD,QAAA,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;AACzC,QAAA,WAAW,CAAC,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;AAE1C,QAAA,MAAM,OAAO,GAAG,CAAC,KAAoB,KAAK,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;AACrE,QAAA,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;AAE1C,QAAA,OAAO,MAAK;AACV,YAAA,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC;AAC/C,QAAA,CAAC;;AAEH,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,wBAAwB,CAAC,CAAC;AAC1C;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","React","styles","renderHeader"],"mappings":";;;;;;;;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement | null>;\n  containerRef: RefObject<HTMLElement | null>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","React","styles","renderHeader"],"mappings":";;;;;;;;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}

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

@@ -3,7 +3,7 @@ import { ColumnConfig } from '../types';
 export interface ActionBarProps {
     children: ReactNode;
     selectionColumn: ColumnConfig;
-    intersectionTargetRef: RefObject<HTMLElement>;
-    containerRef: RefObject<HTMLElement>;
+    intersectionTargetRef: RefObject<HTMLElement | null>;
+    containerRef: RefObject<HTMLElement | null>;
 }
 export declare function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }: ActionBarProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement | null>;\n  containerRef: RefObject<HTMLElement | null>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}

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 { TableCssOutput } from '../utils/generateTableCss';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: TableCssOutput;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement | null>;\n  containerRef: RefObject<HTMLElement | null>;\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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"}

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

@@ -3,8 +3,8 @@ import { TableCssOutput } from '../utils/generateTableCss';
 export interface StickyHeadProps {
     tableCss: TableCssOutput;
     children?: ReactNode;
-    intersectionTargetRef: RefObject<HTMLElement>;
-    containerRef: RefObject<HTMLElement>;
+    intersectionTargetRef: RefObject<HTMLElement | null>;
+    containerRef: RefObject<HTMLElement | null>;
     cellWidths: number[];
     stickyHeaderTop?: number;
 }

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 { TableCssOutput } from '../utils/generateTableCss';\nimport { Shadows } from '../../../theme/modules/shadows';\n\nexport interface StickyHeadProps {\n  tableCss: TableCssOutput;\n  children?: ReactNode;\n  intersectionTargetRef: RefObject<HTMLElement | null>;\n  containerRef: RefObject<HTMLElement | null>;\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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"}