pixelize-design-library 2.2.198 → 2.3.1-beta.1

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

@@ -0,0 +1,36 @@
+import React from "react";
+export type FilterItem = {
+    id: string;
+    label: string;
+    type?: "text" | "select" | "user" | "date";
+    option?: {
+        id: string;
+        label: string;
+    }[];
+};
+export type FilterSection = {
+    id: string;
+    label: string;
+    items?: FilterItem[];
+    initiallyExpanded?: boolean;
+    radio?: boolean;
+};
+export type SelectedFilterItem = {
+    id: string;
+    condition?: string;
+    value?: any;
+    type?: "text" | "select" | "user" | "date";
+};
+export type LeftFilterPaneProps = {
+    title?: string;
+    height?: number | string;
+    sections: FilterSection[];
+    selected?: Record<string, any>;
+    onApply?: (selected: any) => void;
+    onClear?: () => void;
+    theme: any;
+    isApplyLoading?: boolean;
+    filterMode?: "sidebar" | "modal";
+};
+declare const LeftFilterPane: ({ title, height, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading, filterMode, }: LeftFilterPaneProps) => React.JSX.Element;
+export default LeftFilterPane;

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

@@ -0,0 +1,273 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var framer_motion_1 = require("framer-motion");
+var react_3 = require("@chakra-ui/react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var RadioButton_1 = require("../../RadioButton/RadioButton");
+var TextOperationControls_1 = require("./TextOperationControls");
+var SelectOperationControls_1 = require("./SelectOperationControls");
+var CompactSelect_1 = __importDefault(require("./CompactSelect"));
+var DatePicker_1 = __importDefault(require("../../DatePicker/DatePicker"));
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+var LABEL_MAX_LENGTH = 18;
+function formatHeaderLabel(label) {
+    var text = (label || "").trim();
+    if (text.length <= LABEL_MAX_LENGTH)
+        return text;
+    var parts = text.split(/\s+/);
+    if (parts.length < 2)
+        return text;
+    var 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 "".concat(parts.join(" "), "..");
+}
+var SectionLabel = function (_a) {
+    var label = _a.label, _b = _a.flex, flex = _b === void 0 ? false : _b, theme = _a.theme;
+    var needsTooltip = label.length > LABEL_MAX_LENGTH;
+    var content = (react_1.default.createElement(react_2.Box, { as: "span", flex: flex ? "1" : undefined, textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, formatHeaderLabel(label)));
+    if (!needsTooltip)
+        return content;
+    return (react_1.default.createElement(react_2.Tooltip, { label: label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" }, content));
+};
+var ActiveItemControls = function (_a) {
+    var activeItem = _a.activeItem, sec = _a.sec, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue;
+    if (!activeItem)
+        return null;
+    if (activeItem.type === "date") {
+        return (react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
+    }
+    if (activeItem.type === "text") {
+        return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
+    }
+    if (activeItem.type === "select" || activeItem.type === "user") {
+        var def = (sec.items || []).find(function (i) { return i.id === activeItem.id; });
+        var opts = (def === null || def === void 0 ? void 0 : def.selectOption) || (def === null || def === void 0 ? void 0 : def.option) || [];
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, size: "xs", ml: "1.25rem", mt: 2 }),
+            react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
+                react_1.default.createElement(CompactSelect_1.default, { placeholder: def === null || def === void 0 ? void 0 : def.label, size: "xs", height: "22px", options: opts, value: activeItem.value, onSelect: function (option) { return setTextValue(sec.id, activeItem.id, option); } }))));
+    }
+    return null;
+};
+var SectionContent = function (_a) {
+    var _b;
+    var sec = _a.sec, selected = _a.selected, toggleItem = _a.toggleItem, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue, setSelected = _a.setSelected;
+    if (sec.radio) {
+        var activeItem = (_b = selected[sec.id]) === null || _b === void 0 ? void 0 : _b[0];
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(RadioButton_1.RadioButtonGroup, { value: (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) || "", onChange: function (val) {
+                    var item = (sec.items || []).find(function (i) { return i.id === val; });
+                    setSelected(function (prev) {
+                        var _a;
+                        return (__assign(__assign({}, prev), (_a = {}, _a[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: "" }]
+                            : [], _a)));
+                    });
+                }, options: (sec.items || []).map(function (it) { return ({ label: it.label, id: it.id }); }), size: "sm", spacing: "0.35rem", direction: "column", align: "start", labelFontSize: "0.75rem", labelClampLines: 1, showLabelTooltip: function (item) { return item.label.length > LABEL_MAX_LENGTH; } }),
+            activeItem && (react_1.default.createElement(ActiveItemControls, { activeItem: activeItem, sec: sec, setTextOperator: setTextOperator, setTextValue: setTextValue }))));
+    }
+    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch" }, (sec.items || []).map(function (it) {
+        var sectionItems = selected[sec.id] || [];
+        var activeItem = sectionItems.find(function (i) { return i.id === it.id; });
+        var checked = !!activeItem;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: it.id },
+            react_1.default.createElement(Checkbox_1.default, { label: it.label, labelFontSize: "0.75rem", showLabelTooltip: it.label.length > LABEL_MAX_LENGTH, labelTooltip: it.label, labelClampLines: 1, isChecked: checked, onChange: function (e) { return 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" && (react_1.default.createElement(react_2.Box, { ml: "1.25rem" },
+                react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, it.id, val); } }))),
+            checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
+            checked && (it.type === "select" || it.type === "user") && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem" }),
+                react_1.default.createElement(react_2.Box, { mt: 2, ml: "1.25rem" },
+                    react_1.default.createElement(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: function (option) { return setTextValue(sec.id, it.id, option); } }))))));
+    })));
+};
+// ─── Main Component ───────────────────────────────────────────────────────────
+var LeftFilterPane = function (_a) {
+    var _b, _c, _d, _e;
+    var _f = _a.title, title = _f === void 0 ? "Filter" : _f, _g = _a.height, height = _g === void 0 ? 300 : _g, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _h = _a.isApplyLoading, isApplyLoading = _h === void 0 ? false : _h, _j = _a.filterMode, filterMode = _j === void 0 ? "sidebar" : _j;
+    var _k = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _k[0], setIsSearching = _k[1];
+    var _l = (0, react_1.useState)({}), localSelected = _l[0], setLocalSelected = _l[1];
+    var searchRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        setLocalSelected(selectedProp || {});
+        if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
+            setIsSearching(true);
+    }, [selectedProp]);
+    var search = localSelected.search || "";
+    var setSelected = function (updater) {
+        setLocalSelected(function (prev) { return (typeof updater === "function" ? updater(prev) : updater); });
+    };
+    var setSearch = function (val) {
+        setSelected(function (prev) { return (__assign(__assign({}, prev), { search: val })); });
+    };
+    var updateItem = function (sectionId, itemId, updates) {
+        setSelected(function (prev) {
+            var _a;
+            var items = prev[sectionId] || [];
+            var idx = items.findIndex(function (i) { return i.id === itemId; });
+            if (idx === -1)
+                return prev;
+            var updated = __spreadArray([], items, true);
+            updated[idx] = __assign(__assign({}, updated[idx]), updates);
+            return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = updated, _a));
+        });
+    };
+    var setTextOperator = function (sectionId, itemId, operator) {
+        return updateItem(sectionId, itemId, { condition: operator });
+    };
+    var setTextValue = function (sectionId, itemId, value) {
+        return updateItem(sectionId, itemId, { value: value });
+    };
+    var toggleItem = function (sectionId, itemId, checked, type) {
+        setSelected(function (prev) {
+            var _a, _b;
+            var items = prev[sectionId] || [];
+            if (checked) {
+                if (items.some(function (i) { return i.id === itemId; }))
+                    return prev;
+                var condition = type === "select" || type === "user" ? "is" : "contains";
+                return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = __spreadArray(__spreadArray([], items, true), [{ id: itemId, type: type, condition: condition, value: "" }], false), _a));
+            }
+            return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = items.filter(function (i) { return i.id !== itemId; }), _b));
+        });
+    };
+    (0, react_3.useOutsideClick)({
+        ref: searchRef,
+        handler: function () {
+            if (isSearching && !search.trim())
+                setIsSearching(false);
+        },
+    });
+    var filteredSections = (0, react_1.useMemo)(function () {
+        if (!search.trim())
+            return sections;
+        var q = search.toLowerCase();
+        return sections
+            .map(function (sec) { return (__assign(__assign({}, sec), { items: (sec.items || []).filter(function (i) { return i.label.toLowerCase().includes(q); }) })); })
+            .filter(function (sec) { return (sec.items || []).length > 0; });
+    }, [search, sections]);
+    var hasActiveFilters = (0, react_1.useMemo)(function () {
+        return Object.entries(localSelected).some(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (key === "search")
+                return !!(value && typeof value === "string" && value.trim());
+            return Array.isArray(value) && value.length > 0;
+        });
+    }, [localSelected]);
+    var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(localSelected); };
+    var handleClear = function () {
+        var cleared = { search: "" };
+        setLocalSelected(cleared);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        if (filterMode === "sidebar")
+            onApply === null || onApply === void 0 ? void 0 : onApply(cleared);
+    };
+    var sectionContentProps = { selected: localSelected, toggleItem: toggleItem, setTextOperator: setTextOperator, setTextValue: setTextValue, setSelected: setSelected };
+    var renderSections = function () {
+        if (filteredSections.length === 0) {
+            return (react_1.default.createElement(react_2.Box, { p: 4, textAlign: "center" },
+                react_1.default.createElement(react_2.Text, { fontSize: "xs", color: "gray.500" }, "No filters found")));
+        }
+        if (filteredSections.length > 1) {
+            return (react_1.default.createElement(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map(function (s, i) { return (s.initiallyExpanded ? i : -1); }).filter(function (i) { return i >= 0; }) }, filteredSections.map(function (sec) { return (react_1.default.createElement(react_2.AccordionItem, { key: sec.id, border: "none" },
+                react_1.default.createElement("h2", null,
+                    react_1.default.createElement(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" } },
+                        react_1.default.createElement(SectionLabel, { label: sec.label, flex: true, theme: theme }),
+                        react_1.default.createElement(react_2.AccordionIcon, null))),
+                react_1.default.createElement(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1 },
+                    react_1.default.createElement(SectionContent, __assign({ sec: sec }, sectionContentProps))))); })));
+        }
+        return filteredSections.map(function (sec) { return (react_1.default.createElement(react_2.Box, { key: sec.id },
+            react_1.default.createElement(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200" },
+                react_1.default.createElement(SectionLabel, { label: sec.label, theme: theme })),
+            react_1.default.createElement(react_2.Box, { px: 3, pt: 2, pb: 1 },
+                react_1.default.createElement(SectionContent, __assign({ sec: sec }, sectionContentProps))))); });
+    };
+    return (react_1.default.createElement(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0 },
+        react_1.default.createElement(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200" }, !isSearching ? (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between" },
+            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", fontSize: "sm" }, title),
+            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); }, mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
+            react_1.default.createElement(react_2.InputGroup, { size: "sm" },
+                react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                    react_1.default.createElement(lucide_react_1.Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] })),
+                react_1.default.createElement(react_2.Input, { placeholder: "Search", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true }),
+                search.length > 0 && (react_1.default.createElement(react_2.InputRightElement, null,
+                    react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () { setSearch(""); setIsSearching(false); } }))))))),
+        react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto" }, renderSections()),
+        hasActiveFilters && (react_1.default.createElement(react_2.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: "white" },
+            react_1.default.createElement(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red" }, "Clear All"),
+            react_1.default.createElement(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading }, "Apply")))));
+};
+exports.default = LeftFilterPane;

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

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

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

