pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

package/dist/Components/StageProgress/StageProgress.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
 const StageItem_1 = __importDefault(require("./StageItem"));
 const StepperStage_1 = __importDefault(require("./StepperStage"));
 const centerInStrip_1 = require("./centerInStrip");
@@ -18,8 +20,12 @@ const gapFor = {
     stepper: "0",
 };
 /** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
-const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
+const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, "aria-label": ariaLabel, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { ref: stripRef, props: stripProps } = (0, useScrollableRegion_1.useScrollableRegion)({
+        label: ariaLabel,
+        keepRole: variant === "stepper",
+    });
     if (isLoading) {
         const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
         return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "lg", flexShrink: 0 }, i))) }));
@@ -33,7 +39,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"), [centerInStrip_1.STRIP_ATTRIBUTE]: "", children: stages.map((stage, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: variant === "stepper" ? "ol" : undefined, ref: stripRef, ...stripProps, 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"), ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors) }, [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

@@ -46,6 +46,8 @@ export interface StageProgressProps {
     scrollActiveIntoView?: boolean;
     /** Also only applies to chevron/bar/pills — variant="stepper" never shows a tooltip, however long the label. */
     tooltipThreshold?: number;
+    /** Names the strip while it overflows with no interactive stage and so takes keyboard focus; a stepper keeps its list role. */
+    "aria-label"?: string;
 }
 /** Props for one chevron/bar/pills stage; variant="stepper" renders StepperStage/StepperStageProps instead. */
 export interface StageItemProps {

package/dist/Components/StageProgress/StepperStage.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const primitives_1 = require("../../Theme/tokens/primitives");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const StageProgressProps_1 = require("./StageProgressProps");
@@ -31,7 +32,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: (0, primitives_1.transitionFor)(["background"], "base") }));
-    const node = ((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": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : 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: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    const node = ((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": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? states_1.DISABLED_OPACITY : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : 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: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }

package/dist/Components/StickyBuyBar/StickyBuyBar.js

@@ -15,6 +15,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const motion_2 = require("../../Theme/chakra/motion");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const DEFAULT_LABELS = {
     region: "Buy",
     add: "Add to bag",
@@ -77,7 +78,7 @@ const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "st
                                     if (!inert)
                                         (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
                                 }, sx: {
-                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: colors.background[200] } } : {}),
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: (0, tonalHover_1.tonalHover)(colors) } } : {}),
                                     ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
                                     display: "grid",
                                 }, children: STACK_ORDER.map(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));

package/dist/Components/Table/Table.js

