Skip to content

Commit 6d64eff

Browse files
martijnrusschenmartijnrusschen
authored
Merge pull request Hacker0x01#5787 from Hacker0x01/docs-robust
Fix React 19 compatibility issues with @floating-ui/react
2 parents dcb0028 + e9f6002 commit 6d64eff

File tree

6 files changed

+134
-129
lines changed

6 files changed

+134
-129
lines changed

‎docs-site/vite.config.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import { defineConfig } from "vite";
22
import react from "@vitejs/plugin-react";
3+
import path from "path";
4+
import { fileURLToPath } from "url";
5+
6+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
37

48
export default defineConfig({
59
plugins: [react()],
10+
resolve: {
11+
alias: {
12+
// Ensure single React instance to avoid "Invalid hook call" errors
13+
react: path.resolve(__dirname, "node_modules/react"),
14+
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
15+
},
16+
},
617
});

‎docs-site/yarn.lock‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -910,55 +910,55 @@ __metadata:
910910
languageName: node
911911
linkType: hard
912912

913-
"@floating-ui/core@npm:^1.6.0":
914-
version: 1.6.9
915-
resolution: "@floating-ui/core@npm:1.6.9"
913+
"@floating-ui/core@npm:^1.7.3":
914+
version: 1.7.3
915+
resolution: "@floating-ui/core@npm:1.7.3"
916916
dependencies:
917-
"@floating-ui/utils": "npm:^0.2.9"
918-
checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
917+
"@floating-ui/utils": "npm:^0.2.10"
918+
checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
919919
languageName: node
920920
linkType: hard
921921

922-
"@floating-ui/dom@npm:^1.0.0":
923-
version: 1.6.13
924-
resolution: "@floating-ui/dom@npm:1.6.13"
922+
"@floating-ui/dom@npm:^1.7.3":
923+
version: 1.7.3
924+
resolution: "@floating-ui/dom@npm:1.7.3"
925925
dependencies:
926-
"@floating-ui/core": "npm:^1.6.0"
927-
"@floating-ui/utils": "npm:^0.2.9"
928-
checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
926+
"@floating-ui/core": "npm:^1.7.3"
927+
"@floating-ui/utils": "npm:^0.2.10"
928+
checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
929929
languageName: node
930930
linkType: hard
931931

932-
"@floating-ui/react-dom@npm:^2.1.2":
933-
version: 2.1.2
934-
resolution: "@floating-ui/react-dom@npm:2.1.2"
932+
"@floating-ui/react-dom@npm:^2.1.5":
933+
version: 2.1.5
934+
resolution: "@floating-ui/react-dom@npm:2.1.5"
935935
dependencies:
936-
"@floating-ui/dom": "npm:^1.0.0"
936+
"@floating-ui/dom": "npm:^1.7.3"
937937
peerDependencies:
938938
react: ">=16.8.0"
939939
react-dom: ">=16.8.0"
940-
checksum: 10c0/e855131c74e68cab505f7f44f92cd4e2efab1c125796db3116c54c0859323adae4bf697bf292ee83ac77b9335a41ad67852193d7aeace90aa2e1c4a640cafa60
940+
checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
941941
languageName: node
942942
linkType: hard
943943

944-
"@floating-ui/react@npm:^0.27.3":
945-
version: 0.27.3
946-
resolution: "@floating-ui/react@npm:0.27.3"
944+
"@floating-ui/react@npm:^0.27.15":
945+
version: 0.27.15
946+
resolution: "@floating-ui/react@npm:0.27.15"
947947
dependencies:
948-
"@floating-ui/react-dom": "npm:^2.1.2"
949-
"@floating-ui/utils": "npm:^0.2.9"
948+
"@floating-ui/react-dom": "npm:^2.1.5"
949+
"@floating-ui/utils": "npm:^0.2.10"
950950
tabbable: "npm:^6.0.0"
951951
peerDependencies:
952952
react: ">=17.0.0"
953953
react-dom: ">=17.0.0"
954-
checksum: 10c0/9ebc4e82af905cfafeb5cde1dfbc15a2541d4eaaf1e13fb6b8acbb9f0c3535a7c331b8dee3ab5bb03acb21716ee2ab155629a6c14c3227cf959bf8ad92594539
954+
checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
955955
languageName: node
956956
linkType: hard
957957

