Merge branch 'next' into confirm-record-representation

Author: djhi

docs/AppTheme.md

@@ -356,6 +356,24 @@ const theme = deepmerge(defaultTheme, {
 });
 ```
 
+This also works with many React Admin components. For instance, here's how to change the icon for all `<SaveButton>`:
+
+```tsx
+import { defaultTheme } from 'react-admin';
+import { deepmerge } from '@mui/utils';
+import CheckIcon from '@mui/icons-material/Check';
+
+const theme = deepmerge(defaultTheme, {
+    components: {
+        RaSaveButton: {
+            defaultProps: {
+                icon: <CheckIcon />,
+            },
+        },
+    }
+});
+```
+
 ## Customizing The Sidebar Width
 
 You can specify the `Sidebar` width by setting the `width` and `closedWidth` properties on your custom Material UI theme:
@@ -423,10 +441,11 @@ A `theme` object can contain the following keys:
 
 **Tip**: Check [Material UI default theme documentation](https://mui.com/material-ui/customization/default-theme/) to see the default values and meaning for these keys.
 
-```jsx
+```tsx
 import { lime, purple } from '@mui/material/colors';
+import type { ThemeOptions } from '@mui/material';
 
-const theme = {
+const theme: ThemeOptions = {
   palette: {
     primary: {
       main: '#FF5733',
@@ -514,10 +533,10 @@ const myTheme = deepmerge(defaultTheme, {
 Here is the default theme:
 
 ```tsx
-import { RaThemeOptions } from './types';
+import type { ThemeOptions } from '@mui/material';
 import { deepmerge } from '@mui/utils';
 
