immich/web/src/lib/utils/click-outside.ts

import type { ActionReturn } from 'svelte/action';

interface Attributes {
  'on:outclick'?: (e: CustomEvent) => void;
}

export function clickOutside(node: HTMLElement): ActionReturn<void, Attributes> {
  const handleClick = (event: MouseEvent) => {
    const targetNode = event.target as Node | null;
    if (!node.contains(targetNode)) {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };

  const handleKey = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
      node.dispatchEvent(new CustomEvent('outclick'));
    }
  };

  document.addEventListener('click', handleClick, true);
  document.addEventListener('keydown', handleKey, true);

  return {
    destroy() {
      document.removeEventListener('click', handleClick, true);
      document.removeEventListener('keydown', handleKey, true);
    },
  };
}