Desktop/ts/axo/_internal/AxoBaseDialog.dom.tsx

// Copyright 2025 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import { useCallback } from 'react';
import type { ReactNode } from 'react';
import { tw } from '../tw.dom.js';

export namespace AxoBaseDialog {
  /**
   * AxoBaseDialog: Root
   * -------------------
   */

  export type RootProps = Readonly<{
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    children: ReactNode;
  }>;

  /**
   * AxoBaseDialog: Trigger
   * ----------------------
   */

  export type TriggerProps = Readonly<{
    children: ReactNode;
  }>;

  /**
   * AxoBaseDialog: Overlay
   * ----------------------
   */

  export const overlayStyles = tw(
    'absolute inset-0 flex items-center-safe justify-center-safe bg-background-overlay p-4',
    // Allow the entire overlay to be scrolled in case the window is extremely small
    'overflow-auto scrollbar-width-none',
    'data-[state=closed]:animate-exit data-[state=open]:animate-enter',
    'animate-opacity-0',
    'forced-colors:bg-[Canvas]'
  );

  /**
   * AxoBaseDialog: Content
   * ----------------------
   */

  export const contentStyles = tw(
    'relative',
    'max-h-full min-h-fit max-w-full min-w-fit',
    'rounded-3xl bg-elevated-background-primary shadow-elevation-3 select-none',
    'outline-border-focused not-forced-colors:outline-0 not-forced-colors:focused:outline-[2.5px]',
    'data-[state=closed]:animate-exit data-[state=open]:animate-enter',
    'animate-scale-98 animate-translate-y-1',
    'forced-colors:border forced-colors:border-[ButtonBorder] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]'
  );

  export type ContentEscape = 'cancel-is-noop' | 'cancel-is-destructive';

  export function useContentEscapeBehavior(
    escape: ContentEscape
  ): (event: Event) => void {
    return useCallback(
      event => {
        if (escape === 'cancel-is-destructive') {
          event.preventDefault();
        }
      },
      [escape]
    );
  }
}