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

package/components/table/context/TableStructureContext.js

@@ -0,0 +1,17 @@
+import { createContext as e, useContext as n } from "react";
+const l = e(null), a = e(null), s = e(null), r = e(null), c = e(null), u = () => n(l), x = () => n(a), T = () => n(s), C = () => n(r), d = () => n(c), i = (t) => t.startsWith("aria-") || t.startsWith("data-") || ["id", "lang", "title", "translate", "dir"].includes(t), H = (t) => Object.fromEntries(Object.entries(t).filter(([o]) => i(o)));
+export {
+  a as TableBodyContext,
+  s as TableHeaderContext,
+  r as TableHeaderRowContext,
+  c as TableRowContext,
+  l as TableSectionContext,
+  H as extractTableHtmlAttributes,
+  i as isTableHtmlAttribute,
+  u as useOptionalTableSection,
+  x as useTableBodyContext,
+  T as useTableHeaderContext,
+  C as useTableHeaderRowContext,
+  d as useTableRowContext
+};
+//# sourceMappingURL=TableStructureContext.js.map

package/components/table/context/TableStructureContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStructureContext.js","sources":["../../../../src/components/table/context/TableStructureContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { TableHtmlAttributes, TableRowData, TableRowId } from '../Table.types';\n\nexport type TableSection = 'header' | 'body' | 'footer';\n\nexport type TableBodyContextValue = {\n    nextRowIndex: () => number;\n};\n\nexport type TableHeaderContextValue = {\n    nextHeaderRowIndex: () => number;\n};\n\nexport type TableHeaderRowContextValue = {\n    row: number;\n};\n\nexport type TableRenderRowContextValue = {\n    nextColumnIndex: (explicitColumnIndex?: number, span?: number) => number;\n    rowIndex: number;\n    rowId: TableRowId;\n    rowData: TableRowData;\n};\n\nexport const TableSectionContext = createContext<TableSection | null>(null);\nexport const TableBodyContext = createContext<TableBodyContextValue | null>(null);\nexport const TableHeaderContext = createContext<TableHeaderContextValue | null>(null);\nexport const TableHeaderRowContext = createContext<TableHeaderRowContextValue | null>(null);\nexport const TableRowContext = createContext<TableRenderRowContextValue | null>(null);\n\nexport const useOptionalTableSection = () => useContext(TableSectionContext);\n\nexport const useTableBodyContext = () => useContext(TableBodyContext);\nexport const useTableHeaderContext = () => useContext(TableHeaderContext);\nexport const useTableHeaderRowContext = () => useContext(TableHeaderRowContext);\n\nexport const useTableRowContext = <RowType extends TableRowData>() =>\n    useContext(TableRowContext) as (Omit<TableRenderRowContextValue, 'rowData'> & { rowData: RowType }) | null;\n\nexport const isTableHtmlAttribute = (key: string) =>\n    key.startsWith('aria-') || key.startsWith('data-') || ['id', 'lang', 'title', 'translate', 'dir'].includes(key);\n\nexport const extractTableHtmlAttributes = (props: Record<string, unknown>) =>\n    Object.fromEntries(Object.entries(props).filter(([key]) => isTableHtmlAttribute(key))) as TableHtmlAttributes;\n"],"names":["TableSectionContext","createContext","TableBodyContext","TableHeaderContext","TableHeaderRowContext","TableRowContext","useOptionalTableSection","useContext","useTableBodyContext","useTableHeaderContext","useTableHeaderRowContext","useTableRowContext","isTableHtmlAttribute","key","extractTableHtmlAttributes","props"],"mappings":";AAyBO,MAAMA,IAAsBC,EAAmC,IAAI,GAC7DC,IAAmBD,EAA4C,IAAI,GACnEE,IAAqBF,EAA8C,IAAI,GACvEG,IAAwBH,EAAiD,IAAI,GAC7EI,IAAkBJ,EAAiD,IAAI,GAEvEK,IAA0B,MAAMC,EAAWP,CAAmB,GAE9DQ,IAAsB,MAAMD,EAAWL,CAAgB,GACvDO,IAAwB,MAAMF,EAAWJ,CAAkB,GAC3DO,IAA2B,MAAMH,EAAWH,CAAqB,GAEjEO,IAAqB,MAC9BJ,EAAWF,CAAe,GAEjBO,IAAuB,CAACC,MACjCA,EAAI,WAAW,OAAO,KAAKA,EAAI,WAAW,OAAO,KAAK,CAAC,MAAM,QAAQ,SAAS,aAAa,KAAK,EAAE,SAASA,CAAG,GAErGC,IAA6B,CAACC,MACvC,OAAO,YAAY,OAAO,QAAQA,CAAK,EAAE,OAAO,CAAC,CAACF,CAAG,MAAMD,EAAqBC,CAAG,CAAC,CAAC;"}

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

