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

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -2,7 +2,7 @@ import { useAppConfig } from '@/components/AppStateProvider';
 import { Toolbar } from '@/components/ra-forms';
 import { Edit } from '@mui/icons-material';
 import { Breakpoint, Dialog } from '@mui/material';
-import React, { useCallback, useState } from 'react';
+import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import {
   Button,
   EditContextProvider,
@@ -15,11 +15,12 @@ import {
   useResourceContext
 } from 'react-admin';
 
-type EditInDialogContentProps = EditControllerProps & {
-  onClose: () => void;
-  children: React.ReactElement;
-};
+type EditInDialogContentProps = EditControllerProps &
+  PropsWithChildren<{
+    onClose: () => void;
+  }>;
 function EditInDialogContent({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) {
+  const Child = Children.only(children);
   const notify = useNotify();
   const record = useRecordContext();
   const resource = useResourceContext();
@@ -63,16 +64,18 @@ function EditInDialogContent({ onClose, children, mutationMode = 'pessimistic',
         saving: saving
       }}
     >
-      {React.cloneElement(children, {
-        ...children.props,
-        modal: true,
-        toolbar: (
-          <Toolbar>
-            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
-            <SaveButton type="button" />
-          </Toolbar>
-        )
-      })}
+      {React.isValidElement(Child)
+        ? React.cloneElement(Child, {
+            ...Child.props,
+            modal: true,
+            toolbar: (
+              <Toolbar>
+                <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
+                <SaveButton type="button" />
+              </Toolbar>
+            )
+          })
+        : null}
     </EditContextProvider>
   );
 }
@@ -104,13 +107,13 @@ function EditInDialogButton({
   );
 }
 
-type EditInDialogButtonProps = EditControllerProps & {
-  fullWidth?: boolean;
-  maxWidth?: false | Breakpoint | undefined;
-  label?: string;
-  children: React.ReactElement;
-  style?: React.CSSProperties;
-};
+type EditInDialogButtonProps = EditControllerProps &
+  PropsWithChildren<{
+    fullWidth?: boolean;
+    maxWidth?: false | Breakpoint | undefined;
+    label?: string;
+    style?: React.CSSProperties;
+  }>;
 
 export { EditInDialogButton };
 export type { EditInDialogButtonProps };

package/src/components/ra-fields/ReadonlyField.tsx

@@ -3,7 +3,7 @@ import { useSx } from '@/hooks';
 import { InputLabel, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { get } from 'lodash';
-import React, { useMemo } from 'react';
+import React, { Children, PropsWithChildren, useMemo } from 'react';
 import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin';
 
 type StyledFieldProps = {
@@ -39,10 +39,9 @@ function BasicField({ source, defaultValue = ' ', ...props }: BasicFieldPro
   return <Typography {...props} dangerouslySetInnerHTML={{ __html: value && value !== null ? value : defaultValue }} />;
 }
 
-type ContentWrapperProps = {
+type ContentWrapperProps = PropsWithChildren<{
   title: string | boolean;
-  children: React.ReactNode;
-};
+}>;
 
 function ContentWrapper({ title, children }: ContentWrapperProps): JSX.Element | null {
   if (children === null || children === undefined) return null;
@@ -64,6 +63,7 @@ function ReadonlyField({
   tooltip: _tooltip,
   ...props
 }: ReadonlyFieldProps): JSX.Element {
+  const Child = Children.only(children);
   const { getCurrentDialog } = useAppState();
   const record = useRecordContext(props);
   const resource = useResourceContext(props as any);
@@ -87,28 +87,30 @@ function ReadonlyField({
           <FieldTitle label={label} source={source} resource={dialogResource || resource} />
         </InputLabel>
         <StyledField {...props}>
-          {React.cloneElement(children, {
-            source,
-            record,
-            defaultValue,
-            resource: dialogResource || resource,
-            sx
-          })}
+          {React.isValidElement(Child)
+            ? React.cloneElement(Child, {
+                ...Child.props,
+                source,
+                record,
+                defaultValue,
+                resource: dialogResource || resource,
+                sx
+              })
+            : null}
         </StyledField>
       </>
     </ContentWrapper>
   );
 }
 
-type ReadonlyFieldProps = {
+type ReadonlyFieldProps = PropsWithChildren<{
   defaultValue: any;
   tooltip: string | boolean | ((record: any) => string);
   source: string;
   label: string;
   name: string;
-  children: React.ReactElement<any, any>;
   fullWidth?: boolean;
-};
+}>;
 
 export { ReadonlyField };
 export type { ReadonlyFieldProps };

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

@@ -3,7 +3,7 @@ import { MainCard } from '@/components/MainCard';
 import { Toolbar } from '@/components/ra-forms/Toolbar';
 import { Grid, GridProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, { useMemo } from 'react';
+import React, { PropsWithChildren, useMemo } from 'react';
 import { Form, SaveButton, useResourceContext, useTranslate } from 'react-admin';
 
 /**
@@ -65,12 +65,11 @@ function Section({
   );
 }
 
-type StyledFormProps = {
-  children: React.ReactNode;
+type StyledFormProps = PropsWithChildren<{
   spacing?: number;
   defaultValues?: any;
   theme: any;
-};
+}>;
 
 const StyledForm = styled(Form, { slot: 'root' })(({ theme, spacing }: StyledFormProps) => ({
   backgroundColor: 'transparent',
@@ -87,20 +86,20 @@ const StyledForm = styled(Form, { slot: 'root' })(({ theme, spacing }: StyledFor
   }
 }));
 
-type CardFormProps = {
-  children: React.ReactNode;
+type CardFormProps = PropsWithChildren<{
   spacing?: number;
   defaultValues?: any;
-} & GridProps;
+}> &
+  GridProps;
 
-type SectionProps = {
-  children: React.ReactNode;
+type SectionProps = PropsWithChildren<{
   content?: boolean | undefined | null;
   title?: string | React.ReactNode | null;
   subheader?: string | React.ReactNode;
   secondary?: string | React.ReactNode;
   toolbar?: React.ReactNode | boolean;
-} & GridProps;
+}> &
+  GridProps;
 
 CardForm.Section = Section;
 

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

@@ -2,7 +2,7 @@
 import { CircularProgress, Stack } from '@mui/material';
 import { Theme, styled } from '@mui/material/styles';
 import _ from 'lodash';
-import { createContext, useCallback, useContext, useMemo } from 'react';
+import { PropsWithChildren, createContext, useCallback, useContext, useMemo } from 'react';
 import {
   CreateProps,
   Identifier,
@@ -17,11 +17,11 @@ import { useLocation } from 'react-router';
 type ICreateProps<
   RecordType extends Omit<RaRecord, 'id'> = any,
   ResultRecordType extends RaRecord = RecordType & { id: Identifier }
-> = CreateProps<RecordType, Error, ResultRecordType> & {
-  children: React.ReactNode;
-  useDefaults?: boolean;
-  queryOptions?: UseQueryOptions;
-};
+> = CreateProps<RecordType, Error, ResultRecordType> &
+  PropsWithChildren<{
+    useDefaults?: boolean;
+    queryOptions?: UseQueryOptions;
+  }>;
 
 type IResourceDefaultValue = object;
 const ResourceDefaultValueContext = createContext<IResourceDefaultValue>({});
@@ -70,7 +70,7 @@ function CreateWithDefaults(props: ICreateProps) {
     </Stack>
   ) : (
     <ResourceDefaultValueContext.Provider value={data ?? {}}>
-      <RaCreate {...passProps} />
+      <RaCreate {...(passProps as CreateProps)}>{props.children}</RaCreate>
     </ResourceDefaultValueContext.Provider>
   );
 }

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

@@ -4,6 +4,7 @@ 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,
@@ -12,9 +13,7 @@ import {
   TabProps
 } from 'react-admin';
 
-type StackTabProps = TabProps & {
-  children: React.ReactNode;
-};
+type StackTabProps = TabProps & PropsWithChildren<Record<string, never>>;
 
 const StyledTabbedForm = styled(RaTabbedForm, { slot: 'Root' })(({ theme }: { theme: any }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
@@ -28,7 +27,8 @@ 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}</>;
 }
 

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

@@ -1,7 +1,7 @@
 import { useAppConfig } from '@/components/AppStateProvider';
 import { useTheme } from '@emotion/react';
 import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { FieldTitle } from 'react-admin';
 import { useFormContext } from 'react-hook-form';
 
@@ -80,7 +80,7 @@ function LabeledArrayInput({
   );
 }
 
-type LabeledArrayInputProps = {
+type LabeledArrayInputProps = PropsWithChildren<{
   label?: string | boolean;
   addLabel?: boolean;
   resource?: string;
@@ -90,9 +90,8 @@ type LabeledArrayInputProps = {
   helperText?: string | boolean;
   divider?: boolean;
   sx?: SxProps;
-  children: React.ReactElement;
   fullWidth?: boolean;
-};
+}>;
 
 export { LabeledArrayInput };
 export type { LabeledArrayInputProps };

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

@@ -1,23 +1,22 @@
-import React from 'react';
+import React, { Children } from 'react';
 import {
   ReferenceArrayInput as RaReferenceArrayInput,
   ReferenceArrayInputProps as RaReferenceArrayInputProps
 } from 'react-admin';
 
+type ReferenceArrayInputProps = RaReferenceArrayInputProps;
+
 function ReferenceArrayInput({ children, ...props }: ReferenceArrayInputProps): JSX.Element {
+  const Child = Children.only(children);
   return (
     <RaReferenceArrayInput {...props}>
-      {React.cloneElement(children, {
+      {React.cloneElement(Child!, {
         ...props,
-        source: children.props.source || props.source
+        source: Child!.props.source || props.source
       })}
     </RaReferenceArrayInput>
   );
 }
 
-type ReferenceArrayInputProps = {
-  children: React.ReactElement;
-} & RaReferenceArrayInputProps;
-
 export { ReferenceArrayInput };
 export type { ReferenceArrayInputProps };

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

@@ -1,16 +1,15 @@
-import React from 'react';
+import React, { Children, PropsWithChildren } from 'react';
 import { ReferenceInput as RaReferenceInput, ReferenceInputProps as RaReferenceInputProps } from 'react-admin';
 
-type ReferenceInputProps = {
-  children: React.ReactElement;
-} & RaReferenceInputProps;
+type ReferenceInputProps = PropsWithChildren<Record<string, never>> & RaReferenceInputProps;
 
 function ReferenceInput({ children, ...props }: ReferenceInputProps): JSX.Element {
+  const Child = Children.only(children);
   return (
     <RaReferenceInput {...props}>
-      {React.cloneElement(children, {
+      {React.cloneElement(Child!, {
         ...props,
-        source: children.props.source || props.source
+        source: Child!.props.source || props.source
       })}
     </RaReferenceInput>
   );

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

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

package/src/index.jsx

@@ -3,6 +3,7 @@ export * from './ApplicaAdmin';
 export * from './components';
 export * from './hooks';
 export * from './i18n';
+export * from './themes';
 export * from './utils';
 
 export {
@@ -91,5 +92,3 @@ export {
   useUpdateMany,
   withLifecycleCallbacks
 } from 'react-admin';
-
-export { ThemeCustomization as ThemeProvider } from './themes';

package/src/playground/.prettierrc

@@ -1,6 +1,6 @@
 {
   "bracketSpacing": true,
-  "printWidth": 140,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "none",
   "tabWidth": 2,

package/src/playground/components/pages/CustomPage.jsx

@@ -1,4 +1,9 @@
-import { OnboardingModes, OnboardingProvider, OnboardingTip, useRestartOnboarding } from '@applica-software-guru/react-admin';
+import {
+  OnboardingModes,
+  OnboardingProvider,
+  OnboardingTip,
+  useRestartOnboarding
+} from '@applica-software-guru/react-admin';
 import { Button, Stack, Typography } from '@mui/material';
 
 function CustomPage() {

package/src/playground/components/ra-forms/DeviceForm.jsx

@@ -1,4 +1,11 @@
-import { ReadonlyField, SimpleForm, TextInput, required, useRecordContext, useThemeConfig } from '@applica-software-guru/react-admin';
+import {
+  ReadonlyField,
+  SimpleForm,
+  TextInput,
+  required,
+  useRecordContext,
+  useThemeConfig
+} from '@applica-software-guru/react-admin';
 import { Grid } from '@mui/material';
 
 function DeviceForm() {

package/src/playground/components/ra-lists/DeviceList.jsx

@@ -1,4 +1,12 @@
-import { Datagrid, DateField, List, SearchInput, TextField, useThemeConfig, useTranslate } from '@applica-software-guru/react-admin';
+import {
+  Datagrid,
+  DateField,
+  List,
+  SearchInput,
+  TextField,
+  useThemeConfig,
+  useTranslate
+} from '@applica-software-guru/react-admin';
 import { Alert } from '@mui/material';
 
 function AlertBox() {

package/src/playground/components/ra-lists/I18nMessageList.jsx

@@ -1,4 +1,12 @@
-import { ActionsField, BooleanField, Datagrid, List, RecordInput, SearchInput, TextField } from '@applica-software-guru/react-admin';
+import {
+  ActionsField,
+  BooleanField,
+  Datagrid,
+  List,
+  RecordInput,
+  SearchInput,
+  TextField
+} from '@applica-software-guru/react-admin';
 
 function I18nMessageList() {
   return (

package/src/themes/index.tsx

@@ -9,12 +9,11 @@ import { ThemeProps } from '@/themes/types';
 import { CssBaseline, StyledEngineProvider } from '@mui/material';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import { PropsWithChildren, useMemo } from 'react';
 
 type ThemeCustomizationProps = PropsWithChildren<{ themeOverrides: unknown }>;
 
-function ThemeCustomization({ themeOverrides, children }: ThemeCustomizationProps) {
+function ThemeCustomizationProvider({ themeOverrides, children }: ThemeCustomizationProps) {
   const _themeConfig = useThemeConfig();
   const { themeDirection, mode, presetColor, fontFamily } = _themeConfig;
 
@@ -81,9 +80,4 @@ function ThemeCustomization({ themeOverrides, children }: ThemeCustomizationProp
   );
 }
 
-ThemeCustomization.propTypes = {
-  children: PropTypes.node,
-  themeOverrides: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-};
-
-export { ThemeCustomization, getColors as getThemeColor, getShadow as getThemeShadow };
+export { ThemeCustomizationProvider, getColors as getThemeColor, getShadow as getThemeShadow };