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

package/dist/Components/SpecTable/SpecTable.js

@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const DEFAULT_LABELS = { showAll: "Show all", showLess: "Show less" };
 /** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
@@ -33,7 +34,7 @@ const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpand
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dl", id: listId, m: 0, "aria-label": ariaLabel, display: "grid", gridTemplateColumns: columns === 2 ? { base: "1fr", md: "1fr 1fr" } : "1fr", borderRadius: "xl", overflow: "hidden", children: visible.map((item, i) => {
                     const stripeNarrow = i % 2 === 0;
                     const stripeWide = columns === 2 ? Math.floor(i / 2) % 2 === 0 : stripeNarrow;
-                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: { fontVariantNumeric: "tabular-nums" }, children: item.value })] }, `${item.label}-${i}`));
+                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: typography_1.NUMERIC_TEXT, children: item.value })] }, `${item.label}-${i}`));
                 }) }), foldable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
 };
 exports.default = SpecTable;

package/dist/Components/StageProgress/StageItem.js

@@ -11,6 +11,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const StageProgressProps_1 = require("./StageProgressProps");
+const centerInStrip_1 = require("./centerInStrip");
 const sizeMap = {
     sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
     md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
@@ -37,11 +38,7 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
     const s = sizeMap[size];
     (0, react_1.useEffect)(() => {
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            ref.current.scrollIntoView({
-                behavior: "smooth",
-                inline: "center",
-                block: "nearest",
-            });
+            (0, centerInStrip_1.centerInStrip)(ref.current);
         }
     }, [state, scrollIntoViewWhenActive]);
     const bg = state === "active"

package/dist/Components/StageProgress/StageProgress.js

@@ -9,6 +9,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const StageItem_1 = __importDefault(require("./StageItem"));
 const StepperStage_1 = __importDefault(require("./StepperStage"));
+const centerInStrip_1 = require("./centerInStrip");
 // Gap between items per variant (chevron interlocks via negative margin).
 const gapFor = {
     chevron: "0",
@@ -32,7 +33,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: variant === "stepper" ? "ol" : undefined, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), children: stages.map((stage, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: variant === "stepper" ? "ol" : undefined, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), [centerInStrip_1.STRIP_ATTRIBUTE]: "", children: stages.map((stage, index) => {
             var _a;
             const state = stateFor(index);
             const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -42,7 +42,7 @@ export interface StageProgressProps {
     isLoading?: boolean;
     /** Ignored for variant="stepper" (fixed per-size circle width there) — applies to chevron/bar/pills only. */
     minStageWidth?: string;
-    /** Auto-scroll the active stage into view. Default true. */
+    /** Centre the active stage in the stage strip; the page itself never scrolls. Default true. */
     scrollActiveIntoView?: boolean;
     /** Also only applies to chevron/bar/pills — variant="stepper" never shows a tooltip, however long the label. */
     tooltipThreshold?: number;

package/dist/Components/StageProgress/StepperStage.js

@@ -8,6 +8,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const primitives_1 = require("../../Theme/tokens/primitives");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const StageProgressProps_1 = require("./StageProgressProps");
+const centerInStrip_1 = require("./centerInStrip");
 const sizeMap = {
     sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
@@ -21,13 +22,8 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const s = sizeMap[size];
     const interactive = !isReadOnly && !disabled;
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            (_b = (_a = ref.current).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                behavior: "smooth",
-                inline: "center",
-                block: "nearest",
-            });
+            (0, centerInStrip_1.centerInStrip)(ref.current);
         }
     }, [state, scrollIntoViewWhenActive]);
     const filled = state === "active" || state === "completed";

package/dist/Components/StageProgress/centerInStrip.d.ts

@@ -0,0 +1,2 @@
+export declare const STRIP_ATTRIBUTE = "data-stage-strip";
+export declare const centerInStrip: (stage: HTMLElement) => void;

package/dist/Components/StageProgress/centerInStrip.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.centerInStrip = exports.STRIP_ATTRIBUTE = void 0;
+exports.STRIP_ATTRIBUTE = "data-stage-strip";
+const centerInStrip = (stage) => {
+    var _a;
+    const strip = stage.closest(`[${exports.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" });
+};
+exports.centerInStrip = centerInStrip;

package/dist/Components/StatCard/StatCard.d.ts

@@ -1,4 +1,4 @@
 import type { StatCardProps } from "./StatCardProps";
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, iconTone, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, iconTone, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
 export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -9,12 +9,13 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const StatCardSkeleton = ({ hasIcon }) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [hasIcon && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 8, width: 8 }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 7, width: "55%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { 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 } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -37,10 +38,10 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.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 && ((0, jsx_runtime_1.jsx)(react_1.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) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.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) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: typography_1.NUMERIC_TEXT, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: (0, motion_1.transitionFor)(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: content }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...rest, as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: (0, motion_1.transitionFor)(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: content }));
 };
 exports.default = StatCard;

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -1,8 +1,8 @@
-import type { ElementType, MouseEventHandler, ReactNode } from "react";
+import type { ElementType, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
 import type { Tone } from "../../Theme/tokens/builders/tone";
 type StatTrend = "up" | "down";
-/** KPI tile; delta is green when `trend` matches `goodDirection` (default "up"), else red. */
-export interface StatCardProps {
+/** KPI tile; delta is green when `trend` matches `goodDirection`; other HTML attributes land on the root. */
+export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML" | "onClick" | "aria-label"> {
     label: ReactNode;
     /** Large tabular-number figure; pre-format it (currency, units) yourself. */
     value: ReactNode;

package/dist/Components/StickyBuyBar/StickyBuyBar.js

@@ -66,7 +66,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" : `${(0, motion_1.transitionFor)(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+        transition: reduced ? "none" : `${(0, motion_1.transitionFor)(["opacity"])}, visibility 0s linear ${on ? 0 : motion_1.MOTION_MS.fast}ms`,
     });
     const label = (key) => {
         const on = key === active;

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

@@ -38,30 +38,46 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+const TriggerAnchor = (0, react_1.forwardRef)(({ target }, ref) => {
+    (0, react_1.useLayoutEffect)(() => {
+        assignRef(ref, target.current);
+        return () => assignRef(ref, null);
+    }, [ref, target]);
+    return null;
+});
+TriggerAnchor.displayName = "TriggerAnchor";
 const TableActions = react_1.default.memo(({ row }) => {
     var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const popoverId = (0, react_1.useId)();
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // Listen for "close-all-popovers"
-    (0, react_1.useEffect)(() => {
-        const handler = () => setIsOpen(false);
-        window.addEventListener("close-all-popovers", handler);
-        return () => window.removeEventListener("close-all-popovers", handler);
-    }, []);
-    // Detect outside click
     (0, react_1.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 = () => {
@@ -72,19 +88,19 @@ const TableActions = react_1.default.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsx)(TriggerAnchor, { target: triggerRef }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) })] }))] }));
 });
 TableActions.displayName = "TableActions";
 exports.default = TableActions;

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