@@ -0,0 +1,3 @@
+import { TableColumnDefinition, TableRowData } from '../Table.types';
+export declare const toCssSize: (value?: number | string) => string | undefined;
+export declare const getColumnTrack: <RowType extends TableRowData>(column: TableColumnDefinition<RowType>, measuredMaxWidth?: string) => string;

package/components/table/layout/columnSizing.js

@@ -0,0 +1,23 @@
+import { MIN_COLUMN_WIDTH as i } from "../tableSizing.constants.js";
+const o = (t) => {
+  if (t !== void 0)
+    return typeof t == "number" ? `${t}px` : t;
+}, m = (t) => t.trim().endsWith("%"), c = (t) => {
+  const r = Number.parseFloat(t);
+  return Number.isFinite(r) ? r : void 0;
+}, u = (t, r) => {
+  const n = o(t.width);
+  if (n) {
+    if (m(n)) {
+      const e = c(n);
+      return e !== void 0 ? `minmax(0, calc(var(--table-width) * ${e} / 100))` : `minmax(0, ${n})`;
+    }
+    return `minmax(0, ${n})`;
+  }
+  return r ? `minmax(${i}, ${r})` : `minmax(${i}, 1fr)`;
+};
+export {
+  u as getColumnTrack,
+  o as toCssSize
+};
+//# sourceMappingURL=columnSizing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columnSizing.js","sources":["../../../../src/components/table/layout/columnSizing.ts"],"sourcesContent":["import type { TableColumnDefinition, TableRowData } from '../Table.types';\nimport { MIN_COLUMN_WIDTH } from '../tableSizing.constants';\n\nexport const toCssSize = (value?: number | string) => {\n    if (value === undefined) {\n        return;\n    }\n\n    return typeof value === 'number' ? `${value}px` : value;\n};\n\nconst isPercentSize = (value: string) => value.trim().endsWith('%');\nconst getPercentValue = (value: string) => {\n    const percentValue = Number.parseFloat(value);\n\n    return Number.isFinite(percentValue) ? percentValue : undefined;\n};\n\nexport const getColumnTrack = <RowType extends TableRowData>(\n    column: TableColumnDefinition<RowType>,\n    measuredMaxWidth?: string\n) => {\n    const width = toCssSize(column.width);\n\n    if (width) {\n        if (isPercentSize(width)) {\n            const percentValue = getPercentValue(width);\n\n            if (percentValue !== undefined) {\n                return `minmax(0, calc(var(--table-width) * ${percentValue} / 100))`;\n            }\n\n            return `minmax(0, ${width})`;\n        }\n\n        return `minmax(0, ${width})`;\n    }\n\n    if (measuredMaxWidth) {\n        return `minmax(${MIN_COLUMN_WIDTH}, ${measuredMaxWidth})`;\n    }\n\n    // Unconfigured columns should share the available width evenly\n    // and be allowed to shrink with the table width.\n    return `minmax(${MIN_COLUMN_WIDTH}, 1fr)`;\n};\n"],"names":["toCssSize","value","isPercentSize","getPercentValue","percentValue","getColumnTrack","column","measuredMaxWidth","width","MIN_COLUMN_WIDTH"],"mappings":";AAGO,MAAMA,IAAY,CAACC,MAA4B;AAClD,MAAIA,MAAU;AAId,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACtD,GAEMC,IAAgB,CAACD,MAAkBA,EAAM,KAAA,EAAO,SAAS,GAAG,GAC5DE,IAAkB,CAACF,MAAkB;AACvC,QAAMG,IAAe,OAAO,WAAWH,CAAK;AAE5C,SAAO,OAAO,SAASG,CAAY,IAAIA,IAAe;AAC1D,GAEaC,IAAiB,CAC1BC,GACAC,MACC;AACD,QAAMC,IAAQR,EAAUM,EAAO,KAAK;AAEpC,MAAIE,GAAO;AACP,QAAIN,EAAcM,CAAK,GAAG;AACtB,YAAMJ,IAAeD,EAAgBK,CAAK;AAE1C,aAAIJ,MAAiB,SACV,uCAAuCA,CAAY,aAGvD,aAAaI,CAAK;AAAA,IAC7B;AAEA,WAAO,aAAaA,CAAK;AAAA,EAC7B;AAEA,SAAID,IACO,UAAUE,CAAgB,KAAKF,CAAgB,MAKnD,UAAUE,CAAgB;AACrC;"}

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

