pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/esm/Components/StageProgress/centerInStrip.js

@@ -0,0 +1,11 @@
+export const STRIP_ATTRIBUTE = "data-stage-strip";
+export const centerInStrip = (stage) => {
+    var _a;
+    const strip = stage.closest(`[${STRIP_ATTRIBUTE}]`);
+    if (!strip)
+        return;
+    const box = strip.getBoundingClientRect();
+    const rect = stage.getBoundingClientRect();
+    const left = strip.scrollLeft + rect.left + rect.width / 2 - (box.left + box.width / 2);
+    (_a = strip.scrollTo) === null || _a === void 0 ? void 0 : _a.call(strip, { left, behavior: "smooth" });
+};

package/dist/esm/Components/StatCard/StatCard.js

@@ -3,13 +3,15 @@ import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }) => {
     const { colors } = useCustomTheme();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -32,10 +34,10 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: NUMERIC_TEXT, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: NUMERIC_TEXT, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: cardRule(colors), "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
-        return (_jsx(Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+        return (_jsx(Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }
-    return (_jsx(Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
+    return (_jsx(Box, { ...rest, as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
 };
 export default StatCard;

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -7,7 +7,7 @@ import PriceBlock from "../PriceBlock/PriceBlock.js";
 import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
 import { glassStyles } from "../MediaGallery/glass.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import zIndices from "../../Theme/tokens/primitives/zIndices.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 const DEFAULT_LABELS = {
@@ -61,7 +61,7 @@ const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "st
         gridArea: "1 / 1",
         opacity: on ? 1 : 0,
         visibility: on ? "visible" : "hidden",
-        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : MOTION_MS.fast}ms`,
     });
     const label = (key) => {
         const on = key === active;

package/dist/esm/Components/Table/Table.js

@@ -7,13 +7,14 @@ import LeftFilterPane from "./filters/LeftFilterPane.js";
 import { TABLE_VARIANTS } from "./variants/index.js";
 import { TableVariantProvider } from "./variants/TableVariantContext.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import { labelOnFill, solidFillRung, resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
-import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { DENSITY_ROWS, EMPTY_STATE_HEIGHT, GROUP_HEADER_HEIGHT, MAX_TABLE_HEIGHT, TOOLBAR_HEIGHT, pxOf, rowHeightFor } from "./components/rowMetrics.js";
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
@@ -32,6 +33,8 @@ import Button from "../Button/Button.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { Filter, EllipsisVertical, X, RefreshCw } from "lucide-react";
 const MotionBox = motion(Box);
+// NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
+const PANE_EASE = [0.2, 0, 0, 1];
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
 export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
@@ -43,6 +46,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
 }, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
+    const prefersReducedMotion = usePrefersReducedMotion();
     const clearFiltersTone = useMemo(() => resolveFilledSurface(theme.colors.semantic.error, theme.colors), [theme.colors]);
     const variantTokens = useMemo(() => TABLE_VARIANTS[variant](theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = useState({});
@@ -382,7 +386,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: theme.colors.boxborder[200], style: { height: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [[
+      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", ease: PANE_EASE, duration: prefersReducedMotion ? 0 : MOTION_MS.base / 1000 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: cardRule(theme.colors), style: { height: TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${cardRule(theme.colors)}`, children: [[
                                                 filterSidebar && (_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
@@ -446,5 +450,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${cardRule(theme.colors)}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/esm/Components/Table/components/TableActions.js

@@ -1,32 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
-import { Button, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, VStack, } from "@chakra-ui/react";
+import React, { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button, IconButton, Popover, PopoverAnchor, PopoverBody, PopoverContent, Portal, VStack, } from "@chakra-ui/react";
 import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+const TriggerAnchor = forwardRef(({ target }, ref) => {
+    useLayoutEffect(() => {
+        assignRef(ref, target.current);
+        return () => assignRef(ref, null);
+    }, [ref, target]);
+    return null;
+});
+TriggerAnchor.displayName = "TriggerAnchor";
 const TableActions = React.memo(({ row }) => {
     var _a;
     const [isOpen, setIsOpen] = useState(false);
     const ref = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverId = useId();
     const theme = useCustomTheme();
-    // Listen for "close-all-popovers"
-    useEffect(() => {
-        const handler = () => setIsOpen(false);
-        window.addEventListener("close-all-popovers", handler);
-        return () => window.removeEventListener("close-all-popovers", handler);
-    }, []);
-    // Detect outside click
     useEffect(() => {
+        if (!isOpen)
+            return;
+        const trigger = triggerRef.current;
+        const closeAll = () => setIsOpen(false);
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
-        if (isOpen) {
-            // ✅ Use click instead of mousedown
-            document.addEventListener("click", handleClickOutside);
-        }
+        window.addEventListener("close-all-popovers", closeAll);
+        document.addEventListener("click", handleClickOutside);
         return () => {
+            window.removeEventListener("close-all-popovers", closeAll);
             document.removeEventListener("click", handleClickOutside);
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    trigger === null || trigger === void 0 ? void 0 : trigger.focus({ preventScroll: true });
+            });
         };
     }, [isOpen]);
     const handleOpen = () => {
@@ -37,19 +54,19 @@ const TableActions = React.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
-                                            var _a;
-                                            (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && (_jsxs(Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(TriggerAnchor, { target: triggerRef }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${raisedRule(theme.colors)}`, borderRadius: 0, gap: 2, onClick: () => {
+                                                var _a;
+                                                (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${raisedRule(theme.colors)}`, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) })] }))] }));
 });
 TableActions.displayName = "TableActions";
 export default TableActions;

package/dist/esm/Components/Table/components/TableBody.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { TableBodyLoading } from "./TableLoading.js";
@@ -16,6 +17,7 @@ import { columnLabelText, isPrimitiveLabel } from "../columnLabel.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
+import { useRowMeasurer } from "./rowMeasurer.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -48,9 +50,7 @@ const StatusCell = ({ value, onSolid, align, }) => (_jsx(Box, { display: "flex",
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
-const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
-    // Measured-height virtualization: report this row's real height (main + any
-    // expanded panel) so the windower can place variable/expandable rows exactly.
+const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, measurer, }) => {
     const mainRowRef = useRef(null);
     const expandedRowRef = useRef(null);
     const detailRowRef = useRef(null);
@@ -58,36 +58,15 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     const detailNode = rowDetail ? rowDetail.render(row) : null;
     const hasDetail = detailNode !== null && detailNode !== undefined;
     const detailOpen = isDetailOpen && hasDetail;
-    const detailIds = rowDetail ? detailDomIds(rowDetail.idPrefix, getRowId(row)) : null;
+    const rowId = getRowId(row);
+    const detailIds = rowDetail ? detailDomIds(rowDetail.idPrefix, rowId) : null;
+    const expandedOpen = isExpanded && hasContent;
     useLayoutEffect(() => {
-        if (!onMeasure)
+        if (!measurer)
             return;
-        const measure = () => {
-            var _a, _b, _c, _d, _e, _f;
-            const main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
-            const exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
-            const det = detailOpen ? (_f = (_e = detailRowRef.current) === null || _e === void 0 ? void 0 : _e.offsetHeight) !== null && _f !== void 0 ? _f : 0 : 0;
-            const h = main + exp + det;
-            if (h > 0)
-                onMeasure(getRowId(row), h);
-        };
-        measure();
-        const raf = requestAnimationFrame(measure);
-        let ro;
-        if (typeof ResizeObserver !== "undefined") {
-            ro = new ResizeObserver(measure);
-            if (mainRowRef.current)
-                ro.observe(mainRowRef.current);
-            if (expandedRowRef.current)
-                ro.observe(expandedRowRef.current);
-            if (detailRowRef.current)
-                ro.observe(detailRowRef.current);
-        }
-        return () => {
-            cancelAnimationFrame(raf);
-            ro === null || ro === void 0 ? void 0 : ro.disconnect();
-        };
-    }, [onMeasure, isExpanded, hasContent, detailOpen, row]);
+        const parts = [mainRowRef.current, expandedOpen ? expandedRowRef.current : null, detailOpen ? detailRowRef.current : null];
+        return measurer.track(rowId, parts.filter((el) => el !== null));
+    }, [measurer, rowId, expandedOpen, detailOpen]);
     const handleCellClick = useCallback((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, {
@@ -206,15 +185,21 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const [viewportH, setViewportH] = useState(0);
     // Measured row heights keyed by row id (stable across scroll/paging).
     const [measuredHeights, setMeasuredHeights] = useState(new Map());
-    const reportHeight = useCallback((id, h) => {
-        setMeasuredHeights((prev) => {
-            if (prev.get(id) === h)
-                return prev;
-            const next = new Map(prev);
-            next.set(id, h);
+    // NOTE: flushSync lands the batch before paint, as the old per-row layout effect did.
+    const applyHeights = useCallback((heights) => {
+        flushSync(() => setMeasuredHeights((prev) => {
+            let next = prev;
+            heights.forEach((h, id) => {
+                if (next.get(id) === h)
+                    return;
+                if (next === prev)
+                    next = new Map(prev);
+                next.set(id, h);
+            });
             return next;
-        });
+        }));
     }, []);
+    const measurer = useRowMeasurer(applyHeights);
     useEffect(() => {
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
@@ -432,7 +417,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: groupVirtualize && rowDetail ? reportHeight : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: groupVirtualize && rowDetail ? measurer : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -441,7 +426,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: shouldVirtualize ? measurer : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 export default TableBody;

package/dist/esm/Components/Table/components/rowMeasurer.js

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from "react";
+export const createRowMeasurer = (onHeights) => {
+    const rowOf = new Map();
+    const heightOf = new Map();
+    const elementsOf = new Map();
+    let observer = null;
+    const totalOf = (id) => {
+        var _a, _b;
+        let total = 0;
+        for (const el of (_a = elementsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            total += (_b = heightOf.get(el)) !== null && _b !== void 0 ? _b : 0;
+        return total;
+    };
+    const onResize = (entries) => {
+        const touched = new Set();
+        for (const { target } of entries) {
+            const id = rowOf.get(target);
+            if (id === undefined)
+                continue;
+            heightOf.set(target, target.offsetHeight);
+            touched.add(id);
+        }
+        const heights = new Map();
+        touched.forEach((id) => {
+            const total = totalOf(id);
+            if (total > 0)
+                heights.set(id, total);
+        });
+        if (heights.size > 0)
+            onHeights(heights);
+    };
+    const untrack = (id, elements) => {
+        for (const el of elements) {
+            observer === null || observer === void 0 ? void 0 : observer.unobserve(el);
+            rowOf.delete(el);
+            heightOf.delete(el);
+        }
+        if (elementsOf.get(id) === elements)
+            elementsOf.delete(id);
+    };
+    return {
+        track(id, elements) {
+            elementsOf.set(id, elements);
+            if (typeof ResizeObserver === "undefined")
+                return () => untrack(id, elements);
+            observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(onResize));
+            for (const el of elements) {
+                rowOf.set(el, id);
+                observer.observe(el);
+            }
+            return () => untrack(id, elements);
+        },
+        dispose() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+            rowOf.clear();
+            heightOf.clear();
+            elementsOf.clear();
+        },
+    };
+};
+export const useRowMeasurer = (onHeights) => {
+    const measurer = useMemo(() => createRowMeasurer(onHeights), [onHeights]);
+    useEffect(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};

package/dist/esm/Components/Table/filters/CompactSelect.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody, VStack, Portal } from "@chakra-ui/react";
 import { ChevronDown, ChevronUp, Check } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
 import { optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
@@ -54,7 +55,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: raisedRule(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
                                             const rowBg = selected

package/dist/esm/Components/Table/filters/TableFilters.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
 import { columnLabelText } from "../columnLabel.js";
 import { EllipsisVertical, Search } from "lucide-react";
 const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
     const theme = useTheme();
     const searchRef = useRef(null);
-    const [refreshDataOnOpen, setRefreshDataOnOpen] = useState(false);
     const setColumnsSearchRef = useRef(setColumnsSearch);
     setColumnsSearchRef.current = setColumnsSearch;
     const debounceTimerRef = useRef(null);
@@ -17,12 +16,6 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
             setColumnsSearchRef.current(value);
         }, 700);
     }, []);
-    useEffect(() => {
-        if (columnsSearch.length && searchRef.current) {
-            searchRef.current.value = columnsSearch;
-        }
-        /* eslint-disable */
-    }, [refreshDataOnOpen]);
     // Auto-focus input when popover opens
     useEffect(() => {
         if (isOpen && searchRef.current) {
@@ -33,13 +26,9 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
             }, 100);
         }
     }, [isOpen]);
-    const handleOpen = () => {
-        setRefreshDataOnOpen((prev) => !prev);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    };
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: onOpen, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, defaultValue: columnsSearch, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
-                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) }))] }));
 });
 export default TableFilters;

package/dist/esm/Components/Table/hooks/useTable.js

@@ -16,6 +16,11 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     }
     return next;
 };
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
 const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
     var _a, _b;
     const headerRefs = useRef([]);
@@ -59,24 +64,22 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
     useEffect(() => {
         var _a;
         const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
-        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
-            const mergedColumns = columnPreference.map((originalCol) => {
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
                 const prefCol = columns.find((c) => c.id === originalCol.id);
                 return prefCol
                     ? mergeColumnWithPreference(originalCol, prefCol)
                     : { ...originalCol };
-            });
-            setColumnsList(mergedColumns);
-        }
-        else {
-            setColumnsList(columns.map((col, i) => {
+            })
+            : columns.map((col, i) => {
                 var _a;
                 return ({
                     ...col,
                     isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
                 });
-            }));
-        }
+            });
+        // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
+        setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
     }, [tablePreferences, columns, defaultVisibleColumns]);
     const isContent = useMemo(() => {
         return tableData.some((o) => o.content);