@applica-software-guru/react-admin 1.5.296 → 1.5.297

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,iBAAS,0BAA0B,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAiExF;AAED,OAAO,EAAE,0BAA0B,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,iBAAS,0BAA0B,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAqExF;AAED,OAAO,EAAE,0BAA0B,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC"}

package/dist/themes/palette.d.ts

@@ -1,3 +1,4 @@
-declare function Palette(mode: 'light' | 'dark', presetColor: string): any;
+import { ThemeMode } from '../components';
+declare function Palette(mode: ThemeMode, presetColor: string): any;
 export { Palette };
 //# sourceMappingURL=palette.d.ts.map

package/dist/themes/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/themes/palette.ts"],"names":[],"mappings":"AAIA,iBAAS,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,GAAG,CA8DjE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/themes/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,iBAAS,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,GAAG,GAAG,CA8D1D;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/package.json

@@ -106,5 +106,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.296"
+  "version": "1.5.297"
 }

package/src/components/Layout/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import { useLocalStorage } from '@/hooks';
 import { PropsWithChildren, createContext, useContext } from 'react';
 
-type ThemeMode = 'light' | 'dark';
+type ThemeMode = 'light' | 'dark' | 'auto';
 type ThemeOrientation = 'vertical' | 'horizontal';
 
 type ThemeDirection = 'ltr' | 'rtl';

package/src/components/Layout/ThemeToggler.tsx

@@ -1,17 +1,107 @@
 import { HeaderToggleButton } from './Header';
