Keep machine dialogs open when file picker is cancelled
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import { useEffect, useId, useLayoutEffect, useRef, type PointerEvent, type ReactNode } from "react";
|
||||
|
||||
type Props = { open: boolean; title: string; className?: string; onClose: () => void; children: ReactNode };
|
||||
type Props = { open: boolean; title: string; className?: string; onClose: () => void; cancelGuard?: () => boolean; children: ReactNode };
|
||||
|
||||
// Native dialog provides focus containment, inert background, Escape and focus return.
|
||||
// Keeping children mounted preserves drafts and pending import results when closed.
|
||||
export function DraggableDialog({ open, title, className = "", onClose, children }: Props) {
|
||||
export function DraggableDialog({ open, title, className = "", onClose, cancelGuard, children }: Props) {
|
||||
const ref = useRef<HTMLDialogElement>(null);
|
||||
const titleId = useId();
|
||||
const drag = useRef<{ id: number; x: number; y: number; left: number; top: number } | null>(null);
|
||||
@@ -40,7 +40,7 @@ export function DraggableDialog({ open, title, className = "", onClose, children
|
||||
position(from.left + event.clientX - from.x, from.top + event.clientY - from.y);
|
||||
};
|
||||
const stop = () => { drag.current = null; };
|
||||
return <dialog ref={ref} className={`machine-dialog ${className}`} aria-modal="true" aria-labelledby={titleId} onCancel={(event) => { event.preventDefault(); onClose(); }} onKeyDown={(event) => {
|
||||
return <dialog ref={ref} className={`machine-dialog ${className}`} aria-modal="true" aria-labelledby={titleId} onCancel={(event) => { event.preventDefault(); if (!cancelGuard?.()) onClose(); }} onKeyDown={(event) => {
|
||||
if (event.key !== "Tab") return;
|
||||
const elements = [...event.currentTarget.querySelectorAll<HTMLElement>('button:not(:disabled), a[href], input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), summary, [tabindex="0"]')].filter((element) => element.getClientRects().length > 0);
|
||||
const first = elements[0], last = elements.at(-1);
|
||||
|
||||
Reference in New Issue
Block a user