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

package/dist/themes/index.d.ts

@@ -1,16 +1,9 @@
 import { getColors } from './getColors';
 import { getShadow } from './getShadow';
-import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
 type ThemeCustomizationProps = PropsWithChildren<{
     themeOverrides: unknown;
 }>;
 declare function ThemeCustomization({ themeOverrides, children }: ThemeCustomizationProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ThemeCustomization {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        themeOverrides: PropTypes.Requireable<object>;
-    };
-}
 export { ThemeCustomization, getColors as getThemeColor, getShadow as getThemeShadow };
 //# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,iBAAS,kBAAkB,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAiEhF;kBAjEQ,kBAAkB;;;;;;AAwE3B,OAAO,EAAE,kBAAkB,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,OAAO,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAEnD,KAAK,uBAAuB,GAAG,iBAAiB,CAAC;IAAE,cAAc,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,iBAAS,kBAAkB,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAiEhF;AAED,OAAO,EAAE,kBAAkB,EAAE,SAAS,IAAI,aAAa,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC"}

package/package.json

@@ -114,5 +114,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.228"
+  "version": "1.5.230"
 }

package/src/components/@extended/AnimateButton.tsx

@@ -1,12 +1,12 @@
 import { motion, useCycle } from 'framer-motion';
+import { PropsWithChildren } from 'react';
 
-type AnimateButtonProps = {
-  children: React.ReactNode;
+type AnimateButtonProps = PropsWithChildren<{
   type?: 'rotate' | 'slide' | 'scale';
   direction?: 'up' | 'down' | 'left' | 'right';
   offset?: number;
   scale?: number | { hover: number; tap: number };
-};
+}>;
 
 function AnimateButton({
   children,

package/src/components/@extended/Avatar.tsx

@@ -1,6 +1,7 @@
 import { getColors } from '@/themes/getColors';
 import { default as MuiAvatar } from '@mui/material/Avatar';
 import { Theme, styled, useTheme } from '@mui/material/styles';
+import { PropsWithChildren } from 'react';
 
 type GetColorStyleProps = {
   theme: any;
@@ -101,13 +102,12 @@ const AvatarStyle = styled(MuiAvatar, {
   })
 }));
 
