React 19 support (RC)

apps/playground/app/sink/tab-nav-demo.tsx

@@ -10,7 +10,7 @@ const TabNavDemo = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TabNav.Root>
 >((props, forwardedRef) => {
   const params = useSearchParams();
-  const tab = params.get('tab');
+  const tab = params?.get('tab');
   return (
     <TabNav.Root {...props} ref={forwardedRef}>
       <TabNav.Link asChild active={tab === 'account' || tab === null}>

apps/playground/app/test-checkbox-card/page.tsx

@@ -15,11 +15,12 @@ import { NextThemeProvider } from '../next-theme-provider';
 
 export default function Test() {
   const [frameworks, setFrameworks] = React.useState(['next']);
-  const [frameworksForm, setFrameworksForm] = React.useState([]);
+  const [frameworksForm, setFrameworksForm] = React.useState<FormDataEntryValue[]>([]);
 
   function handleChange(event: React.FormEvent<HTMLFormElement>) {
     const formData = new FormData(event.currentTarget);
-    setFrameworksForm(formData.getAll('frameworks'));
+    const values = formData.getAll('frameworks');
+    setFrameworksForm(values);
   }
 
   return (

apps/playground/app/test-skeleton/page.tsx

@@ -17,7 +17,6 @@ import {
   Skeleton,
 } from '@radix-ui/themes';
 import { NextThemeProvider } from '../next-theme-provider';
-import { MixIcon } from '@radix-ui/react-icons';
 
 export default function Test() {
   const [isLoading, setIsLoading] = React.useState(true);
@@ -28,7 +27,11 @@ export default function Test() {
       setIsLoading(false);
     }, 2000);
 
-    return () => clearTimeout(loadingTimeoutRef.current);
+    return () => {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current);
+      }
+    };
   }, []);
 
   return (

apps/playground/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

apps/playground/package.json

@@ -10,20 +10,20 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next"
   },
   "dependencies": {
-    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/themes": "*",
-    "next": "^14.1.0",
-    "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-use": "^17.4.0",
-    "seedrandom": "^3.0.5"
+    "next": "14.1.0",
+    "next-themes": "0.2.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-use": "17.4.0",
+    "seedrandom": "3.0.5"
   },
   "devDependencies": {
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.2.53",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "17.0.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "eslint-config-custom": "*",
-    "typescript": "^5.3.3"
+    "typescript": "5.4.5"
   }
 }

apps/playground/tsconfig.json

@@ -23,7 +23,8 @@
     "noEmit": true,
     "resolveJsonModule": true,
     "strict": false,
-    "target": "es5"
+    "target": "es5",
+    "strictNullChecks": true
   },
   "include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]

package.json

@@ -1,4 +1,5 @@
 {
+  "name": "monorepo",
   "private": true,
   "packageManager": "yarn@1.22.18",
   "workspaces": [
@@ -12,8 +13,8 @@
     "clean": "turbo run clean && rm -rf node_modules"
   },
   "devDependencies": {
-    "eslint": "^8.29.0",
+    "eslint": "8.29.0",
     "eslint-config-custom": "*",
-    "turbo": "latest"
+    "turbo": "2.0.3"
   }
 }

packages/eslint-config-custom/package.json

