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

package/src/components/ra-forms/LongForm/utils.ts

@@ -1,14 +1,14 @@
-import _ from 'lodash';
 import { IItem } from './types';
-import { Optional } from '../../../types';
+import { Optional } from '@/types';
+import _ from 'lodash';
 
 function getId(data: Optional<Pick<IItem, 'id' | 'label'>, 'id'>): string {
   return data.id ?? data.label;
 }
 
 function isChild(parentId: string, childId: string): boolean {
-  const regExpString = `^${parentId}.`.replaceAll('.', '\\.'),
-    regExp = new RegExp(regExpString, 'g');
+  const regExpString = `^${parentId}.`.replaceAll('.', '\\.');
+  const regExp = new RegExp(regExpString, 'g');
   return childId.match(regExp) !== null;
 }
 
@@ -22,13 +22,13 @@ function getLevel(id: string): number {
 }
 
 function getChildren(id: string | undefined, items: Array<IItem>) {
-  const level = id !== undefined ? getLevel(id) : 0,
-    children = _.chain(items)
-      .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
-      .filter((item) => getLevel(item.id) === level + 1)
-      .value();
+  const level = id !== undefined ? getLevel(id) : 0;
+  const children = _.chain(items)
+    .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
+    .filter((item) => getLevel(item.id) === level + 1)
+    .value();
 
   return children;
 }
 
-export { getId, isChild, getItemsIds, getLevel, getChildren };
+export { getChildren, getId, getItemsIds, getLevel, isChild };

package/src/components/ra-forms/Show.tsx

@@ -1,5 +1,6 @@
-import { Show as RaShow, ShowProps } from 'react-admin';
+/* eslint-disable filenames/match-regex */
 import { styled } from '@mui/material/styles';
+import { Show as RaShow, ShowProps } from 'react-admin';
 
 const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
   '&>.MuiToolbar-root:first-of-type': {
@@ -16,8 +17,9 @@ const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
   }
 }));
 
