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

package/components/table/layout/useMeasuredColumnMaxWidths.js

@@ -1,85 +1,83 @@
-import { useState as S, useRef as p, useMemo as w, useLayoutEffect as R } from "react";
-const A = 1, E = (t) => {
+import { useState as A, useRef as z, useMemo as F, useLayoutEffect as N } from "react";
+import a from "../../../hooks/useResizeObserver.js";
+const j = 1, x = (t) => {
   const e = t?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
   return e ? Number(e[1]) : void 0;
-}, x = (t) => {
+}, C = (t) => {
   const e = t.getBoundingClientRect().width;
   return e > 0 ? Math.ceil(e) : t.scrollWidth;
-}, O = (t) => {
+}, P = (t) => {
   if (!t)
     return 0;
   const e = window.getComputedStyle(t), n = Number.parseFloat(e.columnGap || e.gap || "0");
   return Number.isFinite(n) ? Math.ceil(n) : 0;
-}, q = (t) => {
+}, T = (t) => {
   const e = t.querySelector(".table-head-label");
   if (e) {
-    const s = t.querySelector(".sort-arrows");
-    return x(e) + (s ? x(s) : 0) + (s ? O(t.querySelector(".table-head-button")) : 0);
+    const o = t.querySelector(".sort-arrows");
+    return C(e) + (o ? C(o) : 0) + (o ? P(t.querySelector(".table-head-button")) : 0);
   }
   return (t.querySelector(".table-cell-content, .table-head-button-label") ?? t).scrollWidth;
-}, z = (t, e) => Object.fromEntries(
-  Object.entries(e).map(([n, s]) => {
-    const i = t[n], u = E(i), r = E(s);
+}, _ = (t, e) => Object.fromEntries(
+  Object.entries(e).map(([n, o]) => {
+    const u = t[n], i = x(u), r = x(o);
     return [
       n,
-      u !== void 0 && r !== void 0 && Math.abs(u - r) <= A ? i : s
+      i !== void 0 && r !== void 0 && Math.abs(i - r) <= j ? u : o
     ];
   })
-), P = (t) => {
-  const { columns: e, enabled: n, tableWrapperRef: s } = t, [i, u] = S({}), r = p(""), a = p({}), y = w(
-    () => e.map((o) => `${o.key}:${o.width === void 0 ? "auto" : String(o.width)}`).join("|"),
+), D = (t) => {
+  const { columns: e, enabled: n, tableWrapperRef: o } = t, [u, i] = A({}), r = z(""), c = z({}), g = F(
+    () => e.map((l) => `${l.key}:${l.width === void 0 ? "auto" : String(l.width)}`).join("|"),
     [e]
-  );
-  return R(() => {
-    const o = s.current;
-    if (!n || !o) {
-      r.current && (r.current = "", a.current = {}, u({}));
+  ), s = o.current, v = s?.querySelector(".table-head") ?? null, w = s?.querySelector(".table-body") ?? null, R = s?.querySelector(".table-footer") ?? null, q = s?.querySelector(".table-scroll-content") ?? null, [, , b] = a(s), [, , S] = a(v), [, , M] = a(w), [, , f] = a(R), [, , p] = a(q);
+  return N(() => {
+    if (!n || !s) {
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
     if (e.length === 0) {
-      r.current && (r.current = "", a.current = {}, u({}));
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
-    const h = e.filter((c) => c.width === void 0);
-    if (h.length === 0) {
-      r.current && (r.current = "", a.current = {}, u({}));
+    const l = e.filter((d) => d.width === void 0);
+    if (l.length === 0) {
+      r.current && (r.current = "", c.current = {}, i({}));
       return;
     }
-    const m = () => {
-      const c = Array.from(o.querySelectorAll("[data-column]")), C = Object.fromEntries(
-        h.flatMap((M) => {
-          const W = c.filter((d) => d.dataset.column === M.key).reduce(
-            (d, g) => Math.max(d, q(g)),
+    (() => {
+      const d = Array.from(s.querySelectorAll("[data-column]")), k = Object.fromEntries(
+        l.flatMap((E) => {
+          const y = d.filter((h) => h.dataset.column === E.key).reduce(
+            (h, O) => Math.max(h, T(O)),
             0
           );
-          return W > 0 ? [[M.key, `${Math.ceil(W)}px`]] : [];
+          return y > 0 ? [[E.key, `${Math.ceil(y)}px`]] : [];
         })
-      ), l = z(
-        a.current,
-        C
-      ), f = JSON.stringify(l);
-      f !== r.current && (r.current = f, a.current = l, u(l));
-    };
-    m();
-    const v = [
-      o,
-      ...Array.from(
-        o.querySelectorAll(
-          ".table-head, .table-body, .table-footer, .table-scroll-content"
-        )
-      )
-    ], b = new ResizeObserver(() => {
-      m();
-    });
-    return v.forEach((c) => {
-      b.observe(c);
-    }), () => {
-      b.disconnect();
-    };
-  }, [y, n, s]), i;
+      ), m = _(
+        c.current,
+        k
+      ), W = JSON.stringify(m);
+      W !== r.current && (r.current = W, c.current = m, i(m));
+    })();
+  }, [
+    g,
+    n,
+    s,
+    b.blockSize,
+    b.inlineSize,
+    S.blockSize,
+    S.inlineSize,
+    M.blockSize,
+    M.inlineSize,
+    f.blockSize,
+    f.inlineSize,
+    p.blockSize,
+    p.inlineSize
+  ]), u;
 };
 export {
-  z as stabilizeMeasuredColumnMaxWidths,
-  P as useMeasuredColumnMaxWidths
+  _ as stabilizeMeasuredColumnMaxWidths,
+  D as useMeasuredColumnMaxWidths
 };
 //# sourceMappingURL=useMeasuredColumnMaxWidths.js.map

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, 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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"}
+{"version":3,"file":"useMeasuredColumnMaxWidths.js","sources":["../../../../src/components/table/layout/useMeasuredColumnMaxWidths.ts"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState, type RefObject } from 'react';\n\nimport useResizeObserver from '../../../useResizeObserver';\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    const wrapperElement = tableWrapperRef.current;\n    const tableHeadElement = wrapperElement?.querySelector<HTMLDivElement>('.table-head') ?? null;\n    const tableBodyElement = wrapperElement?.querySelector<HTMLDivElement>('.table-body') ?? null;\n    const tableFooterElement = wrapperElement?.querySelector<HTMLDivElement>('.table-footer') ?? null;\n    const tableScrollContentElement = wrapperElement?.querySelector<HTMLDivElement>('.table-scroll-content') ?? null;\n    const [, , wrapperSize] = useResizeObserver(wrapperElement);\n    const [, , tableHeadSize] = useResizeObserver(tableHeadElement);\n    const [, , tableBodySize] = useResizeObserver(tableBodyElement);\n    const [, , tableFooterSize] = useResizeObserver(tableFooterElement);\n    const [, , tableScrollContentSize] = useResizeObserver(tableScrollContentElement);\n\n    useLayoutEffect(() => {\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        columnsSignature,\n        enabled,\n        wrapperElement,\n        wrapperSize.blockSize,\n        wrapperSize.inlineSize,\n        tableHeadSize.blockSize,\n        tableHeadSize.inlineSize,\n        tableBodySize.blockSize,\n        tableBodySize.inlineSize,\n        tableFooterSize.blockSize,\n        tableFooterSize.inlineSize,\n        tableScrollContentSize.blockSize,\n        tableScrollContentSize.inlineSize,\n    ]);\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","wrapperElement","tableHeadElement","tableBodyElement","tableFooterElement","tableScrollContentElement","wrapperSize","useResizeObserver","tableHeadSize","tableBodySize","tableFooterSize","tableScrollContentSize","useLayoutEffect","columnsWithoutWidth","columnElements","measuredWidth","largestWidth","stabilizedMeasuredColumnMaxWidths","serializedMeasuredWidths"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { TableCardsStyleSettings, TableColumnDefinition, TableRowData } from '../Table.types';
+import { TableCardsStyleSettings, TableColumnDefinition, TableRowData, TableStickyReference } from '../Table.types';
 export type TableColumnWithArea<RowType extends TableRowData> = {
     column: TableColumnDefinition<RowType>;
     columnIndex: number;
@@ -12,6 +12,7 @@ type UseTableLayoutProps<RowType extends TableRowData> = {
     hasFooterCells?: boolean;
     rowSeparatorWidth?: number | string;
     showSelectionColumn?: boolean;
+    stickyReference?: TableStickyReference;
     style?: CSSProperties;
 };
 type InternalTableStyle = CSSProperties & {
@@ -21,16 +22,19 @@ type InternalTableStyle = CSSProperties & {
     '--table-cards-max'?: string;
     '--table-column-count'?: string;
     '--table-row-separator-width'?: string;
+    '--table-sticky-reference-top'?: 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;
+    hasHorizontalScrollEndOffset: boolean;
+    hasHorizontalScrollStartOffset: boolean;
     tableUseOverflow: boolean;
     tableWrapperRef: import('react').MutableRefObject<HTMLDivElement | null>;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
     tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
+    wrapperWidth: number | undefined;
     wrapperStyle: InternalTableStyle;
 };
 export {};

package/components/table/layout/useTableLayout.js

@@ -1,59 +1,72 @@
-import { useMeasuredColumnMaxWidths as N } from "./useMeasuredColumnMaxWidths.js";
-import { MIN_COLUMN_WIDTH_PX as O } from "../tableSizing.constants.js";
-import { toCssSize as l, getColumnTrack as R } from "./columnSizing.js";
-import { useHorizontalSectionSync as L } from "./useHorizontalSectionSync.js";
+import L from "../shared/parsePixelSize.js";
+import { useMeasuredColumnMaxWidths as k } from "./useMeasuredColumnMaxWidths.js";
+import { MIN_COLUMN_WIDTH_PX as N } from "../tableSizing.constants.js";
+import { toCssSize as i, getColumnTrack as B } from "./columnSizing.js";
+import { useHorizontalSectionSync as E } from "./useHorizontalSectionSync.js";
 import $ from "../../../hooks/useResizeObserver.js";
-const h = 50, B = (r) => {
-  if (!r)
-    return;
-  const a = r.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
-  if (a)
-    return Number(a[1]);
-}, j = (r) => {
-  const { bodyMaxHeight: a, cardsStyle: d, columns: n, hasFooterCells: p, rowSeparatorWidth: u, showSelectionColumn: i, style: b } = r, [c, , { inlineSize: f }] = $(), t = n.map((e, o) => ({
+const d = 50, F = (m) => {
+  const {
+    bodyMaxHeight: p,
+    cardsStyle: s,
+    columns: r,
+    hasFooterCells: h,
+    rowSeparatorWidth: f,
+    showSelectionColumn: n,
+    stickyReference: b = "applicationLayout",
+    style: u
+  } = m, [l, , { inlineSize: S }] = $(), t = r.map((e, a) => ({
     column: e,
-    columnIndex: o,
-    areaName: `table-col-${o + 1}`
-  })), s = f ?? c.current?.clientWidth, W = (i ? h : 0) + n.reduce((e, o) => {
-    if (o.width === void 0)
-      return e + O;
-    const H = B(l(o.width));
-    return e + (H ?? 0);
-  }, 0), m = s !== void 0 && W > s, S = s !== void 0 ? `${s}px` : "100%", { handleBodyScroll: w, hasHorizontalScrollOffset: x, tableFooterRowRef: C, tableHeadRowRef: M } = L({
-    enabled: !!a,
-    hasFooterCells: p
-  }), T = N({
-    columns: n,
-    enabled: m,
-    tableWrapperRef: c
-  }), g = t.length > 0 ? [
-    i ? `${h}px` : void 0,
-    ...t.map(({ column: e }) => R(e, T[e.key]))
-  ].filter(Boolean).join(" ") : "minmax(0, 1fr)", y = t.length > 0 ? `"${[
-    i ? "table-selection" : void 0,
+    columnIndex: a,
+    areaName: `table-col-${a + 1}`
+  })), o = S ?? l.current?.clientWidth, W = (n ? d : 0) + r.reduce((e, a) => {
+    if (a.width === void 0)
+      return e + N;
+    const _ = L(i(a.width));
+    return e + (_ ?? 0);
+  }, 0), c = o !== void 0 && W > o, w = o !== void 0 ? `${o}px` : "100%", {
+    handleBodyScroll: y,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
+    tableFooterRowRef: M,
+    tableHeadRowRef: T
+  } = E({
+    enabled: !!p,
+    hasFooterCells: h
+  }), g = k({
+    columns: r,
+    enabled: c,
+    tableWrapperRef: l
+  }), v = t.length > 0 ? [
+    n ? `${d}px` : void 0,
+    ...t.map(({ column: e }) => B(e, g[e.key]))
+  ].filter(Boolean).join(" ") : "minmax(0, 1fr)", z = t.length > 0 ? `"${[
+    n ? "table-selection" : void 0,
     ...t.map(({ areaName: e }) => e)
-  ].filter(Boolean).join(" ")}"` : "none", _ = l(d?.minWidth) ?? "280px", v = l(d?.maxWidth) ?? "1fr", z = {
-    ...b ?? {},
-    "--table-columns": g,
-    "--table-areas": y,
-    "--table-cards-min": _,
-    "--table-cards-max": v,
-    "--table-column-count": String(n.length + (i ? 1 : 0)),
-    "--table-row-separator-width": l(u),
-    "--table-width": S
+  ].filter(Boolean).join(" ")}"` : "none", H = i(s?.minWidth), O = i(s?.maxWidth), R = {
+    ...u ?? {},
+    "--table-columns": v,
+    "--table-areas": z,
+    "--table-cards-min": H,
+    "--table-cards-max": O,
+    "--table-column-count": String(r.length + (n ? 1 : 0)),
+    "--table-row-separator-width": i(f),
+    "--table-sticky-reference-top": b === "container" ? "0px" : "var(--table-sticky-offset)",
+    "--table-width": w
   };
   return {
     columnsWithAreas: t,
-    handleBodyScroll: w,
-    hasHorizontalScrollOffset: x,
-    tableUseOverflow: m,
-    tableWrapperRef: c,
-    tableFooterRowRef: C,
-    tableHeadRowRef: M,
-    wrapperStyle: z
+    handleBodyScroll: y,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
+    tableUseOverflow: c,
+    tableWrapperRef: l,
+    tableFooterRowRef: M,
+    tableHeadRowRef: T,
+    wrapperWidth: o,
+    wrapperStyle: R
   };
 };
 export {
-  j as useTableLayout
+  F as useTableLayout
 };
 //# sourceMappingURL=useTableLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTableLayout.js","sources":["../../../../src/components/table/layout/useTableLayout.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport type { TableCardsStyleSettings, TableColumnDefinition, TableRowData } from '../Table.types';\nimport { useMeasuredColumnMaxWidths } from './useMeasuredColumnMaxWidths';\nimport { MIN_COLUMN_WIDTH_PX } from '../tableSizing.constants';\nimport { getColumnTrack, toCssSize } from './columnSizing';\nimport { useHorizontalSectionSync } from './useHorizontalSectionSync';\nimport useResizeObserver from '../../../useResizeObserver';\n\nconst TABLE_SELECTION_COLUMN_WIDTH_PX = 50;\n\nconst parsePixelSize = (value?: string) => {\n    if (!value) {\n        return;\n    }\n\n    const match = value.trim().match(/^(-?\\d+(?:\\.\\d+)?)px$/);\n\n    if (!match) {\n        return;\n    }\n\n    return Number(match[1]);\n};\n\nexport type TableColumnWithArea<RowType extends TableRowData> = {\n    column: TableColumnDefinition<RowType>;\n    columnIndex: number;\n    areaName: string;\n};\n\ntype UseTableLayoutProps<RowType extends TableRowData> = {\n    bodyMaxHeight?: string;\n    cardsStyle?: TableCardsStyleSettings;\n    columns: TableColumnDefinition<RowType>[];\n    hasFooterCells?: boolean;\n    rowSeparatorWidth?: number | string;\n    showSelectionColumn?: boolean;\n    style?: CSSProperties;\n};\n\ntype InternalTableStyle = CSSProperties & {\n    '--table-columns'?: string;\n    '--table-areas'?: string;\n    '--table-cards-min'?: string;\n    '--table-cards-max'?: string;\n    '--table-column-count'?: string;\n    '--table-row-separator-width'?: string;\n    '--table-width'?: string;\n};\n\nexport const useTableLayout = <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {\n    const { bodyMaxHeight, cardsStyle, columns, hasFooterCells, rowSeparatorWidth, showSelectionColumn, style } = props;\n    const [tableWrapperRef, , { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const columnsWithAreas: TableColumnWithArea<RowType>[] = columns.map((column, columnIndex) => ({\n        column,\n        columnIndex,\n        areaName: `table-col-${columnIndex + 1}`,\n    }));\n\n    const wrapperWidth = inlineSize ?? tableWrapperRef.current?.clientWidth;\n\n    const minWidthTotal =\n        (showSelectionColumn ? TABLE_SELECTION_COLUMN_WIDTH_PX : 0) +\n        columns.reduce((totalWidth, column) => {\n            if (column.width === undefined) {\n                return totalWidth + MIN_COLUMN_WIDTH_PX;\n            }\n\n            const columnWidth = parsePixelSize(toCssSize(column.width));\n\n            return totalWidth + (columnWidth ?? 0);\n        }, 0);\n\n    const tableUseOverflow = wrapperWidth !== undefined && minWidthTotal > wrapperWidth;\n    const tableWidth = wrapperWidth !== undefined ? `${wrapperWidth}px` : '100%';\n\n    const { handleBodyScroll, hasHorizontalScrollOffset, tableFooterRowRef, tableHeadRowRef } =\n        useHorizontalSectionSync({\n            enabled: !!bodyMaxHeight,\n            hasFooterCells,\n        });\n\n    const measuredColumnMaxWidths = useMeasuredColumnMaxWidths({\n        columns,\n        enabled: tableUseOverflow,\n        tableWrapperRef,\n    });\n\n    const gridTemplateColumns =\n        columnsWithAreas.length > 0\n            ? [\n                  showSelectionColumn ? `${TABLE_SELECTION_COLUMN_WIDTH_PX}px` : undefined,\n                  ...columnsWithAreas.map(({ column }) => getColumnTrack(column, measuredColumnMaxWidths[column.key])),\n              ]\n                  .filter(Boolean)\n                  .join(' ')\n            : 'minmax(0, 1fr)';\n\n    const gridTemplateAreas =\n        columnsWithAreas.length > 0\n            ? `\"${[\n                  showSelectionColumn ? 'table-selection' : undefined,\n                  ...columnsWithAreas.map(({ areaName }) => areaName),\n              ]\n                  .filter(Boolean)\n                  .join(' ')}\"`\n            : 'none';\n\n    const cardsMinWidth = toCssSize(cardsStyle?.minWidth) ?? '280px';\n    const cardsMaxWidth = toCssSize(cardsStyle?.maxWidth) ?? '1fr';\n\n    const wrapperStyle: InternalTableStyle = {\n        ...(style ?? {}),\n        '--table-columns': gridTemplateColumns,\n        '--table-areas': gridTemplateAreas,\n        '--table-cards-min': cardsMinWidth,\n        '--table-cards-max': cardsMaxWidth,\n        '--table-column-count': String(columns.length + (showSelectionColumn ? 1 : 0)),\n        '--table-row-separator-width': toCssSize(rowSeparatorWidth),\n        '--table-width': tableWidth,\n    };\n\n    return {\n        columnsWithAreas,\n        handleBodyScroll,\n        hasHorizontalScrollOffset,\n        tableUseOverflow,\n        tableWrapperRef,\n        tableFooterRowRef,\n        tableHeadRowRef,\n        wrapperStyle,\n    };\n};\n"],"names":["TABLE_SELECTION_COLUMN_WIDTH_PX","parsePixelSize","value","match","useTableLayout","props","bodyMaxHeight","cardsStyle","columns","hasFooterCells","rowSeparatorWidth","showSelectionColumn","style","tableWrapperRef","inlineSize","useResizeObserver","columnsWithAreas","column","columnIndex","wrapperWidth","minWidthTotal","totalWidth","MIN_COLUMN_WIDTH_PX","columnWidth","toCssSize","tableUseOverflow","tableWidth","handleBodyScroll","hasHorizontalScrollOffset","tableFooterRowRef","tableHeadRowRef","useHorizontalSectionSync","measuredColumnMaxWidths","useMeasuredColumnMaxWidths","gridTemplateColumns","getColumnTrack","gridTemplateAreas","areaName","cardsMinWidth","cardsMaxWidth","wrapperStyle"],"mappings":";;;;;AASA,MAAMA,IAAkC,IAElCC,IAAiB,CAACC,MAAmB;AACvC,MAAI,CAACA;AACD;AAGJ,QAAMC,IAAQD,EAAM,KAAA,EAAO,MAAM,uBAAuB;AAExD,MAAKC;AAIL,WAAO,OAAOA,EAAM,CAAC,CAAC;AAC1B,GA4BaC,IAAiB,CAA+BC,MAAwC;AACjG,QAAM,EAAE,eAAAC,GAAe,YAAAC,GAAY,SAAAC,GAAS,gBAAAC,GAAgB,mBAAAC,GAAmB,qBAAAC,GAAqB,OAAAC,MAAUP,GACxG,CAACQ,GAAA,EAAmB,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAEtCC,IAAmDR,EAAQ,IAAI,CAACS,GAAQC,OAAiB;AAAA,IAC3F,QAAAD;AAAA,IACA,aAAAC;AAAA,IACA,UAAU,aAAaA,IAAc,CAAC;AAAA,EAAA,EACxC,GAEIC,IAAeL,KAAcD,EAAgB,SAAS,aAEtDO,KACDT,IAAsBX,IAAkC,KACzDQ,EAAQ,OAAO,CAACa,GAAYJ,MAAW;AACnC,QAAIA,EAAO,UAAU;AACjB,aAAOI,IAAaC;AAGxB,UAAMC,IAActB,EAAeuB,EAAUP,EAAO,KAAK,CAAC;AAE1D,WAAOI,KAAcE,KAAe;AAAA,EACxC,GAAG,CAAC,GAEFE,IAAmBN,MAAiB,UAAaC,IAAgBD,GACjEO,IAAaP,MAAiB,SAAY,GAAGA,CAAY,OAAO,QAEhE,EAAE,kBAAAQ,GAAkB,2BAAAC,GAA2B,mBAAAC,GAAmB,iBAAAC,EAAA,IACpEC,EAAyB;AAAA,IACrB,SAAS,CAAC,CAACzB;AAAA,IACX,gBAAAG;AAAA,EAAA,CACH,GAECuB,IAA0BC,EAA2B;AAAA,IACvD,SAAAzB;AAAA,IACA,SAASiB;AAAA,IACT,iBAAAZ;AAAA,EAAA,CACH,GAEKqB,IACFlB,EAAiB,SAAS,IACpB;AAAA,IACIL,IAAsB,GAAGX,CAA+B,OAAO;AAAA,IAC/D,GAAGgB,EAAiB,IAAI,CAAC,EAAE,QAAAC,EAAA,MAAakB,EAAelB,GAAQe,EAAwBf,EAAO,GAAG,CAAC,CAAC;AAAA,EAAA,EAElG,OAAO,OAAO,EACd,KAAK,GAAG,IACb,kBAEJmB,IACFpB,EAAiB,SAAS,IACpB,IAAI;AAAA,IACAL,IAAsB,oBAAoB;AAAA,IAC1C,GAAGK,EAAiB,IAAI,CAAC,EAAE,UAAAqB,EAAA,MAAeA,CAAQ;AAAA,EAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG,CAAC,MACd,QAEJC,IAAgBd,EAAUjB,GAAY,QAAQ,KAAK,SACnDgC,IAAgBf,EAAUjB,GAAY,QAAQ,KAAK,OAEnDiC,IAAmC;AAAA,IACrC,GAAI5B,KAAS,CAAA;AAAA,IACb,mBAAmBsB;AAAA,IACnB,iBAAiBE;AAAA,IACjB,qBAAqBE;AAAA,IACrB,qBAAqBC;AAAA,IACrB,wBAAwB,OAAO/B,EAAQ,UAAUG,IAAsB,IAAI,EAAE;AAAA,IAC7E,+BAA+Ba,EAAUd,CAAiB;AAAA,IAC1D,iBAAiBgB;AAAA,EAAA;AAGrB,SAAO;AAAA,IACH,kBAAAV;AAAA,IACA,kBAAAW;AAAA,IACA,2BAAAC;AAAA,IACA,kBAAAH;AAAA,IACA,iBAAAZ;AAAA,IACA,mBAAAgB;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAU;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useTableLayout.js","sources":["../../../../src/components/table/layout/useTableLayout.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport parsePixelSize from '../shared/parsePixelSize';\nimport type {\n    TableCardsStyleSettings,\n    TableColumnDefinition,\n    TableRowData,\n    TableStickyReference,\n} from '../Table.types';\nimport { useMeasuredColumnMaxWidths } from './useMeasuredColumnMaxWidths';\nimport { MIN_COLUMN_WIDTH_PX } from '../tableSizing.constants';\nimport { getColumnTrack, toCssSize } from './columnSizing';\nimport { useHorizontalSectionSync } from './useHorizontalSectionSync';\nimport useResizeObserver from '../../../useResizeObserver';\n\nconst TABLE_SELECTION_COLUMN_WIDTH_PX = 50;\n\nexport type TableColumnWithArea<RowType extends TableRowData> = {\n    column: TableColumnDefinition<RowType>;\n    columnIndex: number;\n    areaName: string;\n};\n\ntype UseTableLayoutProps<RowType extends TableRowData> = {\n    bodyMaxHeight?: string;\n    cardsStyle?: TableCardsStyleSettings;\n    columns: TableColumnDefinition<RowType>[];\n    hasFooterCells?: boolean;\n    rowSeparatorWidth?: number | string;\n    showSelectionColumn?: boolean;\n    stickyReference?: TableStickyReference;\n    style?: CSSProperties;\n};\n\ntype InternalTableStyle = CSSProperties & {\n    '--table-columns'?: string;\n    '--table-areas'?: string;\n    '--table-cards-min'?: string;\n    '--table-cards-max'?: string;\n    '--table-column-count'?: string;\n    '--table-row-separator-width'?: string;\n    '--table-sticky-reference-top'?: string;\n    '--table-width'?: string;\n};\n\nexport const useTableLayout = <RowType extends TableRowData>(props: UseTableLayoutProps<RowType>) => {\n    const {\n        bodyMaxHeight,\n        cardsStyle,\n        columns,\n        hasFooterCells,\n        rowSeparatorWidth,\n        showSelectionColumn,\n        stickyReference = 'applicationLayout',\n        style,\n    } = props;\n    const [tableWrapperRef, , { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const columnsWithAreas: TableColumnWithArea<RowType>[] = columns.map((column, columnIndex) => ({\n        column,\n        columnIndex,\n        areaName: `table-col-${columnIndex + 1}`,\n    }));\n\n    const wrapperWidth = inlineSize ?? tableWrapperRef.current?.clientWidth;\n\n    const minWidthTotal =\n        (showSelectionColumn ? TABLE_SELECTION_COLUMN_WIDTH_PX : 0) +\n        columns.reduce((totalWidth, column) => {\n            if (column.width === undefined) {\n                return totalWidth + MIN_COLUMN_WIDTH_PX;\n            }\n\n            const columnWidth = parsePixelSize(toCssSize(column.width));\n\n            return totalWidth + (columnWidth ?? 0);\n        }, 0);\n\n    const tableUseOverflow = wrapperWidth !== undefined && minWidthTotal > wrapperWidth;\n    const tableWidth = wrapperWidth !== undefined ? `${wrapperWidth}px` : '100%';\n\n    const {\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    } = useHorizontalSectionSync({\n        enabled: !!bodyMaxHeight,\n        hasFooterCells,\n    });\n\n    const measuredColumnMaxWidths = useMeasuredColumnMaxWidths({\n        columns,\n        enabled: tableUseOverflow,\n        tableWrapperRef,\n    });\n\n    const gridTemplateColumns =\n        columnsWithAreas.length > 0\n            ? [\n                  showSelectionColumn ? `${TABLE_SELECTION_COLUMN_WIDTH_PX}px` : undefined,\n                  ...columnsWithAreas.map(({ column }) => getColumnTrack(column, measuredColumnMaxWidths[column.key])),\n              ]\n                  .filter(Boolean)\n                  .join(' ')\n            : 'minmax(0, 1fr)';\n\n    const gridTemplateAreas =\n        columnsWithAreas.length > 0\n            ? `\"${[\n                  showSelectionColumn ? 'table-selection' : undefined,\n                  ...columnsWithAreas.map(({ areaName }) => areaName),\n              ]\n                  .filter(Boolean)\n                  .join(' ')}\"`\n            : 'none';\n\n    const cardsMinWidth = toCssSize(cardsStyle?.minWidth);\n    const cardsMaxWidth = toCssSize(cardsStyle?.maxWidth);\n\n    const wrapperStyle: InternalTableStyle = {\n        ...(style ?? {}),\n        '--table-columns': gridTemplateColumns,\n        '--table-areas': gridTemplateAreas,\n        '--table-cards-min': cardsMinWidth,\n        '--table-cards-max': cardsMaxWidth,\n        '--table-column-count': String(columns.length + (showSelectionColumn ? 1 : 0)),\n        '--table-row-separator-width': toCssSize(rowSeparatorWidth),\n        '--table-sticky-reference-top': stickyReference === 'container' ? '0px' : 'var(--table-sticky-offset)',\n        '--table-width': tableWidth,\n    };\n\n    return {\n        columnsWithAreas,\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableUseOverflow,\n        tableWrapperRef,\n        tableFooterRowRef,\n        tableHeadRowRef,\n        wrapperWidth,\n        wrapperStyle,\n    };\n};\n"],"names":["TABLE_SELECTION_COLUMN_WIDTH_PX","useTableLayout","props","bodyMaxHeight","cardsStyle","columns","hasFooterCells","rowSeparatorWidth","showSelectionColumn","stickyReference","style","tableWrapperRef","inlineSize","useResizeObserver","columnsWithAreas","column","columnIndex","wrapperWidth","minWidthTotal","totalWidth","MIN_COLUMN_WIDTH_PX","columnWidth","parsePixelSize","toCssSize","tableUseOverflow","tableWidth","handleBodyScroll","hasHorizontalScrollEndOffset","hasHorizontalScrollStartOffset","tableFooterRowRef","tableHeadRowRef","useHorizontalSectionSync","measuredColumnMaxWidths","useMeasuredColumnMaxWidths","gridTemplateColumns","getColumnTrack","gridTemplateAreas","areaName","cardsMinWidth","cardsMaxWidth","wrapperStyle"],"mappings":";;;;;;AAeA,MAAMA,IAAkC,IA8B3BC,IAAiB,CAA+BC,MAAwC;AACjG,QAAM;AAAA,IACF,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,EAAA,IACAR,GACE,CAACS,GAAA,EAAmB,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAEtCC,IAAmDT,EAAQ,IAAI,CAACU,GAAQC,OAAiB;AAAA,IAC3F,QAAAD;AAAA,IACA,aAAAC;AAAA,IACA,UAAU,aAAaA,IAAc,CAAC;AAAA,EAAA,EACxC,GAEIC,IAAeL,KAAcD,EAAgB,SAAS,aAEtDO,KACDV,IAAsBR,IAAkC,KACzDK,EAAQ,OAAO,CAACc,GAAYJ,MAAW;AACnC,QAAIA,EAAO,UAAU;AACjB,aAAOI,IAAaC;AAGxB,UAAMC,IAAcC,EAAeC,EAAUR,EAAO,KAAK,CAAC;AAE1D,WAAOI,KAAcE,KAAe;AAAA,EACxC,GAAG,CAAC,GAEFG,IAAmBP,MAAiB,UAAaC,IAAgBD,GACjEQ,IAAaR,MAAiB,SAAY,GAAGA,CAAY,OAAO,QAEhE;AAAA,IACF,kBAAAS;AAAA,IACA,8BAAAC;AAAA,IACA,gCAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACAC,EAAyB;AAAA,IACzB,SAAS,CAAC,CAAC5B;AAAA,IACX,gBAAAG;AAAA,EAAA,CACH,GAEK0B,IAA0BC,EAA2B;AAAA,IACvD,SAAA5B;AAAA,IACA,SAASmB;AAAA,IACT,iBAAAb;AAAA,EAAA,CACH,GAEKuB,IACFpB,EAAiB,SAAS,IACpB;AAAA,IACIN,IAAsB,GAAGR,CAA+B,OAAO;AAAA,IAC/D,GAAGc,EAAiB,IAAI,CAAC,EAAE,QAAAC,EAAA,MAAaoB,EAAepB,GAAQiB,EAAwBjB,EAAO,GAAG,CAAC,CAAC;AAAA,EAAA,EAElG,OAAO,OAAO,EACd,KAAK,GAAG,IACb,kBAEJqB,IACFtB,EAAiB,SAAS,IACpB,IAAI;AAAA,IACAN,IAAsB,oBAAoB;AAAA,IAC1C,GAAGM,EAAiB,IAAI,CAAC,EAAE,UAAAuB,EAAA,MAAeA,CAAQ;AAAA,EAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG,CAAC,MACd,QAEJC,IAAgBf,EAAUnB,GAAY,QAAQ,GAC9CmC,IAAgBhB,EAAUnB,GAAY,QAAQ,GAE9CoC,IAAmC;AAAA,IACrC,GAAI9B,KAAS,CAAA;AAAA,IACb,mBAAmBwB;AAAA,IACnB,iBAAiBE;AAAA,IACjB,qBAAqBE;AAAA,IACrB,qBAAqBC;AAAA,IACrB,wBAAwB,OAAOlC,EAAQ,UAAUG,IAAsB,IAAI,EAAE;AAAA,IAC7E,+BAA+Be,EAAUhB,CAAiB;AAAA,IAC1D,gCAAgCE,MAAoB,cAAc,QAAQ;AAAA,IAC1E,iBAAiBgB;AAAA,EAAA;AAGrB,SAAO;AAAA,IACH,kBAAAX;AAAA,IACA,kBAAAY;AAAA,IACA,8BAAAC;AAAA,IACA,gCAAAC;AAAA,IACA,kBAAAJ;AAAA,IACA,iBAAAb;AAAA,IACA,mBAAAkB;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAb;AAAA,IACA,cAAAuB;AAAA,EAAA;AAER;"}

package/components/table/layout/useTableVirtualization.js

@@ -1,92 +1,87 @@
-import { useState as M, useCallback as c, useEffect as T, useMemo as O } from "react";
-const V = 50, E = (m, i) => m.start === i.start && m.end === i.end, I = (m) => {
-  const { enabled: i, overscan: d, rows: r, scrollContainer: v, viewportHeightFallback: w } = m, [l, H] = M({
+import { useState as B, useCallback as a, useEffect as E, useMemo as I } from "react";
+import L from "../../../hooks/useResizeObserver.js";
+const O = 50, x = (d, i) => d.start === i.start && d.end === i.end, P = (d) => {
+  const { enabled: i, overscan: u, rows: r, scrollContainer: k, viewportHeightFallback: w } = d, c = k?.view ?? null, [, , { blockSize: f }] = L(c), [l, H] = B({
     itemHeights: {},
     scrollTop: 0,
     viewportHeight: 0,
     visibleRange: { start: 0, end: 10 }
-  }), b = c(() => v?.view ?? null, [v]), f = c(() => {
+  }), v = a(() => c, [c]), p = a(() => {
     const e = Object.values(l.itemHeights);
-    return e.length === 0 ? V : e.reduce((t, n) => t + n, 0) / e.length;
-  }, [l.itemHeights]), g = c(
-    (e) => l.itemHeights[e] ?? f(),
-    [f, l.itemHeights]
-  ), p = c(
+    return e.length === 0 ? O : e.reduce((t, n) => t + n, 0) / e.length;
+  }, [l.itemHeights]), h = a(
+    (e) => l.itemHeights[e] ?? p(),
+    [p, l.itemHeights]
+  ), T = a(
     (e) => {
       let t = 0;
       for (let n = 0; n < e; n++)
-        t += g(n);
+        t += h(n);
       return t;
     },
-    [g]
-  ), x = c(() => {
+    [h]
+  ), V = a(() => {
     let e = 0;
     for (let t = 0; t < r.length; t++)
-      e += g(t);
+      e += h(t);
     return e;
-  }, [g, r.length]), h = c(
+  }, [h, r.length]), m = a(
     (e, t) => {
       if (!i || r.length === 0)
         return { start: 0, end: r.length };
-      let n = 0, a = 0;
+      let n = 0, g = 0;
       for (; n < r.length; ) {
-        const o = g(n);
-        if (a + o > e - d * o)
+        const o = h(n);
+        if (g + o > e - u * o)
           break;
-        a += o, n++;
+        g += o, n++;
       }
       let s = n;
       for (; s < r.length; ) {
-        const o = g(s);
-        if (a > e + t + d * o)
+        const o = h(s);
+        if (g > e + t + u * o)
           break;
-        a += o, s++;
+        g += o, s++;
       }
       return {
-        start: Math.max(0, n - d),
-        end: Math.min(r.length, s + d)
+        start: Math.max(0, n - u),
+        end: Math.min(r.length, s + u)
       };
     },
-    [i, g, d, r.length]
-  ), u = c(() => {
-    const e = b();
+    [i, h, u, r.length]
+  ), b = a(() => {
+    const e = v();
     if (!e)
       return;
-    const t = e.clientHeight || w || 0, n = e.scrollTop, a = h(n, t);
+    const t = e.clientHeight || f || w || 0, n = e.scrollTop, g = m(n, t);
     H(
-      (s) => s.scrollTop === n && s.viewportHeight === t && E(s.visibleRange, a) ? s : {
+      (s) => s.scrollTop === n && s.viewportHeight === t && x(s.visibleRange, g) ? s : {
         ...s,
         scrollTop: n,
         viewportHeight: t,
-        visibleRange: a
+        visibleRange: g
       }
     );
-  }, [h, b, w]);
-  T(() => {
-    if (!i)
-      return;
-    const e = b();
-    if (!e)
-      return;
-    u(), e.addEventListener("scroll", u, { passive: !0 });
-    const t = new ResizeObserver(u);
-    return t.observe(e), () => {
-      e.removeEventListener("scroll", u), t.disconnect();
-    };
-  }, [i, b, u]), T(() => {
+  }, [m, v, f, w]);
+  E(() => {
+    if (i && c)
+      return b(), c.addEventListener("scroll", b, { passive: !0 }), () => {
+        c.removeEventListener("scroll", b);
+      };
+  }, [i, b, c]), E(() => {
     i && H((e) => {
-      const t = h(e.scrollTop, e.viewportHeight);
-      return E(e.visibleRange, t) ? e : {
+      const t = m(e.scrollTop, e.viewportHeight);
+      return x(e.visibleRange, t) ? e : {
         ...e,
         visibleRange: t
       };
     });
-  }, [h, i, r]);
-  const k = c(
+  }, [m, i, r]);
+  const z = a(
     (e, t) => {
       if (!t)
         return;
-      const n = t.getBoundingClientRect(), a = window.getComputedStyle(t), s = n.height + Number.parseFloat(a.marginTop || "0") + Number.parseFloat(a.marginBottom || "0");
+      const n = t.getBoundingClientRect(), g = window.getComputedStyle(t), s = n.height + Number.parseFloat(g.marginTop || "0") + Number.parseFloat(g.marginBottom || "0");
       s <= 0 || H((o) => {
         if (o.itemHeights[e] === s)
           return o;
@@ -99,27 +94,27 @@ const V = 50, E = (m, i) => m.start === i.start && m.end === i.end, I = (m) => {
         };
         return {
           ...R,
-          visibleRange: h(R.scrollTop, R.viewportHeight)
+          visibleRange: m(R.scrollTop, R.viewportHeight)
         };
       });
     },
-    [h]
-  ), z = O(
+    [m]
+  ), C = I(
     () => i ? r.slice(l.visibleRange.start, l.visibleRange.end).map((e, t) => ({
       index: l.visibleRange.start + t,
       row: e
     })) : [],
     [i, r, l.visibleRange.end, l.visibleRange.start]
-  ), C = i ? p(l.visibleRange.start) : 0, F = i ? Math.max(0, x() - p(l.visibleRange.end)) : 0;
+  ), F = i ? T(l.visibleRange.start) : 0, M = i ? Math.max(0, V() - T(l.visibleRange.end)) : 0;
   return {
     isVirtualized: i,
-    measureRow: k,
-    paddingBottom: F,
-    paddingTop: C,
-    virtualRows: z
+    measureRow: z,
+    paddingBottom: M,
+    paddingTop: F,
+    virtualRows: C
   };
 };
 export {
-  I as default
+  P as default
 };
 //# sourceMappingURL=useTableVirtualization.js.map