@applica-software-guru/react-admin 1.5.295 → 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.295"
+  "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/components/ra-lists/List.tsx

@@ -2,7 +2,7 @@ import { MainCard } from '@/components/MainCard';
 import { ListView } from '@/components/ra-lists/ListView';
 import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ListProps } from 'react-admin';
 import { Pagination } from '@/components/Pagination/Pagination';
 
@@ -193,10 +193,12 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 }));
 
 function List(props: ListProps): ReactElement {
+  const Wrapper = props.aside ? React.Fragment : MainCard;
+
   return (
-    <MainCard content={false}>
+    <Wrapper {...(!props.aside && { content: false })}>
       <StyledList {...props} pagination={<Pagination />} />
-    </MainCard>
+    </Wrapper>
   );
 }
 

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

@@ -1,14 +1,20 @@
 /* eslint-disable filenames/match-regex */
 import { Error } from '@/components/Layout/Error';
-import { Card } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Card, CardContent } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import clsx from 'clsx';
 import { RaRecord, useListContext } from 'ra-core';
 import { ElementType, ReactElement, ReactNode, cloneElement } from 'react';
 import * as React from 'react';
-import { ListActions as DefaultActions, Pagination as DefaultPagination, Empty, ListToolbar, Title } from 'react-admin';
-
+import {
+  ListActions as DefaultActions,
+  Pagination as DefaultPagination,
+  Empty,
+  ListToolbar,
+  SavedQueriesListClasses,
+  Title
+} from 'react-admin';
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
 const defaultEmpty = <Empty />;
@@ -31,6 +37,8 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     ...rest
   } = props;
   const { defaultTitle, data, error, isLoading, filterValues, resource } = useListContext<RecordType>(props);
+  const theme = useTheme() as any;
+  const isAsideValidElement = React.isValidElement(aside);
 
   if (!children || (!data && isLoading && emptyWhileLoading)) {
     return null;
@@ -38,7 +46,19 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
 
   function renderList() {
     return (
-      <div className={ListClasses.main}>
+      <div
+        className={ListClasses.main}
+        style={{
+          border: isAsideValidElement ? '1px solid' : 'none',
+          borderRadius: isAsideValidElement ? 4 : 0,
+          borderColor: isAsideValidElement
+            ? theme.palette.mode === 'dark'
+              ? theme.palette.divider
+              : theme.palette.grey.A800
+            : 'transparent',
+          backgroundColor: isAsideValidElement ? theme.palette.background.paper : 'transparent'
+        }}
+      >
         {filters || actions ? (
           <ListToolbar className={ListClasses.actions} filters={filters} actions={actions} hasCreate={hasCreate} />
         ) : null}
@@ -77,17 +97,46 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     <Root className={clsx('list-page', className)} {...rest}>
       <Title title={title} defaultTitle={defaultTitle} preferenceKey={`${resource}.list.title`} />
       {shouldRenderEmptyPage ? renderEmpty() : renderList()}
-      {aside}
+      {isAsideValidElement ? <AsideCard aside={aside} /> : null}
     </Root>
   );
 }
 
+interface AsideCardProps {
+  aside: React.ReactElement;
+}
+
+function AsideCard({ aside }: AsideCardProps): ReactElement {
+  const order = (aside?.props as { order?: number })?.order ?? -1;
+  const theme = useTheme() as any;
+
+  return (
+    <Card
+      className={ListClasses.asideCard}
+      sx={{
+        order,
+        mr: order === -1 ? 2 : 0,
+        ml: order !== -1 ? 2 : 0,
+        width: 200,
+        border: '1px solid',
+        borderRadius: 1,
+        borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+        backgroundColor: theme.palette.background.paper,
+        backgroundImage: 'none'
+      }}
+    >
+      <CardContent sx={{ pt: 1 }}>{cloneElement(aside, {})}</CardContent>
+    </Card>
+  );
+}
+
 const PREFIX = 'RaList';
 const ListClasses = {
   main: `${PREFIX}-main`,
   content: `${PREFIX}-content`,
   actions: `${PREFIX}-actions`,
-  noResults: `${PREFIX}-noResults`
+  noResults: `${PREFIX}-noResults`,
+  asideCard: `${PREFIX}-asideCard`
 };
 
 interface ListViewProps {
@@ -356,7 +405,22 @@ const Root = styled('div', {
 
   [`& .${ListClasses.actions}`]: {},
 
-  [`& .${ListClasses.noResults}`]: {}
+  [`& .${ListClasses.noResults}`]: {},
+
+  [`& .${ListClasses.asideCard}`]: {
+    [theme.breakpoints.down('md')]: {
+      display: 'none'
+    },
+    [`& .${SavedQueriesListClasses.floatingIcon}`]: {
+      fontSize: '1.125rem'
+    },
+    [`& .${SavedQueriesListClasses.floatingTooltip}`]: {
+      top: '-1.2em'
+    },
+    '& form': {
+      marginTop: theme.spacing(2)
+    }
+  }
 }));
 
 export { ListView };

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/index.ts

@@ -23,6 +23,9 @@ export {
   EditContextProvider,
   FieldTitle,
   FilterButton,
+  FilterList,
+  FilterListItem,
+  FilterLiveSearch,
   Form,
   FormDataConsumer,
   HttpError,
@@ -37,6 +40,7 @@ export {
   Resource,
   ResourceContextProvider,
   SaveButton,
+  SavedQueriesList,
   SimpleFormIteratorContext,
   SimpleShowLayout,
   SingleFieldList,

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 = [