fix: wrapIcon has type error on Ref (#648)

* fix * do change without prettier * more type fix
microsoft · Sep 20, 2023 · 7b0f70d · 7b0f70d
1 parent 9b8ea7a
commit 7b0f70d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/packages/react-icons/src/utils/FluentIconsProps.types.ts b/packages/react-icons/src/utils/FluentIconsProps.types.ts
@@ -1,9 +1,14 @@
 import * as React from "react";
 
-export type FluentIconsProps<TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>> 
-= TBaseAttributes & React.RefAttributes<HTMLElement> & {
-	primaryFill?: string
-	className?: string
-	filled?: boolean
-	title?: string
-}
+export type FluentIconsProps<
+  TBaseAttributes extends
+    | React.SVGAttributes<SVGElement>
+    | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>,
+  TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement
+> = TBaseAttributes &
+  React.RefAttributes<TRefType> & {
+    primaryFill?: string;
+    className?: string;
+    filled?: boolean;
+    title?: string;
+  };
diff --git a/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx b/packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
@@ -76,12 +76,12 @@ export type CreateFluentFontIconOptions = {
     flipInRtl?: boolean;
 }
 
-export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} {
-    const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} = (props) => {
+export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & { codepoint: string} {
+    const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & { codepoint: string} = (props) => {
         useStaticStyles();
         const styles = useRootStyles();
         const className = mergeClasses(styles.root, styles[font], props.className);
-        const state = useIconState<React.HTMLAttributes<HTMLElement>>({...props, className}, { flipInRtl: options?.flipInRtl });
+        const state = useIconState<React.HTMLAttributes<HTMLElement>, HTMLElement>({...props, className}, { flipInRtl: options?.flipInRtl });
 
 
         // We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`

diff --git a/packages/react-icons/src/utils/useIconState.tsx b/packages/react-icons/src/utils/useIconState.tsx
@@ -20,13 +20,21 @@ export type UseIconStateOptions = {
   flipInRtl?: boolean;
 }
 
-export const useIconState = <TBaseAttributes extends (React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement>) = React.SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>, options?: UseIconStateOptions): Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'> => {
+export const useIconState = <
+  TBaseAttributes extends
+    | React.SVGAttributes<SVGElement>
+    | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>,
+  TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement,
+>(
+  props: FluentIconsProps<TBaseAttributes, TRefType>,
+  options?: UseIconStateOptions,
+): Omit<FluentIconsProps<TBaseAttributes, TRefType>, 'primaryFill'> => {
     const { title, primaryFill = "currentColor", ...rest } = props;
     const state = {
       ...rest,
       title: undefined,
       fill: primaryFill
-    } as Omit<FluentIconsProps<TBaseAttributes>, 'primaryFill'>;
+    } as Omit<FluentIconsProps<TBaseAttributes, TRefType>, 'primaryFill'>;
 
     const styles = useRootStyles();
     const iconContext = useIconContext();

diff --git a/packages/react-icons/src/utils/wrapIcon.tsx b/packages/react-icons/src/utils/wrapIcon.tsx
@@ -4,7 +4,7 @@ import { useIconState } from "./useIconState";
 import { CreateFluentIconOptions, FluentIcon } from "./createFluentIcon";
 
 const wrapIcon = (Icon: (iconProps: FluentIconsProps) => JSX.Element, displayName?: string, options?: CreateFluentIconOptions) => {
-    const WrappedIcon = React.forwardRef((props: FluentIconsProps, ref: React.Ref<HTMLElement>) => { 
+    const WrappedIcon = React.forwardRef((props: FluentIconsProps, ref: FluentIconsProps["ref"]) => { 
         const state = {
             ...useIconState(props, { flipInRtl: options?.flipInRtl }),
             ref
@@ -14,5 +14,6 @@ const wrapIcon = (Icon: (iconProps: FluentIconsProps) => JSX.Element, displayNam
     WrappedIcon.displayName = displayName;
     return WrappedIcon;
 }
+
 
 export default wrapIcon;