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

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.296"
 }

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/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,