@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

package/dist/components/core/common/SolidGlobalSearchElement.js

@@ -55,16 +55,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { Dialog } from "primereact/dialog";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import FilterComponent, { FilterOperator, FilterRuleType } from "../../../components/core/common/FilterComponent";
-import { Button } from "primereact/button";
-import { Divider } from "primereact/divider";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
 import { getFilterObjectFromLocalStorage } from "../list/SolidListView";
-import { InputText } from "primereact/inputtext";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
 import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
@@ -72,6 +68,10 @@ import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 import { useSession } from '../../../hooks/useSession';
 import GroupingComponent from "./GroupingComponent";
+import { Bookmark, Check, Filter, Pencil, Plus, Search, SearchX, Trash2, X } from "lucide-react";
+import { SolidButton } from "../../shad-cn-ui/SolidButton";
+import { SolidInput } from "../../shad-cn-ui/SolidInput";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogDescription, SolidDialogFooter, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, } from "../../shad-cn-ui/SolidDialog";
 var getRandomInt = function (min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
@@ -400,12 +400,13 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     return filters;
 };
 var SavedFilterList = function (_a) {
-    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused;
-    return (_jsxs("div", { className: "flex align-items-center justify-content-between gap-2", children: [_jsx("div", { children: _jsx(Button, { text: true, size: "small", className: "text-base py-1 w-full ".concat(isFocused ? 'surface-hover' : ''), severity: Number(activeSavedFilter) == savedfilter.id ? "secondary" : "contrast", onClick: function () { return applySavedFilter(savedfilter); }, tooltip: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description, children: savedfilter.name }) }), _jsx("div", { className: "flex align-items-center gap-2", children: savedfilter.isSeeded !== true &&
-                    _jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-pencil", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return openSavedCustomFilter(savedfilter); } }), _jsx(Button, { icon: "pi pi-trash", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () {
+    var savedfilter = _a.savedfilter, activeSavedFilter = _a.activeSavedFilter, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused, onMouseEnter = _a.onMouseEnter;
+    var isActive = Number(activeSavedFilter) == savedfilter.id;
+    return (_jsxs("div", { className: "solid-saved-filter-item", onMouseEnter: onMouseEnter, children: [_jsx("div", { className: "solid-saved-filter-main-wrap", children: _jsx(SolidButton, { variant: "ghost", size: "sm", className: "solid-saved-filter-main w-full ".concat(isActive ? "is-active" : "", " ").concat(isFocused ? "solid-search-overlay-option-active" : ""), onClick: function () { return applySavedFilter(savedfilter); }, title: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description, children: savedfilter.name }) }), _jsx("div", { className: "solid-saved-filter-actions", children: savedfilter.isSeeded !== true &&
+                    _jsxs(_Fragment, { children: [_jsx(SolidButton, { variant: "outline", size: "sm", className: "solid-saved-filter-icon-btn", onClick: function () { return openSavedCustomFilter(savedfilter); }, children: _jsx(Pencil, { size: 14 }) }), _jsx(SolidButton, { variant: "outline", size: "sm", className: "solid-saved-filter-icon-btn is-danger", onClick: function () {
                                     setSavedFilterTobeDeleted(savedfilter.id),
                                         setIsDeleteSQDialogVisible(true);
-                                } })] }) })] }));
+                                }, children: _jsx(Trash2, { size: 14 }) })] }) })] }));
 };
 var replacePlaceholders = function (obj, searchValue) {
     if (typeof obj === 'string') {
@@ -467,7 +468,7 @@ var extractChips = function (node) {
     return [];
 };
 export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
     var defaultState = [
         {
@@ -508,61 +509,78 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var defaultGroupingRules = [
         { id: 1, fieldName: null, dateGrouping: null }
     ];
-    var _j = useState(defaultState), initialState = _j[0], setInitialState = _j[1];
+    var _t = useState(defaultState), initialState = _t[0], setInitialState = _t[1];
     var pathname = usePathname();
+    var searchableEntityLabel = ((_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.displayName) ||
+        ((_f = (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.displayName) ||
+        "records";
     var searchParams = useSearchParams(); // Converts the query params to a string
     var activeSavedFilter = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("savedQuery");
     var router = useRouter();
     var chipsRef = useRef(null);
     // filterRules is used to maintian the ui of custom filter 
     // customFilter is used to maintian the transformed filter object of custom filter
-    var _k = useState(initialState), filterRules = _k[0], setFilterRules = _k[1];
-    var _l = useState(null), customFilter = _l[0], setCustomFilter = _l[1];
-    var _m = useState([]), fields = _m[0], setFields = _m[1];
-    var _o = useState([]), searchableFields = _o[0], setSearchableFields = _o[1];
-    var _p = useState([]), groupableFields = _p[0], setGroupableFields = _p[1];
-    var _q = useState(defaultGroupingRules), groupingRules = _q[0], setGroupingRules = _q[1];
-    var _r = useState(defaultAggregationRules), aggregationRules = _r[0], setAggregationRules = _r[1];
+    var _u = useState(initialState), filterRules = _u[0], setFilterRules = _u[1];
+    var _v = useState(null), customFilter = _v[0], setCustomFilter = _v[1];
+    var _w = useState([]), fields = _w[0], setFields = _w[1];
+    var _x = useState([]), searchableFields = _x[0], setSearchableFields = _x[1];
+    var _y = useState([]), groupableFields = _y[0], setGroupableFields = _y[1];
+    var _z = useState(defaultGroupingRules), groupingRules = _z[0], setGroupingRules = _z[1];
+    var _0 = useState(defaultAggregationRules), aggregationRules = _0[0], setAggregationRules = _0[1];
     // used to show the list of predefined searches 
-    var _s = useState([]), predefinedSearches = _s[0], setPredefinedSearches = _s[1];
+    var _1 = useState([]), predefinedSearches = _1[0], setPredefinedSearches = _1[1];
     // used to open / close the custom fitler popup 
-    var _t = useState(false), showGlobalSearchElement = _t[0], setShowGlobalSearchElement = _t[1];
+    var _2 = useState(false), showGlobalSearchElement = _2[0], setShowGlobalSearchElement = _2[1];
     // used to open / close the group fitler popup 
-    var _u = useState(false), showGroupFilterElement = _u[0], setShowGroupFilterElement = _u[1];
+    var _3 = useState(false), showGroupFilterElement = _3[0], setShowGroupFilterElement = _3[1];
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
-    var _v = useState([]), searchChips = _v[0], setSearchChips = _v[1];
-    var _w = useState(null), searchFilter = _w[0], setSearchFilter = _w[1];
+    var _4 = useState([]), searchChips = _4[0], setSearchChips = _4[1];
+    var _5 = useState(null), searchFilter = _5[0], setSearchFilter = _5[1];
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _x = useState(null), predefinedSearchChip = _x[0], setPredefinedSearchChip = _x[1];
+    var _6 = useState(null), predefinedSearchChip = _6[0], setPredefinedSearchChip = _6[1];
     //  state to maintain the text typed in the search input box
-    var _y = useState(""), inputValue = _y[0], setInputValue = _y[1];
+    var _7 = useState(""), inputValue = _7[0], setInputValue = _7[1];
+    var _8 = useState(-1), focusedIndex = _8[0], setFocusedIndex = _8[1];
     // flag to prevent un necessary re renders
-    var _z = useState(false), hasSearched = _z[0], setHasSearched = _z[1];
+    var _9 = useState(false), hasSearched = _9[0], setHasSearched = _9[1];
     // currentSavedFilterData  is used to save the whole object of saved filter 
-    var _0 = useState(), currentSavedFilterData = _0[0], setCurrentSavedFilterData = _0[1];
-    var _1 = useState(), currentSavedFilterQuery = _1[0], setCurrentSavedFilterQuery = _1[1];
-    var _2 = useState(), currentSavedFilterRules = _2[0], setCurrentSavedFilterRules = _2[1];
-    var _3 = useState(false), showSavedFilterComponent = _3[0], setShowSavedFilterComponent = _3[1];
-    var _4 = useState(), savedFilterTobeDeleted = _4[0], setSavedFilterTobeDeleted = _4[1];
-    var _5 = useState(false), isDeleteSQDialogVisible = _5[0], setIsDeleteSQDialogVisible = _5[1];
-    var _6 = useState(), savedFilterQueryString = _6[0], setSavedFilterQueryString = _6[1];
-    var _7 = useState(false), showOverlay = _7[0], setShowOverlay = _7[1];
+    var _10 = useState(), currentSavedFilterData = _10[0], setCurrentSavedFilterData = _10[1];
+    var _11 = useState(), currentSavedFilterQuery = _11[0], setCurrentSavedFilterQuery = _11[1];
+    var _12 = useState(), currentSavedFilterRules = _12[0], setCurrentSavedFilterRules = _12[1];
+    var _13 = useState(false), showSavedFilterComponent = _13[0], setShowSavedFilterComponent = _13[1];
+    var _14 = useState(), savedFilterTobeDeleted = _14[0], setSavedFilterTobeDeleted = _14[1];
+    var _15 = useState(false), isDeleteSQDialogVisible = _15[0], setIsDeleteSQDialogVisible = _15[1];
+    var _16 = useState(), savedFilterQueryString = _16[0], setSavedFilterQueryString = _16[1];
+    var _17 = useState(false), showOverlay = _17[0], setShowOverlay = _17[1];
     var overlayRef = useRef(null);
-    var _8 = useState(-1), focusedIndex = _8[0], setFocusedIndex = _8[1];
-    var _9 = useSession(), session = _9.data, status = _9.status;
+    var _18 = useState(false), showChipManager = _18[0], setShowChipManager = _18[1];
+    var chipManagerRef = useRef(null);
+    var chipManagerTriggerRef = useRef(null);
+    useEffect(function () {
+        if (focusedIndex >= 0 && showOverlay) {
+            var activeElement = document.querySelector(".solid-search-overlay-option-active");
+            if (activeElement) {
+                activeElement.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'start'
+                });
+            }
+        }
+    }, [focusedIndex, showOverlay]);
+    var _19 = useSession(), session = _19.data, status = _19.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _10 = useState(0), refreshKey = _10[0], setRefreshKey = _10[1];
-    var _11 = useState(null), predefinedSearchBaseFilter = _11[0], setPredefinedSearchBaseFilter = _11[1];
-    var _12 = useState([]), savedFilters = _12[0], setSavedFilters = _12[1];
-    var _13 = useState(false), savedFiltersLoaded = _13[0], setSavedFiltersLoaded = _13[1];
+    var _20 = useState(0), refreshKey = _20[0], setRefreshKey = _20[1];
+    var _21 = useState(null), predefinedSearchBaseFilter = _21[0], setPredefinedSearchBaseFilter = _21[1];
+    var _22 = useState([]), savedFilters = _22[0], setSavedFilters = _22[1];
+    var _23 = useState(false), savedFiltersLoaded = _23[0], setSavedFiltersLoaded = _23[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _14 = useCreateSolidEntityMutation(), createEntity = _14[0], _15 = _14[1], isEntityCreateSuccess = _15.isSuccess, isEntityCreateError = _15.isError, entityCreateError = _15.error;
-    var _16 = useUpdateSolidEntityMutation(), updateEntity = _16[0], _17 = _16[1], isEntityUpdateSuceess = _17.isSuccess, isEntityUpdateError = _17.isError, entityUpdateError = _17.error;
-    var _18 = useDeleteSolidEntityMutation(), deleteEntity = _18[0], _19 = _18[1], isEntityDeleteSuceess = _19.isSuccess, isEntityDeleteError = _19.isError, entityDeleteError = _19.error;
-    var _20 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _20[0], _21 = _20[1], solidEntityListViewData = _21.data, isSavedFilterLoading = _21.isLoading, error = _21.error;
-    var _22 = useState(0), savedFilterFetchDataRefreshKey = _22[0], setSavedFilterFetchDataRefreshKey = _22[1];
+    var _24 = useCreateSolidEntityMutation(), createEntity = _24[0], _25 = _24[1], isEntityCreateSuccess = _25.isSuccess, isEntityCreateError = _25.isError, entityCreateError = _25.error;
+    var _26 = useUpdateSolidEntityMutation(), updateEntity = _26[0], _27 = _26[1], isEntityUpdateSuceess = _27.isSuccess, isEntityUpdateError = _27.isError, entityUpdateError = _27.error;
+    var _28 = useDeleteSolidEntityMutation(), deleteEntity = _28[0], _29 = _28[1], isEntityDeleteSuceess = _29.isSuccess, isEntityDeleteError = _29.isError, entityDeleteError = _29.error;
+    var _30 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _30[0], _31 = _30[1], solidEntityListViewData = _31.data, isSavedFilterLoading = _31.isLoading, error = _31.error;
+    var _32 = useState(0), savedFilterFetchDataRefreshKey = _32[0], setSavedFilterFetchDataRefreshKey = _32[1];
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -606,7 +624,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     case 1:
                         savedFilter = _p.sent();
                         if (savedFilter) {
-                            console.log("savedFilter", savedFilter);
+                            // console.log("savedFilter", savedFilter);
                             setSavedFilters(savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.records);
                         }
                         setSavedFiltersLoaded(true);
@@ -618,13 +636,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     }, [
         activeSavedFilter,
         savedFilterFetchDataRefreshKey,
-        (_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.id,
-        (_f = (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.id,
+        (_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.id,
+        (_l = (_k = (_j = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _j === void 0 ? void 0 : _j.solidView) === null || _k === void 0 ? void 0 : _k.model) === null || _l === void 0 ? void 0 : _l.id,
         user === null || user === void 0 ? void 0 : user.id
     ]);
     useImperativeHandle(ref, function () { return ({
         clearFilter: function () {
             setFilterRules(initialState);
+        },
+        openGroupingDialog: function () {
+            setShowOverlay(false);
+            setShowGroupFilterElement(true);
+        },
+        openCustomFilterDialog: function () {
+            setShowOverlay(false);
+            setShowGlobalSearchElement(true);
         }
     }); });
     useEffect(function () {
@@ -704,7 +730,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             });
         }); };
         fn();
-    }, [(_h = (_g = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.id, activeSavedFilter, savedFiltersLoaded]);
+    }, [(_o = (_m = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.id, activeSavedFilter, savedFiltersLoaded]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var rules, hydratedRules, formattedChips;
@@ -764,7 +790,16 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     relationType: (_g = value === null || value === void 0 ? void 0 : value.relationType) !== null && _g !== void 0 ? _g : null,
                 };
             });
-            setFields(fieldsList);
+            var filterableFieldsList = fieldsList.filter(function (field) {
+                switch (field.type) {
+                    case "mediaSingle":
+                    case "mediaMultiple":
+                        return false;
+                    default:
+                        return true;
+                }
+            });
+            setFields(filterableFieldsList);
             var searchableFieldsList = fieldsList.filter(function (field) {
                 if (!field.isSearchable)
                     return false;
@@ -870,7 +905,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         }
     };
     var clearCustomFilter = function () {
-        // handleApplyCustomFilter(finalFilter)
         setFilterRules(initialState);
         setCustomFilter(null);
         // setPredefinedSearchChip(null)
@@ -889,7 +923,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         //     };
         // }
         setCustomFilter(finalCustomFilter);
-        // handleApplyCustomFilter(finalFilter);
         setShowGlobalSearchElement(false);
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
@@ -905,7 +938,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         //     };
         // }
         setCurrentSavedFilterQuery(finalCustomFilter);
-        // handleApplyCustomFilter(finalFilter);
         setShowSavedFilterComponent(false);
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
@@ -917,6 +949,14 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setAggregationRules(aggregationRules);
         setRefreshKey(function (prev) { return prev + 1; });
     };
+    var openCustomFilterDialog = function () {
+        setShowOverlay(false);
+        setShowGlobalSearchElement(true);
+    };
+    var openGroupingDialog = function () {
+        setShowOverlay(false);
+        setShowGroupFilterElement(true);
+    };
     useEffect(function () {
         if (refreshKey > 0 && hasSearched) {
             var formattedChips = {
@@ -1101,13 +1141,30 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [showOverlay]);
+    useEffect(function () {
+        function handleChipManagerClickOutside(event) {
+            var _a, _b;
+            var targetNode = event.target;
+            if ((_a = chipManagerRef.current) === null || _a === void 0 ? void 0 : _a.contains(targetNode))
+                return;
+            if ((_b = chipManagerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(targetNode))
+                return;
+            setShowChipManager(false);
+        }
+        if (showChipManager) {
+            document.addEventListener("mousedown", handleChipManagerClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleChipManagerClickOutside);
+        };
+    }, [showChipManager]);
     var CustomChip = function () {
         var _a, _b, _c, _d;
-        console.log("customFilter", customFilter);
+        // console.log("customFilter", customFilter);
         var ruleCount = (_d = (_b = (_a = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : (_c = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : Object.keys(customFilter || {}).length;
         return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2 text-base", children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", onClick: function () {
                                     setShowGlobalSearchElement(true);
-                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: ruleCount }), " rules applied"] })] }), _jsx("a", { onClick: clearCustomFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: ruleCount }), " rules applied"] })] }), _jsx("button", { type: "button", onClick: clearCustomFilter, style: { cursor: "pointer" }, className: "ml-1", children: _jsx(X, { size: 14 }) })] }) }));
     };
     //saved filter related code start
     var applySavedFilter = function (savedfilter) {
@@ -1160,7 +1217,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                         });
                                     }); };
                                     fn();