@@ -0,0 +1,14 @@
+import { DragEndEvent } from '@dnd-kit/core';
+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 TableRowData>(props: UseDraggableColumnsProps<RowType>) => {
+    draggableColumnKeys: (string | Extract<keyof RowType, string>)[];
+    handleColumnDragEnd: (event: DragEndEvent) => void;
+    orderedColumns: TableColumnDefinition<RowType>[];
+};
+export {};

package/components/table/layout/useDraggableColumns.js

@@ -0,0 +1,47 @@
+import { useState as D, useEffect as v } from "react";
+import h from "../../../utils/arrayMove.js";
+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, t);
+      return JSON.stringify(e) === JSON.stringify(r) ? e : r;
+    });
+  }, [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);
+  return {
+    draggableColumnKeys: c,
+    handleColumnDragEnd: (e) => {
+      if (!i)
+        return;
+      const r = String(e.active.id), y = e.over ? String(e.over.id) : void 0;
+      if (!y || r === y)
+        return;
+      const C = c.indexOf(r), f = c.indexOf(y);
+      if (C < 0 || f < 0)
+        return;
+      const b = h(c, C, f);
+      let x = 0;
+      const g = m.map((o) => {
+        if (!O(o))
+          return o.key;
+        const k = b[x];
+        return x += 1, k ?? o.key;
+      });
+      d || n(
+        (o) => JSON.stringify(o) === JSON.stringify(g) ? o : g
+      ), u?.(g);
+    },
+    orderedColumns: m
+  };
+};
+export {
+  E as useDraggableColumns
+};
+//# sourceMappingURL=useDraggableColumns.js.map

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

@@ -0,0 +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, 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

@@ -0,0 +1,13 @@
+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, hasFooterCells }: UseHorizontalSectionSyncProps) => {
+    handleBodyScroll: (event: UIEvent<HTMLElement> | undefined) => void;
+    hasHorizontalScrollOffset: boolean;
+    tableFooterRowRef: import('react').RefObject<HTMLDivElement>;
+    tableHeadRowRef: import('react').RefObject<HTMLDivElement>;
+};
+export {};

package/components/table/layout/useHorizontalSectionSync.js

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

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

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

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

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+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 TableRowData> = {
+    columns: TableColumnDefinition<RowType>[];
+    enabled: boolean;
+    tableWrapperRef: RefObject<HTMLDivElement | null>;
+};
+export declare const useMeasuredColumnMaxWidths: <RowType extends TableRowData>(props: UseMeasuredColumnMaxWidthsProps<RowType>) => Record<string, string>;
+export {};

package/components/table/layout/useMeasuredColumnMaxWidths.js

