From 53a7e216cd97e739c69d6bdb802d7c9c2fb89e41 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 4 Jun 2025 14:57:14 +0200
Subject: [PATCH 1/4] fix(react-components): use custom RefAttributes instead
 of React.RefAttributes

---
 packages/eslint-plugin/src/configs/react.js   | 12 ++++
 .../library/etc/react-migration-v8-v9.api.md  |  2 +-
 .../components/Button/ActionButtonShim.tsx    | 22 ++++---
 .../src/components/Button/ButtonShim.tsx      | 26 +++++----
 .../components/Button/CompoundButtonShim.tsx  |  7 ++-
 .../components/Button/DefaultButtonShim.tsx   | 11 ++--
 .../src/components/Button/MenuButtonShim.tsx  | 57 ++++++++++---------
 .../components/Button/PrimaryButtonShim.tsx   | 11 ++--
 .../components/Button/ToggleButtonShim.tsx    | 30 +++++-----
 .../src/components/Button/shimButtonProps.tsx |  6 +-
 .../src/components/Checkbox/CheckboxShim.tsx  |  9 ++-
 .../src/components/NavDrawer/useNavDrawer.ts  |  4 +-
 .../etc/react-utilities.api.md                |  2 +-
 .../src/compose/getIntrinsicElementProps.ts   |  4 +-
 14 files changed, 124 insertions(+), 79 deletions(-)

