@applica-software-guru/react-admin 1.4.226 → 1.5.230

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

@@ -1,12 +1,12 @@
+import { TextInput } from '@/components/ra-inputs/TextInput';
 import { TextInputProps, maxLength as maxLengthValidator, useTranslate } from 'react-admin';
 import { useController } from 'react-hook-form';
-import TextInput from './TextInput';
 
-export type SmartTextInputProps = {
+type SmartTextInputProps = {
   maxLength?: number;
 } & TextInputProps;
 
-export function SmartTextInput({ multiline = false, ...props }: SmartTextInputProps): JSX.Element {
+function SmartTextInput({ multiline = false, ...props }: SmartTextInputProps): JSX.Element {
   const translate = useTranslate();
   const validationFn = maxLengthValidator(props?.maxLength, 'app.input.max_length_error');
   const value = useController({ name: props?.source })?.field?.value;
@@ -28,7 +28,10 @@ export function SmartTextInput({ multiline = false, ...props }: SmartTextInputPr
   });
 
   if (props?.maxLength) {
-    helperText = helperText && (helperText as string).length > 0 ? `${usedCharsInfo} - ${translate(helperText as string)}` : usedCharsInfo;
+    helperText =
+      helperText && (helperText as string).length > 0
+        ? `${usedCharsInfo} - ${translate(helperText as string)}`
+        : usedCharsInfo;
   }
 
   return (
@@ -44,4 +47,5 @@ export function SmartTextInput({ multiline = false, ...props }: SmartTextInputPr
   );
 }
 
-export default SmartTextInput;
+export { SmartTextInput };
+export type { SmartTextInputProps };

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

@@ -1,7 +1,7 @@
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
 import { TextInput as RaTextInput, TextInputProps } from 'react-admin';
-import LabeledInput from './LabeledInput';
 
-export function TextInput(props: TextInputProps): JSX.Element {
+function TextInput(props: TextInputProps): JSX.Element {
   return (
     // @ts-ignore
     <LabeledInput {...props}>
@@ -11,4 +11,5 @@ export function TextInput(props: TextInputProps): JSX.Element {
   );
 }
 
-export default TextInput;
+export { TextInput };
+export type { TextInputProps };

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

@@ -1,7 +1,7 @@
-import { parseTime } from '../../utils';
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
+import { parseTime } from '@/utils';
 import { styled } from '@mui/material/styles';
 import { TimeInput as RaTimeInput, TimeInputProps } from 'react-admin';
-import LabeledInput from './LabeledInput';
 
 function defaultFormatter(v: string): string {
   if (!v) {
@@ -23,7 +23,7 @@ const StyledTimeInput = styled(RaTimeInput, { slot: 'root' })(({ label }) => ({
   }
 }));
 
-export function TimeInput({ parse = defaultParser, format = defaultFormatter, ...props }: TimeInputProps): JSX.Element {
+function TimeInput({ parse = defaultParser, format = defaultFormatter, ...props }: TimeInputProps): JSX.Element {
   return (
     // @ts-ignore
     <LabeledInput {...props}>
@@ -33,4 +33,5 @@ export function TimeInput({ parse = defaultParser, format = defaultFormatter, ..
   );
 }
 
-export default TimeInput;
+export { TimeInput };
+export type { TimeInputProps };

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

@@ -1,14 +1,13 @@
+/* eslint-disable filenames/match-regex */
+import { Close as CloseIcon } from '@mui/icons-material';
+import { IconButton, Toolbar, Typography } from '@mui/material';
+import { lighten, styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
 import { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
-import { styled, lighten } from '@mui/material/styles';
 import { TopToolbar } from 'react-admin';
-import { useTranslate, sanitizeListRestProps, useListContext, Identifier } from 'ra-core';
-import CloseIcon from '@mui/icons-material/Close';
-import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
 
-export function BulkActionsToolbar(props: BulkActionsToolbarProps): JSX.Element {
+function BulkActionsToolbar(props: BulkActionsToolbarProps): JSX.Element {
   const { label = 'ra.action.bulk_actions', children, className, ...rest } = props;
   const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
 
@@ -60,16 +59,10 @@ export function BulkActionsToolbar(props: BulkActionsToolbarProps): JSX.Element
     </Root>
   );
 }
-export interface BulkActionsToolbarProps {
-  children?: ReactNode;
-  label?: string;
-  selectedIds?: Identifier[];
-  className?: string;
-}
 
 const PREFIX = 'RaBulkActionsToolbar';
 
-export const BulkActionsToolbarClasses = {
+const BulkActionsToolbarClasses = {
   toolbar: `${PREFIX}-toolbar`,
   topToolbar: `${PREFIX}-topToolbar`,
   buttons: `${PREFIX}-buttons`,
@@ -78,9 +71,16 @@ export const BulkActionsToolbarClasses = {
   icon: `${PREFIX}-icon`
 };
 
+interface BulkActionsToolbarProps {
+  children?: ReactNode;
+  label?: string;
+  selectedIds?: Identifier[];
+  className?: string;
+}
+
 const Root = styled('div', {
   name: PREFIX,
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })(({ theme }) => ({
   position: 'relative',
   [`& .${BulkActionsToolbarClasses.toolbar}`]: {
@@ -90,13 +90,14 @@ const Root = styled('div', {
     zIndex: 3,
     color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.text.primary,
     justifyContent: 'space-between',
-    backgroundColor: theme.palette.mode === 'light' ? lighten(theme.palette.primary.light, 0.8) : theme.palette.primary.dark,
+    backgroundColor:
+      theme.palette.mode === 'light' ? lighten(theme.palette.primary.light, 0.8) : theme.palette.primary.dark,
     minHeight: theme.spacing(6),
     height: theme.spacing(6),
     transform: `translateY(-${theme.spacing(6)})`,
-    transition: `${theme.transitions.create('height')}, ${theme.transitions.create('min-height')}, ${theme.transitions.create(
-      'transform'
-    )}`,
+    transition: `${theme.transitions.create('height')}, ${theme.transitions.create(
+      'min-height'
+    )}, ${theme.transitions.create('transform')}`,
     borderTopLeftRadius: theme.shape.borderRadius,
     borderTopRightRadius: theme.shape.borderRadius
   },
@@ -129,4 +130,5 @@ const Root = styled('div', {
   }
 }));
 
-export default BulkActionsToolbar;
+export { BulkActionsToolbar };
+export type { BulkActionsToolbarProps };

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

@@ -1,7 +1,8 @@
+/* eslint-disable filenames/match-regex */
+import CloseIcon from '@mui/icons-material/Close';
 import { Box, Fab, Fade, List, ListItem, Popover, Theme, useMediaQuery } from '@mui/material';
-import { useListContext, Button } from 'react-admin';
 import * as React from 'react';
-import CloseIcon from '@mui/icons-material/Close';
+import { Button, useListContext } from 'react-admin';
 
 const noSpaceOutside = {
   p: 0,
@@ -14,17 +15,17 @@ const moreSpaceInside = {
   width: '100%'
 };
 
-export function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProps): JSX.Element {
+function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProps): JSX.Element {
   const { children } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
     setAnchorEl(event.currentTarget);
-  };
+  }
 
-  const handleClose = () => {
+  function handleClose() {
     setAnchorEl(null);
-  };
+  }
   const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
   const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
   const open = Boolean(anchorEl) && selectedIds !== undefined && selectedIds.length > 0;
@@ -65,7 +66,12 @@ export function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProp
         >
           <List sx={noSpaceOutside}>
             <ListItem sx={noSpaceOutside}>
-              <Button onClick={handleUnselectAllClick} sx={moreSpaceInside} label="ra.action.unselect" startIcon={<CloseIcon />}>
+              <Button
+                onClick={handleUnselectAllClick}
+                sx={moreSpaceInside}
+                label="ra.action.unselect"
+                startIcon={<CloseIcon />}
+              >
                 <CloseIcon />
               </Button>
             </ListItem>
@@ -89,8 +95,9 @@ export function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProp
   );
 }
 
-export interface BulkFloatingActionsToolbarProps {
+interface BulkFloatingActionsToolbarProps {
   children?: React.ReactNode | React.ReactNode[];
 }
 
-export default BulkFloatingActionsToolbar;
+export { BulkFloatingActionsToolbar };
+export type { BulkFloatingActionsToolbarProps };

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

@@ -1,58 +1,26 @@
+import { BulkActionsToolbar } from '@/components/ra-lists/BulkActionsToolbar';
+import { DatagridContextProvider } from '@/components/ra-lists/Datagrid/DatagridContextProvider';
+import { Table } from '@mui/material';
+import clsx from 'clsx';
+import difference from 'lodash/difference';
+import union from 'lodash/union';
+import { Identifier, sanitizeListRestProps, useListContext } from 'ra-core';
+import { FC, cloneElement, createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import * as React from 'react';
 import {
-  DatagridProps as RaDatagridProps,
+  BulkDeleteButton,
+  DatagridBody,
+  DatagridClasses,
   DatagridHeader,
   DatagridLoading,
-  DatagridBody,
-  PureDatagridBody,
-  BulkDeleteButton,
+  DatagridRoot,
   ListNoResults,
-  DatagridClasses,
-  DatagridRoot
+  PureDatagridBody,
+  DatagridProps as RaDatagridProps
 } from 'react-admin';
-import { cloneElement, createElement, isValidElement, useCallback, useRef, useEffect, FC, useMemo } from 'react';
-import { sanitizeListRestProps, useListContext, Identifier } from 'ra-core';
-import { Table } from '@mui/material';
-import * as React from 'react';
-import BulkActionsToolbar from '../BulkActionsToolbar';
-import clsx from 'clsx';
-import DatagridContextProvider from './DatagridContextProvider';
-import difference from 'lodash/difference';
-import union from 'lodash/union';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
-export type DatagridProps = RaDatagridProps &
-  React.RefAttributes<HTMLTableElement> & {
-    /**
-     * An alternative to bulkActionButtons, to be used when the actions are too complex to be expressed.
-     * In this case you are free to fully control the rendering of the bulk actions toolbar.
-     * @see BulkActionsToolbar
-     * @example <caption>Using the BulkActionsToolbar component</caption>
-     * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
-     * import { BulkDeleteButton } from 'react-admin';
-     *
-     * const PostBulkActionButtons = props => (
-     *    <BulkActionsToolbar {...props}>
-     *       <BulkDeleteButton />
-     *      // add your custom actions here
-     *   </BulkActionsToolbar>
-     * );
-     *
-     * @example <caption>Using BulkFloatingActionsToolbar component</caption>
-     * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
-     * import { BulkDeleteButton } from 'react-admin';
-     *
-     * const PostBulkActionButtons = props => (
-     *   <BulkActionsToolbar {...props}>
-     *      <BulkDeleteButton />
-     *     // add your custom actions here
-     *   </BulkActionsToolbar>
-     * );
-     *
-     */
-    bulkActionsToolbar: React.ReactNode | React.FC | boolean;
-  };
-
 /**
  * The Datagrid component renders a list of records as a table.
  * It is usually used as a child of the <List> and <ReferenceManyField> components.
@@ -131,7 +99,7 @@ export type DatagridProps = RaDatagridProps &
  *     );
  * }
  */
-export const Datagrid = React.forwardRef((props, ref) => {
+const Datagrid = React.forwardRef((props, ref) => {
   const {
     optimized = false,
     body = optimized ? PureDatagridBody : DatagridBody,
@@ -176,7 +144,10 @@ export const Datagrid = React.forwardRef((props, ref) => {
 
       if (event.shiftKey && lastSelectedIndex !== -1) {
         const index = ids.indexOf(id);
-        const idsBetweenSelections = ids.slice(Math.min(lastSelectedIndex, index), Math.max(lastSelectedIndex, index) + 1);
+        const idsBetweenSelections = ids.slice(
+          Math.min(lastSelectedIndex, index),
+          Math.max(lastSelectedIndex, index) + 1
+        );
 
         const newSelectedIds = event.target.checked
           ? union(selectedIds, idsBetweenSelections)
@@ -233,7 +204,9 @@ export const Datagrid = React.forwardRef((props, ref) => {
             total
           })
         ) : bulkActionButtons !== false ? (
-          <BulkActionsToolbar>{isValidElement(bulkActionButtons) ? bulkActionButtons : defaultBulkActionButtons}</BulkActionsToolbar>
+          <BulkActionsToolbar>
+            {isValidElement(bulkActionButtons) ? bulkActionButtons : defaultBulkActionButtons}
+          </BulkActionsToolbar>
         ) : null}
         <div className={DatagridClasses.tableWrapper}>
           <Table ref={ref} className={DatagridClasses.table} size={size} {...sanitizeRestProps(rest)}>
@@ -277,9 +250,42 @@ export const Datagrid = React.forwardRef((props, ref) => {
   );
 }) as FC<DatagridProps>;
 
+type DatagridProps = RaDatagridProps &
+  React.RefAttributes<HTMLTableElement> & {
+    /**
+     * An alternative to bulkActionButtons, to be used when the actions are too complex to be expressed.
+     * In this case you are free to fully control the rendering of the bulk actions toolbar.
+     * @see BulkActionsToolbar
+     * @example <caption>Using the BulkActionsToolbar component</caption>
+     * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
+     * import { BulkDeleteButton } from 'react-admin';
+     *
+     * const PostBulkActionButtons = props => (
+     *    <BulkActionsToolbar {...props}>
+     *       <BulkDeleteButton />
+     *      // add your custom actions here
+     *   </BulkActionsToolbar>
+     * );
+     *
+     * @example <caption>Using BulkFloatingActionsToolbar component</caption>
+     * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
+     * import { BulkDeleteButton } from 'react-admin';
+     *
+     * const PostBulkActionButtons = props => (
+     *   <BulkActionsToolbar {...props}>
+     *      <BulkDeleteButton />
+     *     // add your custom actions here
+     *   </BulkActionsToolbar>
+     * );
+     *
+     */
+    bulkActionsToolbar: React.ReactNode | React.FC | boolean;
+  };
+
 // @ts-ignore
-const createOrCloneElement = (element, props, children) =>
-  isValidElement(element) ? cloneElement(element, props, children) : createElement(element, props, children);
+function createOrCloneElement(element, props, children) {
+  return isValidElement(element) ? cloneElement(element, props, children) : createElement(element, props, children);
+}
 
 const injectedProps = [
   'isRequired',
@@ -294,13 +300,14 @@ const injectedProps = [
 ];
 
 // @ts-ignore
-const sanitizeRestProps = (props) =>
-  Object.keys(sanitizeListRestProps(props))
+function sanitizeRestProps(props) {
+  return Object.keys(sanitizeListRestProps(props))
     .filter((propName) => !injectedProps.includes(propName))
     .reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
-
+}
 Datagrid.displayName = 'Datagrid';
 
 const DefaultEmpty = <ListNoResults />;
 
-export default Datagrid;
+export { Datagrid };
+export type { DatagridProps };

package/src/components/ra-lists/Datagrid/DatagridContext.ts

@@ -1,13 +1,14 @@
-import { createContext } from 'react';
 import { RaRecord } from 'ra-core';
+import { createContext } from 'react';
 
 const DatagridContext = createContext<DatagridContextValue>({});
 
 DatagridContext.displayName = 'DatagridContext';
 
-export type DatagridContextValue = {
-    isRowExpandable?: (record: RaRecord) => boolean;
-    expandSingle?: boolean;
+type DatagridContextValue = {
+  isRowExpandable?: (record: RaRecord) => boolean;
+  expandSingle?: boolean;
 };
 
-export default DatagridContext;
+export { DatagridContext };
+export type { DatagridContextValue };

package/src/components/ra-lists/Datagrid/DatagridContextProvider.tsx

@@ -1,8 +1,10 @@
-import DatagridContext, { DatagridContextValue } from './DatagridContext';
-import React, { ReactElement, ReactNode } from 'react';
+import { DatagridContext, DatagridContextValue } from './DatagridContext';
+import { PropsWithChildren, ReactElement } from 'react';
 
-const DatagridContextProvider = ({ children, value }: { children: ReactNode; value: DatagridContextValue }): ReactElement => (
-  <DatagridContext.Provider value={value}>{children}</DatagridContext.Provider>
-);
+type DatagridContextProviderProps = PropsWithChildren<{ value: DatagridContextValue }>;
 
-export default DatagridContextProvider;
+function DatagridContextProvider({ children, value }: DatagridContextProviderProps): ReactElement {
+  return <DatagridContext.Provider value={value}>{children}</DatagridContext.Provider>;
+}
+export { DatagridContextProvider };
+export type { DatagridContextProviderProps };

package/src/components/ra-lists/Datagrid/index.tsx

@@ -1,6 +1,6 @@
 import { Datagrid as RaDatagrid } from './Datagrid';
-import { DatagridProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { DatagridProps } from 'react-admin';
 
 const StyledDatagrid = styled(RaDatagrid, { slot: 'root' })(({ theme }) => ({
   '& .RaBulkActionsToolbar-toolbar': {
@@ -40,9 +40,9 @@ const StyledDatagrid = styled(RaDatagrid, { slot: 'root' })(({ theme }) => ({
  * It is not meant to be used directly.
  * Thsi version is designed by Applica for Mantis and expose few overrides on css styles based on this theme.
  */
-export function Datagrid(props: DatagridProps): JSX.Element {
+function Datagrid(props: DatagridProps): JSX.Element {
   // @ts-ignore
   return <StyledDatagrid {...props} />;
 }
 
-export default Datagrid;
+export { Datagrid };

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

@@ -1,11 +1,11 @@
-/* eslint-disable camelcase */
+/* eslint-disable filenames/match-regex */
 import { Inbox } from '@mui/icons-material';
-import { styled } from '@mui/material/styles';
 import { Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { useGetResourceLabel, useResourceContext, useResourceDefinition, useTranslate } from 'ra-core';
 import * as React from 'react';
 
-export type EmptyProps = {
+type EmptyProps = {
   /**
    * The actions of the empty page.
    *
@@ -35,7 +35,7 @@ const StyledToolbar = styled('div')(({ theme }) => ({
  * @example
  * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
  */
-export function Empty({ actions, className, ...props }: EmptyProps): JSX.Element {
+function Empty({ actions, className, ...props }: EmptyProps): JSX.Element {
   const { hasCreate } = useResourceDefinition(props);
   const resource = useResourceContext(props);
 
@@ -59,13 +59,13 @@ export function Empty({ actions, className, ...props }: EmptyProps): JSX.Element
             _: emptyMessage
           })}
         </Typography>
-        {hasCreate && (
+        {hasCreate ? (
           <Typography variant="body1">
             {translate(`resources.${resource}.invite`, {
               _: inviteMessage
             })}
           </Typography>
-        )}
+        ) : null}
       </div>
 
       <StyledToolbar className={EmptyClasses.toolbar}>{actions}</StyledToolbar>
@@ -75,7 +75,7 @@ export function Empty({ actions, className, ...props }: EmptyProps): JSX.Element
 
 const PREFIX = 'ApplicaEmpty';
 
-export const EmptyClasses = {
+const EmptyClasses = {
   message: `${PREFIX}-message`,
   icon: `${PREFIX}-icon`,
   toolbar: `${PREFIX}-toolbar`
@@ -83,7 +83,7 @@ export const EmptyClasses = {
 
 const Root = styled('span', {
   name: PREFIX,
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })(({ theme }) => ({
   flex: 1,
   [`& .${EmptyClasses.message}`]: {
@@ -104,4 +104,5 @@ const Root = styled('span', {
   }
 }));
 
-export default Empty;
+export { Empty, EmptyClasses };
+export type { EmptyProps };

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

@@ -1,9 +1,9 @@
+import { MainCard } from '@/components/MainCard';
+import { ListView } from '@/components/ra-lists/ListView';
+import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
-import { ListProps } from 'react-admin';
-import { ListView } from './ListView';
 import { ReactElement } from 'react';
-import { styled } from '@mui/system';
-import MainCard from '../MainCard';
+import { ListProps } from 'react-admin';
 
 /**
  * List page component
@@ -55,7 +55,7 @@ import MainCard from '../MainCard';
  *     </List>
  * );
  */
-const RaList = <RecordType extends RaRecord = any>({
+function RaList<RecordType extends RaRecord = any>({
   debounce,
   disableAuthentication,
   disableSyncWithLocation,
@@ -68,23 +68,25 @@ const RaList = <RecordType extends RaRecord = any>({
   sort,
   storeKey,
   ...rest
-}: ListProps<RecordType>): ReactElement => (
-  <ListBase<RecordType>
-    debounce={debounce}
-    disableAuthentication={disableAuthentication}
-    disableSyncWithLocation={disableSyncWithLocation}
-    exporter={exporter}
-    filter={filter}
-    filterDefaultValues={filterDefaultValues}
-    perPage={perPage}
-    queryOptions={queryOptions}
-    resource={resource}
-    sort={sort}
-    storeKey={storeKey}
-  >
-    <ListView<RecordType> {...rest} />
-  </ListBase>
-);
+}: ListProps<RecordType>): ReactElement {
+  return (
+    <ListBase<RecordType>
+      debounce={debounce}
+      disableAuthentication={disableAuthentication}
+      disableSyncWithLocation={disableSyncWithLocation}
+      exporter={exporter}
+      filter={filter}
+      filterDefaultValues={filterDefaultValues}
+      perPage={perPage}
+      queryOptions={queryOptions}
+      resource={resource}
+      sort={sort}
+      storeKey={storeKey}
+    >
+      <ListView<RecordType> {...rest} />
+    </ListBase>
+  );
+}
 
 const defaultFilter = {};
 
@@ -186,7 +188,7 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
   }
 }));
 
-export function List(props: ListProps): ReactElement {
+function List(props: ListProps): ReactElement {
   return (
     <MainCard content={false}>
       <StyledList {...props} />
@@ -194,4 +196,5 @@ export function List(props: ListProps): ReactElement {
   );
 }
 
-export default List;
+export { List };
+export type { ListProps };