@applica-software-guru/react-admin 1.0.35 → 1.0.37

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

@@ -1,15 +1,31 @@
-import { FileInput as RaFileInput, useRecordContext } from 'react-admin'
+import { FileInput as RaFileInput, useRecordContext } from 'react-admin';
 
-import { AttachmentField } from '../ra-fields'
-import LabeledInput from './LabeledInput'
-import PropTypes from 'prop-types'
-import React from 'react'
-import { styled } from '@mui/material/styles'
+import { AttachmentField } from '../ra-fields';
+import LabeledInput from './LabeledInput';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+const removeDeleteIfNecessary = (disabled) => {
+  if (disabled) {
+    return {
+      '& .RaFileInput-removeButton > .RaFileInputPreview-removeButton': {
+        display: 'none',
+        visiblity: 'hidden'
+      },
+      '& .RaFileInput-dropZone': {
+        display: 'none',
+        visiblity: 'hidden'
+      }
+    };
+  }
+  return {};
+};
 
 const StyledFileInput = styled(RaFileInput, {
   name: 'RaApplicaFileInput',
-  slot: 'root',
-})(({ theme }) => ({
+  slot: 'root'
+})(({ disabled, theme }) => ({
   '& .previews': {},
   '& .previews>div': {
     marginTop: theme.spacing(1),
@@ -19,39 +35,40 @@ const StyledFileInput = styled(RaFileInput, {
     '& button': {
       float: 'right',
       placeItems: 'flex-end',
-      verticalAlign: 'middle',
+      verticalAlign: 'middle'
     },
     '&:hover': {
-      backgroundColor: theme.palette.action.hover,
+      backgroundColor: theme.palette.action.hover
     },
     '& .MuiLink-root': {
-      fontSize: theme.typography.body1.fontSize,
-    },
+      fontSize: theme.typography.body1.fontSize
+    }
   },
-}))
+  ...removeDeleteIfNecessary(disabled)
+}));
 
-const AttachmentInput = ({ children, ...props }) => {
-  const record = useRecordContext(props)
-  const property = props?.source
-  const entityId = record?.id
+const AttachmentInput = ({ children, disabled, ...props }) => {
+  const record = useRecordContext(props);
+  const property = props?.source;
+  const entityId = record?.id;
   return (
     <LabeledInput {...props}>
-      <StyledFileInput>
-        {React.cloneElement(children, { ...children.props, entityId, property })}
-      </StyledFileInput>
+      <StyledFileInput disabled={disabled}>{React.cloneElement(children, { ...children.props, entityId, property })}</StyledFileInput>
     </LabeledInput>
-  )
-}
+  );
+};
 
 AttachmentInput.propTypes = {
   ...RaFileInput.propTypes,
   children: PropTypes.node,
   multiple: PropTypes.bool,
-}
+  disabled: PropTypes.bool
+};
 
 AttachmentInput.defaultProps = {
   children: <AttachmentField title="name" source="path" />,
   multiple: true,
-}
+  disabled: false
+};
 
-export default AttachmentInput
+export default AttachmentInput;

package/src/components/ra-inputs/AutocompleteInput.jsx

@@ -11,11 +11,16 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   }
 }))
 
-const AutocompleteInput = ({ ...props }) => (
-  <LabeledInput {...props}>
-    <StyledAutocompleteInput />
-  </LabeledInput>
-)
+const AutocompleteInput = (props) => {
+  // Sanitize props removing "perPage":
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { perPage, ...rest } = props
+  return (
+    <LabeledInput {...rest}>
+      <StyledAutocompleteInput />
+    </LabeledInput>
+  )
+}
 AutocompleteInput.propTypes = {
   ...RaAutocompleteInput.propTypes,
   ...LabeledInput.propTypes

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

@@ -1,19 +1,19 @@
-import { FieldTitle, useInput } from 'react-admin'
-import { FormHelperText, InputLabel, Stack } from '@mui/material'
+import { FieldTitle, useInput } from 'react-admin';
+import { FormHelperText, InputLabel, Stack } from '@mui/material';
 
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useAppConfig } from '../../hooks'
-import { useTheme } from '@emotion/react'
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppConfig } from '../../hooks';
+import { useTheme } from '@emotion/react';
 
