@applica-software-guru/react-admin 1.5.352 → 1.5.354

package/dist/utils/index.d.ts

@@ -2,5 +2,6 @@ export * from './lang';
 export * from './localStorage';
 export * from './localizedValue';
 export * from './react';
+export * from './sessionStorage';
 export * from './time';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC"}

package/dist/utils/sessionStorage.d.ts

@@ -0,0 +1,16 @@
+type IListener = (value: unknown) => void;
+interface IStorage {
+    get: (key: string) => unknown | null;
+    set: (key: string, value: unknown) => unknown | null;
+    watch: (key: string, callback: IListener) => void;
+    unwatch: (key: string, callback?: IListener) => void;
+}
+declare class SessionStorage implements IStorage {
+    #private;
+    get(key: string): unknown | null;
+    set(key: string, value: unknown): unknown | null;
+    watch(key: string, callback: IListener): void;
+    unwatch(key: string, callback?: IListener | undefined): void;
+}
+export { SessionStorage };
+//# sourceMappingURL=sessionStorage.d.ts.map

package/dist/utils/sessionStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionStorage.d.ts","sourceRoot":"","sources":["../../../src/utils/sessionStorage.ts"],"names":[],"mappings":"AAOA,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAC1C,UAAU,QAAQ;IAChB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD;AAED,cAAM,cAAe,YAAW,QAAQ;;IAOtC,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAUhC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI;IAUhD,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI;IAa7C,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;CAe7D;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/package.json

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

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