-export function Show(props: ShowProps): JSX.Element {
+function Show(props: ShowProps): JSX.Element {
   // @ts-ignore
   return <StyledShow {...props} />;
 }
-export default Show;
+export { Show };
+export type { ShowProps };

package/src/components/ra-forms/SimpleForm.tsx

@@ -1,3 +1,8 @@
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { MainCard } from '@/components/MainCard';
+import { Toolbar } from '@/components/ra-forms/Toolbar';
+import { useResourceTitle } from '@/hooks';
+import { styled, useTheme } from '@mui/system';
 import {
   DeleteWithConfirmButton,
   SimpleForm as RaSimpleForm,
@@ -5,11 +10,6 @@ import {
   SaveButton,
   useRecordContext
 } from 'react-admin';
-import { styled, useTheme } from '@mui/system';
-import { useResourceTitle } from '../../hooks';
-import ActionsMenu from '../ActionsMenu';
-import MainCard from '../MainCard';
-import Toolbar from './Toolbar';
 
 const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   [theme.breakpoints.down('sm')]: {
@@ -17,15 +17,7 @@ const StyledSimpleForm = styled(RaSimpleForm, { slot: 'Root' })(({ theme }: { th
   }
 }));
 
-export type SimpleFormProps = RaSimpleFormProps & {
-  modal?: boolean;
-  content?: boolean;
-  subheader?: string | React.ReactNode;
-  title?: string | React.ReactNode;
-  secondary?: string | React.ReactNode;
-};
-
-export function SimpleForm({
+function SimpleForm({
   title,
   modal = false,
   // @ts-ignore
@@ -62,7 +54,7 @@ export function SimpleForm({
           paddingRight: theme.spacing(2.5),
           paddingBottom: theme.spacing(2.5),
           paddingTop: modal ? theme.spacing(2.5) : 0,
-          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined,
+          borderTop: modal ? `1px solid ${theme.palette.divider}` : undefined
         }
       }}
       border={!modal}
@@ -73,3 +65,14 @@ export function SimpleForm({
     </MainCard>
   );
 }
+
+type SimpleFormProps = RaSimpleFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+};
+
+export { SimpleForm };
+export type { SimpleFormProps };

package/src/components/ra-forms/SimpleFormIterator.tsx

@@ -1,5 +1,6 @@
-import { SimpleFormIterator as RaSimpleFormIterator } from 'react-admin';
+/* eslint-disable filenames/match-regex */
 import { styled } from '@mui/material/styles';
+import { SimpleFormIterator as RaSimpleFormIterator, SimpleFormIteratorProps } from 'react-admin';
 
 // @ts-ignore
 const StyledSimpleFormIterator = styled(RaSimpleFormIterator, { root: 'root' })(({ theme }) => ({
@@ -24,7 +25,8 @@ const StyledSimpleFormIterator = styled(RaSimpleFormIterator, { root: 'root' })(
   }
 }));
 
-export function SimpleFormIterator(props: any): JSX.Element {
+function SimpleFormIterator(props: SimpleFormIteratorProps): JSX.Element {
   return <StyledSimpleFormIterator {...props} />;
 }
-export default SimpleFormIterator;
+export { SimpleFormIterator };
+export type { SimpleFormIteratorProps } from 'react-admin';

package/src/components/ra-forms/TabbedForm.tsx

@@ -1,29 +1,19 @@
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { MainCard } from '@/components/MainCard';
+import { Toolbar } from '@/components/ra-forms/Toolbar';
+import { useResourceTitle } from '@/hooks';
 import { Box, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
+import { PropsWithChildren } from 'react';
 import {
+  DeleteWithConfirmButton,
   TabbedForm as RaTabbedForm,
   TabbedFormProps as RaTabbedFormProps,
-  DeleteWithConfirmButton,
   SaveButton,
   TabProps
 } from 'react-admin';
-import { useResourceTitle } from '../../hooks';
-import ActionsMenu from '../ActionsMenu';
-import MainCard from '../MainCard';
-import Toolbar from './Toolbar';
 
-export type TabbedFormProps = RaTabbedFormProps & {
-  modal?: boolean;
-  content?: boolean;
-  subheader?: string | React.ReactNode;
-  title?: string | React.ReactNode | boolean;
-  secondary?: string | React.ReactNode;
-  /**
-   * Indicates if the form should have no padding.
-   * If true, the form will have no padding and you will be **responsible** for adding padding to the form's tabs.
-   */
-  noPadding?: boolean;
-};
+type StackTabProps = TabProps & PropsWithChildren<Record<string, never>>;
 
 const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
@@ -37,11 +27,12 @@ const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { th
   }
 }));
 
-function TabbedFormWithNoPadding({ children }: { children: React.ReactNode }): JSX.Element {
+type TabbedFormWithNoPaddingProps = PropsWithChildren<Record<string, never>>;
+function TabbedFormWithNoPadding({ children }: TabbedFormWithNoPaddingProps): JSX.Element {
   return <>{children}</>;
 }
 
-export function TabbedForm(props: TabbedFormProps): JSX.Element {
+function TabbedForm(props: TabbedFormProps): JSX.Element {
   const {
     title: _title,
     modal,
@@ -98,8 +89,17 @@ export function TabbedForm(props: TabbedFormProps): JSX.Element {
     </MainCard>
   );
 }
-export type StackTabProps = TabProps & {
-  children: React.ReactNode;
+type TabbedFormProps = RaTabbedFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode | boolean;
+  secondary?: string | React.ReactNode;
+  /**
+   * Indicates if the form should have no padding.
+   * If true, the form will have no padding and you will be **responsible** for adding padding to the form's tabs.
+   */
+  noPadding?: boolean;
 };
 
 /**
@@ -117,4 +117,5 @@ function TabStack({ children, ...props }: StackTabProps): JSX.Element {
 TabbedForm.Tab = RaTabbedForm.Tab;
 TabbedForm.TabStack = TabStack;
 
-export default TabbedForm;
+export { TabbedForm };
+export type { TabbedFormProps };

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-
-import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { Confirm, useArrayInput } from 'react-admin';
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { TableFormIteratorContext } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
+import { TableFormIteratorItem } from '@/components/ra-forms/TableForm/TableFormIteratorItem';
+import { PlusCircleOutlined } from '@ant-design/icons';
 import {
   IconButton,
   Paper,
@@ -15,14 +15,13 @@ import {
   TableRow,
   Typography
 } from '@mui/material';
-import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
 import { styled, useTheme } from '@mui/material/styles';
-import ActionsMenu from '../../ActionsMenu';
-import { PlusCircleOutlined } from '@ant-design/icons';
-import { TableFormIteratorContext } from '../../../contexts';
-import { TableFormIteratorItem } from './TableFormIteratorItem';
-import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 import get from 'lodash/get';
+import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
+import * as React from 'react';
+import { Children, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { Confirm, useArrayInput } from 'react-admin';
+import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
 
 /**
  *
@@ -39,7 +38,7 @@ import get from 'lodash/get';
  *     </Grid>
  *   </Grid>
  */
-export function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | null {
+function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | null {
   const {
     children,
     resource,
@@ -89,7 +88,9 @@ export function RawTableFormIterator(props: TableFormIteratorProps): ReactElemen
           !Children.only(children).props.source &&
           // Make sure it's not a FormDataConsumer
           // @ts-ignore
-          Children.map(children, (input) => React.isValidElement(input) && input.type !== FormDataConsumer).some(Boolean)
+          Children.map(children, (input) => React.isValidElement(input) && input.type !== FormDataConsumer).some(
+            Boolean
+          )
         ) {
           // ArrayInput used for an array of scalar values
           // (e.g. tags: ['foo', 'bar'])
@@ -114,12 +115,14 @@ export function RawTableFormIterator(props: TableFormIteratorProps): ReactElemen
   );
 
   // add field and call the onClick event of the button passed as addButton prop
-  const handleAddButtonClick = (originalOnClickHandler: any) => (event: MouseEvent) => {
-    addField();
-    if (originalOnClickHandler) {
-      originalOnClickHandler(event);
-    }
-  };
+  function handleAddButtonClick(originalOnClickHandler: any) {
+    return (event: MouseEvent) => {
+      addField();
+      if (originalOnClickHandler) {
+        originalOnClickHandler(event);
+      }
+    };
+  }
 
   const handleArrayClear = useCallback(() => {
     replace([]);
@@ -160,8 +163,8 @@ export function RawTableFormIterator(props: TableFormIteratorProps): ReactElemen
           sx={
             inset === true
               ? {
-                borderRadius: 0
-              }
+                  borderRadius: 0
+                }
               : { mt: 2, border: `1px solid ${tableBorderColor}` }
           }
         >
@@ -213,7 +216,7 @@ export function RawTableFormIterator(props: TableFormIteratorProps): ReactElemen
               )}
 
               {fields.length > 0 &&
-                fields.map((member, index) => (
+                fields.map((member: any, index: number) => (
                   <TableRow sx={{ borderBottom: `1px solid ${tableBorderColor}}` }} key={member.id}>
                     <TableFormIteratorItem
                       disableRemove={disableRemove}
@@ -256,7 +259,12 @@ function AddTableRow(props: any): JSX.Element {
   const iconColor = theme.palette.mode === 'light' ? '#000000' : '#FFFFFF';
 
   return (
-    <Stack justifyContent={'space-between'} alignItems={'center'} flexDirection={'row'} sx={inset ? { p: 2.5 } : { pt: 2 }}>
+    <Stack
+      justifyContent={'space-between'}
+      alignItems={'center'}
+      flexDirection={'row'}
+      sx={inset ? { p: 2.5 } : { pt: 2 }}
+    >
       {label !== false && <Typography>{label}</Typography>}
       {!disableAdd &&
         (React.isValidElement(props?.addButton) ? (
@@ -272,7 +280,7 @@ function AddTableRow(props: any): JSX.Element {
   );
 }
 
-export const TableFormIterator = styled(RawTableFormIterator, { slot: 'Root' })(({ theme }) => ({
+const TableFormIterator = styled(RawTableFormIterator, { slot: 'Root' })(({ theme }) => ({
   '& > div.MuiPaper-root': {
     overflowX: 'auto',
     // this decision has been made with Roberto in order to avoid Marco gets angry
@@ -287,7 +295,7 @@ export const TableFormIterator = styled(RawTableFormIterator, { slot: 'Root' })(
   }
 }));
 
-export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
+interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   addButton?: ReactElement;
   children?: ReactNode;
   className?: string;
@@ -309,4 +317,5 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   inset?: boolean;
 }
 
-export default TableFormIterator;
+export { TableFormIterator };
+export type { TableFormIteratorProps };

package/src/components/ra-forms/TableForm/TableFormIteratorContext.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * A React context that provides access to a TableFormIterator data (the total number of items) and mutators (add, reorder and remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ *
+ */
+// @ts-ignore
+const TableFormIteratorContext = createContext<TableFormIteratorContextValue>(undefined);
+
+type TableFormIteratorContextValue = {
+  add: () => void;
+  remove: (index: number) => void;
+  reOrder: (index: number, newIndex: number) => void;
+  source: string;
+  total: number;
+};
+
+/**
+ * A hook that provides access to a TableFormIterator data (the total number of items) and mutators (add, reorder and remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ */
+function useTableFormIterator(): TableFormIteratorContextValue {
+  return useContext(TableFormIteratorContext);
+}
+
+export { TableFormIteratorContext, useTableFormIterator };
+export type { TableFormIteratorContextValue };

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -1,14 +1,17 @@
-import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
-import { Confirm, useTranslate } from 'react-admin';
-import { RaRecord } from 'ra-core';
+import { ActionsMenu } from '@/components/ActionsMenu';
+import { useTableFormIterator } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
+import {
+  TableFormIteratorItemContext,
+  TableFormIteratorItemContextValue
+} from '@/components/ra-forms/TableForm/TableFormIteratorItemContext';
 import { Stack, TableCell, Typography } from '@mui/material';
-import { TableFormIteratorItemContext, TableFormIteratorItemContextValue } from '../../../contexts';
-import { useTableFormIterator } from '../../../hooks';
+import { RaRecord } from 'ra-core';
+import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
 import * as React from 'react';
-import ActionsMenu from '../../ActionsMenu';
+import { Confirm, useTranslate } from 'react-admin';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, ref: any) => {
+export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, _: any) => {
   const { children, disabled, disableRemove = false, index, member, resource } = props;
   const translate = useTranslate();
   const [confirmIsOpen, setConfirmIsOpen] = React.useState<boolean>(false);

package/src/components/ra-forms/TableForm/TableFormIteratorItemContext.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * A React context that provides access to a TableFormIterator item meta (its index and the total number of items) and mutators (reorder and remove this remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ */
+// @ts-ignore
+const TableFormIteratorItemContext = createContext<TableFormIteratorItemContextValue>(undefined);
+
+type TableFormIteratorItemContextValue = {
+  index: number;
+  total: number;
+  remove: () => void;
+  reOrder: (newIndex: number) => void;
+};
+
+/**
+ * A hook that provides access to a TableFormIterator item meta (its index and the total number of items) and mutators (reorder and remove this remove).
+ * Useful to create custom array input iterators.
+ * @see {TableFormIterator}
+ * @see {ArrayInput}
+ */
+function useTableFormIteratorItem(): TableFormIteratorItemContextValue {
+  return useContext(TableFormIteratorItemContext);
+}
+
+export { TableFormIteratorItemContext, useTableFormIteratorItem };
+export type { TableFormIteratorItemContextValue };

package/src/components/ra-forms/TableForm/index.ts

@@ -1,2 +1,4 @@
 export * from './TableFormIterator';
+export * from './TableFormIteratorContext';
 export * from './TableFormIteratorItem';
+export * from './TableFormIteratorItemContext';

package/src/components/ra-forms/Toolbar.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line filenames/match-regex
 import { styled } from '@mui/system';
 import { Toolbar as RaToolbar, ToolbarProps } from 'react-admin';
 
@@ -18,9 +19,10 @@ const StyledToolbar = styled(RaToolbar, { slot: 'Root' })(({ theme }: { theme: a
   }
 }));
 
-export function Toolbar(props: ToolbarProps): JSX.Element {
+function Toolbar(props: ToolbarProps): JSX.Element {
   // @ts-ignore
   return <StyledToolbar {...props} />;
 }
 
-export default Toolbar;
+export { Toolbar };
+export type { ToolbarProps };

package/src/components/ra-forms/index.ts

@@ -10,4 +10,3 @@ export * from './SimpleFormIterator';
 export * from './TabbedForm';
 export * from './TableForm';
 export * from './Toolbar';
-export { default as LongForm } from './LongForm';

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

@@ -1,6 +1,6 @@
-import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';
+import { LabeledArrayInput, LabeledArrayInputProps } from '@/components/ra-inputs/LabeledArrayInput';
 import { styled } from '@mui/material/styles';
-import LabeledArrayInput, { LabeledArrayInputProps } from './LabeledArrayInput';
+import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';
 
 const StyledArrayInput = styled(RaArrayInput, { slot: 'root' })(({ theme }) => ({
   '& .MuiStack-root > label': {
@@ -18,16 +18,18 @@ const StyledArrayInput = styled(RaArrayInput, { slot: 'root' })(({ theme }) => (
   }
 }));
 
-export type ArrayInputProps = RaArrayInputProps &
-  LabeledArrayInputProps & {
-    divider?: boolean;
-  };
-
 /**
  * Expose an ArrayInput component with Applica graphic style.
  * If you want to use the pure react-admin component you can use RaArrayInput exposed in the library.
  */
-export function ArrayInput({ label, addLabel, source, helperText, divider = true, ...props }: ArrayInputProps): React.ReactElement {
+function ArrayInput({
+  label,
+  addLabel,
+  source,
+  helperText,
+  divider = true,
+  ...props
+}: ArrayInputProps): React.ReactElement {
   return (
     <LabeledArrayInput
       label={label}
@@ -41,4 +43,11 @@ export function ArrayInput({ label, addLabel, source, helperText, divider = true
     </LabeledArrayInput>
   );
 }
-export default ArrayInput;
+
+type ArrayInputProps = RaArrayInputProps &
+  LabeledArrayInputProps & {
+    divider?: boolean;
+  };
+
+export { ArrayInput };
+export type { ArrayInputProps };

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

@@ -1,10 +1,10 @@
-import { AttachmentField } from '../ra-fields';
-import { FileInputProps, FileInput as RaFileInput, useInput, useRecordContext } from 'react-admin';
+import { AttachmentField } from '@/components/ra-fields';
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import LabeledInput from './LabeledInput';
 import React from 'react';
+import { FileInputProps, FileInput as RaFileInput, useInput, useRecordContext } from 'react-admin';
 
-const removeDeleteIfNecessary = (disabled: boolean) => {
+function removeDeleteIfNecessary(disabled: boolean): any {
   if (disabled) {
     return {
       '& .RaFileInput-removeButton > .RaFileInputPreview-removeButton': {
@@ -18,36 +18,31 @@ const removeDeleteIfNecessary = (disabled: boolean) => {
     };
   }
   return {};
-};
+}
 
-const StyledFileInput = styled(RaFileInput, { slot: 'root' })(({ disabled, theme }: { disabled: boolean; theme: any }) => ({
-  '& .previews': {},
-  '& .previews>div': {
-    marginTop: theme.spacing(1),
-    padding: theme.spacing(1.5),
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    '& button': {
-      float: 'right',
-      placeItems: 'flex-end',
-      verticalAlign: 'middle'
-    },
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover
+const StyledFileInput = styled(RaFileInput, { slot: 'root' })(
+  ({ disabled, theme }: { disabled: boolean; theme: any }) => ({
+    '& .previews': {},
+    '& .previews>div': {
+      marginTop: theme.spacing(1),
+      padding: theme.spacing(1.5),
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: theme.shape.borderRadius,
+      '& button': {
+        float: 'right',
+        placeItems: 'flex-end',
+        verticalAlign: 'middle'
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover
+      },
+      '& .MuiLink-root': {
+        fontSize: theme.typography.body1.fontSize
+      }
     },
-    '& .MuiLink-root': {
-      fontSize: theme.typography.body1.fontSize
-    }
-  },
-  ...removeDeleteIfNecessary(disabled)
-}));
-
-export type AttachmentInputProps = FileInputProps & {
-  children?: React.ReactNode;
-  disabled?: boolean;
-  source?: string;
-  type?: 'file' | 'image' | 'attachment';
-};
+    ...removeDeleteIfNecessary(disabled)
+  })
+);
 
 /**
  * Allows you to define an input field inside which you can upload one or more files.
@@ -55,7 +50,7 @@ export type AttachmentInputProps = FileInputProps & {
  * @example
  * <AttachmentInput source="attachments" title="name" accept="image/*" multiple>
  */
-export function AttachmentInput({
+function AttachmentInput({
   // @ts-ignore
   children = <AttachmentField title="name" source="path" />,
   multiple = true,
@@ -79,4 +74,12 @@ export function AttachmentInput({
   );
 }
 
-export default AttachmentInput;
+type AttachmentInputProps = FileInputProps & {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  source?: string;
+  type?: 'file' | 'image' | 'attachment';
+};
+
+export { AttachmentInput };
+export type { AttachmentInputProps };

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

@@ -1,6 +1,6 @@
-import { AutocompleteArrayInputProps, AutocompleteArrayInput as RaAutocompleteArrayInput } from 'react-admin';
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import LabeledInput from './LabeledInput';
+import { AutocompleteArrayInputProps, AutocompleteArrayInput as RaAutocompleteArrayInput } from 'react-admin';
 
 // @ts-ignore
 const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
@@ -21,7 +21,7 @@ const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
   }
 }));
 
-export function AutocompleteArrayInput({ size = 'small', ...props }: AutocompleteArrayInputProps): JSX.Element {
+function AutocompleteArrayInput({ size = 'small', ...props }: AutocompleteArrayInputProps): JSX.Element {
   return (
     // @ts-ignore
     <LabeledInput {...props}>
@@ -30,4 +30,5 @@ export function AutocompleteArrayInput({ size = 'small', ...props }: Autocomplet
   );
 }
 
-export default AutocompleteArrayInput;
+export { AutocompleteArrayInput };
+export type { AutocompleteArrayInputProps };