@solidxai/core-ui 0.1.14 → 0.1.15-beta.0

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

@@ -54,22 +54,20 @@ 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, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import FilterComponent, { FilterOperator, FilterRuleType } from "../../../components/core/common/FilterComponent";
 import { toTitleCase } from "../../../helpers/helpers";
-import { usePathname } from "../../../hooks/usePathname";
-import { useRouter } from "../../../hooks/useRouter";
-import { useSearchParams } from "../../../hooks/useSearchParams";
-import { clearFilterObjectFromLocalStorage, getFilterObjectFromLocalStorage, } from "./globalSearchPersistence";
+import { clearFilterObjectFromLocalStorage, getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage, } from "./globalSearchPersistence";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
 import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { hydrateRelationRules } from "../../../helpers/hydrateRelationRules";
 import { useSession } from '../../../hooks/useSession';
+import { getUnboundSavedFilterVariableNames, parseSavedFilterQueryJson, resolveSavedFilterVariables } from '../../../helpers/resolveActiveUserId';
 import GroupingComponent from "./GroupingComponent";
-import { Bookmark, Check, Filter, ListFilter, Pencil, Plus, Search, SearchX, Trash2, X } from "lucide-react";
+import { Bookmark, Check, Filter, Pencil, Plus, Search, SearchX, Sparkles, 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";
@@ -412,20 +410,22 @@ 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, onMouseEnter = _a.onMouseEnter;
-    var isActive = (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey) ? activeSavedFilter === savedfilter.systemKey : 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" : ""), onMouseDown: function (e) {
+    var savedfilter = _a.savedfilter, activeSavedFilterReference = _a.activeSavedFilterReference, applySavedFilter = _a.applySavedFilter, openSavedCustomFilter = _a.openSavedCustomFilter, setSavedFilterTobeDeleted = _a.setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible = _a.setIsDeleteSQDialogVisible, isFocused = _a.isFocused, onMouseEnter = _a.onMouseEnter, optionId = _a.optionId;
+    var isActive = (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey)
+        ? activeSavedFilterReference === savedfilter.systemKey
+        : String(activeSavedFilterReference) === String(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" : ""), id: optionId, role: "option", "aria-selected": isFocused, "aria-label": "".concat(savedfilter.name).concat(isActive ? ", applied" : ""), 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 && !savedfilter.systemKey &&
+                    }, title: savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description, children: _jsxs("span", { className: "solid-search-overlay-option-content", children: [_jsx("span", { className: "solid-search-overlay-option-icon", "aria-hidden": "true", children: _jsx(Bookmark, { size: 15 }) }), _jsxs("span", { className: "solid-search-overlay-option-copy", children: [_jsx("span", { className: "solid-search-overlay-option-title", children: savedfilter.name }), (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.description) && (_jsx("span", { className: "solid-search-overlay-option-description", children: savedfilter.description }))] }), isActive && (_jsx("span", { className: "solid-search-overlay-option-check", "aria-hidden": "true", children: _jsx(Check, { size: 14 }) }))] }) }) }), _jsx("div", { className: "solid-saved-filter-actions", children: savedfilter.isSeeded !== true && !savedfilter.systemKey &&
                     _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) {
+                                }, "aria-label": "Edit ".concat(savedfilter.name), 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 }) })] }) })] }));
+                                }, "aria-label": "Delete ".concat(savedfilter.name), children: _jsx(Trash2, { size: 14 }) })] }) })] }));
 };
 var replacePlaceholders = function (obj, searchValue) {
     if (typeof obj === 'string') {
@@ -490,8 +490,11 @@ var areFilterStateValuesEqual = function (left, right) {
     return JSON.stringify(left !== null && left !== void 0 ? left : null) === JSON.stringify(right !== null && right !== void 0 ? right : null);
 };
 export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-    var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates, definedFilters = _a.definedFilters, onRemoveDefinedFilter = _a.onRemoveDefinedFilter, onApplyDefinedFilter = _a.onApplyDefinedFilter;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
+    var overlayInstanceId = useId();
+    var overlayListboxId = "".concat(overlayInstanceId, "-search-options");
+    var getOverlayOptionId = function (index) { return "".concat(overlayInstanceId, "-search-option-").concat(index); };
     var defaultState = [
         {
             id: 1,
@@ -531,53 +534,50 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var defaultGroupingRules = [
         { id: 1, fieldName: null, dateGrouping: null }
     ];
-    var _0 = useState(defaultState), initialState = _0[0], setInitialState = _0[1];
-    var pathname = usePathname();
+    var _2 = useState(defaultState), initialState = _2[0], setInitialState = _2[1];
     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 _1 = useState(initialState), filterRules = _1[0], setFilterRules = _1[1];
-    var _2 = useState(null), customFilter = _2[0], setCustomFilter = _2[1];
-    var _3 = useState([]), fields = _3[0], setFields = _3[1];
-    var _4 = useState([]), searchableFields = _4[0], setSearchableFields = _4[1];
-    var _5 = useState([]), groupableFields = _5[0], setGroupableFields = _5[1];
-    var _6 = useState(defaultGroupingRules), groupingRules = _6[0], setGroupingRules = _6[1];
-    var _7 = useState(defaultAggregationRules), aggregationRules = _7[0], setAggregationRules = _7[1];
+    var _3 = useState(initialState), filterRules = _3[0], setFilterRules = _3[1];
+    var _4 = useState(null), customFilter = _4[0], setCustomFilter = _4[1];
+    var _5 = useState([]), fields = _5[0], setFields = _5[1];
+    var _6 = useState([]), searchableFields = _6[0], setSearchableFields = _6[1];
+    var _7 = useState([]), groupableFields = _7[0], setGroupableFields = _7[1];
+    var _8 = useState(defaultGroupingRules), groupingRules = _8[0], setGroupingRules = _8[1];
+    var _9 = useState(defaultAggregationRules), aggregationRules = _9[0], setAggregationRules = _9[1];
     // used to show the list of predefined searches 
-    var _8 = useState([]), predefinedSearches = _8[0], setPredefinedSearches = _8[1];
+    var _10 = useState([]), predefinedSearches = _10[0], setPredefinedSearches = _10[1];
     // used to open / close the custom fitler popup 
-    var _9 = useState(false), showGlobalSearchElement = _9[0], setShowGlobalSearchElement = _9[1];
+    var _11 = useState(false), showGlobalSearchElement = _11[0], setShowGlobalSearchElement = _11[1];
     // used to open / close the group fitler popup 
-    var _10 = useState(false), showGroupFilterElement = _10[0], setShowGroupFilterElement = _10[1];
+    var _12 = useState(false), showGroupFilterElement = _12[0], setShowGroupFilterElement = _12[1];
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
-    var _11 = useState([]), searchChips = _11[0], setSearchChips = _11[1];
-    var _12 = useState(null), searchFilter = _12[0], setSearchFilter = _12[1];
+    var _13 = useState([]), searchChips = _13[0], setSearchChips = _13[1];
+    var _14 = useState(null), searchFilter = _14[0], setSearchFilter = _14[1];
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _13 = useState(null), predefinedSearchChip = _13[0], setPredefinedSearchChip = _13[1];
+    var _15 = useState(null), predefinedSearchChip = _15[0], setPredefinedSearchChip = _15[1];
     //  state to maintain the text typed in the search input box
-    var _14 = useState(""), inputValue = _14[0], setInputValue = _14[1];
-    var _15 = useState(-1), focusedIndex = _15[0], setFocusedIndex = _15[1];
+    var _16 = useState(""), inputValue = _16[0], setInputValue = _16[1];
+    var _17 = useState(-1), focusedIndex = _17[0], setFocusedIndex = _17[1];
     // flag to prevent un necessary re renders
-    var _16 = useState(false), hasSearched = _16[0], setHasSearched = _16[1];
+    var _18 = useState(false), hasSearched = _18[0], setHasSearched = _18[1];
     // currentSavedFilterData  is used to save the whole object of saved filter 
-    var _17 = useState(), currentSavedFilterData = _17[0], setCurrentSavedFilterData = _17[1];
-    var _18 = useState(), currentSavedFilterQuery = _18[0], setCurrentSavedFilterQuery = _18[1];
-    var _19 = useState(), currentSavedFilterRules = _19[0], setCurrentSavedFilterRules = _19[1];
-    var _20 = useState(false), showSavedFilterComponent = _20[0], setShowSavedFilterComponent = _20[1];
-    var _21 = useState(), savedFilterTobeDeleted = _21[0], setSavedFilterTobeDeleted = _21[1];
-    var _22 = useState(false), isDeleteSQDialogVisible = _22[0], setIsDeleteSQDialogVisible = _22[1];
-    var _23 = useState(), savedFilterQueryString = _23[0], setSavedFilterQueryString = _23[1];
-    var _24 = useState(false), showOverlay = _24[0], setShowOverlay = _24[1];
+    var _19 = useState(), currentSavedFilterData = _19[0], setCurrentSavedFilterData = _19[1];
+    var _20 = useState(), currentSavedFilterQuery = _20[0], setCurrentSavedFilterQuery = _20[1];
+    var _21 = useState({}), currentSavedFilterVariables = _21[0], setCurrentSavedFilterVariables = _21[1];
+    var _22 = useState(), currentSavedFilterRules = _22[0], setCurrentSavedFilterRules = _22[1];
+    var _23 = useState(false), showSavedFilterComponent = _23[0], setShowSavedFilterComponent = _23[1];
+    var _24 = useState(), savedFilterTobeDeleted = _24[0], setSavedFilterTobeDeleted = _24[1];
+    var _25 = useState(false), isDeleteSQDialogVisible = _25[0], setIsDeleteSQDialogVisible = _25[1];
+    var _26 = useState(), savedFilterQueryString = _26[0], setSavedFilterQueryString = _26[1];
+    var _27 = useState(false), showOverlay = _27[0], setShowOverlay = _27[1];
     var overlayRef = useRef(null);
     var searchInputRef = useRef(null);
-    var _25 = useState(false), showChipManager = _25[0], setShowChipManager = _25[1];
+    var _28 = useState(false), showChipManager = _28[0], setShowChipManager = _28[1];
     var chipManagerRef = useRef(null);
     var chipManagerTriggerRef = useRef(null);
     var focusSearchInput = function () {
@@ -587,8 +587,9 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         });
     };
     useEffect(function () {
+        var _a;
         if (focusedIndex >= 0 && showOverlay) {
-            var activeElement = document.querySelector(".solid-search-overlay-option-active");
+            var activeElement = (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".solid-search-overlay-option-active");
             if (activeElement) {
                 activeElement.scrollIntoView({
                     block: 'nearest',
@@ -597,12 +598,12 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, [focusedIndex, showOverlay]);
-    var _26 = useSession(), session = _26.data, status = _26.status;
+    var _29 = useSession(), session = _29.data, status = _29.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _27 = useState(0), refreshKey = _27[0], setRefreshKey = _27[1];
-    var _28 = useState(null), predefinedSearchBaseFilter = _28[0], setPredefinedSearchBaseFilter = _28[1];
-    var _29 = useState([]), savedFilters = _29[0], setSavedFilters = _29[1];
-    var _30 = useState(false), savedFiltersLoaded = _30[0], setSavedFiltersLoaded = _30[1];
+    var _30 = useState(0), refreshKey = _30[0], setRefreshKey = _30[1];
+    var _31 = useState(null), predefinedSearchBaseFilter = _31[0], setPredefinedSearchBaseFilter = _31[1];
+    var _32 = useState([]), savedFilters = _32[0], setSavedFilters = _32[1];
+    var _33 = useState(false), savedFiltersLoaded = _33[0], setSavedFiltersLoaded = _33[1];
     var isDraftPublishWorkflowEnabled = ((_j = (_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.model) === null || _j === void 0 ? void 0 : _j.draftPublishWorkflow) === true;
     var workflowPublishedVersionsSavedFilter = useMemo(function () {
         if (!isDraftPublishWorkflowEnabled)
@@ -619,26 +620,24 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }),
         };
     }, [isDraftPublishWorkflowEnabled]);
-    var availableSavedFilters = useMemo(function () { return workflowPublishedVersionsSavedFilter
+    var allAvailableSavedFilters = useMemo(function () { return workflowPublishedVersionsSavedFilter
         ? __spreadArray([workflowPublishedVersionsSavedFilter], (savedFilters || []), true) : (savedFilters || []); }, [workflowPublishedVersionsSavedFilter, savedFilters]);
-    var entityApi = createSolidEntityApi("savedFilters");
-    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _31 = useCreateSolidEntityMutation(), createEntity = _31[0], _32 = _31[1], isEntityCreateSuccess = _32.isSuccess, isEntityCreateError = _32.isError, entityCreateError = _32.error;
-    var _33 = useUpdateSolidEntityMutation(), updateEntity = _33[0], _34 = _33[1], isEntityUpdateSuceess = _34.isSuccess, isEntityUpdateError = _34.isError, entityUpdateError = _34.error;
-    var _35 = useDeleteSolidEntityMutation(), deleteEntity = _35[0], _36 = _35[1], isEntityDeleteSuceess = _36.isSuccess, isEntityDeleteError = _36.isError, entityDeleteError = _36.error;
-    var _37 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _37[0], _38 = _37[1], solidEntityListViewData = _38.data, isSavedFilterLoading = _38.isLoading, error = _38.error;
-    var _39 = useState(0), savedFilterFetchDataRefreshKey = _39[0], setSavedFilterFetchDataRefreshKey = _39[1];
-    var buildSavedFilterUrl = function (savedQueryId) {
-        var params = new URLSearchParams(searchParams.toString());
-        if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
-            params.delete("savedQuery");
+    var availableSavedFilters = allAvailableSavedFilters;
+    var selectableSavedFilters = useMemo(function () { return allAvailableSavedFilters.filter(function (filter) {
+        try {
+            return getUnboundSavedFilterVariableNames(parseSavedFilterQueryJson(filter.filterQueryJson || "{}")).length === 0;
         }
-        else {
-            params.set("savedQuery", String(savedQueryId));
+        catch (_a) {
+            return false;
         }
-        var queryString = params.toString();
-        return queryString ? "".concat(pathname, "?").concat(queryString) : pathname;
-    };
+    }); }, [allAvailableSavedFilters]);
+    var entityApi = createSolidEntityApi("savedFilters");
+    var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
+    var _34 = useCreateSolidEntityMutation(), createEntity = _34[0], _35 = _34[1], isEntityCreateSuccess = _35.isSuccess, isEntityCreateError = _35.isError, entityCreateError = _35.error;
+    var _36 = useUpdateSolidEntityMutation(), updateEntity = _36[0], _37 = _36[1], isEntityUpdateSuceess = _37.isSuccess, isEntityUpdateError = _37.isError, entityUpdateError = _37.error;
+    var _38 = useDeleteSolidEntityMutation(), deleteEntity = _38[0], _39 = _38[1], isEntityDeleteSuceess = _39.isSuccess, isEntityDeleteError = _39.isError, entityDeleteError = _39.error;
+    var _40 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _40[0], _41 = _40[1], solidEntityListViewData = _41.data, isSavedFilterLoading = _41.isLoading, error = _41.error;
+    var _42 = useState(0), savedFilterFetchDataRefreshKey = _42[0], setSavedFilterFetchDataRefreshKey = _42[1];
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             var filters, queryData, queryString, savedFilter;
@@ -692,7 +691,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         }); };
         fn();
     }, [
-        activeSavedFilter,
         savedFilterFetchDataRefreshKey,
         (_l = (_k = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.id,
         (_p = (_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.model) === null || _p === void 0 ? void 0 : _p.id,
@@ -700,10 +698,10 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     ]);
     // Updates search, custom filter, grouping, aggregation, and UI state from a single shared filter source.
     var syncFilterUiStateFromSharedSource = useCallback(function (queryObject) { return __awaiter(void 0, void 0, void 0, function () {
-        var nextSearchFilter, nextSearchChips, nextCustomFilter, nextPredefinedBaseFilter, nextSavedFilter, nextSavedFilterData, rules, hydratedRules_1, hasGroupingRules, nextGroupingRules, layoutGroupBy, nextAggregationRules;
-        var _a, _b, _c, _d, _e;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+        var nextSearchFilter, nextSearchChips, nextCustomFilter, nextPredefinedBaseFilter, nextPredefinedSearchChip, nextSavedFilter, nextSavedFilterVariables, nextSavedFilterData, rules, hydratedRules_1, hasGroupingRules, nextGroupingRules, layoutGroupBy, nextAggregationRules;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
                 case 0:
                     nextSearchFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
                     nextSearchChips = nextSearchFilter ? extractChips(nextSearchFilter) : [];
@@ -711,7 +709,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                         ? queryObject.custom_filter_predicate
                         : null;
                     nextPredefinedBaseFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.predefined_search_predicate) || null;
+                    nextPredefinedSearchChip = nextPredefinedBaseFilter && (queryObject === null || queryObject === void 0 ? void 0 : queryObject.predefined_search_chip)
+                        ? queryObject.predefined_search_chip
+                        : null;
                     nextSavedFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_predicate) || null;
+                    nextSavedFilterVariables = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_variables) !== null && _a !== void 0 ? _a : {};
                     nextSavedFilterData = nextSavedFilter
                         ? availableSavedFilters.find(function (savedFilter) {
                             if (queryObject === null || queryObject === void 0 ? void 0 : queryObject.saved_filter_system_key) {
@@ -732,26 +734,28 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setSearchChips(function (prev) { return areFilterStateValuesEqual(prev, nextSearchChips) ? prev : nextSearchChips; });
                     setCustomFilter(function (prev) { return areFilterStateValuesEqual(prev, nextCustomFilter) ? prev : nextCustomFilter; });
                     setPredefinedSearchBaseFilter(function (prev) { return areFilterStateValuesEqual(prev, nextPredefinedBaseFilter) ? prev : nextPredefinedBaseFilter; });
+                    setPredefinedSearchChip(function (prev) { return areFilterStateValuesEqual(prev, nextPredefinedSearchChip) ? prev : nextPredefinedSearchChip; });
                     setCurrentSavedFilterData(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilterData) ? prev : nextSavedFilterData; });
                     setCurrentSavedFilterQuery(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilter) ? prev : nextSavedFilter; });
+                    setCurrentSavedFilterVariables(function (prev) { return areFilterStateValuesEqual(prev, nextSavedFilterVariables) ? prev : nextSavedFilterVariables; });
                     if (!(nextCustomFilter && (viewData === null || viewData === void 0 ? void 0 : viewData.data))) return [3 /*break*/, 2];
                     rules = transformFiltersToRules(nextCustomFilter);
                     return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
                 case 1:
-                    hydratedRules_1 = _f.sent();
+                    hydratedRules_1 = _g.sent();
                     setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, hydratedRules_1) ? prev : hydratedRules_1; });
                     return [3 /*break*/, 3];
                 case 2:
                     setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, initialState) ? prev : initialState; });
