From 89219b655421851ad10d23e9571f8e011574272d Mon Sep 17 00:00:00 2001 From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com> Date: Fri, 22 Sep 2023 21:18:13 +0200 Subject: [PATCH] Fix background reset on new next version (#111) * Fix background reset * Remove console logs --- pnpm-lock.yaml | 145 ++++++++++++++++++++++--------------------- src/helpers.ts | 1 + src/index.tsx | 16 ++--- website/package.json | 2 +- 4 files changed, 84 insertions(+), 80 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e58fac71..a6ab970c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -61,7 +61,7 @@ importers: clsx: ^2.0.0 eslint: 8.45.0 eslint-config-next: 13.4.10 - next: 13.4.10 + next: 13.5.1 postcss: 8.4.26 react: 18.2.0 react-dom: 18.2.0 @@ -78,7 +78,7 @@ importers: clsx: 2.0.0 eslint: 8.45.0 eslint-config-next: 13.4.10_eslint@8.45.0+typescript@5.1.6 - next: 13.4.10_react-dom@18.2.0+react@18.2.0 + next: 13.5.1_react-dom@18.2.0+react@18.2.0 postcss: 8.4.26 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -470,14 +470,14 @@ packages: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - /@next/env/13.4.10: - resolution: {integrity: sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ==} - dev: false - /@next/env/13.4.19: resolution: {integrity: sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==} dev: false + /@next/env/13.5.1: + resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} + dev: false + /@next/eslint-plugin-next/13.4.10: resolution: {integrity: sha512-YJqyq6vk39JQfvaNtN83t/p5Jy45+bazRL+V4QI8FPd3FBqFYMEsULiwRLgSJMgFqkk4t4JbeZurz+gILEAFpA==} dependencies: @@ -490,15 +490,6 @@ packages: glob: 7.1.7 dev: false - /@next/swc-darwin-arm64/13.4.10: - resolution: {integrity: sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==} - engines: {node: '>= 10'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: false - optional: true - /@next/swc-darwin-arm64/13.4.19: resolution: {integrity: sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==} engines: {node: '>= 10'} @@ -508,10 +499,10 @@ packages: dev: false optional: true - /@next/swc-darwin-x64/13.4.10: - resolution: {integrity: sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==} + /@next/swc-darwin-arm64/13.5.1: + resolution: {integrity: sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==} engines: {node: '>= 10'} - cpu: [x64] + cpu: [arm64] os: [darwin] requiresBuild: true dev: false @@ -526,11 +517,11 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-gnu/13.4.10: - resolution: {integrity: sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==} + /@next/swc-darwin-x64/13.5.1: + resolution: {integrity: sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==} engines: {node: '>= 10'} - cpu: [arm64] - os: [linux] + cpu: [x64] + os: [darwin] requiresBuild: true dev: false optional: true @@ -544,8 +535,8 @@ packages: dev: false optional: true - /@next/swc-linux-arm64-musl/13.4.10: - resolution: {integrity: sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==} + /@next/swc-linux-arm64-gnu/13.5.1: + resolution: {integrity: sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -562,10 +553,10 @@ packages: dev: false optional: true - /@next/swc-linux-x64-gnu/13.4.10: - resolution: {integrity: sha512-WDv1YtAV07nhfy3i1visr5p/tjiH6CeXp4wX78lzP1jI07t4PnHHG1WEDFOduXh3WT4hG6yN82EQBQHDi7hBrQ==} + /@next/swc-linux-arm64-musl/13.5.1: + resolution: {integrity: sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==} engines: {node: '>= 10'} - cpu: [x64] + cpu: [arm64] os: [linux] requiresBuild: true dev: false @@ -580,8 +571,8 @@ packages: dev: false optional: true - /@next/swc-linux-x64-musl/13.4.10: - resolution: {integrity: sha512-zFkzqc737xr6qoBgDa3AwC7jPQzGLjDlkNmt/ljvQJ/Veri5ECdHjZCUuiTUfVjshNIIpki6FuP0RaQYK9iCRg==} + /@next/swc-linux-x64-gnu/13.5.1: + resolution: {integrity: sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -598,11 +589,11 @@ packages: dev: false optional: true - /@next/swc-win32-arm64-msvc/13.4.10: - resolution: {integrity: sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==} + /@next/swc-linux-x64-musl/13.5.1: + resolution: {integrity: sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==} engines: {node: '>= 10'} - cpu: [arm64] - os: [win32] + cpu: [x64] + os: [linux] requiresBuild: true dev: false optional: true @@ -616,10 +607,10 @@ packages: dev: false optional: true - /@next/swc-win32-ia32-msvc/13.4.10: - resolution: {integrity: sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==} + /@next/swc-win32-arm64-msvc/13.5.1: + resolution: {integrity: sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==} engines: {node: '>= 10'} - cpu: [ia32] + cpu: [arm64] os: [win32] requiresBuild: true dev: false @@ -634,10 +625,10 @@ packages: dev: false optional: true - /@next/swc-win32-x64-msvc/13.4.10: - resolution: {integrity: sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==} + /@next/swc-win32-ia32-msvc/13.5.1: + resolution: {integrity: sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==} engines: {node: '>= 10'} - cpu: [x64] + cpu: [ia32] os: [win32] requiresBuild: true dev: false @@ -652,6 +643,15 @@ packages: dev: false optional: true + /@next/swc-win32-x64-msvc/13.5.1: + resolution: {integrity: sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==} + engines: {node: '>= 10'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -943,6 +943,12 @@ packages: tslib: 2.5.0 dev: false + /@swc/helpers/0.5.2: + resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==} + dependencies: + tslib: 2.5.0 + dev: false + /@types/json5/0.0.29: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: false @@ -1338,7 +1344,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001516 + caniuse-lite: 1.0.30001525 electron-to-chromium: 1.4.461 node-releases: 2.0.13 update-browserslist-db: 1.0.11_browserslist@4.21.9 @@ -2984,28 +2990,25 @@ packages: /natural-compare/1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - /next/13.4.10_react-dom@18.2.0+react@18.2.0: - resolution: {integrity: sha512-4ep6aKxVTQ7rkUW2fBLhpBr/5oceCuf4KmlUpvG/aXuDTIf9mexNSpabUD6RWPspu6wiJJvozZREhXhueYO36A==} + /next/13.4.19_react-dom@18.2.0+react@18.2.0: + resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==} engines: {node: '>=16.8.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 - fibers: '>= 3.1.0' react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 peerDependenciesMeta: '@opentelemetry/api': optional: true - fibers: - optional: true sass: optional: true dependencies: - '@next/env': 13.4.10 + '@next/env': 13.4.19 '@swc/helpers': 0.5.1 busboy: 1.6.0 - caniuse-lite: 1.0.30001482 + caniuse-lite: 1.0.30001516 postcss: 8.4.14 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -3013,23 +3016,23 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.10 - '@next/swc-darwin-x64': 13.4.10 - '@next/swc-linux-arm64-gnu': 13.4.10 - '@next/swc-linux-arm64-musl': 13.4.10 - '@next/swc-linux-x64-gnu': 13.4.10 - '@next/swc-linux-x64-musl': 13.4.10 - '@next/swc-win32-arm64-msvc': 13.4.10 - '@next/swc-win32-ia32-msvc': 13.4.10 - '@next/swc-win32-x64-msvc': 13.4.10 + '@next/swc-darwin-arm64': 13.4.19 + '@next/swc-darwin-x64': 13.4.19 + '@next/swc-linux-arm64-gnu': 13.4.19 + '@next/swc-linux-arm64-musl': 13.4.19 + '@next/swc-linux-x64-gnu': 13.4.19 + '@next/swc-linux-x64-musl': 13.4.19 + '@next/swc-win32-arm64-msvc': 13.4.19 + '@next/swc-win32-ia32-msvc': 13.4.19 + '@next/swc-win32-x64-msvc': 13.4.19 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros dev: false - /next/13.4.19_react-dom@18.2.0+react@18.2.0: - resolution: {integrity: sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==} - engines: {node: '>=16.8.0'} + /next/13.5.1_react-dom@18.2.0+react@18.2.0: + resolution: {integrity: sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==} + engines: {node: '>=16.14.0'} hasBin: true peerDependencies: '@opentelemetry/api': ^1.1.0 @@ -3042,10 +3045,10 @@ packages: sass: optional: true dependencies: - '@next/env': 13.4.19 - '@swc/helpers': 0.5.1 + '@next/env': 13.5.1 + '@swc/helpers': 0.5.2 busboy: 1.6.0 - caniuse-lite: 1.0.30001516 + caniuse-lite: 1.0.30001525 postcss: 8.4.14 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -3053,15 +3056,15 @@ packages: watchpack: 2.4.0 zod: 3.21.4 optionalDependencies: - '@next/swc-darwin-arm64': 13.4.19 - '@next/swc-darwin-x64': 13.4.19 - '@next/swc-linux-arm64-gnu': 13.4.19 - '@next/swc-linux-arm64-musl': 13.4.19 - '@next/swc-linux-x64-gnu': 13.4.19 - '@next/swc-linux-x64-musl': 13.4.19 - '@next/swc-win32-arm64-msvc': 13.4.19 - '@next/swc-win32-ia32-msvc': 13.4.19 - '@next/swc-win32-x64-msvc': 13.4.19 + '@next/swc-darwin-arm64': 13.5.1 + '@next/swc-darwin-x64': 13.5.1 + '@next/swc-linux-arm64-gnu': 13.5.1 + '@next/swc-linux-arm64-musl': 13.5.1 + '@next/swc-linux-x64-gnu': 13.5.1 + '@next/swc-linux-x64-musl': 13.5.1 + '@next/swc-win32-arm64-msvc': 13.5.1 + '@next/swc-win32-ia32-msvc': 13.5.1 + '@next/swc-win32-x64-msvc': 13.5.1 transitivePeerDependencies: - '@babel/core' - babel-plugin-macros diff --git a/src/helpers.ts b/src/helpers.ts index 517b6a4f..e954d25d 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -33,6 +33,7 @@ export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCac }); if (ignoreCache) return; + cache.set(el, originalStyles); } diff --git a/src/index.tsx b/src/index.tsx index 81d6d01b..e85c028a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -508,6 +508,14 @@ function Root({ resetDrawer(); } + React.useEffect(() => { + // Trigger enter animation without using CSS animation + if (isOpen) { + setVisible(true); + scaleBackground(true); + } + }, [isOpen]); + function scaleBackground(open: boolean) { const wrapper = document.querySelector('[vaul-drawer-wrapper]'); @@ -675,19 +683,11 @@ const Content = React.forwardRef(function ( keyboardIsOpen, snapPointsOffset, visible, - setVisible, closeDrawer, - scaleBackground, modal, } = useDrawerContext(); const composedRef = useComposedRefs(ref, drawerRef); - React.useEffect(() => { - // Trigger enter animation without using CSS animation - setVisible(true); - scaleBackground(true); - }, []); - return ( { diff --git a/website/package.json b/website/package.json index 022c78c9..372db0e9 100644 --- a/website/package.json +++ b/website/package.json @@ -17,7 +17,7 @@ "clsx": "^2.0.0", "eslint": "8.45.0", "eslint-config-next": "13.4.10", - "next": "13.4.10", + "next": "13.5.1", "postcss": "8.4.26", "react": "18.2.0", "react-dom": "18.2.0",