feat(react-components): add react 18 support #34456
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: Martin Hochel <[email protected]>
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
dmytrokirpa
changed the title
dmytrokirpa
commented
May 26, 2025
| import { Caption1, ComponentProps, Slot } from '@fluentui/react-components'; | ||
| import type { FluentProviderProps } from '@fluentui/react-provider'; | ||
|
|
||
| { |
There was a problem hiding this comment.
Integration tests to cover type issues caught in our partners' codebases.
dmytrokirpa
changed the title
Hotell
reviewed
May 26, 2025
change/@fluentui-react-accordion-70e37d4f-804b-494a-9d94-31840668c018.json
Outdated
Show resolved
Hide resolved
| // but there's no way to retrieve the element type of a slot from the slot definition | ||
| // right now without using SLOT_ELEMENT_TYPE_SYMBOL | ||
| // TODO: create a method to retrieve the element type of a slot | ||
| // eslint-disable-next-line @typescript-eslint/no-deprecated |
There was a problem hiding this comment.
suggestion: lets make this scoped so its immediately obvious which symbol is being referred here ( I assume components ) ?
const {
heading: root = {},
action,
// We should not use components to pass along the base element type of a slot
// but there's no way to retrieve the element type of a slot from the slot definition
// right now without using SLOT_ELEMENT_TYPE_SYMBOL
// TODO: create a method to retrieve the element type of a slot
// eslint-disable-next-line @typescript-eslint/no-deprecated
components
} = state;
packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
Show resolved
Hide resolved
...ages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx
Outdated
Show resolved
Hide resolved
...ct-components/react-tag-picker/library/src/components/TagPickerButton/useTagPickerButton.tsx
Outdated
Show resolved
Hide resolved
| state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string' | ||
| ? asProp || state.components?.[slotName] || 'div' | ||
| : state.components[slotName] | ||
| state.components?.[slotName] === undefined || // eslint-disable-line @typescript-eslint/no-deprecated |
There was a problem hiding this comment.
Suggested change
| state.components?.[slotName] === undefined || // eslint-disable-line @typescript-eslint/no-deprecated | |
| // eslint-disable-next-line @typescript-eslint/no-deprecated | |
| state.components?.[slotName] === undefined || |
dmytrokirpa
commented
May 27, 2025
| @@ -22,6 +22,6 @@ const metadata: Meta<typeof Breadcrumb> = { | |||
| }, | |||
| }, | |||
| }, | |||
| }; | |||
| } as Meta<typeof Breadcrumb>; | |||
There was a problem hiding this comment.
Needed for React 18 to workaround the subcomponents Storybook type issue storybookjs/storybook#23170
dmytrokirpa
requested review from
a team,
sopranopillow,
mltejera,
ValentinaKozlova,
marcosmoura and
Mitch-At-Work
as code owners
Hotell
changed the title
|
Lets go! Woohoo!! 🥳 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR addresses type incompatibilities introduced by React 18 that break our Slots API. Specifically, it fixes issues with
ReactNode,RefAttributes, and several slot-related utility types. It also adjusts internal type declarations to better align with actual usage and React’s updated typings.Previous Behavior
1.
ReactNodeBreaking ChangeReact 18 introduced stricter definitions for
ReactNode, removing the{}catch-all inReactFragment. This change breaks our slot typings, which previously relied on the broader compatibility of React 17:React 17:
React 18:
🔗 Playground showing the issue
2.
RefAttributesChangeIn React 18,
RefAttributesnow usesLegacyRef<T>which includes support for string refs — something we don't support in our API.React 17:
React 18:
3.
FCdoesn't provides type forchildrenprop, it should be explicitly definedReact 17:
React 18:
New Behavior
Loosened type constraints in
UnknownSlotPropsPreviously, the
childrenprop has typeReactNode | undefined, but this doesn’t work with theSlotRenderFunctionand React 18. This change removes that restriction and to enable usage with React 18.Updated
SlotShorthandValueto acceptIterable<ReactNode>React 18 expands
ReactNodeto includeIterable<ReactNode>, so this change ensures our shorthand slot values also support this structure. This enables support for JSX fragments and iterable rendering.WithSlotRenderFunctionadjusted for manual type assertions in React 18In React 18, implicit inference of slot render functions may not work correctly due to stricter type definitions. Consumers must now use
asorsatisfiestype assertions when passing a function to slot props.Removed deprecated
VoidFunctionComponentVoidFunctionComponentis deprecated and unnecessary sinceComponentTypehandles the same use cases. Removing it simplifies our generic types and avoids confusion.cloneTriggerTreeupdated for broaderchildrensupportThis utility function now assumes
childrencan be more than justReactNode. It aligns with the loosened constraints and supports broader use cases, including render functions or iterables.Removed usage of
React.RefAttributesin several utilitiesWith React 18,
RefAttributesincludesLegacyRef, which supports string refs — something we don’t allow. We’ve replaced it with more precise types to enforce our internal API constraints.Added
{ children?: React.ReactNode }to fix story/test compatibilitySome stories and test utilities failed under React 18 due to missing
childrenprop typing. So the fix is too use theReact.PropsWithChildren<Props>or explicitly declare thechildrenprop type.React 18 type changes:
Slot render functions must now be manually typed in React 18:
Future Plans
Migrate slot render function away from
childrento a dedicated prop to improve type inference.Related Issues