From 7f6218db50d2225b5fe31123b023dd28bfde841c Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 25 Oct 2024 15:36:09 +0200 Subject: [PATCH 1/4] add React 19 to peer dependencies --- packages/@headlessui-react/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/package.json b/packages/@headlessui-react/package.json index dd94458f4..53720d8dc 100644 --- a/packages/@headlessui-react/package.json +++ b/packages/@headlessui-react/package.json @@ -42,8 +42,8 @@ "clean": "rimraf ./dist" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18" + "react": "^18 || ^19", + "react-dom": "^18 || ^19" }, "devDependencies": { "@testing-library/react": "^15.0.7", From 2bc1cd2221f1a6335dbe53e9f7b91bbc871a90ec Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 25 Oct 2024 15:36:24 +0200 Subject: [PATCH 2/4] access `componentInstance.ref` in a safe way This makes it work in both React 18 and React 19 --- packages/@headlessui-react/src/utils/render.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts index ae9a6b65b..36018cefe 100644 --- a/packages/@headlessui-react/src/utils/render.ts +++ b/packages/@headlessui-react/src/utils/render.ts @@ -1,4 +1,4 @@ -import { +import React, { Fragment, cloneElement, createElement, @@ -257,7 +257,7 @@ function _render( mergedProps, dataAttributes, refRelatedProps, - { ref: mergeRefs((resolvedChildren as any).ref, refRelatedProps.ref) }, + { ref: mergeRefs(getElementRef(resolvedChildren), refRelatedProps.ref) }, classNameProps ) ) @@ -460,3 +460,8 @@ function omit>(object: T, keysToOmit: string[] = []) } return clone } + +function getElementRef(element: React.ReactElement) { + // @ts-expect-error + return React.version.split('.')[0] >= '19' ? element.props.ref : element.ref +} From aac458ac63dec15b982e87f1935b2598d2fd27dd Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 25 Oct 2024 15:38:57 +0200 Subject: [PATCH 3/4] temporarily allow `^19`'s RC versions --- packages/@headlessui-react/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/package.json b/packages/@headlessui-react/package.json index 53720d8dc..c5e42e0c3 100644 --- a/packages/@headlessui-react/package.json +++ b/packages/@headlessui-react/package.json @@ -42,8 +42,8 @@ "clean": "rimraf ./dist" }, "peerDependencies": { - "react": "^18 || ^19", - "react-dom": "^18 || ^19" + "react": "^18 || ^19 || ^19.0.0-rc", + "react-dom": "^18 || ^19 || ^19.0.0-rc" }, "devDependencies": { "@testing-library/react": "^15.0.7", From e7e3a069ce39492b6f524283e3f4d523a9afac87 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 25 Oct 2024 15:44:01 +0200 Subject: [PATCH 4/4] update changelog --- packages/@headlessui-react/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index d4c17470a..deeb12392 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Added + +- Add React 19 support ([#3543](https://github.com/tailwindlabs/headlessui/pull/3543)) ## [2.1.10] - 2024-10-10