Replace deprecated ref helper usage#7834
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
|
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
|
@copilot resolve the merge conflicts in this pull request |
…f-object-as-forwarded-ref # Conflicts: # packages/react/src/Heading/Heading.tsx Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>
Done — I merged |
There was a problem hiding this comment.
Pull request overview
This PR replaces deprecated useRefObjectAsForwardedRef usage with the newer useMergedRefs pattern across several components in @primer/react, preserving existing behavior while improving ref compatibility (notably with callback refs / React 19 ref cleanups).
Changes:
- Swapped
useRefObjectAsForwardedRef(...)+ref={internalRef}forconst mergedRef = useMergedRefs(forwardedRef, internalRef)+ref={mergedRef}in multiple components. - Updated
Overlay/PageLayout/Dialogand several UI primitives to consistently forward and retain internal refs via merged refs. - Adjusted an Autocomplete blur test to use deterministic
fireEvent.blur+waitForrather thanuserEvent.tab().
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx | Use useMergedRefs to combine forwarded + internal input refs. |
| packages/react/src/PageLayout/PageLayout.tsx | Merge forwarded refs with context-provided pane/sidebar refs. |
| packages/react/src/Overlay/Overlay.tsx | Merge forwarded overlay ref with internal overlayRef. |
| packages/react/src/Link/Link.tsx | Merge polymorphic forwarded ref with innerRef used for dev warnings. |
| packages/react/src/Heading/Heading.tsx | Merge forwarded ref with internal heading ref. |
| packages/react/src/Dialog/Dialog.tsx | Merge forwarded dialog ref with internal dialogRef. |
| packages/react/src/deprecated/DialogV1/Dialog.tsx | Replace deprecated ref helper with merged refs in v1 dialog. |
| packages/react/src/Button/ButtonBase.tsx | Merge forwarded ref with internal button ref while preserving internal access. |
| packages/react/src/Autocomplete/AutocompleteOverlay.tsx | Merge scrollContainerRef and anchored-position floatingElementRef into Overlay ref. |
| packages/react/src/Autocomplete/AutocompleteInput.tsx | Merge forwarded ref with context inputRef. |
| packages/react/src/Autocomplete/Autocomplete.test.tsx | Make blur/close assertion deterministic in browser-mode Vitest. |
| packages/react/src/ActionList/Heading.tsx | Merge forwarded ref with internal heading ref passed to Heading component. |
| packages/react/src/ActionBar/ActionBar.tsx | Merge forwarded ref with internal IconButton ref. |
Copilot's findings
- Files reviewed: 13/13 changed files
- Comments generated: 0
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/20750 |
Update usage our deprecated ref helper to use the new pattern for merging refs 🎉
Changelog
New
Changed
useRefObjectAsForwardedReftouseMergedRefsRemoved
Rollout strategy
This is an internal refactor, functionality must be the same