diff --git a/packages/eslint-plugin/src/configs/react.js b/packages/eslint-plugin/src/configs/react.js
index 2d58c4295cb6c..8c7cb3f6bf159 100644
--- a/packages/eslint-plugin/src/configs/react.js
+++ b/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/react@18.2.61 creating invalid type contracts. Use `RefAttributes` from @fluentui/react-utilities instead',
+            fixWith: 'RefAttributes',
+          },
+        },
+      },
+    ],
   },
   overrides: [
     // Enable rules requiring type info only for appropriate files/circumstances
diff --git a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
index 017cb6c9a017a..51b9b559b527d 100644
--- a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
+++ b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
@@ -42,7 +42,7 @@ export const brandWeb: BrandVariants;
 export const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 // @public (undocumented)
-export const CheckboxShim: React_2.ForwardRefExoticComponent<Pick<ICheckboxProps, "label" | "title" | "className" | "key" | "disabled" | "name" | "defaultChecked" | "id" | "onChange" | "componentRef" | "styles" | "theme" | "checked" | "ariaLabel" | "required" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaPositionInSet" | "ariaSetSize" | "boxSide" | "checkmarkIconProps" | "defaultIndeterminate" | "indeterminate" | "inputProps" | "onRenderLabel"> & React_2.RefAttributes<HTMLInputElement>>;
+export const CheckboxShim: React_2.ForwardRefExoticComponent<ICheckboxProps & React_2.RefAttributes<HTMLInputElement>>;
 
 // @public
 export type ColorVariants = {
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx
index c2c8d3e73589f..67705e36c0516 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx
@@ -3,20 +3,24 @@ 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.ForwardRefExoticComponent<
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  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" />;
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx
index e002cdcfbde86..ede1a7ea45b26 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx
@@ -3,21 +3,25 @@ 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.ForwardRefExoticComponent<
+  IBaseButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((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} />;
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx
index b69958a3eb889..d120dd7a67862 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx
@@ -4,6 +4,7 @@ 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';
 
@@ -11,7 +12,9 @@ import { shimButtonProps } from './shimButtonProps';
  * Shims v8 CompoundButton to render a v9 CompoundButton
  */
 export const CompoundButtonShim: React.ForwardRefExoticComponent<
-  IButtonProps & React.RefAttributes<HTMLButtonElement>
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
 > = React.forwardRef((props, _ref) => {
   const variantProps = {
     ...props,
@@ -23,5 +26,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} />;
 });
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/DefaultButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/DefaultButtonShim.tsx
index 21a8bb6fe1f91..8d559b96977fc 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/DefaultButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/DefaultButtonShim.tsx
@@ -7,7 +7,10 @@ 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.ForwardRefExoticComponent<
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  return <ButtonShim {...props} variantClassName={props.primary ? 'ms-Button--primary' : 'ms-Button--default'} />;
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/MenuButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/MenuButtonShim.tsx
index 15b2618265425..8357aa473b1e8 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/MenuButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/MenuButtonShim.tsx
@@ -7,33 +7,36 @@ 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.ForwardRefExoticComponent<
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((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>
+  );
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/PrimaryButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/PrimaryButtonShim.tsx
index 5bdbe1a03e3d4..4e12e8aa11669 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/PrimaryButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/PrimaryButtonShim.tsx
@@ -6,7 +6,10 @@ 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.ForwardRefExoticComponent<
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((props, _ref) => {
+  return <ButtonShim {...props} primary variantClassName="ms-Button--primary" />;
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ToggleButtonShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ToggleButtonShim.tsx
index 03b8934f7a6f5..3b3cd368bad00 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/ToggleButtonShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/ToggleButtonShim.tsx
@@ -4,24 +4,28 @@ 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.ForwardRefExoticComponent<
+  IButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>
+> = React.forwardRef((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} />;
+});
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Button/shimButtonProps.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Button/shimButtonProps.tsx
index 3622f0fbc90f7..2a675eeec9321 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Button/shimButtonProps.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Button/shimButtonProps.tsx
@@ -5,7 +5,11 @@ import type { IBaseButtonProps } from '@fluentui/react';
 
 import type { ButtonProps } from '@fluentui/react-components';
 
-export const shimButtonProps = (props: IBaseButtonProps & React.RefAttributes<HTMLButtonElement>): ButtonProps => {
+export const shimButtonProps = (
+  props: IBaseButtonProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLButtonElement>,
+): ButtonProps => {
   //TODO: Icon shim. This still renders the v8 icon.
   const icon = props.onRenderIcon ? (
     props.onRenderIcon(props)
diff --git a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
index bbdf0d6c95547..42867f88320cc 100644
--- a/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
+++ b/packages/react-components/react-migration-v8-v9/library/src/components/Checkbox/CheckboxShim.tsx
@@ -9,7 +9,7 @@ const getClassNames = classNamesFunction<ICheckboxStyleProps, ICheckboxStyles>({
   useStaticStyles: false,
 });
 
-export const CheckboxShim = React.forwardRef((props: ICheckboxProps, _ref: React.ForwardedRef<HTMLInputElement>) => {
+export const CheckboxShim = React.forwardRef((props, _ref) => {
   'use no memo';
 
   const { className, styles: stylesV8, onRenderLabel, label, componentRef } = props;
@@ -51,6 +51,11 @@ export const CheckboxShim = React.forwardRef((props: ICheckboxProps, _ref: React
       indicator={{ className: mergeClasses('ms-Checkbox-checkbox', styles.checkbox) }}
     />
   );
-});
+  // NOTE: cast is necessary as `ICheckboxProps` extends React.Ref<HTMLDivElement> which is not compatible with our defined  React.Ref<HTMLInputElement>
+}) as React.ForwardRefExoticComponent<
+  ICheckboxProps &
+    // eslint-disable-next-line @typescript-eslint/no-restricted-types -- this is expected in order to be compatible with v8, as every v8 interface contains `React.RefAttributes` to accept ref as string
+    React.RefAttributes<HTMLInputElement>
+>;
 
 CheckboxShim.displayName = 'CheckboxShim';
diff --git a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts b/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
index 2e954f3ec5ea5..17ecbf6f1ed2b 100644
--- a/packages/react-components/react-nav-preview/library/src/components/NavDrawer/useNavDrawer.ts
+++ b/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>>,
       },
     ),
   };
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 70291d8f45118..2bd46db4464d7 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/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;
diff --git a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts b/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
index 65de47f02e09c..9fc679707bf6b 100644
--- a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
+++ b/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[],
 ) => {

From 551de71845c3ed8d82114f587ac256ec32eb7188 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 4 Jun 2025 15:47:39 +0200
Subject: [PATCH 2/4] change files

---
 ...gration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json | 7 +++++++
 ...t-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json
 create mode 100644 change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json

diff --git a/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json b/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json
new file mode 100644
index 0000000000000..773d460ef1bc5
--- /dev/null
+++ b/change/@fluentui-react-migration-v8-v9-3333df90-3dd2-4b97-b71f-8f963b8c8e4f.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: use custom RefAttributes instead of React.RefAttributes",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json b/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json
new file mode 100644
index 0000000000000..f8fcf7d3b6afe
--- /dev/null
+++ b/change/@fluentui-react-nav-preview-3f6df7d6-3a1d-4532-8d6f-7afd9037c820.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use custom RefAttributes instead of React.RefAttributes",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

From 9f80d9693bd0b18eafb9d0229133d42be65f6523 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Thu, 5 Jun 2025 16:42:44 +0200
Subject: [PATCH 3/4] revert(react-utilities): undo using custom RefAttibute
 for getIntrinsicElementProps

---
 .../react-utilities/etc/react-utilities.api.md       |  2 +-
 .../src/compose/getIntrinsicElementProps.ts          | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 2bd46db4464d7..70291d8f45118 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/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 & 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 & React_2.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;
diff --git a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts b/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
index 9fc679707bf6b..a59965bac7fb9 100644
--- a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
+++ b/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, RefAttributes } from '../utils/types';
+import type { DistributiveOmit } from '../utils/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type HTMLAttributes = React.HTMLAttributes<any>;
@@ -11,16 +11,18 @@ type HTMLAttributes = React.HTMLAttributes<any>;
  * element type.
  *
  * Equivalent to {@link getNativeElementProps}, but more type-safe.
+ *
+ * @param tagName - The slot's default element type (e.g. 'div')
+ * @param props - The component's props object
+ * @param excludedPropNames - List of native props to exclude from the returned value
  */
 export const getIntrinsicElementProps = <
   Props extends UnknownSlotProps,
   ExcludedPropKeys extends Extract<keyof Props, string> = never,
 >(
-  /** The slot's default element type (e.g. 'div') */
   tagName: NonNullable<Props['as']>,
-  /** The component's props object */
-  props: Props & RefAttributes<InferredElementRefType<Props>>,
-  /** List of native props to exclude from the returned value */
+  // eslint-disable-next-line @typescript-eslint/no-restricted-types -- in order to not introduce Type Restriction CHANGe which is kinda "breaking change from Types POV", we don't enforce our custom `RefAttributes` in this API, to be compatible with scenarios where non v9 interfaces might be used. This may/will change with React 19
+  props: Props & React.RefAttributes<InferredElementRefType<Props>>,
   excludedPropNames?: ExcludedPropKeys[],
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-deprecated

From 75913f7945ce78feac277bd1eb4a80bf5a1336a4 Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Fri, 6 Jun 2025 14:27:40 +0200
Subject: [PATCH 4/4] change file

---
 ...act-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json

diff --git a/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json b/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json
new file mode 100644
index 0000000000000..a5fc772a96aa1
--- /dev/null
+++ b/change/@fluentui-react-utilities-633b80c9-df90-42c4-a7a5-29672093aab1.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: disable lint error on React.RefAttibute within getIntrinsicElementProps",
+  "packageName": "@fluentui/react-utilities",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}