-                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsx("span", { children: _jsx("strong", { children: currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name }) })] }), _jsx("a", { onClick: removeSavedFilter, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+                                }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsx("span", { children: _jsx("strong", { children: currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name }) })] }), _jsx("button", { type: "button", onClick: removeSavedFilter, style: { cursor: "pointer" }, className: "ml-1", children: _jsx(X, { size: 14 }) })] }) }));
     };
     var removeGrouping = function () {
         setGroupingRules(defaultGroupingRules);
@@ -1169,7 +1226,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setRefreshKey(function (prev) { return prev + 1; });
     };
     var GroupingChip = function () {
-        return (_jsx("li", { className: "solid-global-search-chip", children: _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: function () { return setShowGroupFilterElement(true); }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: groupingRules.length }), " Grouping rules applied"] })] }), _jsx("a", { onClick: removeGrouping, style: { cursor: "pointer" }, children: _jsx("i", { className: "pi pi-times ml-1" }) })] }) }));
+        return (_jsx("li", { className: "solid-global-search-chip", children: _jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: function () { return setShowGroupFilterElement(true); }, children: [_jsx("rect", { width: "20", height: "20", rx: "4", fill: "#722ED1" }), _jsx("path", { d: "M8.66667 15V13.3333H11.3333V15H8.66667ZM6 10.8333V9.16667H14V10.8333H6ZM4 6.66667V5H16V6.66667H4Z", fill: "white" })] }), _jsxs("span", { children: [_jsx("strong", { children: groupingRules.length }), " Grouping rules applied"] })] }), _jsx("button", { type: "button", onClick: removeGrouping, style: { cursor: "pointer" }, className: "ml-1", children: _jsx(X, { size: 14 }) })] }) }));
     };
     //saved filter related code end
     // search related code start
