[styled-engine-sc] Fix TS issues because of missing types (#39395)

mui · Oct 17, 2023 · 2fdbc73 · 2fdbc73
1 parent 8937597
commit 2fdbc73
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 14 deletions.
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
@@ -40,14 +40,15 @@
   "dependencies": {
     "@babel/runtime": "^7.23.1",
     "csstype": "^3.1.2",
+    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@mui-internal/test-utils": "^1.0.0",
     "@types/chai": "^4.3.6",
+    "@types/hoist-non-react-statics": "^3.3.2",
     "@types/react": "^18.2.23",
     "chai": "^4.3.10",
-    "hoist-non-react-statics": "^3.3.2",
     "react": "^18.2.0",
     "styled-components": "^6.0.0"
   },

diff --git a/packages/mui-styled-engine-sc/src/index.d.ts b/packages/mui-styled-engine-sc/src/index.d.ts
@@ -154,7 +154,7 @@ type StyledComponentPropsWithAs<
 
 export type StyledComponent<
   C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-  T extends object,
+  T extends object = {},
   O extends object = {},
   A extends keyof any = never,
 > = // the "string" allows this to be used as an object key
@@ -166,14 +166,20 @@ export type StyledComponent<
 // any doesn't count as assignable to never in the extends clause, and we default A to never
 export type AnyStyledComponent =
   | StyledComponent<any, any, any, any>
-  | StyledComponent<any, any, any>;
+  | StyledComponent<any, any, any>
+  | React.FunctionComponent<any>
+  | React.ComponentType<any>;
 
-export type StyledComponentInnerComponent<C extends React.ComponentType<any>> =
-  C extends StyledComponent<infer I, any, any, any>
-    ? I
-    : C extends StyledComponent<infer I, any, any>
-    ? I
-    : C;
+export type StyledComponentInnerComponent<C extends AnyStyledComponent> = C extends StyledComponent<
+  infer I,
+  any,
+  any,
+  any
+>
+  ? I
+  : C extends StyledComponent<infer I, any, any>
+  ? I
+  : C;
 
 export type StyledComponentInnerOtherProps<C extends AnyStyledComponent> =
   C extends StyledComponent<any, any, infer O, any>
@@ -274,6 +280,13 @@ export interface ThemedStyledFunction<
   A extends keyof any = never,
 > extends ThemedStyledFunctionBase<C, T, O, A> {}
 
+export type CreateStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+  T extends object = {},
+> = ThemedStyledFunction<React.ComponentType<ComponentProps>, T, SpecificComponentProps & JSXProps>;
+
 // Config to be used with withConfig
 export interface StyledConfig<O extends object = {}> {
   // TODO: Add all types from the original StyledComponentWrapperProperties
@@ -312,3 +325,22 @@ export type CreateMUIStyled<
   MuiStyledOptions extends object = {},
   T extends object = {},
 > = ThemedBaseStyledInterface<MUIStyledCommonProps, MuiStyledOptions, AnyIfEmpty<T>>;
+
+export type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
+  JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+
+export interface MUIStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps> {
+  withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C,
+  ): MUIStyledComponent<ComponentProps & PropsOf<C>, {}, { ref?: React.Ref<InstanceType<C>> }>;
+  withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
+    component: C,
+  ): MUIStyledComponent<ComponentProps & PropsOf<C>>;
+  withComponent<Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag,
+  ): MUIStyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>;
+}
diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts
@@ -11,6 +11,12 @@ export { default as StyledEngineProvider } from './StyledEngineProvider';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
 
+export type MUIStyledComponent<
+  ComponentProps extends {},
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {},
+> = StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
+
 /**
  * For internal usage in `@mui/system` package
  */

diff --git a/packages/mui-system/src/Container/createContainer.tsx b/packages/mui-system/src/Container/createContainer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Interpolation, StyledComponent } from '@mui/styled-engine';
+import { Interpolation, MUIStyledComponent as StyledComponent } from '@mui/styled-engine';
 import { OverridableComponent } from '@mui/types';
 import {
   unstable_capitalize as capitalize,

diff --git a/yarn.lock b/yarn.lock
@@ -3739,10 +3739,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+"@types/hoist-non-react-statics@^3.3.1", "@types/hoist-non-react-statics@^3.3.2":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.3.tgz#8bb41d9a88164f82dd2745ff05e637e655f34d19"
+  integrity sha512-Wny3a2UXn5FEA1l7gc6BbpoV5mD1XijZqgkp4TRgDCDL5r3B5ieOFGUX5h3n78Tr1MEG7BfvoM8qeztdvNU0fw==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"