pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/Components/SideBar/components/MenuPopoverContent.js

@@ -11,15 +11,16 @@ const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const { title, icon, subMenu, badge, locked } = menu;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? 0 : "7px", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_c = menu.url) !== null && _c !== void 0 ? _c : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? 0 : "7px", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
                     if (!hasSubMenu) {
+                        e.preventDefault();
                         handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
                 }, cursor: !hasSubMenu ? "pointer" : "default", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: "13px", flex: "1", color: "whiteAlpha.900", children: title }), (() => {
@@ -33,8 +34,13 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
                         return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
                     })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
+                var _a;
                 const isSubActive = activeMenu === sub.id;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", onClick: () => !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)), px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.primary[500] : "transparent", bg: isSubActive ? theme.colors.primary.opacity[16] : "transparent", _hover: {
+                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", onClick: (e) => {
+                        e.preventDefault();
+                        if (!sub.disabled)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
+                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.primary[500] : "transparent", bg: isSubActive ? theme.colors.primary.opacity[16] : "transparent", _hover: {
                         bg: !sub.disabled ? "whiteAlpha.100" : "transparent",
                         cursor: !sub.disabled ? "pointer" : "not-allowed",
                     }, opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {

package/dist/Components/StageProgress/StageItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageItem.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAEL,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAsB9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyIvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StageItem.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StageItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,EAEL,cAAc,EAEf,MAAM,sBAAsB,CAAC;AAsB9B,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0IvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/StageProgress/StageItem.js

@@ -81,7 +81,7 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, role: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : undefined, borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }

package/dist/Components/StageProgress/StepperStage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStage.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StepperStage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAGL,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAW9B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0G7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StepperStage.d.ts","sourceRoot":"","sources":["../../../src/Components/StageProgress/StepperStage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAGL,iBAAiB,EAClB,MAAM,sBAAsB,CAAC;AAW9B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8G7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/StageProgress/StepperStage.js

@@ -31,7 +31,7 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, role: "group", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }

package/dist/Components/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/Components/Table/Table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkC,UAAU,EAAE,MAAM,cAAc,CAAC;AAuB1E,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,SAAiB,EACjB,YAAmB,EACnB,UAAU,EACV,UAAU,EACV,cAAqB,EACrB,WAOC,EACD,cAAyB,EACzB,cAAsB,EACtB,OAAO,EACP,aAAqB,EACrB,aAAqB,EACrB,YAA0B,EAC1B,gBAAwB,EACxB,iBAAiB,EACjB,eAAoB,EACpB,YAAgB,EAChB,YAAY,EACZ,eAAuB,EACvB,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,OAAkB,EAClB,MAAM,EACN,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,GAEV,EAAE,UAAU,2CA8wBZ"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/Components/Table/Table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAkC,UAAU,EAAE,MAAM,cAAc,CAAC;AAuB1E,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,SAAiB,EACjB,YAAmB,EACnB,UAAU,EACV,UAAU,EACV,cAAqB,EACrB,WAOC,EACD,cAAyB,EACzB,cAAsB,EACtB,OAAO,EACP,aAAqB,EACrB,aAAqB,EACrB,YAA0B,EAC1B,gBAAwB,EACxB,iBAAiB,EACjB,eAAoB,EACpB,YAAgB,EAChB,YAAY,EACZ,eAAuB,EACvB,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,OAAkB,EAClB,MAAM,EACN,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,GAEV,EAAE,UAAU,2CAkxBZ"}

package/dist/Components/Table/Table.js

@@ -415,7 +415,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                 scrollbarWidth: 'thin',
                                             },
                                             scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
+                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", role: "grid", "aria-rowcount": isGrouped ? undefined : _filteredData.length + 1, className: "table_wrapper", sx: {
                                                     width: "100%",
                                                     // `separate` (not `collapse`) so sticky header cells paint an opaque
                                                     // background over their borders — collapsed borders bleed scrolling

package/dist/Components/Table/components/HeaderActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/HeaderActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAuDnD,QAAA,MAAM,aAAa,GAAI,0BAGpB;IACD,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CACjC,4CAwEA,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"HeaderActions.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/HeaderActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAiEnD,QAAA,MAAM,aAAa,GAAI,0BAGpB;IACD,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,UAAU,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CACjC,4CAwEA,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -17,7 +17,9 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
         color: "currentColor",
         size: "1.25rem",
     }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+    // A `customComponent` may itself be focusable, and a button must never wrap one.
