@applica-software-guru/react-admin 1.3.151 → 1.3.153

package/dist/utils/localizedValue.d.ts

@@ -1,11 +1,18 @@
+type ILocale = {
+    name: string;
+    locale: string;
+};
 type ILocalizedValue<T> = {
     [key: string]: T;
 };
-declare function localizedValueHasAllLocales<T>(value?: ILocalizedValue<T>, locales?: Array<{
-    name: string;
-    locale: string;
-}>, options?: {
+declare function localizedValueHasAllLocales<T>(value?: ILocalizedValue<T>, locales?: Array<ILocale>, options?: {
     isEmpty?: (v: T) => boolean;
 }): boolean;
-export { localizedValueHasAllLocales };
+type IGetLocalizedValueOptions = {
+    fallback?: boolean;
+    fallbackLocales?: Array<string>;
+};
+declare function getLocalizedValue<T>(value: ILocalizedValue<T>, locale: string, options?: IGetLocalizedValueOptions): T | undefined;
+export type { ILocalizedValue, IGetLocalizedValueOptions };
+export { localizedValueHasAllLocales, getLocalizedValue };
 //# sourceMappingURL=localizedValue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"localizedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/localizedValue.ts"],"names":[],"mappings":"AACA,KAAK,eAAe,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,CAAC;AAE/C,iBAAS,2BAA2B,CAAC,CAAC,EACpC,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAM,EACrD,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAIT;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}
+{"version":3,"file":"localizedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/localizedValue.ts"],"names":[],"mappings":"AACA,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,KAAK,eAAe,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,CAAC;AAE/C,iBAAS,2BAA2B,CAAC,CAAC,EACpC,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC,OAAO,CAAM,EAC5B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAIT;AAED,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AACF,iBAAS,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,yBAAyB,GAAG,CAAC,GAAG,SAAS,CAwB3H;AAED,YAAY,EAAE,eAAe,EAAE,yBAAyB,EAAE,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.151",
+  "version": "1.3.153",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/Layout/Header/Buttons/HeaderButton.tsx

@@ -0,0 +1,13 @@
+import { Button, ButtonProps } from '@mui/material';
+import { useSx } from '../../../../hooks';
+import { ForwardedRef, forwardRef } from 'react';
+
+type IHeaderButtonProps = Omit<ButtonProps, 'color' | 'variant' | 'size'>;
+
+const HeaderButton = forwardRef(function HeaderButton(props: IHeaderButtonProps, ref: ForwardedRef<HTMLButtonElement> | null) {
+  const sx = useSx(props, { color: 'text.primary' }, { defaults: true });
+
+  return <Button ref={ref} {...props} color="secondary" variant="text" sx={sx} />;
+});
+
+export { HeaderButton };

package/src/components/Layout/Header/Buttons/HeaderIconButton.tsx

@@ -0,0 +1,22 @@
+import { ButtonProps, IconButtonProps } from '@mui/material';
+import { IconButton } from '../../../@extended';
+import { useSx } from '../../../../hooks';
+import { ForwardedRef, forwardRef } from 'react';
+
+type IHeaderIconButtonProps = Omit<IconButtonProps & ButtonProps, 'color' | 'variant' | 'size'>;
+
+const HeaderIconButton = forwardRef(function HeaderIconButton(props: IHeaderIconButtonProps, ref: ForwardedRef<HTMLButtonElement> | null) {
+  const sx = useSx(
+    props,
+    {
+      color: 'text.primary'
+    },
+    { defaults: true }
+  );
+  return (
+    // @ts-ignore
+    <IconButton ref={ref} {...props} color="secondary" variant="text" sx={sx} />
+  );
+});
+
+export { HeaderIconButton };

package/src/components/Layout/Header/Buttons/HeaderToggleButton.tsx

@@ -0,0 +1,23 @@
+import { ToggleButton, ToggleButtonProps } from '@mui/material';
+import { ForwardedRef, forwardRef } from 'react';
+import { useSx } from '../../../../hooks';
+
+type IHeaderToggleButtonProps = Omit<ToggleButtonProps, 'color' | 'size'>;
+
+const HeaderToggleButton = forwardRef(function HeaderToggleButton(props: IHeaderToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+  const sx = useSx(
+    props,
+    {
+      color: 'text.primary',
+      borderStyle: 'none',
+      padding: 1,
+      fontSize: '1.5rem',
+      width: 36,
+      height: 36
+    },
+    { defaults: true }
+  );
+  return <ToggleButton ref={ref} {...props} color="secondary" sx={sx} />;
+});
+
+export { HeaderToggleButton };

package/src/components/Layout/Header/Buttons/index.ts

@@ -0,0 +1,3 @@
+export * from './HeaderButton';
+export * from './HeaderIconButton';
+export * from './HeaderToggleButton';

package/src/components/Layout/Header/DrawerToggle.tsx

@@ -1,27 +1,18 @@
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import { IconButton } from '../../@extended';
-import { useLayoutDrawerState, useLayoutThemeState } from '../Provider';
+import { useLayoutDrawerState } from '../Provider';
+import { HeaderToggleButton } from './Buttons';
+
+const buttonSx = {
+  ml: { xs: 0, lg: -2 }
+};
 
 function DrawerToggle() {
-  const { iconColor, iconColorOpen } = useLayoutThemeState(),
-    { open, handleDrawerToggle } = useLayoutDrawerState();
+  const { open, handleDrawerToggle } = useLayoutDrawerState();
 
   return (
-    //@ts-ignore
-    <IconButton
-      aria-label="open drawer"
-      onClick={handleDrawerToggle}
-      edge="start"
-      color="secondary"
-      variant="light"
-      sx={{
-        color: 'text.primary',
-        bgcolor: open ? iconColorOpen : iconColor,
-        ml: { xs: 0, lg: -2 }
-      }}
-    >
+    <HeaderToggleButton value="drawer" aria-label="open drawer" sx={buttonSx} onChange={handleDrawerToggle} selected={open}>
       {!open ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-    </IconButton>
+    </HeaderToggleButton>
   );
 }
 

package/src/components/Layout/Header/Notification/Notification.tsx

@@ -1,74 +1,62 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { useLayoutMediaState, useLayoutNotificationsState } from '../../Provider';
+import { HeaderToggleButton } from '../Buttons';
+import { useGetList, useTranslate } from 'ra-core';
+import { HeaderNotificationItem, INotification } from './NotificationItem';
+import { useEffect, useState } from 'react';
 import {
   Badge,
-  Box,
   ClickAwayListener,
-  Divider,
-  List,
-  ListItemButton,
-  ListItemText,
   Paper,
   Popper,
+  useTheme,
   Tooltip,
-  Typography,
-  useTheme
+  List,
+  Divider,
+  ListItemButton,
+  ListItemText,
+  Typography
 } from '@mui/material';
-import { useLayoutMediaState, useLayoutNotificationsState, useLayoutThemeState } from '../../Provider';
+import { usePopoverState } from '../../../../hooks';
 import { IconButton, Transitions } from '../../../@extended';
-import { BellOutlined, CheckCircleOutlined } from '@ant-design/icons';
-import { useGetList, useTranslate } from 'ra-core';
 import MainCard from '../../../MainCard';
-import { HeaderNotificationItem, INotification } from './NotificationItem';
 import { Link } from 'react-router-dom';
 
-const avatarSX = {
+const avatarSx = {
   width: 36,
   height: 36,
   fontSize: '1rem'
 };
 
-const actionSX = {
+const actionSx = {
   mt: '6px',
   ml: 1,
   top: 'auto',
   right: 'auto',
   alignSelf: 'flex-start',
-
   transform: 'none'
 };
 
 function HeaderNotification() {
   const { enable } = useLayoutNotificationsState();
-
   return enable ? <HeaderNotificationButton /> : null;
 }
 
 function HeaderNotificationButton() {
-  const theme = useTheme(),
-    anchorRef = useRef(),
-    translate = useTranslate(),
-    { resource } = useLayoutNotificationsState(),
+  const translate = useTranslate(),
+    theme = useTheme(),
     { downMd } = useLayoutMediaState(),
-    { iconColor, iconColorOpen } = useLayoutThemeState(),
-    [notificationOpen, setNotificationOpen] = useState(false),
+    { resource } = useLayoutNotificationsState(),
     [notifications, setNotifications] = useState<Array<INotification>>([]),
-    read = notifications.filter((item) => item.readed === null).length,
-    handleToggle = useCallback(() => setNotificationOpen(!notificationOpen), [notificationOpen]),
-    handleClose = useCallback(() => {
-      //@ts-ignore
-      if (anchorRef.current && anchorRef.current.contains(event.target)) {
-        return;
-      }
-
-      setNotificationOpen(false);
-    }, [anchorRef.current, setNotificationOpen]),
     { data, isLoading } = useGetList<INotification>(resource, {
       pagination: { page: 1, perPage: 25 },
       sort: { field: 'created', order: 'DESC' },
       filter: {
         readed: false
       }
-    });
+    }),
+    read = notifications.filter((item) => item.readed === null).length,
+    { open, anchorEl, handleClose, handleToggle } = usePopoverState();
 
   useEffect(() => {
     if (!isLoading && data) {
@@ -77,26 +65,16 @@ function HeaderNotificationButton() {
   }, [data, isLoading]);
 
   return (
-    <Box sx={{ flexShrink: 0 }}>
-      {/*@ts-ignore*/}
-      <IconButton
-        color="secondary"
-        variant="light"
-        sx={{ color: 'text.primary', bgcolor: notificationOpen ? iconColorOpen : iconColor }}
-        aria-label="open profile"
-        ref={anchorRef}
-        aria-controls={notificationOpen ? 'profile-grow' : undefined}
-        aria-haspopup="true"
-        onClick={handleToggle}
-      >
+    <>
+      <HeaderToggleButton value="notifications" selected={open} onChange={handleToggle}>
         <Badge badgeContent={read} color="primary">
           <BellOutlined />
         </Badge>
-      </IconButton>
+      </HeaderToggleButton>
       <Popper
         placement={downMd ? 'bottom' : 'bottom-end'}
-        open={notificationOpen}
-        anchorEl={anchorRef.current}
+        open={open}
+        anchorEl={anchorEl}
         role={undefined}
         transition
         disablePortal
@@ -152,8 +130,8 @@ function HeaderNotificationButton() {
                       '& .MuiListItemButton-root': {
                         py: 0.5,
                         '&.Mui-selected': { bgcolor: 'grey.50', color: 'text.primary' },
-                        '& .MuiAvatar-root': avatarSX,
-                        '& .MuiListItemSecondaryAction-root': { ...actionSX, position: 'relative' }
+                        '& .MuiAvatar-root': avatarSx,
+                        '& .MuiListItemSecondaryAction-root': { ...actionSx, position: 'relative' }
                       },
                       maxHeight: 'calc(100vh - 240px)',
                       overflow: 'auto'
@@ -164,12 +142,11 @@ function HeaderNotificationButton() {
                         key={item.id}
                         selected={read > 0}
                         notification={item}
-                        onClick={handleToggle}
+                        onClick={handleClose}
                         divider={index < notifications.length - 1}
                       />
                     ))}
                   </List>
-                  <Divider />
                   {/*@ts-ignore*/}
                   <ListItemButton
                     sx={{ textAlign: 'center', py: `${12}px !important` }}
@@ -185,13 +162,14 @@ function HeaderNotificationButton() {
                       }
                     />
                   </ListItemButton>
+                  <Divider />
                 </MainCard>
               </ClickAwayListener>
             </Paper>
           </Transitions>
         )}
       </Popper>
-    </Box>
+    </>
   );
 }
 

package/src/components/Layout/Header/Profile/{Profile.jsx → Profile.tsx}

@@ -1,108 +1,46 @@
+import { CardContent, ClickAwayListener, Grid, List, Paper, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import { HeaderToggleButton } from '../Buttons';
 import { Avatar, IconButton, Transitions } from '../../../@extended';
-import {
-  Box,
-  ButtonBase,
-  CardContent,
-  ClickAwayListener,
-  Grid,
-  List,
-  Paper,
-  Popper,
-  Stack,
-  Tooltip,
-  Typography,
-  useTheme
-} from '@mui/material';
-import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
-import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'react-admin';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { LogoutOutlined } from '@ant-design/icons';
+import { useAuthProvider, useDataProvider, useGetIdentity, useLogout } from 'ra-core';
+import { useCallback, useEffect, useState } from 'react';
+import { usePopoverState } from '../../../../hooks';
+import { Popper } from '@mui/base';
 import MainCard from '../../../MainCard';
-import PropTypes from 'prop-types';
-
-function TabPanel({ children, value, index, ...other }) {
-  return (
-    <div role="tabpanel" hidden={value !== index} id={`profile-tabpanel-${index}`} aria-labelledby={`profile-tab-${index}`} {...other}>
-      {value === index && children}
-    </div>
-  );
-}
-
-TabPanel.propTypes = {
-  children: PropTypes.node,
-  index: PropTypes.any.isRequired,
-  value: PropTypes.any.isRequired
-};
-
-const Profile = () => {
-  const theme = useTheme();
-
-  const { identity } = useGetIdentity();
-  const hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '';
-  const anchorRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
+import { LogoutOutlined } from '@ant-design/icons';
+import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const logout = useLogout();
+function Profile() {
+  const theme = useTheme(),
+    dataProvider = useDataProvider(),
+    authProvider = useAuthProvider(),
+    { identity } = useGetIdentity(),
+    hasProfilePic = identity !== undefined && identity.image && identity.image !== null && identity.image !== '',
+    [profileImage, setProfileImage] = useState<string | null>(null),
+    { open, anchorEl, handleToggle, handleClose } = usePopoverState(),
+    logout = useLogout(),
+    handleLogout = useCallback(() => {
+      logout();
+    }, [authProvider, logout]);
 
-  const dataProvider = useDataProvider();
-  const authProvider = useAuthProvider();
-  const handleLogout = useCallback(() => {
-    logout();
-  }, [authProvider, logout]);
-  const [profileImage, setProfileImage] = useState(null);
   useEffect(() => {
-    if (!hasProfilePic) {
-      return;
+    if (hasProfilePic) {
+      dataProvider.getFile('/profile/me/image').then((image: string) => setProfileImage(image));
     }
-    async function fetchProfileImage() {
-      var image = await dataProvider.getFile('/profile/me/image');
-      setProfileImage(image);
-    }
-    fetchProfileImage();
   }, [dataProvider, hasProfilePic]);
 
   return (
-    <Box sx={{ flexShrink: 0 }}>
-      <ButtonBase
-        sx={{
-          p: 0.25,
-          bgcolor: open ? iconBackColorOpen : 'transparent',
-          borderRadius: 1,
-          '&:hover': {
-            bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
-          },
-          '&:focus-visible': {
-            outline: `2px solid ${theme.palette.secondary.dark}`,
-            outlineOffset: 2
-          }
-        }}
-        aria-label="open profile"
-        ref={anchorRef}
-        aria-controls={open ? 'profile-grow' : undefined}
-        aria-haspopup="true"
-        onClick={handleToggle}
-      >
+    <>
+      <HeaderToggleButton sx={{ p: 0.25, width: 'auto' }} onClick={handleToggle} value="profile" selected={open}>
         <Stack direction="row" spacing={2} alignItems="center" sx={{ p: 0.5 }}>
+          {/* @ts-ignore */}
           <Avatar alt={identity?.name?.toUpperCase()} src={profileImage} size="xs" />
           <Typography variant="subtitle1">{identity?.name}</Typography>
         </Stack>
-      </ButtonBase>
+      </HeaderToggleButton>
       <Popper
         placement="bottom-end"
         open={open}
-        anchorEl={anchorRef.current}
+        anchorEl={anchorEl}
         role={undefined}
         transition
         disablePortal
@@ -118,9 +56,11 @@ const Profile = () => {
         }}
       >
         {({ TransitionProps }) => (
+          /* @ts-ignore */
           <Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
             <Paper
               sx={{
+                // @ts-ignore
                 boxShadow: theme.customShadows.z1,
                 width: 290,
                 minWidth: 240,
@@ -136,17 +76,19 @@ const Profile = () => {
                     <Grid container justifyContent="space-between" alignItems="center">
                       <Grid item>
                         <Stack direction="row" spacing={1.25} alignItems="center">
+                          {/* @ts-ignore */}
                           <Avatar alt="profile user" src={profileImage} sx={{ width: 32, height: 32 }} />
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
                             <Typography variant="body2" color="textSecondary">
-                              {identity?.roles?.map((r) => r.name.replace('ROLE_', '')).join(',')}
+                              {identity?.roles?.map((r: { name: string }) => r.name.replace('ROLE_', '')).join(',')}
                             </Typography>
                           </Stack>
                         </Stack>
                       </Grid>
                       <Grid item>
                         <Tooltip title="Logout">
+                          {/* @ts-ignore */}
                           <IconButton size="large" sx={{ color: 'text.primary' }} onClick={handleLogout}>
                             <LogoutOutlined />
                           </IconButton>
@@ -169,8 +111,8 @@ const Profile = () => {
           </Transitions>
         )}
       </Popper>
-    </Box>
+    </>
   );
-};
+}
 
 export default Profile;

package/src/components/Layout/Header/ResponsiveSection.tsx

@@ -1,53 +1,36 @@
-import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
-import { IconButton, Transitions } from '../../@extended';
-import { useRef, useState, useCallback } from 'react';
+import { AppBar, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
+import { Transitions } from '../../@extended';
 import { MoreOutlined } from '@ant-design/icons';
 import { useTheme } from '@mui/material/styles';
-import { useLayoutMediaState, useLayoutThemeState } from '../Provider';
+import { useLayoutMediaState } from '../Provider';
+import { HeaderToggleButton } from './Buttons';
+import { usePopoverState } from '../../../hooks';
 
 type IResponsiveSectionProps = React.PropsWithChildren;
 
 const ResponsiveSection = (props: IResponsiveSectionProps) => {
   const theme = useTheme(),
     { downMd } = useLayoutMediaState(),
-    { iconColor, iconColorOpen } = useLayoutThemeState(),
-    [open, setOpen] = useState(false),
-    anchorRef = useRef(null),
-    handleToggle = useCallback(() => {
-      setOpen(!open);
-    }, [open]),
-    //@ts-ignore
-    handleClose = useCallback((event) => {
-      //@ts-ignore
-      if (anchorRef.current && anchorRef.current.contains(event.target)) {
-        return;
-      }
-      setOpen(false);
-    }, []);
+    { open, anchorEl, handleToggle, handleClose } = usePopoverState();
 
   return !downMd ? (
     <>{props.children}</>
   ) : (
     <>
-      <Box sx={{ flexShrink: 0 }}>
-        {/*@ts-ignore*/}
-        <IconButton
-          sx={{ color: 'text.primary', bgcolor: open ? iconColorOpen : iconColor }}
-          aria-label="open more menu"
-          ref={anchorRef}
-          aria-controls={open ? 'menu-list-grow' : undefined}
-          aria-haspopup="true"
-          onClick={handleToggle}
-          color="secondary"
-          variant="light"
-        >
-          <MoreOutlined />
-        </IconButton>
-      </Box>
+      {/*@ts-ignore*/}
+      <HeaderToggleButton
+        aria-label="open more menu"
+        aria-controls={open ? 'menu-list-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+        selected={open}
+      >
+        <MoreOutlined />
+      </HeaderToggleButton>
       <Popper
         placement="bottom-end"
         open={open}
-        anchorEl={anchorRef.current}
+        anchorEl={anchorEl}
         role={undefined}
         transition
         disablePortal

package/src/components/Layout/Header/index.ts

@@ -1,4 +1,5 @@
 export * from './AppBarStyled';
+export * from './Buttons';
 export * from './DrawerToggle';
 export * from './Header';
 export * from './Notification';

package/src/hooks/index.jsx

@@ -1,23 +1,14 @@
-import useAppConfig from './useAppConfig';
-import useBreadcrumbs from './useBreadcrumbs';
-import useLocalStorage from './useLocalStorage';
-import useMenu from './useMenu';
-import useMenuConfig from './useMenuConfig';
-import useResourceTitle from './useResourceTitle';
-import useThemeConfig from './useThemeConfig';
-import useTableFormIterator from './useTableFormIterator';
-import useTableFormIteratorItem from './useTableFormIteratorItem';
-export {
-  useAppConfig,
-  useMenu,
-  useBreadcrumbs,
-  useLocalStorage,
-  useThemeConfig,
-  useResourceTitle,
-  useMenuConfig,
-  useTableFormIterator,
-  useTableFormIteratorItem
-};
-export { useSx } from './mui';
-export { useRefDimensions } from './useRefDimensions';
+export { default as useAppConfig } from './useAppConfig';
+export { default as useBreadcrumbs } from './useBreadcrumbs';
+export { useLocalizedValue, useGetLocalizedValue } from './useLocalizedValue';
+export { default as useLocalStorage } from './useLocalStorage';
 export { useMemoizedObject } from './useMemoizedObject';
+export { default as useMenu } from './useMenu';
+export { default as useMenuConfig } from './useMenuConfig';
+export { usePopoverState } from './usePopoverState';
+export { useRefDimensions } from './useRefDimensions';
+export { default as useResourceTitle } from './useResourceTitle';
+export { useSx } from './mui';
+export { default as useTableFormIterator } from './useTableFormIterator';
+export { default as useTableFormIteratorItem } from './useTableFormIteratorItem';
+export { default as useThemeConfig } from './useThemeConfig';

package/src/hooks/mui.ts

@@ -2,12 +2,22 @@ import _ from 'lodash';
 import { SxProps } from '@mui/material';
 import { ComponentProps, useState, useEffect } from 'react';
 
-function useSx(props: ComponentProps<{ sx?: SxProps } & any>, sx: SxProps): SxProps {
-  const _sx = _.merge(
-      _.cloneDeepWith(props?.sx ?? {}, (v) => (_.isFunction(v) ? v : undefined)),
-      sx
-    ),
-    [value, setValue] = useState(_sx);
+type IUseSxOptions = {
+  defaults?: boolean;
+};
+
+function useSx(props: ComponentProps<{ sx?: SxProps } & any>, sx: SxProps, options?: IUseSxOptions): SxProps {
+  const _sx = _.chain(props?.sx ?? {})
+    .cloneDeepWith((v) => (_.isFunction(v) ? v : undefined))
+    .value();
+
+  if (options?.defaults) {
+    _.defaultsDeep(_sx, sx);
+  } else {
+    _.merge(_sx, sx);
+  }
+
+  const [value, setValue] = useState(_sx);
 
   useEffect(() => {
     if (!_.isEqual(value, _sx)) {