@@ -38,9 +38,11 @@ const ActiveFilters_1 = __importDefault(require("./filters/ActiveFilters"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
 // NOTE: MOTION_EASE as framer bezier points; the motion tokens have no points form yet.
-const PANE_EASE = [0.2, 0, 0, 1];
+const PANE_TRANSITION = { type: "tween", ...(0, motion_1.motionTransition)("base") };
+const PANE_TRANSITION_INSTANT = { ...PANE_TRANSITION, duration: 0 };
 /** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
 function Table({ data, columns, onSelection, isLoading, isCheckbox = false, freezedBgColor, freezedTextColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
@@ -393,7 +395,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", ease: PANE_EASE, duration: prefersReducedMotion ? 0 : motion_1.MOTION_MS.base / 1000 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: (0, planeStep_1.cardRule)(theme.colors), style: { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [[
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.surfaceRaised, my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { "data-testid": "filter-sidebar-pane", initial: false, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: prefersReducedMotion ? PANE_TRANSITION_INSTANT : PANE_TRANSITION, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: (0, planeStep_1.cardRule)(theme.colors), style: { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: rowMetrics_1.TOOLBAR_HEIGHT + formulaMaxH, theme: theme, sections: (_e = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _e !== void 0 ? _e : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: `${rowMetrics_1.TOOLBAR_HEIGHT}px`, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [[
                                                 filterSidebar && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Filter", "aria-haspopup": filterMode === "modal" ? "dialog" : undefined, "aria-expanded": filterMode === "modal"
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
@@ -457,5 +459,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, hasDetail: !!rowDetail, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, rowDetail: rowDetail, expandedIds: expandedIds, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(theme.colors)}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -11,6 +11,8 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const hoverFill = (colors) => (0, planeStep_1.bandOn)(colors.background[100], colors.background[50]);
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const styledIcon = icon ? react_2.default.cloneElement(icon, {
@@ -21,8 +23,8 @@ const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hov
     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: colors.text[500], px: 2, py: 1, borderRadius: "lg", _hover: isHoverEnabled
             ? {
-                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]),
-                bg: colors.background[100],
+                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)),
+                bg: hoverFill(colors),
             }
             : {}, transition: (0, motion_1.transitionFor)(["color", "background-color"], "base"), children: [customComponent, styledIcon, " ", name] }));
 };
@@ -38,7 +40,7 @@ const HeaderActions = ({ actions, selections, }) => {
                     return ((0, jsx_runtime_1.jsx)(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
                 }
                 return null;
-            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
+            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, hoverFill(colors)) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
                         if ("type" in item && item.type === "divider") {
                             return (0, jsx_runtime_1.jsx)(Divider_1.default, {}, index);
                         }

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

@@ -57,6 +57,7 @@ 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 borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -90,6 +91,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 NO_OFFSETS = [];
 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);
@@ -151,7 +153,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    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: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, 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: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, 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: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), 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: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: "sm", background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {})) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {})), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
@@ -166,14 +168,14 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
                         const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: "sm", fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
-                                : `0.063rem solid ${isFrozen || isChecked
+                                : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
                                     : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
                                 : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: bleedInk, align: header.align })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((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 : restBg, 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: "sm", background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, 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: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) })), detailOpen && detailIds && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailRow, { ref: detailRowRef, id: detailIds.detailId, labelledBy: detailIds.cellId, colSpan: detailColSpan, bg: theme.colors.backgroundColor.secondary, borderColor: variant.row.ruleColor, noBorders: noBorders, children: detailNode }))] }));
@@ -343,11 +345,14 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         (isContent ? 1 : 0) +
         (rowDetail ? 1 : 0) +
         (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink, rowDetail]);
+    const hasFrozenColumn = (0, react_2.useMemo)(() => columns.some((column) => column.isFreeze), [columns]);
     const leftOffsets = (0, react_2.useMemo)(() => {
+        if (!hasFrozenColumn)
+            return NO_OFFSETS;
         const checkboxOffset = (isCheckbox ? slotWidth : 0) + detailWidth;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox, slotWidth, detailWidth]);
-    const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
+    }, [hasFrozenColumn, columnWidths, isCheckbox, slotWidth, detailWidth]);
+    const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // 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 = variant.row.selectedBg;
@@ -465,7 +470,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, measurer: groupVirtualize && rowDetail ? measurer : 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: rowDetail ? detailLeft : 0, 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) => {
@@ -474,7 +479,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, measurer: shouldVirtualize ? measurer : 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: rowDetail ? detailLeft : 0, 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/TableGroupRow.js

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 /** Monday-style colored, collapsible group header row. */
 const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    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 ${theme.colors.boxborder[200]}`, 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: theme.colors.background[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: "lg", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], 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: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${theme.colors.boxborder[200]}`, 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: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "px", 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: "lg", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], 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.js

@@ -22,6 +22,7 @@ const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const rowDetail_1 = require("./rowDetail");
 const TableLoading_1 = require("./TableLoading");
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
+const NEXT_SORT = { none: "asc", asc: "desc", desc: "none" };
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
     const variant = (0, TableVariantContext_1.useTableVariant)();
@@ -35,7 +36,7 @@ exports.default = (0, react_2.memo)(TableHeader);
 const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: "sm", fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
 });
 const LoadingHeaderCells = ({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
@@ -43,11 +44,11 @@ const LoadingHeaderCells = ({ noBorders }) => {
 };
 const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
 });
 const ViewSpacerCell = (0, react_2.memo)(({ noBorders, isActionFreeze, }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
 });
 const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSortClick, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -70,6 +71,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)
         : undefined;