+    const isButton = !!onClick && !customComponent;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
             ? {
                 color: hoverColor ? hoverColor : (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500],
                 bg: ((_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100]) || "gray.50",

package/dist/Components/Table/components/TableActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAatE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,KAAK,eAAe,GAAG,UAAU,GAAG;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,YAAY,sCAAwB;IAAE,GAAG,CAAC,EAAE,eAAe,CAAA;CAAE,oDA+IjE,CAAC;AAIH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAatE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,KAAK,eAAe,GAAG,UAAU,GAAG;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,YAAY,sCAAwB;IAAE,GAAG,CAAC,EAAE,eAAe,CAAA;CAAE,oDA8IjE,CAAC;AAIH,eAAe,YAAY,CAAC"}

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

@@ -75,15 +75,15 @@ const TableActions = react_1.default.memo(({ row }) => {
     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, 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 ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
                                             var _a;
                                             (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            // handleClose();
+                                            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 ${(_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border[500]}`, borderRadius: 0, onClick: () => {
                                             var _a;
                                             (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            // handleClose();
+                                            handleClose();
                                         }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_c = row === null || row === void 0 ? void 0 : row.actions) === null || _c === void 0 ? void 0 : _c.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();
+                                            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";

package/dist/Components/Table/components/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,kBAAkB,EAAsC,MAAM,eAAe,CAAC;AA2UnG,QAAA,MAAM,SAAS,GAAI,0RAuBhB,kBAAkB,4CAyWpB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,kBAAkB,EAAsC,MAAM,eAAe,CAAC;AA+UnG,QAAA,MAAM,SAAS,GAAI,0RAuBhB,kBAAkB,4CAiZpB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -64,14 +64,8 @@ const getRowContent = (row) => typeof row.content === "function"
 // the fill can be a consumer hex we can't know in advance is light or dark.
 const StatusCell = ({ value, onSolid }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", 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, hoverStyle, rowHeight, cellPy, palette, accentColor, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
-    // cells keep their solid color + white text instead of white-on-tint.
-    const selectedBg = (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16]) !== null && _c !== void 0 ? _c : (_d = theme.colors.disabled) === null || _d === void 0 ? void 0 : _d[100];
-    // Sticky/frozen cells overlay scrolling content, so their selected background
-    // must be OPAQUE — paint the (translucent) tint over an opaque base.
-    const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${(_g = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#fff"}`;
+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, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
     const mainRowRef = (0, react_2.useRef)(null);
@@ -112,11 +106,11 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
     // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
     // as one piece with its header (and so sticky cells cover scrolling content).
-    const frozenCellBg = (_l = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.table) === null || _j === void 0 ? void 0 : _j.hover) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.background) === null || _o === void 0 ? void 0 : _o[100];
+    const frozenCellBg = (_d = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f[100];
     const cellStyles = row.cellStyle;
     const rowStyle = row.rowStyle;
     const rowContent = getRowContent(row);
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.background) === null || _r === void 0 ? void 0 : _r[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d, _e, _f, _g, _h;
                         if (header.isHidden)
                             return null;
@@ -138,13 +132,13 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                                 : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
                                     ? EMPTY_HOVER
                                     : hoverStyle, children: isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: statusOnSolid })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
-                    }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_t = (_s = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _s === void 0 ? void 0 : _s.background) === null || _t === void 0 ? void 0 : _t[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
+                    }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_l = (_k = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: (_u = theme.colors.background) === null || _u === void 0 ? void 0 : _u[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
+                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: (_m = theme.colors.background) === null || _m === void 0 ? void 0 : _m[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
 });
 const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [expandedRows, setExpandedRows] = (0, react_2.useState)(new Set());
     const [collapsedGroups, setCollapsedGroups] = (0, react_2.useState)(new Set());
@@ -224,24 +218,30 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         setScrollTop(0);
     }, [startRow, shouldVirtualize, scrollContainerRef]);
     const total = data.length;
