Skip to content

Commit 7e2adc6

Browse files
sukvvonsukvvon
authored
refactor(react): replace deprecated 'ElementRef' with 'ComponentRef' (#3426)
1 parent 38c3ee1 commit 7e2adc6

File tree

44 files changed

+225
-183
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+225
-183
lines changed

‎.changeset/metal-feet-grab.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
'@radix-ui/react-dismissable-layer': patch
3+
'@radix-ui/react-navigation-menu': patch
4+
'@radix-ui/react-visually-hidden': patch
5+
'@radix-ui/react-dropdown-menu': patch
6+
'@radix-ui/react-alert-dialog': patch
7+
'@radix-ui/react-aspect-ratio': patch
8+
'@radix-ui/react-context-menu': patch
9+
'@radix-ui/react-roving-focus': patch
10+
'@radix-ui/react-toggle-group': patch
11+
'@radix-ui/react-collapsible': patch
12+
'@radix-ui/react-focus-scope': patch
13+
'@radix-ui/react-radio-group': patch
14+
'@radix-ui/react-scroll-area': patch
15+
'@radix-ui/react-hover-card': patch
16+
'@radix-ui/react-accordion': patch
17+
'@radix-ui/react-separator': patch
18+
'@radix-ui/react-announce': patch
19+
'@radix-ui/react-checkbox': patch
20+
'@radix-ui/react-progress': patch
21+
'@radix-ui/react-menubar': patch
22+
'@radix-ui/react-popover': patch
23+
'@radix-ui/react-toolbar': patch
24+
'@radix-ui/react-tooltip': patch
25+
'@radix-ui/react-avatar': patch
26+
'@radix-ui/react-dialog': patch
27+
'@radix-ui/react-popper': patch
28+
'@radix-ui/react-portal': patch
29+
'@radix-ui/react-select': patch
30+
'@radix-ui/react-slider': patch
31+
'@radix-ui/react-switch': patch
32+
'@radix-ui/react-toggle': patch
33+
'@radix-ui/react-arrow': patch
34+
'@radix-ui/react-label': patch
35+
'@radix-ui/react-toast': patch
36+
'@radix-ui/react-form': patch
37+
'@radix-ui/react-menu': patch
38+
'@radix-ui/react-slot': patch
39+
'@radix-ui/react-tabs': patch
40+
---
41+
42+
Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)

