@solidxai/core-ui 0.1.17 → 0.1.18-beta.1

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

@@ -1,9 +1,11 @@
 import React, { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
 import FilterComponent, { FilterOperator, FilterRule, FilterRuleType } from "../../../components/core/common/FilterComponent";
 import { toTitleCase } from "../../../helpers/helpers";
 import {clearFilterObjectFromLocalStorage,getFilterObjectFromLocalStorage,setFilterObjectToLocalStorage,
 } from "./globalSearchPersistence";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { showToast } from "../../../redux/features/toastSlice";
 import qs from "qs";
 import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
@@ -418,10 +420,12 @@ export const mergeAllDiffFilters = (customFilter: any, searchFilter: any, savedF
     return filters;
 }
 
-const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter, optionId }: any) => {
-    const isActive = savedfilter?.systemKey
-        ? activeSavedFilterReference === savedfilter.systemKey
-        : String(activeSavedFilterReference) === String(savedfilter.id);
+const SavedFilterList = ({ savedfilter, activeSavedFilterReference, activeSavedFilterReferences, applySavedFilter, openSavedCustomFilter, setSavedFilterTobeDeleted, setIsDeleteSQDialogVisible, isFocused, onMouseEnter, optionId }: any) => {
+    const isActive = activeSavedFilterReferences
+        ? activeSavedFilterReferences.includes(savedfilter?.systemKey ? `system:${savedfilter.systemKey}` : `id:${savedfilter.id}`)
+        : savedfilter?.systemKey
+            ? activeSavedFilterReference === savedfilter.systemKey
+            : String(activeSavedFilterReference) === String(savedfilter.id);
 
     return (
         <div className="solid-saved-filter-item" onMouseEnter={onMouseEnter}>
@@ -436,6 +440,10 @@ const SavedFilterList = ({ savedfilter, activeSavedFilterReference, applySavedFi
                     aria-label={`${savedfilter.name}${isActive ? ", applied" : ""}`}
                     onMouseDown={(e) => {
                         e.preventDefault();
+                        e.stopPropagation();
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
                         applySavedFilter(savedfilter);
                     }}
                     title={savedfilter?.description}
@@ -571,7 +579,8 @@ type RelationCache = Map<string, { label: string; value: number }>;
 
 
 
-export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates }: any, ref) => {
+export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handleApplyCustomFilter, showSaveFilterPopup, setShowSaveFilterPopup, filterPredicates, allowMultipleSavedFilters = false }: any, ref) => {
+    const dispatch = useDispatch();
     type OverlayOption =
         | { id: string; kind: "field"; field: any }
         | { id: string; kind: "predefined"; predefined: any }
@@ -681,6 +690,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const [currentSavedFilterQuery, setCurrentSavedFilterQuery] = useState<any>();
     const [currentSavedFilterVariables, setCurrentSavedFilterVariables] = useState<Record<string, any>>({});
     const [currentSavedFilterRules, setCurrentSavedFilterRules] = useState<any>();
+    const [activeSavedFilters, setActiveSavedFilters] = useState<any[]>([]);
+    const [editingSavedFilterKey, setEditingSavedFilterKey] = useState<string | null>(null);
     const [showSavedFilterComponent, setShowSavedFilterComponent] = useState<boolean>(false);
 
 
@@ -834,6 +845,27 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         viewData?.data?.solidView?.model?.id,
         user?.id
     ])
+
+    const getSavedFilterKey = (savedFilter: any) =>
+        savedFilter?.systemKey ? `system:${savedFilter.systemKey}` : `id:${savedFilter?.id}`;
+
+    const getPersistedSavedFilterItems = (queryObject: any): any[] => {
+        if (!allowMultipleSavedFilters) return [];
+        if (Array.isArray(queryObject?.saved_filter_items)) {
+            return queryObject.saved_filter_items;
+        }
+        if (queryObject?.saved_filter_predicate) {
+            return [{
+                id: queryObject.saved_filter_id,
+                systemKey: queryObject.saved_filter_system_key,
+                name: queryObject.saved_filter_name || "Saved Filter",
+                predicate: queryObject.saved_filter_predicate,
+                variables: queryObject.saved_filter_variables || {},
+            }];
+        }
+        return [];
+    };
+
 // Updates search, custom filter, grouping, aggregation, and UI state from a single shared filter source.
     const syncFilterUiStateFromSharedSource = useCallback(async (queryObject: any | null) => {
         const nextSearchFilter = queryObject?.search_predicate || null;
@@ -847,9 +879,33 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             nextPredefinedBaseFilter && queryObject?.predefined_search_chip
                 ? queryObject.predefined_search_chip
                 : null;
-        const nextSavedFilter = queryObject?.saved_filter_predicate || null;
+        const persistedSavedFilterItems = getPersistedSavedFilterItems(queryObject);
+        const nextSavedFilterItems = allowMultipleSavedFilters
+            ? persistedSavedFilterItems.map((item: any) => {
+                const savedFilter = availableSavedFilters.find((candidate: any) =>
+                    item?.systemKey
+                        ? candidate?.systemKey === item.systemKey
+                        : String(candidate?.id) === String(item?.id)
+                );
+                return {
+                    data: savedFilter || {
+                        id: item?.id,
+                        systemKey: item?.systemKey,
+                        name: item?.name || "Saved Filter",
+                        filterQueryJson: JSON.stringify(item?.predicate || {}),
+                    },
+                    query: item?.predicate || {},
+                    variables: item?.variables || {},
+                };
+            })
+            : [];
+        const nextSavedFilter = allowMultipleSavedFilters
+            ? (nextSavedFilterItems.length > 0 ? { $or: nextSavedFilterItems.map((item: any) => item.query) } : null)
+            : queryObject?.saved_filter_predicate || null;
         const nextSavedFilterVariables = queryObject?.saved_filter_variables ?? {};
-        const nextSavedFilterData = nextSavedFilter
+        const nextSavedFilterData = allowMultipleSavedFilters
+            ? (nextSavedFilterItems.length > 0 ? nextSavedFilterItems[nextSavedFilterItems.length - 1].data : null)
+            : nextSavedFilter
             ? availableSavedFilters.find((savedFilter: any) => {
                 if (queryObject?.saved_filter_system_key) {
                     return savedFilter?.systemKey === queryObject.saved_filter_system_key;
@@ -874,6 +930,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setCurrentSavedFilterData((prev: any) => areFilterStateValuesEqual(prev, nextSavedFilterData) ? prev : nextSavedFilterData);
         setCurrentSavedFilterQuery((prev: any) => areFilterStateValuesEqual(prev, nextSavedFilter) ? prev : nextSavedFilter);
         setCurrentSavedFilterVariables((prev) => areFilterStateValuesEqual(prev, nextSavedFilterVariables) ? prev : nextSavedFilterVariables);
+        setActiveSavedFilters((prev) => areFilterStateValuesEqual(prev, nextSavedFilterItems) ? prev : nextSavedFilterItems);
 
         if (nextCustomFilter && viewData?.data) {
             const rules: FilterRule = transformFiltersToRules(nextCustomFilter);
@@ -909,7 +966,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
         setGroupingRules((prev) => areFilterStateValuesEqual(prev, nextGroupingRules) ? prev : nextGroupingRules);
         setAggregationRules((prev) => areFilterStateValuesEqual(prev, nextAggregationRules) ? prev : nextAggregationRules);
-    }, [availableSavedFilters, initialState, viewData]);
+    }, [allowMultipleSavedFilters, availableSavedFilters, initialState, viewData]);
 
     const resetAppliedFilters = ({ preserveGrouping = false }: { preserveGrouping?: boolean } = {}) => {
         setSearchChips([]);
@@ -922,6 +979,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         setCurrentSavedFilterQuery(null);
         setCurrentSavedFilterVariables({});
         setCurrentSavedFilterRules(null);
+        setActiveSavedFilters([]);
+        setEditingSavedFilterKey(null);
         if (!preserveGrouping) {
             setGroupingRules(defaultGroupingRules);
             setAggregationRules(defaultAggregationRules);
@@ -1221,6 +1280,15 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         //     };
         // }
         setCurrentSavedFilterQuery(finalCustomFilter);
+        if (allowMultipleSavedFilters && editingSavedFilterKey) {
+            const nextItems = activeSavedFilters.map((item: any) =>
+                getSavedFilterKey(item.data) === editingSavedFilterKey
+                    ? { ...item, query: finalCustomFilter }
+                    : item
+            );
+            setActiveSavedFilters(nextItems);
+            persistActiveSavedFilters(nextItems);
+        }
         setShowSavedFilterComponent(false);
         setHasSearched(true)
         setRefreshKey((prev) => prev + 1)
@@ -1262,7 +1330,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             const finalSearchFilter = tranformSearchToFilters(formattedChips);
             setSearchFilter(finalSearchFilter);
 
-            let finalSavedFilter: any = currentSavedFilterQuery
+            const finalSavedFilter: any = allowMultipleSavedFilters
+                ? (activeSavedFilters.length > 0 ? { $or: activeSavedFilters.map((item: any) => item.query) } : null)
+                : currentSavedFilterQuery;
             const finalPredefinedFilter = predefinedSearchBaseFilter
 
             const finalCustomFilter = customFilter
@@ -1271,19 +1341,31 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 finalPredefinedFilter && predefinedSearchChip
                     ? predefinedSearchChip
                     : null;
-            if (finalSavedFilter && Object.keys(finalSavedFilter).length > 0) {
+            if (allowMultipleSavedFilters && activeSavedFilters.length > 0) {
+                const resolvedItems = activeSavedFilters.map((item: any) => resolveSavedFilterVariables(item.query, user?.id, item.variables || {}));
+                if (resolvedItems.some((item: any) => item.missingVariables.length > 0)) return;
+                finalFilter.resolved_saved_filter_predicate = { $or: resolvedItems.map((item: any) => item.value) };
+                finalFilter.saved_filter_variables = {};
+                finalFilter.saved_filter_items = activeSavedFilters.map((item: any) => ({
+                    id: item.data?.id ?? null,
+                    systemKey: item.data?.systemKey ?? null,
+                    name: item.data?.name ?? null,
+                    predicate: item.query,
+                    variables: item.variables || {},
+                }));
+            } else if (finalSavedFilter && Object.keys(finalSavedFilter).length > 0) {
                 const resolved = resolveSavedFilterVariables(finalSavedFilter, user?.id, currentSavedFilterVariables);
                 if (resolved.missingVariables.length > 0) return;
                 finalFilter.resolved_saved_filter_predicate = resolved.value;
                 finalFilter.saved_filter_variables = currentSavedFilterVariables;
             }
-            if (currentSavedFilterData?.id) {
+            if (!allowMultipleSavedFilters && currentSavedFilterData?.id) {
                 finalFilter.saved_filter_id = currentSavedFilterData.id;
             }
-            if (currentSavedFilterData?.systemKey) {
+            if (!allowMultipleSavedFilters && currentSavedFilterData?.systemKey) {
                 finalFilter.saved_filter_system_key = currentSavedFilterData.systemKey;
             }
-            if (currentSavedFilterData?.name) {
+            if (!allowMultipleSavedFilters && currentSavedFilterData?.name) {
                 finalFilter.saved_filter_name = currentSavedFilterData.name;
             }
             handleApplyCustomFilter(finalFilter, true);
@@ -1315,16 +1397,19 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         // }
 
 
-        setSearchChips([]);
-        setSearchFilter(null);
-        setFilterRules(initialState);
-        setCustomFilter(null)
-        setPredefinedSearchChip(null);
-        setPredefinedSearchBaseFilter(null);
+        if (!allowMultipleSavedFilters) {
+            setSearchChips([]);
+            setSearchFilter(null);
+            setFilterRules(initialState);
+            setCustomFilter(null)
+            setPredefinedSearchChip(null);
+            setPredefinedSearchBaseFilter(null);
+        }
 
         if (savedfilter?.id) {
             const savedfilterId = savedfilter.id;
             setShowOverlay(false);
+            setEditingSavedFilterKey(getSavedFilterKey(savedfilter));
             const currentSavedFilterData: any = availableSavedFilters.find((savedFilter: any) => savedFilter.id === savedfilterId);
             setCurrentSavedFilterData(currentSavedFilterData);
             if (currentSavedFilterData) {
@@ -1346,7 +1431,32 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         }
     }
 
+    const persistActiveSavedFilters = (items: any[]) => {
+        const first = items[0];
+        const persistedFilter = {
+            ...(getFilterObjectFromLocalStorage() || {}),
+            saved_filter_items: items.map((item) => ({
+                id: item.data?.id ?? null,
+                systemKey: item.data?.systemKey ?? null,
+                name: item.data?.name ?? null,
+                predicate: item.query,
+                variables: item.variables || {},
+            })),
+            saved_filter_predicate: items.length > 0 ? (items.length === 1 ? first.query : { $or: items.map((item) => item.query) }) : null,
+            saved_filter_variables: items.length === 1 ? (first.variables || {}) : {},
+            saved_filter_id: items.length === 1 ? first.data?.id ?? null : null,
+            saved_filter_system_key: items.length === 1 ? first.data?.systemKey ?? null : null,
+            saved_filter_name: items.length === 1 ? first.data?.name ?? null : null,
+        };
+        delete persistedFilter.finalFullFilter;
+        setFilterObjectToLocalStorage(persistedFilter);
+    };
+
     const persistActiveSavedFilter = (savedFilter: any, filterJson: any, variables: Record<string, any>) => {
+        if (allowMultipleSavedFilters) {
+            persistActiveSavedFilters([{ data: savedFilter, query: filterJson, variables }]);
+            return;
+        }
         const persistedFilter = {
             ...(getFilterObjectFromLocalStorage() || {}),
             custom_filter_predicate: null,
@@ -1372,6 +1482,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
 
         const persistedFilter = {
             ...(getFilterObjectFromLocalStorage() || {}),
+            saved_filter_items: [],
             saved_filter_predicate: null,
             saved_filter_variables: {},
             saved_filter_id: null,
@@ -1386,15 +1497,40 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     };
 
     const deleteSavedFilter = async () => {
-        // delte the saved filter with id 
-        await deleteEntity(savedFilterTobeDeleted);
-        if (String(savedFilterTobeDeleted) === String(currentSavedFilterData?.id)) {
-            clearActiveSavedFilter();
+        try {
+            await deleteEntity(savedFilterTobeDeleted).unwrap();
+            dispatch(showToast({
+                severity: "success",
+                summary: ERROR_MESSAGES.DELETED,
+                detail: ERROR_MESSAGES.ENTITY_DELETE,
+            }));
+
+            if (allowMultipleSavedFilters) {
+                const nextItems = activeSavedFilters.filter((item: any) => String(item.data?.id) !== String(savedFilterTobeDeleted));
+                setActiveSavedFilters(nextItems);
+                if (String(savedFilterTobeDeleted) === String(currentSavedFilterData?.id)) {
+                    setCurrentSavedFilterData(null);
+                    setCurrentSavedFilterQuery(null);
+                    setCurrentSavedFilterVariables({});
+                }
+                persistActiveSavedFilters(nextItems);
+                setHasSearched(true);
+                setRefreshKey((prev) => prev + 1);
+            } else if (String(savedFilterTobeDeleted) === String(currentSavedFilterData?.id)) {
+                removeSavedFilter();
+            }
+            setIsDeleteSQDialogVisible(false);
+            setTimeout(() => {
+                setSavedFilterFetchDataRefreshKey(prev => prev + 1)
+            }, 500)
+        } catch (error: any) {
+            const errorMessage = error?.data?.message || error?.data?.error || error?.message || ERROR_MESSAGES.SOMETHING_WRONG;
+            dispatch(showToast({
+                severity: "error",
+                summary: ERROR_MESSAGES.DELETE_FAIELD,
+                detail: errorMessage,
+            }));
         }
-        setIsDeleteSQDialogVisible(false);
-        setTimeout(() => {
-            setSavedFilterFetchDataRefreshKey(prev => prev + 1)
-        }, 500)
     }
     const handleSaveFilter = async (formValues: any) => {
         setShowSaveFilterPopup(false)
@@ -1411,13 +1547,20 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 formData.append("userId", user?.id);
 
                 await updateEntity({ id: +formValues.id, data: formData }).unwrap();
-
-                setSearchChips([]);
-                setSearchFilter(null);
-                setFilterRules(initialState);
-                setCustomFilter(null)
-                setPredefinedSearchChip(null);
-                setPredefinedSearchBaseFilter(null);
+                dispatch(showToast({
+                    severity: "success",
+                    summary: ERROR_MESSAGES.SAVED_FILTER_UPDATED,
+                    detail: ERROR_MESSAGES.SAVED_FILTER_UPDATED_SUCCESSFULLY,
+                }));
+
+                if (!allowMultipleSavedFilters) {
+                    setSearchChips([]);
+                    setSearchFilter(null);
+                    setFilterRules(initialState);
+                    setCustomFilter(null)
+                    setPredefinedSearchChip(null);
+                    setPredefinedSearchBaseFilter(null);
+                }
                 // Apply the rename immediately, both to the active filter and to
                 // the cached list — otherwise the list still holds the pre-rename
                 // entry, which wins the id-based lookup the next time saved-filter
@@ -1427,7 +1570,17 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 setSavedFilters((prev) => prev.map((f: any) => String(f?.id) === String(formValues.id) ? { ...f, ...savedFilterRecord } : f));
                 setCurrentSavedFilterData(savedFilterRecord);
                 setCurrentSavedFilterQuery(filterJson);
-                persistActiveSavedFilter(savedFilterRecord, filterJson, currentSavedFilterVariables);
+                if (allowMultipleSavedFilters) {
+                    const nextItems = activeSavedFilters.map((item: any) =>
+                        getSavedFilterKey(item.data) === getSavedFilterKey(savedFilterRecord)
+                            ? { data: savedFilterRecord, query: filterJson, variables: currentSavedFilterVariables }
+                            : item
+                    );
+                    setActiveSavedFilters(nextItems);
+                    persistActiveSavedFilters(nextItems);
+                } else {
+                    persistActiveSavedFilter(savedFilterRecord, filterJson, currentSavedFilterVariables);
+                }
                 setHasSearched(true);
                 setRefreshKey((prev) => prev + 1);
             } else {
@@ -1441,6 +1594,11 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 formData.append("isPrivate", formValues.isPrivate);
                 formData.append("userId", user?.id);
                 const result = await createEntity(formData).unwrap();
+                dispatch(showToast({
+                    severity: "success",
+                    summary: ERROR_MESSAGES.SAVED_FILTER_CREATED,
+                    detail: ERROR_MESSAGES.SAVED_FILTER_CREATED_SUCCESSFULLY,
+                }));
 
                 setSearchChips([]);
                 setSearchFilter(null);
@@ -1450,17 +1608,31 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                 setPredefinedSearchBaseFilter(null);
                 // The custom filter just became this saved filter — apply it, and
                 // seed the cached list with it, immediately (see rename branch above).
+                // A newly created saved filter replaces any other active filters/saved
+                // filters rather than joining them — only applying an existing saved
+                // filter is additive when allowMultipleSavedFilters is on.
                 const savedFilterRecord = { id: result.data.id, name: formValues.name, isPrivate: formValues.isPrivate, filterQueryJson: JSON.stringify(filterJson, null, 2) };
                 setSavedFilters((prev) => [savedFilterRecord, ...prev]);
                 setCurrentSavedFilterData(savedFilterRecord);
                 setCurrentSavedFilterQuery(filterJson);
                 setCurrentSavedFilterVariables({});
-                persistActiveSavedFilter(savedFilterRecord, filterJson, {});
+                if (allowMultipleSavedFilters) {
+                    const nextItems = [{ data: savedFilterRecord, query: filterJson, variables: {} }];
+                    setActiveSavedFilters(nextItems);
+                    persistActiveSavedFilters(nextItems);
+                } else {
+                    persistActiveSavedFilter(savedFilterRecord, filterJson, {});
+                }
                 setHasSearched(true);
                 setRefreshKey((prev) => prev + 1);
             }
-        } catch (error) {
-
+        } catch (error: any) {
+            const errorMessage = error?.data?.message || error?.data?.error || error?.message || ERROR_MESSAGES.SOMETHING_WRONG;
+            dispatch(showToast({
+                severity: "error",
+                summary: ERROR_MESSAGES.ERROR,
+                detail: errorMessage,
+            }));
         }
     }
 
@@ -1553,6 +1725,28 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
             return false;
         }
 
+        if (allowMultipleSavedFilters) {
+            const key = getSavedFilterKey(savedfilter);
+            const nextItem = { data: savedfilter, query: filterJson, variables };
+            const existingItem = activeSavedFilters.find((item: any) => getSavedFilterKey(item.data) === key);
+            if (existingItem && areFilterStateValuesEqual(existingItem.query, filterJson) && areFilterStateValuesEqual(existingItem.variables, variables)) {
+                return true;
+            }
+            const nextItems = existingItem
+                ? activeSavedFilters.map((item: any) => getSavedFilterKey(item.data) === key ? nextItem : item)
+                : [...activeSavedFilters, nextItem];
+            setActiveSavedFilters(nextItems);
+            setCurrentSavedFilterData(savedfilter);
+            setCurrentSavedFilterQuery(filterJson);
+            setCurrentSavedFilterVariables(variables);
+            setEditingSavedFilterKey(null);
+            persistActiveSavedFilters(nextItems);
+            setShowOverlay(false);
+            setHasSearched(true);
+            setRefreshKey((prev) => prev + 1);
+            return true;
+        }
+
         // 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.
@@ -1589,6 +1783,19 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     }
 
     const removeSavedFilter = () => {
+        if (allowMultipleSavedFilters) {
+            const key = getSavedFilterKey(currentSavedFilterData);
+            const nextItems = activeSavedFilters.filter((item: any) => getSavedFilterKey(item.data) !== key);
+            setActiveSavedFilters(nextItems);
+            setCurrentSavedFilterData(null);
+            setCurrentSavedFilterQuery(null);
+            setCurrentSavedFilterVariables({});
+            setEditingSavedFilterKey(null);
+            persistActiveSavedFilters(nextItems);
+            setHasSearched(true);
+            setRefreshKey((prev) => prev + 1);
+            return;
+        }
         clearActiveSavedFilter();
     }
 
@@ -1698,14 +1905,35 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const managedChipItems = useMemo<ManagedChipItem[]>(() => {
         const items: ManagedChipItem[] = [];
 
-        if (currentSavedFilterData?.name) {
-            items.push({
-                id: "saved-filter",
-                type: "saved",
-                label: `Saved: ${currentSavedFilterData.name}`,
-                onRemove: () => removeSavedFilter(),
-            });
-        }
+        const savedItems = allowMultipleSavedFilters
+            ? activeSavedFilters
+            : (currentSavedFilterData?.name ? [{ data: currentSavedFilterData }] : []);
+        savedItems.forEach((item: any) => {
+            if (item.data?.name) {
+                items.push({
+                    id: `saved-filter:${getSavedFilterKey(item.data)}`,
+                    type: "saved",
+                    label: `Saved: ${item.data.name}`,
+                    onRemove: () => {
+                        if (!allowMultipleSavedFilters) {
+                            removeSavedFilter();
+                            return;
+                        }
+                        const nextItems = activeSavedFilters.filter((active: any) => getSavedFilterKey(active.data) !== getSavedFilterKey(item.data));
+                        setActiveSavedFilters(nextItems);
+                        if (getSavedFilterKey(currentSavedFilterData) === getSavedFilterKey(item.data)) {
+                            setCurrentSavedFilterData(null);
+                            setCurrentSavedFilterQuery(null);
+                            setCurrentSavedFilterVariables({});
+                        }
+                        persistActiveSavedFilters(nextItems);
+                        setHasSearched(true);
+                        setRefreshKey((prev) => prev + 1);
+                    },
+                    ...(allowMultipleSavedFilters ? { onOpen: () => openSavedCustomFilter(item.data) } : {}),
+                });
+            }
+        });
 
         if (predefinedSearchChip?.name && predefinedSearchChip?.value) {
             items.push({
@@ -1751,6 +1979,8 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
         return items;
     }, [
         currentSavedFilterData,
+        activeSavedFilters,
+        allowMultipleSavedFilters,
         predefinedSearchChip,
         customFilter,
         customRuleCount,
@@ -1987,7 +2217,6 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
     const removePredefinedSearchChip = () => {
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null)
-        setCustomFilter(null);
         setHasSearched(true);
         setRefreshKey((prev) => prev + 1)
     };
@@ -2192,6 +2421,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                             className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
                                                             onMouseDown={(e) => {
                                                                 e.preventDefault();
+                                                                e.stopPropagation();
+                                                            }}
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
                                                                 handlePredefinedSearch(predefinedSearch);
                                                             }}
                                                             onMouseEnter={() => setFocusedIndex(optionIndex)}
@@ -2234,6 +2467,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                         className={`text-color solid-search-overlay-option ${focusedIndex === optionIndex ? "solid-search-overlay-option-active" : ""}`}
                                                         onMouseDown={(e) => {
                                                             e.preventDefault();
+                                                            e.stopPropagation();
+                                                        }}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
                                                             const currentValue = inputValue?.trim();
                                                             if (currentValue) {
                                                                 const values = currentValue.split(",").map((v) => v.trim()).filter((v) => v !== "");
@@ -2317,6 +2554,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, viewType, handle
                                                     key={savedfilter.id}
                                                     savedfilter={savedfilter}
                                                     activeSavedFilterReference={currentSavedFilterData?.systemKey || currentSavedFilterData?.id}
+                                                    activeSavedFilterReferences={allowMultipleSavedFilters ? activeSavedFilters.map((item: any) => getSavedFilterKey(item.data)) : undefined}
                                                     applySavedFilter={applySavedFilter}
                                                     openSavedCustomFilter={openSavedCustomFilter}
                                                     setSavedFilterTobeDeleted={setSavedFilterTobeDeleted}

package/dist/components/core/form/fields/relations/SolidRelationOneToManyField.js

@@ -431,7 +431,7 @@ export var DefaultRelationOneToManyFormViewWidget = function (_a) {
     var formReadonly = (_p = (_o = (_m = solidFormViewMetaData.data.solidView) === null || _m === void 0 ? void 0 : _m.layout) === null || _o === void 0 ? void 0 : _o.attrs) === null || _p === void 0 ? void 0 : _p.readonly;
     return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel != false &&
                 _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldViewLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), listViewParams &&
-                _jsx(SolidListView, __assign({}, listViewParams, { handleAddClickForEmbeddedView: handleAddOrEditClickForEmbeddedView, handleEditClickForEmbeddedView: handleAddOrEditClickForEmbeddedView }), refreshList.toString()), readOnlyPermission !== true && formViewParams &&
+                _jsx(SolidListView, __assign({}, listViewParams, { handleAddClickForEmbeddedView: handleAddOrEditClickForEmbeddedView, handleEditClickForEmbeddedView: handleAddOrEditClickForEmbeddedView }), refreshList.toString()), formViewParams &&
                 _jsx(RenderSolidFormEmbededView, { fieldLayoutInfo: fieldLayoutInfo, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, handlePopupClose: handlePopupClose })] }));
 };
 export var RenderSolidFormEmbededView = function (_a) {