Skip to content

Commit 06de2d4

Browse files
vladmorozchungweileong94BenAHammond
authored
React 19 compatibility (#2934)
* Access ref from props before element.ref * Apply ref access fix to presence component * adding react 19 to peer deps * Upgrade to React 18.3.1 * Add missing React 19 peer deps * Remove propTypes * Update ReactDOM usage * yarn * Upgrade to React 19 and access refs in a backwards compatible way * Recover Storybook * Remove an outdated type * Suppress a type error, tweak formatting * Track version changes * Don't throw in render, just log the error * Update and upgrade tests * Roll back tests deps changes * ^ in react version affects tests? * Upgrade testing-library and wrap FocusScope tests in act * Upgrade @testing-library/react to 16.0 * Of cooooourse * Remove unnecessary changes * Refine getElementRef * Upgrade start-server-and-test * Flaky cypress test? * Remove unnecessary changes --------- Co-authored-by: Chung Wei <leongchungwei@hotmail.com> Co-authored-by: Ben Hammond <ben.a.hammond@gmail.com>
1 parent af1e3b4 commit 06de2d4

File tree

105 files changed

+4044
-4264
lines changed

Some content is hidden

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

105 files changed

+4044
-4264
lines changed

‎.yarn/versions/58957da5.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
releases:
2+
"@radix-ui/react-accessible-icon": patch
3+
"@radix-ui/react-accordion": patch
4+
"@radix-ui/react-alert-dialog": patch
5+
"@radix-ui/react-announce": patch
6+
"@radix-ui/react-arrow": patch
7+
"@radix-ui/react-aspect-ratio": patch
8+
"@radix-ui/react-avatar": patch
9+
"@radix-ui/react-checkbox": patch
10+
"@radix-ui/react-collapsible": patch
11+
"@radix-ui/react-collection": patch
12+
"@radix-ui/react-compose-refs": patch
13+
"@radix-ui/react-context": patch
14+
"@radix-ui/react-context-menu": patch
15+
"@radix-ui/react-dialog": patch
16+
"@radix-ui/react-direction": patch
17+
"@radix-ui/react-dismissable-layer": patch
18+
"@radix-ui/react-dropdown-menu": patch
19+
"@radix-ui/react-focus-guards": patch
20+
"@radix-ui/react-focus-scope": patch
21+
"@radix-ui/react-form": patch
22+
"@radix-ui/react-hover-card": patch
23+
"@radix-ui/react-id": patch
24+
"@radix-ui/react-label": patch
25+
"@radix-ui/react-menu": patch
26+
"@radix-ui/react-menubar": patch
27+
"@radix-ui/react-navigation-menu": patch
28+
"@radix-ui/react-popover": patch
29+
"@radix-ui/react-popper": patch
30+
"@radix-ui/react-portal": patch
31+
"@radix-ui/react-presence": minor
32+
"@radix-ui/react-primitive": major
33+
"@radix-ui/react-progress": patch
34+
"@radix-ui/react-radio-group": patch
35+
"@radix-ui/react-roving-focus": patch
36+
"@radix-ui/react-scroll-area": patch
37+
"@radix-ui/react-select": patch
38+
"@radix-ui/react-separator": patch
39+
"@radix-ui/react-slider": patch
40+
"@radix-ui/react-slot": minor
41+
"@radix-ui/react-switch": patch
42+
"@radix-ui/react-tabs": patch
43+
"@radix-ui/react-toast": patch
44+
"@radix-ui/react-toggle": patch
45+
"@radix-ui/react-toggle-group": patch
46+
"@radix-ui/react-toolbar": patch
47+
"@radix-ui/react-tooltip": patch
48+
"@radix-ui/react-use-callback-ref": patch
49+
"@radix-ui/react-use-controllable-state": patch
50+
"@radix-ui/react-use-escape-keydown": patch
51+
"@radix-ui/react-use-layout-effect": patch
52+
"@radix-ui/react-use-previous": patch
53+
"@radix-ui/react-use-rect": patch
54+
"@radix-ui/react-use-size": patch
55+
"@radix-ui/react-visually-hidden": patch
56+
57+
declined:
58+
- primitives
59+
- ssr-testing

‎cypress/integration/Form.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ describe('Form', () => {
88
});
99

1010
function checkControlMessageAssociation() {
11+
cy.get('@control').should('have.attr', 'aria-describedby');
1112
cy.get('@control')
1213
.invoke('attr', 'aria-describedby')
1314
.then((ariaDescribedby) =>

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
"bump:check": "yarn version check"
2929
},
3030
"dependencies": {
31-
"react": "^18.0.0",
32-
"react-dom": "^18.0.0"
31+
"react": "^18.3.1",
32+
"react-dom": "^18.3.1"
3333
},
3434
"devDependencies": {
3535
"@stitches/core": "^1.2.8",
@@ -39,8 +39,9 @@
3939
"@storybook/react-webpack5": "^7.6.17",
4040
"@storybook/test": "^7.6.17",
4141
"@testing-library/cypress": "^7.0.6",
42+
"@testing-library/dom": "^10.1.0",
4243
"@testing-library/jest-dom": "^5.16.4",
43-
"@testing-library/react": "^13.0.1",
44+
"@testing-library/react": "^16.0.0",
4445
"@testing-library/user-event": "^14.1.0",
4546
"@types/eslint": "^7.28.0",
4647
"@types/fs-extra": "^11",
@@ -74,7 +75,7 @@
7475
"pretty-quick": "^2.0.1",
7576
"react-test-renderer": "^18.0.0",
7677
"replace-in-files": "^3.0.0",
77-
"start-server-and-test": "^1.12.5",
78+
"start-server-and-test": "2.0.3",
7879
"storybook": "^7.6.17",
7980
"ts-jest": "^27.1.4",
8081
"tsup": "8.0.2",

‎packages/react/accessible-icon/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
"peerDependencies": {
3434
"@types/react": "*",
3535
"@types/react-dom": "*",
36-
"react": "^16.8 || ^17.0 || ^18.0",
37-
"react-dom": "^16.8 || ^17.0 || ^18.0"
36+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
37+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
3838
},
3939
"peerDependenciesMeta": {
4040
"@types/react": {

‎packages/react/accordion/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
"peerDependencies": {
4242
"@types/react": "*",
4343
"@types/react-dom": "*",
44-
"react": "^16.8 || ^17.0 || ^18.0",
45-
"react-dom": "^16.8 || ^17.0 || ^18.0"
44+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
45+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
4646
},
4747
"peerDependenciesMeta": {
4848
"@types/react": {

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

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
99
import { createCollapsibleScope } from '@radix-ui/react-collapsible';
1010
import { useId } from '@radix-ui/react-id';
1111

12-
import type * as Radix from '@radix-ui/react-primitive';
1312
import type { Scope } from '@radix-ui/react-context';
1413
import { useDirection } from '@radix-ui/react-direction';
1514

@@ -59,28 +58,6 @@ const Accordion = React.forwardRef<AccordionElement, AccordionSingleProps | Acco
5958

6059
Accordion.displayName = ACCORDION_NAME;
6160

62-
Accordion.propTypes = {
63-
type(props) {
64-
const value = props.value || props.defaultValue;
65-
if (props.type && !['single', 'multiple'].includes(props.type)) {
66-
return new Error(
67-
'Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.'
68-
);
69-
}
70-
if (props.type === 'multiple' && typeof value === 'string') {
71-
return new Error(
72-
'Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.'
73-
);
74-
}
75-
if (props.type === 'single' && Array.isArray(value)) {
76-
return new Error(
77-
'Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.'
78-
);
79-
}
80-
return null;
81-
},
82-
};
83-
8461
/* -----------------------------------------------------------------------------------------------*/
8562

8663
type AccordionValueContextValue = {
@@ -223,7 +200,7 @@ const [AccordionImplProvider, useAccordionContext] =
223200
createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME);
224201

225202
type AccordionImplElement = React.ElementRef<typeof Primitive.div>;
226-
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
203+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
227204
interface AccordionImplProps extends PrimitiveDivProps {
228205
/**
229206
* Whether or not an accordion is disabled from user interaction.
@@ -353,7 +330,7 @@ const [AccordionItemProvider, useAccordionItemContext] =
353330
createAccordionContext<AccordionItemContextValue>(ITEM_NAME);
354331

355332
type AccordionItemElement = React.ElementRef<typeof CollapsiblePrimitive.Root>;
356-
type CollapsibleProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
333+
type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
357334
interface AccordionItemProps
358335
extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
359336
/**
@@ -418,7 +395,7 @@ AccordionItem.displayName = ITEM_NAME;
418395
const HEADER_NAME = 'AccordionHeader';
419396

420397
type AccordionHeaderElement = React.ElementRef<typeof Primitive.h3>;
421-
type PrimitiveHeading3Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h3>;
398+
type PrimitiveHeading3Props = React.ComponentPropsWithoutRef<typeof Primitive.h3>;
422399
interface AccordionHeaderProps extends PrimitiveHeading3Props {}
423400

424401
/**
@@ -451,7 +428,7 @@ AccordionHeader.displayName = HEADER_NAME;
451428
const TRIGGER_NAME = 'AccordionTrigger';
452429

453430
type AccordionTriggerElement = React.ElementRef<typeof CollapsiblePrimitive.Trigger>;
454-
type CollapsibleTriggerProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
431+
type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
455432
interface AccordionTriggerProps extends CollapsibleTriggerProps {}
456433

457434
/**
@@ -489,7 +466,7 @@ AccordionTrigger.displayName = TRIGGER_NAME;
489466
const CONTENT_NAME = 'AccordionContent';
490467

491468
type AccordionContentElement = React.ElementRef<typeof CollapsiblePrimitive.Content>;
492-
type CollapsibleContentProps = Radix.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
469+
type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
493470
interface AccordionContentProps extends CollapsibleContentProps {}
494471

495472
/**

‎packages/react/alert-dialog/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
"peerDependencies": {
3939
"@types/react": "*",
4040
"@types/react-dom": "*",
41-
"react": "^16.8 || ^17.0 || ^18.0",
42-
"react-dom": "^16.8 || ^17.0 || ^18.0"
41+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
42+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
4343
},
4444
"peerDependenciesMeta": {
4545
"@types/react": {

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { createDialogScope } from '@radix-ui/react-dialog';
66
import { composeEventHandlers } from '@radix-ui/primitive';
77
import { Slottable } from '@radix-ui/react-slot';
88

9-
import type * as Radix from '@radix-ui/react-primitive';
109
import type { Scope } from '@radix-ui/react-context';
1110

1211
/* -------------------------------------------------------------------------------------------------
@@ -21,7 +20,7 @@ const [createAlertDialogContext, createAlertDialogScope] = createContextScope(RO
2120
]);
2221
const useDialogScope = createDialogScope();
2322

24-
type DialogProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
23+
type DialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
2524
interface AlertDialogProps extends Omit<DialogProps, 'modal'> {}
2625

2726
const AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {
@@ -38,7 +37,7 @@ AlertDialog.displayName = ROOT_NAME;
3837
const TRIGGER_NAME = 'AlertDialogTrigger';
3938

4039
type AlertDialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
41-
type DialogTriggerProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
40+
type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
4241
interface AlertDialogTriggerProps extends DialogTriggerProps {}
4342

4443
const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(
@@ -57,7 +56,7 @@ AlertDialogTrigger.displayName = TRIGGER_NAME;
5756

5857
const PORTAL_NAME = 'AlertDialogPortal';
5958

60-
type DialogPortalProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
59+
type DialogPortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
6160
interface AlertDialogPortalProps extends DialogPortalProps {}
6261

6362
const AlertDialogPortal: React.FC<AlertDialogPortalProps> = (
@@ -77,7 +76,7 @@ AlertDialogPortal.displayName = PORTAL_NAME;
7776
const OVERLAY_NAME = 'AlertDialogOverlay';
7877

7978
type AlertDialogOverlayElement = React.ElementRef<typeof DialogPrimitive.Overlay>;
80-
type DialogOverlayProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
79+
type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
8180
interface AlertDialogOverlayProps extends DialogOverlayProps {}
8281

8382
const AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(
@@ -104,7 +103,7 @@ const [AlertDialogContentProvider, useAlertDialogContentContext] =
104103
createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);
105104

106105
type AlertDialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
107-
type DialogContentProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
106+
type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
108107
interface AlertDialogContentProps
109108
extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}
110109

@@ -161,7 +160,7 @@ AlertDialogContent.displayName = CONTENT_NAME;
161160
const TITLE_NAME = 'AlertDialogTitle';
162161

163162
type AlertDialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
164-
type DialogTitleProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
163+
type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
165164
interface AlertDialogTitleProps extends DialogTitleProps {}
166165

167166
const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
@@ -181,7 +180,7 @@ AlertDialogTitle.displayName = TITLE_NAME;
181180
const DESCRIPTION_NAME = 'AlertDialogDescription';
182181

183182
type AlertDialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
184-
type DialogDescriptionProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
183+
type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
185184
interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
186185

187186
const AlertDialogDescription = React.forwardRef<
@@ -202,7 +201,7 @@ AlertDialogDescription.displayName = DESCRIPTION_NAME;
202201
const ACTION_NAME = 'AlertDialogAction';
203202

204203
type AlertDialogActionElement = React.ElementRef<typeof DialogPrimitive.Close>;
205-
type DialogCloseProps = Radix.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
204+
type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
206205
interface AlertDialogActionProps extends DialogCloseProps {}
207206

208207
const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(

‎packages/react/announce/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"peerDependencies": {
3636
"@types/react": "*",
3737
"@types/react-dom": "*",
38-
"react": "^16.8 || ^17.0 || ^18.0",
39-
"react-dom": "^16.8 || ^17.0 || ^18.0"
38+
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
39+
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
4040
},
4141
"peerDependenciesMeta": {
4242
"@types/react": {

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
44
import { Primitive } from '@radix-ui/react-primitive';
55
import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
66

7-
import type * as Radix from '@radix-ui/react-primitive';
8-
97
type RegionType = 'polite' | 'assertive' | 'off';
108
type RegionRole = 'status' | 'alert' | 'log' | 'none';
119

@@ -24,7 +22,7 @@ const listenerMap = new Map<Element, number>();
2422
const NAME = 'Announce';
2523

2624
type AnnounceElement = React.ElementRef<typeof Primitive.div>;
27-
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
25+
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
2826
interface AnnounceProps extends PrimitiveDivProps {
2927
/**
3028
* Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that

0 commit comments

Comments
 (0)