-const LabeledInput = ({ label, children, display, helperText, sx, ...props }) => {
-  const theme = useTheme()
-  const { getCurrentDialog } = useAppConfig()
-  const { source, resource, isRequired } = props
+const LabeledInput = ({ label, children, display, helperText, sx, addLabel, ...props }) => {
+  const theme = useTheme();
+  const { getCurrentDialog } = useAppConfig();
+  const { source, resource, isRequired } = props;
   const {
-    fieldState: { invalid },
-  } = useInput(props)
-  const dialogResource = getCurrentDialog()
+    fieldState: { invalid }
+  } = useInput(props);
+  const dialogResource = getCurrentDialog();
   return (
     <Stack
       spacing={1}
@@ -24,33 +24,28 @@ const LabeledInput = ({ label, children, display, helperText, sx, ...props }) =>
           // remove error message colorization when the field is in error state.
           color: invalid ? theme.palette.error.main : theme.palette.text.secondary,
           '& span': {
-            display: 'none',
-          },
+            display: 'none'
+          }
         },
-        ...sx,
+        ...sx
       }}
     >
-      {display === 'label' && label !== false && (
+      {display === 'label' && label !== false && addLabel !== false && (
         <InputLabel error={invalid === true}>
-          <FieldTitle
-            label={label}
-            source={source}
-            resource={dialogResource || resource}
-            isRequired={isRequired}
-          />
+          <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
         </InputLabel>
       )}
       {React.cloneElement(children, {
         ...children.props,
         ...props,
-        label: display === 'legend' ? label : false,
+        label: display === 'legend' ? label : false
       })}
       {display === 'label' && helperText && (
         <FormHelperText
           sx={{
             pl: 2,
             pb: 2,
-            marginTop: '0 !important',
+            marginTop: '0 !important'
           }}
           error={invalid === true}
         >
@@ -58,8 +53,8 @@ const LabeledInput = ({ label, children, display, helperText, sx, ...props }) =>
         </FormHelperText>
       )}
     </Stack>
-  )
-}
+  );
+};
 
 LabeledInput.propTypes = {
   sx: PropTypes.object,
@@ -70,11 +65,11 @@ LabeledInput.propTypes = {
   isRequired: PropTypes.bool,
   source: PropTypes.string,
   display: PropTypes.oneOf(['legend', 'label']),
-  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-}
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
 
 LabeledInput.defaultProps = {
-  display: 'label',
-}
+  display: 'label'
+};
 
-export default LabeledInput
+export default LabeledInput;

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

@@ -1,24 +1,24 @@
-import LabeledInput from './LabeledInput'
-import { SelectInput as RaSelectInput } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import LabeledInput from './LabeledInput';
+import { SelectInput as RaSelectInput } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const ApplicaStyledSelectInput = styled(RaSelectInput, {
   name: 'RaApplicaSelectArrayInput',
-  slot: 'Root',
+  slot: 'Root'
 })(({ label }) => ({
   '& legend': {
-    width: label === false ? 0 : 'auto',
-  },
-}))
+    width: label === false ? 0 : 'auto'
+  }
+}));
 const SelectInput = (props) => (
   <LabeledInput {...props}>
     <ApplicaStyledSelectInput />
   </LabeledInput>
-)
+);
 
 SelectInput.propTypes = {
   ...RaSelectInput.propTypes,
-  ...LabeledInput.propTypes,
-}
+  ...LabeledInput.propTypes
+};
 
-export default SelectInput
+export default SelectInput;

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

@@ -1,52 +1,48 @@
-import { maxLength as maxLengthValidator, useTranslate } from 'react-admin'
+import { maxLength as maxLengthValidator, useTranslate } from 'react-admin';
 