@@ -1189,63 +1246,160 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         acc[key].push(chip.value);
         return acc;
     }, {});
-    var handleKeyDown = function (e) {
-        var hasInput = !!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim());
-        var searchCount = hasInput ? searchableFields.length : 0;
-        var predefinedCount = hasInput ? ((predefinedSearches === null || predefinedSearches === void 0 ? void 0 : predefinedSearches.length) || 0) : 0;
-        var savedFiltersCount = (savedFilters === null || savedFilters === void 0 ? void 0 : savedFilters.length) || 0;
-        var totalItems = searchCount + predefinedCount + savedFiltersCount;
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            if (showOverlay) {
-                setFocusedIndex(function (prev) { return (prev < totalItems - 1 ? prev + 1 : prev); });
-            }
+    var customRuleCount = (_s = (_q = (_p = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _p === void 0 ? void 0 : _p.length) !== null && _q !== void 0 ? _q : (_r = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : Object.keys(customFilter || {}).length;
+    var managedChipItems = useMemo(function () {
+        var items = [];
+        if (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name) {
+            items.push({
+                id: "saved-filter",
+                type: "saved",
+                label: "Saved: ".concat(currentSavedFilterData.name),
+                onRemove: function () { return removeSavedFilter(); },
+            });
+        }
+        if ((predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.name) && (predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.value)) {
+            items.push({
+                id: "predefined-search",
+                type: "predefined",
+                label: "Predefined: ".concat(predefinedSearchChip.name, " (").concat(predefinedSearchChip.value, ")"),
+                onRemove: function () { return removePredefinedSearchChip(); },
+            });
+        }
+        if (customFilter && customRuleCount > 0) {
+            items.push({
+                id: "custom-filter",
+                type: "custom",
+                label: "".concat(customRuleCount, " custom rules applied"),
+                onRemove: function () { return clearCustomFilter(); },
+                onOpen: function () { return setShowGlobalSearchElement(true); }
+            });
+        }
+        if (groupingRules.length > 0 && groupingRules.some(function (r) { return r.fieldName !== null; })) {
+            items.push({
+                id: "grouping-rules",
+                type: "grouping",
+                label: "".concat(groupingRules.length, " grouping rules applied"),
+                onRemove: function () { return removeGrouping(); },
+                onOpen: function () { return setShowGroupFilterElement(true); }
+            });
+        }
+        Object.entries(groupedSearchChips).forEach(function (_a) {
+            var column = _a[0], values = _a[1];
+            var fieldMeta = searchableFields.find(function (field) { return field.fieldName === column; });
+            var columnDisplayName = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.displayName) || column;
+            items.push({
+                id: "search:".concat(column),
+                type: "search",
+                label: "".concat(columnDisplayName, ": ").concat(values.join(" or ")),
+                onRemove: function () { return handleRemoveChipGroup(column); },
+            });
+        });
+        return items;
+    }, [
+        currentSavedFilterData,
+        predefinedSearchChip,
+        customFilter,
+        customRuleCount,
+        groupingRules,
+        groupedSearchChips,
+        searchableFields,
+    ]);
+    var MAX_VISIBLE_CHIPS = 3;
+    var visibleChipItems = managedChipItems.slice(0, MAX_VISIBLE_CHIPS);
+    var hiddenChipItems = managedChipItems.slice(MAX_VISIBLE_CHIPS);
+    var hiddenChipCount = hiddenChipItems.length;
+    var clearAllAppliedChips = function () {
+        if (managedChipItems.length === 0)
+            return;
+        if (activeSavedFilter || currentSavedFilterData) {
+            removeSavedFilter();
         }
-        else if (e.key === "ArrowUp") {
+        setSearchChips([]);
+        setSearchFilter(null);
+        setPredefinedSearchChip(null);
+        setPredefinedSearchBaseFilter(null);
+        setCustomFilter(null);
+        setFilterRules(initialState);
+        setGroupingRules(defaultGroupingRules);
+        setAggregationRules(defaultAggregationRules);
+        setShowChipManager(false);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
+    useEffect(function () {
+        if (managedChipItems.length === 0 && showChipManager) {
+            setShowChipManager(false);
+        }
+    }, [managedChipItems.length, showChipManager]);
+    var overlayOptions = useMemo(function () {
+        var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
+        var fields = currentValue
+            ? searchableFields.map(function (field) { return ({
+                id: "field:".concat(field.fieldName),
+                kind: "field",
+                field: field
+            }); })
+            : [];
+        var predefined = currentValue && (predefinedSearches === null || predefinedSearches === void 0 ? void 0 : predefinedSearches.length)
+            ? predefinedSearches.map(function (p, idx) { return ({
+                id: "predefined:".concat(p.name || idx),
+                kind: "predefined",
+                predefined: p,
+            }); })
+            : [];
+        var saved = (savedFilters || []).map(function (s) { return ({
+            id: "saved:".concat(s.id),
+            kind: "saved",
+            saved: s,
+        }); });
+        return __spreadArray(__spreadArray(__spreadArray([], fields, true), predefined, true), saved, true);
+    }, [inputValue, searchableFields, predefinedSearches, savedFilters]);
+    var handleKeyDown = function (e) {
+        var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
+        var applyFieldOption = function (value) {
+            var trimmed = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
+            if (!trimmed)
+                return;
+            var values = trimmed.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
+            var chipsToAdd = values.map(function (v) { return ({
+                columnName: value.fieldName,
+                value: v,
+                columnDisplayName: value.displayName,
+                searchField: value.searchField,
+                matchMode: value.matchMode
+            }); });
+            setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd, true); });
+            setInputValue("");
+            setHasSearched(true);
+            setRefreshKey(function (prev) { return prev + 1; });
+            setShowOverlay(false);
+        };
+        if ((e.key === "ArrowDown" || e.key === "ArrowUp") && overlayOptions.length > 0) {
             e.preventDefault();
-            if (showOverlay) {
-                setFocusedIndex(function (prev) { return (prev > -1 ? prev - 1 : prev); });
-            }
+            setShowOverlay(true);
+            var nextIndex = e.key === "ArrowDown"
+                ? (focusedIndex + 1) % overlayOptions.length
+                : (focusedIndex <= 0 ? overlayOptions.length - 1 : focusedIndex - 1);
+            setFocusedIndex(nextIndex);
+            return;
         }
-        else if (e.key === "Enter") {
-            if (hasInput || focusedIndex >= 0)
+        if (e.key === "Enter") {
+            if (currentValue || focusedIndex >= 0) {
                 e.preventDefault();
-            var predefinedSearchOffset = searchCount;
-            var savedFilterOffset = predefinedSearchOffset + predefinedCount;
-            if (showOverlay && focusedIndex >= 0 && focusedIndex < predefinedSearchOffset) {
-                var value_1 = searchableFields[focusedIndex];
-                var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
-                var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
-                var chipsToAdd_2 = values.map(function (v) { return ({
-                    columnName: value_1.fieldName,
-                    value: v,
-                    columnDisplayName: value_1.displayName,
-                    searchField: value_1.searchField,
-                    matchMode: value_1.matchMode
-                }); });
-                setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_2, true); });
-                setInputValue("");
-                setHasSearched(true);
-                setRefreshKey(function (prev) { return prev + 1; });
-                setShowOverlay(false);
-                setFocusedIndex(-1);
-            }
-            else if (showOverlay && focusedIndex >= predefinedSearchOffset && focusedIndex < savedFilterOffset) {
-                var predefinedSearch = predefinedSearches[focusedIndex - predefinedSearchOffset];
-                handlePredefinedSearch(predefinedSearch);
-                setFocusedIndex(-1);
-            }
-            else if (showOverlay && focusedIndex >= savedFilterOffset && focusedIndex < totalItems) {
-                var savedFilterIdx = focusedIndex - savedFilterOffset;
-                var savedFilter = savedFilters[savedFilterIdx];
-                if (savedFilter)
-                    applySavedFilter(savedFilter);
-                setFocusedIndex(-1);
-            }
-            else if (hasInput) {
-                handleAddChip();
-                setShowOverlay(false);
-                setFocusedIndex(-1);
+                var activeOption = overlayOptions[focusedIndex] || (currentValue ? overlayOptions[0] : null);
+                if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "field") {
+                    applyFieldOption(activeOption.field);
+                }
+                else if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "predefined") {
+                    handlePredefinedSearch(activeOption.predefined);
+                }
+                else if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "saved") {
+                    applySavedFilter(activeOption.saved);
+                }
+                else if (currentValue) {
+                    handleAddChip();
+                    setShowOverlay(false);
+                }
             }
         }
         else if (e.key === "Backspace" && inputValue === "") {
@@ -1263,19 +1417,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             else if (activeSavedFilter) {
                 removeSavedFilter();
             }
-            else if (activeSavedFilter) {
-                clearCustomFilter();
-            }
             setHasSearched(true);
             setRefreshKey(function (prev) { return prev + 1; });
         }
     };
