Skip to content

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

Merged
Martin Hochel (Hotell) merged 4 commits into
microsoft:masterfrom
Hotell:react-18/ref-attr-usage
Jun 10, 2025
Merged

fix(react-components): use custom RefAttributes instead of React.RefAttributes#34590
Martin Hochel (Hotell) merged 4 commits into
microsoft:masterfrom
Hotell:react-18/ref-attr-usage

Conversation

@Hotell

@Hotell Martin Hochel (Hotell) commented Jun 4, 2025

Copy link
Copy Markdown
Contributor

Previous Behavior

New Behavior

Related Issue(s)

@Hotell Martin Hochel (Hotell) changed the title React 18/ref attr usage fix(react-components): use custom RefAttributes instead of React.RefAttributes Jun 4, 2025
@github-actions

github-actions Bot commented Jun 4, 2025

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

github-actions Bot commented Jun 4, 2025

Copy link
Copy Markdown

Pull request demo site: URL

);
});
// NOTE: cast is necessary as `ICheckboxProps` extends React.Ref<HTMLDivElement> which is not compatible with our defined React.Ref<HTMLInputElement>
}) as React.ForwardRefExoticComponent<

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unified pattern with the rest of migration code - in this case simple advance declaration wouldn't match because the ref generic mismatch


// @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>>;

@Hotell Martin Hochel (Hotell) Jun 4, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the same API without unwrapping -> result of normalizing patterns and using explicit function types

Props extends UnknownSlotProps,
ExcludedPropKeys extends Extract<keyof Props, string> = never,
>(
/** The slot's default element type (e.g. 'div') */

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is invalid "JSDOC" - moved to proper JSDoc format

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',

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tbh this is not the most robust rule as it doesn't work on interface extensions, and also doesn't distinguishes about the imports. the autofixer is also naive as it won't provide proper import.

for now it's good enough, but in future we will introduce custom rule

@@ -0,0 +1,7 @@
{
"type": "none",

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

although api.md changed the type is exactly the same -> thus no bump

@Hotell
Martin Hochel (Hotell) merged commit 005e4f1 into microsoft:master Jun 10, 2025
@Hotell
Martin Hochel (Hotell) deleted the react-18/ref-attr-usage branch June 10, 2025 11:52
Tudor Popa (tudorpopams) pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026
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.

2 participants