-import PropTypes from 'prop-types'
-import React from 'react'
-import TextInput from './TextInput'
-import { useController } from 'react-hook-form'
+import PropTypes from 'prop-types';
+import TextInput from './TextInput';
+import { useController } from 'react-hook-form';
 
 const SmartTextInput = ({ ...props }) => {
-  const translate = useTranslate()
-  const validationFn = maxLengthValidator(props?.maxLength, 'app.input.max_length_error')
-  const value = useController({ name: props?.source })?.field?.value
+  const translate = useTranslate();
+  const validationFn = maxLengthValidator(props?.maxLength, 'app.input.max_length_error');
+  const value = useController({ name: props?.source })?.field?.value;
 
-  let helperText = props.helperText
-  let validate = props.validate
+  let helperText = props.helperText;
+  let validate = props.validate;
 
   if (!validate) {
-    validate = [validationFn]
+    validate = [validationFn];
   } else if (Array.isArray(validate)) {
     if (validate.indexOf(validationFn) === -1) {
-      validate.push(validationFn)
+      validate.push(validationFn);
     }
   }
 
   const usedCharsInfo = translate('app.input.max_length_info', {
     count: value?.length || 0,
-    max: props?.maxLength,
-  })
+    max: props?.maxLength
+  });
 
   if (props?.maxLength) {
-    helperText =
-      helperText && helperText.length > 0
-        ? `${usedCharsInfo} - ${translate(helperText)}`
-        : usedCharsInfo
+    helperText = helperText && helperText.length > 0 ? `${usedCharsInfo} - ${translate(helperText)}` : usedCharsInfo;
   }
 
-  return <TextInput {...props} validate={validate} helperText={helperText} />
-}
+  return <TextInput {...props} validate={validate} helperText={helperText} />;
+};
 
-SmartTextInput.displayName = 'SmartTextInput'
+SmartTextInput.displayName = 'SmartTextInput';
 
 SmartTextInput.defaultProps = {
-  multiline: false,
-}
+  multiline: false
+};
 
 SmartTextInput.propTypes = {
   ...TextInput.propTypes,
   maxLength: PropTypes.number,
   multiline: PropTypes.bool,
-  rows: PropTypes.number,
-}
+  rows: PropTypes.number
+};
 
-export default SmartTextInput
+export default SmartTextInput;

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

@@ -1,20 +1,20 @@
-import LabeledInput from './LabeledInput'
-import { TextInput as RaTextInput } from 'react-admin'
-import React from 'react'
+import LabeledInput from './LabeledInput';
+import { TextInput as RaTextInput } from 'react-admin';
+import React from 'react';
 
 const TextInput = (props) => (
   <LabeledInput {...props}>
     <RaTextInput />
   </LabeledInput>
-)
+);
 
 TextInput.defaultProps = {
-  ...RaTextInput.defaultProps,
-}
+  ...RaTextInput.defaultProps
+};
 
 TextInput.propTypes = {
   ...RaTextInput.propTypes,
-  ...LabeledInput.propTypes,
-}
+  ...LabeledInput.propTypes
+};
 
-export default TextInput
+export default TextInput;

package/src/contexts/AppConfigContext.tsx

@@ -0,0 +1,67 @@
+import { createContext, useState } from 'react';
+
+import PropTypes from 'prop-types';
+
+export type InitialStateProps = {
+  openDialogs: string[];
+  getCurrentDialog: () => string | null;
+  openDialog: (id: string, callback: () => void) => void;
+  closeDialog: (id: string, callback: () => void) => void;
+};
+
+const initialState = {
+  /**
+   * This context is necessary to work with react-admin standard forms when executed
+   * inside a dialog and deeper in another resource handled inside a primary form.
+   *
+   * In this case, when using "EditInDialogButton" or "CreateInDialogButton" components,
+   * the dialog is opened and the form is rendered inside it. If the form has a subform
+   * and needs to know the associated resource.
+   */
+  openDialogs: [],
+  getCurrentDialog: () => null,
+  openDialog: (id: string, callback: () => void): void => {
+    throw new Error(`openDialog not yet ready for: ${id}, ${callback}`);
+  },
+  closeDialog: (id: string, callback: () => void): void => {
+    throw new Error(`closeDialog not yet ready for: ${id}, ${callback}`);
+  }
+};
+
+const AppConfigContext = createContext(initialState);
+
+const AppConfigProvider = ({ children }: { children: React.ReactNode }) => {
+  const [config, setConfig] = useState(initialState);
+  const openDialog = (id: string, callback: () => void) => {
+    setConfig((config: any) => ({ ...config, openDialogs: [...config.openDialogs, id] }));
+    if (callback) callback();
+  };
+  const closeDialog = (id: string, callback: () => void) => {
+    setConfig((config) => ({
+      ...config,
+      openDialogs: config.openDialogs.filter((modalId) => modalId !== id)
+    }));
+    if (callback) callback();
+  };
+
+  const getCurrentDialog = () => (config.openDialogs.length > 0 ? config.openDialogs[config.openDialogs.length - 1] : null);
+
+  return (
+    <AppConfigContext.Provider
+      value={{
+        ...config,
+        openDialog,
+        closeDialog,
+        getCurrentDialog
+      }}
+    >
+      {children}
+    </AppConfigContext.Provider>
+  );
+};
+
+AppConfigProvider.propTypes = {
+  children: PropTypes.node
+};
+
+export { AppConfigProvider, AppConfigContext };

