pixelize-design-library 2.4.2 → 3.0.0

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

@@ -4,34 +4,43 @@ import type { FilterValues } from "../filterTypes";
 export type FilterItem = {
     id: string;
     label: string;
+    /** Omit it and the item is a value-less toggle — no operator/value control ever renders. */
     type?: "text" | "select" | "user" | "date";
     option?: {
         id: string;
         label: string;
     }[];
-    /** Alternate options key used by some consumers */
+    /** Takes precedence over `option` when both are set; `option` is only used as a fallback. */
     selectOption?: Options[];
 };
 export type FilterSection = {
     id: string;
     label: string;
     items?: FilterItem[];
+    /** Only effective with 2+ sections (Accordion) — a single section always renders expanded. */
     initiallyExpanded?: boolean;
+    /** Renders single-select radio buttons instead of checkboxes; only the first `selected` entry is used. */
     radio?: boolean;
 };
 export type SelectedFilterItem = {
     id: string;
+    /** Must match an operator from TEXT_OPERATORS (text) or "is"/"is not" (select/user); unused for date. */
     condition?: string;
+    /** Shape follows `type`: string for text, `Date` for date, a full `{id,label}` object for select/user. */
     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. */
     height?: number | string;
     sections: FilterSection[];
     selected?: FilterValues;
+    /** Also fires on Clear All, but only when `filterMode` is "sidebar" (the default). */
     onApply?: (selected: FilterValues) => void;
     onClear?: () => void;
+    /** Required — unlike most components here, this is not read internally via `useCustomTheme`. */
     theme: CustomThemeProps;
     isApplyLoading?: boolean;
     filterMode?: "sidebar" | "modal";

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

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const framer_motion_1 = require("framer-motion");
+const motion_1 = require("../../../Theme/chakra/motion");
 const react_3 = require("@chakra-ui/react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
@@ -48,7 +49,8 @@ const RadioButton_1 = require("../../RadioButton/RadioButton");
 const TextOperationControls_1 = require("./TextOperationControls");
 const SelectOperationControls_1 = require("./SelectOperationControls");
 const CompactSelect_1 = __importDefault(require("./CompactSelect"));
-const DatePicker_1 = __importDefault(require("../../DatePicker/DatePicker"));
+const FilterDatePicker_1 = __importStar(require("./FilterDatePicker"));
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 const getSectionItems = (selected, sectionId) => {
     const value = selected[sectionId];
@@ -83,7 +85,7 @@ const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue })
     if (!activeItem)
         return null;
     if (activeItem.type === "date") {
-        return ((0, jsx_runtime_1.jsx)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+        return ((0, jsx_runtime_1.jsx)(FilterDatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
     }
     if (activeItem.type === "text") {
         return ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), onValueChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
@@ -121,14 +123,20 @@ const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextVal
                             textOverflow: "ellipsis",
                             ".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
                             ".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
-                        } }), checked && it.type === "date" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
+                        } }), checked && it.type === "date" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(FilterDatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
         }) }));
 };
 // ─── Main Component ───────────────────────────────────────────────────────────
 const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
+    const prefersReducedMotion = (0, motion_1.usePrefersReducedMotion)();
     const [isSearching, setIsSearching] = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
     const [localSelected, setLocalSelected] = (0, react_1.useState)({});
     const searchRef = (0, react_1.useRef)(null);
+    const hasDateItem = sections.some((sec) => { var _a; return (_a = sec.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.type === "date"); });
+    (0, react_1.useEffect)(() => {
+        if (hasDateItem)
+            (0, FilterDatePicker_1.preloadFilterDatePicker)();
+    }, [hasDateItem]);
     (0, react_1.useEffect)(() => {
         setLocalSelected(selectedProp || {});
         if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
@@ -202,10 +210,10 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 4, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No filters found" }) }));
         }
         if (filteredSections.length > 1) {
-            return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.AccordionItem, { border: "none", children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: theme.colors.background[100] }, children: [(0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, flex: true, theme: theme }), (0, jsx_runtime_1.jsx)(react_2.AccordionIcon, {})] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.AccordionItem, { border: "none", children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.background[50]) }, children: [(0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, flex: true, theme: theme }), (0, jsx_runtime_1.jsx)(react_2.AccordionIcon, {})] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
         }
-        return filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
+        return filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search filters", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: theme.colors.text[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", color: theme.colors.onPrimary, size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search filters", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: prefersReducedMotion ? false : { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: theme.colors.text[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 exports.default = LeftFilterPane;

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