+    useEffect(function () {
+        if (!showOverlay) {
+            setFocusedIndex(-1);
+        }
+    }, [showOverlay]);
     var SearchChip = function () { return (_jsx(_Fragment, { children: Object.entries(groupedSearchChips).map(function (_a) {
             var column = _a[0], values = _a[1];
             var fieldMeta = searchableFields.find(function (f) { return f.fieldName === column; });
             var columnDisplayName = (fieldMeta === null || fieldMeta === void 0 ? void 0 : fieldMeta.displayName) || column;
             return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsx("div", { children: columnDisplayName }), values.map(function (value, index) { return (_jsxs(React.Fragment, { children: [_jsx("span", { className: "custom-chip-value", children: value }, index), index < values.length - 1 &&
-                                    _jsx("span", { className: "custom-chip-or", children: "or" })] })); }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: function () { return handleRemoveChipGroup(column); } })] }) }, column));
+                                    _jsx("span", { className: "custom-chip-or", children: "or" })] })); }), _jsx("button", { type: "button", className: "ml-1", style: { cursor: "pointer" }, onClick: function () { return handleRemoveChipGroup(column); }, children: _jsx(X, { size: 14 }) })] }) }, column));
         }) })); };
     // search related code end
     // predefinedfilter related code start
@@ -1303,8 +1459,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setPredefinedSearchBaseFilter(processedFilter);
             // Apply the predefined search filter as custom filter
             // setCustomFilter(processedFilter);
