[styled-engine-sc] Fix theme being of type any (#40200)

mui · Dec 15, 2023 · c06b102 · c06b102
1 parent b5a8ddf
commit c06b102
Showing 1 changed file with 67 additions and 14 deletions.
diff --git a/packages/mui-styled-engine-sc/src/index.d.ts b/packages/mui-styled-engine-sc/src/index.d.ts
@@ -292,32 +292,85 @@ export interface StyledConfig<O extends object = {}> {
   // TODO: Add all types from the original StyledComponentWrapperProperties
   componentId?: string;
   displayName?: string;
+  label?: string;
+  target?: string;
   shouldForwardProp?:
     | ((prop: keyof O, defaultValidatorFn: (prop: keyof O) => boolean) => boolean)
     | undefined;
 }
 
+/** Same as StyledConfig but shouldForwardProp must be a type guard */
+export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
+  componentId?: string;
+  displayName?: string;
+  label?: string;
+  shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
+  target?: string;
+}
+
 // same as ThemedBaseStyledInterface in styled-components, but with added options & common props for MUI components
 export interface ThemedBaseStyledInterface<
   MUIStyledCommonProps extends object,
   MuiStyledOptions extends object,
-  T extends object,
-> extends ThemedStyledComponentFactories<T> {
-  <C extends AnyStyledComponent>(
+  Theme extends object,
+> extends ThemedStyledComponentFactories<Theme> {
+  <
+    C extends React.ComponentClass<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
+  >(
     component: C,
-    options?: StyledConfig<any> & MuiStyledOptions,
-  ): ThemedStyledFunction<
-    StyledComponentInnerComponent<C>,
-    T,
-    StyledComponentInnerOtherProps<C> & MUIStyledCommonProps,
-    StyledComponentInnerAttrs<C>
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps,
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>;
+    },
+    Theme
   >;
-  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
-    // unfortunately using a conditional type to validate that it can receive a `theme?: Theme`
-    // causes tests to fail in TS 3.1
+
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(
     component: C,
-    options?: StyledConfig<any> & MuiStyledOptions,
-  ): ThemedStyledFunction<C, T, MUIStyledCommonProps>;
+    options?: StyledConfig<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
+  ): CreateStyledComponent<
+    PropsOf<C> & MUIStyledCommonProps,
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>;
+    },
+    Theme
+  >;
+
+  <
+    C extends React.JSXElementConstructor<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
+  >(
+    component: C,
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
+  ): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;
+
+  <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
+    component: C,
+    options?: StyledConfig<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
+  ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
+
+  <
+    Tag extends keyof JSX.IntrinsicElements,
+    ForwardedProps extends keyof JSX.IntrinsicElements[Tag] = keyof JSX.IntrinsicElements[Tag],
+  >(
+    tag: Tag,
+    options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps> & MuiStyledOptions,
+  ): CreateStyledComponent<
+    MUIStyledCommonProps,
+    Pick<JSX.IntrinsicElements[Tag], ForwardedProps>,
+    {},
+    Theme
+  >;
+
+  <Tag extends keyof JSX.IntrinsicElements>(
+    tag: Tag,
+    options?: StyledConfig<MUIStyledCommonProps> & MuiStyledOptions,
+  ): CreateStyledComponent<MUIStyledCommonProps, JSX.IntrinsicElements[Tag], {}, Theme>;
 }
 
 export type CreateMUIStyled<