@applica-software-guru/react-admin 1.5.358 → 1.5.361

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.358"
+  "version": "1.5.361"
 }

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

@@ -1,11 +1,12 @@
-import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
 import { styled } from '@mui/material/styles';
-import { AutocompleteInputProps, AutocompleteInput as RaAutocompleteInput } from 'react-admin';
+import {
+  AutocompleteInput as RaAutocompleteInput,
+  AutocompleteInputProps as RaAutocompleteInputProps
+} from 'react-admin';
 
-// @ts-ignore
-const StyledAutocompleteInput = styled(RaAutocompleteInput, {
-  name: 'StyledAutocompleteInput',
-  root: 'root'
+const StyledAutocompleteInput = styled(RaAutocompleteInput as any, {
+  name: 'StyledAutocompleteInput'
 })(({ label }) => ({
   '& legend': {
     width: label === false ? 0 : 'auto'
@@ -15,6 +16,8 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   }
 }));
 
+type AutocompleteInputProps = RaAutocompleteInputProps & LabeledInputProps;
+
 function AutocompleteInput({ size = 'small', ...props }: AutocompleteInputProps): JSX.Element {
   // Sanitize props removing "perPage":
   // @ts-ignore

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

@@ -2,7 +2,7 @@ import { useAppConfig } from '@/components/AppStateProvider';
 import { useTheme } from '@emotion/react';
 import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
 import React, { PropsWithChildren } from 'react';
-import { FieldTitle } from 'react-admin';
+import { FieldTitle, useTranslate } from 'react-admin';
 import { useFormContext } from 'react-hook-form';
 
 /**
@@ -20,6 +20,7 @@ function LabeledArrayInput({
   ...props
 }: LabeledArrayInputProps): React.ReactElement {
   const theme = useTheme() as any;
+  const translate = useTranslate();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
   const { getFieldState, formState } = useFormContext();
@@ -73,7 +74,11 @@ function LabeledArrayInput({
           }}
           error={!!error}
         >
-          {helperText}
+          {React.isValidElement(helperText)
+            ? helperText
+            : typeof helperText === 'string'
+            ? translate(helperText, { _: helperText })
+            : helperText}
         </FormHelperText>
       ) : null}
     </Stack>

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

@@ -2,7 +2,7 @@ import { useAppConfig } from '@/components/AppStateProvider';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { CommonInputProps, FieldTitle, useInput } from 'react-admin';
+import { CommonInputProps, FieldTitle, useInput, useTranslate } from 'react-admin';
 
 function LabeledInput({
   label,
@@ -15,6 +15,7 @@ function LabeledInput({
   ...props
 }: LabeledInputProps): JSX.Element {
   const theme = useTheme();
+  const translate = useTranslate();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired, chip } = props;
   const {
@@ -73,7 +74,11 @@ function LabeledInput({
           }}
           error={invalid === true}
         >
-          {helperText}
+          {React.isValidElement(helperText)
+            ? helperText
+            : typeof helperText === 'string'
+            ? translate(helperText, { _: helperText })
+            : helperText}
         </FormHelperText>
       ) : null}
     </Stack>