From a704d5283404c70a37c83d9d1e00e2995a9b0ec9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gwenae=CC=88l=20Gallon?= Date: Mon, 9 Dec 2024 23:31:34 +0100 Subject: [PATCH] fix: @radix-ui/react-slot with React 19 https://github.com/radix-ui/primitives/pull/3229 --- package.json | 3 +- patches/@radix-ui__react-slot.patch | 50 +++++++++++++++++++++++++++++ pnpm-lock.yaml | 21 ++++++------ 3 files changed, 64 insertions(+), 10 deletions(-) create mode 100644 patches/@radix-ui__react-slot.patch diff --git a/package.json b/package.json index 146108ea3..c81757d1e 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,8 @@ "use-sync-external-store": "1.4.0" }, "patchedDependencies": { - "@radix-ui/react-presence@1.1.1": "patches/@radix-ui__react-presence@1.1.1.patch" + "@radix-ui/react-presence@1.1.1": "patches/@radix-ui__react-presence@1.1.1.patch", + "@radix-ui/react-slot": "patches/@radix-ui__react-slot.patch" } } } diff --git a/patches/@radix-ui__react-slot.patch b/patches/@radix-ui__react-slot.patch new file mode 100644 index 000000000..812844fd6 --- /dev/null +++ b/patches/@radix-ui__react-slot.patch @@ -0,0 +1,50 @@ +diff --git a/dist/index.js b/dist/index.js +index 724cd6fcdf2dce8622bcef6a4880e92fe05cf44c..c335e011edad42951d0c67439debe27a6a7688aa 100644 +--- a/dist/index.js ++++ b/dist/index.js +@@ -63,11 +63,15 @@ var SlotClone = React.forwardRef((props, forwardedRef) => { + const { children, ...slotProps } = props; + if (React.isValidElement(children)) { + const childrenRef = getElementRef(children); +- return React.cloneElement(children, { +- ...mergeProps(slotProps, children.props), +- // @ts-ignore +- ref: forwardedRef ? (0, import_react_compose_refs.composeRefs)(forwardedRef, childrenRef) : childrenRef +- }); ++ const props = { ++ ...mergeProps(slotProps, children.props) ++ } ++ // do not pass ref to React.Fragment for React 19 compatibility ++ if (children.type !== React.Fragment) { ++ props.ref = forwardedRef ? (0, import_react_compose_refs.composeRefs)(forwardedRef, childrenRef) : childrenRef; ++ } ++ ++ return React.cloneElement(children, props); + } + return React.Children.count(children) > 1 ? React.Children.only(null) : null; + }); +diff --git a/dist/index.mjs b/dist/index.mjs +index 73e28afb741e05e1d1bb4206fa917918bb9457ec..61b961dae21928d73c2a543d4e463e144846a29f 100644 +--- a/dist/index.mjs ++++ b/dist/index.mjs +@@ -25,11 +25,15 @@ var SlotClone = React.forwardRef((props, forwardedRef) => { + const { children, ...slotProps } = props; + if (React.isValidElement(children)) { + const childrenRef = getElementRef(children); +- return React.cloneElement(children, { +- ...mergeProps(slotProps, children.props), +- // @ts-ignore +- ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef +- }); ++ const props = { ++ ...mergeProps(slotProps, children.props) ++ } ++ // do not pass ref to React.Fragment for React 19 compatibility ++ if (children.type !== React.Fragment) { ++ props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef; ++ } ++ ++ return React.cloneElement(children, props); + } + return React.Children.count(children) > 1 ? React.Children.only(null) : null; + }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb95f6149..d020ce74f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ patchedDependencies: '@radix-ui/react-presence@1.1.1': hash: st3oteh4egccjals34fuqqdkii path: patches/@radix-ui__react-presence@1.1.1.patch + '@radix-ui/react-slot': + hash: sgl2itdoobnzdfpoiuqkqqunju + path: patches/@radix-ui__react-slot.patch importers: @@ -45,7 +48,7 @@ importers: version: 1.1.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-slot': specifier: 1.1.0 - version: 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + version: 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-tooltip': specifier: 1.1.4 version: 1.1.4(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) @@ -4240,7 +4243,7 @@ snapshots: '@radix-ui/react-context': 1.1.1(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-dialog': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) react: 19.0.0-rc-1c9b1387-20241204 react-dom: 19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204) optionalDependencies: @@ -4261,7 +4264,7 @@ snapshots: '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-context': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) react: 19.0.0-rc-1c9b1387-20241204 react-dom: 19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204) optionalDependencies: @@ -4298,7 +4301,7 @@ snapshots: '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-presence': 1.1.1(patch_hash=st3oteh4egccjals34fuqqdkii)(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) aria-hidden: 1.2.4 react: 19.0.0-rc-1c9b1387-20241204 @@ -4391,7 +4394,7 @@ snapshots: '@radix-ui/react-presence': 1.1.1(patch_hash=st3oteh4egccjals34fuqqdkii)(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) aria-hidden: 1.2.4 react: 19.0.0-rc-1c9b1387-20241204 @@ -4441,7 +4444,7 @@ snapshots: '@radix-ui/react-primitive@2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204)': dependencies: - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) react: 19.0.0-rc-1c9b1387-20241204 react-dom: 19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204) optionalDependencies: @@ -4480,7 +4483,7 @@ snapshots: '@radix-ui/react-popper': 1.2.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) @@ -4503,7 +4506,7 @@ snapshots: '@types/react': 19.0.1 '@types/react-dom': 19.0.2(@types/react@19.0.1) - '@radix-ui/react-slot@1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204)': + '@radix-ui/react-slot@1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) react: 19.0.0-rc-1c9b1387-20241204 @@ -4521,7 +4524,7 @@ snapshots: '@radix-ui/react-portal': 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-presence': 1.1.1(patch_hash=st3oteh4egccjals34fuqqdkii)(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-primitive': 2.0.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) - '@radix-ui/react-slot': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) + '@radix-ui/react-slot': 1.1.0(patch_hash=sgl2itdoobnzdfpoiuqkqqunju)(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@19.0.1)(react@19.0.0-rc-1c9b1387-20241204) '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0-rc-1c9b1387-20241204(react@19.0.0-rc-1c9b1387-20241204))(react@19.0.0-rc-1c9b1387-20241204) react: 19.0.0-rc-1c9b1387-20241204