-const defaultThemeInvariants = {
+const defaultThemeInvariants: ThemeOptions = {
     typography: {
         h6: {
             fontWeight: 400,
@@ -578,7 +597,7 @@ const defaultThemeInvariants = {
     },
 };
 
-export const defaultLightTheme: RaThemeOptions = deepmerge(
+export const defaultLightTheme: ThemeOptions = deepmerge(
     defaultThemeInvariants,
     {
         palette: {
@@ -607,7 +626,7 @@ export const defaultLightTheme: RaThemeOptions = deepmerge(
     }
 );
 
-export const defaultDarkTheme: RaThemeOptions = deepmerge(
+export const defaultDarkTheme: ThemeOptions = deepmerge(
     defaultThemeInvariants,
     {
         palette: {
@@ -623,5 +642,4 @@ export const defaultDarkTheme: RaThemeOptions = deepmerge(
 );
 
 export const defaultTheme = defaultLightTheme;
-
 ```

packages/ra-ui-materialui/src/Labeled.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { ElementType, ReactElement } from 'react';
+import type { ElementType, ReactElement } from 'react';
 import {
     Stack,
-    StackProps,
-    Theme,
+    type StackProps,
+    type Theme,
     Typography,
-    TypographyProps,
+    type TypographyProps,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { Property } from 'csstype';
+import { type ComponentsOverrides, styled } from '@mui/material/styles';
+import { type Property } from 'csstype';
 import clsx from 'clsx';
 
 import { FieldTitle } from 'ra-core';
-import { ResponsiveStyleValue } from '@mui/system';
+import { useThemeProps, type ResponsiveStyleValue } from '@mui/system';
 
 /**
  * Wrap a field or an input with a label if necessary.
@@ -26,57 +26,65 @@ import { ResponsiveStyleValue } from '@mui/system';
  *     <FooComponent source="title" />
  * </Labeled>
  */
-export const Labeled = ({
-    children,
-    className = '',
-    color,
-    component = 'span',
-    fullWidth,
-    isRequired,
-    label,
-    resource,
-    source,
-    TypographyProps,
-    ...rest
-}: LabeledProps) => (
-    <Root
-        // @ts-ignore https://github.com/mui/material-ui/issues/29875
-        component={component}
-        className={clsx(className, {
-            [LabeledClasses.fullWidth]: fullWidth,
-        })}
-        {...rest}
-    >
-        {label !== false &&
-        children.props.label !== false &&
-        typeof children.type !== 'string' &&
-        // @ts-ignore
-        children.type?.displayName !== 'Labeled' &&
-        // @ts-ignore
-        children.type?.displayName !== 'Labeled' ? (
-            <Typography
-                sx={
-                    color
-                        ? undefined
-                        : {
-                              color: theme => theme.palette.text.secondary,
-                          }
-                }
-                color={color}
-                className={LabeledClasses.label}
-                {...TypographyProps}
-            >
-                <FieldTitle
-                    label={label || children.props.label}
-                    source={source || children.props.source}
-                    resource={resource}
-                    isRequired={isRequired}
-                />
-            </Typography>
-        ) : null}
-        {children}
-    </Root>
-);
+export const Labeled = (inProps: LabeledProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+    const {
+        children,
+        className = '',
+        color,
+        component = 'span',
+        fullWidth,
+        isRequired,
+        label,
+        resource,
+        source,
+        TypographyProps,
+        ...rest
+    } = props;
+
+    return (
+        <Root
+            // @ts-ignore https://github.com/mui/material-ui/issues/29875
+            component={component}
+            className={clsx(className, {
+                [LabeledClasses.fullWidth]: fullWidth,
+            })}
+            {...rest}
+        >
+            {label !== false &&
+            children.props.label !== false &&
+            typeof children.type !== 'string' &&
+            // @ts-ignore
+            children.type?.displayName !== 'Labeled' &&
+            // @ts-ignore
+            children.type?.displayName !== 'Labeled' ? (
+                <Typography
+                    sx={
+                        color
+                            ? undefined
+                            : {
+                                  color: theme => theme.palette.text.secondary,
+                              }
+                    }
+                    color={color}
+                    className={LabeledClasses.label}
+                    {...TypographyProps}
+                >
+                    <FieldTitle
+                        label={label || children.props.label}
+                        source={source || children.props.source}
+                        resource={resource}
+                        isRequired={isRequired}
+                    />
+                </Typography>
+            ) : null}
+            {children}
+        </Root>
+    );
+};
 
 Labeled.displayName = 'Labeled';
 
@@ -121,3 +129,22 @@ const Root = styled(Stack, {
         marginBottom: '0.2em',
     },
 });
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        RaLabeled: 'root' | 'label' | 'fullWidth';
+    }
+
+    interface ComponentsPropsList {
+        RaLabeled: Partial<LabeledProps>;
+    }
+
+    interface Components {
+        RaLabeled?: {
+            defaultProps?: ComponentsPropsList['RaLabeled'];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >['RaLabeled'];
+        };
+    }
+}

packages/ra-ui-materialui/src/Link.tsx

@@ -1,13 +1,22 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { Link as RRLink, LinkProps as RRLinkProps } from 'react-router-dom';
+import {
+    Link as RRLink,
+    type LinkProps as RRLinkProps,
+} from 'react-router-dom';
 import {
     styled,
     Link as MuiLink,
-    LinkProps as MuiLinkProps,
+    type LinkProps as MuiLinkProps,
+    type ComponentsOverrides,
+    useThemeProps,
 } from '@mui/material';
 
-export const Link = (props: LinkProps) => {
+export const Link = (inProps: LinkProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
     const { to, children, className, ...rest } = props;
 
     return (
@@ -28,10 +37,32 @@ export const LinkClasses = {
     link: `${PREFIX}-link`,
 };
 
-const StyledMuiLink = styled(MuiLink)({}) as typeof MuiLink; // @see https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
+const StyledMuiLink = styled(MuiLink)({
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+}) as typeof MuiLink; // @see https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop
 
 // @see https://mui.com/material-ui/guides/composition/#with-typescript
 export interface LinkProps
     extends MuiLinkProps<React.ElementType<any>, RRLinkProps> {
     className?: string;
 }
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        RaLink: 'root' | 'link';
+    }
+
+    interface ComponentsPropsList {
+        RaLink: Partial<LinkProps>;
+    }
+
+    interface Components {
+        RaLink?: {
+            defaultProps?: ComponentsPropsList['RaLink'];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >['RaLink'];
+        };
+    }
+}

packages/ra-ui-materialui/src/auth/AuthError.tsx

@@ -1,11 +1,21 @@
 import * as React from 'react';
-import { styled, SxProps } from '@mui/material';
+import {
+    type ComponentsOverrides,
+    styled,
+    type SxProps,
+    type Theme,
+    useThemeProps,
+} from '@mui/material';
 import LockIcon from '@mui/icons-material/Lock';
 import { useTranslate } from 'ra-core';
 import { Button } from '../button';
 import { Link } from 'react-router-dom';
 
-export const AuthError = (props: AuthErrorProps) => {
+export const AuthError = (inProps: AuthErrorProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
     const {
         className,
         title = 'ra.page.error',
@@ -31,7 +41,7 @@ export interface AuthErrorProps {
     className?: string;
     title?: string;
     message?: string;
-    sx?: SxProps;
+    sx?: SxProps<Theme>;
 }
 
 const PREFIX = 'RaAuthError';
@@ -63,3 +73,22 @@ const Root = styled('div', {
         margin: '0 1em',
     },
 }));
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        RaAuthError: 'root' | 'message';
+    }
+
+    interface ComponentsPropsList {
+        RaAuthError: Partial<AuthErrorProps>;
+    }
+
+    interface Components {
+        RaAuthError?: {
+            defaultProps?: ComponentsPropsList['RaAuthError'];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >['RaAuthError'];
+        };
+    }
+}