@veeqo/ui 9.0.0-beta-3 → 9.0.0

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

@@ -1,2 +1,136 @@
-import e,{useRef as r,useState as t,useEffect as n}from"react";import o from"lodash.throttle";import i from"resize-observer-polyfill";import{theme as l}from"../../../theme/index.js";import{headerCellHeight as c}from"../constants.js";import{TableGrid as s}from"./TableGrid.js";import{Shadows as u}from"../../../theme/modules/shadows.js";function d({children:d,intersectionTargetRef:a,containerRef:f,cellWidths:h,tableCss:v,stickyHeaderTop:m=0}){const p=r(null),[b,g]=t(!1),[x,w]=t({top:0,left:0,width:0,height:0}),E=r(null),$=()=>{var e;const r=null===(e=f.current)||void 0===e?void 0:e.getBoundingClientRect(),t={left:(null==r?void 0:r.left)||0,width:(null==r?void 0:r.width)||0,top:0,height:48};w(t)},j=()=>{var e;if(!f.current)return;const r=f.current.scrollLeft;null===(e=p.current)||void 0===e||e.scrollTo(r,0)};if(n((()=>{if(!a.current)return;const e=new IntersectionObserver((e=>{e.forEach((e=>{g(!e.isIntersecting)}))}),{rootMargin:`-${m}px 100% 0px 100%`,threshold:1});return e.observe(a.current),()=>e.disconnect()}),[a.current]),n((()=>{b&&f.current&&$()}),[f.current,b]),n((()=>{if(!b)return;if(!f.current)return;const e=o($,30),r=new i(e);return r.observe(f.current),()=>r.disconnect()}),[f.current,b]),n((()=>{if(!b)return;if(!f.current)return;const e=o((()=>{var e;const{left:r}=(null===(e=f.current)||void 0===e?void 0:e.getBoundingClientRect())||{};r&&E.current!==r&&($(),E.current=r)}),30);return document.addEventListener("scroll",e),()=>document.removeEventListener("scroll",e)}),[f.current,b]),n((()=>{j()}),[b]),n((()=>{var e;return null===(e=f.current)||void 0===e||e.addEventListener("scroll",j),()=>{var e;null===(e=f.current)||void 0===e||e.removeEventListener("scroll",j)}}),[f.current]),!b)return null;const y={...x,height:c,position:"fixed",zIndex:5,overflowX:"hidden",overflowY:"hidden",borderBottom:`1px solid ${l.colors.neutral.grey.base}`,borderTop:`1px solid ${l.colors.neutral.grey.base}`,boxShadow:u.base,top:`${m}px`||"0px"},L=v+h.map(((e,r)=>`\n    & th:nth-child(${r+1}) {\n      width: ${e}px;\n    }\n  `)).join("");return e.createElement("div",{style:y,ref:p},e.createElement(s,{css:L},e.createElement("thead",null,d)))}export{d as StickyHead};
+import React, { useRef, useState, useEffect } from 'react';
+import throttle from 'lodash.throttle';
+import ResizeObserver from 'resize-observer-polyfill';
+import { theme } from '../../../theme/index.js';
+import { headerCellHeight } from '../constants.js';
+import { TableGrid } from './TableGrid.js';
+import { Shadows } from '../../../theme/modules/shadows.js';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function StickyHead({ children, intersectionTargetRef, containerRef, cellWidths, tableCss, stickyHeaderTop = 0, }) {
+    const stickyContainerRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [containerRect, setContainerRect] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const lastLeftValue = useRef(null);
+    const THROTTE_TIME_MS = 30;
+    const updateContainerDimensions = () => {
+        var _a;
+        const targetRect = (_a = containerRef.current) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+        const newRect = {
+            left: (targetRect === null || targetRect === undefined ? undefined : targetRect.left) || 0,
+            width: (targetRect === null || targetRect === undefined ? undefined : targetRect.width) || 0,
+            top: 0,
+            height: 48,
+        };
+        setContainerRect(newRect);
+    };
+    const updateContainerScrollPosition = () => {
+        var _a;
+        if (!containerRef.current)
+            return;
+        const xScrollOffset = containerRef.current.scrollLeft;
+        (_a = stickyContainerRef.current) === null || _a === undefined ? undefined : _a.scrollTo(xScrollOffset, 0);
+    };
+    // Configure intersection observer to toggle sticky header on/off
+    useEffect(() => {
+        if (!intersectionTargetRef.current)
+            return;
+        const options = {
+            rootMargin: `-${stickyHeaderTop}px 100% 0px 100%`,
+            threshold: 1.0,
+        };
+        const intersectionCallback = (entries) => {
+            entries.forEach((entry) => {
+                setIsVisible(!entry.isIntersecting);
+            });
+        };
+        const intersectionObserver = new IntersectionObserver(intersectionCallback, options);
+        intersectionObserver.observe(intersectionTargetRef.current);
+        return () => intersectionObserver.disconnect(); // eslint-disable-line consistent-return
+    }, [intersectionTargetRef.current]);
+    // Calculate sticky header position and size to match table container
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        if (!containerRef.current)
+            return;
+        updateContainerDimensions();
+    }, [containerRef.current, isVisible]);
+    // Update dimensions when container element is resized
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        if (!containerRef.current)
+            return;
+        const resizeObserverCallback = throttle(updateContainerDimensions, THROTTE_TIME_MS); // Throttle events
+        const resizeObserver = new ResizeObserver(resizeObserverCallback);
+        resizeObserver.observe(containerRef.current);
+        return () => resizeObserver.disconnect(); // eslint-disable-line consistent-return
+    }, [containerRef.current, isVisible]);
+    // Update dimensions when document scrolls
+    // will only call updateContainerDimensions on horizontal scroll
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        if (!containerRef.current)
+            return;
+        const scrollCallback = throttle(() => {
+            var _a;
+            const { left } = ((_a = containerRef.current) === null || _a === undefined ? undefined : _a.getBoundingClientRect()) || {};
+            if (left && lastLeftValue.current !== left) {
+                updateContainerDimensions();
+                lastLeftValue.current = left;
+            }
+        }, THROTTE_TIME_MS); // Throttle events
+        document.addEventListener('scroll', scrollCallback);
+        return () => document.removeEventListener('scroll', scrollCallback); // eslint-disable-line consistent-return
+    }, [containerRef.current, isVisible]);
+    // Sync container scrolling
+    useEffect(() => {
+        updateContainerScrollPosition();
+    }, [isVisible]);
+    useEffect(() => {
+        var _a;
+        (_a = containerRef.current) === null || _a === undefined ? undefined : _a.addEventListener('scroll', updateContainerScrollPosition);
+        return () => {
+            var _a;
+            (_a = containerRef.current) === null || _a === undefined ? undefined : _a.removeEventListener('scroll', updateContainerScrollPosition);
+        };
+    }, [containerRef.current]);
+    // Render sticky header
+    if (!isVisible)
+        return null;
+    const containerStyle = {
+        ...containerRect,
+        height: headerCellHeight,
+        position: 'fixed',
+        zIndex: 5,
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        borderBottom: `1px solid ${theme.colors.neutral.grey.base}`,
+        borderTop: `1px solid ${theme.colors.neutral.grey.base}`,
+        boxShadow: Shadows.base,
+        top: `${stickyHeaderTop}px` || '0px',
+    };
+    // Generate styles to sync sticky columns with "real" columns
+    const columnsCss = cellWidths
+        .map((width, index) => `
+    & th:nth-child(${index + 1}) {
+      width: ${width}px;
+    }
+  `)
+        .join('');
+    // Append to generated table styles
+    const allCss = tableCss + columnsCss;
+    return (React.createElement("div", { style: containerStyle, ref: stickyContainerRef },
+        React.createElement(TableGrid, { css: allCss },
+            React.createElement("thead", null, children))));
+}
+
+export { StickyHead };
 //# sourceMappingURL=StickyHead.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHead.js","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":[null],"names":["StickyHead","children","intersectionTargetRef","containerRef","cellWidths","tableCss","stickyHeaderTop","stickyContainerRef"],"mappings":"gVAiBC,SAAAA,GAAAC,SAAAA,EAAAC,sBAAAA,EAAAC,aAAAA,EAAAC,WAAAA,EAAAC,SAAAA,EAAAC,gBAAAA,EAAA,IAED,MAAAC,IACU"}
