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

package/components/table/layout/useTableBodyScrollBottom.js

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

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

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

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

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

package/components/table/layout/useTableLayout.js

@@ -1,56 +1,66 @@
-import { useMeasuredColumnMaxWidths as v } from "./useMeasuredColumnMaxWidths.js";
-import { MIN_COLUMN_WIDTH_PX as N } from "../tableSizing.constants.js";
-import { toCssSize as c, getColumnTrack as R } from "./columnSizing.js";
-import { useHorizontalSectionSync as z } from "./useHorizontalSectionSync.js";
-import H from "../../../hooks/useResizeObserver.js";
-const u = 50, L = (r) => {
+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 n = r.trim().match(/^(-?\d+(?:\.\d+)?)px$/);
-  if (n)
-    return Number(n[1]);
-}, I = (r) => {
-  const { bodyMaxHeight: n, cardsStyle: d, columns: a, showSelectionColumn: i, style: h } = r, [l, , { inlineSize: p }] = H(), t = a.map((e, o) => ({
-    column: e,
+  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 = p ?? l.current?.clientWidth, b = (i ? u : 0) + a.reduce((e, o) => {
+  })), s = f ?? c.current?.clientWidth, S = (i ? h : 0) + n.reduce((t, o) => {
     if (o.width === void 0)
-      return e + N;
-    const _ = L(c(o.width));
-    return e + (_ ?? 0);
-  }, 0), m = s !== void 0 && b > s, f = s !== void 0 ? `${s}px` : "100%", { handleBodyScroll: W, tableFooterRowRef: x, tableHeadRowRef: S } = z({
-    enabled: !!n
-  }), w = v({
-    columns: a,
+      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,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
+    tableFooterRowRef: M,
+    tableHeadRowRef: T
+  } = $({
+    enabled: !!a,
+    hasFooterCells: p
+  }), g = N({
+    columns: n,
     enabled: m,
-    tableWrapperRef: l
-  }), C = t.length > 0 ? [
-    i ? `${u}px` : void 0,
-    ...t.map(({ column: e }) => R(e, w[e.key]))
-  ].filter(Boolean).join(" ") : "minmax(0, 1fr)", M = t.length > 0 ? `"${[
+    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,
-    ...t.map(({ areaName: e }) => e)
-  ].filter(Boolean).join(" ")}"` : "none", T = c(d?.minWidth) ?? "280px", g = c(d?.maxWidth) ?? "1fr", y = {
-    ...h ?? {},
-    "--table-columns": C,
-    "--table-areas": M,
-    "--table-cards-min": T,
-    "--table-cards-max": g,
-    "--table-column-count": String(a.length + (i ? 1 : 0)),
-    "--table-width": f
+    ...e.map(({ areaName: t }) => t)
+  ].filter(Boolean).join(" ")}"` : "none", H = l(d?.minWidth) ?? "280px", O = l(d?.maxWidth) ?? "1fr", _ = {
+    ...b ?? {},
+    "--table-columns": y,
+    "--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
   };
   return {
-    columnsWithAreas: t,
-    handleBodyScroll: W,
+    columnsWithAreas: e,
+    handleBodyScroll: w,
+    hasHorizontalScrollEndOffset: x,
+    hasHorizontalScrollStartOffset: C,
     tableUseOverflow: m,
-    tableWrapperRef: l,
-    tableFooterRowRef: x,
-    tableHeadRowRef: S,
-    wrapperStyle: y
+    tableWrapperRef: c,
+    tableFooterRowRef: M,
+    tableHeadRowRef: T,
+    wrapperStyle: _
   };
 };
 export {
-  I as useTableLayout
+  k 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 } from '../TableCard';\nimport type { TableColumnDefinition, TableStyle } 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 Record<string, unknown>> = {\n    column: TableColumnDefinition<RowType>;\n    columnIndex: number;\n    areaName: string;\n};\n\ntype UseTableLayoutProps<RowType extends Record<string, unknown>> = {\n    bodyMaxHeight?: string;\n    cardsStyle?: TableCardsStyleSettings;\n    columns: TableColumnDefinition<RowType>[];\n    showSelectionColumn?: boolean;\n    style?: CSSProperties;\n};\n\nexport const useTableLayout = <RowType extends Record<string, unknown>>(props: UseTableLayoutProps<RowType>) => {\n    const { bodyMaxHeight, cardsStyle, columns, 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    const wrapperWidth = inlineSize ?? tableWrapperRef.current?.clientWidth;\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    const tableUseOverflow = wrapperWidth !== undefined && minWidthTotal > wrapperWidth;\n    const tableWidth = wrapperWidth !== undefined ? `${wrapperWidth}px` : '100%';\n\n    const { handleBodyScroll, tableFooterRowRef, tableHeadRowRef } = useHorizontalSectionSync({\n        enabled: !!bodyMaxHeight,\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: TableStyle = {\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-width': tableWidth,\n    };\n\n    return {\n        columnsWithAreas,\n        handleBodyScroll,\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","showSelectionColumn","style","tableWrapperRef","inlineSize","useResizeObserver","columnsWithAreas","column","columnIndex","wrapperWidth","minWidthTotal","totalWidth","MIN_COLUMN_WIDTH_PX","columnWidth","toCssSize","tableUseOverflow","tableWidth","handleBodyScroll","tableFooterRowRef","tableHeadRowRef","useHorizontalSectionSync","measuredColumnMaxWidths","useMeasuredColumnMaxWidths","gridTemplateColumns","getColumnTrack","gridTemplateAreas","areaName","cardsMinWidth","cardsMaxWidth","wrapperStyle"],"mappings":";;;;;AAUA,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,GAgBaC,IAAiB,CAA0CC,MAAwC;AAC5G,QAAM,EAAE,eAAAC,GAAe,YAAAC,GAAY,SAAAC,GAAS,qBAAAC,GAAqB,OAAAC,MAAUL,GACrE,CAACM,GAAA,EAAmB,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAEtCC,IAAmDN,EAAQ,IAAI,CAACO,GAAQC,OAAiB;AAAA,IAC3F,QAAAD;AAAA,IACA,aAAAC;AAAA,IACA,UAAU,aAAaA,IAAc,CAAC;AAAA,EAAA,EACxC,GACIC,IAAeL,KAAcD,EAAgB,SAAS,aACtDO,KACDT,IAAsBT,IAAkC,KACzDQ,EAAQ,OAAO,CAACW,GAAYJ,MAAW;AACnC,QAAIA,EAAO,UAAU;AACjB,aAAOI,IAAaC;AAGxB,UAAMC,IAAcpB,EAAeqB,EAAUP,EAAO,KAAK,CAAC;AAE1D,WAAOI,KAAcE,KAAe;AAAA,EACxC,GAAG,CAAC,GACFE,IAAmBN,MAAiB,UAAaC,IAAgBD,GACjEO,IAAaP,MAAiB,SAAY,GAAGA,CAAY,OAAO,QAEhE,EAAE,kBAAAQ,GAAkB,mBAAAC,GAAmB,iBAAAC,EAAA,IAAoBC,EAAyB;AAAA,IACtF,SAAS,CAAC,CAACtB;AAAA,EAAA,CACd,GACKuB,IAA0BC,EAA2B;AAAA,IACvD,SAAAtB;AAAA,IACA,SAASe;AAAA,IACT,iBAAAZ;AAAA,EAAA,CACH,GAEKoB,IACFjB,EAAiB,SAAS,IACpB;AAAA,IACIL,IAAsB,GAAGT,CAA+B,OAAO;AAAA,IAC/D,GAAGc,EAAiB,IAAI,CAAC,EAAE,QAAAC,EAAA,MAAaiB,EAAejB,GAAQc,EAAwBd,EAAO,GAAG,CAAC,CAAC;AAAA,EAAA,EAElG,OAAO,OAAO,EACd,KAAK,GAAG,IACb,kBAEJkB,IACFnB,EAAiB,SAAS,IACpB,IAAI;AAAA,IACAL,IAAsB,oBAAoB;AAAA,IAC1C,GAAGK,EAAiB,IAAI,CAAC,EAAE,UAAAoB,EAAA,MAAeA,CAAQ;AAAA,EAAA,EAEjD,OAAO,OAAO,EACd,KAAK,GAAG,CAAC,MACd,QAEJC,IAAgBb,EAAUf,GAAY,QAAQ,KAAK,SACnD6B,IAAgBd,EAAUf,GAAY,QAAQ,KAAK,OAEnD8B,IAA2B;AAAA,IAC7B,GAAI3B,KAAS,CAAA;AAAA,IACb,mBAAmBqB;AAAA,IACnB,iBAAiBE;AAAA,IACjB,qBAAqBE;AAAA,IACrB,qBAAqBC;AAAA,IACrB,wBAAwB,OAAO5B,EAAQ,UAAUC,IAAsB,IAAI,EAAE;AAAA,IAC7E,iBAAiBe;AAAA,EAAA;AAGrB,SAAO;AAAA,IACH,kBAAAV;AAAA,IACA,kBAAAW;AAAA,IACA,kBAAAF;AAAA,IACA,iBAAAZ;AAAA,IACA,mBAAAe;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 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;"}

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

@@ -1,18 +1,18 @@
-import { TableViewRow } from '../model/tableViewModel.types';
 type TableVirtualScrollContainer = {
     view?: HTMLDivElement | null;
 };
-type TableVirtualRow<RowType extends Record<string, unknown>> = {
+type TableVirtualRow<RowType> = {
     index: number;
-    row: TableViewRow<RowType>;
+    row: RowType;
 };
-type UseTableVirtualizationOptions<RowType extends Record<string, unknown>> = {
+type UseTableVirtualizationOptions<RowType> = {
     enabled: boolean;
     overscan: number;
-    rows: TableViewRow<RowType>[];
+    rows: RowType[];
     scrollContainer: TableVirtualScrollContainer | null;
+    viewportHeightFallback?: number;
 };
-declare const useTableVirtualization: <RowType extends Record<string, unknown>>(options: UseTableVirtualizationOptions<RowType>) => {
+declare const useTableVirtualization: <RowType>(options: UseTableVirtualizationOptions<RowType>) => {
     isVirtualized: boolean;
     measureRow: (index: number, element: HTMLElement | null) => void;
     paddingBottom: number;

package/components/table/layout/useTableVirtualization.js

@@ -1,17 +1,17 @@
-import { useState as O, useCallback as c, useEffect as p, useMemo as V } from "react";
-const k = 50, T = (m, i) => m.start === i.start && m.end === i.end, F = (m) => {
-  const { enabled: i, overscan: d, rows: r, scrollContainer: v } = m, [l, H] = O({
+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({
     itemHeights: {},
     scrollTop: 0,
     viewportHeight: 0,
     visibleRange: { start: 0, end: 10 }
-  }), b = c(() => v?.view ?? null, [v]), w = c(() => {
+  }), b = c(() => v?.view ?? null, [v]), f = c(() => {
     const e = Object.values(l.itemHeights);
-    return e.length === 0 ? k : e.reduce((t, n) => t + n, 0) / e.length;
+    return e.length === 0 ? V : e.reduce((t, n) => t + n, 0) / e.length;
   }, [l.itemHeights]), g = c(
-    (e) => l.itemHeights[e] ?? w(),
-    [w, l.itemHeights]
-  ), f = c(
+    (e) => l.itemHeights[e] ?? f(),
+    [f, l.itemHeights]
+  ), p = c(
     (e) => {
       let t = 0;
       for (let n = 0; n < e; n++)
@@ -19,7 +19,7 @@ const k = 50, T = (m, i) => m.start === i.start && m.end === i.end, F = (m) => {
       return t;
     },
     [g]
-  ), E = c(() => {
+  ), x = c(() => {
     let e = 0;
     for (let t = 0; t < r.length; t++)
       e += g(t);
@@ -52,17 +52,17 @@ const k = 50, T = (m, i) => m.start === i.start && m.end === i.end, F = (m) => {
     const e = b();
     if (!e)
       return;
-    const t = e.clientHeight, n = e.scrollTop, a = h(n, t);
+    const t = e.clientHeight || w || 0, n = e.scrollTop, a = h(n, t);
     H(
-      (s) => s.scrollTop === n && s.viewportHeight === t && T(s.visibleRange, a) ? s : {
+      (s) => s.scrollTop === n && s.viewportHeight === t && E(s.visibleRange, a) ? s : {
         ...s,
         scrollTop: n,
         viewportHeight: t,
         visibleRange: a
       }
     );
-  }, [h, b]);
-  p(() => {
+  }, [h, b, w]);
+  T(() => {
     if (!i)
       return;
     const e = b();
@@ -73,21 +73,21 @@ const k = 50, T = (m, i) => m.start === i.start && m.end === i.end, F = (m) => {
     return t.observe(e), () => {
       e.removeEventListener("scroll", u), t.disconnect();
     };
-  }, [i, b, u]), p(() => {
+  }, [i, b, u]), T(() => {
     i && H((e) => {
       const t = h(e.scrollTop, e.viewportHeight);
-      return T(e.visibleRange, t) ? e : {
+      return E(e.visibleRange, t) ? e : {
         ...e,
         visibleRange: t
       };
     });
   }, [h, i, r]);
-  const x = c(
+  const k = c(
     (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");
-      H((o) => {
+      s <= 0 || H((o) => {
         if (o.itemHeights[e] === s)
           return o;
         const R = {
@@ -104,22 +104,22 @@ const k = 50, T = (m, i) => m.start === i.start && m.end === i.end, F = (m) => {
       });
     },
     [h]
-  ), z = V(
+  ), z = O(
     () => 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 ? f(l.visibleRange.start) : 0, M = i ? Math.max(0, E() - f(l.visibleRange.end)) : 0;
+  ), C = i ? p(l.visibleRange.start) : 0, F = i ? Math.max(0, x() - p(l.visibleRange.end)) : 0;
   return {
     isVirtualized: i,
-    measureRow: x,
-    paddingBottom: M,
+    measureRow: k,
+    paddingBottom: F,
     paddingTop: C,
     virtualRows: z
   };
 };
 export {
-  F as default
+  I 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\nimport type { TableViewRow } from '../model/tableViewModel.types';\n\ntype TableVirtualScrollContainer = {\n    view?: HTMLDivElement | null;\n};\n\ntype TableVirtualRow<RowType extends Record<string, unknown>> = {\n    index: number;\n    row: TableViewRow<RowType>;\n};\n\ntype UseTableVirtualizationOptions<RowType extends Record<string, unknown>> = {\n    enabled: boolean;\n    overscan: number;\n    rows: TableViewRow<RowType>[];\n    scrollContainer: TableVirtualScrollContainer | null;\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    left: TableVirtualizationState['visibleRange'],\n    right: TableVirtualizationState['visibleRange']\n) => left.start === right.start && left.end === right.end;\n\nconst useTableVirtualization = <RowType extends Record<string, unknown>>(\n    options: UseTableVirtualizationOptions<RowType>\n) => {\n    const { enabled, overscan, rows, scrollContainer } = 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;\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]);\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            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","left","right","useTableVirtualization","options","enabled","overscan","rows","scrollContainer","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\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":";AA6BA,MAAMA,IAAqB,IAErBC,IAAwB,CAC1BC,GACAC,MACCD,EAAa,UAAUC,EAAU,SAASD,EAAa,QAAQC,EAAU,KAExEC,IAAyB,CAAUC,MAAoD;AACzF,QAAM,EAAE,SAAAC,GAAS,UAAAC,GAAU,MAAAC,GAAM,iBAAAC,GAAiB,wBAAAC,MAA2BL,GACvE,CAACM,GAAOC,CAAQ,IAAIC,EAAmC;AAAA,IACzD,aAAa,CAAA;AAAA,IACb,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,cAAc,EAAE,OAAO,GAAG,KAAK,GAAA;AAAA,EAAG,CACrC,GAEKC,IAAmBC,EAAY,MAAMN,GAAiB,QAAQ,MAAM,CAACA,CAAe,CAAC,GAErFO,IAAwBD,EAAY,MAAM;AAC5C,UAAME,IAAkB,OAAO,OAAON,EAAM,WAAW;AAEvD,WAAIM,EAAgB,WAAW,IACpBjB,IAGJiB,EAAgB,OAAO,CAACC,GAAKC,MAAWD,IAAMC,GAAQ,CAAC,IAAIF,EAAgB;AAAA,EACtF,GAAG,CAACN,EAAM,WAAW,CAAC,GAEhBS,IAAeL;AAAA,IACjB,CAACM,MAAkBV,EAAM,YAAYU,CAAK,KAAKL,EAAA;AAAA,IAC/C,CAACA,GAAuBL,EAAM,WAAW;AAAA,EAAA,GAGvCW,IAAkBP;AAAA,IACpB,CAACM,MAAkB;AACf,UAAIE,IAAW;AAEf,eAASC,IAAe,GAAGA,IAAeH,GAAOG;AAC7C,QAAAD,KAAYH,EAAaI,CAAY;AAGzC,aAAOD;AAAA,IACX;AAAA,IACA,CAACH,CAAY;AAAA,EAAA,GAGXK,IAAiBV,EAAY,MAAM;AACrC,QAAIW,IAAc;AAElB,aAASL,IAAQ,GAAGA,IAAQb,EAAK,QAAQa;AACrC,MAAAK,KAAeN,EAAaC,CAAK;AAGrC,WAAOK;AAAA,EACX,GAAG,CAACN,GAAcZ,EAAK,MAAM,CAAC,GAExBmB,IAAwBZ;AAAA,IAC1B,CAACa,GAAmBC,MAA2B;AAC3C,UAAI,CAACvB,KAAWE,EAAK,WAAW;AAC5B,eAAO,EAAE,OAAO,GAAG,KAAKA,EAAK,OAAA;AAGjC,UAAIsB,IAAQ,GACRC,IAAkB;AAEtB,aAAOD,IAAQtB,EAAK,UAAQ;AACxB,cAAMwB,IAAYZ,EAAaU,CAAK;AAEpC,YAAIC,IAAkBC,IAAYJ,IAAYrB,IAAWyB;AACrD;AAGJ,QAAAD,KAAmBC,GACnBF;AAAA,MACJ;AAEA,UAAIG,IAAMH;AAEV,aAAOG,IAAMzB,EAAK,UAAQ;AACtB,cAAMwB,IAAYZ,EAAaa,CAAG;AAElC,YAAIF,IAAkBH,IAAYC,IAAiBtB,IAAWyB;AAC1D;AAGJ,QAAAD,KAAmBC,GACnBC;AAAA,MACJ;AAEA,aAAO;AAAA,QACH,OAAO,KAAK,IAAI,GAAGH,IAAQvB,CAAQ;AAAA,QACnC,KAAK,KAAK,IAAIC,EAAK,QAAQyB,IAAM1B,CAAQ;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,CAACD,GAASc,GAAcb,GAAUC,EAAK,MAAM;AAAA,EAAA,GAG3C0B,IAAenB,EAAY,MAAM;AACnC,UAAMoB,IAAgBrB,EAAA;AAEtB,QAAI,CAACqB;AACD;AAGJ,UAAMN,IAAiBM,EAAc,gBAAgBzB,KAA0B,GACzEkB,IAAYO,EAAc,WAC1BC,IAAeT,EAAsBC,GAAWC,CAAc;AAEpE,IAAAjB;AAAA,MAAS,CAAAyB,MACLA,EAAc,cAAcT,KAC5BS,EAAc,mBAAmBR,KACjC5B,EAAsBoC,EAAc,cAAcD,CAAY,IACxDC,IACA;AAAA,QACI,GAAGA;AAAA,QACH,WAAAT;AAAA,QACA,gBAAAC;AAAA,QACA,cAAAO;AAAA,MAAA;AAAA,IACJ;AAAA,EAEd,GAAG,CAACT,GAAuBb,GAAkBJ,CAAsB,CAAC;AAEpE,EAAA4B,EAAU,MAAM;AACZ,QAAI,CAAChC;AACD;AAGJ,UAAM6B,IAAgBrB,EAAA;AAEtB,QAAI,CAACqB;AACD;AAGJ,IAAAD,EAAA,GACAC,EAAc,iBAAiB,UAAUD,GAAc,EAAE,SAAS,IAAM;AAExE,UAAMK,IAAiB,IAAI,eAAeL,CAAY;AACtD,WAAAK,EAAe,QAAQJ,CAAa,GAE7B,MAAM;AACT,MAAAA,EAAc,oBAAoB,UAAUD,CAAY,GACxDK,EAAe,WAAA;AAAA,IACnB;AAAA,EACJ,GAAG,CAACjC,GAASQ,GAAkBoB,CAAY,CAAC,GAE5CI,EAAU,MAAM;AACZ,IAAKhC,KAILM,EAAS,CAAAyB,MAAiB;AACtB,YAAMD,IAAeT,EAAsBU,EAAc,WAAWA,EAAc,cAAc;AAEhG,aAAOpC,EAAsBoC,EAAc,cAAcD,CAAY,IAC/DC,IACA;AAAA,QACI,GAAGA;AAAA,QACH,cAAAD;AAAA,MAAA;AAAA,IAEd,CAAC;AAAA,EACL,GAAG,CAACT,GAAuBrB,GAASE,CAAI,CAAC;AAEzC,QAAMgC,IAAazB;AAAA,IACf,CAACM,GAAeoB,MAAgC;AAC5C,UAAI,CAACA;AACD;AAGJ,YAAMC,IAAOD,EAAQ,sBAAA,GACfE,IAAgB,OAAO,iBAAiBF,CAAO,GAC/CtB,IACFuB,EAAK,SACL,OAAO,WAAWC,EAAc,aAAa,GAAG,IAChD,OAAO,WAAWA,EAAc,gBAAgB,GAAG;AAEvD,MAAIxB,KAAU,KAIdP,EAAS,CAAAyB,MAAiB;AACtB,YAAIA,EAAc,YAAYhB,CAAK,MAAMF;AACrC,iBAAOkB;AAGX,cAAMO,IAAY;AAAA,UACd,GAAGP;AAAA,UACH,aAAa;AAAA,YACT,GAAGA,EAAc;AAAA,YACjB,CAAChB,CAAK,GAAGF;AAAA,UAAA;AAAA,QACb;AAGJ,eAAO;AAAA,UACH,GAAGyB;AAAA,UACH,cAAcjB,EAAsBiB,EAAU,WAAWA,EAAU,cAAc;AAAA,QAAA;AAAA,MAEzF,CAAC;AAAA,IACL;AAAA,IACA,CAACjB,CAAqB;AAAA,EAAA,GAGpBkB,IAAcC;AAAA,IAChB,MACIxC,IACME,EAAK,MAAMG,EAAM,aAAa,OAAOA,EAAM,aAAa,GAAG,EAAE,IAAI,CAACoC,GAAKC,OAG5D;AAAA,MACH,OAHUrC,EAAM,aAAa,QAAQqC;AAAA,MAIrC,KAAAD;AAAA,IAAA,EAEP,IACD,CAAA;AAAA,IACV,CAACzC,GAASE,GAAMG,EAAM,aAAa,KAAKA,EAAM,aAAa,KAAK;AAAA,EAAA,GAG9DsC,IAAa3C,IAAUgB,EAAgBX,EAAM,aAAa,KAAK,IAAI,GACnEuC,IAAgB5C,IAAU,KAAK,IAAI,GAAGmB,MAAmBH,EAAgBX,EAAM,aAAa,GAAG,CAAC,IAAI;AAE1G,SAAO;AAAA,IACH,eAAeL;AAAA,IACf,YAAAkC;AAAA,IACA,eAAAU;AAAA,IACA,YAAAD;AAAA,IACA,aAAAJ;AAAA,EAAA;AAER;"}

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

@@ -1,2 +1,3 @@
-export declare const resolveRowClassName: <RowType extends Record<string, unknown>>(rowClassName: string | ((row: RowType, rowIndex: number) => string) | undefined, row: RowType, rowIndex: number) => string | undefined;
-export declare const resolveRowKey: <RowType extends Record<string, unknown>>(row: RowType, rowIndex: number, rowKey: keyof RowType | ((row: RowType, rowIndex: number) => string | number) | undefined) => string | number;
+import { TableRowData } from '../Table.types';
+export declare const resolveRowClassName: <RowType extends TableRowData>(rowClassName: string | ((row: RowType, rowIndex: number) => string) | undefined, row: RowType, rowIndex: number) => string | undefined;
+export declare const resolveRowKey: <RowType extends TableRowData>(row: RowType, rowIndex: number, rowKey: keyof RowType | ((row: RowType, rowIndex: number) => string | number) | undefined) => string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"resolveRowMeta.js","sources":["../../../../src/components/table/model/resolveRowMeta.ts"],"sourcesContent":["export const resolveRowClassName = <RowType extends Record<string, unknown>>(\n    rowClassName: string | ((row: RowType, rowIndex: number) => string) | undefined,\n    row: RowType,\n    rowIndex: number\n) => {\n    if (typeof rowClassName === 'function') {\n        return rowClassName(row, rowIndex);\n    }\n\n    return rowClassName;\n};\n\nexport const resolveRowKey = <RowType extends Record<string, unknown>>(\n    row: RowType,\n    rowIndex: number,\n    rowKey: keyof RowType | ((row: RowType, rowIndex: number) => string | number) | undefined\n) => {\n    if (typeof rowKey === 'function') {\n        return rowKey(row, rowIndex);\n    }\n\n    if (rowKey) {\n        const rowValue = row[rowKey];\n        if (typeof rowValue === 'string' || typeof rowValue === 'number') {\n            return rowValue;\n        }\n    }\n\n    return rowIndex;\n};\n"],"names":["resolveRowClassName","rowClassName","row","rowIndex","resolveRowKey","rowKey","rowValue"],"mappings":"AAAO,MAAMA,IAAsB,CAC/BC,GACAC,GACAC,MAEI,OAAOF,KAAiB,aACjBA,EAAaC,GAAKC,CAAQ,IAG9BF,GAGEG,IAAgB,CACzBF,GACAC,GACAE,MACC;AACD,MAAI,OAAOA,KAAW;AAClB,WAAOA,EAAOH,GAAKC,CAAQ;AAG/B,MAAIE,GAAQ;AACR,UAAMC,IAAWJ,EAAIG,CAAM;AAC3B,QAAI,OAAOC,KAAa,YAAY,OAAOA,KAAa;AACpD,aAAOA;AAAA,EAEf;AAEA,SAAOH;AACX;"}
+{"version":3,"file":"resolveRowMeta.js","sources":["../../../../src/components/table/model/resolveRowMeta.ts"],"sourcesContent":["import type { TableRowData } from '../Table.types';\n\nexport const resolveRowClassName = <RowType extends TableRowData>(\n    rowClassName: string | ((row: RowType, rowIndex: number) => string) | undefined,\n    row: RowType,\n    rowIndex: number\n) => {\n    if (typeof rowClassName === 'function') {\n        return rowClassName(row, rowIndex);\n    }\n\n    return rowClassName;\n};\n\nexport const resolveRowKey = <RowType extends TableRowData>(\n    row: RowType,\n    rowIndex: number,\n    rowKey: keyof RowType | ((row: RowType, rowIndex: number) => string | number) | undefined\n) => {\n    if (typeof rowKey === 'function') {\n        return rowKey(row, rowIndex);\n    }\n\n    if (rowKey) {\n        const rowValue = row[rowKey];\n        if (typeof rowValue === 'string' || typeof rowValue === 'number') {\n            return rowValue;\n        }\n    }\n\n    return rowIndex;\n};\n"],"names":["resolveRowClassName","rowClassName","row","rowIndex","resolveRowKey","rowKey","rowValue"],"mappings":"AAEO,MAAMA,IAAsB,CAC/BC,GACAC,GACAC,MAEI,OAAOF,KAAiB,aACjBA,EAAaC,GAAKC,CAAQ,IAG9BF,GAGEG,IAAgB,CACzBF,GACAC,GACAE,MACC;AACD,MAAI,OAAOA,KAAW;AAClB,WAAOA,EAAOH,GAAKC,CAAQ;AAG/B,MAAIE,GAAQ;AACR,UAAMC,IAAWJ,EAAIG,CAAM;AAC3B,QAAI,OAAOC,KAAa,YAAY,OAAOA,KAAa;AACpD,aAAOA;AAAA,EAEf;AAEA,SAAOH;AACX;"}

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

@@ -1,6 +1,5 @@
-import { TableCardsStyleSettings } from '../TableCard';
-import { TableViewType } from '../Table.types';
-import { TableViewFlags } from './tableViewModel.types';
+import { TableCardsStyleSettings, TableViewType } from '../Table.types';
+import { TableViewFlags } from './tableView.types';
 type TableStyleClassSwitches = {
     hasShadow: boolean;
     hasBorder: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"resolveTableClassConfig.js","sources":["../../../../src/components/table/model/resolveTableClassConfig.ts"],"sourcesContent":["import { mergeClassNameOverrides } from '../../../mergeClassNameOverrides';\nimport classNames from '../../../utils/classNames';\nimport type { TableCardsStyleSettings } from '../TableCard';\nimport type { TableViewType } from '../Table.types';\nimport type { TableViewFlags } from './tableViewModel.types';\n\ntype TableStyleClassSwitches = {\n    hasShadow: boolean;\n    hasBorder: boolean;\n    hasRounded: boolean;\n};\n\ntype TableCardClasses = {\n    rowClassName?: string;\n    cellClassName?: string;\n    labelClassName?: string;\n    contentClassName?: string;\n};\n\ntype ResolveTableClassConfigProps = {\n    viewType: TableViewType;\n    hover?: boolean;\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n    cardsStyle?: TableCardsStyleSettings;\n};\n\ntype ResolveTableBaseClassNameProps = {\n    viewType: TableViewType;\n    condensed?: boolean;\n    striped?: boolean;\n    gridLines?: boolean;\n    className?: string;\n    tableUseOverflow: boolean;\n    flags: TableViewFlags;\n    hasHover: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n};\n\nconst viewTypeClassNameMap: Record<TableViewType, string> = {\n    TABLE: 'table-view-table',\n    SINGLE_CARD: 'table-view-single-card',\n    MULTI_CARDS: 'table-view-multi-cards',\n};\n\nconst splitClassNameTokens = (value?: string) =>\n    value\n        ?.split(' ')\n        .map(classNameToken => classNameToken.trim())\n        .filter(Boolean) ?? [];\n\nconst normalizeTableStyleOverrideToken = (token: string) => {\n    if (token === 'shadow' || token.startsWith('shadow-')) {\n        return 'shadow';\n    }\n\n    if (token === 'border-radius' || token.startsWith('border-radius-')) {\n        return 'rounded';\n    }\n\n    return token;\n};\n\nexport const resolveTableStyleClassSwitches = (props: {\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n}): TableStyleClassSwitches => {\n    const { shadow, border, rounded, className } = props;\n    const defaultStyleClasses = classNames(shadow && 'shadow', border && 'border', rounded && 'rounded');\n\n    const overrideClasses = splitClassNameTokens(className).map(normalizeTableStyleOverrideToken).join(' ');\n    const mergedStyleClasses = mergeClassNameOverrides(defaultStyleClasses, overrideClasses);\n    const mergedStyleClassSet = new Set(splitClassNameTokens(mergedStyleClasses));\n\n    return {\n        hasShadow: !!shadow && mergedStyleClassSet.has('shadow'),\n        hasBorder: !!border && mergedStyleClassSet.has('border'),\n        hasRounded: !!rounded && mergedStyleClassSet.has('rounded'),\n    };\n};\n\nexport const resolveTableClassConfig = (\n    props: ResolveTableClassConfigProps\n): {\n    hasHover: boolean;\n    isTableView: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n    cardClasses: TableCardClasses;\n} => {\n    const { viewType, hover = false, shadow = false, border = true, rounded = true, className, cardsStyle } = props;\n    const isTableView = viewType === 'TABLE';\n    const hasHover = hover;\n    const styleClassSwitches = resolveTableStyleClassSwitches({ shadow, border, rounded, className });\n\n    return {\n        hasHover,\n        isTableView,\n        styleClassSwitches,\n        cardClasses: {\n            rowClassName: !isTableView\n                ? classNames(\n                      styleClassSwitches.hasShadow && 'shadow-default',\n                      styleClassSwitches.hasBorder && 'border',\n                      cardsStyle?.className\n                  )\n                : undefined,\n            cellClassName: !isTableView ? cardsStyle?.rowClassName : undefined,\n            labelClassName: !isTableView ? cardsStyle?.labelClassName : undefined,\n            contentClassName: !isTableView ? cardsStyle?.contentClassName : undefined,\n        },\n    };\n};\n\nexport const resolveTableBaseClassName = (props: ResolveTableBaseClassNameProps) => {\n    const {\n        viewType,\n        condensed = false,\n        striped = false,\n        gridLines = false,\n        className,\n        tableUseOverflow,\n        flags,\n        hasHover,\n        styleClassSwitches,\n    } = props;\n\n    return classNames(\n        'table',\n        viewTypeClassNameMap[viewType],\n        hasHover && 'table-hover',\n        condensed && 'table-condensed',\n        flags.isTableView && gridLines && 'table-grid-lines',\n        flags.isTableView && striped && 'table-striped',\n        flags.isTableView && styleClassSwitches.hasShadow && 'shadow-default',\n        flags.isTableView && styleClassSwitches.hasBorder && 'border',\n        styleClassSwitches.hasRounded && 'table-rounded',\n        flags.isTableView && (flags.hasHeader ? 'table-has-head' : 'table-no-head'),\n        flags.isTableView && flags.hasFooter && 'table-has-footer',\n        flags.isTableView && tableUseOverflow && 'table-allow-horizontal-overflow',\n        className\n    );\n};\n"],"names":["viewTypeClassNameMap","splitClassNameTokens","value","classNameToken","normalizeTableStyleOverrideToken","token","resolveTableStyleClassSwitches","props","shadow","border","rounded","className","defaultStyleClasses","classNames","overrideClasses","mergedStyleClasses","mergeClassNameOverrides","mergedStyleClassSet","resolveTableClassConfig","viewType","hover","cardsStyle","isTableView","hasHover","styleClassSwitches","resolveTableBaseClassName","condensed","striped","gridLines","tableUseOverflow","flags"],"mappings":";;AAyCA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAEMC,IAAuB,CAACC,MAC1BA,GACM,MAAM,GAAG,EACV,IAAI,CAAAC,MAAkBA,EAAe,MAAM,EAC3C,OAAO,OAAO,KAAK,CAAA,GAEtBC,IAAmC,CAACC,MAClCA,MAAU,YAAYA,EAAM,WAAW,SAAS,IACzC,WAGPA,MAAU,mBAAmBA,EAAM,WAAW,gBAAgB,IACvD,YAGJA,GAGEC,IAAiC,CAACC,MAKhB;AAC3B,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,MAAcJ,GACzCK,IAAsBC,EAAWL,KAAU,UAAUC,KAAU,UAAUC,KAAW,SAAS,GAE7FI,IAAkBb,EAAqBU,CAAS,EAAE,IAAIP,CAAgC,EAAE,KAAK,GAAG,GAChGW,IAAqBC,EAAwBJ,GAAqBE,CAAe,GACjFG,IAAsB,IAAI,IAAIhB,EAAqBc,CAAkB,CAAC;AAE5E,SAAO;AAAA,IACH,WAAW,CAAC,CAACP,KAAUS,EAAoB,IAAI,QAAQ;AAAA,IACvD,WAAW,CAAC,CAACR,KAAUQ,EAAoB,IAAI,QAAQ;AAAA,IACvD,YAAY,CAAC,CAACP,KAAWO,EAAoB,IAAI,SAAS;AAAA,EAAA;AAElE,GAEaC,IAA0B,CACnCX,MAMC;AACD,QAAM,EAAE,UAAAY,GAAU,OAAAC,IAAQ,IAAO,QAAAZ,IAAS,IAAO,QAAAC,IAAS,IAAM,SAAAC,IAAU,IAAM,WAAAC,GAAW,YAAAU,EAAA,IAAed,GACpGe,IAAcH,MAAa,SAC3BI,IAAWH,GACXI,IAAqBlB,EAA+B,EAAE,QAAAE,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW;AAEhG,SAAO;AAAA,IACH,UAAAY;AAAA,IACA,aAAAD;AAAA,IACA,oBAAAE;AAAA,IACA,aAAa;AAAA,MACT,cAAeF,IAMT,SALAT;AAAA,QACIW,EAAmB,aAAa;AAAA,QAChCA,EAAmB,aAAa;AAAA,QAChCH,GAAY;AAAA,MAAA;AAAA,MAGtB,eAAgBC,IAAyC,SAA3BD,GAAY;AAAA,MAC1C,gBAAiBC,IAA2C,SAA7BD,GAAY;AAAA,MAC3C,kBAAmBC,IAA6C,SAA/BD,GAAY;AAAA,IAAmB;AAAA,EACpE;AAER,GAEaI,IAA4B,CAAClB,MAA0C;AAChF,QAAM;AAAA,IACF,UAAAY;AAAA,IACA,WAAAO,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAjB;AAAA,IACA,kBAAAkB;AAAA,IACA,OAAAC;AAAA,IACA,UAAAP;AAAA,IACA,oBAAAC;AAAA,EAAA,IACAjB;AAEJ,SAAOM;AAAA,IACH;AAAA,IACAb,EAAqBmB,CAAQ;AAAA,IAC7BI,KAAY;AAAA,IACZG,KAAa;AAAA,IACbI,EAAM,eAAeF,KAAa;AAAA,IAClCE,EAAM,eAAeH,KAAW;AAAA,IAChCG,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDM,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDA,EAAmB,cAAc;AAAA,IACjCM,EAAM,gBAAgBA,EAAM,YAAY,mBAAmB;AAAA,IAC3DA,EAAM,eAAeA,EAAM,aAAa;AAAA,IACxCA,EAAM,eAAeD,KAAoB;AAAA,IACzClB;AAAA,EAAA;AAER;"}
+{"version":3,"file":"resolveTableClassConfig.js","sources":["../../../../src/components/table/model/resolveTableClassConfig.ts"],"sourcesContent":["import { mergeClassNameOverrides } from '../../../mergeClassNameOverrides';\nimport classNames from '../../../utils/classNames';\nimport type { TableCardsStyleSettings, TableViewType } from '../Table.types';\nimport type { TableViewFlags } from './tableView.types';\n\ntype TableStyleClassSwitches = {\n    hasShadow: boolean;\n    hasBorder: boolean;\n    hasRounded: boolean;\n};\n\ntype TableCardClasses = {\n    rowClassName?: string;\n    cellClassName?: string;\n    labelClassName?: string;\n    contentClassName?: string;\n};\n\ntype ResolveTableClassConfigProps = {\n    viewType: TableViewType;\n    hover?: boolean;\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n    cardsStyle?: TableCardsStyleSettings;\n};\n\ntype ResolveTableBaseClassNameProps = {\n    viewType: TableViewType;\n    condensed?: boolean;\n    striped?: boolean;\n    gridLines?: boolean;\n    className?: string;\n    tableUseOverflow: boolean;\n    flags: TableViewFlags;\n    hasHover: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n};\n\nconst viewTypeClassNameMap: Record<TableViewType, string> = {\n    TABLE: 'table-view-table',\n    SINGLE_CARD: 'table-view-single-card',\n    MULTI_CARDS: 'table-view-multi-cards',\n};\n\nconst splitClassNameTokens = (value?: string) =>\n    value\n        ?.split(' ')\n        .map(classNameToken => classNameToken.trim())\n        .filter(Boolean) ?? [];\n\nconst normalizeTableStyleOverrideToken = (token: string) => {\n    if (token === 'shadow' || token.startsWith('shadow-')) {\n        return 'shadow';\n    }\n\n    if (token === 'border-radius' || token.startsWith('border-radius-')) {\n        return 'rounded';\n    }\n\n    return token;\n};\n\nexport const resolveTableStyleClassSwitches = (props: {\n    shadow?: boolean;\n    border?: boolean;\n    rounded?: boolean;\n    className?: string;\n}): TableStyleClassSwitches => {\n    const { shadow, border, rounded, className } = props;\n    const defaultStyleClasses = classNames(shadow && 'shadow', border && 'border', rounded && 'rounded');\n\n    const overrideClasses = splitClassNameTokens(className).map(normalizeTableStyleOverrideToken).join(' ');\n    const mergedStyleClasses = mergeClassNameOverrides(defaultStyleClasses, overrideClasses);\n    const mergedStyleClassSet = new Set(splitClassNameTokens(mergedStyleClasses));\n\n    return {\n        hasShadow: !!shadow && mergedStyleClassSet.has('shadow'),\n        hasBorder: !!border && mergedStyleClassSet.has('border'),\n        hasRounded: !!rounded && mergedStyleClassSet.has('rounded'),\n    };\n};\n\nexport const resolveTableClassConfig = (\n    props: ResolveTableClassConfigProps\n): {\n    hasHover: boolean;\n    isTableView: boolean;\n    styleClassSwitches: TableStyleClassSwitches;\n    cardClasses: TableCardClasses;\n} => {\n    const { viewType, hover = false, shadow = false, border = true, rounded = true, className, cardsStyle } = props;\n    const isTableView = viewType === 'TABLE';\n    const hasHover = hover;\n    const styleClassSwitches = resolveTableStyleClassSwitches({ shadow, border, rounded, className });\n\n    return {\n        hasHover,\n        isTableView,\n        styleClassSwitches,\n        cardClasses: {\n            rowClassName: !isTableView\n                ? classNames(\n                      styleClassSwitches.hasShadow && 'shadow-default',\n                      styleClassSwitches.hasBorder && 'border',\n                      cardsStyle?.className\n                  )\n                : undefined,\n            cellClassName: !isTableView ? cardsStyle?.rowClassName : undefined,\n            labelClassName: !isTableView ? cardsStyle?.labelClassName : undefined,\n            contentClassName: !isTableView ? cardsStyle?.contentClassName : undefined,\n        },\n    };\n};\n\nexport const resolveTableBaseClassName = (props: ResolveTableBaseClassNameProps) => {\n    const {\n        viewType,\n        condensed = false,\n        striped = false,\n        gridLines = false,\n        className,\n        tableUseOverflow,\n        flags,\n        hasHover,\n        styleClassSwitches,\n    } = props;\n\n    return classNames(\n        'table',\n        viewTypeClassNameMap[viewType],\n        hasHover && 'table-hover',\n        condensed && 'table-condensed',\n        flags.isTableView && gridLines && 'table-grid-lines',\n        flags.isTableView && striped && 'table-striped',\n        flags.isTableView && styleClassSwitches.hasShadow && 'shadow-default',\n        flags.isTableView && styleClassSwitches.hasBorder && 'border',\n        styleClassSwitches.hasRounded && 'table-rounded',\n        flags.isTableView && (flags.hasHeader ? 'table-has-head' : 'table-no-head'),\n        flags.isTableView && flags.hasFooter && 'table-has-footer',\n        flags.isTableView && tableUseOverflow && 'table-allow-horizontal-overflow',\n        className\n    );\n};\n"],"names":["viewTypeClassNameMap","splitClassNameTokens","value","classNameToken","normalizeTableStyleOverrideToken","token","resolveTableStyleClassSwitches","props","shadow","border","rounded","className","defaultStyleClasses","classNames","overrideClasses","mergedStyleClasses","mergeClassNameOverrides","mergedStyleClassSet","resolveTableClassConfig","viewType","hover","cardsStyle","isTableView","hasHover","styleClassSwitches","resolveTableBaseClassName","condensed","striped","gridLines","tableUseOverflow","flags"],"mappings":";;AAwCA,MAAMA,IAAsD;AAAA,EACxD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,aAAa;AACjB,GAEMC,IAAuB,CAACC,MAC1BA,GACM,MAAM,GAAG,EACV,IAAI,CAAAC,MAAkBA,EAAe,MAAM,EAC3C,OAAO,OAAO,KAAK,CAAA,GAEtBC,IAAmC,CAACC,MAClCA,MAAU,YAAYA,EAAM,WAAW,SAAS,IACzC,WAGPA,MAAU,mBAAmBA,EAAM,WAAW,gBAAgB,IACvD,YAGJA,GAGEC,IAAiC,CAACC,MAKhB;AAC3B,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,MAAcJ,GACzCK,IAAsBC,EAAWL,KAAU,UAAUC,KAAU,UAAUC,KAAW,SAAS,GAE7FI,IAAkBb,EAAqBU,CAAS,EAAE,IAAIP,CAAgC,EAAE,KAAK,GAAG,GAChGW,IAAqBC,EAAwBJ,GAAqBE,CAAe,GACjFG,IAAsB,IAAI,IAAIhB,EAAqBc,CAAkB,CAAC;AAE5E,SAAO;AAAA,IACH,WAAW,CAAC,CAACP,KAAUS,EAAoB,IAAI,QAAQ;AAAA,IACvD,WAAW,CAAC,CAACR,KAAUQ,EAAoB,IAAI,QAAQ;AAAA,IACvD,YAAY,CAAC,CAACP,KAAWO,EAAoB,IAAI,SAAS;AAAA,EAAA;AAElE,GAEaC,IAA0B,CACnCX,MAMC;AACD,QAAM,EAAE,UAAAY,GAAU,OAAAC,IAAQ,IAAO,QAAAZ,IAAS,IAAO,QAAAC,IAAS,IAAM,SAAAC,IAAU,IAAM,WAAAC,GAAW,YAAAU,EAAA,IAAed,GACpGe,IAAcH,MAAa,SAC3BI,IAAWH,GACXI,IAAqBlB,EAA+B,EAAE,QAAAE,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,WAAAC,GAAW;AAEhG,SAAO;AAAA,IACH,UAAAY;AAAA,IACA,aAAAD;AAAA,IACA,oBAAAE;AAAA,IACA,aAAa;AAAA,MACT,cAAeF,IAMT,SALAT;AAAA,QACIW,EAAmB,aAAa;AAAA,QAChCA,EAAmB,aAAa;AAAA,QAChCH,GAAY;AAAA,MAAA;AAAA,MAGtB,eAAgBC,IAAyC,SAA3BD,GAAY;AAAA,MAC1C,gBAAiBC,IAA2C,SAA7BD,GAAY;AAAA,MAC3C,kBAAmBC,IAA6C,SAA/BD,GAAY;AAAA,IAAmB;AAAA,EACpE;AAER,GAEaI,IAA4B,CAAClB,MAA0C;AAChF,QAAM;AAAA,IACF,UAAAY;AAAA,IACA,WAAAO,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,WAAAjB;AAAA,IACA,kBAAAkB;AAAA,IACA,OAAAC;AAAA,IACA,UAAAP;AAAA,IACA,oBAAAC;AAAA,EAAA,IACAjB;AAEJ,SAAOM;AAAA,IACH;AAAA,IACAb,EAAqBmB,CAAQ;AAAA,IAC7BI,KAAY;AAAA,IACZG,KAAa;AAAA,IACbI,EAAM,eAAeF,KAAa;AAAA,IAClCE,EAAM,eAAeH,KAAW;AAAA,IAChCG,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDM,EAAM,eAAeN,EAAmB,aAAa;AAAA,IACrDA,EAAmB,cAAc;AAAA,IACjCM,EAAM,gBAAgBA,EAAM,YAAY,mBAAmB;AAAA,IAC3DA,EAAM,eAAeA,EAAM,aAAa;AAAA,IACxCA,EAAM,eAAeD,KAAoB;AAAA,IACzClB;AAAA,EAAA;AAER;"}

package/components/table/model/tableView.types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { TableColumnDefinition, TableHorizontalAlign, TableRowData, TableSortDirection, TableVerticalAlign } from '../Table.types';
+export type TableViewHeaderColumn<RowType extends TableRowData> = {
+    key: string | number;
+    columnKey?: string;
+    label: ReactNode;
+    icon?: string;
+    filter?: ReactNode;
+    hideLabel?: boolean;
+    horizontalAlign?: TableHorizontalAlign;
+    verticalAlign?: TableVerticalAlign;
+    className?: string;
+    headerClassName?: string;
+    hideOnMobile?: boolean;
+    draggable?: boolean;
+    resizeable?: boolean;
+    sortable?: boolean;
+    sortDirection?: TableSortDirection;
+    rowStart: number;
+    rowSpan: number;
+    columnStart: number;
+    colSpan: number;
+    source?: TableColumnDefinition<RowType>;
+};
+export type TableViewHeader<RowType extends TableRowData> = {
+    rowCount: number;
+    totalColumnCount: number;
+    columns: TableViewHeaderColumn<RowType>[];
+};
+export type TableViewCardClasses = {
+    rowClassName?: string;
+    cellClassName?: string;
+    labelClassName?: string;
+    contentClassName?: string;
+};
+export type TableViewFlags = {
+    hasHeader: boolean;
+    hasFooter: boolean;
+    isClickable: boolean;
+    isTableView: boolean;
+};

package/components/table/native/TableSettingsListItem.js

@@ -60,7 +60,7 @@ const P = 1e3, U = (o, e, l) => o ? !(l[e] || "").toLowerCase().includes(o.toLow
               "data-key": e,
               ...D,
               ...L,
-              children: i[e]
+              children: i?.[e]
             }
           ),
           s && /* @__PURE__ */ t("div", { className: "column-width-label", children: s.width ? `${s.width}px` : d }),

package/components/table/native/TableSettingsListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSettingsListItem.js","sources":["../../../../src/components/table/native/TableSettingsListItem.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../../utils/classNames';\nimport Checkbox from '../../checkbox/Checkbox';\nimport Collapse from '../../collapse/Collapse';\nimport { TableSettingsColumnDetails } from './TableSettingsColumnDetails';\nimport { TableSettingsColumnButtons } from './TableSettingsColumnButtons';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport const filterColumns = (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => {\n    if (!searchValue) {\n        return false;\n    }\n    const label = columnLabelStrings[column] || '';\n    return !label.toLowerCase().includes(searchValue.toLowerCase());\n};\n\nexport type TableSettingsListItemProps = TableSettingsItemProps & {\n    column: string;\n    orderIndex: number;\n    isActive: boolean;\n    className?: string;\n};\n\nconst TableSettingsListItem = (props: TableSettingsListItemProps) => {\n    const {\n        column,\n        orderIndex,\n        columnLabels,\n        autoLabel,\n        disabledColumns = [],\n        columnOrder,\n        hiddenColumns = [],\n        columnSearchValue,\n        columnsDetails,\n        columnLabelStrings = {},\n        openColumnsDetails = {},\n        onColumnWidthChange,\n        onResetColumnWidth,\n        onMoveColumn,\n        onOpenDetails,\n        onToggleHideColumn = noop,\n        isActive = false,\n        className,\n    } = props;\n\n    const isSortingDisabled = !isEmpty(columnSearchValue);\n\n    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({\n        id: column,\n        disabled: isSortingDisabled,\n    });\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    // Filter out items which don't match the search value.\n    const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings);\n\n    const itemClassNames = classNames('table-settings-item', className);\n\n    const columnDetails = columnsDetails[column];\n\n    return (\n        <li\n            hidden={isFiltered}\n            className={itemClassNames}\n            key={`table-settings-item-${column}`}\n            ref={setNodeRef}\n            style={style}\n        >\n            <div className='table-settings-item-header user-select-none' ref={setActivatorNodeRef}>\n                <div className='CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3'>\n                    <Checkbox\n                        checked={!hiddenColumns.includes(column)}\n                        onClick={event => {\n                            onToggleHideColumn(column);\n                            event.stopPropagation();\n                        }}\n                        disabled={disabledColumns.includes(column)}\n                    />\n                </div>\n                <div\n                    className={`table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`}\n                    data-key={column}\n                    {...attributes}\n                    {...listeners}\n                >\n                    {columnLabels[column]}\n                </div>\n                {columnDetails && (\n                    <div className='column-width-label'>\n                        {columnDetails.width ? `${columnDetails.width}px` : autoLabel}\n                    </div>\n                )}\n                <TableSettingsColumnButtons\n                    column={column}\n                    index={orderIndex}\n                    columnDetails={columnDetails}\n                    columnOrder={columnOrder}\n                    openColumnsDetails={openColumnsDetails}\n                    disabled={isSortingDisabled}\n                    onMoveColumn={onMoveColumn}\n                    onOpenDetails={onOpenDetails}\n                />\n            </div>\n            {columnDetails && !isActive && (\n                <Collapse open={!!openColumnsDetails[column]}>\n                    <div>\n                        <TableSettingsColumnDetails\n                            {...columnDetails}\n                            column={column}\n                            maxColumnWidth={MAX_COLUMN_WIDTH}\n                            onColumnWidthChange={onColumnWidthChange}\n                            onResetColumnWidth={onResetColumnWidth}\n                        />\n                    </div>\n                </Collapse>\n            )}\n        </li>\n    );\n};\n\nexport default TableSettingsListItem;\n"],"names":["MAX_COLUMN_WIDTH","filterColumns","searchValue","column","columnLabelStrings","TableSettingsListItem","props","orderIndex","columnLabels","autoLabel","disabledColumns","columnOrder","hiddenColumns","columnSearchValue","columnsDetails","openColumnsDetails","onColumnWidthChange","onResetColumnWidth","onMoveColumn","onOpenDetails","onToggleHideColumn","noop","isActive","className","isSortingDisabled","isEmpty","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","useSortable","style","CSS","isFiltered","itemClassNames","classNames","columnDetails","jsxs","jsx","Checkbox","event","TableSettingsColumnButtons","Collapse","TableSettingsColumnDetails"],"mappings":"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"}
+{"version":3,"file":"TableSettingsListItem.js","sources":["../../../../src/components/table/native/TableSettingsListItem.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { isEmpty, noop } from 'es-toolkit/compat';\n\nimport classNames from '../../../utils/classNames';\nimport Checkbox from '../../checkbox/Checkbox';\nimport Collapse from '../../collapse/Collapse';\nimport { TableSettingsColumnDetails } from './TableSettingsColumnDetails';\nimport { TableSettingsColumnButtons } from './TableSettingsColumnButtons';\nimport type { TableSettingsItemProps } from './TableSettingsDialog';\n\nconst MAX_COLUMN_WIDTH = 1000;\n\nexport const filterColumns = (searchValue: string, column: string, columnLabelStrings: Record<string, string>) => {\n    if (!searchValue) {\n        return false;\n    }\n    const label = columnLabelStrings[column] || '';\n    return !label.toLowerCase().includes(searchValue.toLowerCase());\n};\n\nexport type TableSettingsListItemProps = TableSettingsItemProps & {\n    column: string;\n    orderIndex: number;\n    isActive: boolean;\n    className?: string;\n};\n\nconst TableSettingsListItem = (props: TableSettingsListItemProps) => {\n    const {\n        column,\n        orderIndex,\n        columnLabels,\n        autoLabel,\n        disabledColumns = [],\n        columnOrder,\n        hiddenColumns = [],\n        columnSearchValue,\n        columnsDetails,\n        columnLabelStrings = {},\n        openColumnsDetails = {},\n        onColumnWidthChange,\n        onResetColumnWidth,\n        onMoveColumn,\n        onOpenDetails,\n        onToggleHideColumn = noop,\n        isActive = false,\n        className,\n    } = props;\n\n    const isSortingDisabled = !isEmpty(columnSearchValue);\n\n    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({\n        id: column,\n        disabled: isSortingDisabled,\n    });\n\n    const style = {\n        transform: CSS.Transform.toString(transform),\n        transition,\n    };\n\n    // Filter out items which don't match the search value.\n    const isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings);\n\n    const itemClassNames = classNames('table-settings-item', className);\n\n    const columnDetails = columnsDetails[column];\n\n    return (\n        <li\n            hidden={isFiltered}\n            className={itemClassNames}\n            key={`table-settings-item-${column}`}\n            ref={setNodeRef}\n            style={style}\n        >\n            <div className='table-settings-item-header user-select-none' ref={setActivatorNodeRef}>\n                <div className='CheckboxWrapper display-flex align-items-center padding-left-2 margin-top--3'>\n                    <Checkbox\n                        checked={!hiddenColumns.includes(column)}\n                        onClick={event => {\n                            onToggleHideColumn(column);\n                            event.stopPropagation();\n                        }}\n                        disabled={disabledColumns.includes(column)}\n                    />\n                </div>\n                <div\n                    className={`table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`}\n                    data-key={column}\n                    {...attributes}\n                    {...listeners}\n                >\n                    {columnLabels?.[column]}\n                </div>\n                {columnDetails && (\n                    <div className='column-width-label'>\n                        {columnDetails.width ? `${columnDetails.width}px` : autoLabel}\n                    </div>\n                )}\n                <TableSettingsColumnButtons\n                    column={column}\n                    index={orderIndex}\n                    columnDetails={columnDetails}\n                    columnOrder={columnOrder}\n                    openColumnsDetails={openColumnsDetails}\n                    disabled={isSortingDisabled}\n                    onMoveColumn={onMoveColumn}\n                    onOpenDetails={onOpenDetails}\n                />\n            </div>\n            {columnDetails && !isActive && (\n                <Collapse open={!!openColumnsDetails[column]}>\n                    <div>\n                        <TableSettingsColumnDetails\n                            {...columnDetails}\n                            column={column}\n                            maxColumnWidth={MAX_COLUMN_WIDTH}\n                            onColumnWidthChange={onColumnWidthChange}\n                            onResetColumnWidth={onResetColumnWidth}\n                        />\n                    </div>\n                </Collapse>\n            )}\n        </li>\n    );\n};\n\nexport default TableSettingsListItem;\n"],"names":["MAX_COLUMN_WIDTH","filterColumns","searchValue","column","columnLabelStrings","TableSettingsListItem","props","orderIndex","columnLabels","autoLabel","disabledColumns","columnOrder","hiddenColumns","columnSearchValue","columnsDetails","openColumnsDetails","onColumnWidthChange","onResetColumnWidth","onMoveColumn","onOpenDetails","onToggleHideColumn","noop","isActive","className","isSortingDisabled","isEmpty","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","useSortable","style","CSS","isFiltered","itemClassNames","classNames","columnDetails","jsxs","jsx","Checkbox","event","TableSettingsColumnButtons","Collapse","TableSettingsColumnDetails"],"mappings":"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"}