‎apps/storybook/stories/collection.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ export const Nested = () => (
127127

128128
type ItemData = { disabled: boolean };
129129

130-
const [Collection, useCollection] = createCollection<React.ElementRef<typeof Item>, ItemData>(
130+
const [Collection, useCollection] = createCollection<React.ComponentRef<typeof Item>, ItemData>(
131131
'List'
132132
);
133133

‎apps/storybook/stories/dropdown-menu.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -465,8 +465,8 @@ export const NestedComposition = () => {
465465
};
466466

467467
export const SingleItemAsDialogTrigger = () => {
468-
const dropdownTriggerRef = React.useRef<React.ElementRef<typeof DropdownMenu.Trigger>>(null);
469-
const dropdownTriggerRef2 = React.useRef<React.ElementRef<typeof DropdownMenu.Trigger>>(null);
468+
const dropdownTriggerRef = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);
469+
const dropdownTriggerRef2 = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);
470470
const isDialogOpenRef = React.useRef(false);
471471

472472
function handleModalDialogClose(event: Event) {
@@ -557,8 +557,8 @@ export const MultipleItemsAsDialogTriggers = () => {
557557
const [switchAccountsOpen, setSwitchAccountsOpen] = React.useState(false);
558558
const [deleteOpen2, setDeleteOpen2] = React.useState(false);
559559
const [switchAccountsOpen2, setSwitchAccountsOpen2] = React.useState(false);
560-
const dropdownTriggerRef = React.useRef<React.ElementRef<typeof DropdownMenu.Trigger>>(null);
561-
const dropdownTriggerRef2 = React.useRef<React.ElementRef<typeof DropdownMenu.Trigger>>(null);
560+
const dropdownTriggerRef = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);
561+
const dropdownTriggerRef2 = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);
562562

563563
return (
564564
<div

‎apps/storybook/stories/radio-group.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export const LegacyAnimated = () => {
186186
};
187187

188188
export const LegacyChromatic = () => {
189-
const manualFocusRef = React.useRef<React.ElementRef<typeof RadioGroup.Item>>(null);
189+
const manualFocusRef = React.useRef<React.ComponentRef<typeof RadioGroup.Item>>(null);
190190

191191
React.useEffect(() => {
192192
manualFocusRef.current?.focus();

‎apps/storybook/stories/select.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -977,14 +977,14 @@ const ChromaticSelect = ({
977977
);
978978

979979
const SelectShort = React.forwardRef<
980-
React.ElementRef<typeof ChromaticSelect>,
980+
React.ComponentRef<typeof ChromaticSelect>,
981981
React.ComponentProps<typeof ChromaticSelect>
982982
>(({ count = 9, ...props }, forwardedRef) => (
983983
<ChromaticSelect count={count} {...props} ref={forwardedRef} />
984984
));
985985

986986
const SelectLong = React.forwardRef<
987-
React.ElementRef<typeof ChromaticSelect>,
987+
React.ComponentRef<typeof ChromaticSelect>,
988988
React.ComponentProps<typeof ChromaticSelect>
989989
>(({ count = 50, ...props }, forwardedRef) => (
990990
<ChromaticSelect count={count} {...props} ref={forwardedRef} />

‎packages/react/accordion/src/accordion.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ type AccordionImplContextValue = {
201201
const [AccordionImplProvider, useAccordionContext] =
202202
createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME);
203203

204-
type AccordionImplElement = React.ElementRef<typeof Primitive.div>;
204+
type AccordionImplElement = React.ComponentRef<typeof Primitive.div>;
205205
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
206206
interface AccordionImplProps extends PrimitiveDivProps {
207207
/**
@@ -331,7 +331,7 @@ type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId
331331
const [AccordionItemProvider, useAccordionItemContext] =
332332
createAccordionContext<AccordionItemContextValue>(ITEM_NAME);
333333

334-
type AccordionItemElement = React.ElementRef<typeof CollapsiblePrimitive.Root>;
334+
type AccordionItemElement = React.ComponentRef<typeof CollapsiblePrimitive.Root>;
335335
type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
336336
interface AccordionItemProps
337337
extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
@@ -396,7 +396,7 @@ AccordionItem.displayName = ITEM_NAME;
396396

397397
const HEADER_NAME = 'AccordionHeader';
398398

399-
type AccordionHeaderElement = React.ElementRef<typeof Primitive.h3>;
399+
type AccordionHeaderElement = React.ComponentRef<typeof Primitive.h3>;
400400
type PrimitiveHeading3Props = React.ComponentPropsWithoutRef<typeof Primitive.h3>;
401401
interface AccordionHeaderProps extends PrimitiveHeading3Props {}
402402

@@ -429,7 +429,7 @@ AccordionHeader.displayName = HEADER_NAME;
429429

430430
const TRIGGER_NAME = 'AccordionTrigger';
431431

432-
type AccordionTriggerElement = React.ElementRef<typeof CollapsiblePrimitive.Trigger>;
432+
type AccordionTriggerElement = React.ComponentRef<typeof CollapsiblePrimitive.Trigger>;
433433
type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
434434
interface AccordionTriggerProps extends CollapsibleTriggerProps {}
435435

@@ -467,7 +467,7 @@ AccordionTrigger.displayName = TRIGGER_NAME;
467467

468468
const CONTENT_NAME = 'AccordionContent';
469469

470-
type AccordionContentElement = React.ElementRef<typeof CollapsiblePrimitive.Content>;
470+
type AccordionContentElement = React.ComponentRef<typeof CollapsiblePrimitive.Content>;
471471
type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
472472
interface AccordionContentProps extends CollapsibleContentProps {}
473473

‎packages/react/alert-dialog/src/alert-dialog.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ AlertDialog.displayName = ROOT_NAME;
3636
* -----------------------------------------------------------------------------------------------*/
3737
const TRIGGER_NAME = 'AlertDialogTrigger';
3838

39-
type AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
39+
type AlertDialogTriggerElement = React.ComponentRef<typeof DialogPrimitive.Trigger>;
4040
type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
4141
interface AlertDialogTriggerProps extends DialogTriggerProps {}
4242

@@ -75,7 +75,7 @@ AlertDialogPortal.displayName = PORTAL_NAME;
7575

7676
const OVERLAY_NAME = 'AlertDialogOverlay';
7777

78-
type AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;
78+
type AlertDialogOverlayElement = React.ComponentRef<typeof DialogPrimitive.Overlay>;
7979
type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
8080
interface AlertDialogOverlayProps extends DialogOverlayProps {}
8181

@@ -102,7 +102,7 @@ type AlertDialogContentContextValue = {
102102
const [AlertDialogContentProvider, useAlertDialogContentContext] =
103103
createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);
104104

105-
type AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
105+
type AlertDialogContentElement = React.ComponentRef<typeof DialogPrimitive.Content>;
106106
type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
107107
interface AlertDialogContentProps
108108
extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}
@@ -161,7 +161,7 @@ AlertDialogContent.displayName = CONTENT_NAME;
161161

162162
const TITLE_NAME = 'AlertDialogTitle';
163163

164-
type AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
164+
type AlertDialogTitleElement = React.ComponentRef<typeof DialogPrimitive.Title>;
165165
type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
166166
interface AlertDialogTitleProps extends DialogTitleProps {}
167167

@@ -181,7 +181,7 @@ AlertDialogTitle.displayName = TITLE_NAME;
181181

182182
const DESCRIPTION_NAME = 'AlertDialogDescription';
183183

184-
type AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
184+
type AlertDialogDescriptionElement = React.ComponentRef<typeof DialogPrimitive.Description>;
185185
type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
186186
interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
187187

@@ -202,7 +202,7 @@ AlertDialogDescription.displayName = DESCRIPTION_NAME;
202202

203203
const ACTION_NAME = 'AlertDialogAction';
204204

205-
type AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;
205+
type AlertDialogActionElement = React.ComponentRef<typeof DialogPrimitive.Close>;
206206
type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
207207
interface AlertDialogActionProps extends DialogCloseProps {}
208208

@@ -222,7 +222,7 @@ AlertDialogAction.displayName = ACTION_NAME;
222222

223223
const CANCEL_NAME = 'AlertDialogCancel';
224224

225-
type AlertDialogCancelElement = React.ElementRef<typeof DialogPrimitive.Close>;
225+
type AlertDialogCancelElement = React.ComponentRef<typeof DialogPrimitive.Close>;
226226
interface AlertDialogCancelProps extends DialogCloseProps {}
227227

228228
const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(

‎packages/react/announce/src/announce.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const listenerMap = new Map<Element, number>();
2121

2222
const NAME = 'Announce';
2323

24-
type AnnounceElement = React.ElementRef<typeof Primitive.div>;
24+
type AnnounceElement = React.ComponentRef<typeof Primitive.div>;
2525
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
2626
interface AnnounceProps extends PrimitiveDivProps {
2727
/**

‎packages/react/arrow/src/arrow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Primitive } from '@radix-ui/react-primitive';
77

88
const NAME = 'Arrow';
99

10-
type ArrowElement = React.ElementRef<typeof Primitive.svg>;
10+
type ArrowElement = React.ComponentRef<typeof Primitive.svg>;
1111
type PrimitiveSvgProps = React.ComponentPropsWithoutRef<typeof Primitive.svg>;
1212
interface ArrowProps extends PrimitiveSvgProps {}
1313

‎packages/react/aspect-ratio/src/aspect-ratio.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Primitive } from '@radix-ui/react-primitive';
77

88
const NAME = 'AspectRatio';
99

10-
type AspectRatioElement = React.ElementRef<typeof Primitive.div>;
10+
type AspectRatioElement = React.ComponentRef<typeof Primitive.div>;
1111
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
1212
interface AspectRatioProps extends PrimitiveDivProps {
1313
ratio?: number;

0 commit comments

Comments
 (0)