@applica-software-guru/react-admin 1.5.333 → 1.5.334

package/package.json

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

package/src/components/Layout/Sidebar/Drawer.tsx

@@ -1,6 +1,5 @@
+import React, { useCallback, useMemo } from 'react';
 import { Drawer as MUIDrawer, SxProps, useMediaQuery, useTheme } from '@mui/material';
-import { useCallback } from 'react';
-import { isFunction } from 'lodash';
 
 type DrawerProps = {
   sx?: SxProps;
@@ -9,6 +8,7 @@ type DrawerProps = {
   children: React.ReactNode;
   open?: boolean;
   onClose?: () => void;
+  keepMounted?: boolean;
 };
 
 /**
@@ -20,30 +20,32 @@ type DrawerProps = {
  */
 const MAX_WIDTH = 444;
 
-function Drawer(props: DrawerProps) {
-  const { sx, anchor = 'right', variant = 'temporary', open = false, onClose } = props;
+function DrawerComp(props: DrawerProps) {
+  const { sx, anchor = 'right', variant = 'temporary', open = false, onClose, keepMounted = false } = props;
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const anchorPosition = isMobile ? 'bottom' : anchor;
   const handleClose = useCallback(() => {
-    if (isFunction(onClose)) {
-      onClose();
-    }
+    if (onClose) onClose();
   }, [onClose]);
-  const sxProps = {
-    backgroundImage: 'none',
-    boxShadow: '-10px 4px 42px 0px rgba(0, 0, 0, 0.25)',
-    width: {
-      sm: '30%'
-    },
-    maxWidth: {
-      sm: MAX_WIDTH
-    },
-    [theme.breakpoints.down('sm')]: {
-      width: '100% !important',
-      maxWidth: '100% !important'
-    }
-  };
+
+  const sxProps = useMemo(
+    () => ({
+      backgroundImage: 'none',
+      boxShadow: '-10px 4px 42px 0px rgba(0, 0, 0, 0.25)',
+      width: {
+        sm: '30%'
+      },
+      maxWidth: {
+        sm: MAX_WIDTH
+      },
+      [theme.breakpoints.down('sm')]: {
+        width: '100% !important',
+        maxWidth: '100% !important'
+      }
+    }),
+    [theme.breakpoints]
+  );
 
   return (
     <MUIDrawer
@@ -53,10 +55,13 @@ function Drawer(props: DrawerProps) {
       open={open}
       PaperProps={{ sx: { ...sxProps, ...sx } }}
       variant={variant}
+      keepMounted={keepMounted}
     >
       {props.children}
     </MUIDrawer>
   );
 }
 
+const Drawer = React.memo(DrawerComp);
+
 export { Drawer };

package/src/components/ra-inputs/BooleanInput.tsx

@@ -21,6 +21,7 @@ function BooleanInput({ ...props }: BooleanInputProps): JSX.Element {
           },
           '& .MuiSwitch-root': {
             margin: '0 !important',
+            marginRight: `6px !important`,
             // @ts-ignore
             marginTop: props.display === 'legend' ? 0 : `${theme.spacing(1)} !important`
           }

package/src/components/ra-lists/FilterSidebar/ActiveFiltersChips.tsx

@@ -96,7 +96,13 @@ function ActiveFiltersChips(): ReactElement | null {
   const translate = useTranslate();
 
   return filterValues && !isEmpty(filterValues) ? (
-    <Stack flexDirection={isMobile ? 'column' : 'row'} alignItems={'baseline'} gap={2} m={isMobile ? 2 : 0}>
+    <Stack
+      sx={{ backgroundColor: theme.palette.background.paper }}
+      flexDirection={isMobile ? 'column' : 'row'}
+      alignItems={'baseline'}
+      gap={2}
+      p={isMobile ? 2 : 0}
+    >
       <Typography variant="h6" color="secondary" whiteSpace={'nowrap'}>
         {translate('ra.title.active_filters')}
       </Typography>

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

@@ -1,11 +1,11 @@
 import { LoadingButton } from '@/components/@extended';
 import { Box, Button, Stack } from '@mui/material';
 import { useListContext, useResourceContext, useTranslate } from 'ra-core';
-import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ReactElement, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { FilterContext, getFilterFormValues } from 'react-admin';
 import { FormProvider, useForm } from 'react-hook-form';
 import { ReloadOutlined } from '@ant-design/icons';
-import { isEmpty, isEqual, isFunction } from 'lodash';
+import { isEqual, isNull, isUndefined } from 'lodash';
 import { SavedFiltersList } from './SavedFiltersList';
 import { useListViewContext } from '@/components/ra-lists';
 import { Sidebar } from '@/components/Layout/Sidebar';
@@ -41,30 +41,31 @@ function FiltersInput(props: FiltersInputProps): ReactElement {
 
 interface FilterSidebarProps {
   filters?: ReactElement | ReactElement[];
+  keepMounted?: boolean;
 }
 
-function FilterSidebar(props: FilterSidebarProps): ReactElement {
-  const { filters } = props;
+function FilterSidebarComp(props: FilterSidebarProps): ReactElement {
+  const { filters, keepMounted = false } = props;
   const [loading, setLoading] = useState(false);
   const { setSidebarOpen, sidebarOpen } = useListViewContext();
   const { filterValues, setFilters } = useListContext();
   const translate = useTranslate();
-  const form = useForm({
-    defaultValues: filterValues
-  });
-  const { handleSubmit, getValues, reset, watch } = form;
-  const watchValues = watch();
+
   // values containes all the filters values and the default ones
   const values = useMemo(() => {
-    const values: any = {};
-    if (filters) {
-      (Array.isArray(filters) ? filters : [filters]).forEach((filter) => {
-        values[filter.props.source] = filterValues?.[filter.props.source] ?? '';
-      });
-    }
-    return values;
+    if (!filters) return {};
+    return (Array.isArray(filters) ? filters : [filters]).reduce((acc, filter) => {
+      acc[filter.props.source] = filterValues?.[filter.props.source] ?? '';
+      return acc;
+    }, {} as Record<string, any>);
   }, [filters, filterValues]);
 
+  const form = useForm({
+    defaultValues: filterValues,
+    values
+  });
+  const { handleSubmit, getValues, reset } = form;
+
   // Reapply filterValues when the URL changes or a user removes a filter
   useEffect(() => {
     const newValues = getFilterFormValues(getValues(), filterValues);
@@ -80,13 +81,18 @@ function FilterSidebar(props: FilterSidebarProps): ReactElement {
   }, [JSON.stringify(filterValues), filterValues, getValues, reset]);
 
   const closeSidebar = useCallback(() => {
-    if (isFunction(setSidebarOpen)) {
-      setSidebarOpen(false);
-    }
+    if (setSidebarOpen) setSidebarOpen(false);
   }, [setSidebarOpen]);
 
   const onSubmit = React.useCallback(
     (data: any) => {
+      // remove all empty || null || undefined values
+      Object.keys(data).forEach((key) => {
+        // if data[key] is empty, null or undefined, delete it. Some values can be boolean. So please handle it
+        if (isNull(data[key]) || isUndefined(data[key]) || data[key] === '') {
+          delete data[key];
+        }
+      });
       // @ts-ignore
       setFilters(data);
       closeSidebar();
@@ -103,19 +109,11 @@ function FilterSidebar(props: FilterSidebarProps): ReactElement {
   const toggleLoading = useCallback(() => {
     setLoading((prev) => !prev);
     resetAllFields();
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
+    setTimeout(() => setLoading(false), 1000);
   }, [resetAllFields]);
 
-  const isApplyDisabled = useMemo(() => {
-    const currentFormValues = getValues();
-    return isEmpty(values) || isEqual(currentFormValues, values);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [values, getValues, watchValues]);
-
   return (
-    <Sidebar sx={{ height: '100%' }} open={sidebarOpen} onClose={closeSidebar}>
+    <Sidebar sx={{ height: '100%' }} open={sidebarOpen} onClose={closeSidebar} keepMounted={keepMounted}>
       <Sidebar.Header>
         <Sidebar.HeaderText primary={translate('ra.action.add_filter')} />
         <Sidebar.HeaderAction>
@@ -146,13 +144,7 @@ function FilterSidebar(props: FilterSidebarProps): ReactElement {
           >
             {translate('ra.action.close')}
           </Button>
-          <Button
-            fullWidth
-            disabled={isApplyDisabled}
-            variant="contained"
-            color="primary"
-            onClick={handleSubmit(onSubmit)}
-          >
+          <Button fullWidth variant="contained" color="primary" onClick={handleSubmit(onSubmit)}>
             {translate('ra.action.apply_filters')}
           </Button>
         </Stack>
@@ -161,4 +153,6 @@ function FilterSidebar(props: FilterSidebarProps): ReactElement {
   );
 }
 
+const FilterSidebar = memo(FilterSidebarComp);
+
 export { FilterSidebar };

package/src/components/ra-lists/FilterSidebar/FilterSidebarContext.tsx

@@ -24,7 +24,10 @@ function useGetChipValue({ source, value }: ChipItemProps): JSX.Element | null {
   const resource = useResourceContext();
 
   const currentSourceFilter = useMemo(() => {
-    return filters.find((filter) => React.isValidElement(filter) && filter.props?.source === source);
+    return filters.find(
+      (filter) =>
+        React.isValidElement(filter) && (filter.props?.source === source || source?.includes(filter.props?.source))
+    );
   }, [filters, source]);
   const currentSourceFilterProps = useMemo(
     () => (React.isValidElement(currentSourceFilter) ? currentSourceFilter.props : {}),
@@ -39,6 +42,7 @@ function useGetChipValue({ source, value }: ChipItemProps): JSX.Element | null {
 
   const chipProps = {
     ...currentSourceFilterProps,
+    specificSource: source,
     record: { [source]: value },
     value,
     resource

package/src/components/ra-lists/FilterSidebar/SaveFiltersDialog.tsx

@@ -36,7 +36,7 @@ function SelectedFiltersList(): JSX.Element {
       <Typography variant="h6" fontWeight={'bold'} color={'secondary'}>
         {translate('ra.title.selected_filters')}
       </Typography>
-      <List sx={{ bgcolor: 'background.paper', pt: 0 }}>
+      <List sx={{ bgcolor: 'background.paper', pt: 0, overflowY: 'auto', maxHeight: 400 }}>
         {filterValues
           ? Object.entries(filterValues).map(([key, value]) => {
               const lastEntry = Object.entries(filterValues).pop();

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

@@ -1,7 +1,7 @@
 import React, { ReactElement, memo } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { Divider, ToolbarProps, useMediaQuery } from '@mui/material';
+import { Box, Divider, ToolbarProps, useMediaQuery } from '@mui/material';
 import { Exporter, useListContext } from 'ra-core';
 import { FilterContext, FilterForm } from 'react-admin';
 import { ActiveFiltersChips, FilterSidebarContext } from './FilterSidebar';
@@ -13,16 +13,22 @@ interface ListToolbarPropsExtended extends ListToolbarProps {
 
 function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
   const { filters, actions, className, hasFilterSidebar, ...rest } = props;
-  const theme = useTheme();
+  const theme = useTheme() as any;
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const Actions = actions ? React.cloneElement(actions, { ...rest, ...actions.props }) : null;
-  const { filterValues } = useListContext();
+  const { filterValues, data, isLoading } = useListContext();
+  const shouldRenderEmptyList = !isLoading && data && data.length === 0;
 
   return Array.isArray(filters) ? (
     <FilterSidebarContext.Provider value={{ hasFilterSidebar }}>
       <FilterContext.Provider value={filters}>
         {isMobile && hasFilterSidebar ? (
-          <div>
+          <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>
@@ -30,7 +36,7 @@ function ListToolbarComp(props: ListToolbarPropsExtended): ReactElement | null {
                 <ActiveFiltersChips />
               </div>
             ) : null}
-          </div>
+          </Box>
         ) : (
           <Root className={className}>
             {hasFilterSidebar ? <ActiveFiltersChips /> : <FilterForm />}

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

@@ -123,7 +123,8 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
           ? {
               '& .MuiPaper-root': {
                 backgroundColor: 'transparent',
-                border: 'none'
+                border: 'none',
+                borderRadius: 0
               },
               '& .RaList-actions': {
                 border: '1px solid',