Skip to content

Commit 759e920

Browse files
AlejoYarceAlejoYarce
committed
updating to react 19 + react-draggable nodeRef
1 parent 2c0f091 commit 759e920

File tree

10 files changed

+962
-1103
lines changed

10 files changed

+962
-1103
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ WRI UI Library
66

77
Node: `22.14.0`
88

9-
React: `18.3.1`
9+
React: `19.0.1`
1010

1111
## Installation
1212

‎package.json‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@chakra-ui/storybook-addon": "^5.2.5",
4646
"@chromatic-com/storybook": "^1.9.0",
4747
"@emotion/react": "^11.14.0",
48+
"@floating-ui/react": "^0.27.16",
4849
"@rollup/plugin-commonjs": "^28.0.2",
4950
"@rollup/plugin-node-resolve": "^16.0.0",
5051
"@rollup/plugin-terser": "^0.4.4",
@@ -63,19 +64,20 @@
6364
"@testing-library/user-event": "^13.5.0",
6465
"@types/jest": "^27.5.2",
6566
"@types/node": "^16.18.112",
66-
"@types/react": "^18.3.11",
67-
"@types/react-dom": "^18.3.0",
67+
"@types/react": "^19.0.1",
68+
"@types/react-dom": "^19.0.1",
6869
"eslint-config-airbnb": "^19.0.4",
6970
"eslint-config-airbnb-typescript": "^18.0.0",
7071
"eslint-config-prettier": "^9.1.0",
7172
"eslint-plugin-storybook": "^0.9.0",
7273
"prettier": "^3.3.3",
7374
"prop-types": "^15.8.1",
74-
"react": "^18.3.1",
75-
"react-dom": "^18.3.1",
76-
"react-draggable": "^4.4.6",
75+
"react": "^19.0.1",
76+
"react-dom": "^19.0.1",
77+
"react-draggable": "^4.5.0",
7778
"react-router-dom": "^7.1.5",
7879
"react-scripts": "5.0.1",
80+
"react-spring-bottom-sheet": "^3.4.1",
7981
"rollup": "^4.34.8",
8082
"rollup-plugin-dts": "^6.1.1",
8183
"rollup-plugin-peer-deps-external": "^2.2.4",
@@ -89,19 +91,13 @@
8991
"peerDependencies": {
9092
"@chakra-ui/react": "^3.14.2",
9193
"@emotion/react": "^11.14.0",
92-
"react": "^18.3.1",
93-
"react-dom": "^18.3.1"
94+
"react": "^19.0.1",
95+
"react-dom": "^19.0.1"
9496
},
9597
"repository": {
9698
"type": "git",
9799
"url": "git+https://github.com/wri/wri-design-systems.git"
98100
},
99101
"author": "WRI",
100-
"license": "MIT",
101-
"dependencies": {
102-
"@chakra-ui/charts": "^3.30.0",
103-
"@floating-ui/react": "^0.27.16",
104-
"react-spring-bottom-sheet": "^3.4.1",
105-
"recharts": "^3.6.0"
106-
}
102+
"license": "MIT"
107103
}

