fix(react-components): use custom RefAttributes instead of React.RefAttributes

Author: Hotell

packages/eslint-plugin/src/configs/react.js

@@ -37,6 +37,18 @@ module.exports = {
       },
     ],
     'react-compiler/react-compiler': ['error'],
+    '@typescript-eslint/no-restricted-types': [
+      'error',
+      {
+        types: {
+          'React.RefAttributes': {
+            message:
+              '`React.RefAttributes` is leaking string starting @types/[email protected] creating invalid type contracts. Use `RefAttributes` from @fluentui/react-utilities instead',
+            fixWith: 'RefAttributes',
+          },
+        },
+      },
+    ],
   },
   overrides: [
     // Enable rules requiring type info only for appropriate files/circumstances

packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx

@@ -3,20 +3,20 @@ import * as React from 'react';
 import type { IButtonProps } from '@fluentui/react';
 
 import { Button } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 
 /**
  * Shims a v8 ActionButton to render a v9 Button
  */
-export const ActionButtonShim: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    const variantProps = {
-      ...props,
-      variantClassName: 'ms-Button--action ms-Button--command',
-    };
+export const ActionButtonShim = React.forwardRef((props: IButtonProps, _ref: React.ForwardedRef<HTMLButtonElement>) => {
+  const variantProps = {
+    ...props,
+    variantClassName: 'ms-Button--action ms-Button--command',
+  };
 
-    const shimProps = shimButtonProps(variantProps);
+  const shimProps = shimButtonProps(variantProps);
 
-    return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
-  });
+  return <Button {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
+});

packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx

@@ -3,21 +3,21 @@ import * as React from 'react';
 import type { IBaseButtonProps } from '@fluentui/react';
 
 import { Button } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 import { ToggleButtonShim } from './ToggleButtonShim';
 import { CompoundButtonShim } from './CompoundButtonShim';
 
-export const ButtonShim: React.ForwardRefExoticComponent<IBaseButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    const shimProps = shimButtonProps(props);
+export const ButtonShim = React.forwardRef<HTMLButtonElement, IBaseButtonProps>((props, _ref) => {
+  const shimProps = shimButtonProps(props);
 
-    if (props.toggle) {
-      return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;
-    }
-    if (props.secondaryText || props.onRenderDescription?.(props)) {
-      return <CompoundButtonShim {...props} />;
-    }
+  if (props.toggle) {
+    return <ToggleButtonShim {...props}>{props.children}</ToggleButtonShim>;
+  }
+  if (props.secondaryText || props.onRenderDescription?.(props)) {
+    return <CompoundButtonShim {...props} />;
+  }
 
-    return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
-  });
+  return <Button {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});

packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx

@@ -4,15 +4,14 @@ import type { IButtonProps } from '@fluentui/react';
 
 import { CompoundButton } from '@fluentui/react-components';
 import type { CompoundButtonProps } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 
 /**
  * Shims v8 CompoundButton to render a v9 CompoundButton
  */
-export const CompoundButtonShim: React.ForwardRefExoticComponent<
-  IButtonProps & React.RefAttributes<HTMLButtonElement>
-> = React.forwardRef((props, _ref) => {
+export const CompoundButtonShim = React.forwardRef<HTMLButtonElement, IButtonProps>((props, _ref) => {
   const variantProps = {
     ...props,
     variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
@@ -23,5 +22,5 @@ export const CompoundButtonShim: React.ForwardRefExoticComponent<
     secondaryContent: props.secondaryText || props.onRenderDescription?.(props),
   };
 
-  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+  return <CompoundButton {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} />;
 });

packages/react-components/react-migration-v8-v9/library/src/components/Button/DefaultButtonShim.tsx

@@ -7,7 +7,6 @@ import { ButtonShim } from './ButtonShim';
 /**
  * Shims a v8 DefaultButton to render a v9 Button
  */
-export const DefaultButtonShim: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;
-  });
+export const DefaultButtonShim = React.forwardRef<HTMLButtonElement, IButtonProps>((props, _ref) => {
+  return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;
+});

packages/react-components/react-migration-v8-v9/library/src/components/Button/MenuButtonShim.tsx

@@ -7,33 +7,32 @@ import { MenuItemShim, shimMenuProps } from '../Menu/index';
 
 import { shimButtonProps } from './shimButtonProps';
 
