From fdd9c2d877f371f2baf3b178aa5e98f622ff4a07 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sun, 24 Sep 2023 12:26:30 +0900 Subject: [PATCH] chore: replace ReactRemoveScroll with FloatingOverlay (#81) --- packages/app/package.json | 1 - packages/app/src/components/drawer.tsx | 9 +-- packages/app/src/components/modal.tsx | 10 +-- pnpm-lock.yaml | 101 ------------------------- 4 files changed, 8 insertions(+), 113 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 142a379..317b765 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -22,7 +22,6 @@ "@hiogawa/unocss-preset-antd": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-remove-scroll": "^2.5.5", "react-router-dom": "^6.8.0", "react-select": "^5.7.0" }, diff --git a/packages/app/src/components/drawer.tsx b/packages/app/src/components/drawer.tsx index 487f47c..86134fa 100644 --- a/packages/app/src/components/drawer.tsx +++ b/packages/app/src/components/drawer.tsx @@ -1,4 +1,5 @@ import { + FloatingOverlay, FloatingPortal, useDismiss, useFloating, @@ -8,7 +9,6 @@ import { import { Transition } from "@hiogawa/tiny-transition/dist/react"; import { tinyassert } from "@hiogawa/utils"; import type React from "react"; -import { RemoveScroll } from "react-remove-scroll"; export function Drawer(props: { open: boolean; @@ -42,10 +42,7 @@ export function Drawer(props: { leaveTo="opacity-0" /> {/* content */} - + - + ); diff --git a/packages/app/src/components/modal.tsx b/packages/app/src/components/modal.tsx index 6198f5a..3f34c5f 100644 --- a/packages/app/src/components/modal.tsx +++ b/packages/app/src/components/modal.tsx @@ -1,4 +1,5 @@ import { + FloatingOverlay, FloatingPortal, useDismiss, useFloating, @@ -8,7 +9,6 @@ import { import { Transition } from "@hiogawa/tiny-transition/dist/react"; import { tinyassert } from "@hiogawa/utils"; import React from "react"; -import { RemoveScroll } from "react-remove-scroll"; import { cls } from "../utils/misc"; // copied from https://github.com/hi-ogawa/web-ext-tab-manager/blame/81710dead04859525b9c8be3a73a71926cae6da4/src/components/modal.tsx @@ -47,9 +47,9 @@ function Modal(props: { leaveTo="opacity-0" /> {/* content */} - - + ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 601b0bd..3615e31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -110,9 +110,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) - react-remove-scroll: - specifier: ^2.5.5 - version: 2.5.5(@types/react@18.2.21)(react@18.2.0) react-router-dom: specifier: ^6.8.0 version: 6.8.0(react-dom@18.2.0)(react@18.2.0) @@ -3267,10 +3264,6 @@ packages: engines: {node: '>=8'} dev: true - /detect-node-es@1.1.0: - resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} - dev: false - /diff-sequences@29.6.3: resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -3675,11 +3668,6 @@ packages: has-symbols: 1.0.3 dev: true - /get-nonce@1.0.1: - resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} - engines: {node: '>=6'} - dev: false - /get-stream@6.0.1: resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} engines: {node: '>=10'} @@ -3900,12 +3888,6 @@ packages: side-channel: 1.0.4 dev: true - /invariant@2.2.4: - resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} - dependencies: - loose-envify: 1.4.0 - dev: false - /is-arguments@1.1.1: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} @@ -5291,41 +5273,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-remove-scroll-bar@2.3.4(@types/react@18.2.21)(react@18.2.0): - resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==} - engines: {node: '>=10'} - peerDependencies: - '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.21 - react: 18.2.0 - react-style-singleton: 2.2.1(@types/react@18.2.21)(react@18.2.0) - tslib: 2.5.0 - dev: false - - /react-remove-scroll@2.5.5(@types/react@18.2.21)(react@18.2.0): - resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} - engines: {node: '>=10'} - peerDependencies: - '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.21 - react: 18.2.0 - react-remove-scroll-bar: 2.3.4(@types/react@18.2.21)(react@18.2.0) - react-style-singleton: 2.2.1(@types/react@18.2.21)(react@18.2.0) - tslib: 2.5.0 - use-callback-ref: 1.3.0(@types/react@18.2.21)(react@18.2.0) - use-sidecar: 1.1.2(@types/react@18.2.21)(react@18.2.0) - dev: false - /react-router-dom@6.8.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==} engines: {node: '>=14'} @@ -5370,23 +5317,6 @@ packages: - '@types/react' dev: false - /react-style-singleton@2.2.1(@types/react@18.2.21)(react@18.2.0): - resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} - engines: {node: '>=10'} - peerDependencies: - '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.21 - get-nonce: 1.0.1 - invariant: 2.2.4 - react: 18.2.0 - tslib: 2.5.0 - dev: false - /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: @@ -6216,21 +6146,6 @@ packages: picocolors: 1.0.0 dev: true - /use-callback-ref@1.3.0(@types/react@18.2.21)(react@18.2.0): - resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==} - engines: {node: '>=10'} - peerDependencies: - '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.21 - react: 18.2.0 - tslib: 2.5.0 - dev: false - /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.21)(react@18.2.0): resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} peerDependencies: @@ -6244,22 +6159,6 @@ packages: react: 18.2.0 dev: false - /use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0): - resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} - engines: {node: '>=10'} - peerDependencies: - '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@types/react': 18.2.21 - detect-node-es: 1.1.0 - react: 18.2.0 - tslib: 2.5.0 - dev: false - /validate-html-nesting@1.2.2: resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==} dev: true