@@ -4,10 +4,10 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "eslint-config-next": "^13.4.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-config-turbo": "^1.9.3"
+    "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-config-turbo": "2.0.3",
+    "eslint-plugin-react": "7.28.0"
   },
   "publishConfig": {
     "access": "public"

packages/radix-ui-themes/changelog.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.1.0
+
+- Support React 19
+- Upgrade Radix Primitives to the newest versions
+
 ## 3.0.5
 
 - Add `align`, `height`, `minHeight`, and `maxHeight` props to `AlertDialog.Content` and `Dialog.Content`

packages/radix-ui-themes/package.json

@@ -84,47 +84,47 @@
     "prepublishOnly": "yarn lint"
   },
   "dependencies": {
-    "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/primitive": "^1.0.1",
-    "@radix-ui/react-accessible-icon": "^1.0.3",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-compose-refs": "^1.0.1",
-    "@radix-ui/react-context": "^1.0.1",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-direction": "^1.0.1",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-form": "^0.0.3",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-portal": "^1.0.4",
-    "@radix-ui/react-primitive": "^1.0.3",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-roving-focus": "^1.0.4",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@radix-ui/react-use-callback-ref": "^1.0.1",
-    "@radix-ui/react-use-controllable-state": "^1.0.1",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
-    "classnames": "^2.3.2",
+    "@radix-ui/colors": "3.0.0",
+    "@radix-ui/primitive": "1.1.0-rc.5",
+    "@radix-ui/react-accessible-icon": "1.1.0-rc.5",
+    "@radix-ui/react-alert-dialog": "1.1.0-rc.6",
+    "@radix-ui/react-aspect-ratio": "1.1.0-rc.5",
+    "@radix-ui/react-avatar": "1.1.0-rc.5",
+    "@radix-ui/react-checkbox": "1.1.0-rc.5",
+    "@radix-ui/react-compose-refs": "1.1.0-rc.5",
+    "@radix-ui/react-context": "1.1.0-rc.5",
+    "@radix-ui/react-context-menu": "2.2.0-rc.5",
+    "@radix-ui/react-dialog": "1.1.0-rc.7",
+    "@radix-ui/react-direction": "1.1.0-rc.5",
+    "@radix-ui/react-dropdown-menu": "2.1.0-rc.5",
+    "@radix-ui/react-form": "0.1.0-rc.5",
+    "@radix-ui/react-hover-card": "1.1.0-rc.5",
+    "@radix-ui/react-navigation-menu": "1.2.0-rc.5",
+    "@radix-ui/react-popover": "1.1.0-rc.5",
+    "@radix-ui/react-portal": "1.1.0-rc.5",
+    "@radix-ui/react-primitive": "2.0.0-rc.2",
+    "@radix-ui/react-progress": "1.1.0-rc.5",
+    "@radix-ui/react-radio-group": "1.2.0-rc.5",
+    "@radix-ui/react-roving-focus": "1.1.0-rc.5",
+    "@radix-ui/react-scroll-area": "1.1.0-rc.5",
+    "@radix-ui/react-select": "2.1.0-rc.5",
+    "@radix-ui/react-slider": "1.2.0-rc.8",
+    "@radix-ui/react-slot": "1.1.0-rc.5",
+    "@radix-ui/react-switch": "1.1.0-rc.5",
+    "@radix-ui/react-tabs": "1.1.0-rc.5",
+    "@radix-ui/react-toggle-group": "1.1.0-rc.5",
+    "@radix-ui/react-tooltip": "1.1.0-rc.5",
+    "@radix-ui/react-use-callback-ref": "1.1.0-rc.5",
+    "@radix-ui/react-use-controllable-state": "1.1.0-rc.5",
+    "@radix-ui/react-visually-hidden": "1.1.0-rc.5",
+    "classnames": "2.3.2",
     "react-remove-scroll-bar": "2.3.4"
   },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "^16.8 || ^17.0 || ^18.0",
-    "react-dom": "^16.8 || ^17.0 || ^18.0"
+    "react": "16.8 || ^17.0 || ^18.0 || ^19.0",
+    "react-dom": "16.8 || ^17.0 || ^18.0 || ^19.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -135,25 +135,25 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^18.2.53",
-    "@types/react-dom": "^18.2.18",
-    "autoprefixer": "^10.4.19",
-    "esbuild": "^0.20.0",
-    "eslint": "^8.15.0",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "autoprefixer": "10.4.19",
+    "esbuild": "0.20.0",
+    "eslint": "8.15.0",
     "eslint-config-custom": "*",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-require-extensions": "^0.1.3",