-    let firstIndex = 0;
-    let lastIndex = total;
-    let topPad = 0;
-    let bottomPad = 0;
-    if (shouldVirtualize) {
-        const vh = viewportH || 500;
-        // Prefix-sum offsets using measured heights (exact for rendered rows) and
-        // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
-        const offsets = new Array(total + 1);
-        offsets[0] = 0;
+    // Prefix-sum offsets using measured heights (exact for rendered rows) and
+    // estimates for not-yet-measured rows (ROW_HEIGHT, + ESTIMATED_EXPAND if expanded).
+    // Independent of scrollTop, so scrolling reuses it instead of rebuilding it.
+    const offsets = (0, react_2.useMemo)(() => {
+        if (!shouldVirtualize)
+            return null;
+        const acc = new Array(total + 1);
+        acc[0] = 0;
         for (let i = 0; i < total; i++) {
             const id = getRowId(data[i]);
             const measured = measuredHeights.get(id);
             const h = measured != null
                 ? measured
                 : ROW_HEIGHT + (expandedRows.has(startRow + i) ? ESTIMATED_EXPAND : 0);
-            offsets[i + 1] = offsets[i] + h;
+            acc[i + 1] = acc[i] + h;
         }
+        return acc;
+    }, [shouldVirtualize, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    let firstIndex = 0;
+    let lastIndex = total;
+    let topPad = 0;
+    let bottomPad = 0;
+    if (shouldVirtualize && offsets) {
+        const vh = viewportH || 500;
         const totalH = offsets[total];
         const top = scrollTop - OVERSCAN * ROW_HEIGHT;
         const bottom = scrollTop + vh + OVERSCAN * ROW_HEIGHT;
@@ -257,6 +257,14 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         bottomPad = totalH - offsets[lastIndex];
     }
     const visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    // Consumers pass a fresh closure each render; the ref keeps memoized rows valid.
+    const onRowClickRef = (0, react_2.useRef)(onRowClick);
+    onRowClickRef.current = onRowClick;
+    const handleRowClick = (0, react_2.useCallback)((row, header) => {
+        var _a;
+        (_a = onRowClickRef.current) === null || _a === void 0 ? void 0 : _a.call(onRowClickRef, row, header);
+    }, []);
+    const rowClickHandler = onRowClick ? handleRowClick : undefined;
     const toggleRowExpansion = (0, react_2.useCallback)((rowIndex) => {
         setExpandedRows((prev) => {
             const newSet = new Set(prev);
@@ -278,43 +286,61 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
     }, [columnWidths, isCheckbox]);
     const borderStyle = (0, react_2.useMemo)(() => { var _a; return noBorders ? "none" : `0.063rem solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`; }, [noBorders, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border]);
+    // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
+    // cells keep their solid color + white text instead of white-on-tint.
+    const selectedBg = (_e = (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c.opacity) === null || _d === void 0 ? void 0 : _d[16]) !== null && _e !== void 0 ? _e : (_f = theme.colors.disabled) === null || _f === void 0 ? void 0 : _f[100];
+    // Sticky/frozen cells overlay scrolling content, so their selected background
+    // must be OPAQUE — paint the (translucent) tint over an opaque base.
+    const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${(_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#fff"}`;
     // Dark mode needs a much brighter fill to be visible against a near-black row (`table.hover[300]`
     // sits within ~1.2:1 of it) plus a flipped ink color so the existing (light-tuned) cell text
     // stays legible on that brighter fill — see `tableRowHoverStyle.ts`.
-    const isDark = (0, accentText_1.isDarkCanvas)((_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+    const isDark = (0, accentText_1.isDarkCanvas)((_l = (_k = theme.colors.backgroundColor) === null || _k === void 0 ? void 0 : _k.main) !== null && _l !== void 0 ? _l : "#ffffff");
     const hoverStyle = (0, react_2.useMemo)(() => (0, tableRowHoverStyle_1.getTableRowHoverStyle)(theme.colors, isDark), [theme.colors, isDark]);
+    // Flatten groups → one sequence of header/row items so it can be windowed.
+    // Independent of scrollTop, so scrolling reuses it instead of re-flattening.
+    const groupItems = (0, react_2.useMemo)(() => {
+        if (!groups)
+            return null;
+        const list = [];
+        for (const g of groups) {
+            list.push({ kind: "header", g });
+            if (!collapsedGroups.has(g.value)) {
+                for (const row of g.rows)
+                    list.push({ kind: "row", g, row });
+            }
+        }
+        return list;
+    }, [groups, collapsedGroups]);
+    const groupMetrics = (0, react_2.useMemo)(() => {
+        if (!groupItems || !groupVirtualize)
+            return null;
+        const heights = groupItems.map((it) => (it.kind === "header" ? GROUP_HEADER_H : rowHeight));
+        const offsets = [];
+        let acc = 0;
+        for (const h of heights) {
+            offsets.push(acc);
+            acc += h;
+        }
+        return { heights, offsets, totalH: acc };
+    }, [groupItems, groupVirtualize, rowHeight, GROUP_HEADER_H]);
     if (isLoading && data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
     if (!isLoading && data.length === 0) {
         const isStructured = emptyState && typeof emptyState === "object" && !react_2.default.isValidElement(emptyState);
         const es = isStructured ? emptyState : null;
-        return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: (_e = theme.colors.background) === null || _e === void 0 ? void 0 : _e[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray) === null || _g === void 0 ? void 0 : _g[500], children: [(es === null || es === void 0 ? void 0 : es.icon) && (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.75rem", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[400], children: es.icon }), (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.95rem", fontWeight: 600, color: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.text) === null || _l === void 0 ? void 0 : _l[700], children: (_m = es === null || es === void 0 ? void 0 : es.title) !== null && _m !== void 0 ? _m : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.8125rem", color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[500], children: es.description }))] })) }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: (_m = theme.colors.background) === null || _m === void 0 ? void 0 : _m[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 10, border: "none", children: emptyState && !isStructured ? emptyState : ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, color: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[500], children: [(es === null || es === void 0 ? void 0 : es.icon) && (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "1.75rem", color: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[400], children: es.icon }), (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.95rem", fontWeight: 600, color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.text) === null || _t === void 0 ? void 0 : _t[700], children: (_u = es === null || es === void 0 ? void 0 : es.title) !== null && _u !== void 0 ? _u : "No data found" }), (es === null || es === void 0 ? void 0 : es.description) && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "0.8125rem", color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], children: es.description }))] })) }) }));
     }
     // --- Monday-style grouped board render (virtualized when large) -----------
     if (groups) {
-        // Flatten groups → one sequence of header/row items so it can be windowed.
-        const items = [];
-        for (const g of groups) {
-            items.push({ kind: "header", g });
-            if (!collapsedGroups.has(g.value)) {
-                for (const row of g.rows)
-                    items.push({ kind: "row", g, row });
-            }
-        }
+        const items = groupItems !== null && groupItems !== void 0 ? groupItems : [];
         let firstI = 0;
         let lastI = items.length;
         let gTopPad = 0;
         let gBottomPad = 0;
-        if (groupVirtualize) {
-            const heights = items.map((it) => (it.kind === "header" ? GROUP_HEADER_H : rowHeight));
-            const offsets = [];
-            let acc = 0;
-            for (const h of heights) {
-                offsets.push(acc);
-                acc += h;
-            }
-            const totalH = acc;
+        if (groupVirtualize && groupMetrics) {
+            const { heights, offsets, totalH } = groupMetrics;
             const vh = viewportH || 500;
             const top = scrollTop - OVERSCAN * rowHeight;
             const bottom = scrollTop + vh + OVERSCAN * rowHeight;
@@ -328,22 +354,22 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
                     break;
                 }
             }
-            gTopPad = (_q = offsets[firstI]) !== null && _q !== void 0 ? _q : 0;
+            gTopPad = (_x = offsets[firstI]) !== null && _x !== void 0 ? _x : 0;
             gBottomPad = totalH - (lastI > firstI ? offsets[lastI - 1] + heights[lastI - 1] : gTopPad);
         }
         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, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : ((0, jsx_runtime_1.jsx)(TableRow, { row: it.row, rowIndex: firstI + k, index: 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, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }, (_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, index: 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, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_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: ((_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s[500]) || "blue.500" }) }) }) })), 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) => {
+    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: ((_z = (_y = theme.colors) === null || _y === void 0 ? void 0 : _y.primary) === null || _z === void 0 ? void 0 : _z[500]) || "blue.500" }) }) }) })), 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) => {
                 var _a;
                 const index = firstIndex + i;
                 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, index: index, 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, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], handleCheckbox: handleCheckbox, onRowClick: onRowClick, 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, index: index, 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)], ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : 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/TableGroupRow.d.ts

