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

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

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

package/components/table/layout/useTableLayout.js

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

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

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

package/components/table/layout/useTableVirtualization.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"useTableVirtualization.js","sources":["../../../../src/components/table/layout/useTableVirtualization.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\ntype TableVirtualScrollContainer = {\n    view?: HTMLDivElement | null;\n};\n\ntype TableVirtualRow<RowType> = {\n    index: number;\n    row: RowType;\n};\n\ntype UseTableVirtualizationOptions<RowType> = {\n    enabled: boolean;\n    overscan: number;\n    rows: RowType[];\n    scrollContainer: TableVirtualScrollContainer | null;\n    viewportHeightFallback?: number;\n};\n\ntype TableVirtualizationState = {\n    itemHeights: Record<number, number>;\n    scrollTop: number;\n    viewportHeight: number;\n    visibleRange: {\n        start: number;\n        end: number;\n    };\n};\n\nconst DEFAULT_ROW_HEIGHT = 50;\n\nconst areVisibleRangesEqual = (\n    currentRange: TableVirtualizationState['visibleRange'],\n    nextRange: TableVirtualizationState['visibleRange']\n) => currentRange.start === nextRange.start && currentRange.end === nextRange.end;\n\nconst useTableVirtualization = <RowType>(options: UseTableVirtualizationOptions<RowType>) => {\n    const { enabled, overscan, rows, scrollContainer, viewportHeightFallback } = options;\n    const [state, setState] = useState<TableVirtualizationState>({\n        itemHeights: {},\n        scrollTop: 0,\n        viewportHeight: 0,\n        visibleRange: { start: 0, end: 10 },\n    });\n\n    const getScrollElement = useCallback(() => scrollContainer?.view ?? null, [scrollContainer]);\n\n    const getEstimatedRowHeight = useCallback(() => {\n        const measuredHeights = Object.values(state.itemHeights);\n\n        if (measuredHeights.length === 0) {\n            return DEFAULT_ROW_HEIGHT;\n        }\n\n        return measuredHeights.reduce((sum, height) => sum + height, 0) / measuredHeights.length;\n    }, [state.itemHeights]);\n\n    const getRowHeight = useCallback(\n        (index: number) => state.itemHeights[index] ?? getEstimatedRowHeight(),\n        [getEstimatedRowHeight, state.itemHeights]\n    );\n\n    const getItemPosition = useCallback(\n        (index: number) => {\n            let position = 0;\n\n            for (let currentIndex = 0; currentIndex < index; currentIndex++) {\n                position += getRowHeight(currentIndex);\n            }\n\n            return position;\n        },\n        [getRowHeight]\n    );\n\n    const getTotalHeight = useCallback(() => {\n        let totalHeight = 0;\n\n        for (let index = 0; index < rows.length; index++) {\n            totalHeight += getRowHeight(index);\n        }\n\n        return totalHeight;\n    }, [getRowHeight, rows.length]);\n\n    const calculateVisibleRange = useCallback(\n        (scrollTop: number, viewportHeight: number) => {\n            if (!enabled || rows.length === 0) {\n                return { start: 0, end: rows.length };\n            }\n\n            let start = 0;\n            let currentPosition = 0;\n\n            while (start < rows.length) {\n                const rowHeight = getRowHeight(start);\n\n                if (currentPosition + rowHeight > scrollTop - overscan * rowHeight) {\n                    break;\n                }\n\n                currentPosition += rowHeight;\n                start++;\n            }\n\n            let end = start;\n\n            while (end < rows.length) {\n                const rowHeight = getRowHeight(end);\n\n                if (currentPosition > scrollTop + viewportHeight + overscan * rowHeight) {\n                    break;\n                }\n\n                currentPosition += rowHeight;\n                end++;\n            }\n\n            return {\n                start: Math.max(0, start - overscan),\n                end: Math.min(rows.length, end + overscan),\n            };\n        },\n        [enabled, getRowHeight, overscan, rows.length]\n    );\n\n    const handleScroll = useCallback(() => {\n        const scrollElement = getScrollElement();\n\n        if (!scrollElement) {\n            return;\n        }\n\n        const viewportHeight = scrollElement.clientHeight || viewportHeightFallback || 0;\n        const scrollTop = scrollElement.scrollTop;\n        const visibleRange = calculateVisibleRange(scrollTop, viewportHeight);\n\n        setState(previousState =>\n            previousState.scrollTop === scrollTop &&\n            previousState.viewportHeight === viewportHeight &&\n            areVisibleRangesEqual(previousState.visibleRange, visibleRange)\n                ? previousState\n                : {\n                      ...previousState,\n                      scrollTop,\n                      viewportHeight,\n                      visibleRange,\n                  }\n        );\n    }, [calculateVisibleRange, getScrollElement, viewportHeightFallback]);\n\n    useEffect(() => {\n        if (!enabled) {\n            return;\n        }\n\n        const scrollElement = getScrollElement();\n\n        if (!scrollElement) {\n            return;\n        }\n\n        handleScroll();\n        scrollElement.addEventListener('scroll', handleScroll, { passive: true });\n\n        const resizeObserver = new ResizeObserver(handleScroll);\n        resizeObserver.observe(scrollElement);\n\n        return () => {\n            scrollElement.removeEventListener('scroll', handleScroll);\n            resizeObserver.disconnect();\n        };\n    }, [enabled, getScrollElement, handleScroll]);\n\n    useEffect(() => {\n        if (!enabled) {\n            return;\n        }\n\n        setState(previousState => {\n            const visibleRange = calculateVisibleRange(previousState.scrollTop, previousState.viewportHeight);\n\n            return areVisibleRangesEqual(previousState.visibleRange, visibleRange)\n                ? previousState\n                : {\n                      ...previousState,\n                      visibleRange,\n                  };\n        });\n    }, [calculateVisibleRange, enabled, rows]);\n\n    const measureRow = useCallback(\n        (index: number, element: HTMLElement | null) => {\n            if (!element) {\n                return;\n            }\n\n            const rect = element.getBoundingClientRect();\n            const computedStyle = window.getComputedStyle(element);\n            const height =\n                rect.height +\n                Number.parseFloat(computedStyle.marginTop || '0') +\n                Number.parseFloat(computedStyle.marginBottom || '0');\n\n            if (height <= 0) {\n                return;\n            }\n\n            setState(previousState => {\n                if (previousState.itemHeights[index] === height) {\n                    return previousState;\n                }\n\n                const nextState = {\n                    ...previousState,\n                    itemHeights: {\n                        ...previousState.itemHeights,\n                        [index]: height,\n                    },\n                };\n\n                return {\n                    ...nextState,\n                    visibleRange: calculateVisibleRange(nextState.scrollTop, nextState.viewportHeight),\n                };\n            });\n        },\n        [calculateVisibleRange]\n    );\n\n    const virtualRows = useMemo<TableVirtualRow<RowType>[]>(\n        () =>\n            enabled\n                ? rows.slice(state.visibleRange.start, state.visibleRange.end).map((row, offset) => {\n                      const index = state.visibleRange.start + offset;\n\n                      return {\n                          index,\n                          row,\n                      };\n                  })\n                : [],\n        [enabled, rows, state.visibleRange.end, state.visibleRange.start]\n    );\n\n    const paddingTop = enabled ? getItemPosition(state.visibleRange.start) : 0;\n    const paddingBottom = enabled ? Math.max(0, getTotalHeight() - getItemPosition(state.visibleRange.end)) : 0;\n\n    return {\n        isVirtualized: enabled,\n        measureRow,\n        paddingBottom,\n        paddingTop,\n        virtualRows,\n    };\n};\n\nexport default useTableVirtualization;\n"],"names":["DEFAULT_ROW_HEIGHT","areVisibleRangesEqual","currentRange","nextRange","useTableVirtualization","options","enabled","overscan","rows","scrollContainer","viewportHeightFallback","state","setState","useState","getScrollElement","useCallback","getEstimatedRowHeight","measuredHeights","sum","height","getRowHeight","index","getItemPosition","position","currentIndex","getTotalHeight","totalHeight","calculateVisibleRange","scrollTop","viewportHeight","start","currentPosition","rowHeight","end","handleScroll","scrollElement","visibleRange","previousState","useEffect","resizeObserver","measureRow","element","rect","computedStyle","nextState","virtualRows","useMemo","row","offset","paddingTop","paddingBottom"],"mappings":"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"}
+{"version":3,"file":"useTableVirtualization.js","sources":["../../../../src/components/table/layout/useTableVirtualization.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport useResizeObserver from '../../../useResizeObserver';\n\ntype TableVirtualScrollContainer = {\n    view?: HTMLDivElement | null;\n};\n\ntype TableVirtualRow<RowType> = {\n    index: number;\n    row: RowType;\n};\n\ntype UseTableVirtualizationOptions<RowType> = {\n    enabled: boolean;\n    overscan: number;\n    rows: RowType[];\n    scrollContainer: TableVirtualScrollContainer | null;\n    viewportHeightFallback?: number;\n};\n\ntype TableVirtualizationState = {\n    itemHeights: Record<number, number>;\n    scrollTop: number;\n    viewportHeight: number;\n    visibleRange: {\n        start: number;\n        end: number;\n    };\n};\n\nconst DEFAULT_ROW_HEIGHT = 50;\n\nconst areVisibleRangesEqual = (\n    currentRange: TableVirtualizationState['visibleRange'],\n    nextRange: TableVirtualizationState['visibleRange']\n) => currentRange.start === nextRange.start && currentRange.end === nextRange.end;\n\nconst useTableVirtualization = <RowType>(options: UseTableVirtualizationOptions<RowType>) => {\n    const { enabled, overscan, rows, scrollContainer, viewportHeightFallback } = options;\n    const scrollElement = scrollContainer?.view ?? null;\n    const [, , { blockSize: observedViewportHeight }] = useResizeObserver(scrollElement);\n    const [state, setState] = useState<TableVirtualizationState>({\n        itemHeights: {},\n        scrollTop: 0,\n        viewportHeight: 0,\n        visibleRange: { start: 0, end: 10 },\n    });\n\n    const getScrollElement = useCallback(() => scrollElement, [scrollElement]);\n\n    const getEstimatedRowHeight = useCallback(() => {\n        const measuredHeights = Object.values(state.itemHeights);\n\n        if (measuredHeights.length === 0) {\n            return DEFAULT_ROW_HEIGHT;\n        }\n\n        return measuredHeights.reduce((sum, height) => sum + height, 0) / measuredHeights.length;\n    }, [state.itemHeights]);\n\n    const getRowHeight = useCallback(\n        (index: number) => state.itemHeights[index] ?? getEstimatedRowHeight(),\n        [getEstimatedRowHeight, state.itemHeights]\n    );\n\n    const getItemPosition = useCallback(\n        (index: number) => {\n            let position = 0;\n\n            for (let currentIndex = 0; currentIndex < index; currentIndex++) {\n                position += getRowHeight(currentIndex);\n            }\n\n            return position;\n        },\n        [getRowHeight]\n    );\n\n    const getTotalHeight = useCallback(() => {\n        let totalHeight = 0;\n\n        for (let index = 0; index < rows.length; index++) {\n            totalHeight += getRowHeight(index);\n        }\n\n        return totalHeight;\n    }, [getRowHeight, rows.length]);\n\n    const calculateVisibleRange = useCallback(\n        (scrollTop: number, viewportHeight: number) => {\n            if (!enabled || rows.length === 0) {\n                return { start: 0, end: rows.length };\n            }\n\n            let start = 0;\n            let currentPosition = 0;\n\n            while (start < rows.length) {\n                const rowHeight = getRowHeight(start);\n\n                if (currentPosition + rowHeight > scrollTop - overscan * rowHeight) {\n                    break;\n                }\n\n                currentPosition += rowHeight;\n                start++;\n            }\n\n            let end = start;\n\n            while (end < rows.length) {\n                const rowHeight = getRowHeight(end);\n\n                if (currentPosition > scrollTop + viewportHeight + overscan * rowHeight) {\n                    break;\n                }\n\n                currentPosition += rowHeight;\n                end++;\n            }\n\n            return {\n                start: Math.max(0, start - overscan),\n                end: Math.min(rows.length, end + overscan),\n            };\n        },\n        [enabled, getRowHeight, overscan, rows.length]\n    );\n\n    const handleScroll = useCallback(() => {\n        const scrollElement = getScrollElement();\n\n        if (!scrollElement) {\n            return;\n        }\n\n        const viewportHeight = scrollElement.clientHeight || observedViewportHeight || viewportHeightFallback || 0;\n        const scrollTop = scrollElement.scrollTop;\n        const visibleRange = calculateVisibleRange(scrollTop, viewportHeight);\n\n        setState(previousState =>\n            previousState.scrollTop === scrollTop &&\n            previousState.viewportHeight === viewportHeight &&\n            areVisibleRangesEqual(previousState.visibleRange, visibleRange)\n                ? previousState\n                : {\n                      ...previousState,\n                      scrollTop,\n                      viewportHeight,\n                      visibleRange,\n                  }\n        );\n    }, [calculateVisibleRange, getScrollElement, observedViewportHeight, viewportHeightFallback]);\n\n    useEffect(() => {\n        if (!enabled) {\n            return;\n        }\n\n        if (!scrollElement) {\n            return;\n        }\n\n        handleScroll();\n        scrollElement.addEventListener('scroll', handleScroll, { passive: true });\n\n        return () => {\n            scrollElement.removeEventListener('scroll', handleScroll);\n        };\n    }, [enabled, handleScroll, scrollElement]);\n\n    useEffect(() => {\n        if (!enabled) {\n            return;\n        }\n\n        setState(previousState => {\n            const visibleRange = calculateVisibleRange(previousState.scrollTop, previousState.viewportHeight);\n\n            return areVisibleRangesEqual(previousState.visibleRange, visibleRange)\n                ? previousState\n                : {\n                      ...previousState,\n                      visibleRange,\n                  };\n        });\n    }, [calculateVisibleRange, enabled, rows]);\n\n    const measureRow = useCallback(\n        (index: number, element: HTMLElement | null) => {\n            if (!element) {\n                return;\n            }\n\n            const rect = element.getBoundingClientRect();\n            const computedStyle = window.getComputedStyle(element);\n            const height =\n                rect.height +\n                Number.parseFloat(computedStyle.marginTop || '0') +\n                Number.parseFloat(computedStyle.marginBottom || '0');\n\n            if (height <= 0) {\n                return;\n            }\n\n            setState(previousState => {\n                if (previousState.itemHeights[index] === height) {\n                    return previousState;\n                }\n\n                const nextState = {\n                    ...previousState,\n                    itemHeights: {\n                        ...previousState.itemHeights,\n                        [index]: height,\n                    },\n                };\n\n                return {\n                    ...nextState,\n                    visibleRange: calculateVisibleRange(nextState.scrollTop, nextState.viewportHeight),\n                };\n            });\n        },\n        [calculateVisibleRange]\n    );\n\n    const virtualRows = useMemo<TableVirtualRow<RowType>[]>(\n        () =>\n            enabled\n                ? rows.slice(state.visibleRange.start, state.visibleRange.end).map((row, offset) => {\n                      const index = state.visibleRange.start + offset;\n\n                      return {\n                          index,\n                          row,\n                      };\n                  })\n                : [],\n        [enabled, rows, state.visibleRange.end, state.visibleRange.start]\n    );\n\n    const paddingTop = enabled ? getItemPosition(state.visibleRange.start) : 0;\n    const paddingBottom = enabled ? Math.max(0, getTotalHeight() - getItemPosition(state.visibleRange.end)) : 0;\n\n    return {\n        isVirtualized: enabled,\n        measureRow,\n        paddingBottom,\n        paddingTop,\n        virtualRows,\n    };\n};\n\nexport default useTableVirtualization;\n"],"names":["DEFAULT_ROW_HEIGHT","areVisibleRangesEqual","currentRange","nextRange","useTableVirtualization","options","enabled","overscan","rows","scrollContainer","viewportHeightFallback","scrollElement","observedViewportHeight","useResizeObserver","state","setState","useState","getScrollElement","useCallback","getEstimatedRowHeight","measuredHeights","sum","height","getRowHeight","index","getItemPosition","position","currentIndex","getTotalHeight","totalHeight","calculateVisibleRange","scrollTop","viewportHeight","start","currentPosition","rowHeight","end","handleScroll","visibleRange","previousState","useEffect","measureRow","element","rect","computedStyle","nextState","virtualRows","useMemo","row","offset","paddingTop","paddingBottom"],"mappings":"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"}

