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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Icon, IconButton, Input, InputGroup, InputRightElement, } from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { useDebounce } from "../../../Utils/table";
+import ToolTip from "../../ToolTip/ToolTip";
+const TableSearch = ({ onSearch }) => {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    const [showInput, setShowInput] = useState(false);
+    const [query, setQuery] = useState("");
+    const handleSearchClick = () => {
+        setShowInput((prev) => !prev);
+        if (showInput) {
+            setQuery("");
+            if (query)
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
+        }
+    };
+    const handleDebounce = useDebounce((value) => {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, 700);
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setQuery(value);
+        handleDebounce(value);
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], onClick: handleSearchClick, _hover: { color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+};
+export default TableSearch;

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

@@ -0,0 +1,22 @@
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` works in light mode — a pale tint on a
+ * white canvas — but in dark mode that rung sits within ~10 lightness points of the near-black
+ * canvas, computing to ~1.2:1: invisible, as QA reported.
+ *
+ * The first fix for that overshot to `background[900]`, the palette's BRIGHTEST rung (~10:1), and
+ * had to invert the row's ink to keep it readable — a near-white slab in a dark table. Dark-mode
+ * hover is a *lifted surface*, not an inversion: `table.hover[500]` is a visible step up from the
+ * canvas while staying dark enough that the row's resting `text[500]` ink is still legible, so no
+ * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
+ */
+export const getTableRowHoverStyle = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (isDark) {
+        return {
+            backgroundColor: (_c = (_b = (_a = colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = colors.background) === null || _d === void 0 ? void 0 : _d[400],
+        };
+    }
+    return {
+        backgroundColor: (_g = (_f = (_e = colors.table) === null || _e === void 0 ? void 0 : _e.hover) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_j = (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h.opacity) === null || _j === void 0 ? void 0 : _j[4],
+    };
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import VeritcalDivider from "../../Divider/Divider";
+const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const theme = useCustomTheme();
+    const columnLabelMap = useMemo(() => {
+        const map = new Map();
+        for (const col of columns) {
+            map.set(col.id, col.label);
+        }
+        return map;
+    }, [columns]);
+    const activeFilters = useMemo(() => Object.entries(columnsSearch)
+        .filter(([, value]) => value && value.trim() !== "")
+        .map(([columnId, value]) => ({
+        columnId,
+        label: columnLabelMap.get(columnId) || columnId,
+        value: value.trim(),
+    })), [columnsSearch, columnLabelMap]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        setColumnsSearch((prev) => {
+            const newSearch = { ...prev };
+            delete newSearch[columnId];
+            return newSearch;
+        });
+    }, [setColumnsSearch]);
+    const handleClearAll = useCallback(() => {
+        setColumnsSearch({});
+    }, [setColumnsSearch]);
+    if (activeFilters.length === 0) {
+        return null;
+    }
+    return (_jsx(Box, { px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[100]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[50]), overflowX: "auto", sx: {
+            '&::-webkit-scrollbar': {
+                height: '6px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: theme.colors.gray[100],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: theme.colors.gray[400],
+                borderRadius: '3px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+                background: theme.colors.gray[500],
+            },
+            scrollbarWidth: 'thin',
+            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                    return (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: `0.063rem solid ${((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+                                    bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
+                                }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId));
+                }), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[600]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+                        textDecoration: "underline",
+                    }, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
+});
+export default ActiveFilters;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody, VStack, Portal } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
+    var _a;
+    const theme = useCustomTheme();
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => (o.label || "").toLowerCase().includes(q));
+    }, [query, options]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const optionRefs = useRef([]);
+    useEffect(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleListKeyDown = useCallback((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(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: "gray.300", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "0.25rem", onClick: () => setIsOpen((prev) => !prev), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(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);
+                                        }
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => (_jsx(Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
+                                                optionRefs.current[i] = el;
+                                            }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: () => {
+                                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                                setIsOpen(false);
+                                                setQuery("");
+                                            }, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: "gray.500", children: "No results" }) }))] })] }) }) }) })] }));
+};
+export default CompactSelect;

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

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, Input, InputGroup, InputLeftElement, InputRightElement, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, VStack, Button, Flex, Icon, IconButton, HStack, } from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { motion } from "framer-motion";
+import { useOutsideClick } from "@chakra-ui/react";
+import CheckBox from "../../Checkbox/Checkbox";
+import ToolTip from "../../ToolTip/ToolTip";
+import { RadioButtonGroup } from "../../RadioButton/RadioButton";
+import { TextOperationControls } from "./TextOperationControls";
+import { SelectOperationControls } from "./SelectOperationControls";
+import CompactSelect from "./CompactSelect";
+import DatePicker from "../../DatePicker/DatePicker";
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const getSectionItems = (selected, sectionId) => {
+    const value = selected[sectionId];
+    return Array.isArray(value) ? value : [];
+};
+const LABEL_MAX_LENGTH = 18;
+function formatHeaderLabel(label) {
+    const text = (label || "").trim();
+    if (text.length <= LABEL_MAX_LENGTH)
+        return text;
+    let parts = text.split(/\s+/);
+    if (parts.length < 2)
+        return text;
+    const removable = new Set(["filters", "fields", "modules", "status", "action"]);
+    if (removable.has(parts[parts.length - 1].toLowerCase())) {
+        parts = parts.slice(0, -1);
+    }
+    while (parts.join(" ").length > LABEL_MAX_LENGTH && parts.length > 2) {
+        parts = parts.slice(0, -1);
+    }
+    return `${parts.join(" ")}..`;
+}
+const SectionLabel = ({ label, flex = false }) => {
+    const needsTooltip = label.length > LABEL_MAX_LENGTH;
+    const content = (_jsx(Box, { as: "span", flex: flex ? "1" : undefined, textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: formatHeaderLabel(label) }));
+    if (!needsTooltip)
+        return content;
+    return (_jsx(ToolTip, { label: label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: content }));
+};
+const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue }) => {
+    var _a;
+    if (!activeItem)
+        return null;
+    if (activeItem.type === "date") {
+        return (_jsx(DatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+    }
+    if (activeItem.type === "text") {
+        return (_jsx(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) }));
+    }
+    if (activeItem.type === "select" || activeItem.type === "user") {
+        const def = (sec.items || []).find((i) => i.id === activeItem.id);
+        const opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
+        return (_jsxs(_Fragment, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), size: "xs", ml: "1.25rem", mt: 2 }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: (option) => setTextValue(sec.id, activeItem.id, option) }) })] }));
+    }
+    return null;
+};
+const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextValue, setSelected, }) => {
+    if (sec.radio) {
+        const activeItem = getSectionItems(selected, sec.id)[0];
+        return (_jsxs(_Fragment, { children: [_jsx(RadioButtonGroup, { value: (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) || "", onChange: (val) => {
+                        const item = (sec.items || []).find((i) => i.id === val);
+                        setSelected((prev) => ({
+                            ...prev,
+                            [sec.id]: val
+                                ? [{ id: val, type: item === null || item === void 0 ? void 0 : item.type, condition: (item === null || item === void 0 ? void 0 : item.type) === "text" ? "contains" : "is", value: "" }]
+                                : [],
+                        }));
+                    }, options: (sec.items || []).map((it) => ({ label: it.label, id: it.id })), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: (item) => item.label.length > LABEL_MAX_LENGTH }), activeItem && (_jsx(ActiveItemControls, { activeItem: activeItem, sec: sec, setTextOperator: setTextOperator, setTextValue: setTextValue }))] }));
+    }
+    return (_jsx(VStack, { spacing: 2, align: "stretch", children: (sec.items || []).map((it) => {
+            var _a;
+            const sectionItems = getSectionItems(selected, sec.id);
+            const activeItem = sectionItems.find((i) => i.id === it.id);
+            const checked = !!activeItem;
+            return (_jsxs(React.Fragment, { children: [_jsx(CheckBox, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > LABEL_MAX_LENGTH, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: (e) => toggleItem(sec.id, it.id, e.target.checked, it.type), size: "sm", iconSize: "0.5rem", spacing: "0.5rem", sx: {
+                            gap: "0.5rem",
+                            hiteSpace: "normal",
+                            wordBreak: "break-word",
+                            overflow: "hidden",
+                            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" && (_jsx(Box, { ml: "1.25rem", children: _jsx(DatePicker, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && (_jsx(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") && (_jsxs(Box, { children: [_jsx(SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), _jsx(Box, { mt: 2, ml: "1.25rem", children: _jsx(CompactSelect, { 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", }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const [isSearching, setIsSearching] = useState(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
+    const [localSelected, setLocalSelected] = useState({});
+    const searchRef = useRef(null);
+    useEffect(() => {
+        setLocalSelected(selectedProp || {});
+        if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
+            setIsSearching(true);
+    }, [selectedProp]);
+    const search = typeof localSelected.search === "string" ? localSelected.search : "";
+    const setSelected = (updater) => {
+        setLocalSelected((prev) => (typeof updater === "function" ? updater(prev) : updater));
+    };
+    const setSearch = (val) => {
+        setSelected((prev) => ({ ...prev, search: val }));
+    };
+    const updateItem = (sectionId, itemId, updates) => {
+        setSelected((prev) => {
+            const items = getSectionItems(prev, sectionId);
+            const idx = items.findIndex((i) => i.id === itemId);
+            if (idx === -1)
+                return prev;
+            const updated = [...items];
+            updated[idx] = { ...updated[idx], ...updates };
+            return { ...prev, [sectionId]: updated };
+        });
+    };
+    const setTextOperator = (sectionId, itemId, operator) => updateItem(sectionId, itemId, { condition: operator });
+    const setTextValue = (sectionId, itemId, value) => updateItem(sectionId, itemId, { value });
+    const toggleItem = (sectionId, itemId, checked, type) => {
+        setSelected((prev) => {
+            const items = getSectionItems(prev, sectionId);
+            if (checked) {
+                if (items.some((i) => i.id === itemId))
+                    return prev;
+                const condition = type === "select" || type === "user" ? "is" : "contains";
+                return { ...prev, [sectionId]: [...items, { id: itemId, type, condition, value: "" }] };
+            }
+            return { ...prev, [sectionId]: items.filter((i) => i.id !== itemId) };
+        });
+    };
+    useOutsideClick({
+        ref: searchRef,
+        handler: () => {
+            if (isSearching && !search.trim())
+                setIsSearching(false);
+        },
+    });
+    const filteredSections = useMemo(() => {
+        if (!search.trim())
+            return sections;
+        const q = search.toLowerCase();
+        return sections
+            .map((sec) => ({ ...sec, items: (sec.items || []).filter((i) => i.label.toLowerCase().includes(q)) }))
+            .filter((sec) => (sec.items || []).length > 0);
+    }, [search, sections]);
+    const hasActiveFilters = useMemo(() => {
+        return Object.entries(localSelected).some(([key, value]) => {
+            if (key === "search")
+                return !!(value && typeof value === "string" && value.trim());
+            return Array.isArray(value) && value.length > 0;
+        });
+    }, [localSelected]);
+    const handleApply = () => onApply === null || onApply === void 0 ? void 0 : onApply(localSelected);
+    const handleClear = () => {
+        const cleared = { search: "" };
+        setLocalSelected(cleared);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        if (filterMode === "sidebar")
+            onApply === null || onApply === void 0 ? void 0 : onApply(cleared);
+    };
+    const sectionContentProps = { selected: localSelected, toggleItem, setTextOperator, setTextValue, setSelected };
+    const renderSections = () => {
+        if (filteredSections.length === 0) {
+            return (_jsx(Box, { p: 4, textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: "gray.500", children: "No filters found" }) }));
+        }
+        if (filteredSections.length > 1) {
+            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+        }
+        return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200", children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
+    };
+    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200", children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: "gray.200", spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: (_f = theme.colors.background) === null || _f === void 0 ? void 0 : _f[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+};
+export default LeftFilterPane;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, VStack } from "@chakra-ui/react";
+export function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    return (_jsx(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: _jsxs(Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "90px", children: [_jsx("option", { value: "is", children: "is" }), _jsx("option", { value: "is not", children: "is not" })] }) }));
+}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
+import { EllipsisVertical, Search } from "lucide-react";
+const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const searchRef = useRef(null);
+    const [refreshDataOnOpen, setRefreshDataOnOpen] = useState(false);
+    const setColumnsSearchRef = useRef(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    const debounceTimerRef = useRef(null);
+    const debouncedSearch = useCallback((value) => {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
+    useEffect(() => {
+        if (columnsSearch.length && searchRef.current) {
+            searchRef.current.value = columnsSearch;
+        }
+        /* eslint-disable */
+    }, [refreshDataOnOpen]);
+    // Auto-focus input when popover opens
+    useEffect(() => {
+        if (isOpen && searchRef.current) {
+            // Small delay to ensure popover is fully rendered
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [isOpen]);
+    const handleOpen = () => {
+        setRefreshDataOnOpen((prev) => !prev);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    };
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(EllipsisVertical, { size: 17, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: "gray.400", boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+                                        e.stopPropagation();
+                                        debouncedSearch(e.target.value);
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));
+});
+export default TableFilters;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Input, VStack } from "@chakra-ui/react";
+export const TEXT_OPERATORS = [
+    "is",
+    "is not",
+    "contains",
+    "does not contain",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty",
+];
+export const requiresValue = (op) => !(op === "is empty" || op === "is not empty");
+export function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    return (_jsxs(VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [_jsx(Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "110px", children: TEXT_OPERATORS.map((op) => (_jsx("option", { value: op, children: op }, op))) }), requiresValue(operator) && (_jsx(Input, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))] }));
+}

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

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useRef } from "react";
+// First, create a custom debounce hook
+const useDebounce = (callback, delay) => {
+    const timeoutRef = useRef();
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const debouncedCallback = useCallback((...args) => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    }, [callback, delay]);
+    return debouncedCallback;
+};
+export default useDebounce;