@applica-software-guru/react-admin 1.5.355 → 1.5.357

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.355"
+  "version": "1.5.357"
 }

package/src/components/ra-lists/ListTabsToolbar.tsx

@@ -20,7 +20,7 @@ interface ListTabsToolbarProps {
 
 function ListTabsToolbar(props: ListTabsToolbarProps) {
   const { tabs = [] } = props;
-  const { setFilters, filterValues } = useListContext();
+  const { setFilters, filterValues, displayedFilters } = useListContext();
   const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
   const { setCurrentTabKey } = useListViewContext();
   const resource = useResourceContext();
@@ -33,22 +33,59 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
   }
 
   const tabGroupKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-group`, [resource]);
+  const tabFiltersKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-filters`, [resource]);
 
   const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
+  const [tabFilterStates, setTabFilterStates] = useSessionStorage(tabFiltersKey, {});
   const initialized = useRef(false);
 
+  const saveCurrentTabFilters = useCallback(
+    (tabKey: string) => {
+      const currentState = {
+        filterValues: { ...filterValues },
+        displayedFilters: { ...displayedFilters }
+      };
+
+      setTabFilterStates((prev: any) => ({
+        ...prev,
+        [tabKey]: currentState
+      }));
+    },
+    [filterValues, displayedFilters, setTabFilterStates]
+  );
+
+  const restoreTabFilters = useCallback(
+    (tabKey: string, tabFilter: Record<string, any>, debounce: boolean) => {
+      const savedState = (tabFilterStates as any)?.[tabKey];
+
+      if (savedState) {
+        setFilters(savedState.filterValues, savedState.displayedFilters || {}, debounce);
+      } else {
+        const defaultFilters = {
+          ...tabFilter
+        };
+        setFilters(defaultFilters, {}, debounce);
+      }
+    },
+    [tabFilterStates, setFilters]
+  );
+
   const buildFilters = useCallback(
-    (index: number, debounce: boolean) => {
+    (index: number, debounce: boolean, saveCurrentFilters: boolean = true) => {
+      const currentTabKey = tabs[Number(currentTab)]?.key;
+      const newTabKey = tabs[index].key;
+
+      if (saveCurrentFilters && currentTabKey && currentTabKey !== newTabKey) {
+        saveCurrentTabFilters(currentTabKey);
+      }
+
       if (setCurrentTabKey) {
-        setCurrentTabKey(tabs[index].key);
+        setCurrentTabKey(newTabKey);
       }
-      const newFilters = {
-        ...filterValues,
-        ...tabs[index].filter
-      };
-      setFilters(newFilters, {}, debounce);
+
+      restoreTabFilters(newTabKey, tabs[index].filter, debounce);
     },
-    [filterValues, setFilters, setCurrentTabKey, tabs]
+    [tabs, currentTab, saveCurrentTabFilters, setCurrentTabKey, restoreTabFilters]
   );
 
   const updateUrlParam = useCallback(
@@ -77,7 +114,7 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
         setCurrentTab(initialIndex);
       }
 
-      buildFilters(initialIndex, false);
+      buildFilters(initialIndex, false, false);
       initialized.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -86,7 +123,7 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
   const handleChange = useCallback(
     (_: any, newIndex: number) => {
       setCurrentTab(newIndex);
-      buildFilters(newIndex, true);
+      buildFilters(newIndex, true, true);
     },
     [buildFilters, setCurrentTab]
   );

package/src/components/ra-lists/ListToolbar.tsx

@@ -28,43 +28,39 @@ function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
     <FilterSidebarContext.Provider value={{ hasFilterSidebar }}>
       <FilterContext.Provider value={filters}>
         <Root className={className}>
-          <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2, width: '100%' }}>
+          <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 2 }}>
             {tabs ? <ListTabsToolbar tabs={tabs} /> : null}
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                gap: 2,
-                p: hasTabs ? 0 : theme.spacing(2.5),
-                px: theme.spacing(2.5),
-                pb: theme.spacing(2.5),
-                width: '100%'
-              }}
-            >
+            <Box>
               {isMobile && hasFilterSidebar ? (
                 <Box
                   sx={{
-                    border: shouldRenderEmptyList ? '1px solid' : 0,
-                    borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
-                    width: '100%'
+                    border: isMobile ? (shouldRenderEmptyList ? '1px solid' : 0) : 0,
+                    borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800
                   }}
                 >
                   {Actions}
-                  {!isEmpty(filterValues) && (
-                    <>
-                      <Divider sx={{ my: 1 }} />
+                  {!isEmpty(filterValues) ? (
+                    <Box>
+                      <Divider />
                       <ActiveFiltersChips />
-                    </>
-                  )}
+                    </Box>
+                  ) : null}
                 </Box>
               ) : (
-                <>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: isMobile ? 'column' : 'row',
+                    alignItems: isMobile ? 'flex-start' : 'center',
+                    gap: 2,
+                    px: 2.5,
+                    py: 2.5
+                  }}
+                >
                   {hasFilterSidebar ? <ActiveFiltersChips /> : <FilterForm />}
-                  <Box sx={{ flex: 1 }} />
+                  {!isMobile ? <Box sx={{ flex: 1 }} /> : null}
                   {Actions}
-                </>
+                </Box>
               )}
             </Box>
           </Box>