-                    _f.label = 3;
+                    _g.label = 3;
                 case 3:
-                    hasGroupingRules = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _a === void 0 ? void 0 : _a.some(function (rule) { return rule.fieldName !== null; });
+                    hasGroupingRules = (_b = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _b === void 0 ? void 0 : _b.some(function (rule) { return rule.fieldName !== null; });
                     nextGroupingRules = [{ id: 1, fieldName: null, dateGrouping: null }];
                     if (hasGroupingRules) {
                         nextGroupingRules = queryObject.grouping_rules;
                     }
                     else {
-                        layoutGroupBy = (_e = (_d = (_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.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.groupBy;
+                        layoutGroupBy = (_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.attrs) === null || _f === void 0 ? void 0 : _f.groupBy;
                         if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
                             nextGroupingRules = layoutGroupBy.map(function (groupStr, index) {
                                 var _a = groupStr.split(":"), fieldName = _a[0], dateGrouping = _a[1];
@@ -782,6 +786,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setPredefinedSearchBaseFilter(null);
         setCurrentSavedFilterData(null);
         setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
         setCurrentSavedFilterRules(null);
         if (!preserveGrouping) {
             setGroupingRules(defaultGroupingRules);
@@ -791,12 +796,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setShowChipManager(false);
         setInputValue("");
         clearFilterObjectFromLocalStorage();
-        if (activeSavedFilter) {
-            var params = new URLSearchParams(searchParams.toString());
-            params.delete("savedQuery");
-            var nextUrl = params.toString() ? "".concat(pathname, "?").concat(params.toString()) : pathname;
-            router.replace(nextUrl);
-        }
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
     };
@@ -804,6 +803,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         clearFilter: function () {
             resetAppliedFilters();
         },
+        getSavedFilters: function () { return availableSavedFilters.map(function (filter) { return (__assign({}, filter)); }); },
+        applySavedFilterByName: function (name, variables) {
+            if (variables === void 0) { variables = {}; }
+            var savedFilter = allAvailableSavedFilters.find(function (filter) { return (filter === null || filter === void 0 ? void 0 : filter.name) === name; });
+            if (!savedFilter) {
+                return false;
+            }
+            return applySavedFilter(savedFilter, variables);
+        },
         clearAppliedFilters: function (options) {
             resetAppliedFilters(options);
         },
@@ -824,26 +832,13 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     }, [syncFilterUiStateFromSharedSource, (_r = (_q = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _q === void 0 ? void 0 : _q.solidView) === null || _r === void 0 ? void 0 : _r.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var queryObject, nextQueryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson;
+            var queryObject;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!savedFiltersLoaded) return [3 /*break*/, 2];
-                        if (activeSavedFilter && availableSavedFilters.length === 0)
-                            return [2 /*return*/];
                         queryObject = getFilterObjectFromLocalStorage();
-                        nextQueryObject = queryObject;
-                        if (activeSavedFilter) {
-                            currentSavedFilterId_1 = Number(activeSavedFilter);
-                            currentSavedFilterData_1 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === currentSavedFilterId_1; });
-                            if (currentSavedFilterData_1) {
-                                filterJson = JSON.parse(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
-                                if (filterJson) {
-                                    nextQueryObject = __assign(__assign({}, (queryObject || {})), { saved_filter_predicate: filterJson, saved_filter_id: currentSavedFilterData_1.id, saved_filter_system_key: currentSavedFilterData_1.systemKey, saved_filter_name: currentSavedFilterData_1.name });
-                                }
-                            }
-                        }
-                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(nextQueryObject)];
+                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(queryObject)];
                     case 1:
                         _a.sent();
                         setRefreshKey(function (prev) { return prev + 1; });
@@ -854,7 +849,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             });
         }); };
         fn();
-    }, [activeSavedFilter, availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, (_t = (_s = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.id]);
+    }, [availableSavedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, (_t = (_s = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _s === void 0 ? void 0 : _s.solidView) === null || _t === void 0 ? void 0 : _t.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
@@ -1137,6 +1132,17 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             var finalPredefinedFilter = predefinedSearchBaseFilter;
             var finalCustomFilter = customFilter;
             var finalFilter = mergeAllDiffFilters(finalCustomFilter, finalSearchFilter, finalSavedFilter, finalPredefinedFilter, groupingRules, aggregationRules);
+            finalFilter.predefined_search_chip =
+                finalPredefinedFilter && predefinedSearchChip
+                    ? predefinedSearchChip
+                    : null;
+            if (finalSavedFilter && Object.keys(finalSavedFilter).length > 0) {
+                var resolved = resolveSavedFilterVariables(finalSavedFilter, user === null || user === void 0 ? void 0 : user.id, currentSavedFilterVariables);
+                if (resolved.missingVariables.length > 0)
+                    return;
+                finalFilter.resolved_saved_filter_predicate = resolved.value;
+                finalFilter.saved_filter_variables = currentSavedFilterVariables;
+            }
             if (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id) {
                 finalFilter.saved_filter_id = currentSavedFilterData.id;
             }
@@ -1160,12 +1166,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         return JSON.stringify(customFilter) !== JSON.stringify(predefinedSearchBaseFilter);
     };
     var openSavedCustomFilter = function (savedfilter) { return __awaiter(void 0, void 0, void 0, function () {
-        var savedfilterId_1, currentSavedFilterData_2, filterJson, finalSavedFilter, rules, hydratedRules;
+        var savedfilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, rules, hydratedRules;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     //Open custom filter popup 
-                    // router.push(`?savedQuery=${savedfilter.id}`);
                     // setShowGlobalSearchElement(true);
                     // // dont refetch the data yet
                     // const customFilter = JSON.parse(savedfilter.filterQueryJson);
@@ -1182,12 +1187,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setPredefinedSearchBaseFilter(null);
                     if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id)) return [3 /*break*/, 3];
                     savedfilterId_1 = savedfilter.id;
-                    // router.push(`?savedQuery=${savedfilter.id}`);
                     setShowOverlay(false);
-                    currentSavedFilterData_2 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
-                    setCurrentSavedFilterData(currentSavedFilterData_2);
-                    if (!currentSavedFilterData_2) return [3 /*break*/, 2];
-                    filterJson = JSON.parse(currentSavedFilterData_2 === null || currentSavedFilterData_2 === void 0 ? void 0 : currentSavedFilterData_2.filterQueryJson);
+                    currentSavedFilterData_1 = availableSavedFilters.find(function (savedFilter) { return savedFilter.id === savedfilterId_1; });
+                    setCurrentSavedFilterData(currentSavedFilterData_1);
+                    if (!currentSavedFilterData_1) return [3 /*break*/, 2];
+                    filterJson = parseSavedFilterQueryJson(currentSavedFilterData_1 === null || currentSavedFilterData_1 === void 0 ? void 0 : currentSavedFilterData_1.filterQueryJson);
                     if (!filterJson) return [3 /*break*/, 2];
                     finalSavedFilter = filterJson;
                     setCurrentSavedFilterQuery(finalSavedFilter);
@@ -1206,8 +1210,25 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         });
     }); };
+    var persistActiveSavedFilter = function (savedFilter, filterJson, variables) {
+        var _a, _b, _c;
+        var persistedFilter = __assign(__assign({}, (getFilterObjectFromLocalStorage() || {})), { custom_filter_predicate: null, search_predicate: null, predefined_search_predicate: null, predefined_search_chip: null, saved_filter_predicate: filterJson, saved_filter_variables: variables, saved_filter_id: (_a = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id) !== null && _a !== void 0 ? _a : null, saved_filter_system_key: (_b = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.systemKey) !== null && _b !== void 0 ? _b : null, saved_filter_name: (_c = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.name) !== null && _c !== void 0 ? _c : null });
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+    };
+    var clearActiveSavedFilter = function () {
+        setCurrentSavedFilterData(null);
+        setCurrentSavedFilterQuery(null);
+        setCurrentSavedFilterVariables({});
+        setCurrentSavedFilterRules(null);
+        setShowSavedFilterComponent(false);
+        var persistedFilter = __assign(__assign({}, (getFilterObjectFromLocalStorage() || {})), { saved_filter_predicate: null, saved_filter_variables: {}, saved_filter_id: null, saved_filter_system_key: null, saved_filter_name: null });
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+        setHasSearched(true);
+        setRefreshKey(function (prev) { return prev + 1; });
+    };
     var deleteSavedFilter = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var parsedSearchParams, savedQuery;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0: 
