@solidxai/core-ui 0.1.9-beta.9 → 0.1.10

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

@@ -185,8 +185,19 @@ var transformRulesToFilters = function (input, viewData) {
         var _a, _b, _c, _d;
         var _e, _f;
         if (rule.value !== undefined && rule.value !== null) {
-            // Ensure rule.value is always an array
-            var values = typeof rule.value[0] === "object" ? rule.value.map(function (i) { return (i === null || i === void 0 ? void 0 : i.value) ? i === null || i === void 0 ? void 0 : i.value : i; }) : rule === null || rule === void 0 ? void 0 : rule.value;
+            // Ensure rule.value is always an array of primitive values.
+            // Mixed arrays like ["failed", { label: "pending", value: "pending" }]
+            // must be normalized before query serialization.
+            var rawValues = Array.isArray(rule === null || rule === void 0 ? void 0 : rule.value) ? rule.value : [rule === null || rule === void 0 ? void 0 : rule.value];
+            var values = rawValues.map(function (item) {
+                if (item && typeof item === "object") {
+                    if (Object.prototype.hasOwnProperty.call(item, "value"))
+                        return item.value;
+                    if (Object.prototype.hasOwnProperty.call(item, "label"))
+                        return item.label;
+                }
+                return item;
+            });
             if (rule.matchMode !== '$in' && rule.matchMode !== '$notIn' && rule.matchMode !== '$between' && rule.matchMode !== '$null' && rule.matchMode !== '$notNull') {
                 values = values[0];
             }
@@ -402,8 +413,15 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
 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, 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 () {
+    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" : ""), onMouseDown: function (e) {
+                        e.preventDefault();
+                        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", onMouseDown: function (e) {
+                                    e.preventDefault();
+                                    openSavedCustomFilter(savedfilter);
+                                }, children: _jsx(Pencil, { size: 14 }) }), _jsx(SolidButton, { variant: "outline", size: "sm", className: "solid-saved-filter-icon-btn is-danger", onMouseDown: function (e) {
+                                    e.preventDefault();
                                     setSavedFilterTobeDeleted(savedfilter.id),
                                         setIsDeleteSQDialogVisible(true);
                                 }, children: _jsx(Trash2, { size: 14 }) })] }) })] }));
