Genarrative/apps/ai-game-creator-shell/src/app/dialogs.ts

import {
  type KeyboardEvent as ReactKeyboardEvent,
  type MouseEvent as ReactMouseEvent,
  useLayoutEffect,
} from 'react';

function isEscapeKey(event: { key: string }) {
  return event.key === 'Escape';
}

function isEditableEscapeTarget(target: EventTarget | null) {
  return (
    target instanceof HTMLInputElement ||
    target instanceof HTMLTextAreaElement ||
    target instanceof HTMLSelectElement ||
    (target instanceof HTMLElement && target.isContentEditable)
  );
}

export function closeDialogOnEscape(
  event: ReactKeyboardEvent,
  onClose: () => void,
) {
  if (isEscapeKey(event) && !isEditableEscapeTarget(event.target)) {
    event.preventDefault();
    onClose();
  }
}

export function useEscapeToClose(onClose: () => void, enabled = true) {
  useLayoutEffect(() => {
    if (!enabled) {
      return;
    }

    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
      if (isEscapeKey(event) && !isEditableEscapeTarget(event.target)) {
        event.preventDefault();
        onClose();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [enabled, onClose]);
}

export function closeDialogOnBackdropMouseDown(
  event: ReactMouseEvent,
  onClose: () => void,
) {
  if (event.target === event.currentTarget) {
    onClose();
  }
}