@@ -40,6 +40,7 @@ exports.findFirstVisibleIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const table_1 = require("../../../Utils/table");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const TableLoading_1 = require("./TableLoading");
@@ -55,6 +56,7 @@ const columnLabel_1 = require("../columnLabel");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const rowDetail_1 = require("./rowDetail");
+const rowMeasurer_1 = require("./rowMeasurer");
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -88,9 +90,7 @@ const StatusCell = ({ value, onSolid, align, }) => ((0, jsx_runtime_1.jsx)(react
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => ((0, jsx_runtime_1.jsx)(react_1.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_2.default.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_2.default.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 = (0, react_2.useRef)(null);
     const expandedRowRef = (0, react_2.useRef)(null);
     const detailRowRef = (0, react_2.useRef)(null);
@@ -98,36 +98,15 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const detailNode = rowDetail ? rowDetail.render(row) : null;
     const hasDetail = detailNode !== null && detailNode !== undefined;
     const detailOpen = isDetailOpen && hasDetail;
-    const detailIds = rowDetail ? (0, rowDetail_1.detailDomIds)(rowDetail.idPrefix, getRowId(row)) : null;
+    const rowId = getRowId(row);
+    const detailIds = rowDetail ? (0, rowDetail_1.detailDomIds)(rowDetail.idPrefix, rowId) : null;
+    const expandedOpen = isExpanded && hasContent;
     (0, react_2.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 = (0, react_2.useCallback)((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, {
@@ -246,15 +225,21 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const [viewportH, setViewportH] = (0, react_2.useState)(0);
     // Measured row heights keyed by row id (stable across scroll/paging).
     const [measuredHeights, setMeasuredHeights] = (0, react_2.useState)(new Map());
-    const reportHeight = (0, react_2.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 = (0, react_2.useCallback)((heights) => {
+        (0, react_dom_1.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 = (0, rowMeasurer_1.useRowMeasurer)(applyHeights);
     (0, react_2.useEffect)(() => {
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
@@ -472,7 +457,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [gTopPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? ((0, jsx_runtime_1.jsx)(TableGroupRow_1.default, { 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}`)) : ((0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsx)(TableGroupRow_1.default, { 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}`)) : ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && data.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: topPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -481,7 +466,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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 exports.default = TableBody;

package/dist/Components/Table/components/rowMeasurer.d.ts

@@ -0,0 +1,8 @@
+type RowId = string | number;
+export type RowMeasurer = {
+    track: (id: RowId, elements: HTMLElement[]) => () => void;
+    dispose: () => void;
+};
+export declare const createRowMeasurer: (onHeights: (heights: Map<RowId, number>) => void) => RowMeasurer;
+export declare const useRowMeasurer: (onHeights: (heights: Map<RowId, number>) => void) => RowMeasurer;
+export {};

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowMeasurer = exports.createRowMeasurer = void 0;
+const react_1 = require("react");
+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();
+        },
+    };
+};
+exports.createRowMeasurer = createRowMeasurer;
+const useRowMeasurer = (onHeights) => {
+    const measurer = (0, react_1.useMemo)(() => (0, exports.createRowMeasurer)(onHeights), [onHeights]);
+    (0, react_1.useEffect)(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};
+exports.useRowMeasurer = useRowMeasurer;

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

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

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

@@ -19,6 +19,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 = (0, react_1.useRef)([]);
@@ -62,24 +67,22 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
     (0, react_1.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 = (0, react_1.useMemo)(() => {
         return tableData.some((o) => o.content);

package/dist/Components/Tabs/components/CountBadge.js

@@ -5,9 +5,9 @@ const react_1 = require("@chakra-ui/react");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const BADGE_FONT_SIZE = {
     xs: "0.625rem",
-    sm: "0.6875rem",
-    md: "0.75rem",
-    lg: "0.8125rem",
+    sm: "xs-minus",
+    md: "xs",
+    lg: "xs-plus",
 };
 // Same resolveSoftTone(colors, scale, surface) pattern as SideBar/Header's own count badges.
 const CountBadge = ({ count, colors, scale, surface, size }) => {

package/dist/Components/Tabs/components/Tab.d.ts

@@ -1,3 +1,4 @@
 import type { TabProps } from "../TabsProps";
-declare const Tab: ({ value, children, icon, count, isDisabled }: TabProps) => import("react/jsx-runtime").JSX.Element;
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Tab;