958-
"@floating-ui/utils@npm:^0.2.9":
959-
version: 0.2.9
960-
resolution: "@floating-ui/utils@npm:0.2.9"
961-
checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
958+
"@floating-ui/utils@npm:^0.2.10":
959+
version: 0.2.10
960+
resolution: "@floating-ui/utils@npm:0.2.10"
961+
checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
962962
languageName: node
963963
linkType: hard
964964

@@ -4593,7 +4593,7 @@ __metadata:
45934593
version: 0.0.0-use.local
45944594
resolution: "react-datepicker@portal:../::locator=react-datepicker-docs%40workspace%3A."
45954595
dependencies:
4596-
"@floating-ui/react": "npm:^0.27.3"
4596+
"@floating-ui/react": "npm:^0.27.15"
45974597
clsx: "npm:^2.1.1"
45984598
date-fns: "npm:^4.1.0"
45994599
peerDependencies:

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
9999
},
100100
"dependencies": {
101-
"@floating-ui/react": "^0.27.3",
101+
"@floating-ui/react": "^0.27.15",
102102
"clsx": "^2.1.1",
103103
"date-fns": "^4.1.0"
104104
},

‎src/popper_component.tsx‎

Lines changed: 63 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FloatingArrow } from "@floating-ui/react";
22
import { clsx } from "clsx";
3-
import React, { createElement, Component } from "react";
3+
import React, { createElement } from "react";
44

55
import Portal from "./portal";
66
import TabLoop from "./tab_loop";
@@ -29,82 +29,74 @@ interface PopperComponentProps
2929
}
3030