-export const MenuButtonShim: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    const variantProps = {
-      ...props,
-      variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default',
-    };
+export const MenuButtonShim = React.forwardRef<HTMLButtonElement, IButtonProps>((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--primary' : 'ms-Button--default',
+  };
 
-    const shimProps: MenuButtonProps = {
-      ...shimButtonProps(variantProps),
-    };
+  const shimProps: MenuButtonProps = {
+    ...shimButtonProps(variantProps),
+  };
 
-    const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {};
+  const shimmedMenuProps = props.menuProps ? shimMenuProps(props.menuProps) : {};
 
-    return (
-      <Menu {...shimmedMenuProps}>
-        <MenuTrigger>
-          <MenuButton {...shimProps} />
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            {props.menuProps?.items.map(item => (
-              // key is added through item spread
-              // eslint-disable-next-line react/jsx-key
-              <MenuItemShim {...item} />
-            ))}
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-    );
-  });
+  return (
+    <Menu {...shimmedMenuProps}>
+      <MenuTrigger>
+        <MenuButton {...shimProps} />
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          {props.menuProps?.items.map(item => (
+            // key is added through item spread
+            // eslint-disable-next-line react/jsx-key
+            <MenuItemShim {...item} />
+          ))}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+});

packages/react-components/react-migration-v8-v9/library/src/components/Button/PrimaryButtonShim.tsx

@@ -6,7 +6,6 @@ import { ButtonShim } from './ButtonShim';
 /**
  * Shims v8 PrimaryButton to render a v9 Button
  */
-export const PrimaryButtonShim: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    return <ButtonShim {...props} primary variantClassName="ms-Button--primary" />;
-  });
+export const PrimaryButtonShim = React.forwardRef<HTMLButtonElement, IButtonProps>((props, _ref) => {
+  return <ButtonShim {...props} primary variantClassName="ms-Button--primary" />;
+});

packages/react-components/react-migration-v8-v9/library/src/components/Button/ToggleButtonShim.tsx

@@ -4,24 +4,24 @@ import type { IButtonProps } from '@fluentui/react';
 
 import { ToggleButton } from '@fluentui/react-components';
 import type { ToggleButtonProps } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 
 /**
  * Shims v8 ToggleButton to render a v9 ToggleButton
  */
-export const ToggleButtonShim: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLButtonElement>> =
-  React.forwardRef((props, _ref) => {
-    const variantProps = {
-      ...props,
-      variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
-    };
+export const ToggleButtonShim = React.forwardRef<HTMLButtonElement, IButtonProps>((props, _ref) => {
+  const variantProps = {
+    ...props,
+    variantClassName: props.primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound',
+  };
 
-    const shimProps: ToggleButtonProps = {
-      ...shimButtonProps(variantProps),
-      checked: props.checked,
-      defaultChecked: props.defaultChecked,
-    };
+  const shimProps: ToggleButtonProps = {
+    ...shimButtonProps(variantProps),
+    checked: props.checked,
+    defaultChecked: props.defaultChecked,
+  };
 
-    return <ToggleButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
-  });
+  return <ToggleButton {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+});

packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Drawer, DrawerProps } from '@fluentui/react-drawer';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { slot } from '@fluentui/react-utilities';
+import { RefAttributes, slot } from '@fluentui/react-utilities';
 
 import { useNav_unstable } from '../Nav/useNav';
 import type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';
@@ -49,7 +49,7 @@ export const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTML
         // this is a problem with the lack of support for union types on React v18
         // ComponentState is using React.ComponentType which will try to infer propType
         // propTypes WeakValidator signature will break distributive unions making this type invalid
-        elementType: Drawer as React.FC<DrawerProps & React.RefAttributes<HTMLDivElement>>,
+        elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,
       },
     ),
   };

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -72,7 +72,7 @@ export function getEventClientCoords(event: TouchOrMouseEvent): {
 };
 
 // @public
-export const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
+export const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
 
 // @public @deprecated
 export function getNativeElementProps<TAttributes extends React_2.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;

packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps } from '../utils/getNativeElementProps';
 import type { InferredElementRefType, UnknownSlotProps } from './types';
-import type { DistributiveOmit } from '../utils/types';
+import type { DistributiveOmit, RefAttributes } from '../utils/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type HTMLAttributes = React.HTMLAttributes<any>;
@@ -19,7 +19,7 @@ export const getIntrinsicElementProps = <
   /** The slot's default element type (e.g. 'div') */
   tagName: NonNullable<Props['as']>,
   /** The component's props object */
-  props: Props & React.RefAttributes<InferredElementRefType<Props>>,
+  props: Props & RefAttributes<InferredElementRefType<Props>>,
   /** List of native props to exclude from the returned value */
   excludedPropNames?: ExcludedPropKeys[],
 ) => {