@@ -125,7 +125,6 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
     '& .RaList-actions': {
       minHeight: 80,
       alignItems: 'center',
-      padding: theme.spacing(2.5),
       borderTopLeftRadius: `${theme.shape.borderRadius}px`,
       borderTopRightRadius: `${theme.shape.borderRadius}px`,
       borderBottomLeftRadius: 0,

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

@@ -1,7 +1,10 @@
-import { Tab, Tabs } from '@mui/material';
-import { useListContext } from 'react-admin';
-import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Tab, Tabs } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useListContext, useResourceContext } from 'react-admin';
+import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useListViewContext } from './ListViewProvider';
+import { useSessionStorage } from '@/hooks';
+import { useSearchParams } from 'react-router-dom';
 
 type ListTabToolbarConfig = {
   label: string;
@@ -19,14 +22,21 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
   const { tabs = [] } = props;
   const { setFilters, filterValues } = useListContext();
   const defaultTabIndex = useMemo(() => tabs.findIndex((tab) => tab.default) ?? 0, [tabs]);
-  const [currentTab, setCurrentTab] = useState(defaultTabIndex);
-  const initialized = useRef(false);
   const { setCurrentTabKey } = useListViewContext();
+  const resource = useResourceContext();
+  const theme = useTheme();
+
+  const [searchParams, setSearchParams] = useSearchParams();
 
   if (tabs.length > 0 && tabs.some((tab) => !tab.key)) {
     throw new Error('ListTabsToolbar: Each tab must have a unique key.');
   }
 
+  const tabGroupKey = useMemo(() => `${resource.replace(/^entities\//, '')}-tab-group`, [resource]);
+
+  const [currentTab, setCurrentTab] = useSessionStorage(tabGroupKey, defaultTabIndex);
+  const initialized = useRef(false);
+
   const buildFilters = useCallback(
     (index: number, debounce: boolean) => {
       if (setCurrentTabKey) {
@@ -41,28 +51,83 @@ function ListTabsToolbar(props: ListTabsToolbarProps) {
     [filterValues, setFilters, setCurrentTabKey, tabs]
   );
 
+  const updateUrlParam = useCallback(
+    (index: number) => {
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set(tabGroupKey, String(index));
+      setSearchParams(newParams, { replace: true });
+    },
+    [searchParams, setSearchParams, tabGroupKey]
+  );
+
+  useEffect(() => {
+    const param = searchParams.get(tabGroupKey);
+    if (String(param) !== String(currentTab)) {
+      updateUrlParam(Number(currentTab));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterValues]);
+
   useEffect(() => {
     if (!initialized.current) {
-      buildFilters(defaultTabIndex, false);
+      const param = searchParams.get(tabGroupKey);
+      const initialIndex = param != null ? Number(param) : Number(currentTab);
+
+      if (param != null && String(initialIndex) !== String(currentTab)) {
+        setCurrentTab(initialIndex);
+      }
+
+      buildFilters(initialIndex, false);
       initialized.current = true;
     }
-  }, [defaultTabIndex, buildFilters]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, setSearchParams, tabGroupKey, currentTab, setCurrentTab, buildFilters]);
 
   const handleChange = useCallback(
     (_: any, newIndex: number) => {
       setCurrentTab(newIndex);
       buildFilters(newIndex, true);
     },
-    [buildFilters]
+    [buildFilters, setCurrentTab]
   );
 
-  return tabs.length > 0 ? (
-    <Tabs value={currentTab} onChange={handleChange}>
-      {tabs.map((tab) => (
-        <Tab icon={tab.icon} key={tab.label} label={tab.label} />
-      ))}
-    </Tabs>
-  ) : null;
+  return (
+    <Box sx={{ width: '100%' }}>
+      {tabs.length > 0 ? (
+        <Tabs
+          value={Number(currentTab)}
+          onChange={handleChange}
+          allowScrollButtonsMobile
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{
+            width: '100%',
+            '.MuiTabs-scrollButtons.Mui-disabled': {
+              opacity: 0.2
+            }
+          }}
+        >
+          {tabs.map((tab) => (
+            <Tab
+              icon={tab.icon}
+              key={tab.key}
+              label={tab.label}
+              sx={{
+                flex: '0 0 auto',
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                '& .MuiTab-iconWrapper': {
+                  marginRight: theme.spacing(0.5)
+                }
+              }}
+            />
+          ))}
+        </Tabs>
+      ) : null}
+    </Box>
+  );
 }
 
 export { type ListTabToolbarConfig, ListTabsToolbar };

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

@@ -1,3 +1,4 @@
+// ListToolbar.tsx
 import React, { ReactElement, memo } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -6,62 +7,103 @@ import { Exporter, useListContext } from 'ra-core';
 import { FilterContext, FilterForm } from 'react-admin';
 import { ActiveFiltersChips, FilterSidebarContext } from './FilterSidebar';
 import { isEmpty } from 'lodash';
+import { ListTabToolbarConfig, ListTabsToolbar } from './ListTabsToolbar';
 
 interface ListToolbarPropsExtended extends ListToolbarProps {
   hasFilterSidebar?: boolean;
+  tabs?: ListTabToolbarConfig[];
 }
 
 function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
-  const { filters, actions, className, hasFilterSidebar, ...rest } = props;
+  const { filters, actions, className, hasFilterSidebar, tabs, ...rest } = props;
   const theme = useTheme() as any;
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const Actions = actions ? React.cloneElement(actions, { ...rest, ...actions.props }) : null;
   const { filterValues, data, isLoading } = useListContext();
   const shouldRenderEmptyList = !isLoading && data && data.length === 0;
 
+  const hasTabs = tabs && tabs.length > 0;
+
   return Array.isArray(filters) ? (
     <FilterSidebarContext.Provider value={{ hasFilterSidebar }}>
       <FilterContext.Provider value={filters}>
-        {isMobile && hasFilterSidebar ? (
-          <Box
-            sx={{
-              border: isMobile ? (shouldRenderEmptyList ? '1px solid' : 0) : 0,
-              borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800
-            }}
-          >
-            {Actions}
-            {!isEmpty(filterValues) ? (
-              <div>
-                <Divider />
-                <ActiveFiltersChips />
-              </div>
-            ) : null}
+        <Root className={className}>
+          <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2, width: '100%' }}>
+            {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%'
+              }}
+            >
+              {isMobile && hasFilterSidebar ? (
+                <Box
+                  sx={{
+                    border: shouldRenderEmptyList ? '1px solid' : 0,
+                    borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+                    width: '100%'
+                  }}
+                >
+                  {Actions}
+                  {!isEmpty(filterValues) && (
+                    <>
+                      <Divider sx={{ my: 1 }} />
+                      <ActiveFiltersChips />
+                    </>
+                  )}
+                </Box>
+              ) : (
+                <>
+                  {hasFilterSidebar ? <ActiveFiltersChips /> : <FilterForm />}
+                  <Box sx={{ flex: 1 }} />
+                  {Actions}
+                </>
+              )}
+            </Box>
           </Box>
-        ) : (
-          <Root className={className}>
-            {hasFilterSidebar ? <ActiveFiltersChips /> : <FilterForm />}
-            <span />
-            {Actions}
-          </Root>
-        )}
+        </Root>
       </FilterContext.Provider>
     </FilterSidebarContext.Provider>
   ) : (
     <Root className={className}>
-      {filters
-        ? React.cloneElement(filters, {
-            ...rest,
-            context: 'form'
-          })
-        : null}
-      <span />
-      {actions
-        ? React.cloneElement(actions, {
-            ...rest,
-            filters,
-            ...actions.props
-          })
-        : null}
+      <Box sx={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 2, width: '100%' }}>
+        {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%'
+          }}
+        >
+          {filters
+            ? React.cloneElement(filters, {
+                ...rest,
+                context: 'form'
+              })
+            : null}
+          <span />
+          {actions
+            ? React.cloneElement(actions, {
+                ...rest,
+                filters,
+                ...actions.props
+              })
+            : null}
+        </Box>
+      </Box>
     </Root>
   );
 }
