Skip to content

feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate React.RefAttributes expansion causing breaking changes in v8/v9 mixed context - shipped as patch release in @types/react@18.2.61#34572

Merged
Hotell merged 6 commits into
microsoft:masterfrom
Hotell:react-18/introduce-custom-ref-html-and-migrate
Jun 6, 2025

Conversation

@Hotell

@Hotell Hotell commented Jun 2, 2025

Copy link
Copy Markdown
Contributor

Previous Behavior

New Behavior

Introduces a custom RefAttributes type to address compatibility issues with React.RefAttributes across different versions of React (17, 18, and 19).

The changes ensure consistent types for ref props in components and mitigate type issues caused by breaking union extension changes in React's type definitions (RefAttributes ref property) (see DefinitelyTyped/DefinitelyTyped#68720).

Uses the new RefAttributes type as part of ForwardRefComponent to ship deterministic type no matter what @types/react version is used

Before:

import * as React from 'react';

interface Props extends React.RefAttributes<HTMLElement> {}

const Component = React.forwardRef<HTMLElement,Props>((props,ref)=>{...});

After:

import * as React from 'react';
import type { RefAttributes, ForwardRefComponent } from '@fluentui/react-utilities';

interface Props extends RefAttributes<HTMLElement> {}

// Don't instatiate forwardRef generic, rather cast to ForwardRefComponent
const Component = React.forwardRef((props,ref)=>{...}) as ForwardRefComponent<Props>;

Related Issue(s)

@Hotell Hotell changed the title feat: add custom RefAttributes interface which is used within ForwardRefComponent to mitigate breaking changes shipped as patch release in @types/react@18.2.61 feat: add custom RefAttributes interface which is used within ForwardRefComponent to mitigate breaking changes shipped as patch release in @types/react@18.2.61 Jun 2, 2025
Comment thread packages/react-components/react-utilities/src/utils/types.ts Outdated
@Hotell Hotell changed the title feat: add custom RefAttributes interface which is used within ForwardRefComponent to mitigate breaking changes shipped as patch release in @types/react@18.2.61 feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate breaking changes shipped as patch release in @types/react@18.2.61 Jun 2, 2025
@github-actions

github-actions Bot commented Jun 2, 2025

Copy link
Copy Markdown

Pull request demo site: URL

@github-actions

github-actions Bot commented Jun 2, 2025

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@Hotell Hotell changed the title feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate breaking changes shipped as patch release in @types/react@18.2.61 feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate unexpected React.RefAttributes changes shipped as patch release in @types/react@18.2.61 Jun 3, 2025
@Hotell Hotell changed the title feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate unexpected React.RefAttributes changes shipped as patch release in @types/react@18.2.61 feat(react-utilities): add custom RefAttributes interface which is used within ForwardRefComponent to mitigate React.RefAttributes expansion causing breaking changes in v8/v9 mixed context - shipped as patch release in @types/react@18.2.61 Jun 3, 2025
@Hotell
Hotell force-pushed the react-18/introduce-custom-ref-html-and-migrate branch from df780d9 to 89e436b Compare June 3, 2025 13:37
@Hotell
Hotell force-pushed the react-18/introduce-custom-ref-html-and-migrate branch from 89e436b to 813b1fb Compare June 4, 2025 09:14
@Hotell
Hotell marked this pull request as ready for review June 4, 2025 10:07
@Hotell
Hotell requested review from a team as code owners June 4, 2025 10:07
@Hotell
Hotell requested a review from dmytrokirpa June 4, 2025 10:16
Comment thread packages/react-components/react-utilities/src/index.ts Outdated
@Hotell
Hotell merged commit 82db061 into microsoft:master Jun 6, 2025
12 of 15 checks passed
@Hotell
Hotell deleted the react-18/introduce-custom-ref-html-and-migrate branch June 6, 2025 12:14
mainframev pushed a commit to mainframev/fluentui that referenced this pull request Jun 9, 2025
…used within ForwardRefComponent to mitigate `React.RefAttributes` expansion causing breaking changes in v8/v9 mixed context - shipped as patch release in @types/react@18.2.61 (microsoft#34572)
tudorpopams pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026
…used within ForwardRefComponent to mitigate `React.RefAttributes` expansion causing breaking changes in v8/v9 mixed context - shipped as patch release in @types/react@18.2.61 (microsoft#34572)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants