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

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

@@ -54,8 +54,8 @@ 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 { clearFilterObjectFromLocalStorage, getFilterObjectFromLocalStorage, setFilterObjectToLocalStorage, } from "./globalSearchPersistence";
@@ -67,7 +67,7 @@ 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";
@@ -410,22 +410,22 @@ export var mergeAllDiffFilters = function (customFilter, searchFilter, savedFilt
     return filters;
 };
 var SavedFilterList = function (_a) {
-    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;
+    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" : ""), onMouseDown: function (e) {
+    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,50 +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 _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 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({}), currentSavedFilterVariables = _19[0], setCurrentSavedFilterVariables = _19[1];
-    var _20 = useState(), currentSavedFilterRules = _20[0], setCurrentSavedFilterRules = _20[1];
-    var _21 = useState(false), showSavedFilterComponent = _21[0], setShowSavedFilterComponent = _21[1];
-    var _22 = useState(), savedFilterTobeDeleted = _22[0], setSavedFilterTobeDeleted = _22[1];
-    var _23 = useState(false), isDeleteSQDialogVisible = _23[0], setIsDeleteSQDialogVisible = _23[1];
-    var _24 = useState(), savedFilterQueryString = _24[0], setSavedFilterQueryString = _24[1];
-    var _25 = useState(false), showOverlay = _25[0], setShowOverlay = _25[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 _26 = useState(false), showChipManager = _26[0], setShowChipManager = _26[1];
+    var _28 = useState(false), showChipManager = _28[0], setShowChipManager = _28[1];
     var chipManagerRef = useRef(null);
     var chipManagerTriggerRef = useRef(null);
     var focusSearchInput = function () {
@@ -584,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',
@@ -594,12 +598,12 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, [focusedIndex, showOverlay]);
-    var _27 = useSession(), session = _27.data, status = _27.status;
+    var _29 = useSession(), session = _29.data, status = _29.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _28 = useState(0), refreshKey = _28[0], setRefreshKey = _28[1];
-    var _29 = useState(null), predefinedSearchBaseFilter = _29[0], setPredefinedSearchBaseFilter = _29[1];
-    var _30 = useState([]), savedFilters = _30[0], setSavedFilters = _30[1];
-    var _31 = useState(false), savedFiltersLoaded = _31[0], setSavedFiltersLoaded = _31[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)
@@ -629,11 +633,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     }); }, [allAvailableSavedFilters]);
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _32 = useCreateSolidEntityMutation(), createEntity = _32[0], _33 = _32[1], isEntityCreateSuccess = _33.isSuccess, isEntityCreateError = _33.isError, entityCreateError = _33.error;
-    var _34 = useUpdateSolidEntityMutation(), updateEntity = _34[0], _35 = _34[1], isEntityUpdateSuceess = _35.isSuccess, isEntityUpdateError = _35.isError, entityUpdateError = _35.error;
-    var _36 = useDeleteSolidEntityMutation(), deleteEntity = _36[0], _37 = _36[1], isEntityDeleteSuceess = _37.isSuccess, isEntityDeleteError = _37.isError, entityDeleteError = _37.error;
-    var _38 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _38[0], _39 = _38[1], solidEntityListViewData = _39.data, isSavedFilterLoading = _39.isLoading, error = _39.error;
-    var _40 = useState(0), savedFilterFetchDataRefreshKey = _40[0], setSavedFilterFetchDataRefreshKey = _40[1];
+    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;
@@ -1374,6 +1378,21 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             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);
@@ -1489,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,
@@ -1508,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);
@@ -1561,7 +1568,7 @@ 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);
+        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()) || "";
@@ -1583,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);
@@ -1592,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();
@@ -1696,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);
@@ -1715,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) {
@@ -1740,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" })] }), selectableSavedFilters.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: 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);
-                                                            } }, 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"] })] })] })] }) }));