3131
// Exported for testing purposes
32-
export class PopperComponent extends Component<PopperComponentProps> {
33-
static get defaultProps() {
34-
return {
35-
hidePopper: true,
36-
};
37-
}
38-
39-
render(): React.ReactElement {
40-
const {
41-
className,
42-
wrapperClassName,
43-
hidePopper = PopperComponent.defaultProps.hidePopper,
44-
popperComponent,
45-
targetComponent,
46-
enableTabLoop,
47-
popperOnKeyDown,
48-
portalId,
49-
portalHost,
50-
popperProps,
51-
showArrow,
52-
} = this.props;
53-
54-
let popper: React.ReactElement | undefined = undefined;
32+
export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
33+
const {
34+
className,
35+
wrapperClassName,
36+
hidePopper = true,
37+
popperComponent,
38+
targetComponent,
39+
enableTabLoop,
40+
popperOnKeyDown,
41+
portalId,
42+
portalHost,
43+
popperProps,
44+
showArrow,
45+
} = props;
5546

56-
if (!hidePopper) {
57-
const classes = clsx("react-datepicker-popper", className);
58-
popper = (
59-
<TabLoop enableTabLoop={enableTabLoop}>
60-
<div
61-
ref={popperProps.refs.setFloating}
62-
style={popperProps.floatingStyles}
63-
className={classes}
64-
data-placement={popperProps.placement}
65-
onKeyDown={popperOnKeyDown}
66-
>
67-
{popperComponent}
68-
{showArrow && (
69-
<FloatingArrow
70-
ref={popperProps.arrowRef}
71-
context={popperProps.context}
72-
fill="currentColor"
73-
strokeWidth={1}
74-
height={8}
75-
width={16}
76-
style={{ transform: "translateY(-1px)" }}
77-
className="react-datepicker__triangle"
78-
/>
79-
)}
80-
</div>
81-
</TabLoop>
82-
);
83-
}
47+
let popper: React.ReactElement | undefined = undefined;
8448

85-
if (this.props.popperContainer) {
86-
popper = createElement(this.props.popperContainer, {}, popper);
87-
}
88-
89-
if (portalId && !hidePopper) {
90-
popper = (
91-
<Portal portalId={portalId} portalHost={portalHost}>
92-
{popper}
93-
</Portal>
94-
);
95-
}
49+
if (!hidePopper) {
50+
const classes = clsx("react-datepicker-popper", className);
51+
popper = (
52+
<TabLoop enableTabLoop={enableTabLoop}>
53+
<div
54+
ref={popperProps.refs.setFloating}
55+
style={popperProps.floatingStyles}
56+
className={classes}
57+
data-placement={popperProps.placement}
58+
onKeyDown={popperOnKeyDown}
59+
>
60+
{popperComponent}
61+
{showArrow && (
62+
<FloatingArrow
63+
ref={popperProps.arrowRef}
64+
context={popperProps.context}
65+
fill="currentColor"
66+
strokeWidth={1}
67+
height={8}
68+
width={16}
69+
style={{ transform: "translateY(-1px)" }}
70+
className="react-datepicker__triangle"
71+
/>
72+
)}
73+
</div>
74+
</TabLoop>
75+
);
76+
}
9677

97-
const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
78+
if (props.popperContainer) {
79+
popper = createElement(props.popperContainer, {}, popper);
80+
}
9881

99-
return (
100-
<>
101-
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
102-
{targetComponent}
103-
</div>
82+
if (portalId && !hidePopper) {
83+
popper = (
84+
<Portal portalId={portalId} portalHost={portalHost}>
10485
{popper}
105-
</>
86+
</Portal>
10687
);
10788
}
108-
}
89+
90+
const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
91+
92+
return (
93+
<>
94+
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
95+
{targetComponent}
96+
</div>
97+
{popper}
98+
</>
99+
);
100+
};
109101

110102
export default withFloating<PopperComponentProps>(PopperComponent);

‎src/with_floating.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ export default function withFloating<T extends FloatingProps>(
4545
Component: React.ComponentType<T>,
4646
) {
4747
type R = Omit<T, "popperProps"> & WithFloatingProps;
48-
const WithFloating: React.FC<R> = (props): React.ReactElement => {
48+
function WithFloating(props: R): React.ReactElement {
4949
const hidePopper: boolean =
5050
typeof props.hidePopper === "boolean" ? props.hidePopper : true;
51-
const arrowRef: React.RefObject<HTMLElement | null> = useRef(null);
51+
const arrowRef = useRef<SVGSVGElement>(null);
5252
const floatingProps = useFloating({
5353
open: !hidePopper,
5454
whileElementsMounted: autoUpdate,
@@ -69,7 +69,9 @@ export default function withFloating<T extends FloatingProps>(
6969
} as unknown as T;
7070

7171
return <Component {...componentProps} />;
72-
};
72+
}
73+
74+
WithFloating.displayName = `withFloating(${Component.displayName || Component.name || "Component"})`;
7375

7476
return WithFloating;
7577
}

‎yarn.lock‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1972,55 +1972,55 @@ __metadata:
19721972
languageName: node
19731973
linkType: hard
19741974

1975-
"@floating-ui/core@npm:^1.6.0":
1976-
version: 1.6.9
1977-
resolution: "@floating-ui/core@npm:1.6.9"
1975+
"@floating-ui/core@npm:^1.7.3":
1976+
version: 1.7.3
1977+
resolution: "@floating-ui/core@npm:1.7.3"
19781978
dependencies:
1979-
"@floating-ui/utils": "npm:^0.2.9"
1980-
checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
1979+
"@floating-ui/utils": "npm:^0.2.10"
1980+
checksum: 10c0/edfc23800122d81df0df0fb780b7328ae6c5f00efbb55bd48ea340f4af8c5b3b121ceb4bb81220966ab0f87b443204d37105abdd93d94846468be3243984144c
19811981
languageName: node
19821982
linkType: hard
19831983

1984-
"@floating-ui/dom@npm:^1.0.0":
1985-
version: 1.6.13
1986-
resolution: "@floating-ui/dom@npm:1.6.13"
1984+
"@floating-ui/dom@npm:^1.7.3":
1985+
version: 1.7.3
1986+
resolution: "@floating-ui/dom@npm:1.7.3"
19871987
dependencies:
1988-
"@floating-ui/core": "npm:^1.6.0"
1989-
"@floating-ui/utils": "npm:^0.2.9"
1990-
checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
1988+
"@floating-ui/core": "npm:^1.7.3"
1989+
"@floating-ui/utils": "npm:^0.2.10"
1990+
checksum: 10c0/cba30e9af1a52fb7cb443ae516d7aec032b33da2fa50914dcb18fc834dc31c71922f5c7653431e70d493f347018b2ce6435c98b3f154d92082345689b4458e59
19911991
languageName: node
19921992
linkType: hard
19931993

1994-
"@floating-ui/react-dom@npm:^2.1.3":
1995-
version: 2.1.3
1996-
resolution: "@floating-ui/react-dom@npm:2.1.3"
1994+
"@floating-ui/react-dom@npm:^2.1.5":
1995+
version: 2.1.5
1996+
resolution: "@floating-ui/react-dom@npm:2.1.5"
19971997
dependencies:
1998-
"@floating-ui/dom": "npm:^1.0.0"
1998+
"@floating-ui/dom": "npm:^1.7.3"
19991999
peerDependencies:
20002000
react: ">=16.8.0"
20012001
react-dom: ">=16.8.0"
2002-
checksum: 10c0/e88750ea2fb352264d52d502d3979f94155ce2c8ab9a50862810d0cfc8c8e49cb6bbde466d668736cb38624d089360ef97451397b647408a0eb2c1870234c19a
2002+
checksum: 10c0/2dc9571845138e5f39952900fa4d1ad077968c97c1fd1eae30e624db42a29f6fc897c11f926b5e63c468d541eff78b41c2aa1ec45eed2f3a1cc8aa95898f3260
20032003
languageName: node
20042004
linkType: hard
20052005

2006-
"@floating-ui/react@npm:^0.27.3":
2007-
version: 0.27.12
2008-
resolution: "@floating-ui/react@npm:0.27.12"
2006+
"@floating-ui/react@npm:^0.27.15":
2007+
version: 0.27.15
2008+
resolution: "@floating-ui/react@npm:0.27.15"
20092009
dependencies:
2010-
"@floating-ui/react-dom": "npm:^2.1.3"
2011-
"@floating-ui/utils": "npm:^0.2.9"
2010+
"@floating-ui/react-dom": "npm:^2.1.5"
2011+
"@floating-ui/utils": "npm:^0.2.10"
20122012
tabbable: "npm:^6.0.0"
20132013
peerDependencies:
20142014
react: ">=17.0.0"
20152015
react-dom: ">=17.0.0"
2016-
checksum: 10c0/da453965074bd4ded8e3de97ceb2c0833df8df2ecd9eff5ae4d336413443ea5abde5c9e37b092956901b97e7b47f9138d51d4896fa82da68e77eb0090289bf64
2016+
checksum: 10c0/682893e4305d7ee12e9d8e5844496242a068fb619a84c92d80c272175c66a5b77cc88a7fff639b505efa8a0491bf63c81e48b4427bb07e1a6ddb8a0a6618d5b1
20172017
languageName: node
20182018
linkType: hard
20192019

2020-
"@floating-ui/utils@npm:^0.2.9":
2021-
version: 0.2.9
2022-
resolution: "@floating-ui/utils@npm:0.2.9"
2023-
checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
2020+
"@floating-ui/utils@npm:^0.2.10":
2021+
version: 0.2.10
2022+
resolution: "@floating-ui/utils@npm:0.2.10"
2023+
checksum: 10c0/e9bc2a1730ede1ee25843937e911ab6e846a733a4488623cd353f94721b05ec2c9ec6437613a2ac9379a94c2fd40c797a2ba6fa1df2716f5ce4aa6ddb1cf9ea4
20242024
languageName: node
20252025
linkType: hard
20262026

@@ -9464,7 +9464,7 @@ __metadata:
94649464
"@babel/preset-react": "npm:^7.26.3"
94659465
"@babel/preset-typescript": "npm:^7.26.0"
94669466
"@eslint/js": "npm:^9.19.0"
9467-
"@floating-ui/react": "npm:^0.27.3"
9467+
"@floating-ui/react": "npm:^0.27.15"
94689468
"@react-docgen/cli": "npm:^3.0.0"
94699469
"@rollup/plugin-babel": "npm:^6.0.4"
94709470
"@rollup/plugin-commonjs": "npm:^28.0.2"

0 commit comments

Comments
 (0)