@@ -468,7 +486,7 @@ var extractChips = function (node) {
     return [];
 };
 export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
     var defaultState = [
         {
@@ -509,7 +527,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var defaultGroupingRules = [
         { id: 1, fieldName: null, dateGrouping: null }
     ];
-    var _t = useState(defaultState), initialState = _t[0], setInitialState = _t[1];
+    var _v = useState(defaultState), initialState = _v[0], setInitialState = _v[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) ||
@@ -520,43 +538,50 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     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 _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];
+    var _w = useState(initialState), filterRules = _w[0], setFilterRules = _w[1];
+    var _x = useState(null), customFilter = _x[0], setCustomFilter = _x[1];
+    var _y = useState([]), fields = _y[0], setFields = _y[1];
+    var _z = useState([]), searchableFields = _z[0], setSearchableFields = _z[1];
+    var _0 = useState([]), groupableFields = _0[0], setGroupableFields = _0[1];
+    var _1 = useState(defaultGroupingRules), groupingRules = _1[0], setGroupingRules = _1[1];
+    var _2 = useState(defaultAggregationRules), aggregationRules = _2[0], setAggregationRules = _2[1];
     // used to show the list of predefined searches 
-    var _1 = useState([]), predefinedSearches = _1[0], setPredefinedSearches = _1[1];
+    var _3 = useState([]), predefinedSearches = _3[0], setPredefinedSearches = _3[1];
     // used to open / close the custom fitler popup 
-    var _2 = useState(false), showGlobalSearchElement = _2[0], setShowGlobalSearchElement = _2[1];
+    var _4 = useState(false), showGlobalSearchElement = _4[0], setShowGlobalSearchElement = _4[1];
     // used to open / close the group fitler popup 
-    var _3 = useState(false), showGroupFilterElement = _3[0], setShowGroupFilterElement = _3[1];
+    var _5 = useState(false), showGroupFilterElement = _5[0], setShowGroupFilterElement = _5[1];
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
-    var _4 = useState([]), searchChips = _4[0], setSearchChips = _4[1];
-    var _5 = useState(null), searchFilter = _5[0], setSearchFilter = _5[1];
+    var _6 = useState([]), searchChips = _6[0], setSearchChips = _6[1];
+    var _7 = useState(null), searchFilter = _7[0], setSearchFilter = _7[1];
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _6 = useState(null), predefinedSearchChip = _6[0], setPredefinedSearchChip = _6[1];
+    var _8 = useState(null), predefinedSearchChip = _8[0], setPredefinedSearchChip = _8[1];
     //  state to maintain the text typed in the search input box
-    var _7 = useState(""), inputValue = _7[0], setInputValue = _7[1];
-    var _8 = useState(-1), focusedIndex = _8[0], setFocusedIndex = _8[1];
+    var _9 = useState(""), inputValue = _9[0], setInputValue = _9[1];
+    var _10 = useState(-1), focusedIndex = _10[0], setFocusedIndex = _10[1];
     // flag to prevent un necessary re renders
-    var _9 = useState(false), hasSearched = _9[0], setHasSearched = _9[1];
+    var _11 = useState(false), hasSearched = _11[0], setHasSearched = _11[1];
     // currentSavedFilterData  is used to save the whole object of saved filter 
-    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 _12 = useState(), currentSavedFilterData = _12[0], setCurrentSavedFilterData = _12[1];
+    var _13 = useState(), currentSavedFilterQuery = _13[0], setCurrentSavedFilterQuery = _13[1];
+    var _14 = useState(), currentSavedFilterRules = _14[0], setCurrentSavedFilterRules = _14[1];
+    var _15 = useState(false), showSavedFilterComponent = _15[0], setShowSavedFilterComponent = _15[1];
+    var _16 = useState(), savedFilterTobeDeleted = _16[0], setSavedFilterTobeDeleted = _16[1];
+    var _17 = useState(false), isDeleteSQDialogVisible = _17[0], setIsDeleteSQDialogVisible = _17[1];
+    var _18 = useState(), savedFilterQueryString = _18[0], setSavedFilterQueryString = _18[1];
+    var _19 = useState(false), showOverlay = _19[0], setShowOverlay = _19[1];
     var overlayRef = useRef(null);
-    var _18 = useState(false), showChipManager = _18[0], setShowChipManager = _18[1];
+    var searchInputRef = useRef(null);
+    var _20 = useState(false), showChipManager = _20[0], setShowChipManager = _20[1];
     var chipManagerRef = useRef(null);
     var chipManagerTriggerRef = useRef(null);
+    var focusSearchInput = function () {
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
     useEffect(function () {
         if (focusedIndex >= 0 && showOverlay) {
             var activeElement = document.querySelector(".solid-search-overlay-option-active");
@@ -568,19 +593,30 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, [focusedIndex, showOverlay]);
-    var _19 = useSession(), session = _19.data, status = _19.status;
+    var _21 = useSession(), session = _21.data, status = _21.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    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 _22 = useState(0), refreshKey = _22[0], setRefreshKey = _22[1];
+    var _23 = useState(null), predefinedSearchBaseFilter = _23[0], setPredefinedSearchBaseFilter = _23[1];
+    var _24 = useState([]), savedFilters = _24[0], setSavedFilters = _24[1];
+    var _25 = useState(false), savedFiltersLoaded = _25[0], setSavedFiltersLoaded = _25[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    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];
+    var _26 = useCreateSolidEntityMutation(), createEntity = _26[0], _27 = _26[1], isEntityCreateSuccess = _27.isSuccess, isEntityCreateError = _27.isError, entityCreateError = _27.error;
+    var _28 = useUpdateSolidEntityMutation(), updateEntity = _28[0], _29 = _28[1], isEntityUpdateSuceess = _29.isSuccess, isEntityUpdateError = _29.isError, entityUpdateError = _29.error;
+    var _30 = useDeleteSolidEntityMutation(), deleteEntity = _30[0], _31 = _30[1], isEntityDeleteSuceess = _31.isSuccess, isEntityDeleteError = _31.isError, entityDeleteError = _31.error;
+    var _32 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _32[0], _33 = _32[1], solidEntityListViewData = _33.data, isSavedFilterLoading = _33.isLoading, error = _33.error;
+    var _34 = useState(0), savedFilterFetchDataRefreshKey = _34[0], setSavedFilterFetchDataRefreshKey = _34[1];
+    var buildSavedFilterUrl = function (savedQueryId) {
+        var params = new URLSearchParams(searchParams.toString());
+        if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
+            params.delete("savedQuery");
+        }
+        else {
+            params.set("savedQuery", String(savedQueryId));
+        }
+        var queryString = params.toString();
+        return queryString ? "".concat(pathname, "?").concat(queryString) : pathname;
+    };
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -770,27 +806,61 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setPredefinedSearchChip(null);
             setPredefinedSearchBaseFilter(null);
             setInputValue("");
-            var fieldsData = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
+            var fieldsData_1 = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
             // console.log(`fiels data while rendering solid global search element: `);
             // console.log(fieldsData);
             var layoutChildren = (_f = (_e = (_d = (_c = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _c === void 0 ? void 0 : _c.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.children) !== null && _f !== void 0 ? _f : [];
             var fieldElements_1 = extractFields(layoutChildren);
-            var fieldsList = Object.entries(fieldsData !== null && fieldsData !== void 0 ? fieldsData : {}).map(function (_a) {
-                var _b, _c, _d, _e, _f, _g;
+            // Build one entry per layout column (not per field name), so multiple columns
+            // sharing the same field name (e.g. several viewMetadata columns with different
+            // searchFields/labels) each appear as a separate searchable option.
+            var seenKeys_1 = new Set();
+            var fieldsList_1 = [];
+            // First pass: one entry per unique field name (for non-searchable / filter use)
+            Object.entries(fieldsData_1 !== null && fieldsData_1 !== void 0 ? fieldsData_1 : {}).forEach(function (_a) {
+                var _b, _c, _d, _e, _f, _g, _h, _j;
                 var key = _a[0], value = _a[1];
                 var viewFieldElement = fieldElements_1.find(function (f) { var _a; return ((_a = f === null || f === void 0 ? void 0 : f.attrs) === null || _a === void 0 ? void 0 : _a.name) === key; });
-                return {
-                    name: value.displayName,
+                seenKeys_1.add(key);
+                fieldsList_1.push({
+                    name: (_c = (_b = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : value.displayName,
                     value: key,
                     type: value.type,
                     ormType: value.ormType,
-                    matchMode: (_b = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _b === void 0 ? void 0 : _b.searchMatchMode,
-                    searchField: (_d = (_c = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _c === void 0 ? void 0 : _c.searchField) !== null && _d !== void 0 ? _d : null,
-                    isSearchable: (_f = (_e = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _e === void 0 ? void 0 : _e.isSearchable) !== null && _f !== void 0 ? _f : false,
-                    relationType: (_g = value === null || value === void 0 ? void 0 : value.relationType) !== null && _g !== void 0 ? _g : null,
-                };
+                    matchMode: (_d = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _d === void 0 ? void 0 : _d.searchMatchMode,
+                    searchField: (_f = (_e = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _e === void 0 ? void 0 : _e.searchField) !== null && _f !== void 0 ? _f : null,
+                    isSearchable: (_h = (_g = viewFieldElement === null || viewFieldElement === void 0 ? void 0 : viewFieldElement.attrs) === null || _g === void 0 ? void 0 : _g.isSearchable) !== null && _h !== void 0 ? _h : false,
+                    relationType: (_j = value === null || value === void 0 ? void 0 : value.relationType) !== null && _j !== void 0 ? _j : null,
+                });
             });
-            var filterableFieldsList = fieldsList.filter(function (field) {
+            // Second pass: for any layout column that shares a field name but has a
+            // distinct searchField, add it as an additional searchable entry.
+            fieldElements_1.forEach(function (fieldElement) {
+                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var key = (_a = fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.attrs) === null || _a === void 0 ? void 0 : _a.name;
+                var searchField = (_b = fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.attrs) === null || _b === void 0 ? void 0 : _b.searchField;
+                var isSearchable = (_d = (_c = fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.attrs) === null || _c === void 0 ? void 0 : _c.isSearchable) !== null && _d !== void 0 ? _d : false;
+                if (!isSearchable || !searchField)
+                    return;
+                // Already covered by the first pass entry for this key?
+                var existingEntry = fieldsList_1.find(function (e) { return e.value === key && e.searchField === searchField; });
+                if (existingEntry)
+                    return; // already in list
+                var value = (fieldsData_1 !== null && fieldsData_1 !== void 0 ? fieldsData_1 : {})[key];
+                if (!value)
+                    return;
+                fieldsList_1.push({
+                    name: (_f = (_e = fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.attrs) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : value.displayName,
+                    value: key,
+                    type: value.type,
+                    ormType: value.ormType,
+                    matchMode: (_g = fieldElement === null || fieldElement === void 0 ? void 0 : fieldElement.attrs) === null || _g === void 0 ? void 0 : _g.searchMatchMode,
+                    searchField: searchField,
+                    isSearchable: true,
+                    relationType: (_h = value === null || value === void 0 ? void 0 : value.relationType) !== null && _h !== void 0 ? _h : null,
+                });
+            });
+            var filterableFieldsList = fieldsList_1.filter(function (field) {
                 switch (field.type) {
                     case "mediaSingle":
                     case "mediaMultiple":
@@ -800,7 +870,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 }
             });
             setFields(filterableFieldsList);
-            var searchableFieldsList = fieldsList.filter(function (field) {
+            var searchableFieldsList = fieldsList_1.filter(function (field) {
                 if (!field.isSearchable)
                     return false;
                 switch (field.type) {
@@ -819,7 +889,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                         return false;
                 }
             });
-            var groupableFieldsList = fieldsList.filter(function (field) {
+            var groupableFieldsList = fieldsList_1.filter(function (field) {
                 switch (field.type) {
                     case "relation":
                         // Only include relation if searchField is present
@@ -1037,7 +1107,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         });
     }); };
     var deleteSavedFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var parsedSearchParams, savedQuery, urlParams;
+        var parsedSearchParams, savedQuery;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: 
@@ -1049,9 +1119,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     parsedSearchParams = searchParams;
                     savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
                     if (savedFilterTobeDeleted == savedQuery) {
-                        urlParams = new URLSearchParams(window.location.search);
-                        urlParams.delete("savedQuery");
-                        router.push("?".concat(urlParams.toString()));
+                        router.push(buildSavedFilterUrl(null));
                     }
                     setIsDeleteSQDialogVisible(false);
                     setTimeout(function () {
@@ -1092,7 +1160,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
                     setPredefinedSearchBaseFilter(null);
                     setTimeout(function () {
-                        router.push("?savedQuery=".concat(formValues.id));
+                        router.push(buildSavedFilterUrl(formValues.id));
                     }, 500);
                     return [3 /*break*/, 5];
                 case 3:
@@ -1116,7 +1184,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     currentPageUrl = window.location.pathname;
                     localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
                     setTimeout(function () {
-                        router.push("?savedQuery=".concat(result_1.data.id));
+                        router.push(buildSavedFilterUrl(result_1.data.id));
                     }, 500);
                     _l.label = 5;
                 case 5: return [3 /*break*/, 7];
@@ -1162,7 +1230,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         var _a, _b, _c, _d;
         // 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 () {
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex 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: "var(--primary-color, var(--primary))" }), _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 }) })] }) }));
     };
@@ -1178,7 +1246,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
         // push the savedQuery=1 in url 
         if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
-            router.push("?savedQuery=".concat(savedfilter.id));
+            router.push(buildSavedFilterUrl(savedfilter.id));
             setShowOverlay(false);
         }
         else {
@@ -1186,19 +1254,14 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         }
     };
     var removeSavedFilter = function () {
-        var params = new URLSearchParams(searchParams.toString());
         setCurrentSavedFilterData(null);
         setCurrentSavedFilterQuery(null);
-        if (params.has("savedQuery")) {
-            params.delete("savedQuery");
-            var newUrl = params.toString()
-                ? "".concat(pathname, "?").concat(params.toString())
-                : pathname;
-            router.push(newUrl);
+        if (searchParams.has("savedQuery")) {
+            router.push(buildSavedFilterUrl(null));
         }
     };
     var SavedFiltersChip = function () {
-        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 () {
+        return (_jsx("li", { children: _jsxs("div", { className: "custom-filter-chip-type", children: [_jsxs("div", { className: "flex 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 () {
                                     var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
                                         var rules, hydratedRules;
                                         return __generator(this, function (_a) {
@@ -1226,7 +1289,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: "var(--primary-color, var(--primary))" }), _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 }) })] }) }));
+        return (_jsx("li", { className: "solid-global-search-chip", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex 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: "var(--primary-color, var(--primary))" }), _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
@@ -1308,6 +1371,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var visibleChipItems = managedChipItems.slice(0, MAX_VISIBLE_CHIPS);
     var hiddenChipItems = managedChipItems.slice(MAX_VISIBLE_CHIPS);
     var hiddenChipCount = hiddenChipItems.length;
+    var handleManagedChipOpen = function (chip) {
+        if (!chip.onOpen)
+            return;
+        chip.onOpen();
+    };
     var clearAllAppliedChips = function () {
         if (managedChipItems.length === 0)
             return;
@@ -1352,8 +1420,18 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             kind: "saved",
             saved: s,
         }); });
-        return __spreadArray(__spreadArray(__spreadArray([], fields, true), predefined, true), saved, true);
-    }, [inputValue, searchableFields, predefinedSearches, savedFilters]);
+        var custom = [{
+                id: "footer:custom",
+                kind: "custom",
+            }];
+        var grouping = viewType === "tree"
+            ? [{
+                    id: "footer:grouping",
+                    kind: "grouping",
+                }]
+            : [];
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], fields, true), predefined, true), saved, true), custom, true), grouping, true);
+    }, [inputValue, searchableFields, predefinedSearches, savedFilters, viewType]);
     var handleKeyDown = function (e) {
         var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
         var applyFieldOption = function (value) {
@@ -1396,6 +1474,12 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 else if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "saved") {
                     applySavedFilter(activeOption.saved);
                 }
+                else if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "custom") {
+                    openCustomFilterDialog();
+                }
+                else if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "grouping") {
+                    openGroupingDialog();
+                }
                 else if (currentValue) {
                     handleAddChip();
                     setShowOverlay(false);
@@ -1477,9 +1561,9 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         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("button", { type: "button", className: "ml-1", style: { cursor: "pointer" }, onClick: removePredefinedSearchChip, children: _jsx(X, { size: 14 }) })] }) })); };
+    var PredefinedSearchChip = function () { return (_jsx("li", { children: _jsxs("div", { className: "search-filter-chip-type", children: [_jsxs("div", { className: "flex 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: "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) {
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "relative flex justify-center solid-custom-filter-wrapper", 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: [chip.onOpen ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "solid-chip-open-button", title: chip.label, "aria-label": "Open ".concat(chip.label), onMouseDown: function (e) { return e.preventDefault(); }, onClick: function () { return handleManagedChipOpen(chip); }, children: _jsx("span", { className: "solid-chip-open-icon", "aria-hidden": "true", children: _jsx(Filter, { size: 12 }) }) }), _jsx("span", { className: "custom-chip-value solid-chip-pill-label solid-chip-open-label", title: chip.label, children: chip.label })] })) : (_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"] }) })), _jsx("li", { ref: chipsRef, className: "solid-global-search-input-item", children: _jsxs("div", { className: "relative solid-global-search-element-wrapper", children: [_jsx(SolidInput, { ref: searchInputRef, className: "solid-global-search-input", value: inputValue || "", placeholder: "Search.", onChange: function (e) {
                                                 setInputValue(e.target.value);
                                                 setShowChipManager(false);
                                                 setShowOverlay(true);
@@ -1491,17 +1575,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                             }, onBlur: function () {
                                                 // Delay so you can click buttons inside overlay
                                                 setTimeout(function () { return setShowOverlay(false); }, 150);
-                                            }, onKeyDown: handleKeyDown }), _jsx(SolidButton, { variant: "outline", size: "sm", onClick: function () {
+                                            }, onKeyDown: handleKeyDown }), _jsx(SolidButton, { variant: "outline", size: "sm", onMouseDown: function (e) {
+                                                // Preserve input focus so overlay keyboard navigation continues to work.
+                                                e.preventDefault();
+                                            }, 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 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) {
+                                                focusSearchInput();
+                                            }, className: "custom-filter-button solid-global-search-trigger", children: _jsx(Search, { size: 14 }) })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, className: "absolute w-full shadow-md 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 flex flex-col px-3 py-1", 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 justify-start gap-1 text-color solid-search-overlay-option ".concat(focusedIndex === index ? "solid-search-overlay-option-active" : ""), onMouseDown: function (e) {
                                                             e.preventDefault();
                                                             var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
                                                             if (currentValue) {
@@ -1519,22 +1601,30 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                                 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) {
+                                                        }, onMouseEnter: function () { return setFocusedIndex(index); }, children: ["Search ", _jsx("strong", { style: { paddingLeft: "2px" }, children: value.displayName.trim() }), "\u00A0for:\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 flex flex-col px-3 py-1", 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-col 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)); })] })] }))] })) :
+                                                            }, onMouseEnter: function () { return setFocusedIndex(searchableFields.length + index); }, children: [_jsxs("div", { className: "flex items-center gap-1", 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) {
+                                    _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-col 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 &&
+                                                    }) })] }) })] }), _jsxs("div", { className: "solid-search-overlay-footer", children: [_jsx("button", { type: "button", className: "flex flex-col px-3 py-2 solid-search-overlay-footer-action ".concat(((_t = overlayOptions[focusedIndex]) === null || _t === void 0 ? void 0 : _t.id) === "footer:custom" ? "solid-search-overlay-option-active" : ""), onClick: openCustomFilterDialog, onMouseEnter: function () {
+                                        var optIndex = overlayOptions.findIndex(function (o) { return o.id === "footer:custom"; });
+                                        if (optIndex !== -1)
+                                            setFocusedIndex(optIndex);
+                                    }, 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: "flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ".concat(((_u = overlayOptions[focusedIndex]) === null || _u === void 0 ? void 0 : _u.id) === "footer:grouping" ? "solid-search-overlay-option-active" : ""), onClick: openGroupingDialog, onMouseEnter: function () {
+                                        var optIndex = overlayOptions.findIndex(function (o) { return o.id === "footer:grouping"; });
+                                        if (optIndex !== -1)
+                                            setFocusedIndex(optIndex);
+                                    }, 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"] })] })] })] }) }));
+                                _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-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