diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 9cf62bd5dcafef..d78693628f969a 100644 --- 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 index c5c3c88977f0b4..f586612be64f6c 100644 --- 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, - 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 - | StyledComponent; + | StyledComponent + | React.FunctionComponent + | React.ComponentType; -export type StyledComponentInnerComponent> = - C extends StyledComponent - ? I - : C extends StyledComponent - ? I - : C; +export type StyledComponentInnerComponent = C extends StyledComponent< + infer I, + any, + any, + any +> + ? I + : C extends StyledComponent + ? I + : C; export type StyledComponentInnerOtherProps = C extends StyledComponent @@ -274,6 +280,13 @@ export interface ThemedStyledFunction< A extends keyof any = never, > extends ThemedStyledFunctionBase {} +export type CreateStyledComponent< + ComponentProps extends {}, + SpecificComponentProps extends {} = {}, + JSXProps extends {} = {}, + T extends object = {}, +> = ThemedStyledFunction, T, SpecificComponentProps & JSXProps>; + // Config to be used with withConfig export interface StyledConfig { // TODO: Add all types from the original StyledComponentWrapperProperties @@ -312,3 +325,22 @@ export type CreateMUIStyled< MuiStyledOptions extends object = {}, T extends object = {}, > = ThemedBaseStyledInterface>; + +export type PropsOf> = + JSX.LibraryManagedAttributes>; + +export interface MUIStyledComponent< + ComponentProps extends {}, + SpecificComponentProps extends {} = {}, + JSXProps extends {} = {}, +> extends React.FC { + withComponent>>( + component: C, + ): MUIStyledComponent, {}, { ref?: React.Ref> }>; + withComponent>>( + component: C, + ): MUIStyledComponent>; + withComponent( + tag: Tag, + ): MUIStyledComponent; +} diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts index 68c4776444e8ff..666555659c3d7e 100644 --- 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; + /** * 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 index 05a9d6b5b9f5b9..28360a82495028 100644 --- 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 index 565adfe6c00299..13f621541c474e 100644 --- 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"