-            // Apply the filter
-            // handleApplyCustomFilter(finalFilter);
             // Clear input and close overlay
             setInputValue("");
             setShowOverlay(false);
@@ -1320,63 +1474,67 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
         setCustomFilter(null);
-        // handleApplyCustomFilter(finalFilter);
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
     };
-    var PredefinedSearchChip = function () { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("strong", { children: [predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.name, ":"] }), _jsx("span", { className: "custom-chip-value", children: predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.value })] }), _jsx("i", { className: "pi pi-times ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip })] }) })); };
+    var PredefinedSearchChip = function () { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsxs("strong", { children: [predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.name, ":"] }), _jsx("span", { className: "custom-chip-value", children: predefinedSearchChip === null || predefinedSearchChip === void 0 ? void 0 : predefinedSearchChip.value })] }), _jsx("button", { type: "button", className: "ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip, children: _jsx(X, { size: 14 }) })] }) })); };
     // predefinedfilter related code end
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "", children: [currentSavedFilterData && _jsx(SavedFiltersChip, {}), predefinedSearchChip && _jsx(PredefinedSearchChip, {}), customFilter && _jsx(CustomChip, {}), groupingRules.length > 0 && groupingRules.some(function (r) { return r.fieldName !== null; }) && _jsx(GroupingChip, {}), _jsx(SearchChip, {}), _jsx("li", { ref: chipsRef, children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(InputText, { value: inputValue || "", placeholder: "Search.", onChange: function (e) {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex justify-content-center solid-custom-filter-wrapper relative", children: [_jsx("div", { className: "solid-global-search-element", children: _jsxs("ul", { className: "solid-global-search-chip-list", children: [visibleChipItems.map(function (chip) { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type solid-chip-pill solid-chip-tone-".concat(chip.type), children: [_jsx("span", { className: "custom-chip-value solid-chip-pill-label", title: chip.label, children: chip.label }), _jsx("button", { type: "button", className: "solid-chip-pill-remove", onMouseDown: function (e) { return e.preventDefault(); }, onClick: chip.onRemove, "aria-label": "Remove ".concat(chip.label), children: _jsx(X, { size: 14 }) })] }) }, chip.id)); }), hiddenChipCount > 0 && (_jsx("li", { children: _jsxs("button", { type: "button", ref: chipManagerTriggerRef, className: "solid-chip-manage-trigger", onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return setShowChipManager(function (prev) { return !prev; }); }, children: ["+", hiddenChipCount, " more"] }) })), managedChipItems.length > 0 && hiddenChipCount === 0 && (_jsx("li", { children: _jsx("button", { type: "button", ref: chipManagerTriggerRef, className: "solid-chip-manage-trigger solid-chip-manage-trigger-secondary", onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return setShowChipManager(function (prev) { return !prev; }); }, children: "Manage" }) })), _jsx("li", { ref: chipsRef, className: "solid-global-search-input-item", children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(SolidInput, { className: "solid-global-search-input", value: inputValue || "", placeholder: "Search.", onChange: function (e) {
                                                 setInputValue(e.target.value);
+                                                setShowChipManager(false);
                                                 setShowOverlay(true);
                                                 setFocusedIndex(-1);
                                             }, onFocus: function () {
+                                                setShowChipManager(false);
                                                 if (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim())
                                                     setShowOverlay(true);
                                             }, onBlur: function () {
                                                 // Delay so you can click buttons inside overlay
                                                 setTimeout(function () { return setShowOverlay(false); }, 150);
-                                            }, onKeyDown: handleKeyDown }), _jsx(Button, { icon: "pi pi-search", style: { fontSize: 10 }, severity: "secondary", outlined: true, size: "small", onClick: function () { return setShowOverlay(true); }, className: "custom-filter-button" })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 shadow-2 solid-search-overlay-pannel", style: { top: 35, background: "var(--surface-0)", border: '1px solid var(--surface-300) !important', borderRadius: '6px' }, children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Search By Fields" }), searchableFields.map(function (value, index) {
-                                            // console.log("value", value);
-                                            return (_jsxs(Button, { className: "p-2 flex gap-1 text-color ".concat(focusedIndex === index ? 'surface-hover' : ''), 
-                                                // onClick={() => handleAddChip(value)}
-                                                onMouseDown: function (e) {
-                                                    // Prevent focus loss from input
-                                                    e.preventDefault();
-                                                    var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
-                                                    if (currentValue) {
-                                                        var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
-                                                        var chipsToAdd_3 = values.map(function (v) { return ({
-                                                            columnName: value.fieldName,
-                                                            value: v,
-                                                            columnDisplayName: value.displayName,
-                                                            searchField: value.searchField,
-                                                            matchMode: value.matchMode
-                                                        }); });
-                                                        setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_3, true); });
-                                                        setInputValue("");
-                                                        setHasSearched(true);
-                                                        setRefreshKey(function (prev) { return prev + 1; });
-                                                        setShowOverlay(false);
-                                                    }
-                                                }, text: true, severity: "secondary", size: "small", children: ["Search ", _jsx("strong", { children: value.displayName }), " for: ", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index));
-                                        })] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: "m-0" }), _jsxs("div", { className: "custom-filter-search-options px-3 py-2 flex flex-column", children: [_jsx("h6", { className: "my-1 font-bold", children: "Predefined Searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(Button, { className: "p-2 flex flex-column align-items-start gap-1 text-color ".concat(focusedIndex === (index + searchableFields.length) ? 'surface-hover' : ''), onMouseDown: function (e) {
-                                                        e.preventDefault();
-                                                        handlePredefinedSearch(predefinedSearch);
-                                                    }, text: true, severity: "secondary", size: "small", children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
-                            _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 text-base", children: "Search Here..." }), _jsx(Divider, { className: "m-0" })] }), savedFilters.length > 0 &&
-                            _jsxs(_Fragment, { children: [_jsxs("div", { className: "p-3", children: [_jsx("p", { className: "font-medium", children: "Saved Filters" }), _jsx("div", { className: "flex flex-column gap-2", children: savedFilters.map(function (savedfilter, idx) {
-                                                    var hasInput = !!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim());
-                                                    var combinedOffset = (hasInput ? searchableFields.length : 0) + (hasInput ? ((predefinedSearches === null || predefinedSearches === void 0 ? void 0 : predefinedSearches.length) || 0) : 0);
-                                                    return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible, isFocused: focusedIndex === combinedOffset + idx }, idx));
-                                                }) })] }), _jsx(Divider, { className: "m-0" })] }), _jsxs("div", { className: "px-2 py-1 flex justify-content-between", children: [_jsx(Button, { text: true, size: "small", label: "Custom Filter", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGlobalSearchElement(true); }, className: "font-bold" }), viewType === "tree" &&
-                                    _jsx(Button, { text: true, size: "small", label: "Grouping", iconPos: "left", icon: 'pi pi-plus', onClick: function () { return setShowGroupFilterElement(true); }, className: "font-bold" })] })] })), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGlobalSearchElement, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGlobalSearchElement)
-                        return; setShowGlobalSearchElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Add Custom Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGlobalSearchElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-2 lg:p-2", children: fields.length > 0 &&
-                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformCustomFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showGroupFilterElement, style: { width: '20vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showGroupFilterElement)
-                        return; setShowGroupFilterElement(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowGroupFilterElement(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-2 lg:p-2", children: groupableFields.length > 0 &&
-                                _jsx(GroupingComponent, { viewData: viewData, fields: groupableFields, groupingRules: groupingRules, setGroupingRules: setGroupingRules, aggregationRules: aggregationRules, setAggregationRules: setAggregationRules, applyGrouping: applyGrouping, closeDialog: function () { return setShowGroupFilterElement(false); } }) })] }), _jsxs(Dialog, { header: false, className: "solid-global-search-filter", showHeader: false, visible: showSavedFilterComponent, style: { width: '65vw' }, breakpoints: { '1024px': '75vw', '991px': '90vw', '767px': '94w', '250px': '96vw' }, onHide: function () { if (!showSavedFilterComponent)
-                        return; setShowSavedFilterComponent(false); }, children: [_jsxs("div", { className: "flex align-items-center justify-content-between px-3", children: [_jsx("h5", { className: "solid-custom-title m-0", children: "Saved Filter" }), _jsx(Button, { icon: "pi pi-times", rounded: true, text: true, "aria-label": "Cancel", type: "reset", size: "small", onClick: function () { return setShowSavedFilterComponent(false); } })] }), _jsx(Divider, { className: "m-0" }), _jsx("div", { className: "p-2 lg:p-2", children: fields.length > 0 &&
-                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: currentSavedFilterRules, setFilterRules: setCurrentSavedFilterRules, transformFilterRules: transformSavedFilterRules, closeDialog: function () { return setShowSavedFilterComponent(false); } }) })] }), _jsx(Dialog, { header: "Save Custom Filter", className: "solid-custom-filter-dialog", visible: showSaveFilterPopup, style: { width: 500 }, onHide: function () { if (!showSaveFilterPopup)
-                        return; setShowSaveFilterPopup(false); }, children: _jsx(SolidSaveCustomFilterForm, { currentSavedFilterData: currentSavedFilterData, handleSaveFilter: handleSaveFilter, closeDialog: setShowSaveFilterPopup }) }), _jsx(Dialog, { visible: isDeleteSQDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteSavedFilter }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: function () { return setIsDeleteSQDialogVisible(false); } })] })); }, onHide: function () { return setIsDeleteSQDialogVisible(false); }, children: _jsxs("p", { children: ["Are you sure you want to delete the ", currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name, " saved query?"] }) })] }) }));
+                                            }, onKeyDown: handleKeyDown }), _jsx(SolidButton, { variant: "outline", size: "sm", onClick: function () {
+                                                setShowChipManager(false);
+                                                setShowOverlay(true);
+                                            }, className: "custom-filter-button solid-global-search-trigger", children: _jsx(Search, { size: 14 }) })] }) })] }) }), showChipManager && managedChipItems.length > 0 && (_jsxs("div", { ref: chipManagerRef, className: "absolute z-5 solid-chip-manager-panel", children: [_jsxs("div", { className: "solid-chip-manager-header", children: [_jsxs("div", { className: "solid-chip-manager-title", children: ["Applied chips (", managedChipItems.length, ")"] }), _jsx("button", { type: "button", className: "solid-chip-manager-clear-btn", onClick: clearAllAppliedChips, children: "Clear all" })] }), _jsx("div", { className: "solid-chip-manager-body", children: managedChipItems.map(function (chip) { return (_jsxs("div", { className: "solid-chip-manager-item solid-chip-tone-".concat(chip.type), onClick: function () {
+                                    if (chip.id == "custom-filter" || chip.id == "grouping-rules") {
+                                        if (chip.onOpen) {
+                                            chip.onOpen();
+                                        }
+                                    }
+                                }, children: [_jsx("span", { className: "solid-chip-manager-item-label", title: chip.label, children: chip.label }), _jsx("button", { type: "button", className: "solid-chip-manager-item-remove", onClick: chip.onRemove, "aria-label": "Remove ".concat(chip.label), children: _jsx(X, { size: 14 }) })] }, "manage-".concat(chip.id))); }) })] })), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full z-5 shadow-2 solid-search-overlay-pannel", children: [_jsxs("div", { className: "solid-search-overlay-scroll", children: [inputValue ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options solid-search-overlay-section px-3 py-1 flex flex-column", children: [_jsxs("h6", { className: "my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon", children: [_jsx(Search, { size: 13 }), _jsx("span", { children: "Search by fields" })] }), searchableFields.length > 0 ? (searchableFields.map(function (value, index) {
+                                                    return (_jsxs(SolidButton, { variant: "ghost", size: "sm", className: "flex gap-1 text-color solid-search-overlay-option ".concat(focusedIndex === index ? "solid-search-overlay-option-active" : "", " justify-content-start"), onMouseDown: function (e) {
+                                                            e.preventDefault();
+                                                            var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
+                                                            if (currentValue) {
+                                                                var values = currentValue.split(",").map(function (v) { return v.trim(); }).filter(function (v) { return v !== ""; });
+                                                                var chipsToAdd_2 = values.map(function (v) { return ({
+                                                                    columnName: value.fieldName,
+                                                                    value: v,
+                                                                    columnDisplayName: value.displayName,
+                                                                    searchField: value.searchField,
+                                                                    matchMode: value.matchMode
+                                                                }); });
+                                                                setSearchChips(function (prev) { return __spreadArray(__spreadArray([], prev, true), chipsToAdd_2, true); });
+                                                                setInputValue("");
+                                                                setHasSearched(true);
+                                                                setRefreshKey(function (prev) { return prev + 1; });
+                                                                setShowOverlay(false);
+                                                            }
+                                                        }, onMouseEnter: function () { return setFocusedIndex(index); }, children: ["Search ", _jsx("strong", { style: { paddingLeft: "2px" }, children: value.displayName }), " \u00A0 for:\u00A0 ", _jsx("span", { className: "font-bold text-color", children: inputValue })] }, index));
+                                                })) : (_jsxs("div", { className: "solid-search-overlay-no-fields", children: [_jsx("div", { className: "solid-search-overlay-no-fields-icon", children: _jsx(SearchX, { size: 14 }) }), _jsx("div", { className: "solid-search-overlay-no-fields-text", children: "No fields configured for search." })] }))] }), predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "solid-filter-dialog-sep" }), _jsxs("div", { className: "custom-filter-search-options solid-search-overlay-section px-3 py-1 flex flex-column", children: [_jsx("h6", { className: "my-1 solid-search-overlay-heading solid-search-overlay-section-title", children: "Predefined searches" }), predefinedSearches.map(function (predefinedSearch, index) { return (_jsxs(SolidButton, { variant: "ghost", size: "sm", className: "flex flex-column align-items-start gap-1 text-color solid-search-overlay-option solid-search-overlay-option-stacked ".concat(focusedIndex === searchableFields.length + index ? "solid-search-overlay-option-active" : ""), onMouseDown: function (e) {
+                                                                e.preventDefault();
+                                                                handlePredefinedSearch(predefinedSearch);
+                                                            }, onMouseEnter: function () { return setFocusedIndex(searchableFields.length + index); }, children: [_jsxs("div", { className: "flex gap-1 align-items-center", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsx("span", { className: "font-bold text-color", children: inputValue })] }), _jsx("div", { className: "text-xs", children: predefinedSearch.description })] }, index)); })] })] }))] })) :
+                                    _jsxs(_Fragment, { children: [_jsx("div", { className: "p-3 solid-search-overlay-empty", children: _jsxs("div", { className: "solid-search-overlay-panel-callout", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Search, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-empty-title", children: "Start typing to search" }), _jsxs("div", { className: "solid-search-overlay-empty-subtitle", children: ["Start typing in search input to see all fields on which you can search ", searchableEntityLabel, " by."] })] })] }) }), _jsx("div", { className: "solid-filter-dialog-sep" })] }), savedFilters.length > 0 &&
+                                    _jsx(_Fragment, { children: _jsxs("div", { className: "p-3 solid-search-overlay-section", children: [_jsxs("div", { className: "solid-search-overlay-panel-callout solid-search-overlay-panel-callout-compact", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Bookmark, { size: 13 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("p", { className: "solid-search-overlay-heading solid-search-overlay-section-title", children: "Saved filters" }), _jsx("div", { className: "solid-search-overlay-empty-subtitle", children: "Reusable filter sets available for this view." })] })] }), _jsx("div", { className: "flex flex-column solid-search-overlay-saved-list", children: savedFilters.map(function (savedfilter, index) {
+                                                        var _a;
+                                                        return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter, applySavedFilter: applySavedFilter, openSavedCustomFilter: openSavedCustomFilter, setSavedFilterTobeDeleted: setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible: setIsDeleteSQDialogVisible, isFocused: ((_a = overlayOptions[focusedIndex]) === null || _a === void 0 ? void 0 : _a.id) === "saved:".concat(savedfilter.id), onMouseEnter: function () {
+                                                                var optIndex = overlayOptions.findIndex(function (o) { return o.id === "saved:".concat(savedfilter.id); });
+                                                                if (optIndex !== -1)
+                                                                    setFocusedIndex(optIndex);
+                                                            } }, savedfilter.id));
+                                                    }) })] }) })] }), _jsxs("div", { className: "solid-search-overlay-footer", children: [_jsx("button", { type: "button", className: "px-3 py-2 flex flex-column solid-search-overlay-footer-action", onClick: openCustomFilterDialog, children: _jsxs("div", { className: "solid-search-overlay-footer-action-main", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Filter, { size: 14 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-footer-title solid-search-overlay-section-title", children: "Click here to apply custom filters" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Use custom filters to apply conditions on any field using any operator." })] })] }) }), viewType === "tree" && (_jsx("button", { type: "button", className: "px-3 py-2 flex flex-column solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary", onClick: openGroupingDialog, children: _jsxs("div", { className: "solid-search-overlay-footer-action-main", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Plus, { size: 14 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-footer-title solid-search-overlay-section-title", children: "Click here to do custom grouping" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Configure grouping rules and aggregations for the tree view." })] })] }) }))] })] })), _jsxs(SolidDialog, { open: showGlobalSearchElement, onOpenChange: setShowGlobalSearchElement, className: "solid-global-search-filter solid-filter-dialog-shell", style: { width: "min(960px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "Add Custom Filter" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Apply conditions on any field with operators." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-filter-dialog-body", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: filterRules, setFilterRules: setFilterRules, transformFilterRules: transformCustomFilterRules, closeDialog: function () { return setShowGlobalSearchElement(false); } }) })] }), _jsxs(SolidDialog, { open: showGroupFilterElement, onOpenChange: setShowGroupFilterElement, className: "solid-global-search-filter solid-filter-dialog-shell solid-filter-dialog-shell-grouping", style: { width: "min(560px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "Grouping" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Configure grouping and aggregation." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-filter-dialog-body", children: groupableFields.length > 0 &&
+                                _jsx(GroupingComponent, { viewData: viewData, fields: groupableFields, groupingRules: groupingRules, setGroupingRules: setGroupingRules, aggregationRules: aggregationRules, setAggregationRules: setAggregationRules, applyGrouping: applyGrouping, closeDialog: function () { return setShowGroupFilterElement(false); } }) })] }), _jsxs(SolidDialog, { open: showSavedFilterComponent, onOpenChange: setShowSavedFilterComponent, className: "solid-global-search-filter solid-filter-dialog-shell", style: { width: "min(960px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "Saved Filter" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Review and refine the saved filter conditions." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-filter-dialog-body", children: fields.length > 0 &&
+                                _jsx(FilterComponent, { viewData: viewData, fields: fields, filterRules: currentSavedFilterRules, setFilterRules: setCurrentSavedFilterRules, transformFilterRules: transformSavedFilterRules, closeDialog: function () { return setShowSavedFilterComponent(false); } }) })] }), _jsxs(SolidDialog, { open: showSaveFilterPopup, onOpenChange: setShowSaveFilterPopup, className: "solid-custom-filter-dialog solid-save-filter-dialog", style: { width: "min(420px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-filter-dialog-head", children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { className: "solid-filter-dialog-title m-0", children: "Save Custom Filter" }), _jsx(SolidDialogDescription, { className: "solid-filter-dialog-subtitle m-0", children: "Name this filter so you can reuse it later." })] }), _jsx(SolidDialogClose, { className: "solid-filter-dialog-close" })] }), _jsx(SolidDialogSeparator, { className: "solid-filter-dialog-sep" }), _jsx(SolidDialogBody, { className: "solid-filter-dialog-body", children: _jsx(SolidSaveCustomFilterForm, { currentSavedFilterData: currentSavedFilterData, handleSaveFilter: handleSaveFilter, closeDialog: function () { return setShowSaveFilterPopup(false); } }) })] }), _jsxs(SolidDialog, { open: isDeleteSQDialogVisible, onOpenChange: setIsDeleteSQDialogVisible, className: "solid-confirm-dialog", style: { width: "min(420px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { children: [_jsxs("div", { children: [_jsx(SolidDialogTitle, { children: "Confirm Delete" }), _jsxs(SolidDialogDescription, { children: ["Are you sure you want to delete the ", currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name, " saved query?"] })] }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsxs(SolidDialogFooter, { className: "justify-content-center", children: [_jsxs(SolidButton, { variant: "destructive", size: "sm", onClick: deleteSavedFilter, children: [_jsx(Check, { size: 14 }), "Yes"] }), _jsxs(SolidButton, { variant: "outline", size: "sm", onClick: function () { return setIsDeleteSQDialogVisible(false); }, children: [_jsx(X, { size: 14 }), "No"] })] })] })] }) }));
 });
 //# sourceMappingURL=SolidGlobalSearchElement.js.map