package/components/table/model/resolveResponsiveViewType.d.ts

@@ -0,0 +1,2 @@
+import { TableResponsiveBreakpoint, TableViewType } from '../Table.types';
+export declare const resolveResponsiveViewType: (viewType: TableViewType, wrapperWidth: number | undefined, responsiveBreakpoint: TableResponsiveBreakpoint | undefined) => TableViewType;

package/components/table/model/resolveResponsiveViewType.js

@@ -0,0 +1,27 @@
+import s from "../shared/parsePixelSize.js";
+const r = (i) => {
+  if (typeof i == "number")
+    return Number.isFinite(i) ? i : void 0;
+  const t = i.trim();
+  if (!t || typeof window > "u" || typeof document > "u")
+    return;
+  const o = s(t);
+  if (o !== void 0)
+    return o;
+  const e = document.createElement("div");
+  e.style.position = "absolute", e.style.visibility = "hidden", e.style.pointerEvents = "none", e.style.boxSizing = "border-box", e.style.width = t, e.style.height = "0", e.style.padding = "0", e.style.border = "0", document.body.appendChild(e);
+  const n = e.getBoundingClientRect().width;
+  return e.remove(), Number.isFinite(n) ? n : void 0;
+}, d = (i) => i ? {
+  multiCardsMaxWidth: i.cards !== void 0 ? r(i.cards) : void 0,
+  singleCardMaxWidth: i.list !== void 0 ? r(i.list) : void 0
+} : {}, m = (i, t, o) => {
+  if (t === void 0)
+    return i;
+  const { multiCardsMaxWidth: e, singleCardMaxWidth: n } = d(o);
+  return n !== void 0 && t < n ? "SINGLE_CARD" : e !== void 0 && t < e ? "MULTI_CARDS" : i;
+};
+export {
+  m as resolveResponsiveViewType
+};
+//# sourceMappingURL=resolveResponsiveViewType.js.map