-    "postcss": "^8.4.33",
-    "postcss-cli": "^11.0.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-custom-media": "^10.0.2",
-    "postcss-discard-empty": "^6.0.1",
-    "postcss-import": "^16.0.0",
-    "postcss-nesting": "^12.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "stylelint": "^16.1.0",
-    "typescript": "^5.3.3"
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-require-extensions": "0.1.3",
+    "postcss": "8.4.33",
+    "postcss-cli": "11.0.0",
+    "postcss-combine-duplicated-selectors": "10.0.3",
+    "postcss-custom-media": "10.0.2",
+    "postcss-discard-empty": "6.0.1",
+    "postcss-import": "16.0.0",
+    "postcss-nesting": "12.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "stylelint": "16.1.0",
+    "typescript": "5.3.3"
   },
   "publishConfig": {
     "access": "public"

packages/radix-ui-themes/src/components/accessible-icon.tsx

@@ -1,3 +1 @@
-'use client';
-
 export { AccessibleIcon } from '@radix-ui/react-accessible-icon';

packages/radix-ui-themes/src/components/alert-dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';

packages/radix-ui-themes/src/components/aspect-ratio.tsx

@@ -1,3 +1 @@
-'use client';
-
 export { AspectRatio } from '@radix-ui/react-aspect-ratio';

packages/radix-ui-themes/src/components/checkbox-group.primitive.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { createCheckboxScope } from '@radix-ui/react-checkbox';
@@ -9,7 +11,6 @@ import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useDirection } from '@radix-ui/react-direction';
 
-import type * as Radix from '@radix-ui/react-primitive';
 import type { Scope } from '@radix-ui/react-context';
 
 /* -------------------------------------------------------------------------------------------------
@@ -38,12 +39,12 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] =
   createCheckboxGroupContext<CheckboxGroupContextValue>(CHECKBOX_GROUP_NAME);
 
 type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
-type RovingFocusGroupProps = Radix.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
-type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
+type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;
+type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
 interface CheckboxGroupProps extends PrimitiveDivProps {
   name?: CheckboxGroupContextValue['name'];
-  required?: Radix.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
-  disabled?: Radix.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
+  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
+  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
   dir?: RovingFocusGroupProps['dir'];
   orientation?: RovingFocusGroupProps['orientation'];
   loop?: RovingFocusGroupProps['loop'];
@@ -125,7 +126,7 @@ CheckboxGroup.displayName = CHECKBOX_GROUP_NAME;
 const ITEM_NAME = 'CheckboxGroupItem';
 
 type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
-type CheckboxProps = Radix.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 interface CheckboxGroupItemProps
   extends Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange' | 'name'> {
   value: string;
@@ -179,7 +180,7 @@ CheckboxGroupItem.displayName = ITEM_NAME;
 const INDICATOR_NAME = 'CheckboxGroupIndicator';
 
 type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;
-type CheckboxIndicatorProps = Radix.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
+type CheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
 interface CheckboxGroupIndicatorProps extends CheckboxIndicatorProps {}
 
 const CheckboxGroupIndicator = React.forwardRef<

packages/radix-ui-themes/src/components/checkbox.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';

packages/radix-ui-themes/src/components/dialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as DialogPrimitive from '@radix-ui/react-dialog';

packages/radix-ui-themes/src/components/hover-card.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';

packages/radix-ui-themes/src/components/popover.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as PopoverPrimitive from '@radix-ui/react-popover';

packages/radix-ui-themes/src/components/portal.tsx

@@ -1,3 +1 @@
-'use client';
-
 export { Portal } from '@radix-ui/react-portal';

packages/radix-ui-themes/src/components/progress.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as ProgressPrimitive from '@radix-ui/react-progress';

packages/radix-ui-themes/src/components/radio-cards.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';

packages/radix-ui-themes/src/components/scroll-area.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';

packages/radix-ui-themes/src/components/separator.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 import classNames from 'classnames';
 

packages/radix-ui-themes/src/components/skeleton.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from '@radix-ui/react-slot';
 
+import { inert } from '../helpers/inert.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { skeletonPropDefs } from './skeleton.props.js';
@@ -34,8 +35,8 @@ const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwar
       className={classNames('rt-Skeleton', className)}
       data-inline-skeleton={React.isValidElement(children) ? undefined : true}
       tabIndex={-1}
-      // Workaround to use `inert` until https://github.com/facebook/react/pull/24730 is merged.
-      {...{ inert: true ? '' : undefined }}
+      // @ts-ignore
+      inert={inert}
       {...skeletonProps}
     >
       {children}