[system] Use the CustomSystemProps interface in Box Props

mui · May 15, 2023 · 102d4e0 · 102d4e0
1 parent b969bf6
commit 102d4e0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -266,6 +266,7 @@ jobs:
             yarn workspace @mui/material typescript:module-augmentation
             yarn workspace @mui/base typescript:module-augmentation
             yarn workspace @mui/joy typescript:module-augmentation
+            yarn workspace @mui/system typescript:module-augmentation
 
       - restore_cache:
           name: Restore generated declaration files

diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts
@@ -6,7 +6,6 @@ import {
   AllSystemCSSProperties,
   ResponsiveStyleValue,
   OverwriteCSSProperties,
-  AliasesCSSProperties,
 } from '../styleFunctionSx';
 
 export type PropsFor<SomeStyleFunction> = SomeStyleFunction extends StyleFunction<infer Props>
@@ -141,7 +140,7 @@ export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFu
   ComposedOwnerState<T>
 > & { filterProps: string[] };
 
-export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
+export interface CustomSystemProps extends OverwriteCSSProperties {}
 
 export type SimpleSystemKeys = keyof PropsFor<
   ComposedStyleFunction<
@@ -168,7 +167,7 @@ export type SystemProps<Theme extends object = {}> = {
   [K in StandardSystemKeys]?:
     | ResponsiveStyleValue<AllSystemCSSProperties[K]>
     | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>);
-};
+} & CustomSystemProps;
 
 export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div', T extends object = Theme> {
   props: P &

diff --git a/packages/mui-system/test/typescript/moduleAugmentation/boxCustomSystemProps.spec.tsx b/packages/mui-system/test/typescript/moduleAugmentation/boxCustomSystemProps.spec.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Box } from '@mui/system';
+
+declare module '@mui/system' {
+  interface CustomSystemProps {
+    customProp?: 'customValue';
+  }
+}
+
+function CustomSystemPropsTest() {
+  <Box customProp="customValue" />;
+}
+
+function InvalidCustomSystemPropsValueTest() {
+  // @ts-expect-error otherCustomValue is not assignable to customValue
+  <Box customProp="otherCustomValue" />;
+}
+
+function UndefinedCustomSystemPropsTest() {
+  // @ts-expect-error otherCustomProp is not defined in CustomSystemProps
+  <Box otherCustomProp="customValue" />;
+}