@@ -1216,10 +1237,8 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 case 1:
                     // delte the saved filter with id 
                     _a.sent();
-                    parsedSearchParams = searchParams;
-                    savedQuery = parsedSearchParams === null || parsedSearchParams === void 0 ? void 0 : parsedSearchParams.get("savedQuery");
-                    if (savedFilterTobeDeleted == savedQuery) {
-                        router.push(buildSavedFilterUrl(null));
+                    if (String(savedFilterTobeDeleted) === String(currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id)) {
+                        clearActiveSavedFilter();
                     }
                     setIsDeleteSQDialogVisible(false);
                     setTimeout(function () {
@@ -1230,7 +1249,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         });
     }); };
     var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
-        var filterJson, formData, savedFilterRecord_1, filterJson, formData, result_1, savedFilterRecord_2, error_1;
+        var filterJson, formData, savedFilterRecord_1, filterJson, formData, result, savedFilterRecord_2, error_1;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return __generator(this, function (_l) {
             switch (_l.label) {
@@ -1257,16 +1276,13 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
                     setPredefinedSearchBaseFilter(null);
-                    clearFilterObjectFromLocalStorage();
                     savedFilterRecord_1 = { id: formValues.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                     setSavedFilters(function (prev) { return prev.map(function (f) { return String(f === null || f === void 0 ? void 0 : f.id) === String(formValues.id) ? __assign(__assign({}, f), savedFilterRecord_1) : f; }); });
                     setCurrentSavedFilterData(savedFilterRecord_1);
                     setCurrentSavedFilterQuery(filterJson);
+                    persistActiveSavedFilter(savedFilterRecord_1, filterJson, currentSavedFilterVariables);
                     setHasSearched(true);
                     setRefreshKey(function (prev) { return prev + 1; });
-                    setTimeout(function () {
-                        router.push(buildSavedFilterUrl(formValues.id));
-                    }, 500);
                     return [3 /*break*/, 5];
                 case 3:
                     filterJson = customFilter;
@@ -1279,23 +1295,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     formData.append("userId", user === null || user === void 0 ? void 0 : user.id);
                     return [4 /*yield*/, createEntity(formData).unwrap()];
                 case 4:
-                    result_1 = _l.sent();
+                    result = _l.sent();
                     setSearchChips([]);
                     setSearchFilter(null);
                     setFilterRules(initialState);
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
                     setPredefinedSearchBaseFilter(null);
-                    clearFilterObjectFromLocalStorage();
-                    savedFilterRecord_2 = { id: result_1.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
+                    savedFilterRecord_2 = { id: result.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                     setSavedFilters(function (prev) { return __spreadArray([savedFilterRecord_2], prev, true); });
                     setCurrentSavedFilterData(savedFilterRecord_2);
                     setCurrentSavedFilterQuery(filterJson);
+                    setCurrentSavedFilterVariables({});
+                    persistActiveSavedFilter(savedFilterRecord_2, filterJson, {});
                     setHasSearched(true);
                     setRefreshKey(function (prev) { return prev + 1; });
-                    setTimeout(function () {
-                        router.push(buildSavedFilterUrl(result_1.data.id));
-                    }, 500);
                     _l.label = 5;
                 case 5: return [3 /*break*/, 7];
                 case 6:
@@ -1345,49 +1359,57 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                 }, 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 }) })] }) }));
     };
     //saved filter related code start