@@ -7,6 +7,7 @@ type Props = {
     color: TablePaletteColor;
     collapsed: boolean;
     colSpan: number;
+    ariaRowIndex?: number;
     onToggle: () => void;
     onAddItem?: (groupValue: string | number) => void;
 };

package/dist/Components/Table/components/TableGroupRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableGroupRow.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableGroupRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqEzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"TableGroupRow.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableGroupRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAsEzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -6,10 +6,10 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 /** Monday-style colored, collapsible group header row. */
-const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, onToggle, onAddItem, }) => {
+const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
     var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${(_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b[500]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-rowindex": ariaRowIndex, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${(_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b[500]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: { bg: "whiteAlpha.500", color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
 };
 exports.TableGroupRow = TableGroupRow;
 exports.default = exports.TableGroupRow;

package/dist/Components/Table/components/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAGL,oBAAoB,EACrB,MAAM,eAAe,CAAC;iTAyBpB,oBAAoB;AA+GvB,wBAAiC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAI9C,OAAO,EAEL,oBAAoB,EACrB,MAAM,eAAe,CAAC;iTAyBpB,oBAAoB;AA2CvB,wBAAiC"}

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

@@ -13,44 +13,42 @@ const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
-    const RenderCheckbox = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
-    }, [
-        checked,
-        freezedTextColor,
-        handleCheckbox,
-        isLoading,
-        isSelecting,
-        noBorders,
-        theme.colors,
-    ]);
-    const RenderConent = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
-    }, [noBorders, theme.colors]);
-    const RenderView = (0, react_2.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return ((0, jsx_runtime_1.jsx)(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
-    }, [noBorders, theme.colors, isActionFreeze]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, children: [isContent && (0, jsx_runtime_1.jsx)(RenderConent, {}), isCheckbox && (0, jsx_runtime_1.jsx)(RenderCheckbox, {}), columns.map((header, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
                 return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, header.label));
-            }), isLink && (0, jsx_runtime_1.jsx)(RenderView, {})] }));
+            }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
-const SortingIcon = (0, react_2.memo)(({ sortState, handleSortClick, }) => {
+const SelectAllCell = (0, react_2.memo)(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
+});
+const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+});
+const ViewSpacerCell = (0, react_2.memo)(({ noBorders, isActionFreeze, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+});
+const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSortClick, }) => {
     var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": `Sort by ${label}`, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, p: 0, border: "none", bg: "transparent", lineHeight: "1", onClick: handleSortClick, transition: "color 0.2s ease-in-out, opacity 0.2s ease-in-out", 
+        // Kept out of view until hover/focus so the header looks exactly as it did,
+        // while staying in the DOM and reachable by Tab.
+        opacity: isVisible ? 1 : 0, _focus: { opacity: 1 }, _focusVisible: { opacity: 1 }, color: theme.colors.gray[600], _hover: {
+            opacity: 1,
             color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50]),
         }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
 const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const [isHovered, setIsHovered] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isFrozen = header.isFreeze;