package/src/contexts/ThemeConfigContext.jsx

@@ -1,6 +1,6 @@
-import PropTypes from 'prop-types'
-import { createContext } from 'react'
-import { useLocalStorage } from '../hooks'
+import PropTypes from 'prop-types';
+import { createContext } from 'react';
+import { useLocalStorage } from '../hooks';
 
 const initialState = {
   /**
@@ -82,30 +82,26 @@ const initialState = {
   /**
    * Default spacing for elements
    */
-  spacing: 2,
-}
+  spacing: 2
+};
 
-const ThemeConfigContext = createContext(initialState)
+const ThemeConfigContext = createContext(initialState);
 
-const isVerticalLayout = (layout) => layout === 'vertical'
-const isHorizontalLayout = (layout) => layout === 'horizontal'
+const isVerticalLayout = (layout) => layout === 'vertical';
+const isHorizontalLayout = (layout) => layout === 'horizontal';
 
 const ThemeConfigProvider = ({ children }) => {
-  const [config, setConfig] = useLocalStorage('theme-config', initialState)
-  const setFontFamily = (fontFamily) => setConfig((config) => ({ ...config, fontFamily }))
-  const setMenuOrientation = (menuOrientation) =>
-    setConfig((config) => ({ ...config, menuOrientation }))
-  const setMiniDrawer = (miniDrawer) => setConfig((config) => ({ ...config, miniDrawer }))
-  const setContainer = (container) => setConfig((config) => ({ ...config, container }))
-  const setMode = (mode) => setConfig((config) => ({ ...config, mode }))
-  const setPresetColor = (presetColor) => setConfig((config) => ({ ...config, presetColor }))
-  const setThemeDirection = (themeDirection) =>
-    setConfig((config) => ({ ...config, themeDirection }))
-  const setAppDefaultPath = (appDefaultPath) =>
-    setConfig((config) => ({ ...config, appDefaultPath }))
-  const setDrawerWidth = (drawerWidth) => setConfig((config) => ({ ...config, drawerWidth }))
-  const setHorizontalMaxItems = (horizontalMaxItems) =>
-    setConfig((config) => ({ ...config, horizontalMaxItems }))
+  const [config, setConfig] = useLocalStorage('theme-config', initialState);
+  const setFontFamily = (fontFamily) => setConfig((config) => ({ ...config, fontFamily }));
+  const setMenuOrientation = (menuOrientation) => setConfig((config) => ({ ...config, menuOrientation }));
+  const setMiniDrawer = (miniDrawer) => setConfig((config) => ({ ...config, miniDrawer }));
+  const setContainer = (container) => setConfig((config) => ({ ...config, container }));
+  const setMode = (mode) => setConfig((config) => ({ ...config, mode }));
+  const setPresetColor = (presetColor) => setConfig((config) => ({ ...config, presetColor }));
+  const setThemeDirection = (themeDirection) => setConfig((config) => ({ ...config, themeDirection }));
+  const setAppDefaultPath = (appDefaultPath) => setConfig((config) => ({ ...config, appDefaultPath }));
+  const setDrawerWidth = (drawerWidth) => setConfig((config) => ({ ...config, drawerWidth }));
+  const setHorizontalMaxItems = (horizontalMaxItems) => setConfig((config) => ({ ...config, horizontalMaxItems }));
   return (
     <ThemeConfigContext.Provider
       value={{
@@ -123,16 +119,16 @@ const ThemeConfigProvider = ({ children }) => {
         setHorizontalMaxItems,
 
         isVerticalLayout,
-        isHorizontalLayout,
+        isHorizontalLayout
       }}
     >
       {children}
     </ThemeConfigContext.Provider>
-  )
-}
+  );
+};
 
 ThemeConfigProvider.propTypes = {
-  children: PropTypes.node,
-}
+  children: PropTypes.node
+};
 
-export { ThemeConfigProvider, ThemeConfigContext }
+export { ThemeConfigProvider, ThemeConfigContext };

