pixelize-design-library 2.3.6 → 2.3.8

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

@@ -1,15 +1,4 @@
 "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);
@@ -43,231 +32,180 @@ var __importStar = (this && this.__importStar) || (function () {
         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"));
+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 react_3 = require("@chakra-ui/react");
+const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const RadioButton_1 = require("../../RadioButton/RadioButton");
+const TextOperationControls_1 = require("./TextOperationControls");
+const SelectOperationControls_1 = require("./SelectOperationControls");
+const CompactSelect_1 = __importDefault(require("./CompactSelect"));
+const DatePicker_1 = __importDefault(require("../../DatePicker/DatePicker"));
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-var LABEL_MAX_LENGTH = 18;
+const getSectionItems = (selected, sectionId) => {
+    const value = selected[sectionId];
+    return Array.isArray(value) ? value : [];
+};
+const LABEL_MAX_LENGTH = 18;
 function formatHeaderLabel(label) {
-    var text = (label || "").trim();
+    const text = (label || "").trim();
     if (text.length <= LABEL_MAX_LENGTH)
         return text;
-    var parts = text.split(/\s+/);
+    let parts = text.split(/\s+/);
     if (parts.length < 2)
         return text;
-    var removable = new Set(["filters", "fields", "modules", "status", "action"]);
+    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 "".concat(parts.join(" "), "..");
+    return `${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)));
+const SectionLabel = ({ label, flex = false, theme }) => {
+    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 (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));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem", children: content }));
 };
-var ActiveItemControls = function (_a) {
-    var activeItem = _a.activeItem, sec = _a.sec, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue;
+const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue }) => {
+    var _a;
     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); } }));
+        return ((0, jsx_runtime_1.jsx)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => 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); } }));
+        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") {
-        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); } }))));
+        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;
 };
-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;
+const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextValue, 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 }))));
+        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 (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); } }))))));
-    })));
+    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)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
+        }) }));
 };
 // ─── 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 () {
+const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
+    var _a, _b, _c, _d;
+    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);
+    (0, react_1.useEffect)(() => {
         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); });
+    const search = typeof localSelected.search === "string" ? localSelected.search : "";
+    const setSelected = (updater) => {
+        setLocalSelected((prev) => (typeof updater === "function" ? updater(prev) : updater));
     };
-    var setSearch = function (val) {
-        setSelected(function (prev) { return (__assign(__assign({}, prev), { search: val })); });
+    const setSearch = (val) => {
+        setSelected((prev) => ({ ...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; });
+    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;
-            var updated = __spreadArray([], items, true);
-            updated[idx] = __assign(__assign({}, updated[idx]), updates);
-            return __assign(__assign({}, prev), (_a = {}, _a[sectionId] = updated, _a));
+            const updated = [...items];
+            updated[idx] = { ...updated[idx], ...updates };
+            return { ...prev, [sectionId]: updated };
         });
     };
-    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] || [];
+    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(function (i) { return i.id === itemId; }))
+                if (items.some((i) => 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));
+                const condition = type === "select" || type === "user" ? "is" : "contains";
+                return { ...prev, [sectionId]: [...items, { id: itemId, type, condition, value: "" }] };
             }
-            return __assign(__assign({}, prev), (_b = {}, _b[sectionId] = items.filter(function (i) { return i.id !== itemId; }), _b));
+            return { ...prev, [sectionId]: items.filter((i) => i.id !== itemId) };
         });
     };
     (0, react_3.useOutsideClick)({
         ref: searchRef,
-        handler: function () {
+        handler: () => {
             if (isSearching && !search.trim())
                 setIsSearching(false);
         },
     });
-    var filteredSections = (0, react_1.useMemo)(function () {
+    const filteredSections = (0, react_1.useMemo)(() => {
         if (!search.trim())
             return sections;
-        var q = search.toLowerCase();
+        const 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; });
+            .map((sec) => ({ ...sec, items: (sec.items || []).filter((i) => i.label.toLowerCase().includes(q)) }))
+            .filter((sec) => (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];
+    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]);
-    var handleApply = function () { return onApply === null || onApply === void 0 ? void 0 : onApply(localSelected); };
-    var handleClear = function () {
-        var cleared = { search: "" };
+    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);
     };
-    var sectionContentProps = { selected: localSelected, toggleItem: toggleItem, setTextOperator: setTextOperator, setTextValue: setTextValue, setSelected: setSelected };
-    var renderSections = function () {
+    const sectionContentProps = { selected: localSelected, toggleItem, setTextOperator, setTextValue, setSelected };
+    const renderSections = () => {
         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")));
+            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: "gray.500", children: "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 ((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: "gray.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(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 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: "gray.200", children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return (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")))));
+    return ((0, jsx_runtime_1.jsxs)(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, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200", children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[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: "gray.200", spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: "white", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 exports.default = LeftFilterPane;

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

@@ -1,8 +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;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectOperationControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOperationControls.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/SelectOperationControls.tsx"],"names":[],"mappings":"AAEA,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,gBAAgB,EAChB,IAAW,EACX,EAAc,EACd,EAAM,GACP,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,2CAeA"}

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

@@ -1,15 +1,8 @@
 "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"))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: (0, jsx_runtime_1.jsxs)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "90px", children: [(0, jsx_runtime_1.jsx)("option", { value: "is", children: "is" }), (0, jsx_runtime_1.jsx)("option", { value: "is not", children: "is not" })] }) }));
 }

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilters.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/TableFilters.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,QAAA,MAAM,YAAY,8GAQb,iBAAiB,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,6CA+EF,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,89 +1,47 @@
 "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);
+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 TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
+    var _a, _b;
+    const theme = (0, react_2.useTheme)();
+    const searchRef = (0, react_1.useRef)(null);
+    const [refreshDataOnOpen, setRefreshDataOnOpen] = (0, react_1.useState)(false);
+    const setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
     setColumnsSearchRef.current = setColumnsSearch;
-    var debounceTimerRef = (0, react_1.useRef)(null);
-    var debouncedSearch = (0, react_1.useCallback)(function (value) {
+    const debounceTimerRef = (0, react_1.useRef)(null);
+    const debouncedSearch = (0, react_1.useCallback)((value) => {
         if (debounceTimerRef.current)
             clearTimeout(debounceTimerRef.current);
-        debounceTimerRef.current = setTimeout(function () {
+        debounceTimerRef.current = setTimeout(() => {
             setColumnsSearchRef.current(value);
         }, 700);
     }, []);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (columnsSearch.length && searchRef.current) {
             searchRef.current.value = columnsSearch;
         }
         /* eslint-disable */
     }, [refreshDataOnOpen]);
     // Auto-focus input when popover opens
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (isOpen && searchRef.current) {
             // Small delay to ensure popover is fully rendered
-            setTimeout(function () {
+            setTimeout(() => {
                 var _a;
                 (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, 100);
         }
     }, [isOpen]);
-    var handleOpen = function () {
-        setRefreshDataOnOpen(function (prev) { return !prev; });
+    const handleOpen = () => {
+        setRefreshDataOnOpen((prev) => !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(); } })))))));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17, color: (_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" } }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "200px", 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: "gray.400", boxSize: 4 }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+                                        e.stopPropagation();
+                                        debouncedSearch(e.target.value);
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));
 });
 exports.default = TableFilters;

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

@@ -1,4 +1,3 @@
-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, }: {
@@ -9,4 +8,5 @@ export declare function TextOperationControls({ operator, value, onOperatorChang
     size?: "xs" | "sm";
     ml?: string | number;
     mt?: string | number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextOperationControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextOperationControls.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/TextOperationControls.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,UAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,YACO,CAAC;AAEhD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,aAAa,EACb,IAAW,EACX,EAAc,EACd,EAAM,GACP,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB,2CA4BA"}

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

@@ -1,12 +1,9 @@
 "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");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
 exports.TEXT_OPERATORS = [
     "is",
     "is not",
@@ -17,13 +14,8 @@ exports.TEXT_OPERATORS = [
     "is empty",
     "is not empty",
 ];
-var requiresValue = function (op) {
-    return !(op === "is empty" || op === "is not empty");
-};
+const requiresValue = (op) => !(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%" }))));
+function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [(0, jsx_runtime_1.jsx)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "110px", children: exports.TEXT_OPERATORS.map((op) => ((0, jsx_runtime_1.jsx)("option", { value: op, children: op }, op))) }), (0, exports.requiresValue)(operator) && ((0, jsx_runtime_1.jsx)(react_1.Input, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))] }));
 }