@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.2

package/components/table/layout/useHorizontalSectionSync.js

@@ -1,39 +1,43 @@
-import { useRef as f, useCallback as u, useEffect as i } from "react";
-const L = "table-horizontal-scroll", p = (t) => {
-  const r = t?.currentTarget;
-  if (r && "scrollLeft" in r)
-    return r.scrollLeft;
+import { useRef as a, useState as p, useCallback as i, useEffect as y } from "react";
+const m = "table-horizontal-scroll", R = (t) => {
+  const e = t?.currentTarget;
+  if (e && "scrollLeft" in e)
+    return e.scrollLeft;
   const o = t?.target;
   return o && "scrollLeft" in o ? o.scrollLeft : 0;
-}, y = ({ enabled: t }) => {
-  const r = f(null), o = f(null), s = f(0), e = u((c) => {
-    const n = (l) => {
-      if (l) {
-        if (c === 0) {
-          l.style.removeProperty("transform");
-          return;
+}, H = ({ enabled: t, hasFooterCells: e = !0 }) => {
+  const o = a(null), n = a(null), l = a(0), [L, u] = p(!1), s = i(
+    (c) => {
+      const r = (f) => {
+        if (f) {
+          if (c === 0) {
+            f.style.removeProperty("transform");
+            return;
+          }
+          f.style.transform = `translateX(-${c}px)`;
         }
-        l.style.transform = `translateX(-${c}px)`;
-      }
-    };
-    n(r.current), n(o.current);
-  }, []), a = u(
+      };
+      r(o.current), e ? r(n.current) : n.current && n.current.style.removeProperty("transform");
+    },
+    [e]
+  ), S = i(
     (c) => {
-      const n = p(c);
-      t && e(n), n !== s.current && (s.current = n, window.dispatchEvent(new CustomEvent(L)));
+      const r = R(c);
+      u(r > 0), t && s(r), r !== l.current && (l.current = r, window.dispatchEvent(new CustomEvent(m)));
     },
-    [t, e]
+    [t, s]
   );
-  return i(() => {
-    t || (s.current = 0, e(0));
-  }, [t, e]), {
-    handleBodyScroll: a,
-    tableFooterRowRef: o,
-    tableHeadRowRef: r
+  return y(() => {
+    t || (l.current = 0, u(!1), s(0));
+  }, [t, s]), {
+    handleBodyScroll: S,
+    hasHorizontalScrollOffset: L,
+    tableFooterRowRef: n,
+    tableHeadRowRef: o
   };
 };
 export {
-  L as TABLE_HORIZONTAL_SCROLL_EVENT,
-  y as useHorizontalSectionSync
+  m as TABLE_HORIZONTAL_SCROLL_EVENT,
+  H as useHorizontalSectionSync
 };
 //# sourceMappingURL=useHorizontalSectionSync.js.map

package/components/table/layout/useHorizontalSectionSync.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, type UIEvent } from 'react';\n\nexport const TABLE_HORIZONTAL_SCROLL_EVENT = 'table-horizontal-scroll';\n\nconst getScrollLeftFromEvent = (event: UIEvent<HTMLElement> | undefined) => {\n    const currentTarget = event?.currentTarget;\n\n    if (currentTarget && 'scrollLeft' in currentTarget) {\n        return (currentTarget as HTMLElement).scrollLeft;\n    }\n\n    const target = event?.target;\n\n    if (target && 'scrollLeft' in target) {\n        return (target as HTMLElement).scrollLeft;\n    }\n\n    return 0;\n};\n\ntype UseHorizontalSectionSyncProps = {\n    enabled: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n\n    const syncHorizontalSections = useCallback((scrollLeft: number) => {\n        const applyTransform = (element: HTMLDivElement | null) => {\n            if (!element) {\n                return;\n            }\n\n            if (scrollLeft === 0) {\n                element.style.removeProperty('transform');\n                return;\n            }\n\n            element.style.transform = `translateX(-${scrollLeft}px)`;\n        };\n\n        applyTransform(tableHeadRowRef.current);\n        applyTransform(tableFooterRowRef.current);\n    }, []);\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const scrollLeft = getScrollLeftFromEvent(event);\n\n            if (enabled) {\n                syncHorizontalSections(scrollLeft);\n            }\n\n            if (scrollLeft !== previousScrollLeftRef.current) {\n                previousScrollLeftRef.current = scrollLeft;\n                window.dispatchEvent(new CustomEvent(TABLE_HORIZONTAL_SCROLL_EVENT));\n            }\n        },\n        [enabled, syncHorizontalSections]\n    );\n\n    useEffect(() => {\n        if (!enabled) {\n            previousScrollLeftRef.current = 0;\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","useEffect"],"mappings":";AAEO,MAAMA,IAAgC,2BAEvCC,IAAyB,CAACC,MAA4C;AACxE,QAAMC,IAAgBD,GAAO;AAE7B,MAAIC,KAAiB,gBAAgBA;AACjC,WAAQA,EAA8B;AAG1C,QAAMC,IAASF,GAAO;AAEtB,SAAIE,KAAU,gBAAgBA,IAClBA,EAAuB,aAG5B;AACX,GAMaC,IAA2B,CAAC,EAAE,SAAAC,QAA6C;AACpF,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAEhCG,IAAyBC,EAAY,CAACC,MAAuB;AAC/D,UAAMC,IAAiB,CAACC,MAAmC;AACvD,UAAKA,GAIL;AAAA,YAAIF,MAAe,GAAG;AAClB,UAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,QACJ;AAEA,QAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,IACvD;AAEA,IAAAC,EAAeP,EAAgB,OAAO,GACtCO,EAAeL,EAAkB,OAAO;AAAA,EAC5C,GAAG,CAAA,CAAE,GAECO,IAAmBJ;AAAA,IACrB,CAACV,MAA4C;AACzC,YAAMW,IAAaZ,EAAuBC,CAAK;AAE/C,MAAII,KACAK,EAAuBE,CAAU,GAGjCA,MAAeH,EAAsB,YACrCA,EAAsB,UAAUG,GAChC,OAAO,cAAc,IAAI,YAAYb,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASK,CAAsB;AAAA,EAAA;AAGpC,SAAAM,EAAU,MAAM;AACZ,IAAKX,MACDI,EAAsB,UAAU,GAChCC,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACL,GAASK,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,mBAAAP;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useHorizontalSectionSync.js","sources":["../../../../src/components/table/layout/useHorizontalSectionSync.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type UIEvent } from 'react';\n\nexport const TABLE_HORIZONTAL_SCROLL_EVENT = 'table-horizontal-scroll';\n\nconst getScrollLeftFromEvent = (event: UIEvent<HTMLElement> | undefined) => {\n    const currentTarget = event?.currentTarget;\n\n    if (currentTarget && 'scrollLeft' in currentTarget) {\n        return (currentTarget as HTMLElement).scrollLeft;\n    }\n\n    const target = event?.target;\n\n    if (target && 'scrollLeft' in target) {\n        return (target as HTMLElement).scrollLeft;\n    }\n\n    return 0;\n};\n\ntype UseHorizontalSectionSyncProps = {\n    enabled: boolean;\n    hasFooterCells?: boolean;\n};\n\nexport const useHorizontalSectionSync = ({ enabled, hasFooterCells = true }: UseHorizontalSectionSyncProps) => {\n    const tableHeadRowRef = useRef<HTMLDivElement>(null);\n    const tableFooterRowRef = useRef<HTMLDivElement>(null);\n    const previousScrollLeftRef = useRef(0);\n    const [hasHorizontalScrollOffset, setHasHorizontalScrollOffset] = useState(false);\n\n    const syncHorizontalSections = useCallback(\n        (scrollLeft: number) => {\n            const applyTransform = (element: HTMLDivElement | null) => {\n                if (!element) {\n                    return;\n                }\n\n                if (scrollLeft === 0) {\n                    element.style.removeProperty('transform');\n                    return;\n                }\n\n                element.style.transform = `translateX(-${scrollLeft}px)`;\n            };\n\n            applyTransform(tableHeadRowRef.current);\n\n            if (hasFooterCells) {\n                applyTransform(tableFooterRowRef.current);\n            } else if (tableFooterRowRef.current) {\n                tableFooterRowRef.current.style.removeProperty('transform');\n            }\n        },\n        [hasFooterCells]\n    );\n\n    const handleBodyScroll = useCallback(\n        (event: UIEvent<HTMLElement> | undefined) => {\n            const scrollLeft = getScrollLeftFromEvent(event);\n            setHasHorizontalScrollOffset(scrollLeft > 0);\n\n            if (enabled) {\n                syncHorizontalSections(scrollLeft);\n            }\n\n            if (scrollLeft !== previousScrollLeftRef.current) {\n                previousScrollLeftRef.current = scrollLeft;\n                window.dispatchEvent(new CustomEvent(TABLE_HORIZONTAL_SCROLL_EVENT));\n            }\n        },\n        [enabled, syncHorizontalSections]\n    );\n\n    useEffect(() => {\n        if (!enabled) {\n            previousScrollLeftRef.current = 0;\n            setHasHorizontalScrollOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollOffset","setHasHorizontalScrollOffset","useState","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","useEffect"],"mappings":";AAEO,MAAMA,IAAgC,2BAEvCC,IAAyB,CAACC,MAA4C;AACxE,QAAMC,IAAgBD,GAAO;AAE7B,MAAIC,KAAiB,gBAAgBA;AACjC,WAAQA,EAA8B;AAG1C,QAAMC,IAASF,GAAO;AAEtB,SAAIE,KAAU,gBAAgBA,IAClBA,EAAuB,aAG5B;AACX,GAOaC,IAA2B,CAAC,EAAE,SAAAC,GAAS,gBAAAC,IAAiB,SAA0C;AAC3G,QAAMC,IAAkBC,EAAuB,IAAI,GAC7CC,IAAoBD,EAAuB,IAAI,GAC/CE,IAAwBF,EAAO,CAAC,GAChC,CAACG,GAA2BC,CAA4B,IAAIC,EAAS,EAAK,GAE1EC,IAAyBC;AAAA,IAC3B,CAACC,MAAuB;AACpB,YAAMC,IAAiB,CAACC,MAAmC;AACvD,YAAKA,GAIL;AAAA,cAAIF,MAAe,GAAG;AAClB,YAAAE,EAAQ,MAAM,eAAe,WAAW;AACxC;AAAA,UACJ;AAEA,UAAAA,EAAQ,MAAM,YAAY,eAAeF,CAAU;AAAA;AAAA,MACvD;AAEA,MAAAC,EAAeV,EAAgB,OAAO,GAElCD,IACAW,EAAeR,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGba,IAAmBJ;AAAA,IACrB,CAACd,MAA4C;AACzC,YAAMe,IAAahB,EAAuBC,CAAK;AAC/C,MAAAW,EAA6BI,IAAa,CAAC,GAEvCX,KACAS,EAAuBE,CAAU,GAGjCA,MAAeN,EAAsB,YACrCA,EAAsB,UAAUM,GAChC,OAAO,cAAc,IAAI,YAAYjB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASS,CAAsB;AAAA,EAAA;AAGpC,SAAAM,EAAU,MAAM;AACZ,IAAKf,MACDK,EAAsB,UAAU,GAChCE,EAA6B,EAAK,GAClCE,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACT,GAASS,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,2BAAAR;AAAA,IACA,mBAAAF;AAAA,IACA,iBAAAF;AAAA,EAAA;AAER;"}

package/components/table/layout/useMeasuredColumnMaxWidths.d.ts

@@ -1,12 +1,12 @@
 import { RefObject } from 'react';
-import { TableColumnDefinition } from '../Table.types';
+import { TableColumnDefinition, TableRowData } from '../Table.types';
 export declare const stabilizeMeasuredColumnMaxWidths: (previousMeasuredColumnMaxWidths: Record<string, string>, nextMeasuredColumnMaxWidths: Record<string, string>) => {
     [k: string]: string;
 };
-type UseMeasuredColumnMaxWidthsProps<RowType extends Record<string, unknown>> = {
+type UseMeasuredColumnMaxWidthsProps<RowType extends TableRowData> = {
     columns: TableColumnDefinition<RowType>[];
     enabled: boolean;
     tableWrapperRef: RefObject<HTMLDivElement | null>;
 };
-export declare const useMeasuredColumnMaxWidths: <RowType extends Record<string, unknown>>(props: UseMeasuredColumnMaxWidthsProps<RowType>) => Record<string, string>;
+export declare const useMeasuredColumnMaxWidths: <RowType extends TableRowData>(props: UseMeasuredColumnMaxWidthsProps<RowType>) => Record<string, string>;
 export {};

package/components/table/layout/useMeasuredColumnMaxWidths.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport type { TableColumnDefinition } from '../Table.types';\n\nconst MEASURED_WIDTH_JITTER_TOLERANCE_PX = 1;\n\nconst parsePixelWidth = (width?: string) => {\n    const match = width?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    return match ? Number(match[1]) : undefined;\n};\n\nconst measureRenderedWidth = (element: HTMLElement) => {\n    const renderedWidth = element.getBoundingClientRect().width;\n\n    return renderedWidth > 0 ? Math.ceil(renderedWidth) : element.scrollWidth;\n};\n\nconst resolveFlexGapWidth = (element: HTMLElement | null) => {\n    if (!element) {\n        return 0;\n    }\n\n    const styles = window.getComputedStyle(element);\n    const gap = Number.parseFloat(styles.columnGap || styles.gap || '0');\n\n    return Number.isFinite(gap) ? Math.ceil(gap) : 0;\n};\n\nconst measureColumnContentWidth = (element: HTMLElement) => {\n    const headerLabelElement = element.querySelector<HTMLElement>('.table-head-label');\n\n    if (headerLabelElement) {\n        const sortArrowsElement = element.querySelector<HTMLElement>('.sort-arrows');\n\n        return (\n            measureRenderedWidth(headerLabelElement) +\n            (sortArrowsElement ? measureRenderedWidth(sortArrowsElement) : 0) +\n            (sortArrowsElement ? resolveFlexGapWidth(element.querySelector<HTMLElement>('.table-head-button')) : 0)\n        );\n    }\n\n    const contentElement =\n        element.querySelector<HTMLElement>('.table-cell-content, .table-head-button-label') ?? element;\n\n    return contentElement.scrollWidth;\n};\n\nexport const stabilizeMeasuredColumnMaxWidths = (\n    previousMeasuredColumnMaxWidths: Record<string, string>,\n    nextMeasuredColumnMaxWidths: Record<string, string>\n) =>\n    Object.fromEntries(\n        Object.entries(nextMeasuredColumnMaxWidths).map(([columnKey, nextMeasuredWidth]) => {\n            const previousMeasuredWidth = previousMeasuredColumnMaxWidths[columnKey];\n            const previousMeasuredWidthPx = parsePixelWidth(previousMeasuredWidth);\n            const nextMeasuredWidthPx = parsePixelWidth(nextMeasuredWidth);\n\n            return [\n                columnKey,\n                previousMeasuredWidthPx !== undefined &&\n                nextMeasuredWidthPx !== undefined &&\n                Math.abs(previousMeasuredWidthPx - nextMeasuredWidthPx) <= MEASURED_WIDTH_JITTER_TOLERANCE_PX\n                    ? previousMeasuredWidth\n                    : nextMeasuredWidth,\n            ];\n        })\n    );\n\ntype UseMeasuredColumnMaxWidthsProps<RowType extends Record<string, unknown>> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    tableWrapperRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const useMeasuredColumnMaxWidths = <RowType extends Record<string, unknown>>(\n    props: UseMeasuredColumnMaxWidthsProps<RowType>\n) => {\n    const { columns, enabled, tableWrapperRef } = props;\n    const [measuredColumnMaxWidths, setMeasuredColumnMaxWidths] = useState<Record<string, string>>({});\n    const previousMeasuredWidthsRef = useRef('');\n    const previousMeasuredColumnMaxWidthsRef = useRef<Record<string, string>>({});\n    const columnsSignature = useMemo(\n        () =>\n            columns\n                .map(column => `${column.key}:${column.width === undefined ? 'auto' : String(column.width)}`)\n                .join('|'),\n        [columns]\n    );\n\n    useLayoutEffect(() => {\n        const wrapperElement = tableWrapperRef.current;\n\n        if (!enabled || !wrapperElement) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        if (columns.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const columnsWithoutWidth = columns.filter(column => column.width === undefined);\n\n        if (columnsWithoutWidth.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const measureColumnMaxWidths = () => {\n            const columnElements = Array.from(wrapperElement.querySelectorAll<HTMLElement>('[data-column]'));\n            const nextMeasuredColumnMaxWidths = Object.fromEntries(\n                columnsWithoutWidth.flatMap(column => {\n                    const matchingElements = columnElements.filter(element => element.dataset.column === column.key);\n                    const measuredWidth = matchingElements.reduce(\n                        (largestWidth, element) => Math.max(largestWidth, measureColumnContentWidth(element)),\n                        0\n                    );\n\n                    return measuredWidth > 0 ? [[column.key, `${Math.ceil(measuredWidth)}px`]] : [];\n                })\n            );\n            const stabilizedMeasuredColumnMaxWidths = stabilizeMeasuredColumnMaxWidths(\n                previousMeasuredColumnMaxWidthsRef.current,\n                nextMeasuredColumnMaxWidths\n            );\n            const serializedMeasuredWidths = JSON.stringify(stabilizedMeasuredColumnMaxWidths);\n\n            if (serializedMeasuredWidths !== previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = serializedMeasuredWidths;\n                previousMeasuredColumnMaxWidthsRef.current = stabilizedMeasuredColumnMaxWidths;\n                setMeasuredColumnMaxWidths(stabilizedMeasuredColumnMaxWidths);\n            }\n        };\n\n        measureColumnMaxWidths();\n\n        const observedElements = [\n            wrapperElement,\n            ...Array.from(\n                wrapperElement.querySelectorAll<HTMLElement>(\n                    '.table-head, .table-body, .table-footer, .table-scroll-content'\n                )\n            ),\n        ];\n        const resizeObserver = new ResizeObserver(() => {\n            measureColumnMaxWidths();\n        });\n\n        observedElements.forEach(element => {\n            resizeObserver.observe(element);\n        });\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, [columnsSignature, enabled, tableWrapperRef]);\n\n    return measuredColumnMaxWidths;\n};\n"],"names":["MEASURED_WIDTH_JITTER_TOLERANCE_PX","parsePixelWidth","width","match","measureRenderedWidth","element","renderedWidth","resolveFlexGapWidth","styles","gap","measureColumnContentWidth","headerLabelElement","sortArrowsElement","stabilizeMeasuredColumnMaxWidths","previousMeasuredColumnMaxWidths","nextMeasuredColumnMaxWidths","columnKey","nextMeasuredWidth","previousMeasuredWidth","previousMeasuredWidthPx","nextMeasuredWidthPx","useMeasuredColumnMaxWidths","props","columns","enabled","tableWrapperRef","measuredColumnMaxWidths","setMeasuredColumnMaxWidths","useState","previousMeasuredWidthsRef","useRef","previousMeasuredColumnMaxWidthsRef","columnsSignature","useMemo","column","useLayoutEffect","wrapperElement","columnsWithoutWidth","measureColumnMaxWidths","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths","observedElements","resizeObserver"],"mappings":"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"}
+{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\n\nconst MEASURED_WIDTH_JITTER_TOLERANCE_PX = 1;\n\nconst parsePixelWidth = (width?: string) => {\n    const match = width?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    return match ? Number(match[1]) : undefined;\n};\n\nconst measureRenderedWidth = (element: HTMLElement) => {\n    const renderedWidth = element.getBoundingClientRect().width;\n\n    return renderedWidth > 0 ? Math.ceil(renderedWidth) : element.scrollWidth;\n};\n\nconst resolveFlexGapWidth = (element: HTMLElement | null) => {\n    if (!element) {\n        return 0;\n    }\n\n    const styles = window.getComputedStyle(element);\n    const gap = Number.parseFloat(styles.columnGap || styles.gap || '0');\n\n    return Number.isFinite(gap) ? Math.ceil(gap) : 0;\n};\n\nconst measureColumnContentWidth = (element: HTMLElement) => {\n    const headerLabelElement = element.querySelector<HTMLElement>('.table-head-label');\n\n    if (headerLabelElement) {\n        const sortArrowsElement = element.querySelector<HTMLElement>('.sort-arrows');\n\n        return (\n            measureRenderedWidth(headerLabelElement) +\n            (sortArrowsElement ? measureRenderedWidth(sortArrowsElement) : 0) +\n            (sortArrowsElement ? resolveFlexGapWidth(element.querySelector<HTMLElement>('.table-head-button')) : 0)\n        );\n    }\n\n    const contentElement =\n        element.querySelector<HTMLElement>('.table-cell-content, .table-head-button-label') ?? element;\n\n    return contentElement.scrollWidth;\n};\n\nexport const stabilizeMeasuredColumnMaxWidths = (\n    previousMeasuredColumnMaxWidths: Record<string, string>,\n    nextMeasuredColumnMaxWidths: Record<string, string>\n) =>\n    Object.fromEntries(\n        Object.entries(nextMeasuredColumnMaxWidths).map(([columnKey, nextMeasuredWidth]) => {\n            const previousMeasuredWidth = previousMeasuredColumnMaxWidths[columnKey];\n            const previousMeasuredWidthPx = parsePixelWidth(previousMeasuredWidth);\n            const nextMeasuredWidthPx = parsePixelWidth(nextMeasuredWidth);\n\n            return [\n                columnKey,\n                previousMeasuredWidthPx !== undefined &&\n                nextMeasuredWidthPx !== undefined &&\n                Math.abs(previousMeasuredWidthPx - nextMeasuredWidthPx) <= MEASURED_WIDTH_JITTER_TOLERANCE_PX\n                    ? previousMeasuredWidth\n                    : nextMeasuredWidth,\n            ];\n        })\n    );\n\ntype UseMeasuredColumnMaxWidthsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    tableWrapperRef: RefObject<HTMLDivElement | null>;\n};\n\nexport const useMeasuredColumnMaxWidths = <RowType extends TableRowData>(\n    props: UseMeasuredColumnMaxWidthsProps<RowType>\n) => {\n    const { columns, enabled, tableWrapperRef } = props;\n    const [measuredColumnMaxWidths, setMeasuredColumnMaxWidths] = useState<Record<string, string>>({});\n    const previousMeasuredWidthsRef = useRef('');\n    const previousMeasuredColumnMaxWidthsRef = useRef<Record<string, string>>({});\n    const columnsSignature = useMemo(\n        () =>\n            columns\n                .map(column => `${column.key}:${column.width === undefined ? 'auto' : String(column.width)}`)\n                .join('|'),\n        [columns]\n    );\n\n    useLayoutEffect(() => {\n        const wrapperElement = tableWrapperRef.current;\n\n        if (!enabled || !wrapperElement) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        if (columns.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const columnsWithoutWidth = columns.filter(column => column.width === undefined);\n\n        if (columnsWithoutWidth.length === 0) {\n            if (previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = '';\n                previousMeasuredColumnMaxWidthsRef.current = {};\n                setMeasuredColumnMaxWidths({});\n            }\n\n            return;\n        }\n\n        const measureColumnMaxWidths = () => {\n            const columnElements = Array.from(wrapperElement.querySelectorAll<HTMLElement>('[data-column]'));\n            const nextMeasuredColumnMaxWidths = Object.fromEntries(\n                columnsWithoutWidth.flatMap(column => {\n                    const matchingElements = columnElements.filter(element => element.dataset.column === column.key);\n                    const measuredWidth = matchingElements.reduce(\n                        (largestWidth, element) => Math.max(largestWidth, measureColumnContentWidth(element)),\n                        0\n                    );\n\n                    return measuredWidth > 0 ? [[column.key, `${Math.ceil(measuredWidth)}px`]] : [];\n                })\n            );\n            const stabilizedMeasuredColumnMaxWidths = stabilizeMeasuredColumnMaxWidths(\n                previousMeasuredColumnMaxWidthsRef.current,\n                nextMeasuredColumnMaxWidths\n            );\n            const serializedMeasuredWidths = JSON.stringify(stabilizedMeasuredColumnMaxWidths);\n\n            if (serializedMeasuredWidths !== previousMeasuredWidthsRef.current) {\n                previousMeasuredWidthsRef.current = serializedMeasuredWidths;\n                previousMeasuredColumnMaxWidthsRef.current = stabilizedMeasuredColumnMaxWidths;\n                setMeasuredColumnMaxWidths(stabilizedMeasuredColumnMaxWidths);\n            }\n        };\n\n        measureColumnMaxWidths();\n\n        const observedElements = [\n            wrapperElement,\n            ...Array.from(\n                wrapperElement.querySelectorAll<HTMLElement>(\n                    '.table-head, .table-body, .table-footer, .table-scroll-content'\n                )\n            ),\n        ];\n        const resizeObserver = new ResizeObserver(() => {\n            measureColumnMaxWidths();\n        });\n\n        observedElements.forEach(element => {\n            resizeObserver.observe(element);\n        });\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, [columnsSignature, enabled, tableWrapperRef]);\n\n    return measuredColumnMaxWidths;\n};\n"],"names":["MEASURED_WIDTH_JITTER_TOLERANCE_PX","parsePixelWidth","width","match","measureRenderedWidth","element","renderedWidth","resolveFlexGapWidth","styles","gap","measureColumnContentWidth","headerLabelElement","sortArrowsElement","stabilizeMeasuredColumnMaxWidths","previousMeasuredColumnMaxWidths","nextMeasuredColumnMaxWidths","columnKey","nextMeasuredWidth","previousMeasuredWidth","previousMeasuredWidthPx","nextMeasuredWidthPx","useMeasuredColumnMaxWidths","props","columns","enabled","tableWrapperRef","measuredColumnMaxWidths","setMeasuredColumnMaxWidths","useState","previousMeasuredWidthsRef","useRef","previousMeasuredColumnMaxWidthsRef","columnsSignature","useMemo","column","useLayoutEffect","wrapperElement","columnsWithoutWidth","measureColumnMaxWidths","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths","observedElements","resizeObserver"],"mappings":"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"}

package/components/table/layout/useResizableColumns.d.ts

@@ -1,14 +1,15 @@
 import { PointerEvent as ReactPointerEvent } from 'react';
-import { TableColumnDefinition } from '../Table.types';
-type UseResizableColumnsProps<RowType extends Record<string, unknown>> = {
+import { TableColumnDefinition, TableRowData } from '../Table.types';
+type UseResizableColumnsProps<RowType extends TableRowData> = {
     columns: TableColumnDefinition<RowType>[];
     enabled: boolean;
-    onColumnResize?: (columnKey: string, width?: number) => void;
+    onColumnResize?: (columnKey: string, width?: number | string) => void;
 };
-export declare const useResizableColumns: <RowType extends Record<string, unknown>>(props: UseResizableColumnsProps<RowType>) => {
+export declare const useResizableColumns: <RowType extends TableRowData>(props: UseResizableColumnsProps<RowType>) => {
     handleColumnResizeReset: (columnKey: string) => void;
     handleColumnResizeStart: (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => void;
     lastResizableColumnKey: string | Extract<keyof RowType, string> | undefined;
+    resettableColumnKeys: Set<string>;
     resizedColumns: TableColumnDefinition<RowType>[];
 };
 export {};

package/components/table/layout/useResizableColumns.js

@@ -1,91 +1,132 @@
-import { useState as z, useEffect as f } from "react";
-import { DEFAULT_MIN_RESIZE_WIDTH_PX as W, MIN_COLUMN_WIDTH_PX as R, DEFAULT_MAX_RESIZE_WIDTH_PX as p } from "../tableSizing.constants.js";
-const w = (c) => {
-  const l = (typeof c == "number" ? `${c}px` : c)?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
-  if (l)
-    return Math.round(Number(l[1]));
-}, S = (c) => {
-  const { columns: s, enabled: l, onColumnResize: a } = c, [y, u] = z({}), [r, h] = z(void 0);
-  f(() => {
-    a && u((e) => {
-      const n = Object.fromEntries(
-        Object.entries(e).flatMap(([o]) => {
-          const t = s.find((d) => d.key === o), i = w(t?.width);
-          return i === void 0 ? [] : [[o, i]];
-        })
-      );
-      return JSON.stringify(e) === JSON.stringify(n) ? e : n;
-    });
-  }, [s, a]), f(() => {
-    if (!r)
+import { useState as z, useRef as R, useLayoutEffect as L, useEffect as I, useMemo as X } from "react";
+import { DEFAULT_MIN_RESIZE_WIDTH_PX as g, MIN_COLUMN_WIDTH_PX as b, DEFAULT_MAX_RESIZE_WIDTH_PX as D } from "../tableSizing.constants.js";
+const E = (l) => {
+  const u = (typeof l == "number" ? `${l}px` : l?.trim())?.match(/^(-?\d+(?:\.\d+)?)(px|%)$/);
+  if (u)
+    return {
+      unit: u[2],
+      value: Number(u[1])
+    };
+}, f = (l, r) => {
+  if (l === r)
+    return !0;
+  const u = E(l), h = E(r);
+  return u !== void 0 && h !== void 0 && u.unit === h.unit ? u.value === h.value : !1;
+}, P = (l) => {
+  const { columns: r, enabled: u, onColumnResize: h } = l, [C, W] = z({}), [c, p] = z(void 0), m = R({}), y = R({}), w = R(!1);
+  r.forEach((e) => {
+    e.key in m.current || (m.current[e.key] = e.width);
+  }), L(() => {
+    const e = Object.fromEntries(r.map((t) => [t.key, t.width]));
+    if (r.length === 0)
+      return;
+    if (!w.current) {
+      y.current = e, w.current = !0;
+      return;
+    }
+    const i = y.current, a = new Set(r.map((t) => t.key)), s = Object.keys(i);
+    (r.some((t) => !f(t.width, i[t.key])) || s.some((t) => !a.has(t))) && (W((t) => {
+      let n = t;
+      return r.forEach((d) => {
+        const S = y.current[d.key];
+        if (f(d.width, S))
+          return;
+        const _ = m.current[d.key];
+        if (f(d.width, _)) {
+          if (!(d.key in n))
+            return;
+          n = { ...n }, delete n[d.key];
+          return;
+        }
+        n[d.key] !== d.width && (n = {
+          ...n,
+          [d.key]: d.width
+        });
+      }), Object.keys(n).forEach((d) => {
+        a.has(d) || (n === t && (n = { ...n }), delete n[d]);
+      }), n;
+    }), y.current = e);
+  }, [r]), I(() => {
+    if (!c)
       return;
-    const e = document.body.style.cursor, n = document.body.style.userSelect;
+    const e = document.body.style.cursor, i = document.body.style.userSelect;
     document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-    const o = (i) => {
-      const d = Math.min(
-        r.maxResizeWidth,
+    const a = (o) => {
+      const t = Math.min(
+        c.maxResizeWidth,
         Math.max(
-          r.minResizeWidth,
-          Math.round(r.startWidth + i.clientX - r.startX)
+          c.minResizeWidth,
+          Math.round(c.startWidth + o.clientX - c.startX)
         )
       );
-      a?.(r.columnKey, d), u(
-        (m) => m[r.columnKey] === d ? m : {
-          ...m,
-          [r.columnKey]: d
+      h?.(c.columnKey, t), W(
+        (n) => n[c.columnKey] === t ? n : {
+          ...n,
+          [c.columnKey]: t
         }
       );
-    }, t = () => {
-      h(void 0);
+    }, s = () => {
+      p(void 0);
     };
-    return window.addEventListener("pointermove", o), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", t), () => {
-      document.body.style.cursor = e, document.body.style.userSelect = n, window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", t);
+    return window.addEventListener("pointermove", a), window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), () => {
+      document.body.style.cursor = e, document.body.style.userSelect = i, window.removeEventListener("pointermove", a), window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
     };
-  }, [a, r]);
-  const b = (e, n) => {
-    if (!l || n.button !== 0)
+  }, [h, c]);
+  const k = (e, i) => {
+    if (!u || i.button !== 0)
       return;
-    const o = s.find((m) => m.key === e), t = n.currentTarget.closest(".table-head-cell");
-    if (!o || !t)
+    const a = r.find((n) => n.key === e), s = i.currentTarget.closest(".table-head-cell");
+    if (!a || !s)
       return;
-    n.preventDefault(), n.stopPropagation();
-    const i = Math.max(o.minResizeWidth ?? W, R), d = Math.max(o.maxResizeWidth ?? p, i);
-    h({
+    i.preventDefault(), i.stopPropagation();
+    const o = Math.max(a.minResizeWidth ?? g, b), t = Math.max(a.maxResizeWidth ?? D, o);
+    p({
       columnKey: e,
-      maxResizeWidth: d,
-      minResizeWidth: i,
-      startWidth: t.getBoundingClientRect().width,
-      startX: n.clientX
+      maxResizeWidth: t,
+      minResizeWidth: o,
+      startWidth: s.getBoundingClientRect().width,
+      startX: i.clientX
     });
-  }, x = (e) => {
-    const n = s.find((t) => t.key === e), o = n?.minResizeWidth !== void 0 ? Math.max(n.minResizeWidth, R) : void 0;
-    h(void 0), a?.(e, o), u((t) => {
-      if (o === void 0) {
-        if (!(e in t))
-          return t;
-        const i = { ...t };
-        return delete i[e], i;
+  }, v = (e) => {
+    const i = r.find((o) => o.key === e), s = m.current[e] ?? (i?.minResizeWidth !== void 0 ? Math.max(i.minResizeWidth, b) : void 0);
+    p(void 0), h?.(e, s), W((o) => {
+      if (s === void 0) {
+        if (!(e in o))
+          return o;
+        const t = { ...o };
+        return delete t[e], t;
       }
-      return t[e] === o ? t : {
-        ...t,
-        [e]: o
+      return o[e] === s ? o : {
+        ...o,
+        [e]: s
       };
     });
-  }, E = s.map((e) => {
-    const n = y[e.key];
-    return n === void 0 ? e : {
+  }, M = r.map((e) => {
+    const i = C[e.key];
+    return i === void 0 ? e : {
       ...e,
-      width: n
+      width: i
     };
-  });
+  }), x = X(
+    () => /* @__PURE__ */ new Set([
+      ...r.flatMap(
+        (e) => f(e.width, m.current[e.key]) ? [] : [e.key]
+      ),
+      ...Object.entries(C).flatMap(
+        ([e, i]) => f(i, m.current[e]) ? [] : [e]
+      )
+    ]),
+    [r, C]
+  );
   return {
-    handleColumnResizeReset: x,
-    handleColumnResizeStart: b,
-    lastResizableColumnKey: s.at(-1)?.key,
-    resizedColumns: E
+    handleColumnResizeReset: v,
+    handleColumnResizeStart: k,
+    lastResizableColumnKey: r.at(-1)?.key,
+    resettableColumnKeys: x,
+    resizedColumns: M
   };
 };
 export {
-  S as useResizableColumns
+  P as useResizableColumns
 };
 //# sourceMappingURL=useResizableColumns.js.map

package/components/table/layout/useResizableColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizableColumns.js","sources":["../../../../src/components/table/layout/useResizableColumns.ts"],"sourcesContent":["import { useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react';\n\nimport type { TableColumnDefinition } from '../Table.types';\nimport {\n    DEFAULT_MAX_RESIZE_WIDTH_PX,\n    DEFAULT_MIN_RESIZE_WIDTH_PX,\n    MIN_COLUMN_WIDTH_PX,\n} from '../tableSizing.constants';\n\ntype ResizeSession = {\n    columnKey: string;\n    maxResizeWidth: number;\n    minResizeWidth: number;\n    startWidth: number;\n    startX: number;\n};\n\ntype UseResizableColumnsProps<RowType extends Record<string, unknown>> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    onColumnResize?: (columnKey: string, width?: number) => void;\n};\n\nconst parsePixelWidth = (width?: number | string) => {\n    const normalizedWidth = typeof width === 'number' ? `${width}px` : width;\n    const match = normalizedWidth?.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    if (!match) {\n        return;\n    }\n\n    return Math.round(Number(match[1]));\n};\n\nexport const useResizableColumns = <RowType extends Record<string, unknown>>(\n    props: UseResizableColumnsProps<RowType>\n) => {\n    const { columns, enabled, onColumnResize } = props;\n    const [resizedColumnWidths, setResizedColumnWidths] = useState<Record<string, number>>({});\n    const [resizeSession, setResizeSession] = useState<ResizeSession | undefined>(undefined);\n\n    useEffect(() => {\n        if (!onColumnResize) {\n            return;\n        }\n\n        setResizedColumnWidths(previousWidths => {\n            const nextWidths = Object.fromEntries(\n                Object.entries(previousWidths).flatMap(([columnKey]) => {\n                    const currentColumn = columns.find(column => column.key === columnKey);\n                    const currentPixelWidth = parsePixelWidth(currentColumn?.width);\n\n                    return currentPixelWidth === undefined ? [] : [[columnKey, currentPixelWidth]];\n                })\n            );\n\n            return JSON.stringify(previousWidths) === JSON.stringify(nextWidths) ? previousWidths : nextWidths;\n        });\n    }, [columns, onColumnResize]);\n\n    useEffect(() => {\n        if (!resizeSession) {\n            return;\n        }\n\n        const previousBodyCursor = document.body.style.cursor;\n        const previousBodyUserSelect = document.body.style.userSelect;\n\n        document.body.style.cursor = 'col-resize';\n        document.body.style.userSelect = 'none';\n\n        const handlePointerMove = (event: PointerEvent) => {\n            const nextWidth = Math.min(\n                resizeSession.maxResizeWidth,\n                Math.max(\n                    resizeSession.minResizeWidth,\n                    Math.round(resizeSession.startWidth + event.clientX - resizeSession.startX)\n                )\n            );\n\n            onColumnResize?.(resizeSession.columnKey, nextWidth);\n\n            setResizedColumnWidths(previousWidths =>\n                previousWidths[resizeSession.columnKey] === nextWidth\n                    ? previousWidths\n                    : {\n                          ...previousWidths,\n                          [resizeSession.columnKey]: nextWidth,\n                      }\n            );\n        };\n\n        const stopResize = () => {\n            setResizeSession(undefined);\n        };\n\n        window.addEventListener('pointermove', handlePointerMove);\n        window.addEventListener('pointerup', stopResize);\n        window.addEventListener('pointercancel', stopResize);\n\n        return () => {\n            document.body.style.cursor = previousBodyCursor;\n            document.body.style.userSelect = previousBodyUserSelect;\n            window.removeEventListener('pointermove', handlePointerMove);\n            window.removeEventListener('pointerup', stopResize);\n            window.removeEventListener('pointercancel', stopResize);\n        };\n    }, [onColumnResize, resizeSession]);\n\n    const handleColumnResizeStart = (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => {\n        if (!enabled || event.button !== 0) {\n            return;\n        }\n\n        const column = columns.find(currentColumn => currentColumn.key === columnKey);\n        const headerCellElement = event.currentTarget.closest<HTMLElement>('.table-head-cell');\n\n        if (!column || !headerCellElement) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const minResizeWidth = Math.max(column.minResizeWidth ?? DEFAULT_MIN_RESIZE_WIDTH_PX, MIN_COLUMN_WIDTH_PX);\n        const maxResizeWidth = Math.max(column.maxResizeWidth ?? DEFAULT_MAX_RESIZE_WIDTH_PX, minResizeWidth);\n\n        setResizeSession({\n            columnKey,\n            maxResizeWidth,\n            minResizeWidth,\n            startWidth: headerCellElement.getBoundingClientRect().width,\n            startX: event.clientX,\n        });\n    };\n\n    const handleColumnResizeReset = (columnKey: string) => {\n        const column = columns.find(currentColumn => currentColumn.key === columnKey);\n        const resetWidth =\n            column?.minResizeWidth !== undefined ? Math.max(column.minResizeWidth, MIN_COLUMN_WIDTH_PX) : undefined;\n\n        setResizeSession(undefined);\n        onColumnResize?.(columnKey, resetWidth);\n        setResizedColumnWidths(previousWidths => {\n            if (resetWidth === undefined) {\n                if (!(columnKey in previousWidths)) {\n                    return previousWidths;\n                }\n\n                const nextWidths = { ...previousWidths };\n                delete nextWidths[columnKey];\n\n                return nextWidths;\n            }\n\n            return previousWidths[columnKey] === resetWidth\n                ? previousWidths\n                : {\n                      ...previousWidths,\n                      [columnKey]: resetWidth,\n                  };\n        });\n    };\n\n    const resizedColumns = columns.map(column => {\n        const resizedWidth = resizedColumnWidths[column.key];\n\n        return resizedWidth === undefined\n            ? column\n            : {\n                  ...column,\n                  width: resizedWidth,\n              };\n    });\n\n    return {\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey: columns.at(-1)?.key,\n        resizedColumns,\n    };\n};\n"],"names":["parsePixelWidth","width","match","useResizableColumns","props","columns","enabled","onColumnResize","resizedColumnWidths","setResizedColumnWidths","useState","resizeSession","setResizeSession","useEffect","previousWidths","nextWidths","columnKey","currentColumn","column","currentPixelWidth","previousBodyCursor","previousBodyUserSelect","handlePointerMove","event","nextWidth","stopResize","handleColumnResizeStart","headerCellElement","minResizeWidth","DEFAULT_MIN_RESIZE_WIDTH_PX","MIN_COLUMN_WIDTH_PX","maxResizeWidth","DEFAULT_MAX_RESIZE_WIDTH_PX","handleColumnResizeReset","resetWidth","resizedColumns","resizedWidth"],"mappings":"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"}
+{"version":3,"file":"useResizableColumns.js","sources":["../../../../src/components/table/layout/useResizableColumns.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useMemo, useRef, useState, type PointerEvent as ReactPointerEvent } from 'react';\n\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\nimport {\n    DEFAULT_MAX_RESIZE_WIDTH_PX,\n    DEFAULT_MIN_RESIZE_WIDTH_PX,\n    MIN_COLUMN_WIDTH_PX,\n} from '../tableSizing.constants';\n\ntype ResizeSession = {\n    columnKey: string;\n    maxResizeWidth: number;\n    minResizeWidth: number;\n    startWidth: number;\n    startX: number;\n};\n\ntype UseResizableColumnsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    enabled: boolean;\n    onColumnResize?: (columnKey: string, width?: number | string) => void;\n};\n\nconst parseComparableWidth = (width?: number | string) => {\n    const normalizedWidth = typeof width === 'number' ? `${width}px` : width?.trim();\n    const match = normalizedWidth?.match(/^(-?\\d+(?:\\.\\d+)?)(px|%)$/);\n\n    if (!match) {\n        return;\n    }\n\n    return {\n        unit: match[2],\n        value: Number(match[1]),\n    };\n};\n\nconst areColumnWidthsEqual = (currentWidth?: number | string, initialWidth?: number | string) => {\n    if (currentWidth === initialWidth) {\n        return true;\n    }\n\n    const currentComparableWidth = parseComparableWidth(currentWidth);\n    const initialComparableWidth = parseComparableWidth(initialWidth);\n\n    if (\n        currentComparableWidth !== undefined &&\n        initialComparableWidth !== undefined &&\n        currentComparableWidth.unit === initialComparableWidth.unit\n    ) {\n        return currentComparableWidth.value === initialComparableWidth.value;\n    }\n\n    return false;\n};\n\nexport const useResizableColumns = <RowType extends TableRowData>(props: UseResizableColumnsProps<RowType>) => {\n    const { columns, enabled, onColumnResize } = props;\n    const [modifiedColumnWidths, setModifiedColumnWidths] = useState<Record<string, number | string | undefined>>({});\n    const [resizeSession, setResizeSession] = useState<ResizeSession | undefined>(undefined);\n    const initialColumnWidthsRef = useRef<Record<string, number | string | undefined>>({});\n    const previousColumnWidthsRef = useRef<Record<string, number | string | undefined>>({});\n    const hasInitializedColumnWidthsRef = useRef(false);\n\n    // Capture the initial explicit width synchronously during render so the first\n    // derived `resettableColumnKeys` set already compares against stable defaults.\n    // Using an effect here would be too late: the first render would treat every\n    // explicit width as \"already resized\" and show dotted reset handles.\n    columns.forEach(column => {\n        if (!(column.key in initialColumnWidthsRef.current)) {\n            initialColumnWidthsRef.current[column.key] = column.width;\n        }\n    });\n\n    useLayoutEffect(() => {\n        const currentColumnWidths = Object.fromEntries(columns.map(column => [column.key, column.width] as const));\n\n        // Header columns are registered in a preceding render pass. Ignore empty\n        // intermediate states and only establish the baseline once the first real\n        // column model is available.\n        if (columns.length === 0) {\n            return;\n        }\n\n        // The first non-empty column model defines the baseline widths. Do not mark\n        // anything as resettable during that initialization phase, even if later\n        // renders normalize the same width differently.\n        if (!hasInitializedColumnWidthsRef.current) {\n            previousColumnWidthsRef.current = currentColumnWidths;\n            hasInitializedColumnWidthsRef.current = true;\n            return;\n        }\n\n        const previousColumnWidths = previousColumnWidthsRef.current;\n        const currentColumnKeySet = new Set(columns.map(column => column.key));\n        const previousColumnKeys = Object.keys(previousColumnWidths);\n        const hasColumnWidthChanges =\n            columns.some(column => !areColumnWidthsEqual(column.width, previousColumnWidths[column.key])) ||\n            previousColumnKeys.some(columnKey => !currentColumnKeySet.has(columnKey));\n\n        if (!hasColumnWidthChanges) {\n            return;\n        }\n\n        setModifiedColumnWidths(previousWidths => {\n            let nextWidths = previousWidths;\n\n            columns.forEach(column => {\n                const previousColumnWidth = previousColumnWidthsRef.current[column.key];\n\n                if (areColumnWidthsEqual(column.width, previousColumnWidth)) {\n                    return;\n                }\n\n                const initialColumnWidth = initialColumnWidthsRef.current[column.key];\n\n                if (areColumnWidthsEqual(column.width, initialColumnWidth)) {\n                    if (!(column.key in nextWidths)) {\n                        return;\n                    }\n\n                    nextWidths = { ...nextWidths };\n                    delete nextWidths[column.key];\n                    return;\n                }\n\n                if (nextWidths[column.key] === column.width) {\n                    return;\n                }\n\n                nextWidths = {\n                    ...nextWidths,\n                    [column.key]: column.width,\n                };\n            });\n\n            Object.keys(nextWidths).forEach(columnKey => {\n                if (currentColumnKeySet.has(columnKey)) {\n                    return;\n                }\n\n                if (nextWidths === previousWidths) {\n                    nextWidths = { ...nextWidths };\n                }\n\n                delete nextWidths[columnKey];\n            });\n\n            return nextWidths;\n        });\n\n        previousColumnWidthsRef.current = currentColumnWidths;\n    }, [columns]);\n\n    useEffect(() => {\n        if (!resizeSession) {\n            return;\n        }\n\n        const previousBodyCursor = document.body.style.cursor;\n        const previousBodyUserSelect = document.body.style.userSelect;\n\n        document.body.style.cursor = 'col-resize';\n        document.body.style.userSelect = 'none';\n\n        const handlePointerMove = (event: PointerEvent) => {\n            const nextWidth = Math.min(\n                resizeSession.maxResizeWidth,\n                Math.max(\n                    resizeSession.minResizeWidth,\n                    Math.round(resizeSession.startWidth + event.clientX - resizeSession.startX)\n                )\n            );\n\n            onColumnResize?.(resizeSession.columnKey, nextWidth);\n\n            setModifiedColumnWidths(previousWidths =>\n                previousWidths[resizeSession.columnKey] === nextWidth\n                    ? previousWidths\n                    : {\n                          ...previousWidths,\n                          [resizeSession.columnKey]: nextWidth,\n                      }\n            );\n        };\n\n        const stopResize = () => {\n            setResizeSession(undefined);\n        };\n\n        window.addEventListener('pointermove', handlePointerMove);\n        window.addEventListener('pointerup', stopResize);\n        window.addEventListener('pointercancel', stopResize);\n\n        return () => {\n            document.body.style.cursor = previousBodyCursor;\n            document.body.style.userSelect = previousBodyUserSelect;\n            window.removeEventListener('pointermove', handlePointerMove);\n            window.removeEventListener('pointerup', stopResize);\n            window.removeEventListener('pointercancel', stopResize);\n        };\n    }, [onColumnResize, resizeSession]);\n\n    const handleColumnResizeStart = (columnKey: string, event: ReactPointerEvent<HTMLDivElement>) => {\n        if (!enabled || event.button !== 0) {\n            return;\n        }\n\n        const column = columns.find(currentColumn => currentColumn.key === columnKey);\n        const headerCellElement = event.currentTarget.closest<HTMLElement>('.table-head-cell');\n\n        if (!column || !headerCellElement) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const minResizeWidth = Math.max(column.minResizeWidth ?? DEFAULT_MIN_RESIZE_WIDTH_PX, MIN_COLUMN_WIDTH_PX);\n        const maxResizeWidth = Math.max(column.maxResizeWidth ?? DEFAULT_MAX_RESIZE_WIDTH_PX, minResizeWidth);\n\n        setResizeSession({\n            columnKey,\n            maxResizeWidth,\n            minResizeWidth,\n            startWidth: headerCellElement.getBoundingClientRect().width,\n            startX: event.clientX,\n        });\n    };\n\n    const handleColumnResizeReset = (columnKey: string) => {\n        const column = columns.find(currentColumn => currentColumn.key === columnKey);\n        const initialColumnWidth = initialColumnWidthsRef.current[columnKey];\n        const resetWidth =\n            initialColumnWidth ??\n            (column?.minResizeWidth !== undefined ? Math.max(column.minResizeWidth, MIN_COLUMN_WIDTH_PX) : undefined);\n\n        setResizeSession(undefined);\n        onColumnResize?.(columnKey, resetWidth);\n        setModifiedColumnWidths(previousWidths => {\n            if (resetWidth === undefined) {\n                if (!(columnKey in previousWidths)) {\n                    return previousWidths;\n                }\n\n                const nextWidths = { ...previousWidths };\n                delete nextWidths[columnKey];\n\n                return nextWidths;\n            }\n\n            return previousWidths[columnKey] === resetWidth\n                ? previousWidths\n                : {\n                      ...previousWidths,\n                      [columnKey]: resetWidth,\n                  };\n        });\n    };\n\n    const resizedColumns = columns.map(column => {\n        const resizedWidth = modifiedColumnWidths[column.key];\n\n        return resizedWidth === undefined\n            ? column\n            : {\n                  ...column,\n                  width: resizedWidth,\n              };\n    });\n\n    const resettableColumnKeys = useMemo(\n        () =>\n            new Set([\n                ...columns.flatMap(column =>\n                    areColumnWidthsEqual(column.width, initialColumnWidthsRef.current[column.key]) ? [] : [column.key]\n                ),\n                ...Object.entries(modifiedColumnWidths).flatMap(([columnKey, width]) =>\n                    areColumnWidthsEqual(width, initialColumnWidthsRef.current[columnKey]) ? [] : [columnKey]\n                ),\n            ]),\n        [columns, modifiedColumnWidths]\n    );\n\n    return {\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey: columns.at(-1)?.key,\n        resettableColumnKeys,\n        resizedColumns,\n    };\n};\n"],"names":["parseComparableWidth","width","match","areColumnWidthsEqual","currentWidth","initialWidth","currentComparableWidth","initialComparableWidth","useResizableColumns","props","columns","enabled","onColumnResize","modifiedColumnWidths","setModifiedColumnWidths","useState","resizeSession","setResizeSession","initialColumnWidthsRef","useRef","previousColumnWidthsRef","hasInitializedColumnWidthsRef","column","useLayoutEffect","currentColumnWidths","previousColumnWidths","currentColumnKeySet","previousColumnKeys","columnKey","previousWidths","nextWidths","previousColumnWidth","initialColumnWidth","useEffect","previousBodyCursor","previousBodyUserSelect","handlePointerMove","event","nextWidth","stopResize","handleColumnResizeStart","currentColumn","headerCellElement","minResizeWidth","DEFAULT_MIN_RESIZE_WIDTH_PX","MIN_COLUMN_WIDTH_PX","maxResizeWidth","DEFAULT_MAX_RESIZE_WIDTH_PX","handleColumnResizeReset","resetWidth","resizedColumns","resizedWidth","resettableColumnKeys","useMemo"],"mappings":"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"}

package/components/table/layout/useTableBodyScrollBottom.d.ts

@@ -0,0 +1,12 @@
+type UseTableBodyScrollBottomProps = {
+    enabled: boolean;
+    itemCount: number;
+    onScrollBottom?: () => void;
+    scrollBottomOffset: number;
+    scrollElement?: HTMLDivElement | null;
+};
+declare const useTableBodyScrollBottom: (props: UseTableBodyScrollBottomProps) => {
+    handleScrollBottom: (element?: HTMLDivElement | null) => void;
+    resetScrollBottomTrigger: () => void;
+};
+export default useTableBodyScrollBottom;

package/components/table/layout/useTableBodyScrollBottom.js

@@ -0,0 +1,37 @@
+import { useRef as f, useCallback as a, useEffect as m } from "react";
+const B = (o, t) => o.scrollTop + o.clientHeight >= o.scrollHeight - t, S = (o) => {
+  const { enabled: t, itemCount: i, onScrollBottom: l, scrollBottomOffset: s, scrollElement: n } = o, r = f(!1), c = a(
+    (e) => {
+      if (!t || !e || !l)
+        return;
+      if (!B(e, s)) {
+        r.current = !1;
+        return;
+      }
+      r.current || (r.current = !0, l());
+    },
+    [t, l, s]
+  );
+  m(() => {
+    if (!t || !n)
+      return;
+    r.current = !1;
+    const e = requestAnimationFrame(() => {
+      c(n);
+    });
+    return () => {
+      cancelAnimationFrame(e);
+    };
+  }, [t, c, i, n]);
+  const u = a(() => {
+    r.current = !1;
+  }, []);
+  return {
+    handleScrollBottom: c,
+    resetScrollBottomTrigger: u
+  };
+};
+export {
+  S as default
+};
+//# sourceMappingURL=useTableBodyScrollBottom.js.map

package/components/table/layout/useTableBodyScrollBottom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableBodyScrollBottom.js","sources":["../../../../src/components/table/layout/useTableBodyScrollBottom.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ntype UseTableBodyScrollBottomProps = {\n    enabled: boolean;\n    itemCount: number;\n    onScrollBottom?: () => void;\n    scrollBottomOffset: number;\n    scrollElement?: HTMLDivElement | null;\n};\n\nconst isScrollContainerAtBottom = (element: HTMLDivElement, offset: number) =>\n    element.scrollTop + element.clientHeight >= element.scrollHeight - offset;\n\nconst useTableBodyScrollBottom = (props: UseTableBodyScrollBottomProps) => {\n    const { enabled, itemCount, onScrollBottom, scrollBottomOffset, scrollElement } = props;\n\n    const hasTriggeredScrollBottomRef = useRef(false);\n\n    const handleScrollBottom = useCallback(\n        (element?: HTMLDivElement | null) => {\n            if (!enabled || !element || !onScrollBottom) {\n                return;\n            }\n\n            const isAtBottom = isScrollContainerAtBottom(element, scrollBottomOffset);\n\n            if (!isAtBottom) {\n                hasTriggeredScrollBottomRef.current = false;\n                return;\n            }\n\n            if (hasTriggeredScrollBottomRef.current) {\n                return;\n            }\n\n            hasTriggeredScrollBottomRef.current = true;\n            onScrollBottom();\n        },\n        [enabled, onScrollBottom, scrollBottomOffset]\n    );\n\n    useEffect(() => {\n        if (!enabled || !scrollElement) {\n            return;\n        }\n\n        hasTriggeredScrollBottomRef.current = false;\n\n        const frameId = requestAnimationFrame(() => {\n            handleScrollBottom(scrollElement);\n        });\n\n        return () => {\n            cancelAnimationFrame(frameId);\n        };\n    }, [enabled, handleScrollBottom, itemCount, scrollElement]);\n\n    const resetScrollBottomTrigger = useCallback(() => {\n        hasTriggeredScrollBottomRef.current = false;\n    }, []);\n\n    return {\n        handleScrollBottom,\n        resetScrollBottomTrigger,\n    };\n};\n\nexport default useTableBodyScrollBottom;\n"],"names":["isScrollContainerAtBottom","element","offset","useTableBodyScrollBottom","props","enabled","itemCount","onScrollBottom","scrollBottomOffset","scrollElement","hasTriggeredScrollBottomRef","useRef","handleScrollBottom","useCallback","useEffect","frameId","resetScrollBottomTrigger"],"mappings":";AAUA,MAAMA,IAA4B,CAACC,GAAyBC,MACxDD,EAAQ,YAAYA,EAAQ,gBAAgBA,EAAQ,eAAeC,GAEjEC,IAA2B,CAACC,MAAyC;AACvE,QAAM,EAAE,SAAAC,GAAS,WAAAC,GAAW,gBAAAC,GAAgB,oBAAAC,GAAoB,eAAAC,MAAkBL,GAE5EM,IAA8BC,EAAO,EAAK,GAE1CC,IAAqBC;AAAA,IACvB,CAACZ,MAAoC;AACjC,UAAI,CAACI,KAAW,CAACJ,KAAW,CAACM;AACzB;AAKJ,UAAI,CAFeP,EAA0BC,GAASO,CAAkB,GAEvD;AACb,QAAAE,EAA4B,UAAU;AACtC;AAAA,MACJ;AAEA,MAAIA,EAA4B,YAIhCA,EAA4B,UAAU,IACtCH,EAAA;AAAA,IACJ;AAAA,IACA,CAACF,GAASE,GAAgBC,CAAkB;AAAA,EAAA;AAGhD,EAAAM,EAAU,MAAM;AACZ,QAAI,CAACT,KAAW,CAACI;AACb;AAGJ,IAAAC,EAA4B,UAAU;AAEtC,UAAMK,IAAU,sBAAsB,MAAM;AACxC,MAAAH,EAAmBH,CAAa;AAAA,IACpC,CAAC;AAED,WAAO,MAAM;AACT,2BAAqBM,CAAO;AAAA,IAChC;AAAA,EACJ,GAAG,CAACV,GAASO,GAAoBN,GAAWG,CAAa,CAAC;AAE1D,QAAMO,IAA2BH,EAAY,MAAM;AAC/C,IAAAH,EAA4B,UAAU;AAAA,EAC1C,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACH,oBAAAE;AAAA,IACA,0BAAAI;AAAA,EAAA;AAER;"}

package/components/table/layout/useTableLayout.d.ts

@@ -1,25 +1,36 @@
 import { CSSProperties } from 'react';
-import { TableCardsStyleSettings } from '../TableCard';
-import { TableColumnDefinition, TableStyle } from '../Table.types';
-export type TableColumnWithArea<RowType extends Record<string, unknown>> = {
+import { TableCardsStyleSettings, TableColumnDefinition, TableRowData } from '../Table.types';
+export type TableColumnWithArea<RowType extends TableRowData> = {
     column: TableColumnDefinition<RowType>;
     columnIndex: number;
     areaName: string;
 };
-type UseTableLayoutProps<RowType extends Record<string, unknown>> = {
+type UseTableLayoutProps<RowType extends TableRowData> = {
     bodyMaxHeight?: string;
     cardsStyle?: TableCardsStyleSettings;
     columns: TableColumnDefinition<RowType>[];
+    hasFooterCells?: boolean;
+    rowSeparatorWidth?: number | string;
     showSelectionColumn?: boolean;
     style?: CSSProperties;
 };
-export declare const useTableLayout: <RowType extends Record<string, unknown>>(props: UseTableLayoutProps<RowType>) => {
+type InternalTableStyle = CSSProperties & {
+    '--table-columns'?: string;
+    '--table-areas'?: string;
+    '--table-cards-min'?: string;
+    '--table-cards-max'?: string;
+    '--table-column-count'?: string;
+    '--table-row-separator-width'?: string;
+    '--table-width'?: string;
+};
+export declare const useTableLayout: <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {
     columnsWithAreas: TableColumnWithArea<RowType>[];
     handleBodyScroll: (event: import('react').UIEvent<HTMLElement> | undefined) => void;
+    hasHorizontalScrollOffset: boolean;
     tableUseOverflow: boolean;
     tableWrapperRef: import('react').MutableRefObject<HTMLDivElement | null>;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
     tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
-    wrapperStyle: TableStyle;
+    wrapperStyle: InternalTableStyle;
 };
 export {};