‎src/components/Containers/Modal/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { Dialog, Portal } from '@chakra-ui/react'
44
import Draggable from 'react-draggable'
5+
import { useRef } from 'react'
56
import { ModalProps } from './types'
67
import {
78
modalCloseButtonStyles,
@@ -21,6 +22,8 @@ const Modal = ({
2122
open,
2223
onClose,
2324
}: ModalProps) => {
25+
const nodeRef = useRef(null)
26+
2427
if (!open) return null
2528

2629
return (
@@ -36,8 +39,8 @@ const Modal = ({
3639
>
3740
<Portal>
3841
{!draggable ? <Dialog.Backdrop /> : null}
39-
<Draggable disabled={!draggable}>
40-
<Dialog.Positioner>
42+
<Draggable disabled={!draggable} nodeRef={nodeRef}>
43+
<Dialog.Positioner ref={nodeRef}>
4144
<Dialog.Content css={modalContainerStyles(size)}>
4245
<Dialog.Header css={modalHeaderStyles}>
4346
{header}

‎src/components/Containers/Panel/LegendPanel.stories.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -76,16 +76,19 @@ export const LegendPanel: Story = {
7676
}}
7777
>
7878
{Children.map(legentItems, (child, idx) =>
79-
cloneElement(child as ReactElement, {
80-
onUpClick: () => {
81-
const items = reorder(legentItems, idx, idx - 1)
82-
setLegentItems(items)
83-
},
84-
onDownClick: () => {
85-
const items = reorder(legentItems, idx, idx + 1)
86-
setLegentItems(items)
87-
},
88-
}),
79+
cloneElement(
80+
child as ReactElement,
81+
{
82+
onUpClick: () => {
83+
const items = reorder(legentItems, idx, idx - 1)
84+
setLegentItems(items)
85+
},
86+
onDownClick: () => {
87+
const items = reorder(legentItems, idx, idx + 1)
88+
setLegentItems(items)
89+
},
90+
} as any,
91+
),
8992
)}
9093
</div>
9194
) : null}

‎src/components/Containers/Panel/Templates/AnalysisPanelFloatingInformation.stories.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,16 +80,19 @@ export const Floating: Story = {
8080
}}
8181
>
8282
{Children.map(legentItems, (child, idx) =>
83-
cloneElement(child as ReactElement, {
84-
onUpClick: () => {
85-
const items = reorder(legentItems, idx, idx - 1)
86-
setLegentItems(items)
87-
},
88-
onDownClick: () => {
89-
const items = reorder(legentItems, idx, idx + 1)
90-
setLegentItems(items)
91-
},
92-
}),
83+
cloneElement(
84+
child as ReactElement,
85+
{
86+
onUpClick: () => {
87+
const items = reorder(legentItems, idx, idx - 1)
88+
setLegentItems(items)
89+
},
90+
onDownClick: () => {
91+
const items = reorder(legentItems, idx, idx + 1)
92+
setLegentItems(items)
93+
},
94+
} as any,
95+
),
9396
)}
9497
</div>
9598
) : null}

‎src/components/Containers/Panel/Templates/AnalysisPanelFloatingNoInformation.stories.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,19 @@ export const FloatingNoInformation: Story = {
7878
}}
7979
>
8080
{Children.map(legentItems, (child, idx) =>
81-
cloneElement(child as ReactElement, {
82-
onUpClick: () => {
83-
const items = reorder(legentItems, idx, idx - 1)
84-
setLegentItems(items)
85-
},
86-
onDownClick: () => {
87-
const items = reorder(legentItems, idx, idx + 1)
88-
setLegentItems(items)
89-
},
90-
}),
81+
cloneElement(
82+
child as ReactElement,
83+
{
84+
onUpClick: () => {
85+
const items = reorder(legentItems, idx, idx - 1)
86+
setLegentItems(items)
87+
},
88+
onDownClick: () => {
89+
const items = reorder(legentItems, idx, idx + 1)
90+
setLegentItems(items)
91+
},
92+
} as any,
93+
),
9194
)}
9295
</div>
9396
) : null}

‎src/components/Geospatial/Legends/LegendPanel/LegendPanelDemo.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,19 @@ const LegendPanelDemo = () => {
6262
}}
6363
>
6464
{Children.map(legentItems, (child, idx) =>
65-
cloneElement(child as ReactElement, {
66-
onUpClick: () => {
67-
const items = reorder(legentItems, idx, idx - 1)
68-
setLegentItems(items)
69-
},
70-
onDownClick: () => {
71-
const items = reorder(legentItems, idx, idx + 1)
72-
setLegentItems(items)
73-
},
74-
}),
65+
cloneElement(
66+
child as ReactElement,
67+
{
68+
onUpClick: () => {
69+
const items = reorder(legentItems, idx, idx - 1)
70+
setLegentItems(items)
71+
},
72+
onDownClick: () => {
73+
const items = reorder(legentItems, idx, idx + 1)
74+
setLegentItems(items)
75+
},
76+
} as any,
77+
),
7578
)}
7679
</div>
7780
) : null}

‎src/components/Geospatial/MapPopUp/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export type MapPopUpProps = {
44
open: boolean
55
onOpenChange: (open: boolean) => void
66
/** The element that the modal/connector should point to */
7-
anchorRef: React.RefObject<HTMLElement>
7+
anchorRef: React.RefObject<HTMLButtonElement | null>
88
header: React.ReactNode
99
content: React.ReactNode
1010
footer?: React.ReactNode

‎src/components/Navigation/Navbar/NavbarMobile.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,9 @@ const NavbarMobile = ({
9090
key={item.label}
9191
css={navbarMobileNavigationMenuStyles}
9292
type='button'
93-
// eslint-disable-next-line no-return-assign
94-
ref={(el) => (menuButtonRefs.current[idx] = el)}
93+
ref={(el) => {
94+
menuButtonRefs.current[idx] = el
95+
}}
9596
onClick={() => {
9697
if (item.items) {
9798
setSubmenu(item)

0 commit comments

Comments
 (0)