pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,73 @@
+"use strict";
+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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+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]);
+    const spec = (0, optionRowSizes_1.optionRowSpec)("xs");
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
+    const openDropdown = () => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    };
+    const [query, setQuery] = (0, react_1.useState)("");
+    const filtered = (0, react_1.useMemo)(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => (o.label || "").toLowerCase().includes(q));
+    }, [query, options]);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const optionRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleListKeyDown = (0, react_1.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 ((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);
+                                        }
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                            const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
+                                            const isActive = i === activeIndex;
+                                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                                    optionRefs.current[i] = el;
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), bg: "transparent", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => {
+                                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                                    setIsOpen(false);
+                                                    setQuery("");
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: opt.label }), selected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, opt.id));
+                                        }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
+};
+exports.default = CompactSelect;

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

@@ -0,0 +1,49 @@
+import { Options } from "./CompactSelect";
+import type { CustomThemeProps } from "../../../Theme/themeProps";
+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;
+    }[];
+    /** 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";
+};
+declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, filterMode, }: LeftFilterPaneProps) => import("react/jsx-runtime").JSX.Element;
+export default LeftFilterPane;

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

@@ -0,0 +1,219 @@
+"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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+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"));
+const RadioButton_1 = require("../../RadioButton/RadioButton");
+const TextOperationControls_1 = require("./TextOperationControls");
+const SelectOperationControls_1 = require("./SelectOperationControls");
+const CompactSelect_1 = __importDefault(require("./CompactSelect"));
+const FilterDatePicker_1 = __importStar(require("./FilterDatePicker"));
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+// ─── 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 = ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { 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 ((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) }));
+    }
+    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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), size: "xs", ml: "1.25rem", mt: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { 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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.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 && ((0, jsx_runtime_1.jsx)(ActiveItemControls, { activeItem: activeItem, sec: sec, setTextOperator: setTextOperator, setTextValue: setTextValue }))] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { 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" && ((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)
+            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) };
+        });
+    };
+    (0, react_3.useOutsideClick)({
+        ref: searchRef,
+        handler: () => {
+            if (isSearching && !search.trim())
+                setIsSearching(false);
+        },
+    });
+    const filteredSections = (0, react_1.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 = (0, react_1.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 ((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: (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: (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: (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.d.ts

@@ -0,0 +1,7 @@
+export declare function SelectOperationControls({ operator, onOperatorChange, size, ml, mt, }: {
+    operator: string;
+    onOperatorChange: (op: string) => void;
+    size?: "xs" | "sm";
+    ml?: string | number;
+    mt?: string | number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +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.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.d.ts

@@ -0,0 +1,6 @@
+import { TableFiltersProps } from "../TableProps";
+declare const TableFilters: import("react").MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }: TableFiltersProps & {
+    isOpen?: boolean;
+    onOpen?: () => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default TableFilters;

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

@@ -0,0 +1,36 @@
+"use strict";
+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 setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    const debounceTimerRef = (0, react_1.useRef)(null);
+    const debouncedSearch = (0, react_1.useCallback)((value) => {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(() => {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
+    // Auto-focus input when popover opens
+    (0, react_1.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]);
+    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() })] }) }) }) }))] }));
+});
+exports.default = TableFilters;

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

@@ -0,0 +1,11 @@
+export declare const TEXT_OPERATORS: string[];
+export declare const requiresValue: (op: string) => boolean;
+export declare function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size, ml, mt, }: {
+    operator: string;
+    value: string;
+    onOperatorChange: (op: string) => void;
+    onValueChange: (val: string) => void;
+    size?: "xs" | "sm";
+    ml?: string | number;
+    mt?: string | number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+"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",
+    "contains",
+    "does not contain",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty",
+];
+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, }) {
+    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

@@ -0,0 +1,44 @@
+import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
+type UseTableProps = {
+    data: DataObject[];
+    isPagination: boolean;
+    selections?: (string | number)[];
+    columns: TableHeaderProps[];
+    onSelection?: (selected: (string | number)[]) => void;
+    tablePreferences?: Record<string, unknown>;
+    savePreferences?: (data: Record<string, unknown>) => void;
+    noOfRowsPerPage?: number;
+    isServerPagination: boolean;
+    totalRecords: number;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    defaultVisibleColumns?: number;
+    columnsSearch: Record<string, string>;
+};
+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[];
+    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: (size: number) => void;
+    pages: number;
+    currentPage: number;
+    rowsPerPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    columnsList: TableHeaderProps[];
+    handleColumnPreferences: (columns: TableHeaderProps[], extra?: Record<string, unknown>) => void;
+    isSelecting: boolean;
+    selectAllRowsRef: import("react").MutableRefObject<DataObject[] | null>;
+};
+export default useTable;