From f06fd56678c18eb6d6b71a8ee8a27f5e976e12da Mon Sep 17 00:00:00 2001 From: takanorip Date: Sat, 14 Sep 2024 18:58:31 +0900 Subject: [PATCH 1/3] upgrade to v2 --- package-lock.json | 189 ++++++++++++++++-- package.json | 2 +- .../ActionHalfModal/ActionHalfModal.tsx | 16 +- src/components/ActionModal/ActionModal.tsx | 12 +- .../MessageHalfModal/MessageHalfModal.tsx | 20 +- src/components/MessageModal/MessageModal.tsx | 12 +- 6 files changed, 205 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 35c929ab..c53116c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "devDependencies": { "@axe-core/playwright": "^4.10.0", "@chromatic-com/storybook": "^2.0.2", - "@headlessui/react": "^1.7.10", + "@headlessui/react": "^2.1.8", "@markuplint/jsx-parser": "^4.7.6", "@markuplint/react-spec": "^4.5.6", "@playwright/experimental-ct-react": "^1.47.1", @@ -1196,22 +1196,82 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.23", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.23.tgz", + "integrity": "sha512-9u3i62fV0CFF3nIegiWiRDwOs7OW/KhSUJDNx2MkQM3LbE5zQOY01sL3nelcVBXvX7Ovvo3A49I8ql+20Wg/Hw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.1", + "@floating-ui/utils": "^0.2.7", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz", + "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==", + "dev": true, + "license": "MIT" + }, "node_modules/@headlessui/react": { - "version": "1.7.19", - "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz", - "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==", + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.8.tgz", + "integrity": "sha512-uajqVkAcVG/wHwG9Fh5PFMcFpf2VxM4vNRNKxRjuK009kePVur8LkuuygHfIE+2uZ7z7GnlTtYsyUe6glPpTLg==", "dev": true, "license": "MIT", "dependencies": { - "@tanstack/react-virtual": "^3.0.0-beta.60", - "client-only": "^0.0.1" + "@floating-ui/react": "^0.26.16", + "@react-aria/focus": "^3.17.1", + "@react-aria/interactions": "^3.21.3", + "@tanstack/react-virtual": "^3.8.1" }, "engines": { "node": ">=10" }, "peerDependencies": { - "react": "^16 || ^17 || ^18", - "react-dom": "^16 || ^17 || ^18" + "react": "^18", + "react-dom": "^18" } }, "node_modules/@humanwhocodes/config-array": { @@ -2058,6 +2118,95 @@ "node": ">=12" } }, + "node_modules/@react-aria/focus": { + "version": "3.18.2", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.2.tgz", + "integrity": "sha512-Jc/IY+StjA3uqN73o6txKQ527RFU7gnG5crEl5Xy3V+gbYp2O5L3ezAo/E0Ipi2cyMbG6T5Iit1IDs7hcGu8aw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@react-aria/interactions": "^3.22.2", + "@react-aria/utils": "^3.25.2", + "@react-types/shared": "^3.24.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/interactions": { + "version": "3.22.2", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.2.tgz", + "integrity": "sha512-xE/77fRVSlqHp2sfkrMeNLrqf2amF/RyuAS6T5oDJemRSgYM3UoxTbWjucPhfnoW7r32pFPHHgz4lbdX8xqD/g==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.5", + "@react-aria/utils": "^3.25.2", + "@react-types/shared": "^3.24.1", + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.5", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz", + "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-aria/utils": { + "version": "3.25.2", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.2.tgz", + "integrity": "sha512-GdIvG8GBJJZygB4L2QJP1Gabyn2mjFsha73I2wSe+o4DYeGWoJiMZRM06PyTIxLH4S7Sn7eVDtsSBfkc2VY/NA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@react-aria/ssr": "^3.9.5", + "@react-stately/utils": "^3.10.3", + "@react-types/shared": "^3.24.1", + "@swc/helpers": "^0.5.0", + "clsx": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-stately/utils": { + "version": "3.10.3", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.3.tgz", + "integrity": "sha512-moClv7MlVSHpbYtQIkm0Cx+on8Pgt1XqtPx6fy9rQFb2DNc9u1G3AUVnqA17buOkH1vLxAtX4MedlxMWyRCYYA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@react-types/shared": { + "version": "3.24.1", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz", + "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==", + "dev": true, + "license": "Apache-2.0", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@rollup/pluginutils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", @@ -3292,6 +3441,16 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/@swc/helpers": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", + "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@swc/types": { "version": "0.1.12", "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.12.tgz", @@ -5778,13 +5937,6 @@ "node": ">= 12" } }, - "node_modules/client-only": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", - "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", - "dev": true, - "license": "MIT" - }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -16140,6 +16292,13 @@ "dev": true, "license": "MIT" }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "dev": true, + "license": "MIT" + }, "node_modules/table": { "version": "6.8.2", "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", diff --git a/package.json b/package.json index 28f04725..c9f5c4df 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "devDependencies": { "@axe-core/playwright": "^4.10.0", "@chromatic-com/storybook": "^2.0.2", - "@headlessui/react": "^1.7.10", + "@headlessui/react": "^2.1.8", "@markuplint/jsx-parser": "^4.7.6", "@markuplint/react-spec": "^4.5.6", "@playwright/experimental-ct-react": "^1.47.1", diff --git a/src/components/ActionHalfModal/ActionHalfModal.tsx b/src/components/ActionHalfModal/ActionHalfModal.tsx index 0557200d..e12d9896 100644 --- a/src/components/ActionHalfModal/ActionHalfModal.tsx +++ b/src/components/ActionHalfModal/ActionHalfModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'; import { clsx } from 'clsx'; import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react'; import styles from './ActionHalfModal.module.css'; @@ -155,7 +155,7 @@ export const ActionHalfModal: FC = ({ initialFocus={initialFocusRef} {...props} > - = ({ leaveFrom={styles.overlayLeaveFrom} leaveTo={styles.overlayLeaveTo} > - - - + + = ({ leaveFrom={styles.panelLeaveFrom} leaveTo={styles.panelLeaveTo} > -
= ({
- - + + ); diff --git a/src/components/ActionModal/ActionModal.tsx b/src/components/ActionModal/ActionModal.tsx index c89d68b3..9d64198f 100644 --- a/src/components/ActionModal/ActionModal.tsx +++ b/src/components/ActionModal/ActionModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'; import clsx from 'clsx'; import { type FC, Fragment, type ReactNode, useCallback, useRef } from 'react'; import styles from './ActionModal.module.css'; @@ -162,8 +162,8 @@ export const ActionModal: FC = ({ initialFocus={initialFocusRef} {...props} > - -
+ = ({ > {hero !== undefined ?
{hero}
: null} {header !== undefined ? ( - = ({ )} > {header} - + ) : null}
= ({
- + ); diff --git a/src/components/MessageHalfModal/MessageHalfModal.tsx b/src/components/MessageHalfModal/MessageHalfModal.tsx index 9e007c01..92d445f5 100644 --- a/src/components/MessageHalfModal/MessageHalfModal.tsx +++ b/src/components/MessageHalfModal/MessageHalfModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'; import { clsx } from 'clsx'; import { FC, Fragment, PropsWithChildren, ReactNode, useCallback, useRef } from 'react'; import styles from './MessageHalfModal.module.css'; @@ -120,7 +120,7 @@ export const MessageHalfModal: FC> = ({ initialFocus={initialFocusRef} {...otherProps} > - > = ({ leaveFrom={styles.overlayLeaveFrom} leaveTo={styles.overlayLeaveTo} > - - - + + > = ({ leaveFrom={styles.panelLeaveFrom} leaveTo={styles.panelLeaveTo} > -
> = ({ > {hero !== undefined ?
{hero}
: null} {header !== undefined ? ( - > = ({ )} > {header} - + ) : null}
{children}
> = ({
- - + + ); diff --git a/src/components/MessageModal/MessageModal.tsx b/src/components/MessageModal/MessageModal.tsx index 1f992687..8a56b38e 100644 --- a/src/components/MessageModal/MessageModal.tsx +++ b/src/components/MessageModal/MessageModal.tsx @@ -1,6 +1,6 @@ 'use client'; -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogPanel, DialogTitle, Transition } from '@headlessui/react'; import clsx from 'clsx'; import { FC, Fragment, PropsWithChildren, type ReactNode, useCallback, useRef } from 'react'; import styles from './MessageModal.module.css'; @@ -121,8 +121,8 @@ export const MessageModal: FC = ({ initialFocus={initialFocusRef} {...otherProps} > - -
+ = ({ > {hero !== undefined ?
{hero}
: null} {header !== undefined ? ( - = ({ )} > {header} - + ) : null}
= ({
- + ); From cb4d8178e702512de6ad9116d8df7be761164944 Mon Sep 17 00:00:00 2001 From: takanorip Date: Thu, 19 Sep 2024 18:46:53 +0900 Subject: [PATCH 2/3] Update package.json Co-authored-by: Hiroki Yokouchi --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c9f5c4df..6b512528 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "@ubie/design-tokens": ">=0.2.0", "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0", "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react-dom": "^18" }, "author": "Ubie, Inc.", "license": "Apache-2.0", From e496f4fce72616f0a45f5a024f52d42d40bba7bc Mon Sep 17 00:00:00 2001 From: takanorip Date: Thu, 19 Sep 2024 18:49:24 +0900 Subject: [PATCH 3/3] Update package.json peerDependencies --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6b512528..75c6d900 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "vitest": "^2.1.1" }, "peerDependencies": { - "@headlessui/react": ">1.7.0 <2.0.0", + "@headlessui/react": "^2.0.0", "@ubie/design-tokens": ">=0.2.0", "@ubie/ubie-icons": ">=0.5.0 <0.6.2 || >=0.8.0", "react": "^17 || ^18",