-    var applySavedFilter = function (savedfilter) {
+    var applySavedFilter = function (savedfilter, variables) {
+        if (variables === void 0) { variables = {}; }
+        if (!(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) && !(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey)) {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+        var filterJson;
+        try {
+            filterJson = parseSavedFilterQueryJson(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.filterQueryJson);
+        }
+        catch (_a) {
+            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
+            return false;
+        }
+        var resolved = resolveSavedFilterVariables(filterJson, user === null || user === void 0 ? void 0 : user.id, variables);
+        if (resolved.missingVariables.length > 0) {
+            console.error("Unable to apply saved filter '".concat(savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.name, "': missing variables ").concat(resolved.missingVariables.join(", ")));
+            return false;
+        }
+        // Applying the already-active filter must be a no-op. This is important
+        // for lifecycle extensions: applying a filter causes a new list load,
+        // which invokes onBeforeListDataLoad/onListLoad again.
+        var sameSavedFilterReference = ((currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id) != null &&
+            (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) != null &&
+            areFilterStateValuesEqual(currentSavedFilterData.id, savedfilter.id)) ||
+            ((currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.systemKey) != null &&
+                (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey) != null &&
+                areFilterStateValuesEqual(currentSavedFilterData.systemKey, savedfilter.systemKey));
+        var sameSavedFilter = sameSavedFilterReference &&
+            areFilterStateValuesEqual(currentSavedFilterQuery, filterJson) &&
+            areFilterStateValuesEqual(currentSavedFilterVariables, variables);
+        if (sameSavedFilter) {
+            return true;
+        }
         setSearchChips([]);
         setSearchFilter(null);
         setFilterRules(initialState);
         setCustomFilter(null);
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
-        clearFilterObjectFromLocalStorage();
-        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.systemKey) {
-            setCurrentSavedFilterData(savedfilter);
-            try {
-                var filterJson = JSON.parse(savedfilter.filterQueryJson);
-                if (filterJson) {
-                    setCurrentSavedFilterQuery(filterJson);
-                }
-            }
-            catch (_a) {
-                console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-            }
-            setShowOverlay(false);
-            setHasSearched(true);
-            setRefreshKey(function (prev) { return prev + 1; });
-            return;
-        }
-        // push the savedQuery=1 in url 
-        if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
-            router.push(buildSavedFilterUrl(savedfilter.id));
-            setShowOverlay(false);
-        }
-        else {
-            console.error(ERROR_MESSAGES.SAVE_FILTER_UNDEFINED_NULL);
-        }
-    };
-    var removeSavedFilter = function () {
-        setCurrentSavedFilterData(null);
-        setCurrentSavedFilterQuery(null);
-        setCurrentSavedFilterRules(null);
-        setShowSavedFilterComponent(false);
-        if (searchParams.has("savedQuery")) {
-            router.replace(buildSavedFilterUrl(null));
-        }
+        setCurrentSavedFilterData(savedfilter);
+        setCurrentSavedFilterQuery(filterJson);
+        setCurrentSavedFilterVariables(variables);
+        persistActiveSavedFilter(savedfilter, filterJson, variables);
+        setShowOverlay(false);
         setHasSearched(true);
         setRefreshKey(function (prev) { return prev + 1; });
+        return true;
+    };
+    var removeSavedFilter = function () {
+        clearActiveSavedFilter();
     };
     var SavedFiltersChip = 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 () {
@@ -1486,16 +1508,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 onRemove: function () { return handleRemoveChipGroup(column); },
             });
         });
-        (definedFilters || []).forEach(function (definedFilter) {
-            if (!(definedFilter === null || definedFilter === void 0 ? void 0 : definedFilter.applied))
-                return;
-            items.push({
-                id: "handler:".concat(definedFilter.key),
-                type: "handler",
-                label: definedFilter.label,
-                onRemove: function () { return onRemoveDefinedFilter === null || onRemoveDefinedFilter === void 0 ? void 0 : onRemoveDefinedFilter(definedFilter.key); },
-            });
-        });
         return items;
     }, [
         currentSavedFilterData,
@@ -1505,8 +1517,6 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         groupingRules,
         groupedSearchChips,
         searchableFields,
-        definedFilters,
-        onRemoveDefinedFilter,
     ]);
     var MAX_VISIBLE_CHIPS = 3;
     var visibleChipItems = managedChipItems.slice(0, MAX_VISIBLE_CHIPS);