@@ -1,8 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectOperationControls = SelectOperationControls;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const OPERATOR_OPTIONS = [
+    { id: "is", label: "is" },
+    { id: "is not", label: "is not" },
+];
 function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: (0, jsx_runtime_1.jsxs)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "90px", children: [(0, jsx_runtime_1.jsx)("option", { value: "is", children: "is" }), (0, jsx_runtime_1.jsx)("option", { value: "is not", children: "is not" })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "90px", options: OPERATOR_OPTIONS, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }) }));
 }

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

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

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

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.requiresValue = exports.TEXT_OPERATORS = void 0;
 exports.TextOperationControls = TextOperationControls;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const TextInput_1 = __importDefault(require("../../Input/TextInput"));
 exports.TEXT_OPERATORS = [
     "is",
     "is not",
@@ -17,5 +23,6 @@ exports.TEXT_OPERATORS = [
 const requiresValue = (op) => !(op === "is empty" || op === "is not empty");
 exports.requiresValue = requiresValue;
 function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [(0, jsx_runtime_1.jsx)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "110px", children: exports.TEXT_OPERATORS.map((op) => ((0, jsx_runtime_1.jsx)("option", { value: op, children: op }, op))) }), (0, exports.requiresValue)(operator) && ((0, jsx_runtime_1.jsx)(react_1.Input, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))] }));
+    const options = (0, react_2.useMemo)(() => exports.TEXT_OPERATORS.map((op) => ({ id: op, label: op })), []);
+    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [(0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "110px", options: options, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }), (0, exports.requiresValue)(operator) && ((0, jsx_runtime_1.jsx)(TextInput_1.default, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), width: "100%" }))] }));
 }

package/dist/Components/Table/hooks/useRowExpansion.d.ts

@@ -0,0 +1,7 @@
+type RowId = string | number;
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+export declare const useRowExpansion: (controlled: RowId[] | undefined, onChange: ((ids: RowId[]) => void) | undefined) => {
+    expandedIds: Set<RowId>;
+    toggle: (id: RowId) => void;
+};
+export {};

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowExpansion = void 0;
+const react_1 = require("react");
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+const useRowExpansion = (controlled, onChange) => {
+    const [internal, setInternal] = (0, react_1.useState)([]);
+    const isControlled = controlled !== undefined;
+    const current = isControlled ? controlled : internal;
+    const currentRef = (0, react_1.useRef)(current);
+    currentRef.current = current;
+    const isControlledRef = (0, react_1.useRef)(isControlled);
+    isControlledRef.current = isControlled;
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    const toggle = (0, react_1.useCallback)((id) => {
+        var _a;
+        const prev = currentRef.current;
+        const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
+        if (!isControlledRef.current)
+            setInternal(next);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next);
+    }, []);
+    const expandedIds = (0, react_1.useMemo)(() => new Set(current), [current]);
+    return { expandedIds, toggle };
+};
+exports.useRowExpansion = useRowExpansion;

package/dist/Components/Table/hooks/useTable.d.ts