-import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { ThemeMode, useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { usePopoverState } from '@/hooks';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { Popper } from '@mui/base';
+import { ClickAwayListener, List, ListItemButton, Paper, Typography, useTheme } from '@mui/material';
+import { Transitions } from '@/components/@extended';
+import { MainCard } from '@/components/MainCard';
+import { Brightness6 } from '@mui/icons-material';
+import { useCallback } from 'react';
+import { useTranslate } from 'ra-core';
+
+type ThemeModePopoverProps = {
+  open: boolean;
+  anchorEl: HTMLElement | null;
+  handleClose: () => void;
+  theme: any;
+  mode: ThemeMode;
+  toggleThemeMode: (theme: ThemeMode) => void;
+};
+
+function ThemeModePopover({ open, anchorEl, handleClose, theme, mode, toggleThemeMode }: ThemeModePopoverProps) {
+  const translate = useTranslate();
+  return (
+    <Popper placement="bottom-end" open={open} anchorEl={anchorEl} role={undefined} transition disablePortal>
+      {({ TransitionProps }) => (
+        <Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
+          <Paper
+            sx={{
+              boxShadow: theme.customShadows.z1,
+              minWidth: 200,
+              [theme.breakpoints.down('md')]: { maxWidth: 250 },
+              marginTop: 1
+            }}
+          >
+            <ClickAwayListener onClickAway={handleClose}>
+              <MainCard elevation={0} border={false} content={false}>
+                <List>
+                  <ListItemButton selected={mode === 'light'} onClick={() => toggleThemeMode('light')}>
+                    <SunOutlined />
+                    <Typography variant="subtitle1" ml={1}>
+                      {translate('ra.preferences.theme.light')}
+                    </Typography>
+                  </ListItemButton>
+
+                  <ListItemButton selected={mode === 'dark'} onClick={() => toggleThemeMode('dark')}>
+                    <MoonOutlined />
+                    <Typography variant="subtitle1" ml={1}>
+                      {translate('ra.preferences.theme.dark')}
+                    </Typography>
+                  </ListItemButton>
+
+                  <ListItemButton selected={mode === 'auto'} onClick={() => toggleThemeMode('auto')}>
+                    <Brightness6 />
+                    <Typography variant="subtitle1" ml={1} textTransform={'none'}>
+                      {translate('ra.preferences.theme.auto')}
+                    </Typography>
+                  </ListItemButton>
+                </List>
+              </MainCard>
+            </ClickAwayListener>
+          </Paper>
+        </Transitions>
+      )}
+    </Popper>
+  );
+}
 
 function ThemeToggler(): JSX.Element {
+  const theme = useTheme();
   const { mode, setMode } = useThemeConfig();
+  const { open, anchorEl, handleToggle, handleClose } = usePopoverState();
+
+  const toggleThemeMode = useCallback(
+    (theme: ThemeMode) => {
+      setMode(theme);
+    },
+    [setMode]
+  );
+
+  const ThemeIcon = useCallback(() => {
+    switch (mode) {
+      case 'light':
+        return <SunOutlined />;
+      case 'dark':
+        return <MoonOutlined />;
+      default:
+        return <Brightness6 />;
+    }
+  }, [mode]);
+
   return (
-    <HeaderToggleButton
-      value="theme-mode"
-      aria-label="toggle mode"
-      onChange={() => setMode(mode === 'dark' ? 'light' : 'dark')}
-      selected={false}
-    >
-      {mode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
+    <HeaderToggleButton value="theme-mode" aria-label="toggle mode" onClick={handleToggle} selected={false}>
+      <ThemeIcon />
+      {open ? (
+        <ThemeModePopover
+          open={open}
+          anchorEl={anchorEl}
+          handleClose={handleClose}
+          theme={theme}
+          mode={mode}
+          toggleThemeMode={toggleThemeMode}
+        />
+      ) : null}
     </HeaderToggleButton>
   );
 }

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './useMemoizedObject';
 export * from './usePopoverState';
 export * from './useRefDimensions';
 export * from './useResourceTitle';
+export * from './useSystemTheme';

package/src/hooks/useSystemTheme.ts

@@ -0,0 +1,40 @@
+import { ThemeMode, useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * This hook is a listener for system theme changes (when automatic mode theme is enabled).
+ *
+ * @returns {ThemeMode} theme
+ */
+function useSystemTheme(): ThemeMode {
+  const { mode } = useThemeConfig();
+  const colorSchemeMatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+  const [theme, setTheme] = useState<ThemeMode>(() => {
+    return mode === 'auto' ? (colorSchemeMatchMedia.matches ? 'dark' : 'light') : mode;
+  });
+  const previousMode = useRef(theme);
+
+  useEffect(() => {
+    function updateTheme() {
+      const themeType = colorSchemeMatchMedia.matches ? 'dark' : 'light';
+
+      if (themeType !== previousMode.current) {
+        setTheme(themeType);
+        previousMode.current = themeType;
+      }
+    }
+
+    updateTheme();
+
+    const mediaQuery = colorSchemeMatchMedia;
+    mediaQuery.addEventListener('change', updateTheme);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateTheme);
+    };
+  }, [colorSchemeMatchMedia]);
+
+  return theme;
+}
+
+export { useSystemTheme };

package/src/themes/index.tsx

@@ -1,3 +1,4 @@
+import { useSystemTheme } from '@/hooks';
 import { getColors } from './getColors';
 import { getShadow } from './getShadow';
 import { ComponentsOverrides } from './overrides';
@@ -16,8 +17,12 @@ type ThemeCustomizationProps = PropsWithChildren<{ themeOverrides: unknown }>;
 function ThemeCustomizationProvider({ themeOverrides, children }: ThemeCustomizationProps) {
   const _themeConfig = useThemeConfig();
   const { themeDirection, mode, presetColor, fontFamily } = _themeConfig;
+  const systemMode = useSystemTheme();
+  const paletteMode = useMemo(() => (mode === 'auto' ? systemMode : mode), [mode, systemMode]);
 
-  const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);
+  const theme = useMemo(() => {
+    return Palette(paletteMode, presetColor);
+  }, [paletteMode, presetColor]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);

package/src/themes/palette.ts

@@ -1,8 +1,9 @@
+import { ThemeMode } from '@/components';
 import { Theme } from './theme';
 import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
 import { alpha, createTheme } from '@mui/material/styles';
 
-function Palette(mode: 'light' | 'dark', presetColor: string): any {
+function Palette(mode: ThemeMode, presetColor: string): any {
   const colors = mode === 'dark' ? presetDarkPalettes : presetPalettes;
 
   let greyPrimary = [