From 4fc104f430be2f36dde543c4bcf9c3a5afae2610 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Sun, 7 Jan 2024 00:36:58 -0500 Subject: [PATCH] fix: closing and focus issues (#18) --- .changeset/dirty-dragons-nail.md | 5 +++ package.json | 2 +- pnpm-lock.yaml | 8 ++--- src/lib/internal/types.ts | 14 +++++++++ src/lib/internal/vaul.ts | 13 ++++++-- src/lib/vaul/components/close.svelte | 30 ++++++++++++++++++ src/lib/vaul/components/content.svelte | 4 +-- src/lib/vaul/components/index.ts | 6 ++-- src/lib/vaul/components/overlay.svelte | 4 +++ .../vaul/components/trigger-wrapper.svelte | 29 +++++++++++++++++ src/lib/vaul/components/trigger.svelte | 31 +++++++++++++++++++ src/routes/hero.svelte | 3 +- 12 files changed, 134 insertions(+), 15 deletions(-) create mode 100644 .changeset/dirty-dragons-nail.md create mode 100644 src/lib/vaul/components/close.svelte create mode 100644 src/lib/vaul/components/trigger-wrapper.svelte create mode 100644 src/lib/vaul/components/trigger.svelte diff --git a/.changeset/dirty-dragons-nail.md b/.changeset/dirty-dragons-nail.md new file mode 100644 index 0000000..768e5c3 --- /dev/null +++ b/.changeset/dirty-dragons-nail.md @@ -0,0 +1,5 @@ +--- +"vaul-svelte": patch +--- + +fix: closing and focus restoration issues diff --git a/package.json b/package.json index 4cddaac..34991e8 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,6 @@ "types": "./dist/index.d.ts", "type": "module", "dependencies": { - "bits-ui": "^0.13.0" + "bits-ui": "^0.13.3" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a01876..e7be44f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,8 +6,8 @@ settings: dependencies: bits-ui: - specifier: ^0.13.0 - version: 0.13.0(svelte@4.2.8) + specifier: ^0.13.3 + version: 0.13.3(svelte@4.2.8) devDependencies: '@changesets/cli': @@ -1522,8 +1522,8 @@ packages: file-uri-to-path: 1.0.0 dev: true - /bits-ui@0.13.0(svelte@4.2.8): - resolution: {integrity: sha512-XMvGKhJQMvSWqaan0eaIx1uAVcFBpImgO6xf+XTb7UhqdzbH0//6be4DeR1nRUpIU70XoU1B7i3lMPrTWg37ng==} + /bits-ui@0.13.3(svelte@4.2.8): + resolution: {integrity: sha512-sbhFPVRHozz0tzAJyJrGJ7whcQfSTSiwtYvKmPMbY/qw+cgqS2J34G2HiLgnRkcrV4DVUGkXdpfahRL6cGfonw==} peerDependencies: svelte: ^4.0.0 dependencies: diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts index c50dd75..41f1bc3 100644 --- a/src/lib/internal/types.ts +++ b/src/lib/internal/types.ts @@ -1,3 +1,5 @@ +import type { Action } from 'svelte/action'; + export type SvelteEvent = T & { currentTarget: EventTarget & U; }; @@ -11,3 +13,15 @@ export type Expand = T extends object ? { [K in keyof O]: O[K] } : never : T; + +export type Builder< + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Element = any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Param = any, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + Attributes extends Record = Record + // eslint-disable-next-line @typescript-eslint/no-explicit-any +> = Record & { + action: Action; +}; diff --git a/src/lib/internal/vaul.ts b/src/lib/internal/vaul.ts index bb521bc..8c468eb 100644 --- a/src/lib/internal/vaul.ts +++ b/src/lib/internal/vaul.ts @@ -110,6 +110,9 @@ export function createVaul(props: CreateVaulProps) { ) ); + // keep a reference to the trigger element so we can refocus when it closes via the keyboard + const triggerRef = writable(undefined); + const { onDrag: onDragProp, onRelease: onReleaseProp, onClose, onOpenChange } = withDefaults; const { @@ -237,7 +240,7 @@ export function createVaul(props: CreateVaulProps) { if ($drawerRef) { unsub = handleEscapeKeydown($drawerRef, () => { - closeDrawer(); + closeDrawer(true); }); } @@ -549,7 +552,7 @@ export function createVaul(props: CreateVaulProps) { } ); - function closeDrawer() { + function closeDrawer(withKeyboard: boolean = false) { if (isClosing) return; const $drawerRef = get(drawerRef); if (!$drawerRef) return; @@ -572,6 +575,9 @@ export function createVaul(props: CreateVaulProps) { visible.set(false); isOpen.set(false); isClosing = false; + if (withKeyboard) { + get(triggerRef)?.focus(); + } }, 300); const $snapPoints = get(snapPoints); @@ -818,7 +824,8 @@ export function createVaul(props: CreateVaulProps) { }, refs: { drawerRef, - overlayRef + overlayRef, + triggerRef }, options }; diff --git a/src/lib/vaul/components/close.svelte b/src/lib/vaul/components/close.svelte new file mode 100644 index 0000000..dd707ee --- /dev/null +++ b/src/lib/vaul/components/close.svelte @@ -0,0 +1,30 @@ + + + { + e.preventDefault(); + closeDrawer(); + }} + on:keydown={(e) => { + if (e.detail.originalEvent.key === 'Enter' || e.detail.originalEvent.key === ' ') { + e.preventDefault(); + closeDrawer(true); + } + }} + {...$$restProps} +> + + diff --git a/src/lib/vaul/components/content.svelte b/src/lib/vaul/components/content.svelte index 3154dba..6ba4b83 100644 --- a/src/lib/vaul/components/content.svelte +++ b/src/lib/vaul/components/content.svelte @@ -1,10 +1,10 @@ + + diff --git a/src/lib/vaul/components/trigger.svelte b/src/lib/vaul/components/trigger.svelte new file mode 100644 index 0000000..8e9d512 --- /dev/null +++ b/src/lib/vaul/components/trigger.svelte @@ -0,0 +1,31 @@ + + +{#if asChild} + + + + + +{:else} + + + +{/if} diff --git a/src/routes/hero.svelte b/src/routes/hero.svelte index 41143cc..1708026 100644 --- a/src/routes/hero.svelte +++ b/src/routes/hero.svelte @@ -46,10 +46,9 @@