package/components/table/model/resolveResponsiveViewType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveResponsiveViewType.js","sources":["../../../../src/components/table/model/resolveResponsiveViewType.ts"],"sourcesContent":["import type { TableResponsiveBreakpoint, TableViewType } from '../Table.types';\nimport parsePixelSize from '../shared/parsePixelSize';\n\nconst resolveResponsiveBreakpointPx = (value: number | string): number | undefined => {\n    if (typeof value === 'number') {\n        return Number.isFinite(value) ? value : undefined;\n    }\n\n    const trimmedValue = value.trim();\n\n    if (!trimmedValue) {\n        return;\n    }\n\n    if (typeof window === 'undefined' || typeof document === 'undefined') {\n        return;\n    }\n    const pixelSize = parsePixelSize(trimmedValue);\n\n    if (pixelSize !== undefined) {\n        return pixelSize;\n    }\n\n    const measurementElement = document.createElement('div');\n    measurementElement.style.position = 'absolute';\n    measurementElement.style.visibility = 'hidden';\n    measurementElement.style.pointerEvents = 'none';\n    measurementElement.style.boxSizing = 'border-box';\n    measurementElement.style.width = trimmedValue;\n    measurementElement.style.height = '0';\n    measurementElement.style.padding = '0';\n    measurementElement.style.border = '0';\n    document.body.appendChild(measurementElement);\n\n    const resolvedWidth = measurementElement.getBoundingClientRect().width;\n\n    measurementElement.remove();\n\n    return Number.isFinite(resolvedWidth) ? resolvedWidth : undefined;\n};\n\nconst resolveResponsiveBreakpointsPx = (value: TableResponsiveBreakpoint | undefined) => {\n    if (!value) {\n        return {};\n    }\n\n    return {\n        multiCardsMaxWidth: value.cards !== undefined ? resolveResponsiveBreakpointPx(value.cards) : undefined,\n        singleCardMaxWidth: value.list !== undefined ? resolveResponsiveBreakpointPx(value.list) : undefined,\n    };\n};\n\nexport const resolveResponsiveViewType = (\n    viewType: TableViewType,\n    wrapperWidth: number | undefined,\n    responsiveBreakpoint: TableResponsiveBreakpoint | undefined\n): TableViewType => {\n    if (viewType !== 'TABLE' || wrapperWidth === undefined) {\n        return viewType;\n    }\n\n    const { multiCardsMaxWidth, singleCardMaxWidth } = resolveResponsiveBreakpointsPx(responsiveBreakpoint);\n\n    if (singleCardMaxWidth !== undefined && wrapperWidth < singleCardMaxWidth) {\n        return 'SINGLE_CARD';\n    }\n\n    if (multiCardsMaxWidth !== undefined && wrapperWidth < multiCardsMaxWidth) {\n        return 'MULTI_CARDS';\n    }\n\n    return viewType;\n};\n"],"names":["resolveResponsiveBreakpointPx","value","trimmedValue","pixelSize","parsePixelSize","measurementElement","resolvedWidth","resolveResponsiveBreakpointsPx","resolveResponsiveViewType","viewType","wrapperWidth","responsiveBreakpoint","multiCardsMaxWidth","singleCardMaxWidth"],"mappings":";AAGA,MAAMA,IAAgC,CAACC,MAA+C;AAClF,MAAI,OAAOA,KAAU;AACjB,WAAO,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAG5C,QAAMC,IAAeD,EAAM,KAAA;AAM3B,MAJI,CAACC,KAID,OAAO,SAAW,OAAe,OAAO,WAAa;AACrD;AAEJ,QAAMC,IAAYC,EAAeF,CAAY;AAE7C,MAAIC,MAAc;AACd,WAAOA;AAGX,QAAME,IAAqB,SAAS,cAAc,KAAK;AACvD,EAAAA,EAAmB,MAAM,WAAW,YACpCA,EAAmB,MAAM,aAAa,UACtCA,EAAmB,MAAM,gBAAgB,QACzCA,EAAmB,MAAM,YAAY,cACrCA,EAAmB,MAAM,QAAQH,GACjCG,EAAmB,MAAM,SAAS,KAClCA,EAAmB,MAAM,UAAU,KACnCA,EAAmB,MAAM,SAAS,KAClC,SAAS,KAAK,YAAYA,CAAkB;AAE5C,QAAMC,IAAgBD,EAAmB,sBAAA,EAAwB;AAEjE,SAAAA,EAAmB,OAAA,GAEZ,OAAO,SAASC,CAAa,IAAIA,IAAgB;AAC5D,GAEMC,IAAiC,CAACN,MAC/BA,IAIE;AAAA,EACH,oBAAoBA,EAAM,UAAU,SAAYD,EAA8BC,EAAM,KAAK,IAAI;AAAA,EAC7F,oBAAoBA,EAAM,SAAS,SAAYD,EAA8BC,EAAM,IAAI,IAAI;AAAA,IALpF,CAAA,GASFO,IAA4B,CACrCC,GACAC,GACAC,MACgB;AAChB,MAA4BD,MAAiB;AACzC,WAAOD;AAGX,QAAM,EAAE,oBAAAG,GAAoB,oBAAAC,MAAuBN,EAA+BI,CAAoB;AAEtG,SAAIE,MAAuB,UAAaH,IAAeG,IAC5C,gBAGPD,MAAuB,UAAaF,IAAeE,IAC5C,gBAGJH;AACX;"}