+{"version":3,"file":"StickyHead.js","sources":["../../../../src/components/DataTable/components/StickyHead.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -1,20 +1,14 @@
-"use strict";var e=require("styled-components"),t=require("../../../theme/index.cjs");function s(e){return e&&e.__esModule?e:{default:e}}const i=s(e).default.table`
-  min-width: 100%;
-  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */
-  display: grid;
+'use strict';
 
-  & thead,
-  & tbody,
-  & tfoot {
-    display: contents;
-  }
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
-  --density: ${t.theme.sizes.base};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  && tr:hover td {
-    background-color: #f2f8fc;
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  ${({css:e})=>e}/* CSS styles generate by hooks */
-`;exports.TableGrid=i;
+const defaultDensity = 'base';
+const TableGrid = styled__default.default.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${index.theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
+
+exports.TableGrid = TableGrid;
 //# sourceMappingURL=TableGrid.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":[null],"names":["TableGrid","styled","table"],"mappings":"yIAOC,MAEMA,OAAeC,QAAAC,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableGrid.cjs","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAGA,uBAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtBC,WAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}

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

@@ -2,4 +2,3 @@ export interface TableGridProps {
     css: string;
 }
 export declare const TableGrid: import("styled-components").StyledComponent<"table", any, TableGridProps, never>;
-//# sourceMappingURL=TableGrid.d.ts.map

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

@@ -1,20 +1,8 @@
-import t from"styled-components";import{theme as e}from"../../../theme/index.js";const o=t.table`
-  min-width: 100%;
-  width: max-content; /* Fixes sticky element bug in Firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=1585254#c3 */
-  display: grid;
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-  & thead,
-  & tbody,
-  & tfoot {
-    display: contents;
-  }
+const defaultDensity = 'base';
+const TableGrid = styled.table.withConfig({ displayName: "vui--TableGrid", componentId: "vui--1fsix8g" }) `min-width:100%;width:max-content;display:grid;& thead,& tbody,& tfoot{display:contents;}--density:${theme.sizes[defaultDensity]};&& tr:hover td{background-color:#f2f8fc;}${({ css }) => css}`;
 
-  --density: ${e.sizes.base};
-
-  && tr:hover td {
-    background-color: #f2f8fc;
-  }
-
-  ${({css:t})=>t}/* CSS styles generate by hooks */
-`;export{o as TableGrid};
+export { TableGrid };
 //# sourceMappingURL=TableGrid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":[null],"names":["TableGrid","styled","table"],"mappings":"iFAOC,MAEMA,EAAeC,EAAAC,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TableGrid.js","sources":["../../../../src/components/DataTable/components/TableGrid.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,MAAM;AAMhB,MAAA,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,kGAAA,EAWtB,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA,0CAAA,EAMtC,CAAC,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;;;;"}

package/dist/components/DataTable/components/Truncate.cjs

@@ -1,6 +1,12 @@
-"use strict";function e(e){return e&&e.__esModule?e:{default:e}}const t=e(require("styled-components")).default.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;exports.Truncate=t;
+'use strict';
+
+var styled = require('styled-components');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Truncate = styled__default.default.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+
+exports.Truncate = Truncate;
 //# sourceMappingURL=Truncate.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Truncate.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Truncate.cjs","sources":["../../../../src/components/DataTable/components/Truncate.ts"],"sourcesContent":[null],"names":["styled"],"mappings":";;;;;;;;MAEa,QAAQ,GAAGA,uBAAM,CAAC,GAAG;;;;"}

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

@@ -1,2 +1 @@
 export declare const Truncate: import("styled-components").StyledComponent<"div", any, {}, never>;
-//# sourceMappingURL=Truncate.d.ts.map

package/dist/components/DataTable/components/Truncate.js

@@ -1,6 +1,6 @@
-import o from"styled-components";const e=o.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;export{e as Truncate};
+import styled from 'styled-components';
+
+const Truncate = styled.div.withConfig({ displayName: "vui--Truncate", componentId: "vui--14fzkum" }) `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+
+export { Truncate };
 //# sourceMappingURL=Truncate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Truncate.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Truncate.js","sources":["../../../../src/components/DataTable/components/Truncate.ts"],"sourcesContent":[null],"names":[],"mappings":";;MAEa,QAAQ,GAAG,MAAM,CAAC,GAAG;;;;"}

package/dist/components/DataTable/components/Wrapper.cjs

@@ -1,23 +1,18 @@
-"use strict";var e=require("styled-components"),r=require("../../../theme/index.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var t=o(e);const d={full:`border-width: 1px; border-radius: ${r.theme.radius.base};`,vertical:"border-width: 0; border-top-width: 1px; border-bottom-width: 1px;",none:"border-width: 0;"},i=t.default.div`
-  width: 100%;
-  position: relative;
-  border-style: solid;
-  border-color: ${r.theme.colors.neutral.grey.dark};
+'use strict';
 
-  ${({borderMode:e="full"})=>d[e]}
+var styled = require('styled-components');
+var index = require('../../../theme/index.cjs');
 
-  &, & * {
-    box-sizing: border-box;
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  .hideHeaderDetails th {
-    > * {
-      opacity: 0.1;
-    }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-    .th-divider {
-      opacity: 1;
-    }
-  }
-`;exports.Wrapper=i;
+const borderModeStyles = {
+    full: `border-width: 1px; border-radius: ${index.theme.radius.base};`,
+    vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
+    none: 'border-width: 0;',
+};
+const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${index.theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
+
+exports.Wrapper = Wrapper;
 //# sourceMappingURL=Wrapper.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":[null],"names":["borderModeStyles","full","theme","radius","base","vertical"],"mappings":"0JAWYA,EAAG,CACdC,KAAA,qCAAAC,EAAAA,MAAAC,OAAAC,QAEMC,SAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":[null],"names":["theme","styled"],"mappings":";;;;;;;;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAqC,kCAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAG,CAAA,CAAA;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAGC,uBAAM,CAAC,GAAG,CAIf,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAAAD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}

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

@@ -3,4 +3,3 @@ export interface WrapperProps {
     borderMode?: BorderMode;
 }
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
-//# sourceMappingURL=Wrapper.d.ts.map

package/dist/components/DataTable/components/Wrapper.js

@@ -1,23 +1,12 @@
-import r from"styled-components";import{theme as o}from"../../../theme/index.js";const e={full:`border-width: 1px; border-radius: ${o.radius.base};`,vertical:"border-width: 0; border-top-width: 1px; border-bottom-width: 1px;",none:"border-width: 0;"},d=r.div`
-  width: 100%;
-  position: relative;
-  border-style: solid;
-  border-color: ${o.colors.neutral.grey.dark};
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-  ${({borderMode:r="full"})=>e[r]}
+const borderModeStyles = {
+    full: `border-width: 1px; border-radius: ${theme.radius.base};`,
+    vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
+    none: 'border-width: 0;',
+};
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
-  &, & * {
-    box-sizing: border-box;
-  }
-
-  .hideHeaderDetails th {
-    > * {
-      opacity: 0.1;
-    }
-
-    .th-divider {
-      opacity: 1;
-    }
-  }
-`;export{d as Wrapper};
+export { Wrapper };
 //# sourceMappingURL=Wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":[null],"names":["borderModeStyles","full","theme","radius","base","vertical"],"mappings":"uFAWYA,EAAG,CACdC,KAAA,qCAAAC,EAAAC,OAAAC,QAEMC,SAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAqC,kCAAA,EAAA,KAAK,CAAC,MAAM,CAAC,IAAI,CAAG,CAAA,CAAA;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAIf,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}

package/dist/components/DataTable/constants.cjs

@@ -1,2 +1,10 @@
-"use strict";exports.defaultCellSpacing=3,exports.footerCellHeight="56px",exports.headerCellHeight="56px";
+'use strict';
+
+const defaultCellSpacing = 3;
+const headerCellHeight = '56px';
+const footerCellHeight = '56px';
+
+exports.defaultCellSpacing = defaultCellSpacing;
+exports.footerCellHeight = footerCellHeight;
+exports.headerCellHeight = headerCellHeight;
 //# sourceMappingURL=constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":[null],"names":[],"mappings":"wCAA+B,2BAGF,gCADA"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;;;"}

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

@@ -1,4 +1,3 @@
 export declare const defaultCellSpacing = 3;
 export declare const headerCellHeight = "56px";
 export declare const footerCellHeight = "56px";
-//# sourceMappingURL=constants.d.ts.map

package/dist/components/DataTable/constants.js

@@ -1,2 +1,6 @@
-const p=3,x="56px",o="56px";export{p as defaultCellSpacing,o as footerCellHeight,x as headerCellHeight};
+const defaultCellSpacing = 3;
+const headerCellHeight = '56px';
+const footerCellHeight = '56px';
+
+export { defaultCellSpacing, footerCellHeight, headerCellHeight };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":[null],"names":["defaultCellSpacing","headerCellHeight","footerCellHeight"],"mappings":"AAAO,MAAAA,EAAwB,EAExBC,EAAsB,OACtBC,EAAsB"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;"}

package/dist/components/DataTable/hooks/index.d.ts

@@ -4,4 +4,3 @@ export * from './useDragToScroll';
 export * from './useNested';
 export * from './useScrollPosition';
 export * from './useSelection';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/DataTable/hooks/useCellWidths.cjs

@@ -1,2 +1,39 @@
-"use strict";var e=require("react"),r=require("lodash.throttle"),t=require("resize-observer-polyfill");function u(e){return e&&e.__esModule?e:{default:e}}var n=u(r),c=u(t);exports.useCellWidths=function(r,t){const[u,s]=e.useState([]),i=()=>{if(!r.current)return;const e=r.current.querySelectorAll("tbody tr:first-child td"),t=Array.from(e).map((e=>e.getBoundingClientRect().width));s(t)};return e.useEffect((()=>{i()}),[r.current]),e.useEffect((()=>{if(!t.current)return;const e=n.default(i,50),r=new c.default(e);return r.observe(t.current),()=>r.disconnect()}),[t.current]),u};
+'use strict';
+
+var React = require('react');
+var throttle = require('lodash.throttle');
+var ResizeObserver = require('resize-observer-polyfill');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function useCellWidths(tableRef, containerRef) {
+    const [cellWidths, setCellWidths] = React.useState([]);
+    const updateCellWidths = () => {
+        if (!tableRef.current)
+            return;
+        const cells = tableRef.current.querySelectorAll('tbody tr:first-child td');
+        const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);
+        setCellWidths(widths);
+    };
+    React.useEffect(() => {
+        updateCellWidths();
+    }, [tableRef.current]);
+    // Update cell widths when container is resized.
+    React.useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserverCallback = throttle__default.default(updateCellWidths, 50); // Throttle events
+        const resizeObserver = new ResizeObserver__default.default(resizeObserverCallback);
+        resizeObserver.observe(containerRef.current);
+        // eslint-disable-next-line consistent-return
+        return () => resizeObserver.disconnect();
+    }, [containerRef.current]);
+    return cellWidths;
+}
+
+exports.useCellWidths = useCellWidths;
 //# sourceMappingURL=useCellWidths.cjs.map

package/dist/components/DataTable/hooks/useCellWidths.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCellWidths.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"useCellWidths.cjs","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":[null],"names":["useState","useEffect","throttle","ResizeObserver"],"mappings":";;;;;;;;;;;AAAA;AAKgB,SAAA,aAAa,CAC3B,QAAgC,EAChC,YAAoC,EAAA;IAEpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAW,EAAE,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAK;QAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE;QACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,yBAAyB,CAAC;QAC1E,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAClF,aAAa,CAAC,MAAM,CAAC;AACvB,KAAC;IAEDC,eAAS,CAAC,MAAK;AACb,QAAA,gBAAgB,EAAE;AACpB,KAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;;IAGtBA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,sBAAsB,GAAGC,yBAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;AAC9D,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,sBAAsB,CAAC;AACjE,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;;AAE5C,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAO,UAAU;AACnB;;;;"}

package/dist/components/DataTable/hooks/useCellWidths.d.ts

@@ -1,3 +1,2 @@
 import { RefObject } from 'react';
 export declare function useCellWidths(tableRef: RefObject<HTMLElement>, containerRef: RefObject<HTMLElement>): number[];
-//# sourceMappingURL=useCellWidths.d.ts.map

package/dist/components/DataTable/hooks/useCellWidths.js

@@ -1,2 +1,32 @@
-import{useState as r,useEffect as t}from"react";import e from"lodash.throttle";import n from"resize-observer-polyfill";function o(o,c){const[i,u]=r([]),l=()=>{if(!o.current)return;const r=o.current.querySelectorAll("tbody tr:first-child td"),t=Array.from(r).map((r=>r.getBoundingClientRect().width));u(t)};return t((()=>{l()}),[o.current]),t((()=>{if(!c.current)return;const r=e(l,50),t=new n(r);return t.observe(c.current),()=>t.disconnect()}),[c.current]),i}export{o as useCellWidths};
+import { useState, useEffect } from 'react';
+import throttle from 'lodash.throttle';
+import ResizeObserver from 'resize-observer-polyfill';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function useCellWidths(tableRef, containerRef) {
+    const [cellWidths, setCellWidths] = useState([]);
+    const updateCellWidths = () => {
+        if (!tableRef.current)
+            return;
+        const cells = tableRef.current.querySelectorAll('tbody tr:first-child td');
+        const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);
+        setCellWidths(widths);
+    };
+    useEffect(() => {
+        updateCellWidths();
+    }, [tableRef.current]);
+    // Update cell widths when container is resized.
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserverCallback = throttle(updateCellWidths, 50); // Throttle events
+        const resizeObserver = new ResizeObserver(resizeObserverCallback);
+        resizeObserver.observe(containerRef.current);
+        // eslint-disable-next-line consistent-return
+        return () => resizeObserver.disconnect();
+    }, [containerRef.current]);
+    return cellWidths;
+}
+
+export { useCellWidths };
 //# sourceMappingURL=useCellWidths.js.map

package/dist/components/DataTable/hooks/useCellWidths.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellWidths.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"useCellWidths.js","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAA;AAKgB,SAAA,aAAa,CAC3B,QAAgC,EAChC,YAAoC,EAAA;IAEpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC;IAE1D,MAAM,gBAAgB,GAAG,MAAK;QAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE;QACvB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,yBAAyB,CAAC;QAC1E,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAClF,aAAa,CAAC,MAAM,CAAC;AACvB,KAAC;IAED,SAAS,CAAC,MAAK;AACb,QAAA,gBAAgB,EAAE;AACpB,KAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;;IAGtB,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,sBAAsB,GAAG,QAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;AAC9D,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC;AACjE,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;;AAE5C,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAO,UAAU;AACnB;;;;"}

package/dist/components/DataTable/hooks/useColumnWidths.cjs

@@ -1,2 +1,62 @@
-"use strict";var t=require("react"),e=require("../utils/customEventEmitter.cjs");exports.useColumnWidths=({tableRef:i,columns:d,columnIds:o,columnWidths:u})=>{const[n,c]=t.useState(u||{});return t.useEffect((()=>{const t=d.reduce(((t,e)=>(t[e.id]=e.width,t)),{});const e=u?{...n}:t;Object.keys(t).forEach((i=>{void 0===typeof n[i]&&(e[i]=t[i])})),c(e)}),[JSON.stringify(o)]),t.useEffect((()=>{u&&c(u)}),[u]),{setColumnWidth:({columnId:t,width:o})=>{const u={...n};return d.forEach(((e,c)=>{const r=c===d.length-1,s=e.id===t?o:((t,e)=>{var d,o,u;return e?n[t.id]||t.width:n[t.id]||t.width||(null===(u=null===(o=null===(d=i.current)||void 0===d?void 0:d.querySelector(`th[data-columnid="${t.id}"]`))||void 0===o?void 0:o.getBoundingClientRect())||void 0===u?void 0:u.width)||void 0})(e,r);u[e.id]=s})),c(u),e.customEventEmitter("columnWidthUpdated",{tableRef:i,columnWidths:u}),u},columnWidths:n}};
+'use strict';
+
+var React = require('react');
+var customEventEmitter = require('../utils/customEventEmitter.cjs');
+
+const useColumnWidths = ({ tableRef, columns, columnIds, columnWidths: initialColumnWidths, }) => {
+    const getColumnWidths = (cols) => cols.reduce((obj, item) => {
+        // eslint-disable-next-line no-param-reassign
+        obj[item.id] = item.width;
+        return obj;
+    }, {});
+    const [columnWidths, setColumnWidths] = React.useState(initialColumnWidths || {});
+    const setColumnWidth = ({ columnId, width }) => {
+        const calculateWidth = (column, lastColumn) => {
+            var _a, _b, _c;
+            if (lastColumn)
+                return columnWidths[column.id] || column.width;
+            const val = columnWidths[column.id] ||
+                column.width ||
+                ((_c = (_b = (_a = tableRef.current) === null || _a === undefined ? undefined : _a.querySelector(`th[data-columnid="${column.id}"]`)) === null || _b === undefined ? undefined : _b.getBoundingClientRect()) === null || _c === undefined ? undefined : _c.width) ||
+                undefined;
+            return val;
+        };
+        const newColumnWidths = { ...columnWidths };
+        columns.forEach((column, i) => {
+            const lastColumn = i === columns.length - 1;
+            const newWidth = column.id === columnId ? width : calculateWidth(column, lastColumn);
+            newColumnWidths[column.id] = newWidth;
+        });
+        setColumnWidths(newColumnWidths);
+        customEventEmitter.customEventEmitter('columnWidthUpdated', {
+            tableRef,
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            columnWidths: newColumnWidths,
+        });
+        return newColumnWidths;
+    };
+    React.useEffect(() => {
+        const widths = getColumnWidths(columns);
+        const newColumnWidths = initialColumnWidths ? { ...columnWidths } : widths;
+        Object.keys(widths).forEach((key) => {
+            if (typeof columnWidths[key] === undefined) {
+                newColumnWidths[key] = widths[key];
+            }
+        });
+        setColumnWidths(newColumnWidths);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(columnIds)]);
+    /** This is used to set column widths when new columns are passed into the DataTable, is used when persisting table widths */
+    React.useEffect(() => {
+        if (!initialColumnWidths)
+            return;
+        setColumnWidths(initialColumnWidths);
+    }, [initialColumnWidths]);
+    return {
+        setColumnWidth,
+        columnWidths,
+    };
+};
+
+exports.useColumnWidths = useColumnWidths;
 //# sourceMappingURL=useColumnWidths.cjs.map

package/dist/components/DataTable/hooks/useColumnWidths.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnWidths.cjs","sources":["../../../../src/components/DataTable/hooks/useColumnWidths.ts"],"sourcesContent":[null],"names":["tableRef","columns","columnIds","columnWidths","initialColumnWidths","reduce","obj","item","id","width","column","lastColumn"],"mappings":"yGAW4B,EAAAA,WAAAC,UAAAC,YAAAC,aAAAC,MAMhB,gEAAsBC,QAAA,CAAAC,EAAAC,KAErBD,EAAAC,EAAAC,IAAQD,EAAEE,wMA8DrB,6EAAA,EAAAC,EAAAC"}
+{"version":3,"file":"useColumnWidths.cjs","sources":["../../../../src/components/DataTable/hooks/useColumnWidths.ts"],"sourcesContent":[null],"names":["useState","customEventEmitter","useEffect"],"mappings":"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"}

package/dist/components/DataTable/hooks/useColumnWidths.d.ts

@@ -9,4 +9,3 @@ export declare const useColumnWidths: ({ tableRef, columns, columnIds, columnWid
     setColumnWidth: ColumnWidthHandler;
     columnWidths: ColumnWidthsType;
 };
-//# sourceMappingURL=useColumnWidths.d.ts.map