@@ -1,6 +1,5 @@
 import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
 type UseTableProps = {
-    tableBorderColor?: string;
     data: DataObject[];
     isPagination: boolean;
     selections?: (string | number)[];
@@ -13,29 +12,26 @@ type UseTableProps = {
     totalRecords: number;
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     defaultVisibleColumns?: number;
+    columnsSearch: Record<string, string>;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
+export declare const DEFAULT_PAGE_SIZE = 20;
+declare const useTable: ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }: UseTableProps) => {
     tableData: DataObject[];
-    tableContainerStyles: {
-        borderRadius: string;
-        borderWidth: string;
-        borderColor: string;
-        boxShadow: string;
-        maxHeight: string;
-        overflowY: string;
-    };
     isContent: boolean;
     isLink: boolean;
     headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;
     columnWidths: number[];
+    slotRef: (node: HTMLTableCellElement | null) => void;
+    slotWidth: number;
     handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
     handleCheckbox: (id: string | number) => void;
     filteredData: DataObject[];
+    searchedData: DataObject[];
     startRow: number;
     endRow: number;
     selection: (string | number)[];
     columnsSort: ColumnSortingProps[];
-    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    handlePageSizeChange: (size: number) => void;
     pages: number;
     currentPage: number;
     rowsPerPage: number;

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

@@ -1,27 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PAGE_SIZE = void 0;
 const react_1 = require("react");
-const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const table_1 = require("../../../Utils/table");
-const defaultPageSize = 20;
+const columnLabel_1 = require("../columnLabel");
+exports.DEFAULT_PAGE_SIZE = 20;
+const defaultPageSize = exports.DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
+    var _a;
     if (!pref || typeof pref !== "object") {
         return { ...originalCol };
     }
     const next = { ...originalCol };
-    if (typeof pref.isHidden === "boolean") {
-        next.isHidden = pref.isHidden;
-    }
-    if (typeof pref.label === "string" || typeof pref.label === "number") {
+    next.isHidden =
+        typeof pref.isHidden === "boolean" ? pref.isHidden : (_a = originalCol === null || originalCol === void 0 ? void 0 : originalCol.isHidden) !== null && _a !== void 0 ? _a : false;
+    if ((0, columnLabel_1.isPrimitiveLabel)(pref.label) && (0, columnLabel_1.isPrimitiveLabel)(originalCol === null || originalCol === void 0 ? void 0 : originalCol.label)) {
         next.label = pref.label;
     }
     return next;
 };
-const useTable = ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }) => {
-    var _a, _b;
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
+const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
     const headerRefs = (0, react_1.useRef)([]);
+    const slotObserver = (0, react_1.useRef)(null);
     const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
+    const [slotWidth, setSlotWidth] = (0, react_1.useState)(0);
+    // Frozen columns butt against the select-all cell, so its width is watched, not assumed.
+    const slotRef = (0, react_1.useCallback)((node) => {
+        var _a;
+        (_a = slotObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        slotObserver.current = null;
+        if (!node) {
+            setSlotWidth(0);
+            return;
+        }
+        const observer = new ResizeObserver(() => setSlotWidth(node.offsetWidth));
+        observer.observe(node);
+        slotObserver.current = observer;
+    }, []);
     const [selection, setSelection] = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []);
     const [columnsSort, setColumnsSort] = (0, react_1.useState)([]);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
@@ -46,72 +66,87 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
     (0, react_1.useEffect)(() => {
         var _a;
         const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
-        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
-            const mergedColumns = columnPreference.map((originalCol) => {
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
                 const prefCol = columns.find((c) => c.id === originalCol.id);
                 return prefCol
                     ? mergeColumnWithPreference(originalCol, prefCol)
                     : { ...originalCol };
-            });
-            setColumnsList(mergedColumns);
-        }
-        else {
-            setColumnsList(columns.map((col, i) => {
+            })
+            : columns.map((col, i) => {
                 var _a;
                 return ({
                     ...col,
                     isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
                 });
-            }));
-        }
+            });
+        // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
+        setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const tableContainerStyles = (0, react_1.useMemo)(() => ({
-        borderRadius: "10px 0 0 10px",
-        borderWidth: "0px 0px 0px 5px",
-        borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : theme.colors.boxborder[500],
-        boxShadow: theme.shadows.lg,
-        maxHeight: "50vh",
-        overflowY: "auto",
-    }), [tableBorderColor, theme]);
-    const prevIsContent = (0, react_1.useRef)(false);
-    const prevIsLink = (0, react_1.useRef)(false);
-    const isContent = (0, react_1.useMemo)(() => {
-        const result = tableData.some((o) => o.content);
-        prevIsContent.current = result;
-        return result;
-    }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    const isLink = (0, react_1.useMemo)(() => {
-        const result = tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
-        prevIsLink.current = result;
-        return result;
-    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    const { isContent, isLink } = (0, react_1.useMemo)(() => {
+        let content = false;
+        let link = false;
+        for (const row of tableData) {
+            content = content || Boolean(row.content);
+            link = link || Boolean(row.onLink || row.onDelete || row.onEdit);
+            if (content && link)
+                break;
+        }
+        return { isContent: content, isLink: link };
+    }, [tableData]);
     (0, react_1.useEffect)(() => {
         const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
         setColumnWidths(widths);
     }, []);
+    const prevLengthRef = (0, react_1.useRef)(tableData.length);
+    (0, react_1.useEffect)(() => {
+        if (prevLengthRef.current === tableData.length)
+            return;
+        prevLengthRef.current = tableData.length;
+        if (!isServerPagination)
+            setCurrentPage(0);
+    }, [tableData.length, isServerPagination]);
+    const hasColumnSearch = (0, react_1.useMemo)(() => Object.values(columnsSearch).some((value) => value.trim() !== ""), [columnsSearch]);
+    // Column search runs before the page slice, or it would only ever see one page.
+    const searchedData = (0, react_1.useMemo)(() => (hasColumnSearch ? (0, table_1.searchAndSortData)(tableData, columnsSearch) : tableData), [hasColumnSearch, columnsSearch, tableData]);
     const pages = (0, react_1.useMemo)(() => {
         if (isServerPagination) {
             return Math.ceil(totalRecords / (rowsPerPage || 1));
         }
-        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+        return isPagination ? Math.ceil(searchedData.length / rowsPerPage) : 0;
     }, [
         isPagination,
         rowsPerPage,
-        tableData.length,
+        searchedData.length,
         totalRecords,
         isServerPagination,
     ]);
     const startRow = (0, react_1.useMemo)(() => (!isPagination ? 0 : currentPage * rowsPerPage), [currentPage, isPagination, rowsPerPage]);
-    const endRow = (0, react_1.useMemo)(() => (!isPagination ? tableData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, tableData.length]);
+    const endRow = (0, react_1.useMemo)(() => (!isPagination ? searchedData.length : startRow + rowsPerPage), [isPagination, rowsPerPage, startRow, searchedData.length]);
     const filteredData = (0, react_1.useMemo)(() => {
         if (isServerPagination) {
-            return tableData;
+            return searchedData;
         }
-        const sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        const sortedData = (0, table_1.SortMultiColumnData)(searchedData, columnsSort);
         return sortedData.slice(startRow, endRow);
-    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
-    const handlePageSizeChange = (event) => {
-        const value = Number(event.target.value);
+    }, [columnsSort, startRow, endRow, searchedData, isServerPagination]);
+    const searchKey = (0, react_1.useMemo)(() => JSON.stringify(columnsSearch), [columnsSearch]);
+    const prevSearchKey = (0, react_1.useRef)(searchKey);
+    (0, react_1.useEffect)(() => {
+        if (prevSearchKey.current === searchKey)
+            return;
+        prevSearchKey.current = searchKey;
+        setCurrentPage(0);
+    }, [searchKey]);
+    // A narrower result set can strand the user on a page that no longer exists.
+    (0, react_1.useEffect)(() => {
+        if (isServerPagination || !isPagination)
+            return;
+        const lastPage = Math.max(0, pages - 1);
+        setCurrentPage((page) => Math.min(page, lastPage));
+    }, [pages, isServerPagination, isPagination]);
+    const handlePageSizeChange = (size) => {
+        const value = Number(size);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         if (onNoOfRowsPerPageChange) {
             onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
@@ -193,21 +228,23 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
         if (savePreferences) {
             savePreferences({
                 ...tablePreferences,
-                columns: columns,
+                columns: (0, columnLabel_1.toSavedColumns)(columns),
                 ...extra,
             });
         }
     };
     return {
         tableData,
-        tableContainerStyles,
         isContent,
         isLink,
         headerRefs,
         columnWidths,
+        slotRef,
+        slotWidth,
         handleSort,
         handleCheckbox,
         filteredData,
+        searchedData,
         startRow,
         endRow,
         selection,

package/dist/Components/Table/settings/ManageColumns.js

@@ -9,9 +9,15 @@ const react_2 = require("@chakra-ui/react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const [draggedItemIndex, setDraggedItemIndex] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -62,7 +68,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
         setItems(newItems);
         setError(null);
     };
-    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const filteredItems = items.filter((item) => (0, columnLabel_1.columnLabelText)(item).toLowerCase().includes(searchTerm.toLowerCase()));
     const allChecked = items.every((item) => !item.isHidden);
     const someChecked = items.some((item) => !item.isHidden) && !allChecked;
     const handleSelectAll = () => {
@@ -75,22 +81,22 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "lg", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "lg" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.backgroundColor.subtle, px: 2, py: 1, borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
                     return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
                             ? theme.colors.primary[100]
                             : isDropZone
-                                ? theme.colors.primary[50]
-                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                                ? rowBackgrounds.selected
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
-                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
-                            bg: theme.colors.gray[50],
-                            borderColor: theme.colors.boxborder[200],
-                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
-                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
-                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                            : "transparent", cursor: "grab", fontSize: "xs-plus", px: 2, py: "3px", mb: "3px", transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
+                            bg: rowBackgrounds.active,
+                            borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors),
+                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: (0, columnLabel_1.columnLabelText)(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;