package/components/table/render/header/TableHeaderSelectionCell.d.ts

@@ -2,6 +2,7 @@ type TableHeaderSelectionCellProps = {
     isAllSelected?: boolean;
     isSomeRowsSelected?: boolean;
     onToggleAllSelection?: () => void;
+    disabled?: boolean;
     rowCount: number;
     selectionHeaderContent?: React.ReactNode;
 };

package/components/table/render/header/TableHeaderSelectionCell.js

@@ -1,31 +1,32 @@
 import { jsx as o } from "react/jsx-runtime";
-import c from "../../../checkbox/Checkbox.js";
-import s from "../../../../utils/classNames.js";
-import { resolveAriaSpan as d } from "../../shared/resolveTableAria.js";
-const h = (a) => {
-  const { isAllSelected: l, isSomeRowsSelected: r, onToggleAllSelection: i, rowCount: n, selectionHeaderContent: t } = a;
+import s from "../../../checkbox/Checkbox.js";
+import d from "../../../../utils/classNames.js";
+import { resolveAriaSpan as m } from "../../shared/resolveTableAria.js";
+const C = (t) => {
+  const { isAllSelected: l, isSomeRowsSelected: r, onToggleAllSelection: i, disabled: c, rowCount: a, selectionHeaderContent: n } = t;
   return /* @__PURE__ */ o(
     "div",
     {
-      className: s(
+      className: d(
         "table-head-cell table-selection-cell table-align-center",
-        t && "table-selection-cell-custom-content"
+        n && "table-selection-cell-custom-content"
       ),
       role: "columnheader",
       "aria-colindex": 1,
       "aria-rowindex": 1,
-      "aria-rowspan": d(n),
-      style: { gridColumn: "1 / span 1", gridRow: `1 / span ${n}` },
+      "aria-rowspan": m(a),
+      style: { gridColumn: "1 / span 1", gridRow: `1 / span ${a}` },
       children: /* @__PURE__ */ o(
         "div",
         {
           className: "table-selection-control",
           onClick: (e) => e.stopPropagation(),
           onKeyDown: (e) => e.stopPropagation(),
-          children: t ?? /* @__PURE__ */ o(
-            c,
+          children: n ?? /* @__PURE__ */ o(
+            s,
             {
               checked: l,
+              disabled: c,
               indeterminate: !l && !!r,
               onChange: () => i?.()
             }
@@ -36,6 +37,6 @@ const h = (a) => {
   );
 };
 export {
-  h as default
+  C as default
 };
 //# sourceMappingURL=TableHeaderSelectionCell.js.map

package/components/table/render/header/TableHeaderSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderSelectionCell.js","sources":["../../../../../src/components/table/render/header/TableHeaderSelectionCell.tsx"],"sourcesContent":["import Checkbox from '../../../checkbox/Checkbox';\nimport classNames from '../../../../utils/classNames';\nimport { resolveAriaSpan } from '../../shared/resolveTableAria';\n\ntype TableHeaderSelectionCellProps = {\n    isAllSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    onToggleAllSelection?: () => void;\n    rowCount: number;\n    selectionHeaderContent?: React.ReactNode;\n};\n\nconst TableHeaderSelectionCell = (props: TableHeaderSelectionCellProps) => {\n    const { isAllSelected, isSomeRowsSelected, onToggleAllSelection, rowCount, selectionHeaderContent } = props;\n\n    return (\n        <div\n            className={classNames(\n                'table-head-cell table-selection-cell table-align-center',\n                selectionHeaderContent && 'table-selection-cell-custom-content'\n            )}\n            role='columnheader'\n            aria-colindex={1}\n            aria-rowindex={1}\n            aria-rowspan={resolveAriaSpan(rowCount)}\n            style={{ gridColumn: '1 / span 1', gridRow: `1 / span ${rowCount}` }}\n        >\n            <div\n                className='table-selection-control'\n                onClick={event => event.stopPropagation()}\n                onKeyDown={event => event.stopPropagation()}\n            >\n                {selectionHeaderContent ?? (\n                    <Checkbox\n                        checked={isAllSelected}\n                        indeterminate={!isAllSelected && !!isSomeRowsSelected}\n                        onChange={() => onToggleAllSelection?.()}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderSelectionCell;\n"],"names":["TableHeaderSelectionCell","props","isAllSelected","isSomeRowsSelected","onToggleAllSelection","rowCount","selectionHeaderContent","jsx","classNames","resolveAriaSpan","event","Checkbox"],"mappings":";;;;AAYA,MAAMA,IAA2B,CAACC,MAAyC;AACvE,QAAM,EAAE,eAAAC,GAAe,oBAAAC,GAAoB,sBAAAC,GAAsB,UAAAC,GAAU,wBAAAC,MAA2BL;AAEtG,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAF,KAA0B;AAAA,MAAA;AAAA,MAE9B,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,gBAAcG,EAAgBJ,CAAQ;AAAA,MACtC,OAAO,EAAE,YAAY,cAAc,SAAS,YAAYA,CAAQ,GAAA;AAAA,MAEhE,UAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAAS,CAAAG,MAASA,EAAM,gBAAA;AAAA,UACxB,WAAW,CAAAA,MAASA,EAAM,gBAAA;AAAA,UAEzB,UAAAJ,KACG,gBAAAC;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,SAAST;AAAA,cACT,eAAe,CAACA,KAAiB,CAAC,CAACC;AAAA,cACnC,UAAU,MAAMC,IAAA;AAAA,YAAuB;AAAA,UAAA;AAAA,QAC3C;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TableHeaderSelectionCell.js","sources":["../../../../../src/components/table/render/header/TableHeaderSelectionCell.tsx"],"sourcesContent":["import Checkbox from '../../../checkbox/Checkbox';\nimport classNames from '../../../../utils/classNames';\nimport { resolveAriaSpan } from '../../shared/resolveTableAria';\n\ntype TableHeaderSelectionCellProps = {\n    isAllSelected?: boolean;\n    isSomeRowsSelected?: boolean;\n    onToggleAllSelection?: () => void;\n    disabled?: boolean;\n    rowCount: number;\n    selectionHeaderContent?: React.ReactNode;\n};\n\nconst TableHeaderSelectionCell = (props: TableHeaderSelectionCellProps) => {\n    const { isAllSelected, isSomeRowsSelected, onToggleAllSelection, disabled, rowCount, selectionHeaderContent } =\n        props;\n\n    return (\n        <div\n            className={classNames(\n                'table-head-cell table-selection-cell table-align-center',\n                selectionHeaderContent && 'table-selection-cell-custom-content'\n            )}\n            role='columnheader'\n            aria-colindex={1}\n            aria-rowindex={1}\n            aria-rowspan={resolveAriaSpan(rowCount)}\n            style={{ gridColumn: '1 / span 1', gridRow: `1 / span ${rowCount}` }}\n        >\n            <div\n                className='table-selection-control'\n                onClick={event => event.stopPropagation()}\n                onKeyDown={event => event.stopPropagation()}\n            >\n                {selectionHeaderContent ?? (\n                    <Checkbox\n                        checked={isAllSelected}\n                        disabled={disabled}\n                        indeterminate={!isAllSelected && !!isSomeRowsSelected}\n                        onChange={() => onToggleAllSelection?.()}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableHeaderSelectionCell;\n"],"names":["TableHeaderSelectionCell","props","isAllSelected","isSomeRowsSelected","onToggleAllSelection","disabled","rowCount","selectionHeaderContent","jsx","classNames","resolveAriaSpan","event","Checkbox"],"mappings":";;;;AAaA,MAAMA,IAA2B,CAACC,MAAyC;AACvE,QAAM,EAAE,eAAAC,GAAe,oBAAAC,GAAoB,sBAAAC,GAAsB,UAAAC,GAAU,UAAAC,GAAU,wBAAAC,MACjFN;AAEJ,SACI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC;AAAA,QACP;AAAA,QACAF,KAA0B;AAAA,MAAA;AAAA,MAE9B,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,gBAAcG,EAAgBJ,CAAQ;AAAA,MACtC,OAAO,EAAE,YAAY,cAAc,SAAS,YAAYA,CAAQ,GAAA;AAAA,MAEhE,UAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,SAAS,CAAAG,MAASA,EAAM,gBAAA;AAAA,UACxB,WAAW,CAAAA,MAASA,EAAM,gBAAA;AAAA,UAEzB,UAAAJ,KACG,gBAAAC;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,SAASV;AAAA,cACT,UAAAG;AAAA,cACA,eAAe,CAACH,KAAiB,CAAC,CAACC;AAAA,cACnC,UAAU,MAAMC,IAAA;AAAA,YAAuB;AAAA,UAAA;AAAA,QAC3C;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;"}

package/components/table/runtime/useResponsiveResolvedViewType.d.ts

@@ -0,0 +1,23 @@
+import { TableResponsiveBreakpoint, TableViewType } from '../Table.types';
+type UseResponsiveResolvedViewTypeProps = {
+    onViewTypeChange?: (viewType: TableViewType) => void;
+    responsiveBreakpoint?: TableResponsiveBreakpoint;
+    viewType: TableViewType;
+    wrapperTableWidth?: string | number;
+    wrapperWidth?: number;
+};
+/**
+ * Resolves the effective table view when responsive breakpoints and manual view changes are both active.
+ *
+ * With `responsiveBreakpoint`, the table derives a responsive view bucket from the current rendered width:
+ * `TABLE`, `MULTI_CARDS`, or `SINGLE_CARD`.
+ *
+ * Manual view changes are intentionally sticky within the current responsive bucket. Example:
+ * when the width currently resolves to `MULTI_CARDS`, the user can still switch to `TABLE` manually.
+ * That manual choice stays active until resizing crosses into a different responsive bucket, at which point
+ * the hook clears the override and resolves the view from the current breakpoints again.
+ *
+ * Without `responsiveBreakpoint`, the hook simply returns the requested `viewType`.
+ */
+declare const useResponsiveResolvedViewType: (props: UseResponsiveResolvedViewTypeProps) => TableViewType;
+export default useResponsiveResolvedViewType;

package/components/table/runtime/useResponsiveResolvedViewType.js

@@ -0,0 +1,22 @@
+import { useRef as v, useEffect as c } from "react";
+import { resolveResponsiveViewType as w } from "../model/resolveResponsiveViewType.js";
+import y from "../shared/parsePixelSize.js";
+const h = (u) => {
+  const { onViewTypeChange: n, responsiveBreakpoint: p, viewType: r, wrapperTableWidth: a, wrapperWidth: d } = u, t = v(r), i = v(
+    void 0
+  ), e = p !== void 0, f = e ? y(a) ?? d : void 0, T = e && r !== t.current, o = e ? w("TABLE", f, p) : r;
+  e ? T && (i.current = {
+    responsiveViewType: o,
+    viewType: r
+  }) : i.current = void 0, e && i.current?.responsiveViewType !== o && (i.current = void 0);
+  const s = e ? i.current?.viewType ?? o : r;
+  return c(() => {
+    e && n?.(s);
+  }, [e, n, s]), c(() => {
+    t.current = r;
+  }, [r]), s;
+};
+export {
+  h as default
+};
+//# sourceMappingURL=useResponsiveResolvedViewType.js.map

package/components/table/runtime/useResponsiveResolvedViewType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveResolvedViewType.js","sources":["../../../../src/components/table/runtime/useResponsiveResolvedViewType.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { resolveResponsiveViewType } from '../model/resolveResponsiveViewType';\nimport parsePixelSize from '../shared/parsePixelSize';\nimport type { TableResponsiveBreakpoint, TableViewType } from '../Table.types';\n\ntype UseResponsiveResolvedViewTypeProps = {\n    onViewTypeChange?: (viewType: TableViewType) => void;\n    responsiveBreakpoint?: TableResponsiveBreakpoint;\n    viewType: TableViewType;\n    wrapperTableWidth?: string | number;\n    wrapperWidth?: number;\n};\n\n/**\n * Resolves the effective table view when responsive breakpoints and manual view changes are both active.\n *\n * With `responsiveBreakpoint`, the table derives a responsive view bucket from the current rendered width:\n * `TABLE`, `MULTI_CARDS`, or `SINGLE_CARD`.\n *\n * Manual view changes are intentionally sticky within the current responsive bucket. Example:\n * when the width currently resolves to `MULTI_CARDS`, the user can still switch to `TABLE` manually.\n * That manual choice stays active until resizing crosses into a different responsive bucket, at which point\n * the hook clears the override and resolves the view from the current breakpoints again.\n *\n * Without `responsiveBreakpoint`, the hook simply returns the requested `viewType`.\n */\nconst useResponsiveResolvedViewType = (props: UseResponsiveResolvedViewTypeProps): TableViewType => {\n    const { onViewTypeChange, responsiveBreakpoint, viewType, wrapperTableWidth, wrapperWidth } = props;\n\n    const previousPropViewTypeRef = useRef<TableViewType>(viewType);\n    const manualOverrideRef = useRef<{ responsiveViewType: TableViewType; viewType: TableViewType } | undefined>(\n        undefined\n    );\n\n    const hasResponsiveBreakpoint = responsiveBreakpoint !== undefined;\n    const responsiveTableWidth = hasResponsiveBreakpoint\n        ? (parsePixelSize(wrapperTableWidth) ?? wrapperWidth)\n        : undefined;\n    const hasRequestedViewTypeChange = hasResponsiveBreakpoint && viewType !== previousPropViewTypeRef.current;\n\n    const responsiveViewType = hasResponsiveBreakpoint\n        ? resolveResponsiveViewType('TABLE', responsiveTableWidth, responsiveBreakpoint)\n        : viewType;\n\n    if (!hasResponsiveBreakpoint) {\n        manualOverrideRef.current = undefined;\n    } else if (hasRequestedViewTypeChange) {\n        manualOverrideRef.current = {\n            responsiveViewType,\n            viewType,\n        };\n    }\n\n    if (hasResponsiveBreakpoint && manualOverrideRef.current?.responsiveViewType !== responsiveViewType) {\n        manualOverrideRef.current = undefined;\n    }\n\n    const resolvedViewType = hasResponsiveBreakpoint\n        ? (manualOverrideRef.current?.viewType ?? responsiveViewType)\n        : viewType;\n\n    useEffect(() => {\n        if (!hasResponsiveBreakpoint) {\n            return;\n        }\n\n        onViewTypeChange?.(resolvedViewType);\n    }, [hasResponsiveBreakpoint, onViewTypeChange, resolvedViewType]);\n\n    useEffect(() => {\n        previousPropViewTypeRef.current = viewType;\n    }, [viewType]);\n\n    return resolvedViewType;\n};\n\nexport default useResponsiveResolvedViewType;\n"],"names":["useResponsiveResolvedViewType","props","onViewTypeChange","responsiveBreakpoint","viewType","wrapperTableWidth","wrapperWidth","previousPropViewTypeRef","useRef","manualOverrideRef","hasResponsiveBreakpoint","responsiveTableWidth","parsePixelSize","hasRequestedViewTypeChange","responsiveViewType","resolveResponsiveViewType","resolvedViewType","useEffect"],"mappings":";;;AA2BA,MAAMA,IAAgC,CAACC,MAA6D;AAChG,QAAM,EAAE,kBAAAC,GAAkB,sBAAAC,GAAsB,UAAAC,GAAU,mBAAAC,GAAmB,cAAAC,MAAiBL,GAExFM,IAA0BC,EAAsBJ,CAAQ,GACxDK,IAAoBD;AAAA,IACtB;AAAA,EAAA,GAGEE,IAA0BP,MAAyB,QACnDQ,IAAuBD,IACtBE,EAAeP,CAAiB,KAAKC,IACtC,QACAO,IAA6BH,KAA2BN,MAAaG,EAAwB,SAE7FO,IAAqBJ,IACrBK,EAA0B,SAASJ,GAAsBR,CAAoB,IAC7EC;AAEN,EAAKM,IAEMG,MACPJ,EAAkB,UAAU;AAAA,IACxB,oBAAAK;AAAA,IACA,UAAAV;AAAA,EAAA,KAJJK,EAAkB,UAAU,QAQ5BC,KAA2BD,EAAkB,SAAS,uBAAuBK,MAC7EL,EAAkB,UAAU;AAGhC,QAAMO,IAAmBN,IAClBD,EAAkB,SAAS,YAAYK,IACxCV;AAEN,SAAAa,EAAU,MAAM;AACZ,IAAKP,KAILR,IAAmBc,CAAgB;AAAA,EACvC,GAAG,CAACN,GAAyBR,GAAkBc,CAAgB,CAAC,GAEhEC,EAAU,MAAM;AACZ,IAAAV,EAAwB,UAAUH;AAAA,EACtC,GAAG,CAACA,CAAQ,CAAC,GAENY;AACX;"}