@@ -1543,7 +1553,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 predefined: p,
             }); })
             : [];
-        var saved = (availableSavedFilters || []).map(function (s) { return ({
+        var saved = (selectableSavedFilters || []).map(function (s) { return ({
             id: "saved:".concat(s.id),
             kind: "saved",
             saved: s,
@@ -1558,8 +1568,8 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     kind: "grouping",
                 }]
             : [];
-        return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], fields, true), predefined, true), saved, true), custom, true), grouping, true);
-    }, [inputValue, searchableFields, predefinedSearches, availableSavedFilters, viewType]);
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], predefined, true), fields, true), saved, true), custom, true), grouping, true);
+    }, [inputValue, searchableFields, predefinedSearches, selectableSavedFilters, viewType]);
     var handleKeyDown = function (e) {
         var currentValue = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim()) || "";
         var applyFieldOption = function (value) {
@@ -1580,6 +1590,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setRefreshKey(function (prev) { return prev + 1; });
             setShowOverlay(false);
         };
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setShowOverlay(false);
+            return;
+        }
         if ((e.key === "ArrowDown" || e.key === "ArrowUp") && overlayOptions.length > 0) {
             e.preventDefault();
             setShowOverlay(true);
@@ -1589,6 +1604,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setFocusedIndex(nextIndex);
             return;
         }
