audi-app/design-system/src/components/Sheet/ActionSheet.tsx

import * as React from "react";
import { createPortal } from "react-dom";

import { sheetPortalTarget, useEscape } from "./Sheet";

/**
 * Action sheet - the iOS pattern for a short set of choices the user asked for.
 *
 * Two groups, exactly as Apple describes them: the choices in one rounded
 * card, "Cancel" alone in a second one below it with a gap between. The gap is
 * not decoration - it is what makes Cancel unmistakably the way out rather
 * than one more option in the list.
 *
 * Deliberately identical in geometry to `.sheet` in the panel's
 * audi-dashboard.css, which already implemented this pattern: 10px side
 * margins, 16px corners, 52px minimum row height, one hairline between rows,
 * opaque surface. Two codebases, one look.
 *
 * Use `Sheet` instead when the content is a form rather than a list of
 * choices.
 */

export interface ActionSheetAktion {
  label: React.ReactNode;
  onClick: () => void;
  /** Red, for anything that removes or overwrites something. */
  destructive?: boolean;
  disabled?: boolean;
}

export interface ActionSheetProps {
  open: boolean;
  onClose: () => void;
  /** Optional heading above the choices. */
  title?: React.ReactNode;
  /** One explanatory line under the title. */
  description?: React.ReactNode;
  actions: ActionSheetAktion[];
  /** Label of the separated bottom button. Pass null to leave it out. */
  cancelLabel?: string | null;
  /** Rendered between the heading and the choices - an error line, a hint. */
  children?: React.ReactNode;
  className?: string;
  portalTarget?: Element;
}

export function ActionSheet({
  open,
  onClose,
  title,
  description,
  actions,
  cancelLabel = "Abbrechen",
  children,
  className,
  portalTarget,
}: ActionSheetProps) {
  useEscape(open, onClose);
  const target = sheetPortalTarget(portalTarget);
  if (!open || !target) return null;

  const classes = ["ads-aktionsblatt"];
  if (className) classes.push(className);

  return createPortal(
    <>
      <div className="ads-sheet-scrim" onClick={onClose} />
      <div className={classes.join(" ")} role="dialog" aria-modal="true">
        <div className="ads-aktionsblatt__gruppe">
          {(title || description) && (
            <div className="ads-aktionsblatt__kopf">
              {title && <strong>{title}</strong>}
              {description && <span>{description}</span>}
            </div>
          )}
          {children && <div className="ads-aktionsblatt__zusatz">{children}</div>}
          {actions.map((aktion, i) => (
            <button
              key={i}
              type="button"
              className={aktion.destructive ? "ads-aktionsblatt__loeschen" : undefined}
              disabled={aktion.disabled}
              onClick={aktion.onClick}
            >
              {aktion.label}
            </button>
          ))}
        </div>
        {cancelLabel !== null && (
          <button type="button" className="ads-aktionsblatt__abbrechen" onClick={onClose}>
            {cancelLabel}
          </button>
        )}
      </div>
    </>,
    target,
  );
}