@@ -0,0 +1,85 @@
+import { useState as S, useRef as p, useMemo as w, useLayoutEffect as R } from "react";
+const A = 1, E = (t) => {
+  const e = t?.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
+  return e ? Number(e[1]) : void 0;
+}, x = (t) => {
+  const e = t.getBoundingClientRect().width;
+  return e > 0 ? Math.ceil(e) : t.scrollWidth;
+}, O = (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) => {
+  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);
+  }
+  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);
+    return [
+      n,
+      u !== void 0 && r !== void 0 && Math.abs(u - r) <= A ? i : s
+    ];
+  })
+), 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("|"),
+    [e]
+  );
+  return R(() => {
+    const o = s.current;
+    if (!n || !o) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      return;
+    }
+    if (e.length === 0) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      return;
+    }
+    const h = e.filter((c) => c.width === void 0);
+    if (h.length === 0) {
+      r.current && (r.current = "", a.current = {}, u({}));
+      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)),
+            0
+          );
+          return W > 0 ? [[M.key, `${Math.ceil(W)}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;
+};
+export {
+  z as stabilizeMeasuredColumnMaxWidths,
+  P as useMeasuredColumnMaxWidths
+};
+//# sourceMappingURL=useMeasuredColumnMaxWidths.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,15 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+import { TableColumnDefinition, TableRowData } from '../Table.types';
+type UseResizableColumnsProps<RowType extends TableRowData> = {
+    columns: TableColumnDefinition<RowType>[];
+    enabled: boolean;
+    onColumnResize?: (columnKey: string, width?: number | string) => void;
+};
+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

@@ -0,0 +1,132 @@
+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, i = document.body.style.userSelect;
+    document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+    const a = (o) => {
+      const t = Math.min(
+        c.maxResizeWidth,
+        Math.max(
+          c.minResizeWidth,
+          Math.round(c.startWidth + o.clientX - c.startX)
+        )
+      );
+      h?.(c.columnKey, t), W(
+        (n) => n[c.columnKey] === t ? n : {
+          ...n,
+          [c.columnKey]: t
+        }
+      );
+    }, s = () => {
+      p(void 0);
+    };
+    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);
+    };
+  }, [h, c]);
+  const k = (e, i) => {
+    if (!u || i.button !== 0)
+      return;
+    const a = r.find((n) => n.key === e), s = i.currentTarget.closest(".table-head-cell");
+    if (!a || !s)
+      return;
+    i.preventDefault(), i.stopPropagation();
+    const o = Math.max(a.minResizeWidth ?? g, b), t = Math.max(a.maxResizeWidth ?? D, o);
+    p({
+      columnKey: e,
+      maxResizeWidth: t,
+      minResizeWidth: o,
+      startWidth: s.getBoundingClientRect().width,
+      startX: i.clientX
+    });
+  }, 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 o[e] === s ? o : {
+        ...o,
+        [e]: s
+      };
+    });
+  }, M = r.map((e) => {
+    const i = C[e.key];
+    return i === void 0 ? e : {
+      ...e,
+      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: v,
+    handleColumnResizeStart: k,
+    lastResizableColumnKey: r.at(-1)?.key,
+    resettableColumnKeys: x,
+    resizedColumns: M
+  };
+};
+export {
+  P as useResizableColumns
+};
+//# sourceMappingURL=useResizableColumns.js.map

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

@@ -0,0 +1 @@
+{"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":";;AAuBA,MAAMA,IAAuB,CAACC,MAA4B;AAEtD,QAAMC,KADkB,OAAOD,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAAO,KAAA,IAC3C,MAAM,2BAA2B;AAEhE,MAAKC;AAIL,WAAO;AAAA,MACH,MAAMA,EAAM,CAAC;AAAA,MACb,OAAO,OAAOA,EAAM,CAAC,CAAC;AAAA,IAAA;AAE9B,GAEMC,IAAuB,CAACC,GAAgCC,MAAmC;AAC7F,MAAID,MAAiBC;AACjB,WAAO;AAGX,QAAMC,IAAyBN,EAAqBI,CAAY,GAC1DG,IAAyBP,EAAqBK,CAAY;AAEhE,SACIC,MAA2B,UAC3BC,MAA2B,UAC3BD,EAAuB,SAASC,EAAuB,OAEhDD,EAAuB,UAAUC,EAAuB,QAG5D;AACX,GAEaC,IAAsB,CAA+BC,MAA6C;AAC3G,QAAM,EAAE,SAAAC,GAAS,SAAAC,GAAS,gBAAAC,EAAA,IAAmBH,GACvC,CAACI,GAAsBC,CAAuB,IAAIC,EAAsD,CAAA,CAAE,GAC1G,CAACC,GAAeC,CAAgB,IAAIF,EAAoC,MAAS,GACjFG,IAAyBC,EAAoD,EAAE,GAC/EC,IAA0BD,EAAoD,EAAE,GAChFE,IAAgCF,EAAO,EAAK;AAMlD,EAAAT,EAAQ,QAAQ,CAAAY,MAAU;AACtB,IAAMA,EAAO,OAAOJ,EAAuB,YACvCA,EAAuB,QAAQI,EAAO,GAAG,IAAIA,EAAO;AAAA,EAE5D,CAAC,GAEDC,EAAgB,MAAM;AAClB,UAAMC,IAAsB,OAAO,YAAYd,EAAQ,IAAI,CAAAY,MAAU,CAACA,EAAO,KAAKA,EAAO,KAAK,CAAU,CAAC;AAKzG,QAAIZ,EAAQ,WAAW;AACnB;AAMJ,QAAI,CAACW,EAA8B,SAAS;AACxC,MAAAD,EAAwB,UAAUI,GAClCH,EAA8B,UAAU;AACxC;AAAA,IACJ;AAEA,UAAMI,IAAuBL,EAAwB,SAC/CM,IAAsB,IAAI,IAAIhB,EAAQ,IAAI,CAAAY,MAAUA,EAAO,GAAG,CAAC,GAC/DK,IAAqB,OAAO,KAAKF,CAAoB;AAK3D,KAHIf,EAAQ,KAAK,CAAAY,MAAU,CAACnB,EAAqBmB,EAAO,OAAOG,EAAqBH,EAAO,GAAG,CAAC,CAAC,KAC5FK,EAAmB,KAAK,OAAa,CAACD,EAAoB,IAAIE,CAAS,CAAC,OAM5Ed,EAAwB,CAAAe,MAAkB;AACtC,UAAIC,IAAaD;AAEjB,aAAAnB,EAAQ,QAAQ,CAAAY,MAAU;AACtB,cAAMS,IAAsBX,EAAwB,QAAQE,EAAO,GAAG;AAEtE,YAAInB,EAAqBmB,EAAO,OAAOS,CAAmB;AACtD;AAGJ,cAAMC,IAAqBd,EAAuB,QAAQI,EAAO,GAAG;AAEpE,YAAInB,EAAqBmB,EAAO,OAAOU,CAAkB,GAAG;AACxD,cAAI,EAAEV,EAAO,OAAOQ;AAChB;AAGJ,UAAAA,IAAa,EAAE,GAAGA,EAAA,GAClB,OAAOA,EAAWR,EAAO,GAAG;AAC5B;AAAA,QACJ;AAEA,QAAIQ,EAAWR,EAAO,GAAG,MAAMA,EAAO,UAItCQ,IAAa;AAAA,UACT,GAAGA;AAAA,UACH,CAACR,EAAO,GAAG,GAAGA,EAAO;AAAA,QAAA;AAAA,MAE7B,CAAC,GAED,OAAO,KAAKQ,CAAU,EAAE,QAAQ,CAAAF,MAAa;AACzC,QAAIF,EAAoB,IAAIE,CAAS,MAIjCE,MAAeD,MACfC,IAAa,EAAE,GAAGA,EAAA,IAGtB,OAAOA,EAAWF,CAAS;AAAA,MAC/B,CAAC,GAEME;AAAA,IACX,CAAC,GAEDV,EAAwB,UAAUI;AAAA,EACtC,GAAG,CAACd,CAAO,CAAC,GAEZuB,EAAU,MAAM;AACZ,QAAI,CAACjB;AACD;AAGJ,UAAMkB,IAAqB,SAAS,KAAK,MAAM,QACzCC,IAAyB,SAAS,KAAK,MAAM;AAEnD,aAAS,KAAK,MAAM,SAAS,cAC7B,SAAS,KAAK,MAAM,aAAa;AAEjC,UAAMC,IAAoB,CAACC,MAAwB;AAC/C,YAAMC,IAAY,KAAK;AAAA,QACnBtB,EAAc;AAAA,QACd,KAAK;AAAA,UACDA,EAAc;AAAA,UACd,KAAK,MAAMA,EAAc,aAAaqB,EAAM,UAAUrB,EAAc,MAAM;AAAA,QAAA;AAAA,MAC9E;AAGJ,MAAAJ,IAAiBI,EAAc,WAAWsB,CAAS,GAEnDxB;AAAA,QAAwB,OACpBe,EAAeb,EAAc,SAAS,MAAMsB,IACtCT,IACA;AAAA,UACI,GAAGA;AAAA,UACH,CAACb,EAAc,SAAS,GAAGsB;AAAA,QAAA;AAAA,MAC/B;AAAA,IAEd,GAEMC,IAAa,MAAM;AACrB,MAAAtB,EAAiB,MAAS;AAAA,IAC9B;AAEA,kBAAO,iBAAiB,eAAemB,CAAiB,GACxD,OAAO,iBAAiB,aAAaG,CAAU,GAC/C,OAAO,iBAAiB,iBAAiBA,CAAU,GAE5C,MAAM;AACT,eAAS,KAAK,MAAM,SAASL,GAC7B,SAAS,KAAK,MAAM,aAAaC,GACjC,OAAO,oBAAoB,eAAeC,CAAiB,GAC3D,OAAO,oBAAoB,aAAaG,CAAU,GAClD,OAAO,oBAAoB,iBAAiBA,CAAU;AAAA,IAC1D;AAAA,EACJ,GAAG,CAAC3B,GAAgBI,CAAa,CAAC;AAElC,QAAMwB,IAA0B,CAACZ,GAAmBS,MAA6C;AAC7F,QAAI,CAAC1B,KAAW0B,EAAM,WAAW;AAC7B;AAGJ,UAAMf,IAASZ,EAAQ,KAAK,CAAA+B,MAAiBA,EAAc,QAAQb,CAAS,GACtEc,IAAoBL,EAAM,cAAc,QAAqB,kBAAkB;AAErF,QAAI,CAACf,KAAU,CAACoB;AACZ;AAGJ,IAAAL,EAAM,eAAA,GACNA,EAAM,gBAAA;AAEN,UAAMM,IAAiB,KAAK,IAAIrB,EAAO,kBAAkBsB,GAA6BC,CAAmB,GACnGC,IAAiB,KAAK,IAAIxB,EAAO,kBAAkByB,GAA6BJ,CAAc;AAEpG,IAAA1B,EAAiB;AAAA,MACb,WAAAW;AAAA,MACA,gBAAAkB;AAAA,MACA,gBAAAH;AAAA,MACA,YAAYD,EAAkB,sBAAA,EAAwB;AAAA,MACtD,QAAQL,EAAM;AAAA,IAAA,CACjB;AAAA,EACL,GAEMW,IAA0B,CAACpB,MAAsB;AACnD,UAAMN,IAASZ,EAAQ,KAAK,CAAA+B,MAAiBA,EAAc,QAAQb,CAAS,GAEtEqB,IADqB/B,EAAuB,QAAQU,CAAS,MAG9DN,GAAQ,mBAAmB,SAAY,KAAK,IAAIA,EAAO,gBAAgBuB,CAAmB,IAAI;AAEnG,IAAA5B,EAAiB,MAAS,GAC1BL,IAAiBgB,GAAWqB,CAAU,GACtCnC,EAAwB,CAAAe,MAAkB;AACtC,UAAIoB,MAAe,QAAW;AAC1B,YAAI,EAAErB,KAAaC;AACf,iBAAOA;AAGX,cAAMC,IAAa,EAAE,GAAGD,EAAA;AACxB,sBAAOC,EAAWF,CAAS,GAEpBE;AAAA,MACX;AAEA,aAAOD,EAAeD,CAAS,MAAMqB,IAC/BpB,IACA;AAAA,QACI,GAAGA;AAAA,QACH,CAACD,CAAS,GAAGqB;AAAA,MAAA;AAAA,IAE3B,CAAC;AAAA,EACL,GAEMC,IAAiBxC,EAAQ,IAAI,CAAAY,MAAU;AACzC,UAAM6B,IAAetC,EAAqBS,EAAO,GAAG;AAEpD,WAAO6B,MAAiB,SAClB7B,IACA;AAAA,MACI,GAAGA;AAAA,MACH,OAAO6B;AAAA,IAAA;AAAA,EAErB,CAAC,GAEKC,IAAuBC;AAAA,IACzB,0BACQ,IAAI;AAAA,MACJ,GAAG3C,EAAQ;AAAA,QAAQ,CAAAY,MACfnB,EAAqBmB,EAAO,OAAOJ,EAAuB,QAAQI,EAAO,GAAG,CAAC,IAAI,KAAK,CAACA,EAAO,GAAG;AAAA,MAAA;AAAA,MAErG,GAAG,OAAO,QAAQT,CAAoB,EAAE;AAAA,QAAQ,CAAC,CAACe,GAAW3B,CAAK,MAC9DE,EAAqBF,GAAOiB,EAAuB,QAAQU,CAAS,CAAC,IAAI,CAAA,IAAK,CAACA,CAAS;AAAA,MAAA;AAAA,IAC5F,CACH;AAAA,IACL,CAAClB,GAASG,CAAoB;AAAA,EAAA;AAGlC,SAAO;AAAA,IACH,yBAAAmC;AAAA,IACA,yBAAAR;AAAA,IACA,wBAAwB9B,EAAQ,GAAG,EAAE,GAAG;AAAA,IACxC,sBAAA0C;AAAA,IACA,gBAAAF;AAAA,EAAA;AAER;"}

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

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

package/components/table/layout/useTableBodyScrollBottom.js

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

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

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

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

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