+        if ((e.key === "Home" || e.key === "End") && showOverlay && overlayOptions.length > 0) {
+            e.preventDefault();
+            setFocusedIndex(e.key === "Home" ? 0 : overlayOptions.length - 1);
+            return;
+        }
         if (e.key === "Enter") {
             if (currentValue || focusedIndex >= 0) {
                 e.preventDefault();
@@ -1628,7 +1648,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                 setPredefinedSearchChip(null);
                 setPredefinedSearchBaseFilter(null);
             }
-            else if (activeSavedFilter) {
+            else if (currentSavedFilterData) {
                 removeSavedFilter();
             }
             setHasSearched(true);
@@ -1693,7 +1713,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     };
     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: "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 ? (_jsx("button", { type: "button", className: "solid-chip-label-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: "custom-chip-value solid-chip-pill-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) {
+    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 ? (_jsx("button", { type: "button", className: "solid-chip-label-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: "custom-chip-value solid-chip-pill-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\u2026", role: "combobox", "aria-label": "Search and filter", "aria-autocomplete": "list", "aria-expanded": showOverlay, "aria-controls": showOverlay ? overlayListboxId : undefined, "aria-activedescendant": showOverlay && focusedIndex >= 0 ? getOverlayOptionId(focusedIndex) : undefined, onChange: function (e) {
                                                 setInputValue(e.target.value);
                                                 setShowChipManager(false);
                                                 setShowOverlay(true);
@@ -1712,14 +1732,15 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                 setShowChipManager(false);
                                                 setShowOverlay(true);
                                                 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: [(definedFilters || []).some(function (f) { return !(f === null || f === void 0 ? void 0 : f.applied); }) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "custom-filter-search-options solid-search-overlay-section flex flex-col px-3 py-2", children: [_jsxs("h6", { className: "my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon", children: [_jsx(ListFilter, { size: 13 }), _jsx("span", { children: "Defined filters" })] }), _jsx("div", { className: "solid-defined-filter-badge-row", children: (definedFilters || [])
-                                                        .filter(function (f) { return !(f === null || f === void 0 ? void 0 : f.applied); })
-                                                        .map(function (definedFilter) { return (_jsxs("button", { type: "button", className: "solid-defined-filter-badge", onMouseDown: function (e) {
-                                                            e.preventDefault();
-                                                            onApplyDefinedFilter === null || onApplyDefinedFilter === void 0 ? void 0 : onApplyDefinedFilter(definedFilter.key);
-                                                            setShowOverlay(false);
-                                                        }, children: [_jsx(Plus, { size: 12 }), _jsx("span", { className: "solid-defined-filter-badge-label", children: definedFilter.label })] }, definedFilter.key)); }) })] }), _jsx("div", { className: "solid-filter-dialog-sep" })] })), 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) {
+                                            }, className: "custom-filter-button solid-global-search-trigger", "aria-label": "Open search options", children: _jsx(Search, { size: 14 }) })] }) })] }) }), showOverlay && (_jsxs("div", { ref: overlayRef, id: overlayListboxId, role: "listbox", "aria-label": "Search and filter options", className: "solid-search-overlay-panel", children: [_jsxs("div", { className: "solid-search-overlay-scroll", children: [inputValue ? (_jsxs(_Fragment, { children: [predefinedSearches && predefinedSearches.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "solid-search-overlay-section solid-search-overlay-section--predefined", children: [_jsxs("h6", { className: "my-1 solid-search-overlay-heading solid-search-overlay-section-title solid-search-overlay-heading-with-icon", children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { children: "Suggested searches" }), _jsx("span", { className: "solid-search-overlay-section-count", children: predefinedSearches.length })] }), predefinedSearches.map(function (predefinedSearch, index) {
+                                                            var optionIndex = overlayOptions.findIndex(function (option) { return option.id === "predefined:".concat(predefinedSearch.name || index); });
+                                                            return (_jsx(SolidButton, { id: getOverlayOptionId(optionIndex), role: "option", "aria-selected": focusedIndex === optionIndex, variant: "ghost", size: "sm", className: "text-color solid-search-overlay-option ".concat(focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""), onMouseDown: function (e) {
+                                                                    e.preventDefault();
+                                                                    handlePredefinedSearch(predefinedSearch);
+                                                                }, onMouseEnter: function () { return setFocusedIndex(optionIndex); }, children: _jsxs("span", { className: "solid-search-overlay-option-content", children: [_jsx("span", { className: "solid-search-overlay-option-icon", "aria-hidden": "true", children: _jsx(Sparkles, { size: 15 }) }), _jsxs("span", { className: "solid-search-overlay-option-copy", children: [_jsx("span", { className: "solid-search-overlay-option-title", children: predefinedSearch.name }), _jsxs("span", { className: "solid-search-overlay-option-description", children: ["Search for \u201C", inputValue, "\u201D", predefinedSearch.description ? " \u2014 ".concat(predefinedSearch.description) : ""] })] })] }) }, index));
+                                                        })] }), _jsx("div", { className: "solid-filter-dialog-sep" })] })), _jsxs("div", { className: "solid-search-overlay-section solid-search-overlay-section--search", 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 individual fields" }), _jsx("span", { className: "solid-search-overlay-section-count", children: searchableFields.length })] }), searchableFields.length > 0 ? (searchableFields.map(function (value, index) {
+                                                    var optionIndex = overlayOptions.findIndex(function (option) { return option.id === "field:".concat(value.fieldName); });
+                                                    return (_jsx(SolidButton, { id: getOverlayOptionId(optionIndex), role: "option", "aria-selected": focusedIndex === optionIndex, variant: "ghost", size: "sm", className: "text-color solid-search-overlay-option ".concat(focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""), onMouseDown: function (e) {
                                                             e.preventDefault();
                                                             var currentValue = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim();
                                                             if (currentValue) {
@@ -1737,34 +1758,31 @@ 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: toTitleCase(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 items-center gap-1", children: [_jsxs("strong", { children: [predefinedSearch.name, ":"] }), _jsxs("span", { className: "font-bold text-color pr-1", 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" })] }), availableSavedFilters.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-col solid-search-overlay-saved-list", children: availableSavedFilters.map(function (savedfilter, index) {
-                                                        var _a;
-                                                        return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilter: activeSavedFilter || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.systemKey) || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id), 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: "flex flex-col px-3 py-2 solid-search-overlay-footer-action ".concat(((_y = overlayOptions[focusedIndex]) === null || _y === void 0 ? void 0 : _y.id) === "footer:custom" ? "solid-search-overlay-option-active" : ""), onMouseDown: function (event) {
+                                                        }, onMouseEnter: function () { return setFocusedIndex(optionIndex); }, children: _jsxs("span", { className: "solid-search-overlay-option-content", children: [_jsx("span", { className: "solid-search-overlay-option-icon", "aria-hidden": "true", children: _jsx(Search, { size: 15 }) }), _jsxs("span", { className: "solid-search-overlay-option-copy", children: [_jsx("span", { className: "solid-search-overlay-option-title", children: toTitleCase(value.displayName.trim()) }), _jsxs("span", { className: "solid-search-overlay-option-description", children: ["Search for \u201C", inputValue, "\u201D"] })] })] }) }, 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." })] }))] })] })) :
+                                    _jsxs(_Fragment, { children: [_jsx("div", { className: "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: ["Enter a value to see suggested searches and searchable ", searchableEntityLabel, " fields."] })] })] }) }), _jsx("div", { className: "solid-filter-dialog-sep" })] }), selectableSavedFilters.length > 0 &&
+                                    _jsxs(_Fragment, { children: [_jsx("hr", { className: "solid-search-overlay-section-separator" }), _jsxs("div", { className: "solid-search-overlay-section solid-search-overlay-section--saved", 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 }) }), _jsx("div", { className: "solid-search-overlay-panel-callout-copy", children: _jsxs("p", { className: "solid-search-overlay-heading solid-search-overlay-section-title", children: [_jsx("span", { children: "Saved filters" }), _jsx("span", { className: "solid-search-overlay-section-count", children: selectableSavedFilters.length })] }) })] }), _jsx("div", { className: "solid-search-overlay-saved-list", children: selectableSavedFilters.map(function (savedfilter, index) {
+                                                            var _a;
+                                                            return (_jsx(SavedFilterList, { savedfilter: savedfilter, activeSavedFilterReference: (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.systemKey) || (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.id), 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);
+                                                                }, optionId: getOverlayOptionId(overlayOptions.findIndex(function (o) { return o.id === "saved:".concat(savedfilter.id); })) }, savedfilter.id));
+                                                        }) })] })] })] }), _jsxs("div", { className: "solid-search-overlay-footer", children: [_jsx("button", { type: "button", id: getOverlayOptionId(overlayOptions.findIndex(function (option) { return option.id === "footer:custom"; })), role: "option", "aria-selected": ((_y = overlayOptions[focusedIndex]) === null || _y === void 0 ? void 0 : _y.id) === "footer:custom", className: "solid-search-overlay-footer-action solid-search-overlay-footer-action--custom ".concat(((_z = overlayOptions[focusedIndex]) === null || _z === void 0 ? void 0 : _z.id) === "footer:custom" ? "solid-search-overlay-option-active" : ""), onMouseDown: function (event) {
                                         event.preventDefault();
                                         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(((_z = overlayOptions[focusedIndex]) === null || _z === void 0 ? void 0 : _z.id) === "footer:grouping" ? "solid-search-overlay-option-active" : ""), onMouseDown: function (event) {
+                                    }, 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: "Advanced filters" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Combine fields, operators and values." })] })] }) }), viewType === "tree" && (_jsx("button", { type: "button", id: getOverlayOptionId(overlayOptions.findIndex(function (option) { return option.id === "footer:grouping"; })), role: "option", "aria-selected": ((_0 = overlayOptions[focusedIndex]) === null || _0 === void 0 ? void 0 : _0.id) === "footer:grouping", className: "solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ".concat(((_1 = overlayOptions[focusedIndex]) === null || _1 === void 0 ? void 0 : _1.id) === "footer:grouping" ? "solid-search-overlay-option-active" : ""), onMouseDown: function (event) {
                                         event.preventDefault();
                                         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 &&
+                                    }, 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: "Group and aggregate" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Organise records and calculate aggregate values." })] })] }) }))] })] })), _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-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"] })] })] })] }) }));