@@ -0,0 +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.SelectOperationControls = SelectOperationControls;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+function SelectOperationControls(_a) {
+    var operator = _a.operator, onOperatorChange = _a.onOperatorChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
+    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
+        react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "90px" },
+            react_1.default.createElement("option", { value: "is" }, "is"),
+            react_1.default.createElement("option", { value: "is not" }, "is not"))));
+}

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

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

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

@@ -0,0 +1,89 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var TableFilters = (0, react_1.memo)(function (_a) {
+    var _b, _c;
+    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
+    var theme = (0, react_2.useTheme)();
+    var searchRef = (0, react_1.useRef)(null);
+    var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
+    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    var debounceTimerRef = (0, react_1.useRef)(null);
+    var debouncedSearch = (0, react_1.useCallback)(function (value) {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(function () {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (columnsSearch.length && searchRef.current) {
+            searchRef.current.value = columnsSearch;
+        }
+        /* eslint-disable */
+    }, [refreshDataOnOpen]);
+    // Auto-focus input when popover opens
+    (0, react_1.useEffect)(function () {
+        if (isOpen && searchRef.current) {
+            // Small delay to ensure popover is fully rendered
+            setTimeout(function () {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [isOpen]);
+    var handleOpen = function () {
+        setRefreshDataOnOpen(function (prev) { return !prev; });
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    };
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
+                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
+                    react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
+                        react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
+                                e.stopPropagation();
+                                debouncedSearch(e.target.value);
+                            }, onFocus: function (e) { return e.stopPropagation(); } })))))));
+});
+exports.default = TableFilters;

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