+    const sortState = (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none";
     const activeSorts = columnsSort.filter((o) => o.direction !== "none");
     const sortPriority = activeSorts.length > 1 && isSorting && isSorting.direction !== "none"
         ? activeSorts.findIndex((o) => o.column === header.id) + 1
@@ -79,6 +81,13 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth
         : (isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc"
             ? "descending"
             : undefined;
+    const handleSortClick = (0, react_2.useCallback)(() => handleSort(header.id, NEXT_SORT[sortState]), [handleSort, header.id, sortState]);
+    const handleSearch = (0, react_2.useCallback)((searchVal) => setColumnsSearch((prev) => ({ ...prev, [header.id]: searchVal })), [setColumnsSearch, header.id]);
+    const handleFilterClose = (0, react_2.useCallback)(() => {
+        setIsHovered(false);
+        setOpenFilterId(null);
+    }, [setOpenFilterId]);
+    const handleFilterOpen = (0, react_2.useCallback)(() => setOpenFilterId(header.id), [setOpenFilterId, header.id]);
     const handleMouseDown = (e) => {
         const parentBox = e.target
             .parentElement;
@@ -104,22 +113,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth
         isSortActive ||
         openFilterId === header.id ||
         !!columnsSearch[header.id];
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textAlign: align, textTransform: variant.header.textTransform, fontSize: variant.header.fontSize, fontWeight: variant.header.fontWeight, letterSpacing: variant.header.letterSpacing, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffset}px` : undefined, minWidth: 120, backgroundColor: variant.header.bg, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: align === "end" ? undefined : 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, borderRight: noBorders || !variant.header.showColumnRule
             ? "none"
-            : `0.063rem solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, 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", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: (0, columnLabel_1.columnLabelText)(header), sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "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: theme.colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, variant.header.bg), 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: () => {
-                                setIsHovered(false);
-                                setOpenFilterId(null);
-                            }, isOpen: openFilterId === header.id, onOpen: () => setOpenFilterId(header.id) })] }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
+            : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: variant.header.height, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: variant.header.ink, lineHeight: "1.25rem", justifyContent: LABEL_JUSTIFY[align], flexDirection: align === "end" ? "row-reverse" : "row", gap: align === "end" ? 1 : undefined, alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: align, 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", opacity: showActions ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), _focusWithin: { opacity: 1 }, children: [header.isSort && ((0, jsx_runtime_1.jsx)(SortingIcon, { label: (0, columnLabel_1.columnLabelText)(header), sortState: sortState, isVisible: isHovered || isSortActive, handleSortClick: handleSortClick })), 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: theme.colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, variant.header.bg), children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: handleSearch, columnsSearch: columnsSearch[header.id] || "", onClose: handleFilterClose, isOpen: openFilterId === header.id, onOpen: handleFilterOpen })] }), (0, jsx_runtime_1.jsx)("div", { className: "resize-handle", onMouseDown: handleMouseDown })] }) }, index + 1));
 });

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

@@ -6,15 +6,16 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 exports.DETAIL_SLOT_PX = 40;
 const detailDomIds = (prefix, rowId) => {
     const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
     return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
 };
 exports.detailDomIds = detailDomIds;
-const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => ((0, jsx_runtime_1.jsx)(react_2.Th, { scope: "col", w: `${exports.DETAIL_SLOT_PX}px`, minW: `${exports.DETAIL_SLOT_PX}px`, maxW: `${exports.DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `0.063rem solid ${ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: "Row details" }) }));
+const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => ((0, jsx_runtime_1.jsx)(react_2.Th, { scope: "col", w: `${exports.DETAIL_SLOT_PX}px`, minW: `${exports.DETAIL_SLOT_PX}px`, maxW: `${exports.DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: "Row details" }) }));
 exports.RowDetailHeaderCell = RowDetailHeaderCell;
 const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors) }));
 exports.RowDetailToggle = RowDetailToggle;
-exports.RowDetailRow = (0, react_1.forwardRef)(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => ((0, jsx_runtime_1.jsx)(react_2.Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `0.063rem solid ${borderColor}`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { px: 4, py: 3, children: children }) }) })));
+exports.RowDetailRow = (0, react_1.forwardRef)(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => ((0, jsx_runtime_1.jsx)(react_2.Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${borderColor}`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { px: 4, py: 3, children: children }) }) })));
 exports.RowDetailRow.displayName = "RowDetailRow";

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