-type AvatarProps = {
-  children: React.ReactNode;
+type AvatarProps = PropsWithChildren<{
   color: string;
   type: 'filled' | 'outlined' | 'combined';
   size: 'badge' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   variant: 'circular' | 'rounded' | 'square';
-};
+}>;
 
 function Avatar({ variant = 'circular', children, color = 'primary', type, size = 'md', ...others }: AvatarProps) {
   const theme = useTheme();

package/src/components/@extended/IconButton.tsx

@@ -2,7 +2,7 @@ import { getColors } from '@/themes/getColors';
 import { getShadow } from '@/themes/getShadow';
 import { default as MuiIconButton } from '@mui/material/IconButton';
 import { Theme, alpha, styled, useTheme } from '@mui/material/styles';
-import { forwardRef } from 'react';
+import { PropsWithChildren, forwardRef } from 'react';
 
 type GetColorStyleProps = {
   variant: string;
@@ -91,13 +91,12 @@ function getColorStyle({ variant, theme, color }: GetColorStyleProps) {
   }
 }
 
-type IconButtonStyleProps = {
+type IconButtonStyleProps = PropsWithChildren<{
   variant: string;
   shape: string;
-  children: React.ReactNode;
   color: string;
   theme: Theme;
-};
+}>;
 
 const IconButtonStyle = styled(MuiIconButton, {
   shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape'
@@ -143,12 +142,11 @@ const IconButtonStyle = styled(MuiIconButton, {
   ...getColorStyle({ variant, theme, color })
 }));
 
-type IconButtonProps = {
+type IconButtonProps = PropsWithChildren<{
   variant?: string;
   shape?: string;
-  children: React.ReactNode;
   color?: string;
-};
+}>;
 
 const IconButton = forwardRef(
   ({ variant = 'text', shape = 'square', children, color = 'primary', ...others }: IconButtonProps, ref) => {

package/src/components/@extended/LoadingButton.tsx

@@ -2,7 +2,7 @@ import { getColors } from '@/themes/getColors';
 import { getShadow } from '@/themes/getShadow';
 import { default as MuiLoadingButton } from '@mui/lab/LoadingButton';
 import { Theme, alpha, styled, useTheme } from '@mui/material/styles';
-import { forwardRef } from 'react';
+import { PropsWithChildren, forwardRef } from 'react';
 
 type GetColorStyleProps = {
   variant: string;
@@ -121,15 +121,14 @@ function getColorStyle({ variant, theme, color, loadingPosition }: GetColorStyle
   }
 }
 
-type LoadingButtonStyleProps = {
+type LoadingButtonStyleProps = PropsWithChildren<{
   variant: string;
   shape: string;
-  children: React.ReactNode;
   color: string;
   loading: boolean;
   loadingPosition: string;
   theme: Theme;
-};
+}>;
 
 const LoadingButtonStyle = styled(MuiLoadingButton, {
   shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant'
@@ -207,14 +206,13 @@ const LoadingButtonStyle = styled(MuiLoadingButton, {
   }
 }));
 
-type LoadingButtonProps = {
+type LoadingButtonProps = PropsWithChildren<{
   variant?: 'text' | 'outlined' | 'contained';
   shape: string;
-  children: React.ReactNode;
   loading: boolean;
   loadingPosition: 'center' | 'start' | 'end';
   color: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | undefined;
-};
+}>;
 
 const LoadingButton = forwardRef(
   (

package/src/components/@extended/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { getColors } from '@/themes/getColors';
 import { Box, Tooltip as MuiTooltip, tooltipClasses } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
+import { PropsWithChildren } from 'react';
 
 type GetVariantStyleProps = {
   color: string;
@@ -37,12 +38,11 @@ function getVariantStyle({ color, theme, labelColor }: GetVariantStyleProps) {
   }
 }
 
-type TooltipStyleProps = {
+type TooltipStyleProps = PropsWithChildren<{
   color: string;
   labelColor: string;
-  children: React.ReactNode;
   title: string;
-};
+}>;
 
 const TooltipStyle = styled(
   // @ts-ignore
@@ -54,12 +54,11 @@ const TooltipStyle = styled(
   ...(color && getVariantStyle({ color, theme, labelColor }))
 }));
 
-type TooltipProps = {
-  children: React.ReactNode;
+type TooltipProps = PropsWithChildren<{
   arrow: boolean;
   labelColor?: string;
   rest: any;
-};
+}>;
 
 function Tooltip({ children, arrow, labelColor = '', ...rest }: TooltipProps) {
   const theme = useTheme();

package/src/components/@extended/Transitions.tsx

@@ -1,12 +1,11 @@
 import { Box, Collapse, Fade, Grow, Slide, Zoom } from '@mui/material';
-import { forwardRef } from 'react';
+import { PropsWithChildren, forwardRef } from 'react';
 
-type TransitionsProps = {
-  children: React.ReactNode;
+type TransitionsProps = PropsWithChildren<{
   type?: 'grow' | 'fade' | 'collapse' | 'slide' | 'zoom';
   position?: 'top-left' | 'top-right' | 'top' | 'bottom-left' | 'bottom-right' | 'bottom';
   direction?: 'up' | 'down' | 'left' | 'right';
-};
+}>;
 
 const Transitions = forwardRef(
   ({ children, position = 'top-left', type = 'grow', direction = 'up', ...others }: TransitionsProps, ref) => {

package/src/components/ActionsMenu.tsx

@@ -1,7 +1,7 @@
 import { MenuPopover } from '@/components/MenuPopover';
 import { MoreHoriz, MoreVert } from '@mui/icons-material';
 import { IconButton, MenuItem, styled } from '@mui/material';
-import React, { Children, useCallback, useState } from 'react';
+import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 
 const BUTTON_STYLES = { width: '100%', justifyContent: 'flex-start' };
 
@@ -25,10 +25,7 @@ const StyledMenuPopover = styled(MenuPopover, {
   }
 }));
 
-type ActionsMenuProps = {
-  children: React.ReactNode;
-  horizontal?: boolean;
-};
+type ActionsMenuProps = PropsWithChildren<{ horizontal?: boolean }>;
 
 /**
  * Allows you to draw a menu of actions grouped within a popover.

package/src/components/AppStateProvider.tsx

@@ -28,7 +28,11 @@ const initialState: AppState = {
 
 const AppStateContext = createContext<AppState>(initialState);
 
-function AppStateProvider({ children }: { children: React.ReactNode }) {
+type AppStateProviderProps = {
+  children: React.ReactNode;
+};
+
+function AppStateProvider(props: AppStateProviderProps) {
   const [config, setConfig] = useState<AppState>(initialState);
   function openDialog(id: string, callback: () => void) {
     setConfig((config: AppState) => ({ ...config, openDialogs: [...config.openDialogs, id] }));
@@ -55,7 +59,7 @@ function AppStateProvider({ children }: { children: React.ReactNode }) {
         getCurrentDialog
       }}
     >
-      {children}
+      {props.children}
     </AppStateContext.Provider>
   );
 }

package/src/components/AuthCard.tsx

@@ -1,11 +1,11 @@
 import { MainCard } from '@/components/MainCard';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { PropsWithChildren } from 'react';
 
-type AuthCardProps = {
-  children: React.ReactNode;
-};
-function AuthCard({ children, ...other }: AuthCardProps) {
+type AuthCardProps = PropsWithChildren;
+
+function AuthCard({ children }: AuthCardProps) {
   const theme = useTheme();
   return (
     <MainCard
@@ -18,7 +18,6 @@ function AuthCard({ children, ...other }: AuthCardProps) {
         }
       }}
       content={false}
-      {...other}
       border={false}
       boxShadow
       // @ts-ignore

package/src/components/AuthWrapper.tsx

@@ -3,16 +3,15 @@ import { AuthCard } from '@/components/AuthCard';
 import { Footer } from '@/components/Layout/Footer';
 import { MainIcon } from '@/components/MainIcon';
 import { Box, Grid } from '@mui/material';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
-type AuthWrapperProps = {
+type AuthWrapperProps = PropsWithChildren<{
   version: string;
   name: string;
   copy?: string;
   background?: React.ReactNode | React.ComponentType;
-  children: React.ReactNode;
   logo?: React.ReactNode;
-};
+}>;
 
 function AuthWrapper({ version, name, copy, children, logo, background = AuthBackground }: AuthWrapperProps) {
   return (

package/src/components/Layout/MenuProvider.tsx

@@ -9,7 +9,7 @@ import {
   useResourceDefinitions,
   useTranslate
 } from 'ra-core';
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router';
 
 type MenuItem = {
@@ -252,13 +252,12 @@ const initialState: MenuProviderContextProps = {
   setMenu: notImplemented
 };
 
-type MenuProviderProps = {
+type MenuProviderProps = PropsWithChildren<{
   menu: MenuItem[];
-  children: React.ReactNode | React.ReactNode[];
-};
+}>;
 const MenuContext = createContext<MenuProviderContextProps>(initialState);
 
-function MenuConfigProvider({ menu, children }: MenuProviderProps): JSX.Element {
+function MenuConfigProvider({ menu, children }: MenuProviderProps) {
   const [menuConfig, setMenuConfig] = useState<MenuProviderContextProps>({ ...initialState, menu }) as any;
   function setMenu(menu: MenuItem[]) {
     setMenuConfig((menuConfig: MenuProviderContextProps) => ({ ...menuConfig, menu }));

package/src/components/Layout/Navigation/NavList.tsx

@@ -1,11 +1,9 @@
 import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
 import { useSx } from '@/hooks';
 import { Box, SxProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
 
-type NavListProps = {
-  sx?: SxProps;
-  children: React.ReactNode;
-};
+type NavListProps = PropsWithChildren<{ sx?: SxProps }>;
 
 function NavList(props: NavListProps): JSX.Element {
   const { horizontal } = useLayoutMediaState();

package/src/components/Layout/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { useLocalStorage } from '@/hooks';
-import { createContext, useContext } from 'react';
+import { PropsWithChildren, createContext, useContext } from 'react';
 
 type ThemeMode = 'light' | 'dark';
 type ThemeOrientation = 'vertical' | 'horizontal';
@@ -50,10 +50,8 @@ type ThemeConfig = {
   isHorizontalLayout: (layout: ThemeDirection) => boolean;
 };
 
-type ThemeProvierProps = {
-  children: React.ReactNode;
-  initialConfig: ThemeConfig;
-};
+type ThemeProvierProps = PropsWithChildren<{ initialConfig: ThemeConfig }>;
+
 function notImplemented(): void {
   throw new Error('Method must be implemented');
 }

package/src/components/MenuPopover/MenuPopover.tsx

@@ -2,15 +2,14 @@ import { StyledArrow } from './styles';
 import { getPosition } from '@/components/MenuPopover/getPosition';
 import { Arrow } from '@/components/MenuPopover/types';
 import { Popover } from '@mui/material';
-import React from 'react';
+import { PropsWithChildren } from 'react';
 
-type MenuPopoverProps = {
+type MenuPopoverProps = PropsWithChildren<{
   open: HTMLElement;
-  children: React.ReactNode;
   arrow?: Arrow;
   disabledArrow?: boolean;
   sx?: object;
-};
+}>;
 
 function MenuPopover({ open, children, arrow = 'top-right', disabledArrow, sx, ...other }: MenuPopoverProps) {
   const { style, anchorOrigin, transformOrigin } = getPosition(arrow);

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

@@ -4,7 +4,7 @@ import ContentAdd from '@mui/icons-material/Add';
 import { Dialog, Fab, useMediaQuery } from '@mui/material';
 import { SxProps, Theme, styled } from '@mui/material/styles';
 import clsx from 'clsx';
-import React, { useCallback, useState } from 'react';
+import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import {
   Button,
   CreateButtonClasses,
@@ -110,6 +110,7 @@ function CreateInDialogContent({
   onError,
   ...props
 }: CreateInDialogContentProps) {
+  const Child = Children.only(children);
   const queryClient = useQueryClient();
   const resource = useResourceContext();
   const redirect = useRedirect();
@@ -173,22 +174,24 @@ function CreateInDialogContent({
         } as CreateControllerResult
       }
     >
-      {React.cloneElement(children, {
-        ...children.props,
-        modal: true,
-        toolbar: (
-          <Toolbar>
-            <Button
-              variant="text"
-              size="medium"
-              label="ra.action.cancel"
-              onClick={onClose}
-              disabled={createProps?.saving}
-            />
-            <SaveButton type="button" disabled={createProps?.saving} />
-          </Toolbar>
-        )
-      })}
+      {React.isValidElement(Child)
+        ? React.cloneElement(Child, {
+            ...Child.props,
+            modal: true,
+            toolbar: (
+              <Toolbar>
+                <Button
+                  variant="text"
+                  size="medium"
+                  label="ra.action.cancel"
+                  onClick={onClose}
+                  disabled={createProps?.saving}
+                />
+                <SaveButton type="button" disabled={createProps?.saving} />
+              </Toolbar>
+            )
+          })
+        : null}
     </CreateContextProvider>
   );
 }
@@ -211,55 +214,55 @@ const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.ro
   }
 }));
 
-type CreateInDialogButtonProps = CreateControllerProps & {
-  fullWidth?: boolean;
-  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-  label?: string;
-  record?: any;
-  redirect?: RedirectionSideEffect;
-  scrollToTop?: boolean;
-  className?: string;
-  sx?: SxProps;
-  style?: React.CSSProperties;
-  children: React.ReactElement;
-  /**
-   * If set to false, the button will always render as a regular button, regardless of the screen size.
-   */
-  fab: boolean;
-  /**
-   * @deprecated Use mutationOptions.onSubmit instead
-   */
-  onSubmit?: (record: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onSuccess instead
-   */
-  onSuccess?: (data: any) => void;
-  /**
-   *
-   * @deprecated Use mutationOptions.onError instead
-   */
-  onError?: (error: any) => void;
-};
+type CreateInDialogButtonProps = CreateControllerProps &
+  PropsWithChildren<{
+    fullWidth?: boolean;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    label?: string;
+    record?: any;
+    redirect?: RedirectionSideEffect;
+    scrollToTop?: boolean;
+    className?: string;
+    sx?: SxProps;
+    style?: React.CSSProperties;
+    /**
+     * If set to false, the button will always render as a regular button, regardless of the screen size.
+     */
+    fab: boolean;
+    /**
+     * @deprecated Use mutationOptions.onSubmit instead
+     */
+    onSubmit?: (record: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onSuccess instead
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     *
+     * @deprecated Use mutationOptions.onError instead
+     */
+    onError?: (error: any) => void;
+  }>;
 
-type CreateInDialogContentProps = CreateControllerProps & {
-  onClose: () => void;
-  record?: any;
-  redirect: RedirectionSideEffect | boolean | undefined;
-  children: React.ReactElement;
-  /**
-   * You can use it to handle the form submission yourself.
-   * Good luck with that.
-   */
-  onSubmit?: (record: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onSuccess instead
-   */
-  onSuccess?: (data: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onError instead
-   */
-  onError?: (error: any) => void;
-};
+type CreateInDialogContentProps = CreateControllerProps &
+  PropsWithChildren<{
+    onClose: () => void;
+    record?: any;
+    redirect: RedirectionSideEffect | boolean | undefined;
+    /**
+     * You can use it to handle the form submission yourself.
+     * Good luck with that.
+     */
+    onSubmit?: (record: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onSuccess instead
+     */
+    onSuccess?: (data: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onError instead
+     */
+    onError?: (error: any) => void;
+  }>;
 
 export { CreateInDialogButton };
 export type { CreateInDialogButtonProps };

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