@@ -0,0 +1,12 @@
+import React from "react";
+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;
+}): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+"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;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+exports.TEXT_OPERATORS = [
+    "is",
+    "is not",
+    "contains",
+    "does not contain",
+    "starts with",
+    "ends with",
+    "is empty",
+    "is not empty",
+];
+var requiresValue = function (op) {
+    return !(op === "is empty" || op === "is not empty");
+};
+exports.requiresValue = requiresValue;
+function TextOperationControls(_a) {
+    var operator = _a.operator, value = _a.value, onOperatorChange = _a.onOperatorChange, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "xs" : _b, _c = _a.ml, ml = _c === void 0 ? "1.25rem" : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d;
+    return (react_1.default.createElement(react_2.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml },
+        react_1.default.createElement(react_2.Select, { size: size, value: operator, onChange: function (e) { return onOperatorChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "110px" }, exports.TEXT_OPERATORS.map(function (op) { return (react_1.default.createElement("option", { key: op, value: op }, op)); })),
+        (0, exports.requiresValue)(operator) && (react_1.default.createElement(react_2.Input, { size: size, placeholder: "Type here", value: value, onChange: function (e) { return onValueChange(e.target.value); }, sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))));
+}

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

@@ -0,0 +1,2 @@
+declare const useDebounce: (callback: Function, delay: number) => (...args: any[]) => void;
+export default useDebounce;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+// First, create a custom debounce hook
+var useDebounce = function (callback, delay) {
+    var timeoutRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    var debouncedCallback = (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(function () {
+            callback.apply(void 0, args);
+        }, delay);
+    }, [callback, delay]);
+    return debouncedCallback;
+};
+exports.default = useDebounce;

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

@@ -0,0 +1,47 @@
+import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
+type UseTableProps = {
+    tableBorderColor?: string;
+    data: DataObject[];
+    isPagination: boolean;
+    selections?: (string | number)[];
+    columns: TableHeaderProps[];
+    onSelection?: (selected: (string | number)[]) => void;
+    tablePreferences?: Record<string, any>;
+    savePreferences?: (data: Record<string, any>) => void;
+    noOfRowsPerPage?: number;
+    isServerPagination: boolean;
+    totalRecords: number;
+    onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    defaultVisibleColumns?: number;
+};
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: 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[];
+    handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
+    handleCheckbox: (id: string | number) => void;
+    filteredData: DataObject[];
+    startRow: number;
+    endRow: number;
+    selection: (string | number)[];
+    columnsSort: ColumnSortingProps[];
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    pages: number;
+    currentPage: number;
+    rowsPerPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    columnsList: TableHeaderProps[];
+    handleColumnPreferences: (columns: any) => void;
+    isSelecting: boolean;
+};
+export default useTable;