@applica-software-guru/react-admin 1.4.225 → 1.5.228

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

@@ -1,28 +1,14 @@
-import { FieldTitle } from 'react-admin';
-import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
-import { useAppConfig } from '../../hooks';
-import { useFormContext } from 'react-hook-form';
+import { useAppConfig } from '@/components/AppStateProvider';
 import { useTheme } from '@emotion/react';
+import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
 import React from 'react';
-
-export type LabeledArrayInputProps = {
-  label?: string | boolean;
-  addLabel?: boolean;
-  resource?: string;
-  isRequired?: boolean;
-  source: string;
-  display?: 'legend' | 'label';
-  helperText?: string | boolean;
-  divider?: boolean;
-  sx?: SxProps;
-  children: React.ReactElement;
-  fullWidth?: boolean;
-};
+import { FieldTitle } from 'react-admin';
+import { useFormContext } from 'react-hook-form';
 
 /**
  * Allows you to display an array of inputs with a label and a helper text with the Mantis theme style.
  */
-export function LabeledArrayInput({
+function LabeledArrayInput({
   label,
   children,
   display = 'label',
@@ -78,7 +64,7 @@ export function LabeledArrayInput({
             label: display === 'legend' ? label : false
           })
         : children}
-      {display === 'label' && helperText && (
+      {display === 'label' && helperText ? (
         <FormHelperText
           sx={{
             pl: 1.8,
@@ -89,9 +75,24 @@ export function LabeledArrayInput({
         >
           {helperText}
         </FormHelperText>
-      )}
+      ) : null}
     </Stack>
   );
 }
 
-export default LabeledArrayInput;
+type LabeledArrayInputProps = {
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+  sx?: SxProps;
+  children: React.ReactElement;
+  fullWidth?: boolean;
+};
+
+export { LabeledArrayInput };
+export type { LabeledArrayInputProps };

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

@@ -1,23 +1,10 @@
-import { FieldTitle, InputProps, useInput } from 'react-admin';
+import { useAppConfig } from '@/components/AppStateProvider';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
-import { useAppConfig } from '../../hooks';
 import { useTheme } from '@mui/material/styles';
 import React from 'react';
+import { FieldTitle, InputProps, useInput } from 'react-admin';
 
-export type LabeledInputProps = InputProps & {
-  sx?: any;
-  children?: React.ReactElement;
-  label?: string | boolean;
-  addLabel?: boolean;
-  resource?: string;
-  isRequired?: boolean;
-  source?: string;
-  display?: 'legend' | 'label';
-  helperText?: string | boolean;
-  divider?: boolean;
-};
-
-export function LabeledInput({
+function LabeledInput({
   label,
   children,
   display = 'label',
@@ -75,7 +62,7 @@ export function LabeledInput({
             label: display === 'legend' ? label : false
           })
         : children}
-      {display === 'label' && helperText && (
+      {display === 'label' && helperText ? (
         <FormHelperText
           sx={{
             pl: 1.8,
@@ -86,8 +73,23 @@ export function LabeledInput({
         >
           {helperText}
         </FormHelperText>
-      )}
+      ) : null}
     </Stack>
   );
 }
-export default LabeledInput;
+
+type LabeledInputProps = InputProps & {
+  sx?: any;
+  children?: React.ReactElement;
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source?: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+};
+
+export { LabeledInput };
+export type { LabeledInputProps };

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

@@ -1,46 +1,49 @@
-import _ from 'lodash';
+import { TextInput } from './TextInput';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
+import { localizedValueHasAllLocales } from '@/utils';
 import { Box, Chip, ListItemText, Menu, MenuItem, PopoverOrigin, Typography } from '@mui/material';
-import { localizedValueHasAllLocales } from '../../utils';
-import { ReactElement, useCallback, useMemo, useState } from 'react';
-import { TextInputProps } from 'ra-ui-materialui';
+import _ from 'lodash';
 import { useInput, useLocaleState, useLocales } from 'ra-core';
+import { TextInputProps } from 'ra-ui-materialui';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
-import LabeledInput, { LabeledInputProps } from './LabeledInput';
-import TextInput from './TextInput';
 
-const ANCHOR_ORIGIN: PopoverOrigin = { vertical: 'bottom', horizontal: 'right' },
-  TRANSFORM_ORIGIN: PopoverOrigin = { vertical: 'top', horizontal: 'right' };
+const ANCHOR_ORIGIN: PopoverOrigin = { vertical: 'bottom', horizontal: 'right' };
+const TRANSFORM_ORIGIN: PopoverOrigin = { vertical: 'top', horizontal: 'right' };
 
-export type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
+type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
 
-export function LocalizedTextInput(props: ILocalizedTextInputProps) {
-  const { source } = props,
-    { fieldState } = useInput(props),
-    value = useWatch({ name: source }),
-    { error } = fieldState,
-    locales = useLocales(),
-    isMissingLocalizations = !localizedValueHasAllLocales(value, locales),
-    [currentLocale] = useLocaleState(),
-    [locale, setLocale] = useState(currentLocale),
-    [anchorEl, setAnchorEl] = useState<null | HTMLDivElement>(null),
-    open = Boolean(anchorEl),
-    toggle = useCallback((e: React.MouseEvent<HTMLDivElement>) => setAnchorEl(open ? null : e.currentTarget), [open, setAnchorEl]),
-    handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]),
-    MenuItems: Array<ReactElement> = useMemo(() => {
-      return _.map(locales, (l, index) => {
-        return (
-          <MenuItem
-            key={index}
-            onClick={() => {
-              setLocale(l.locale);
-              handleClose();
-            }}
-          >
-            <ListItemText primary={`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`} />
-          </MenuItem>
-        );
-      });
-    }, [locales, setLocale, handleClose, value]);
+function LocalizedTextInput(props: ILocalizedTextInputProps) {
+  const { source } = props;
+  const { fieldState } = useInput(props);
+  const value = useWatch({ name: source });
+  const { error } = fieldState;
+  const locales = useLocales();
+  const isMissingLocalizations = !localizedValueHasAllLocales(value, locales);
+  const [currentLocale] = useLocaleState();
+  const [locale, setLocale] = useState(currentLocale);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLDivElement>(null);
+  const open = Boolean(anchorEl);
+  const toggle = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => setAnchorEl(open ? null : e.currentTarget),
+    [open, setAnchorEl]
+  );
+  const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+  const MenuItems: Array<ReactElement> = useMemo(() => {
+    return _.map(locales, (l, index) => {
+      return (
+        <MenuItem
+          key={index}
+          onClick={() => {
+            setLocale(l.locale);
+            handleClose();
+          }}
+        >
+          <ListItemText primary={`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`} />
+        </MenuItem>
+      );
+    });
+  }, [locales, setLocale, handleClose, value]);
 
   return (
     <LabeledInput {...props} helperText={error?.message}>
@@ -66,7 +69,13 @@ export function LocalizedTextInput(props: ILocalizedTextInputProps) {
             />
           );
         })}
-        <Menu anchorEl={anchorEl} open={open} anchorOrigin={ANCHOR_ORIGIN} transformOrigin={TRANSFORM_ORIGIN} onClose={handleClose}>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          anchorOrigin={ANCHOR_ORIGIN}
+          transformOrigin={TRANSFORM_ORIGIN}
+          onClose={handleClose}
+        >
           {MenuItems}
         </Menu>
       </Box>
@@ -74,4 +83,5 @@ export function LocalizedTextInput(props: ILocalizedTextInputProps) {
   );
 }
 
-export default LocalizedTextInput;
+export type { ILocalizedTextInputProps };
+export { LocalizedTextInput };

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

@@ -1,6 +1,6 @@
-import { NumberInputProps, NumberInput as RaNumberInput } from 'react-admin';
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import LabeledInput from './LabeledInput';
+import { NumberInputProps, NumberInput as RaNumberInput } from 'react-admin';
 
 const StyledNumberInput = styled(RaNumberInput, { slot: 'root' })(({ label }) => ({
   '& legend': {
@@ -8,7 +8,7 @@ const StyledNumberInput = styled(RaNumberInput, { slot: 'root' })(({ label }) =>
   }
 }));
 
-export function NumberInput(props: NumberInputProps): JSX.Element {
+function NumberInput(props: NumberInputProps): JSX.Element {
   return (
     // @ts-ignore
     <LabeledInput {...props}>
@@ -18,4 +18,5 @@ export function NumberInput(props: NumberInputProps): JSX.Element {
   );
 }
 
-export default NumberInput;
+export { NumberInput };
+export type { NumberInputProps };

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

@@ -1,15 +1,15 @@
-import { get } from 'lodash';
 import { TextField } from '@mui/material';
-import { useDataProvider, useRecordContext, useResourceContext } from 'react-admin';
+import { get } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
+import { useDataProvider, useRecordContext, useResourceContext } from 'react-admin';
 
-export type RecordInputProps = {
+type RecordInputProps = {
   source: string;
   minWidth?: number;
   children?: React.ReactElement;
 };
 
-export function RecordInput({ source, minWidth = 300, children }: RecordInputProps): JSX.Element {
+function RecordInput({ source, minWidth = 300, children }: RecordInputProps): JSX.Element {
   const resource = useResourceContext();
   const record = useRecordContext();
   const [value, setValue] = useState(get(record, source, ''));
@@ -101,4 +101,5 @@ export function RecordInput({ source, minWidth = 300, children }: RecordInputPro
   );
 }
 
-export default RecordInput;
+export { RecordInput };
+export type { RecordInputProps };

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

@@ -1,11 +1,10 @@
-import { ReferenceArrayInput as RaReferenceArrayInput, ReferenceArrayInputProps as RaReferenceArrayInputProps } from 'react-admin';
 import React from 'react';
+import {
+  ReferenceArrayInput as RaReferenceArrayInput,
+  ReferenceArrayInputProps as RaReferenceArrayInputProps
+} from 'react-admin';
 
-export type ReferenceArrayInputProps = {
-  children: React.ReactElement;
-} & RaReferenceArrayInputProps;
-
-export function ReferenceArrayInput({ children, ...props }: ReferenceArrayInputProps): JSX.Element {
+function ReferenceArrayInput({ children, ...props }: ReferenceArrayInputProps): JSX.Element {
   return (
     <RaReferenceArrayInput {...props}>
       {React.cloneElement(children, {
@@ -16,4 +15,9 @@ export function ReferenceArrayInput({ children, ...props }: ReferenceArrayInputP
   );
 }
 
-export default ReferenceArrayInput;
+type ReferenceArrayInputProps = {
+  children: React.ReactElement;
+} & RaReferenceArrayInputProps;
+
+export { ReferenceArrayInput };
+export type { ReferenceArrayInputProps };

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

@@ -1,11 +1,11 @@
-import { ReferenceInput as RaReferenceInput, ReferenceInputProps as RaReferenceInputProps } from 'react-admin';
 import React from 'react';
+import { ReferenceInput as RaReferenceInput, ReferenceInputProps as RaReferenceInputProps } from 'react-admin';
 
-export type ReferenceInputProps = {
+type ReferenceInputProps = {
   children: React.ReactElement;
 } & RaReferenceInputProps;
 
-export function ReferenceInput({ children, ...props }: ReferenceInputProps): JSX.Element {
+function ReferenceInput({ children, ...props }: ReferenceInputProps): JSX.Element {
   return (
     <RaReferenceInput {...props}>
       {React.cloneElement(children, {
@@ -16,4 +16,5 @@ export function ReferenceInput({ children, ...props }: ReferenceInputProps): JSX
   );
 }
 
-export default ReferenceInput;
+export { ReferenceInput };
+export type { ReferenceInputProps };

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

@@ -1,8 +1,8 @@
-import { Fragment, ReactElement } from 'react';
+import { ReferenceManyField, ReferenceManyFieldProps } from '@/components/ra-fields';
+import { ReactElement } from 'react';
 import { ListToolbar, Pagination, ResourceContextProvider } from 'react-admin';
-import { ReferenceManyField, ReferenceManyFieldProps } from '../ra-fields';
 
-export type ReferenceManyInputProps = {
+type ReferenceManyInputProps = {
   reference: string;
   target: string;
   children: React.ReactNode;
@@ -10,17 +10,24 @@ export type ReferenceManyInputProps = {
   actions?: ReactElement;
 } & ReferenceManyFieldProps;
 
-export function ReferenceManyInput({ reference, target, children, filters, actions, ...props }: ReferenceManyInputProps): JSX.Element {
+function ReferenceManyInput({
+  reference,
+  target,
+  children,
+  filters,
+  actions,
+  ...props
+}: ReferenceManyInputProps): JSX.Element {
   return (
     <ResourceContextProvider value={reference}>
       <ReferenceManyField perPage={5} pagination={<Pagination />} {...props} reference={reference} target={target}>
-        <Fragment>
+        <>
           <ListToolbar filters={filters} actions={actions} />
           {children}
-        </Fragment>
+        </>
       </ReferenceManyField>
     </ResourceContextProvider>
   );
 }
 
-export default ReferenceManyInput;
+export { ReferenceManyInput };

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

@@ -1,9 +1,10 @@
-import { SearchInput as RaSearchInput, SearchInputProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { SearchInput as RaSearchInput, SearchInputProps } from 'react-admin';
 
 const StyledSearchInput = styled(RaSearchInput, { slot: 'root' })(() => ({}));
 
-export function SearchInput(props: SearchInputProps): JSX.Element {
+function SearchInput(props: SearchInputProps): JSX.Element {
   return <StyledSearchInput {...props} />;
 }
-export default SearchInput;
+export { SearchInput };
+export type { SearchInputProps };

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

@@ -1,18 +1,25 @@
-import { SelectArrayInput as RaSelectArrayInput, SelectArrayInputProps } from 'react-admin';
+import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import LabeledInput from './LabeledInput';
+import { SelectArrayInput as RaSelectArrayInput, SelectArrayInputProps } from 'react-admin';
 
 const StyledSelectArrayInput = styled(RaSelectArrayInput, { slot: 'Root' })(({ label }) => ({
   '& legend': {
     width: label === false ? 0 : 'auto'
   },
-  '& .RaSelectArrayInput-chips > .RaSelectArrayInput-chip': {
-    marginTop: '-2px',
-    marginBottom: '-2px'
+  '& .MuiFormLabel-root.MuiInputLabel-root': {
+    marginTop: '-3px'
+  },
+  '& .MuiInputLabel-root.MuiInputLabel-shrink': {
+    marginTop: 0
+  },
+  '& .MuiOutlinedInput-input:has(.MuiChip-root)': {
+    paddingTop: '4px',
+    paddingBottom: '6px',
+    paddingLeft: '6px'
   }
 }));
 
-export function SelectArrayInput({ optionText = 'name', optionValue = 'id', ...props }: SelectArrayInputProps): JSX.Element {
+function SelectArrayInput({ optionText = 'name', optionValue = 'id', ...props }: SelectArrayInputProps): JSX.Element {
   return (
     // @ts-ignore
     <LabeledInput {...props}>
@@ -27,4 +34,5 @@ export function SelectArrayInput({ optionText = 'name', optionValue = 'id', ...p
   );
 }
 
-export default SelectArrayInput;
+export { SelectArrayInput };
+export type { SelectArrayInputProps };

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

@@ -1,14 +1,14 @@
-import { SelectInput as RaSelectInput, SelectInputProps as RaSelectInputProps } from 'react-admin';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import LabeledInput, { LabeledInputProps } from './LabeledInput';
+import { SelectInput as RaSelectInput, SelectInputProps as RaSelectInputProps } from 'react-admin';
 
 const StyledSelectInput = styled(RaSelectInput, { slot: 'Root' })(({ label }) => ({
   '& legend': {
     width: label === false || label === null ? 0 : 'auto'
   }
 }));
-export type SelectInputProps = LabeledInputProps & RaSelectInputProps;
-export function SelectInput(props: SelectInputProps): JSX.Element {
+type SelectInputProps = LabeledInputProps & RaSelectInputProps;
+function SelectInput(props: SelectInputProps): JSX.Element {
   return (
     <LabeledInput {...props}>
       <StyledSelectInput />
@@ -16,4 +16,4 @@ export function SelectInput(props: SelectInputProps): JSX.Element {
   );
 }
 
-export default SelectInput;
+export { SelectInput };

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 };