1e6426ed4f
The focus trap in the modal component was preventing clicks on elements outside of the modal, including the notification toasts. This change configures the focus trap to allow clicks on toast notifications, so they can be dismissed even when a modal is open.
130 lines
3.2 KiB
Svelte
130 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
|
|
import { flyAndScale } from '$lib/utils/transitions';
|
|
import * as FocusTrap from 'focus-trap';
|
|
export let show = true;
|
|
export let size = 'md';
|
|
export let containerClassName = 'p-3';
|
|
export let className = 'bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-4xl';
|
|
|
|
let modalElement = null;
|
|
let mounted = false;
|
|
// Create focus trap to trap user tabs inside modal
|
|
// https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html
|
|
// https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
|
|
let focusTrap: FocusTrap.FocusTrap | null = null;
|
|
|
|
const sizeToWidth = (size) => {
|
|
if (size === 'full') {
|
|
return 'w-full';
|
|
}
|
|
if (size === 'xs') {
|
|
return 'w-[16rem]';
|
|
} else if (size === 'sm') {
|
|
return 'w-[30rem]';
|
|
} else if (size === 'md') {
|
|
return 'w-[42rem]';
|
|
} else if (size === 'lg') {
|
|
return 'w-[56rem]';
|
|
} else if (size === 'xl') {
|
|
return 'w-[70rem]';
|
|
} else if (size === '2xl') {
|
|
return 'w-[84rem]';
|
|
} else if (size === '3xl') {
|
|
return 'w-[100rem]';
|
|
} else {
|
|
return 'w-[56rem]';
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape' && isTopModal()) {
|
|
console.log('Escape');
|
|
show = false;
|
|
}
|
|
};
|
|
|
|
const isTopModal = () => {
|
|
const modals = document.getElementsByClassName('modal');
|
|
return modals.length && modals[modals.length - 1] === modalElement;
|
|
};
|
|
|
|
onMount(() => {
|
|
mounted = true;
|
|
});
|
|
|
|
$: if (show && modalElement) {
|
|
document.body.appendChild(modalElement);
|
|
focusTrap = FocusTrap.createFocusTrap(modalElement, {
|
|
allowOutsideClick: (e) => {
|
|
return e.target.closest('[data-sonner-toast]') !== null;
|
|
}
|
|
});
|
|
focusTrap.activate();
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
document.body.style.overflow = 'hidden';
|
|
} else if (modalElement) {
|
|
focusTrap.deactivate();
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
document.body.removeChild(modalElement);
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
|
|
onDestroy(() => {
|
|
show = false;
|
|
if (focusTrap) {
|
|
focusTrap.deactivate();
|
|
}
|
|
if (modalElement) {
|
|
document.body.removeChild(modalElement);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if show}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<div
|
|
bind:this={modalElement}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black/30 dark:bg-black/60 w-full h-screen max-h-[100dvh] {containerClassName} flex justify-center z-9999 overflow-y-auto overscroll-contain"
|
|
in:fade={{ duration: 10 }}
|
|
on:mousedown={() => {
|
|
show = false;
|
|
}}
|
|
>
|
|
<div
|
|
class="m-auto max-w-full {sizeToWidth(size)} {size !== 'full'
|
|
? 'mx-2'
|
|
: ''} shadow-3xl min-h-fit scrollbar-hidden {className} border border-white dark:border-gray-850"
|
|
in:flyAndScale
|
|
on:mousedown={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.modal-content {
|
|
animation: scaleUp 0.1s ease-out forwards;
|
|
}
|
|
|
|
@keyframes scaleUp {
|
|
from {
|
|
transform: scale(0.985);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|