DismissableLayer.tsx

import type React from 'react';
import { useEffect, useRef } from 'react';

type DismissableLayerProps = {
  children?: React.ReactNode;
  disableEscapeKey?: boolean;
  disableOutsideClick?: boolean;
  onDismiss?: () => void;
  /**
   * Reference to the trigger element that should not dismiss the layer when clicked.
   */
  triggerRef?: React.RefObject<HTMLElement>;
  /**
   * When `true`, prevents trigger click events from bubbling up.
   * Useful for bottom sheets to prevent unwanted side effects.
   */
  preventTriggerBubbling?: boolean;
};

// DismissableLayer handles dismissal using outside clicks and escape key events
export function DismissableLayer({
  children,
  disableEscapeKey = false,
  disableOutsideClick = false,
  onDismiss,
  triggerRef,
  preventTriggerBubbling = false,
}: DismissableLayerProps) {
  const layerRef = useRef<HTMLDivElement>(null);

  const handleTriggerClick = (event: PointerEvent) => {
    // If preventTriggerBubbling is enabled, stop the click from propagating
    // This prevents unwanted side effects when the layer is used in nested contexts
    if (preventTriggerBubbling) {
      event.preventDefault();
      event.stopPropagation();
    }
  };

  const isClickInsideLayer = (target: Node) => {
    // Check if click occurred inside the dismissable layer itself
    // If so, do nothing and let the click event proceed normally
    return layerRef.current?.contains(target);
  };

  useEffect(() => {
    if (disableOutsideClick && disableEscapeKey) {
      return;
    }

    const handlePointerDownCapture = (event: PointerEvent) => {
      if (disableOutsideClick) {
        return;
      }

      const target = event.target as Node;

      // Check if click occurred on the trigger element (e.g., a button that opened this layer)
      if (triggerRef?.current?.contains(target)) {
        handleTriggerClick(event);
        return;
      }

      if (!isClickInsideLayer(target)) {
        onDismiss?.();
      }
    };

    const handleKeyDown = (event: KeyboardEvent) => {
      if (!disableEscapeKey && event.key === 'Escape') {
        onDismiss?.();
      }
    };

    document.addEventListener('pointerdown', handlePointerDownCapture, true);
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener(
        'pointerdown',
        handlePointerDownCapture,
        true,
      );
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [
    disableOutsideClick,
    disableEscapeKey,
    onDismiss,
    triggerRef,
    preventTriggerBubbling,
  ]);

  return (
    <div ref={layerRef} data-testid="ockDismissableLayer">
      {children}
    </div>
  );
}