@@ -42,14 +42,17 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const columnLabel_1 = require("../columnLabel");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const filterTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.primary);
+    const stripFill = (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.background[50]);
+    const filterTone = (0, tone_1.resolveSoftTone)(theme.colors, theme.colors.primary, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? stripFill : undefined);
     const columnLabelMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         for (const col of columns) {
@@ -77,9 +80,9 @@ const ActiveFilters = react_1.default.memo(({ columns, columnsSearch, setColumns
     if (activeFilters.length === 0) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), activeFilters.map((filter) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `0.063rem solid ${filterTone.border}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, bg: stripFill, overflowX: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), activeFilters.map((filter) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: filterTone.bg, borderRadius: "full", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${filterTone.border}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: filterTone.fg, whiteSpace: "nowrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
                                 bg: filterTone.hoverBg,
-                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", className: "clear-all-text", "aria-label": "Clear all filters", fontSize: "sm", bg: "transparent", border: "none", p: 0, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, stripFill), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                         textDecoration: "underline",
                     }, flexShrink: 0, whiteSpace: "nowrap", borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: "Clear All" }))] }) }));
 });

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

@@ -10,6 +10,7 @@ const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const optionRowSizes_1 = require("../../../Theme/tokens/primitives/optionRowSizes");
 const optionRowInk_1 = require("../../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../../Hooks/useExclusiveOverlay");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
@@ -52,7 +53,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "lg", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "lg", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "ArrowDown" && filtered.length > 0) {
                                             e.preventDefault();
                                             focusOption(0);

package/dist/Components/Table/filters/FilterDatePicker.d.ts

@@ -0,0 +1,6 @@
+import type { SingleDatePickerDateProps } from "../../DatePicker/DatePickerProps";
+type DatePickerProps = SingleDatePickerDateProps;
+export declare const preloadFilterDatePicker: () => void;
+/** The Table's date filter control; DatePicker and date-fns load on first use. */
+export default function FilterDatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preloadFilterDatePicker = void 0;
+exports.default = FilterDatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const lazyWithRetry_1 = require("../../../Utils/lazyWithRetry");
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+let loadedPicker = null;
+const loadDatePicker = () => Promise.resolve().then(() => __importStar(require("../../DatePicker/DatePicker"))).then((mod) => {
+    loadedPicker = mod.default;
+    return mod;
+});
+const LazyDatePicker = (0, lazyWithRetry_1.lazyWithRetry)(loadDatePicker);
+const preloadFilterDatePicker = () => {
+    if (!loadedPicker)
+        loadDatePicker().catch(() => undefined);
+};
+exports.preloadFilterDatePicker = preloadFilterDatePicker;
+/** The Table's date filter control; DatePicker and date-fns load on first use. */
+function FilterDatePicker(props) {
+    const [DatePicker] = (0, react_1.useState)(() => loadedPicker !== null && loadedPicker !== void 0 ? loadedPicker : LazyDatePicker);
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: controlSizes_1.CONTROL_SIZES.sm.height, borderRadius: "md" }), children: (0, jsx_runtime_1.jsx)(DatePicker, { ...props }) }));
+}

package/dist/Components/Table/filters/LeftFilterPane.d.ts

@@ -30,6 +30,7 @@ export type SelectedFilterItem = {
     value?: unknown;
     type?: "text" | "select" | "user" | "date";
 };
+/** Left-hand filter pane for Table, as a sidebar or a modal. */
 export type LeftFilterPaneProps = {
     title?: string;
     /** Ignored when `filterMode="modal"` — height is forced to 100% then. */