[system] Improve the createBox types (mui#35532)

packages/mui-joy/src/Box/Box.tsx

@@ -1,15 +1,14 @@
 import { createBox } from '@mui/system';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
-import { BoxTypeMap } from './BoxProps';
+import { Theme } from '../styles/types';
 import defaultTheme from '../styles/defaultTheme';
 
-const Box = createBox({
+const Box = createBox<Theme>({
   defaultTheme,
   defaultClassName: 'JoyBox-root',
   generateClassName: ClassNameGenerator.generate,
-}) as OverridableComponent<BoxTypeMap>;
+});
 
 Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

packages/mui-joy/src/Box/BoxProps.ts

@@ -1,28 +1,10 @@
 import { OverrideProps } from '@mui/types';
-import { SxProps, SystemProps } from '@mui/system';
+import { BoxTypeMap } from '@mui/system';
 import { Theme } from '../styles/types';
 
 export type BoxSlot = 'root';
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
-    SystemProps<Theme> & {
-      children?: React.ReactNode;
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: React.ElementType;
-      ref?: React.Ref<unknown>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: D;
-}
-
 export type BoxProps<
   D extends React.ElementType = BoxTypeMap['defaultComponent'],
   P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D>;
+> = OverrideProps<BoxTypeMap<P, D, Theme>, D>;

packages/mui-material/src/Box/Box.d.ts

@@ -1,24 +1,7 @@
-import { SxProps, SystemProps } from '@mui/system';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { Theme } from '../styles';
+import { createBox, BoxTypeMap } from '@mui/system';
+import { OverrideProps } from '../OverridableComponent';
+import { Theme as MaterialTheme } from '../styles';
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
-    SystemProps<Theme> & {
-      children?: React.ReactNode;
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: React.ElementType;
-      ref?: React.Ref<unknown>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: D;
-}
 /**
  *
  * Demos:
@@ -29,11 +12,11 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * - [Box API](https://mui.com/material-ui/api/box/)
  */
-declare const Box: OverridableComponent<BoxTypeMap>;
+declare const Box: ReturnType<typeof createBox<MaterialTheme>>;
 
 export type BoxProps<
   D extends React.ElementType = BoxTypeMap['defaultComponent'],
   P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D>;
+> = OverrideProps<BoxTypeMap<P, D, MaterialTheme>, D>;
 
 export default Box;

packages/mui-material/src/Box/Box.spec.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import { Box as SystemBox, createBox } from '@mui/system';
+import { expectType } from '@mui/types';
+import { createTheme } from '@mui/material/styles';
 
 function ThemeValuesCanBeSpread() {
   <Box
@@ -21,3 +24,11 @@ function ThemeValuesCanBeSpread() {
     })}
   />;
 }
+
+// Compatibility with Material UI's Box
+const defaultTheme = createTheme({});
+const CustomBox = createBox({ defaultTheme });
+expectType<typeof Box, typeof CustomBox>(CustomBox);
+
+// @ts-expect-error System's Box has different type than Material UI's Box
+expectType<typeof SystemBox, typeof CustomBox>(CustomBox);

packages/mui-system/src/Box/Box.d.ts

@@ -170,9 +170,9 @@ export type SystemProps<Theme extends object = {}> = {
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
 };
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
+export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T extends object = Theme> {
   props: P &
-    SystemProps<Theme> & {
+    SystemProps<T> & {
       children?: React.ReactNode;
       /**
        * The component used for the root node.
@@ -183,7 +183,7 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
       /**
        * The system prop that allows defining system overrides as well as additional CSS styles.
        */
-      sx?: SxProps<Theme>;
+      sx?: SxProps<T>;
     };
   defaultComponent: D;
 }

packages/mui-system/src/createBox.d.ts

@@ -1,7 +1,12 @@
-import Box from './Box';
+import { OverridableComponent } from '@mui/types';
+import { BoxTypeMap } from './Box';
+import { Theme as SystemTheme } from './createTheme';
 
-export default function createBox(options?: {
-  defaultTheme: object;
+export default function createBox<
+  T extends object = SystemTheme,
+  AdditionalProps extends Record<string, unknown> = {},
+>(options?: {
+  defaultTheme: T;
   defaultClassName?: string;
   generateClassName?: (componentName: string) => string;
-}): typeof Box;
+}): OverridableComponent<BoxTypeMap<AdditionalProps, 'div', T>>;

scripts/generateProptypes.ts

@@ -46,6 +46,7 @@ const useExternalPropsFromInputBase = [
  */
 const useExternalDocumentation: Record<string, '*' | readonly string[]> = {
   Button: ['disableRipple'],
+  Box: ['component', 'sx'],
   // `classes` is always external since it is applied from a HOC
   // In DialogContentText we pass it through
   // Therefore it's considered "unused" in the actual component but we still want to document it.