@@ -87,22 +85,17 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbo
         document.addEventListener("mousemove", onMouseMove);
         document.addEventListener("mouseup", onMouseUp);
     };
-    const Sorting = (0, react_2.useCallback)(({ isSorting, header }) => {
-        var _a;
-        return ((0, jsx_runtime_1.jsx)(SortingIcon, { sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", handleSortClick: () => {
-                let direction = "asc";
-                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
-                    direction = "desc";
-                }
-                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
-                    direction = "none";
-                }
-                handleSort(header.id, direction);
-            } }));
-    }, [handleSort]);
-    const isFiltersEnabled = (isHovered && header.isSort) ||
-        ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [isFiltersEnabled && ((0, jsx_runtime_1.jsx)(Sorting, { isSorting: isSorting, header: header })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_v = (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u.opacity) === null || _v === void 0 ? void 0 : _v[16], color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+    const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: String(header.label), sortState: (_t = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _t !== void 0 ? _t : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
+                                let direction = "asc";
+                                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                                    direction = "desc";
+                                }
+                                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                                    direction = "none";
+                                }
+                                handleSort(header.id, direction);
+                            } })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_w = (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.primary) === null || _v === void 0 ? void 0 : _v.opacity) === null || _w === void 0 ? void 0 : _w[16], color: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.primary) === null || _y === void 0 ? void 0 : _y[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

package/dist/Components/Table/components/TableSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableSearch.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoE3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TableSearch.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableSearch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4E3C,CAAC;AAEF,eAAe,WAAW,CAAC"}