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

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

@@ -1,12 +1,12 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { TableColumnDefinition } from '../Table.types';
-type UseDraggableColumnsProps<RowType extends Record<string, unknown>> = {
+import { TableColumnDefinition, TableRowData } from '../Table.types';
+type UseDraggableColumnsProps<RowType extends TableRowData> = {
     columns: TableColumnDefinition<RowType>[];
     columnOrder?: string[];
     enabled: boolean;
     onColumnOrderChange?: (columnOrder: string[]) => void;
 };
-export declare const useDraggableColumns: <RowType extends Record<string, unknown>>(props: UseDraggableColumnsProps<RowType>) => {
+export declare const useDraggableColumns: <RowType extends TableRowData>(props: UseDraggableColumnsProps<RowType>) => {
     draggableColumnKeys: (string | Extract<keyof RowType, string>)[];
     handleColumnDragEnd: (event: DragEndEvent) => void;
     orderedColumns: TableColumnDefinition<RowType>[];

package/components/table/layout/useDraggableColumns.js

@@ -1,17 +1,17 @@
 import { useState as D, useEffect as v } from "react";
 import h from "../../../utils/arrayMove.js";
-const K = (s, o) => {
-  const l = o.map((n) => n.key), i = new Set(l), a = s.filter((n) => i.has(n)), u = l.filter((n) => !a.includes(n));
-  return [...a, ...u];
-}, O = (s) => s.draggable !== !1, E = (s) => {
-  const { columns: o, columnOrder: l, enabled: i, onColumnOrderChange: a } = s, [u, n] = D(() => o.map((e) => e.key)), p = K(l ?? u, o), d = l !== void 0;
+const K = (s, t) => {
+  const l = t.map((n) => n.key), i = new Set(l), u = s.filter((n) => i.has(n)), a = l.filter((n) => !u.includes(n));
+  return [...u, ...a];
+}, O = (s) => s.draggable === !0, E = (s) => {
+  const { columns: t, columnOrder: l, enabled: i, onColumnOrderChange: u } = s, [a, n] = D(() => t.map((e) => e.key)), p = K(l ?? a, t), d = l !== void 0;
   v(() => {
     d || n((e) => {
-      const r = K(e, o);
+      const r = K(e, t);
       return JSON.stringify(e) === JSON.stringify(r) ? e : r;
     });
-  }, [o, d]);
-  const S = new Map(o.map((e) => [e.key, e])), m = p.flatMap((e) => {
+  }, [t, d]);
+  const S = new Map(t.map((e) => [e.key, e])), m = p.flatMap((e) => {
     const r = S.get(e);
     return r ? [r] : [];
   }), c = m.filter(O).map((e) => e.key);
@@ -23,20 +23,20 @@ const K = (s, o) => {
       const r = String(e.active.id), y = e.over ? String(e.over.id) : void 0;
       if (!y || r === y)
         return;
-      const f = c.indexOf(r), C = c.indexOf(y);
-      if (f < 0 || C < 0)
+      const C = c.indexOf(r), f = c.indexOf(y);
+      if (C < 0 || f < 0)
         return;
-      const b = h(c, f, C);
+      const b = h(c, C, f);
       let x = 0;
-      const g = m.map((t) => {
-        if (!O(t))
-          return t.key;
+      const g = m.map((o) => {
+        if (!O(o))
+          return o.key;
         const k = b[x];
-        return x += 1, k ?? t.key;
+        return x += 1, k ?? o.key;
       });
       d || n(
-        (t) => JSON.stringify(t) === JSON.stringify(g) ? t : g
-      ), a?.(g);
+        (o) => JSON.stringify(o) === JSON.stringify(g) ? o : g
+      ), u?.(g);
     },
     orderedColumns: m
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useDraggableColumns.js","sources":["../../../../src/components/table/layout/useDraggableColumns.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport { useEffect, useState } from 'react';\n\nimport arrayMove from '../../../utils/arrayMove';\nimport type { TableColumnDefinition } from '../Table.types';\n\ntype UseDraggableColumnsProps<RowType extends Record<string, unknown>> = {\n    columns: TableColumnDefinition<RowType>[];\n    columnOrder?: string[];\n    enabled: boolean;\n    onColumnOrderChange?: (columnOrder: string[]) => void;\n};\n\nconst reconcileColumnOrder = <RowType extends Record<string, unknown>>(\n    previousColumnOrder: string[],\n    columns: TableColumnDefinition<RowType>[]\n) => {\n    const nextColumnKeys = columns.map(column => column.key);\n    const previousColumnKeySet = new Set(nextColumnKeys);\n    const preservedColumnOrder = previousColumnOrder.filter(columnKey => previousColumnKeySet.has(columnKey));\n    const missingColumnKeys = nextColumnKeys.filter(columnKey => !preservedColumnOrder.includes(columnKey));\n\n    return [...preservedColumnOrder, ...missingColumnKeys];\n};\n\nconst isColumnDraggable = <RowType extends Record<string, unknown>>(column: TableColumnDefinition<RowType>) =>\n    column.draggable !== false;\n\nexport const useDraggableColumns = <RowType extends Record<string, unknown>>(\n    props: UseDraggableColumnsProps<RowType>\n) => {\n    const { columns, columnOrder, enabled, onColumnOrderChange } = props;\n    const [uncontrolledColumnOrder, setUncontrolledColumnOrder] = useState(() => columns.map(column => column.key));\n    const orderedColumnKeys = reconcileColumnOrder(columnOrder ?? uncontrolledColumnOrder, columns);\n    const isControlled = columnOrder !== undefined;\n\n    useEffect(() => {\n        if (isControlled) {\n            return;\n        }\n\n        setUncontrolledColumnOrder(previousColumnOrder => {\n            const nextColumnOrder = reconcileColumnOrder(previousColumnOrder, columns);\n\n            return JSON.stringify(previousColumnOrder) === JSON.stringify(nextColumnOrder)\n                ? previousColumnOrder\n                : nextColumnOrder;\n        });\n    }, [columns, isControlled]);\n\n    const columnsByKey = new Map(columns.map(column => [column.key, column]));\n    const orderedColumns = orderedColumnKeys.flatMap(columnKey => {\n        const column = columnsByKey.get(columnKey);\n\n        return column ? [column] : [];\n    });\n    const draggableColumnKeys = orderedColumns.filter(isColumnDraggable).map(column => column.key);\n\n    const handleColumnDragEnd = (event: DragEndEvent) => {\n        if (!enabled) {\n            return;\n        }\n\n        const activeColumnKey = String(event.active.id);\n        const overColumnKey = event.over ? String(event.over.id) : undefined;\n\n        if (!overColumnKey || activeColumnKey === overColumnKey) {\n            return;\n        }\n\n        const oldIndex = draggableColumnKeys.indexOf(activeColumnKey);\n        const newIndex = draggableColumnKeys.indexOf(overColumnKey);\n\n        if (oldIndex < 0 || newIndex < 0) {\n            return;\n        }\n\n        const nextDraggableColumnKeys = arrayMove(draggableColumnKeys, oldIndex, newIndex);\n        let nextDraggableColumnKeyIndex = 0;\n\n        const nextOrderedColumnKeys = orderedColumns.map(column => {\n            if (!isColumnDraggable(column)) {\n                return column.key;\n            }\n\n            const nextColumnKey = nextDraggableColumnKeys[nextDraggableColumnKeyIndex];\n\n            nextDraggableColumnKeyIndex += 1;\n\n            return nextColumnKey ?? column.key;\n        });\n\n        if (!isControlled) {\n            setUncontrolledColumnOrder(previousColumnOrder =>\n                JSON.stringify(previousColumnOrder) === JSON.stringify(nextOrderedColumnKeys)\n                    ? previousColumnOrder\n                    : nextOrderedColumnKeys\n            );\n        }\n\n        onColumnOrderChange?.(nextOrderedColumnKeys);\n    };\n\n    return {\n        draggableColumnKeys,\n        handleColumnDragEnd,\n        orderedColumns,\n    };\n};\n"],"names":["reconcileColumnOrder","previousColumnOrder","columns","nextColumnKeys","column","previousColumnKeySet","preservedColumnOrder","columnKey","missingColumnKeys","isColumnDraggable","useDraggableColumns","props","columnOrder","enabled","onColumnOrderChange","uncontrolledColumnOrder","setUncontrolledColumnOrder","useState","orderedColumnKeys","isControlled","useEffect","nextColumnOrder","columnsByKey","orderedColumns","draggableColumnKeys","event","activeColumnKey","overColumnKey","oldIndex","newIndex","nextDraggableColumnKeys","arrayMove","nextDraggableColumnKeyIndex","nextOrderedColumnKeys","nextColumnKey"],"mappings":";;AAaA,MAAMA,IAAuB,CACzBC,GACAC,MACC;AACD,QAAMC,IAAiBD,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,GACjDC,IAAuB,IAAI,IAAIF,CAAc,GAC7CG,IAAuBL,EAAoB,OAAO,OAAaI,EAAqB,IAAIE,CAAS,CAAC,GAClGC,IAAoBL,EAAe,OAAO,CAAAI,MAAa,CAACD,EAAqB,SAASC,CAAS,CAAC;AAEtG,SAAO,CAAC,GAAGD,GAAsB,GAAGE,CAAiB;AACzD,GAEMC,IAAoB,CAA0CL,MAChEA,EAAO,cAAc,IAEZM,IAAsB,CAC/BC,MACC;AACD,QAAM,EAAE,SAAAT,GAAS,aAAAU,GAAa,SAAAC,GAAS,qBAAAC,MAAwBH,GACzD,CAACI,GAAyBC,CAA0B,IAAIC,EAAS,MAAMf,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,CAAC,GACxGc,IAAoBlB,EAAqBY,KAAeG,GAAyBb,CAAO,GACxFiB,IAAeP,MAAgB;AAErC,EAAAQ,EAAU,MAAM;AACZ,IAAID,KAIJH,EAA2B,CAAAf,MAAuB;AAC9C,YAAMoB,IAAkBrB,EAAqBC,GAAqBC,CAAO;AAEzE,aAAO,KAAK,UAAUD,CAAmB,MAAM,KAAK,UAAUoB,CAAe,IACvEpB,IACAoB;AAAA,IACV,CAAC;AAAA,EACL,GAAG,CAACnB,GAASiB,CAAY,CAAC;AAE1B,QAAMG,IAAe,IAAI,IAAIpB,EAAQ,IAAI,CAAAE,MAAU,CAACA,EAAO,KAAKA,CAAM,CAAC,CAAC,GAClEmB,IAAiBL,EAAkB,QAAQ,CAAAX,MAAa;AAC1D,UAAMH,IAASkB,EAAa,IAAIf,CAAS;AAEzC,WAAOH,IAAS,CAACA,CAAM,IAAI,CAAA;AAAA,EAC/B,CAAC,GACKoB,IAAsBD,EAAe,OAAOd,CAAiB,EAAE,IAAI,CAAAL,MAAUA,EAAO,GAAG;AA+C7F,SAAO;AAAA,IACH,qBAAAoB;AAAA,IACA,qBA/CwB,CAACC,MAAwB;AACjD,UAAI,CAACZ;AACD;AAGJ,YAAMa,IAAkB,OAAOD,EAAM,OAAO,EAAE,GACxCE,IAAgBF,EAAM,OAAO,OAAOA,EAAM,KAAK,EAAE,IAAI;AAE3D,UAAI,CAACE,KAAiBD,MAAoBC;AACtC;AAGJ,YAAMC,IAAWJ,EAAoB,QAAQE,CAAe,GACtDG,IAAWL,EAAoB,QAAQG,CAAa;AAE1D,UAAIC,IAAW,KAAKC,IAAW;AAC3B;AAGJ,YAAMC,IAA0BC,EAAUP,GAAqBI,GAAUC,CAAQ;AACjF,UAAIG,IAA8B;AAElC,YAAMC,IAAwBV,EAAe,IAAI,CAAAnB,MAAU;AACvD,YAAI,CAACK,EAAkBL,CAAM;AACzB,iBAAOA,EAAO;AAGlB,cAAM8B,IAAgBJ,EAAwBE,CAA2B;AAEzE,eAAAA,KAA+B,GAExBE,KAAiB9B,EAAO;AAAA,MACnC,CAAC;AAED,MAAKe,KACDH;AAAA,QAA2B,CAAAf,MACvB,KAAK,UAAUA,CAAmB,MAAM,KAAK,UAAUgC,CAAqB,IACtEhC,IACAgC;AAAA,MAAA,GAIdnB,IAAsBmB,CAAqB;AAAA,IAC/C;AAAA,IAKI,gBAAAV;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useDraggableColumns.js","sources":["../../../../src/components/table/layout/useDraggableColumns.ts"],"sourcesContent":["import type { DragEndEvent } from '@dnd-kit/core';\nimport { useEffect, useState } from 'react';\n\nimport arrayMove from '../../../utils/arrayMove';\nimport type { TableColumnDefinition, TableRowData } from '../Table.types';\n\ntype UseDraggableColumnsProps<RowType extends TableRowData> = {\n    columns: TableColumnDefinition<RowType>[];\n    columnOrder?: string[];\n    enabled: boolean;\n    onColumnOrderChange?: (columnOrder: string[]) => void;\n};\n\nconst reconcileColumnOrder = <RowType extends TableRowData>(\n    previousColumnOrder: string[],\n    columns: TableColumnDefinition<RowType>[]\n) => {\n    const nextColumnKeys = columns.map(column => column.key);\n    const previousColumnKeySet = new Set(nextColumnKeys);\n    const preservedColumnOrder = previousColumnOrder.filter(columnKey => previousColumnKeySet.has(columnKey));\n    const missingColumnKeys = nextColumnKeys.filter(columnKey => !preservedColumnOrder.includes(columnKey));\n\n    return [...preservedColumnOrder, ...missingColumnKeys];\n};\n\nconst isColumnDraggable = <RowType extends TableRowData>(column: TableColumnDefinition<RowType>) =>\n    column.draggable === true;\n\nexport const useDraggableColumns = <RowType extends TableRowData>(props: UseDraggableColumnsProps<RowType>) => {\n    const { columns, columnOrder, enabled, onColumnOrderChange } = props;\n    const [uncontrolledColumnOrder, setUncontrolledColumnOrder] = useState(() => columns.map(column => column.key));\n    const orderedColumnKeys = reconcileColumnOrder(columnOrder ?? uncontrolledColumnOrder, columns);\n    const isControlled = columnOrder !== undefined;\n\n    useEffect(() => {\n        if (isControlled) {\n            return;\n        }\n\n        setUncontrolledColumnOrder(previousColumnOrder => {\n            const nextColumnOrder = reconcileColumnOrder(previousColumnOrder, columns);\n\n            return JSON.stringify(previousColumnOrder) === JSON.stringify(nextColumnOrder)\n                ? previousColumnOrder\n                : nextColumnOrder;\n        });\n    }, [columns, isControlled]);\n\n    const columnsByKey = new Map(columns.map(column => [column.key, column]));\n    const orderedColumns = orderedColumnKeys.flatMap(columnKey => {\n        const column = columnsByKey.get(columnKey);\n\n        return column ? [column] : [];\n    });\n    const draggableColumnKeys = orderedColumns.filter(isColumnDraggable).map(column => column.key);\n\n    const handleColumnDragEnd = (event: DragEndEvent) => {\n        if (!enabled) {\n            return;\n        }\n\n        const activeColumnKey = String(event.active.id);\n        const overColumnKey = event.over ? String(event.over.id) : undefined;\n\n        if (!overColumnKey || activeColumnKey === overColumnKey) {\n            return;\n        }\n\n        const oldIndex = draggableColumnKeys.indexOf(activeColumnKey);\n        const newIndex = draggableColumnKeys.indexOf(overColumnKey);\n\n        if (oldIndex < 0 || newIndex < 0) {\n            return;\n        }\n\n        const nextDraggableColumnKeys = arrayMove(draggableColumnKeys, oldIndex, newIndex);\n        let nextDraggableColumnKeyIndex = 0;\n\n        const nextOrderedColumnKeys = orderedColumns.map(column => {\n            if (!isColumnDraggable(column)) {\n                return column.key;\n            }\n\n            const nextColumnKey = nextDraggableColumnKeys[nextDraggableColumnKeyIndex];\n\n            nextDraggableColumnKeyIndex += 1;\n\n            return nextColumnKey ?? column.key;\n        });\n\n        if (!isControlled) {\n            setUncontrolledColumnOrder(previousColumnOrder =>\n                JSON.stringify(previousColumnOrder) === JSON.stringify(nextOrderedColumnKeys)\n                    ? previousColumnOrder\n                    : nextOrderedColumnKeys\n            );\n        }\n\n        onColumnOrderChange?.(nextOrderedColumnKeys);\n    };\n\n    return {\n        draggableColumnKeys,\n        handleColumnDragEnd,\n        orderedColumns,\n    };\n};\n"],"names":["reconcileColumnOrder","previousColumnOrder","columns","nextColumnKeys","column","previousColumnKeySet","preservedColumnOrder","columnKey","missingColumnKeys","isColumnDraggable","useDraggableColumns","props","columnOrder","enabled","onColumnOrderChange","uncontrolledColumnOrder","setUncontrolledColumnOrder","useState","orderedColumnKeys","isControlled","useEffect","nextColumnOrder","columnsByKey","orderedColumns","draggableColumnKeys","event","activeColumnKey","overColumnKey","oldIndex","newIndex","nextDraggableColumnKeys","arrayMove","nextDraggableColumnKeyIndex","nextOrderedColumnKeys","nextColumnKey"],"mappings":";;AAaA,MAAMA,IAAuB,CACzBC,GACAC,MACC;AACD,QAAMC,IAAiBD,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,GACjDC,IAAuB,IAAI,IAAIF,CAAc,GAC7CG,IAAuBL,EAAoB,OAAO,OAAaI,EAAqB,IAAIE,CAAS,CAAC,GAClGC,IAAoBL,EAAe,OAAO,CAAAI,MAAa,CAACD,EAAqB,SAASC,CAAS,CAAC;AAEtG,SAAO,CAAC,GAAGD,GAAsB,GAAGE,CAAiB;AACzD,GAEMC,IAAoB,CAA+BL,MACrDA,EAAO,cAAc,IAEZM,IAAsB,CAA+BC,MAA6C;AAC3G,QAAM,EAAE,SAAAT,GAAS,aAAAU,GAAa,SAAAC,GAAS,qBAAAC,MAAwBH,GACzD,CAACI,GAAyBC,CAA0B,IAAIC,EAAS,MAAMf,EAAQ,IAAI,CAAAE,MAAUA,EAAO,GAAG,CAAC,GACxGc,IAAoBlB,EAAqBY,KAAeG,GAAyBb,CAAO,GACxFiB,IAAeP,MAAgB;AAErC,EAAAQ,EAAU,MAAM;AACZ,IAAID,KAIJH,EAA2B,CAAAf,MAAuB;AAC9C,YAAMoB,IAAkBrB,EAAqBC,GAAqBC,CAAO;AAEzE,aAAO,KAAK,UAAUD,CAAmB,MAAM,KAAK,UAAUoB,CAAe,IACvEpB,IACAoB;AAAA,IACV,CAAC;AAAA,EACL,GAAG,CAACnB,GAASiB,CAAY,CAAC;AAE1B,QAAMG,IAAe,IAAI,IAAIpB,EAAQ,IAAI,CAAAE,MAAU,CAACA,EAAO,KAAKA,CAAM,CAAC,CAAC,GAClEmB,IAAiBL,EAAkB,QAAQ,CAAAX,MAAa;AAC1D,UAAMH,IAASkB,EAAa,IAAIf,CAAS;AAEzC,WAAOH,IAAS,CAACA,CAAM,IAAI,CAAA;AAAA,EAC/B,CAAC,GACKoB,IAAsBD,EAAe,OAAOd,CAAiB,EAAE,IAAI,CAAAL,MAAUA,EAAO,GAAG;AA+C7F,SAAO;AAAA,IACH,qBAAAoB;AAAA,IACA,qBA/CwB,CAACC,MAAwB;AACjD,UAAI,CAACZ;AACD;AAGJ,YAAMa,IAAkB,OAAOD,EAAM,OAAO,EAAE,GACxCE,IAAgBF,EAAM,OAAO,OAAOA,EAAM,KAAK,EAAE,IAAI;AAE3D,UAAI,CAACE,KAAiBD,MAAoBC;AACtC;AAGJ,YAAMC,IAAWJ,EAAoB,QAAQE,CAAe,GACtDG,IAAWL,EAAoB,QAAQG,CAAa;AAE1D,UAAIC,IAAW,KAAKC,IAAW;AAC3B;AAGJ,YAAMC,IAA0BC,EAAUP,GAAqBI,GAAUC,CAAQ;AACjF,UAAIG,IAA8B;AAElC,YAAMC,IAAwBV,EAAe,IAAI,CAAAnB,MAAU;AACvD,YAAI,CAACK,EAAkBL,CAAM;AACzB,iBAAOA,EAAO;AAGlB,cAAM8B,IAAgBJ,EAAwBE,CAA2B;AAEzE,eAAAA,KAA+B,GAExBE,KAAiB9B,EAAO;AAAA,MACnC,CAAC;AAED,MAAKe,KACDH;AAAA,QAA2B,CAAAf,MACvB,KAAK,UAAUA,CAAmB,MAAM,KAAK,UAAUgC,CAAqB,IACtEhC,IACAgC;AAAA,MAAA,GAIdnB,IAAsBmB,CAAqB;AAAA,IAC/C;AAAA,IAKI,gBAAAV;AAAA,EAAA;AAER;"}

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

@@ -2,9 +2,12 @@ import { UIEvent } from 'react';
 export declare const TABLE_HORIZONTAL_SCROLL_EVENT = "table-horizontal-scroll";
 type UseHorizontalSectionSyncProps = {
     enabled: boolean;
+    hasFooterCells?: boolean;
 };
-export declare const useHorizontalSectionSync: ({ enabled }: UseHorizontalSectionSyncProps) => {
+export declare const useHorizontalSectionSync: ({ enabled, hasFooterCells }: UseHorizontalSectionSyncProps) => {
     handleBodyScroll: (event: UIEvent<HTMLElement> | undefined) => void;
+    hasHorizontalScrollEndOffset: boolean;
+    hasHorizontalScrollStartOffset: boolean;
     tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
     tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
 };

package/components/table/layout/useHorizontalSectionSync.js

@@ -1,39 +1,44 @@
-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;
-  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;
+import { useRef as f, useState as S, useCallback as m, useEffect as g } from "react";
+const h = "table-horizontal-scroll", R = (r) => {
+  const o = r?.currentTarget;
+  if (o && "scrollLeft" in o)
+    return o.scrollLeft;
+  const e = r?.target;
+  return e && "scrollLeft" in e ? e.scrollLeft : 0;
+}, z = ({ enabled: r, hasFooterCells: o = !0 }) => {
+  const e = f(null), c = f(null), a = f(0), [L, i] = S(!1), [H, u] = S(!1), l = m(
+    (s) => {
+      const n = (t) => {
+        if (t) {
+          if (s === 0) {
+            t.style.removeProperty("transform");
+            return;
+          }
+          t.style.transform = `translateX(-${s}px)`;
         }
-        l.style.transform = `translateX(-${c}px)`;
-      }
-    };
-    n(r.current), n(o.current);
-  }, []), a = u(
-    (c) => {
-      const n = p(c);
-      t && e(n), n !== s.current && (s.current = n, window.dispatchEvent(new CustomEvent(L)));
+      };
+      n(e.current), o ? n(c.current) : c.current && c.current.style.removeProperty("transform");
     },
-    [t, e]
+    [o]
+  ), p = m(
+    (s) => {
+      const n = s?.currentTarget, t = R(s), y = n ? Math.max(n.scrollWidth - n.clientWidth, 0) : 0, E = Math.max(y - t, 0);
+      i(t > 0), u(E > 1), r && l(t), t !== a.current && (a.current = t, window.dispatchEvent(new CustomEvent(h)));
+    },
+    [r, l]
   );
-  return i(() => {
-    t || (s.current = 0, e(0));
-  }, [t, e]), {
-    handleBodyScroll: a,
-    tableFooterRowRef: o,
-    tableHeadRowRef: r
+  return g(() => {
+    r || (a.current = 0, i(!1), u(!1), l(0));
+  }, [r, l]), {
+    handleBodyScroll: p,
+    hasHorizontalScrollEndOffset: H,
+    hasHorizontalScrollStartOffset: L,
+    tableFooterRowRef: c,
+    tableHeadRowRef: e
   };
 };
 export {
-  L as TABLE_HORIZONTAL_SCROLL_EVENT,
-  y as useHorizontalSectionSync
+  h as TABLE_HORIZONTAL_SCROLL_EVENT,
+  z 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\n    const [hasHorizontalScrollStartOffset, setHasHorizontalScrollStartOffset] = useState(false);\n    const [hasHorizontalScrollEndOffset, setHasHorizontalScrollEndOffset] = 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 currentTarget = event?.currentTarget as HTMLElement | undefined;\n            const scrollLeft = getScrollLeftFromEvent(event);\n            const maxScrollLeft = currentTarget\n                ? Math.max(currentTarget.scrollWidth - currentTarget.clientWidth, 0)\n                : 0;\n            const remainingScrollLeft = Math.max(maxScrollLeft - scrollLeft, 0);\n\n            setHasHorizontalScrollStartOffset(scrollLeft > 0);\n            setHasHorizontalScrollEndOffset(remainingScrollLeft > 1);\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            setHasHorizontalScrollStartOffset(false);\n            setHasHorizontalScrollEndOffset(false);\n            syncHorizontalSections(0);\n        }\n    }, [enabled, syncHorizontalSections]);\n\n    return {\n        handleBodyScroll,\n        hasHorizontalScrollEndOffset,\n        hasHorizontalScrollStartOffset,\n        tableFooterRowRef,\n        tableHeadRowRef,\n    };\n};\n"],"names":["TABLE_HORIZONTAL_SCROLL_EVENT","getScrollLeftFromEvent","event","currentTarget","target","useHorizontalSectionSync","enabled","hasFooterCells","tableHeadRowRef","useRef","tableFooterRowRef","previousScrollLeftRef","hasHorizontalScrollStartOffset","setHasHorizontalScrollStartOffset","useState","hasHorizontalScrollEndOffset","setHasHorizontalScrollEndOffset","syncHorizontalSections","useCallback","scrollLeft","applyTransform","element","handleBodyScroll","maxScrollLeft","remainingScrollLeft","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,GAEhC,CAACG,GAAgCC,CAAiC,IAAIC,EAAS,EAAK,GACpF,CAACC,GAA8BC,CAA+B,IAAIF,EAAS,EAAK,GAEhFG,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,EAAeZ,EAAgB,OAAO,GAElCD,IACAa,EAAeV,EAAkB,OAAO,IACjCA,EAAkB,WACzBA,EAAkB,QAAQ,MAAM,eAAe,WAAW;AAAA,IAElE;AAAA,IACA,CAACH,CAAc;AAAA,EAAA,GAGbe,IAAmBJ;AAAA,IACrB,CAAChB,MAA4C;AACzC,YAAMC,IAAgBD,GAAO,eACvBiB,IAAalB,EAAuBC,CAAK,GACzCqB,IAAgBpB,IAChB,KAAK,IAAIA,EAAc,cAAcA,EAAc,aAAa,CAAC,IACjE,GACAqB,IAAsB,KAAK,IAAID,IAAgBJ,GAAY,CAAC;AAElE,MAAAN,EAAkCM,IAAa,CAAC,GAChDH,EAAgCQ,IAAsB,CAAC,GAEnDlB,KACAW,EAAuBE,CAAU,GAGjCA,MAAeR,EAAsB,YACrCA,EAAsB,UAAUQ,GAChC,OAAO,cAAc,IAAI,YAAYnB,CAA6B,CAAC;AAAA,IAE3E;AAAA,IACA,CAACM,GAASW,CAAsB;AAAA,EAAA;AAGpC,SAAAQ,EAAU,MAAM;AACZ,IAAKnB,MACDK,EAAsB,UAAU,GAChCE,EAAkC,EAAK,GACvCG,EAAgC,EAAK,GACrCC,EAAuB,CAAC;AAAA,EAEhC,GAAG,CAACX,GAASW,CAAsB,CAAC,GAE7B;AAAA,IACH,kBAAAK;AAAA,IACA,8BAAAP;AAAA,IACA,gCAAAH;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;