@@ -92,6 +134,7 @@ const Root = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'flex-end',
   width: '100%',
+  padding: 0,
   // [theme.breakpoints.down('md')]: {
   //   flexWrap: 'wrap'
   // },

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

@@ -17,7 +17,7 @@ import { ListToolbar } from './ListToolbar';
 import { FilterSidebar } from './FilterSidebar';
 import { MainCard } from '@/components/MainCard';
 import { Empty } from '@/components/ra-lists/Empty';
-import { type ListTabToolbarConfig, ListTabsToolbar } from './ListTabsToolbar';
+import { type ListTabToolbarConfig } from './ListTabsToolbar';
 
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
@@ -65,7 +65,6 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
           backgroundColor: hasAsideSidebar ? theme.palette.background.paper : 'transparent'
         }}
       >
-        {tabs ? <ListTabsToolbar tabs={tabs} /> : null}
         {filters || actions ? (
           <ListToolbar
             className={ListClasses.actions}
@@ -73,6 +72,7 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
             actions={actions}
             hasCreate={hasCreate}
             hasFilterSidebar={hasFilterSidebar}
+            tabs={tabs}
           />
         ) : null}
         {!error && (
@@ -219,6 +219,24 @@ interface ListViewProps {
    */
   tabs?: ListTabToolbarConfig[];
 
+  /**
+   * A unique key to identify the tab group. Used to persist the selected tab in session storage.
+   * Must be stable across renders and unique among different List components.
+   *
+   * @example
+   * import { List, ListTabToolbarConfig } from 'react-admin';
+   * const tabs: ListTabToolbarConfig[] = [
+   *    { label: 'Published', key: 'published', icon: <IconPublished />, filter: { status: 'published' }, default: true },
+   *    { label: 'Drafts', key: 'drafts', icon: <IconDrafts />, filter: { status: 'draft' } },
+   * ];
+   *  const PostList = () => (
+   *    <List tabs={tabs} tabGroupKey="post-list-tabs">
+   *        ...
+   *    </List>
+   *  );
+   */
+  tabGroupKey?: string;
+
   /**
    * The actions to display in the toolbar. defaults to Filter + Create + Export.
    *

package/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './useMemoizedObject';
 export * from './usePopoverState';
 export * from './useRefDimensions';
 export * from './useResourceTitle';
+export * from './useSessionStorage';
 export * from './useSystemTheme';
 export * from './useUuid';

package/src/hooks/useLocalStorage.tsx

@@ -16,6 +16,32 @@ function buildSetter(key: string, currentValue: unknown, callback: ISetter): ISe
   };
 }
 
+/**
+ * React hook for synchronizing a state value with browser LocalStorage.
+ *
+ * This hook provides a stateful value and a setter function, similar to `useState`,
+ * but persists the value in LocalStorage under the specified key. The value is
+ * automatically updated when LocalStorage changes (including from other tabs/windows).
+ *
+ * Use this hook only when you need to persist state across sessions or tabs.
+ * If you only need to share state within a single session, consider using `useSessionStorage`
+ *
+ * Example:
+ * ```tsx
+ * const [value, setValue] = useLocalStorage('myKey', 'defaultValue');
+ *
+ * // Read the value
+ * console.log(value);
+ *
+ * // Update the value (persists to LocalStorage)
+ * setValue('newValue');
+ * ```
+ *
+ * @param key - The LocalStorage key to store the value under. Must be a non-empty string.
+ * @param defaultValue - The default value to use if the key does not exist in LocalStorage.
+ * @returns A tuple containing the current value and a setter function to update it.
+ *
+ */
 function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
   yup.string().required().validateSync(key);
   const [state, setState] = useState(localStorageInstance.get(key) ?? defaultValue);

package/src/hooks/useSessionStorage.tsx

@@ -0,0 +1,74 @@
+import { SessionStorage } from '@/utils';
+import _ from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+import * as yup from 'yup';
+
+const sessionStorageInstance = new SessionStorage();
+
+type ISetter = (newValue: unknown) => unknown;
+
+function buildSetter(key: string, currentValue: unknown, callback: ISetter): ISetter {
+  return function (newValue: unknown) {
+    const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
+    sessionStorageInstance.set(key, updatedValue);
+    callback(updatedValue);
+    return updatedValue;
+  };
+}
+
+/**
+ * React hook for synchronizing a state value with browser SessionStorage.
+ *
+ * This hook provides a stateful value and a setter function, similar to `useState`,
+ * but persists the value in SessionStorage under the specified key across the same session.
+ *
+ * Use this hook only when you need to persist state across tabs within the same session.
+ * If you need to persist state across sessions, consider using `useLocalStorage`
+ * instead.
+ *
+ * Example:
+ * ```tsx
+ * const [value, setValue] = useSessionStorage('myKey', 'defaultValue');
+ *
+ * // Read the value
+ * console.log(value);
+ *
+ * // Update the value (persists to SessionStorage)
+ * setValue('newValue');
+ * ```
+ *
+ * @param key - The SessionStorage key to store the value under. Must be a non-empty string.
+ * @param defaultValue - The default value to use if the key does not exist in SessionStorage.
+ * @returns A tuple containing the current value and a setter function to update it.
+ *
+ */
+function useSessionStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
+  yup.string().required().validateSync(key);
+  const [state, setState] = useState(sessionStorageInstance.get(key) ?? defaultValue);
+  const defaultValueRef = useRef<unknown | undefined>(defaultValue);
+  const storedDefaultValue = _.isEqual(defaultValueRef.current, defaultValue) ? defaultValueRef.current : defaultValue;
+  const setterRef = useRef<{ key: string; value: unknown; setter: ISetter } | undefined>();
+  const storedSetter = setterRef.current;
+
+  useEffect(() => {
+    setState(sessionStorageInstance.get(key) ?? storedDefaultValue);
+  }, [key, storedDefaultValue, setState]);
+
+  useEffect(() => {
+    function listener(value: unknown) {
+      setState(value);
+    }
+    sessionStorageInstance.watch(key, listener);
+    return () => {
+      sessionStorageInstance.unwatch(key, listener);
+    };
+  }, [key, setState]);
+
+  if (key !== storedSetter?.key || !_.isEqual(state, storedSetter?.value)) {
+    setterRef.current = { key, value: state, setter: buildSetter(key, state, setState) };
+  }
+
+  return [state, setterRef.current?.setter ?? _.noop];
+}
+
+export { useSessionStorage };

package/src/utils/index.ts

@@ -2,4 +2,5 @@ export * from './lang';
 export * from './localStorage';
 export * from './localizedValue';
 export * from './react';
+export * from './sessionStorage';
 export * from './time';

package/src/utils/sessionStorage.ts

@@ -0,0 +1,73 @@
+import _ from 'lodash';
+import * as yup from 'yup';
+
+const listenerSchema = yup.mixed().test('function', 'Invalid function', (value) => {
+  return _.isFunction(value);
+});
+
+type IListener = (value: unknown) => void;
+interface IStorage {
+  get: (key: string) => unknown | null;
+  set: (key: string, value: unknown) => unknown | null;
+  watch: (key: string, callback: IListener) => void;
+  unwatch: (key: string, callback?: IListener) => void;
+}
+
+class SessionStorage implements IStorage {
+  #listeners: Array<{ key: string; callback: IListener }> = [];
+
+  #canAccessSessionStorage(): boolean {
+    return typeof window !== 'undefined';
+  }
+
+  get(key: string): unknown | null {
+    yup.string().required().validateSync(key);
+    if (!this.#canAccessSessionStorage()) {
+      return null;
+    } else {
+      const value = sessionStorage.getItem(key);
+      return _.isNil(value) ? null : JSON.parse(value);
+    }
+  }
+
+  set(key: string, value: unknown): unknown | null {
+    yup.string().required().validateSync(key);
+    if (this.#canAccessSessionStorage()) {
+      sessionStorage.setItem(key, JSON.stringify(value));
+      return value;
+    } else {
+      return null;
+    }
+  }
+
+  watch(key: string, callback: IListener): void {
+    yup.string().required().validateSync(key);
+    listenerSchema.validateSync(callback);
+    if (this.#canAccessSessionStorage()) {
+      this.#listeners.push({ key: key, callback: callback });
+      window.addEventListener('storage', (e) => {
+        if (e.storageArea === sessionStorage && e.key === key) {
+          callback(this.get(key));
+        }
+      });
+    }
+  }
+
+  unwatch(key: string, callback?: IListener | undefined): void {
+    yup.string().required().validateSync(key);
+    listenerSchema.optional().default(_.identity).validateSync(callback);
+    if (this.#canAccessSessionStorage()) {
+      if (callback !== undefined) {
+        this.#listeners = _.reject(this.#listeners, (listener) => {
+          return listener.key === key && listener.callback === callback;
+        });
+      } else {
+        this.#listeners = _.reject(this.#listeners, (listener) => {
+          return listener.key === key;
+        });
+      }
+    }
+  }
+}
+
+export { SessionStorage };