package/src/index.jsx

@@ -1,10 +1,10 @@
-export { default as Admin } from './Admin'
-export { default as ApplicaAdmin } from './ApplicaAdmin'
+export { default as Admin } from './Admin';
+export { default as ApplicaAdmin } from './ApplicaAdmin';
 
-export * from './hooks'
-export * from './components'
-export * from './contexts'
-export * from './utils'
+export * from './hooks';
+export * from './components';
+export * from './contexts';
+export * from './utils';
 
 export {
   ArrayInput,
@@ -22,6 +22,7 @@ export {
   DeleteWithConfirmButton,
   DeleteWithUndoButton,
   EditButton,
+  FieldTitle,
   email,
   Form,
   HttpError,
@@ -40,11 +41,11 @@ export {
   Resource,
   ResourceContextProvider,
   SaveButton,
-  SimpleFormIterator,
   SimpleFormIteratorContext,
   SimpleList,
   SingleFieldList,
   TopToolbar,
+  UrlField,
   useArrayInput,
   useAuthProvider,
   useDataProvider,
@@ -57,6 +58,7 @@ export {
   useNotify,
   usePermissions,
   useRecordContext,
+  useRefresh,
   useResourceContext,
   useResourceDefinition,
   useResourceDefinitions,
@@ -64,4 +66,4 @@ export {
   useUnselect,
   useUnselectAll,
   useUpdateMany
-} from 'react-admin'
+} from 'react-admin';

package/src/themes/overrides/Autocomplete.jsx

@@ -1,6 +1,6 @@
 // ==============================|| OVERRIDES - AUTOCOMPLETE ||============================== //
 
-export default function Autocomplete() {
+export default function Autocomplete(theme) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
@@ -13,6 +13,9 @@ export default function Autocomplete() {
           width: 'auto',
           height: 'auto',
         },
+        popper: {
+          border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[100]}`,
+        },
         clearIndicator: {
           width: 'auto',
           height: 'auto',

package/src/themes/overrides/index.jsx

@@ -55,7 +55,7 @@ export default function ComponentsOverrides(theme) {
     AccordionSummary(theme),
     Alert(theme),
     AlertTitle(),
-    Autocomplete(),
+    Autocomplete(theme),
     Badge(theme),
     Button(theme),
     ButtonBase(),

package/src/utils/index.js

@@ -1,2 +1,2 @@
-export * from './time'
-export * from './lang'
+export * from './time';
+export * from './lang';

package/src/utils/lang.js

@@ -1,12 +1,12 @@
 export function uuid() {
-  var d = new Date().getTime()
+  var d = new Date().getTime();
   if (window.performance && typeof window.performance.now === 'function') {
-    d += performance.now() //use high-precision timer if available
+    d += performance.now(); //use high-precision timer if available
   }
   var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = (d + Math.random() * 16) % 16 | 0
-    d = Math.floor(d / 16)
-    return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
-  })
-  return uuid
+    var r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+  });
+  return uuid;
 }

package/src/utils/time.js

@@ -1,13 +1,13 @@
-import dayjs from 'dayjs'
+import dayjs from 'dayjs';
 
 const parseTime = (time) => {
-  const args = time.split(':')
+  const args = time.split(':');
   if (args.length === 1) {
-    args.push('00')
+    args.push('00');
   }
 
-  const d = dayjs().hour(args[0]).minute(args[1])
-  return d
-}
+  const d = dayjs().hour(args[0]).minute(args[1]);
+  return d;
+};
 
-export { parseTime }
+export { parseTime };

package/dist/components/ActionsMenu.d.ts

@@ -1,15 +0,0 @@
-export default ActionsMenu;
-declare function ActionsMenu({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element | null;
-declare namespace ActionsMenu {
-    const propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        sx: PropTypes.Requireable<object>;
-        open: PropTypes.Requireable<object>;
-        disabledArrow: PropTypes.Requireable<boolean>;
-        arrow: PropTypes.Requireable<string>;
-    };
-}
-import PropTypes from 'prop-types';
-//# sourceMappingURL=ActionsMenu.d.ts.map

package/dist/components/ActionsMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsMenu.jsx"],"names":[],"mappings":";AA6BA;;mDAwCC;;;;;;;;;;sBAhEqB,YAAY"}