diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml deleted file mode 100644 index 37d206d5..00000000 --- a/.github/workflows/playwright.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Playwright Tests -on: - push: - branches: [ main, master ] - pull_request: - branches: [ main, master ] -jobs: - test: - timeout-minutes: 60 - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 18 - - name: Install dependencies - run: pnpm install - - name: Install Playwright Browsers - run: pnpm exec playwright install --with-deps - - name: Run Playwright tests - run: pnpm exec playwright test - - uses: actions/upload-artifact@v3 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 diff --git a/package.json b/package.json index d7127b99..6319ef54 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@radix-ui/react-dialog": "^1.0.4", "eslint": "^7.32.0", "prettier": "^2.5.1", + "typescript": "5.2.2", "tsup": "^6.4.0", "turbo": "1.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6ab970c..cb4854c7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,14 +10,16 @@ importers: prettier: ^2.5.1 tsup: ^6.4.0 turbo: '1.6' + typescript: 5.2.2 dependencies: '@radix-ui/react-dialog': 1.0.4 devDependencies: '@playwright/test': 1.37.1 eslint: 7.32.0 prettier: 2.8.8 - tsup: 6.7.0 + tsup: 6.7.0_typescript@5.2.2 turbo: 1.6.3 + typescript: 5.2.2 test: specifiers: @@ -67,7 +69,7 @@ importers: react-dom: 18.2.0 react-merge-refs: ^2.0.2 tailwindcss: 3.3.3 - typescript: 5.1.6 + typescript: 5.2.2 vaul: workspace:* dependencies: '@types/node': 20.4.2 @@ -77,14 +79,14 @@ importers: autoprefixer: 10.4.14_postcss@8.4.26 clsx: 2.0.0 eslint: 8.45.0 - eslint-config-next: 13.4.10_eslint@8.45.0+typescript@5.1.6 + eslint-config-next: 13.4.10_eslint@8.45.0+typescript@5.2.2 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 react-merge-refs: 2.0.2 tailwindcss: 3.3.3 - typescript: 5.1.6 + typescript: 5.2.2 vaul: link:.. packages: @@ -990,7 +992,7 @@ packages: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} dev: false - /@typescript-eslint/parser/5.59.2_eslint@8.45.0+typescript@5.1.6: + /@typescript-eslint/parser/5.59.2_eslint@8.45.0+typescript@5.2.2: resolution: {integrity: sha512-uq0sKyw6ao1iFOZZGk9F8Nro/8+gfB5ezl1cA06SrqbgJAt0SRoFhb9pXaHvkrxUpZaoLxt8KlovHNk8Gp6/HQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -1002,10 +1004,10 @@ packages: dependencies: '@typescript-eslint/scope-manager': 5.59.2 '@typescript-eslint/types': 5.59.2 - '@typescript-eslint/typescript-estree': 5.59.2_typescript@5.1.6 + '@typescript-eslint/typescript-estree': 5.59.2_typescript@5.2.2 debug: 4.3.4 eslint: 8.45.0 - typescript: 5.1.6 + typescript: 5.2.2 transitivePeerDependencies: - supports-color dev: false @@ -1043,27 +1045,6 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false - /@typescript-eslint/typescript-estree/5.59.2_typescript@5.1.6: - resolution: {integrity: sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - peerDependencies: - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@typescript-eslint/types': 5.59.2 - '@typescript-eslint/visitor-keys': 5.59.2 - debug: 4.3.4 - globby: 11.1.0 - is-glob: 4.0.3 - semver: 7.5.0 - tsutils: 3.21.0_typescript@5.1.6 - typescript: 5.1.6 - transitivePeerDependencies: - - supports-color - dev: false - /@typescript-eslint/typescript-estree/5.59.2_typescript@5.2.2: resolution: {integrity: sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1752,7 +1733,7 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} - /eslint-config-next/13.4.10_eslint@8.45.0+typescript@5.1.6: + /eslint-config-next/13.4.10_eslint@8.45.0+typescript@5.2.2: resolution: {integrity: sha512-+JjcM6lQmFR5Mw0ORm9o1CR29+z/uajgSfYAPEGIBxOhTHBgCMs7ysuwi72o7LkMmA8E3N7/h09pSGZxs0s85g==} peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -1763,7 +1744,7 @@ packages: dependencies: '@next/eslint-plugin-next': 13.4.10 '@rushstack/eslint-patch': 1.2.0 - '@typescript-eslint/parser': 5.59.2_eslint@8.45.0+typescript@5.1.6 + '@typescript-eslint/parser': 5.59.2_eslint@8.45.0+typescript@5.2.2 eslint: 8.45.0 eslint-import-resolver-node: 0.3.7 eslint-import-resolver-typescript: 3.5.5_59236bfd07d3fab2f40480f5c7b98a36 @@ -1771,7 +1752,7 @@ packages: eslint-plugin-jsx-a11y: 6.7.1_eslint@8.45.0 eslint-plugin-react: 7.32.2_eslint@8.45.0 eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705_eslint@8.45.0 - typescript: 5.1.6 + typescript: 5.2.2 transitivePeerDependencies: - supports-color dev: false @@ -3904,7 +3885,7 @@ packages: resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==} dev: false - /tsup/6.7.0: + /tsup/6.7.0_typescript@5.2.2: resolution: {integrity: sha512-L3o8hGkaHnu5TdJns+mCqFsDBo83bJ44rlK7e6VdanIvpea4ArPcU3swWGsLVbXak1PqQx/V+SSmFPujBK+zEQ==} engines: {node: '>=14.18'} hasBin: true @@ -3934,21 +3915,12 @@ packages: source-map: 0.8.0-beta.0 sucrase: 3.33.0 tree-kill: 1.2.2 + typescript: 5.2.2 transitivePeerDependencies: - supports-color - ts-node dev: true - /tsutils/3.21.0_typescript@5.1.6: - resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} - engines: {node: '>= 6'} - peerDependencies: - typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' - dependencies: - tslib: 1.14.1 - typescript: 5.1.6 - dev: false - /tsutils/3.21.0_typescript@5.2.2: resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} engines: {node: '>= 6'} @@ -4038,17 +4010,10 @@ packages: is-typed-array: 1.1.10 dev: false - /typescript/5.1.6: - resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==} - engines: {node: '>=14.17'} - hasBin: true - dev: false - /typescript/5.2.2: resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} engines: {node: '>=14.17'} hasBin: true - dev: false /unbox-primitive/1.0.2: resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} diff --git a/src/index.tsx b/src/index.tsx index 08db0081..1f6e4216 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ 'use client'; import * as DialogPrimitive from '@radix-ui/react-dialog'; -import React, { useCallback } from 'react'; +import React from 'react'; import { DrawerContext, useDrawerContext } from './context'; import './style.css'; import { usePreventScroll, isInput, isIOS } from './use-prevent-scroll'; @@ -87,8 +87,9 @@ function Root({ const previousDiffFromInitial = React.useRef(0); const drawerRef = React.useRef(null); const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0); + const initialDrawerHeight = React.useRef(0); - const onSnapPointChange = useCallback((activeSnapPointIndex: number) => { + const onSnapPointChange = React.useCallback((activeSnapPointIndex: number) => { // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable. if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) openTime.current = new Date(); }, []); @@ -307,6 +308,9 @@ function Root({ // This is the height of the keyboard let diffFromInitial = window.innerHeight - visualViewportHeight; const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0; + if (!initialDrawerHeight.current) { + initialDrawerHeight.current = drawerHeight; + } const offsetFromTop = drawerRef.current.getBoundingClientRect().top; // visualViewport height may change due to some subtle changes to the keyboard. Checking if the height changed by 60 or more will make sure that they keyboard really changed its open state. @@ -335,7 +339,7 @@ function Root({ drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`; } } else { - drawerRef.current.style.height = 'initial'; + drawerRef.current.style.height = `${initialDrawerHeight.current}px`; } if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) { @@ -727,9 +731,9 @@ const Content = React.forwardRef(function ( onPointerUp={onRelease} ref={composedRef} style={ - snapPointsOffset + snapPointsOffset && snapPointsOffset.length > 0 ? ({ - '--snap-point-height': `${snapPointsOffset[0]}px`, + '--snap-point-height': `${snapPointsOffset[0]!}px`, ...style, } as React.CSSProperties) : style diff --git a/test/tests/nested.spec.ts b/test/tests/nested.spec.ts index 9edf534f..f9b1ac3c 100644 --- a/test/tests/nested.spec.ts +++ b/test/tests/nested.spec.ts @@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => { await page.goto('/nested-drawers'); }); -test.describe.only('Nested tests', () => { +test.describe('Nested tests', () => { test('should open and close nested drawer', async ({ page }) => { await openDrawer(page); await page.getByTestId('nested-trigger').click(); diff --git a/test/tests/with-snap-points.test.ts b/test/tests/with-snap-points.test.ts deleted file mode 100644 index 554cf271..00000000 --- a/test/tests/with-snap-points.test.ts +++ /dev/null @@ -1,20 +0,0 @@ -// import { test, expect } from '@playwright/test'; -// import { ANIMATION_DURATION } from './constants'; -// import { openDrawer } from './helpers'; - -// test.beforeEach(async ({ page }) => { -// await page.goto('/with-snap-points'); -// }); - -// test.describe.only('Base tests', () => { -// test('should change active snap point', async ({ page }) => { -// await openDrawer(page); -// await page.hover('[vaul-drawer]'); -// await page.mouse.down(); -// await page.mouse.move(0, -800); -// await page.mouse.up(); -// const activeSnap = await page.getByTestId('active-snap-index').innerText(); -// await page.waitForTimeout(ANIMATION_DURATION); -// expect(activeSnap).toBe('2'); -// }); -// }); diff --git a/test/tsconfig.json b/test/tsconfig.json index e59724b2..3b5697af 100644 --- a/test/tsconfig.json +++ b/test/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "target": "es5", + "baseUrl": ".", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, diff --git a/website/package.json b/website/package.json index 372db0e9..0b7ea6a0 100644 --- a/website/package.json +++ b/website/package.json @@ -23,7 +23,7 @@ "react-dom": "18.2.0", "react-merge-refs": "^2.0.2", "tailwindcss": "3.3.3", - "typescript": "5.1.6", + "typescript": "5.2.2", "vaul": "workspace:*" } }