@mortenbrudvik/waveui 0.10.0 → 0.11.0

package/dist/components/overlays/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","names":["React","inertModalTrigger","useRequiredContext","useModalOpenState","useIsClient","useModalTrigger","useModalTriggerPart","useModalClosePart","useId","useTitleRegistry","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","slotRendersContent","Portal","cn","dialogContentClassNames","ModalSurfaceContext","dialogTitleClassNames","Button","DismissIcon","useModalTitle","dialogFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_useId","require_useMergedRefs","require_useIsClient","require_Portal","require_Button","require_icons","require_useModalLayer","require_Dialog_shared","react","react_jsx_runtime","DialogContext","inertDialogContext","useDialogContext","componentName","DialogRoot","openState","requestOpen","open","defaultOpen","onOpenChange","isClient","isOpen","trigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","DialogTrigger","props","DialogClose","sizeClasses","DialogContent","rest","generatedId","propTitleId","titles","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","ref","closesOnBackdropPress","backdropPress","onDismiss","layer","footerHeight","setFooterHeight","surfaceContext","hasTitle","title","size","className","closeLabel","event","DialogTitle","titleId","titleRef","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","observer","entry","entries","Dialog"],"sources":["../../../src/components/overlays/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  dialogContentClassNames,\n  dialogFooterClassNames,\n  dialogTitleClassNames,\n} from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { DismissIcon } from '../../lib/icons';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { ModalOpenChangeReason, ModalType, OpenChangeDetails } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { Button } from '../button/Button';\nimport { Portal } from '../portal/Portal';\nimport {\n  inertModalTrigger,\n  ModalSurfaceContext,\n  useBackdropPress,\n  useModalClosePart,\n  useModalDismiss,\n  useModalOpenState,\n  useModalTitle,\n  useModalTrigger,\n  useModalTriggerPart,\n  useModalTriggerSession,\n  useRequiredContext,\n  useTitleRegistry,\n  useUnnamedModalWarning,\n  type ModalRequestOpen,\n  type ModalSurfaceContextValue,\n  type ModalTrigger,\n} from './Dialog.shared';\n\n/**\n * Why a {@link Dialog} asks to open or close: `trigger` (`Dialog.Trigger`), `close`\n * (`Dialog.Close`), `close-button` (the built-in Close button), `escape`, `outside-press` (the\n * backdrop). The shared `ModalOpenChangeReason`.\n */\nexport type DialogOpenChangeReason = ModalOpenChangeReason;\n\n/** The second argument of a {@link Dialog}'s `onOpenChange`: the reason and the DOM event. */\nexport type DialogOpenChangeDetails = OpenChangeDetails<DialogOpenChangeReason>;\n\n/**\n * How a {@link Dialog} blocks the page (the shared `ModalType`; Drawer reuses it when it gains\n * `modalType`).\n */\nexport type DialogModalType = ModalType;\n\n/** Properties for the Dialog component. */\nexport interface DialogProps {\n  /**\n   * Controlled open state of the dialog. The surface renders only in the browser: an open dialog\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Default open state for uncontrolled usage. The surface renders only in the browser: a dialog\n   * open by default is closed in the server HTML and opens once it has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes. `details.reason` tells how — `trigger`,\n   * `close` (a `.Close` part), `close-button` (the built-in Close button), `escape` or\n   * `outside-press` (the backdrop) — so a controlled dialog can refuse only some ways of closing\n   * (for example keep a form with unsaved changes open on `outside-press`); `details.event` is the\n   * DOM event behind the request. WaveUI always passes `details`; it is typed optional until 1.0\n   * so that code which calls this prop itself keeps compiling.\n   *\n   * Fires only when the value changes; a controlled dialog stays as it is until the parent updates\n   * `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DialogOpenChangeDetails) => void;\n  /**\n   * `modal`: a backdrop press, Escape, the Close button and `Dialog.Close` close it. `alert`: a\n   * confirmation that needs an answer — `role=\"alertdialog\"`, and a backdrop press does not close\n   * it (Escape still does). Initial focus goes to the first focusable element, the built-in Close\n   * button; give the least destructive action `autoFocus` to focus it instead. (`'non-modal'` is\n   * planned.)\n   * @default 'modal'\n   */\n  modalType?: DialogModalType;\n  /**\n   * Where focus goes when the dialog closes, if it can take focus. Otherwise focus returns to the\n   * element that had focus when the dialog opened, then to the trigger, then to an element next to\n   * where that opener was (the next row's action after a confirm dialog deleted the row). Use it to\n   * send focus somewhere else.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /** `Dialog.Trigger` and `Dialog.Content`. */\n  children: React.ReactNode;\n}\n\n/** Properties for the DialogContent sub-component. */\nexport interface DialogContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Title rendered as the dialog's heading; it names the dialog (`aria-labelledby`). Without it,\n   * render a `Dialog.Title` or pass `aria-label`/`aria-labelledby`. A title that renders nothing\n   * (`''`, `[]`, `true`) counts as none.\n   */\n  title?: React.ReactNode;\n  /** Maximum width of the dialog: 400px (`small`) or 600px (`medium`); it never exceeds the viewport.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Content rendered inside the dialog body (put `Dialog.Footer` here as well). */\n  children: React.ReactNode;\n  /** Ref to the dialog surface (`role=\"dialog\"`, or `alertdialog` with `modalType=\"alert\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogFooter sub-component. */\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */\n  children: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogTitle sub-component. */\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** The title; any content. */\n  children: React.ReactNode;\n  /** Ref to the heading element. */\n  ref?: React.Ref<HTMLHeadingElement>;\n}\n\n/** Props a `Dialog.Trigger` puts on its element (and passes to a render-prop child). */\nexport interface DialogTriggerRenderProps extends React.HTMLAttributes<HTMLElement> {\n  'aria-haspopup': 'dialog';\n  'aria-expanded': boolean;\n  /** The dialog surface's id, while the dialog is open. */\n  'aria-controls'?: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogTrigger sub-component. */\nexport interface DialogTriggerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that opens the dialog. A single element receives the trigger props (merged with\n   * its own: handlers composed, classes joined, its own `id` kept); a function receives them.\n   */\n  children: React.ReactNode | ((props: DialogTriggerRenderProps) => React.ReactNode);\n  /**\n   * `false` renders the 0.4 wrapper `<span>` around the children instead of merging the trigger\n   * props onto the child. The span carries the click handler; `aria-haspopup`, `aria-expanded`\n   * and `aria-controls` go to the first element in the tab order inside it.\n   * @default true\n   */\n  asChild?: boolean;\n  /** Ref to the trigger element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/** Props a `Dialog.Close` puts on its element (and passes to a render-prop child). */\nexport interface DialogCloseRenderProps extends React.HTMLAttributes<HTMLElement> {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogClose sub-component. */\nexport interface DialogCloseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that closes the dialog, typically a footer button. A single element receives an\n   * `onClick` composed with its own (its handler runs first; `preventDefault()` keeps the dialog\n   * open); a function receives the props.\n   */\n  children: React.ReactNode | ((props: DialogCloseRenderProps) => React.ReactNode);\n  /** `false` renders a wrapper `<span>` that closes the dialog on click. @default true */\n  asChild?: boolean;\n  /** Ref to the close element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\ninterface DialogContextValue {\n  open: boolean;\n  /** Asks the root to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The resolved `modalType`. */\n  modalType: DialogModalType;\n  /** The trigger element (`attach`) and the focus-restore target resolved from it (`focusRef`). */\n  trigger: ModalTrigger;\n  finalFocusRef: React.RefObject<HTMLElement | null> | undefined;\n  /** The id of the open dialog surface (for the trigger's `aria-controls`), or `undefined`. */\n  contentId: string | undefined;\n  /** Registers the surface's id while it is mounted; returns the unregister function. */\n  registerContentId: (id: string) => () => void;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\nDialogContext.displayName = 'DialogContext';\n\nconst inertDialogContext: DialogContextValue = {\n  open: false,\n  requestOpen: () => {},\n  modalType: 'modal',\n  trigger: inertModalTrigger,\n  finalFocusRef: undefined,\n  contentId: undefined,\n  registerContentId: () => () => {},\n};\n\nfunction useDialogContext(componentName: string): DialogContextValue {\n  return useRequiredContext(DialogContext, componentName, 'Dialog', () => inertDialogContext);\n}\n\n// The root of `Dialog` (documented on the export below). A const arrow (like DrawerRoot): its type\n// can be named in consumers' declaration files, e.g. a story's `satisfies Meta<typeof Dialog>` (a\n// function declaration's `typeof` cannot, TS4023).\nconst DialogRoot = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modalType = 'modal',\n  finalFocusRef,\n  children,\n}: DialogProps) => {\n  const [openState, requestOpen] = useModalOpenState(open, defaultOpen, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the dialog reports itself closed, so the trigger's aria-expanded never\n  // describes a dialog that is not there.\n  const isClient = useIsClient();\n  const isOpen = openState && isClient;\n  const trigger = useModalTrigger();\n  // After Dialog.Content's focus restore (a child's layout effects run first), start the trigger\n  // session, or end it and forget the trigger that opened it.\n  useModalTriggerSession(trigger, isOpen);\n  const [contentId, setContentId] = React.useState<string | undefined>(undefined);\n  const registerContentId = React.useCallback((id: string) => {\n    setContentId(id);\n    return () => setContentId((current) => (current === id ? undefined : current));\n  }, []);\n\n  const context = React.useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      contentId,\n      registerContentId,\n    }),\n    [isOpen, requestOpen, modalType, trigger, finalFocusRef, contentId, registerContentId],\n  );\n\n  return <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;\n};\nDialogRoot.displayName = 'Dialog';\n\n/**\n * Opens the dialog. Puts `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls` (while open), a\n * click handler and a ref on its single child (no wrapper element), or passes them to a\n * render-prop child. A custom child component must forward `ref` and spread its props; one that\n * does not is wrapped in a `<span>` automatically (with a development warning), the span that\n * `asChild={false}` renders. Focus returns to the trigger when the dialog closes (with several\n * triggers, to the one that opened it). On the span, the state ARIA goes to the first element in\n * the tab order inside it, and focus returns to that element (to the span when you made it the\n * trigger with a `role` such as `button` and `tabIndex={0}`, or when nothing inside it can take\n * focus).\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  const { open, requestOpen, trigger, contentId } = useDialogContext('Dialog.Trigger');\n  return useModalTriggerPart<DialogTriggerRenderProps>(\n    { open, requestOpen, trigger, controlsId: contentId },\n    props,\n    'Dialog.Trigger',\n  );\n};\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * Closes the dialog: composes a click handler onto its single child (its own `onClick` runs first;\n * calling `preventDefault()` there keeps the dialog open), or passes it to a render-prop child.\n *\n * @example\n * <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n */\nexport const DialogClose = (props: DialogCloseProps) => {\n  const { requestOpen } = useDialogContext('Dialog.Close');\n  return useModalClosePart<DialogCloseRenderProps>(requestOpen, props, 'Dialog.Close');\n};\nDialogClose.displayName = 'DialogClose';\n\nconst sizeClasses: Record<'small' | 'medium', string> = {\n  small: 'max-w-[400px]',\n  medium: 'max-w-[600px]',\n};\n\n/**\n * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is\n * open: backdrop, title, Close button and a scrolling body. It takes the full width up to its\n * `size` and never exceeds the viewport (the body scrolls, also sideways for content wider than\n * the dialog). Its 1rem gap to the viewport edges is its own margin, so a margin in `className`\n * replaces the gap: with the width and height caps lifted as well and its height set to the\n * viewport's, it fills the viewport (a full-screen dialog). It is `role=\"dialog\"`, or\n * `role=\"alertdialog\"` when the Dialog has `modalType=\"alert\"` (a `role` you pass wins), and\n * carries `data-modal-type` with the resolved type.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  closeLabel = 'Close',\n  children,\n  className,\n  id,\n  ref,\n  ...rest\n}: DialogContentProps) => {\n  const { open, requestOpen, modalType, trigger, finalFocusRef, registerContentId } =\n    useDialogContext('Dialog.Content');\n  const generatedId = useId('wave-dialog');\n  const contentId = id ?? generatedId;\n  const propTitleId = useId('wave-dialog-title');\n  const titles = useTitleRegistry();\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const attachSurface = React.useCallback((node: HTMLDivElement | null) => {\n    surfaceRef.current = node;\n    setSurface(node);\n  }, []);\n  // Reports the surface's id to the root (the trigger's `aria-controls`) while it is mounted. A new\n  // `id` makes a new callback, which useMergedRefs re-attaches after the commit (re-registering).\n  const registerId = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? registerContentId(contentId) : undefined),\n    [registerContentId, contentId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, attachSurface, registerId);\n\n  // An alert dialog needs an answer: a backdrop press does not close it (Escape still does).\n  const closesOnBackdropPress = modalType !== 'alert';\n  const backdropPress = useBackdropPress(surfaceRef, closesOnBackdropPress);\n  const onDismiss = useModalDismiss(requestOpen, 'Dialog', backdropPress.afterOutsidePress);\n  const layer = useModalLayer({\n    open,\n    onDismiss,\n    refs: [surfaceRef],\n    outsidePress: closesOnBackdropPress,\n    container: surface,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  useUnnamedModalWarning(open ? surface : null, titles.hasTitle, 'Dialog.Content', 'Dialog.Title');\n\n  // The height of the sticky Dialog.Footer, reserved as the body's scroll padding.\n  const [footerHeight, setFooterHeight] = React.useState<number | null>(null);\n  const surfaceContext = React.useMemo<ModalSurfaceContextValue>(\n    () => ({ ...titles.context, setFooterHeight }),\n    [titles.context],\n  );\n\n  if (!open) return null;\n\n  const hasTitle = slotRendersContent(title);\n\n  return (\n    <Portal layerId={layer.layerId}>\n      <div\n        className={cn(\n          dialogContentClassNames.backdrop,\n          'fixed inset-0 flex items-center justify-center bg-backdrop',\n        )}\n        onMouseDown={backdropPress.onMouseDown}\n      >\n        <div\n          ref={mergedRef}\n          role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n          id={contentId}\n          aria-labelledby={hasTitle ? propTitleId : titles.titleId}\n          tabIndex={-1}\n          data-modal-type={modalType}\n          {...rest}\n          className={cn(\n            dialogContentClassNames.root,\n            // The border marks the surface where the shadow cannot: in high contrast the page,\n            // the backdrop and the surface are black, and forced colors drop shadows. The 1rem gap\n            // to the viewport edges is the surface's own margin, not the backdrop's padding, so a\n            // margin in `className` replaces it and a full-screen dialog can reach the edges. Its\n            // minimum width is zero, so content wider than the room inside the gap scrolls in the\n            // body instead of pushing the surface over the gap.\n            'relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64',\n            sizeClasses[size],\n            className,\n          )}\n        >\n          <ModalSurfaceContext.Provider value={surfaceContext}>\n            {hasTitle && (\n              <h2\n                id={propTitleId}\n                className={cn(dialogTitleClassNames.root, 'pe-8 text-subtitle-1 font-semibold')}\n              >\n                {title}\n              </h2>\n            )}\n            <Button\n              appearance=\"subtle\"\n              size=\"small\"\n              icon={<DismissIcon />}\n              aria-label={closeLabel}\n              onClick={(event) =>\n                requestOpen(false, { reason: 'close-button', event: event.nativeEvent })\n              }\n              className={cn(\n                dialogContentClassNames.closeButton,\n                'absolute end-4 top-4 text-muted-foreground',\n              )}\n            />\n            <div\n              // The scroll padding keeps a focused field above the sticky footer (WCAG 2.4.11).\n              className={cn(\n                dialogContentClassNames.body,\n                '-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1',\n              )}\n              style={\n                footerHeight === null\n                  ? undefined\n                  : ({ '--wave-dialog-footer-height': `${footerHeight}px` } as React.CSSProperties)\n              }\n            >\n              {children}\n            </div>\n          </ModalSurfaceContext.Provider>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nDialogContent.displayName = 'DialogContent';\n\n/**\n * A heading that names the dialog (`aria-labelledby`), for rich titles or custom layouts. Render it\n * inside `Dialog.Content` (instead of the `title` prop). Like the `title` heading it reserves end\n * padding (`pe-8`) so a long first line stays clear of the Close button; a `className` padding wins.\n */\nexport const DialogTitle = ({ id, className, children, ref, ...rest }: DialogTitleProps) => {\n  const { id: titleId, ref: titleRef } = useModalTitle('Dialog.Title', 'Dialog.Content', id, ref);\n  return (\n    <h2\n      {...rest}\n      id={titleId}\n      ref={titleRef}\n      className={cn(\n        dialogTitleClassNames.root,\n        'pe-8 text-subtitle-1 font-semibold text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </h2>\n  );\n};\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * `Dialog.Footer` inside `Dialog.Content`. The body is `p-1`, and sticky positioning stops at its\n * padding edge: `-bottom-1` with `-mb-1 pb-2` covers the body's bottom padding, `-mx-1 px-1` its\n * focus-ring inset, and `pt-3` separates the actions from the content scrolling under them.\n */\nconst stickyFooterClasses =\n  'sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3';\n\n/**\n * `Dialog.Footer` where no body reserves its height as scroll padding (a Drawer's body): a plain\n * action row, which never covers a focused field.\n */\nconst footerRowClasses = 'mt-6 flex justify-end gap-2';\n\n/**\n * Action row at the end of the dialog body. It stays where you render it in the DOM and sticks to\n * the bottom of the body while long content scrolls under it (with an opaque background); the body\n * reserves its height as scroll padding, so a focused field is never hidden behind it. Inside a\n * `<form>` that wraps the fields and the footer it sticks too: make it the form's last child.\n * Render it inside `Dialog.Content`: outside it, it would stay on the page while the dialog is\n * closed (a development warning says so). Inside a `Drawer`, whose body reserves no footer height,\n * it does not stick: it is an action row at the end of the content. Render one `Dialog.Footer` per\n * `Dialog.Content`: with two at once, the body reserves the height of the one measured last, and\n * unmounting either clears it until the other resizes (swapping one footer for another is fine).\n */\nexport const DialogFooter = ({ children, className, ref, ...rest }: DialogFooterProps) => {\n  const surfaceContext = React.useContext(ModalSurfaceContext);\n  const outsideContent = surfaceContext === null;\n  const setFooterHeight = surfaceContext?.setFooterHeight;\n  const [footer, setFooter] = React.useState<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, setFooter);\n\n  React.useEffect(() => {\n    if (!outsideContent) return;\n    warnOnce(\n      'Dialog.Footer:outside-content',\n      'Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.',\n    );\n  }, [outsideContent]);\n\n  // Reports the footer's border-box height to Dialog.Content. The observer's first callback,\n  // delivered before the next paint, supplies the first value; without ResizeObserver the body\n  // keeps its default scroll padding.\n  React.useLayoutEffect(() => {\n    if (!footer || !setFooterHeight || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? footer.offsetHeight);\n    });\n    observer.observe(footer, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setFooterHeight(null);\n    };\n  }, [footer, setFooterHeight]);\n\n  return (\n    <div\n      ref={mergedRef}\n      {...rest}\n      // Sticky only where the surface reserves the footer's height (Dialog.Content).\n      className={cn(\n        dialogFooterClassNames.root,\n        setFooterHeight ? stickyFooterClasses : footerRowClasses,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A modal dialog (Fluent UI v2 style): `Dialog` holds the open state; `Dialog.Trigger` opens it and\n * `Dialog.Content` renders the surface in a portal while open.\n *\n * - **Modal**: focus moves into the dialog and Tab stays inside it (toasts included), the rest of\n *   the page is `inert` (instead of `aria-modal`, so toasts and live regions stay announced), and\n *   the page does not scroll.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on\n *   the backdrop (a drag that starts inside does not close it), the Close button and `Dialog.Close`.\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   dialog can refuse some of them. A backdrop press blurs the focused field before the dialog\n *   closes, so a typed value is committed as with the Close button; when a controlled dialog\n *   refuses the press, the field gets focus back (an alert dialog's press leaves focus where it\n *   was). Focus returns to the first of these that can take focus: `finalFocusRef`, the element\n *   that had focus when the dialog opened, the trigger, an element next to where that opener was.\n * - **Alert dialogs**: `modalType=\"alert\"` renders `role=\"alertdialog\"` for a confirmation that\n *   needs an answer; a backdrop press does not close it.\n * - **Footer**: `Dialog.Footer` sticks to the bottom of the scrolling body, and the body keeps a\n *   focused field above it.\n * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.\n *\n * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,\n * `DialogFooter`, `DialogTitle`, `DialogClose`) for React Server Components, which cannot use the\n * dotted form; dotted access (`Dialog.Content`) needs a client file.\n *\n * @example\n * <Dialog>\n *   <Dialog.Trigger><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete file?\">\n *     This cannot be undone.\n *     <Dialog.Footer>\n *       <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n *       <Button appearance=\"primary\" onClick={remove}>Delete</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nexport const Dialog = /* @__PURE__ */ Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Close: DialogClose,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.cjs","names":["React","inertModalTrigger","useRequiredContext","useModalOpenState","useIsClient","useModalTrigger","useModalTriggerPart","useModalClosePart","usePresence","useId","useTitleRegistry","useMergedRefs","useBackdropPress","useModalDismiss","useModalLayer","useModalOpener","usePopoverTabOrder","getTabbableThrough","slotRendersContent","Portal","ModalBackdrop","dialogContentClassNames","cn","composeEventHandlers","ModalSurfaceContext","dialogTitleClassNames","renderSlot","ModalCloseButton","useModalTitle","_Fragment","createPortal","dialogFooterClassNames","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useIsClient","require_usePresence","require_Portal","require_Popover_shared","require_Dialog_shared","require_useModalLayer","require_Dialog_slots","react","react_jsx_runtime","react_dom","DialogContext","inertDialogContext","useDialogContext","componentName","DialogRoot","openState","requestOpen","open","defaultOpen","onOpenChange","isClient","isOpen","trigger","contentId","setContentId","registerContentId","id","current","context","modalType","finalFocusRef","unmountOnClose","DialogTrigger","props","DialogClose","sizeClasses","fullTitleActionsClasses","TITLE_ACTIONS_GAP","BACKDROP_IGNORED_WARNING_KEY","BACKDROP_IGNORED_WARNING","NON_MODAL_FULL_WARNING_KEY","NON_MODAL_FULL_WARNING","useTitleActionsWidth","width","setWidth","area","observer","entry","entries","DialogContent","rest","presenceRef","keptMounted","generatedId","propTitleId","titles","surface","setSurface","surfaceRef","attachSurface","node","registerId","mergedRef","ref","portalRef","backdropPress","onDismiss","layer","nonModal","opener","onTabOrderKeyDown","backdropIgnored","backdrop","coversUsablePage","size","titleActionsArea","setTitleActionsArea","titleActionsOutlet","setTitleActionsOutlet","titleActionsWidth","footerHeight","setFooterHeight","surfaceContext","isMounted","hasTitle","title","titleEndPadding","surfaceStyle","style","presenceProps","onKeyDown","className","titleAction","DialogTitle","titleId","titleRef","outlet","heading","action","actionElement","stickyFooterClasses","footerRowClasses","DialogFooter","outsideContent","footer","setFooter","Dialog"],"sources":["../../../src/components/overlays/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { cn } from '../../lib/cn';\nimport {\n  dialogContentClassNames,\n  dialogFooterClassNames,\n  dialogTitleClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { renderSlot, slotRendersContent, type Slot, type SlotObject } from '../../lib/slot';\nimport type {\n  BackdropAppearance,\n  ModalOpenChangeReason,\n  ModalType,\n  OpenChangeDetails,\n  SurfaceSize,\n} from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useModalLayer } from '../../hooks/useModalLayer';\nimport { usePresence } from '../../hooks/usePresence';\nimport { Portal } from '../portal/Portal';\nimport {\n  inertModalTrigger,\n  ModalSurfaceContext,\n  useBackdropPress,\n  useModalClosePart,\n  useModalDismiss,\n  useModalOpener,\n  useModalOpenState,\n  useModalTitle,\n  useModalTrigger,\n  useModalTriggerPart,\n  useModalTriggerSession,\n  useOpenInsideWarning,\n  useRaiseOnOpen,\n  useRequiredContext,\n  useTitleRegistry,\n  useUnnamedModalWarning,\n  type ModalRequestOpen,\n  type ModalSurfaceContextValue,\n  type ModalTrigger,\n} from './Dialog.shared';\nimport { ModalBackdrop, ModalCloseButton } from './Dialog.slots';\nimport { getTabbableThrough, usePopoverTabOrder } from './Popover.shared';\n\n/**\n * Why a {@link Dialog} asks to open or close: `trigger` (`Dialog.Trigger`), `close`\n * (`Dialog.Close`), `close-button` (the built-in Close button), `escape`, `outside-press` (the\n * backdrop). The shared `ModalOpenChangeReason`.\n */\nexport type DialogOpenChangeReason = ModalOpenChangeReason;\n\n/** The second argument of a {@link Dialog}'s `onOpenChange`: the reason and the DOM event. */\nexport type DialogOpenChangeDetails = OpenChangeDetails<DialogOpenChangeReason>;\n\n/**\n * How a {@link Dialog} relates to the page: `modal`, `alert` or `non-modal` (the shared\n * `ModalType`; `DrawerModalType` is the same type).\n */\nexport type DialogModalType = ModalType;\n\n/**\n * The width cap of a {@link Dialog}'s surface: `small` 400px, `medium` 600px, `large` 940px, or\n * `full`, the whole viewport (the shared `SurfaceSize`; `DrawerSize` is the same type).\n */\nexport type DialogSize = SurfaceSize;\n\n/** Properties for the Dialog component. */\nexport interface DialogProps {\n  /**\n   * Controlled open state of the dialog. The surface renders only in the browser: an open dialog\n   * is closed in the server HTML and opens once it has hydrated.\n   */\n  open?: boolean;\n  /**\n   * Default open state for uncontrolled usage. The surface renders only in the browser: a dialog\n   * open by default is closed in the server HTML and opens once it has hydrated.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Called with the new open state when it changes. `details.reason` tells how — `trigger`,\n   * `close` (a `.Close` part), `close-button` (the built-in Close button), `escape` or\n   * `outside-press` (the backdrop) — so a controlled dialog can refuse only some ways of closing\n   * (for example keep a form with unsaved changes open on `outside-press`); `details.event` is the\n   * DOM event behind the request. WaveUI always passes `details`; it is typed optional until 1.0\n   * so that code which calls this prop itself keeps compiling.\n   *\n   * Fires only when the value changes; a controlled dialog stays as it is until the parent updates\n   * `open`.\n   */\n  onOpenChange?: (open: boolean, details?: DialogOpenChangeDetails) => void;\n  /**\n   * `modal`: the page behind is `inert` and does not scroll; a backdrop press, Escape, the Close\n   * button and `Dialog.Close` close it. `alert`: a confirmation that needs an answer —\n   * `role=\"alertdialog\"`, and a backdrop press does not close it (Escape still does). `non-modal`:\n   * the page stays usable — no backdrop, no focus trap, nothing inert, the page scrolls; Tab and\n   * Shift+Tab leave the dialog in the page's order right after the element that opened it, Escape\n   * closes it while focus is inside it, presses on the page never close it, and focus returns to\n   * the opener only when it was inside the dialog. A non-modal dialog covers the page under it\n   * while Tab still reaches that page: keep the controls the user works with outside it, or use\n   * `modal` (with `size=\"full\"` it covers everything, and a development warning says so). Every\n   * type moves focus to the first focusable element on open (a title action, else the built-in\n   * Close button); give another element `autoFocus` to start there (an alert dialog's least\n   * destructive action). `Dialog.Trigger` toggles the dialog. Fluent's `modalType`.\n   * @default 'modal'\n   */\n  modalType?: DialogModalType;\n  /**\n   * Where focus goes when the dialog closes, if it can take focus. Otherwise focus returns to the\n   * element that had focus when the dialog opened, then to the trigger, then to an element next to\n   * where that opener was (the next row's action after a confirm dialog deleted the row). Use it to\n   * send focus somewhere else.\n   */\n  finalFocusRef?: React.RefObject<HTMLElement | null>;\n  /**\n   * Removes `Dialog.Content` (the surface and everything in it) when the dialog closes. `false`\n   * keeps it mounted while closed, `hidden` and `inert`, so a form inside keeps what was typed and\n   * the components inside keep their state; the surface then mounts with the Dialog, closed (in\n   * the browser only, as an open one), and an `autoFocus` inside it never applies (each open\n   * focuses the first focusable element). A popup opened inside that is still open when the\n   * dialog closes stays open over the page (a development warning says so): close it first.\n   * Fluent's `unmountOnClose`.\n   * @default true\n   */\n  unmountOnClose?: boolean;\n  /** `Dialog.Trigger` and `Dialog.Content`. */\n  children: React.ReactNode;\n}\n\n/** Properties for the DialogContent sub-component. */\nexport interface DialogContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /**\n   * Title rendered as the dialog's heading; it names the dialog (`aria-labelledby`). Without it,\n   * render a `Dialog.Title` or pass `aria-label`/`aria-labelledby`. A title that renders nothing\n   * (`''`, `[]`, `true`) counts as none.\n   */\n  title?: React.ReactNode;\n  /**\n   * Width cap: 400px (`small`), 600px (`medium`) or 940px (`large`), never wider than the viewport\n   * (a 1rem margin). `full` covers the viewport: no margin, radius or border, the viewport's\n   * dynamic height, and the safe-area insets as padding (with `viewport-fit=cover`); the body\n   * scrolls under the sticky `Dialog.Footer`. Rendered as `data-size`. Fluent has no size. For\n   * another width, put a width cap in `className` (it replaces the size's).\n   * @default 'medium'\n   */\n  size?: DialogSize;\n  /**\n   * The backdrop of a modal or alert dialog: a `div` behind the dialog, `aria-hidden`. Shorthand\n   * content renders inside it; a slot object's `className` (merged last), `style`, data\n   * attributes, `ref` and handlers go to it, and its `appearance` (`'dimmed'` or `'transparent'`)\n   * overrides the automatic one: while another modal Dialog or Drawer is open below this one the\n   * backdrop is transparent, so the page is dimmed once. `null` renders no backdrop (the page stays\n   * inert, and a press outside still closes a modal dialog); a boolean is no slot. Ignored with\n   * `modalType=\"non-modal\"` (a development warning says so). Fluent's `backdrop`.\n   */\n  backdrop?: Slot<'div'> | (SlotObject<'div'> & { appearance?: BackdropAppearance });\n  /**\n   * Content of the built-in Close button (the dismiss glyph by default). It renders inside the\n   * button, decorative (`aria-hidden`), so the button keeps the name `closeLabel`; a slot object's\n   * `aria-label`, `aria-labelledby` or `title` names it instead, and its handlers run before the\n   * close (`preventDefault()` keeps the dialog open). `null` hides the button (Escape and\n   * `Dialog.Close` still close); a boolean is no slot, so `closeButton={cond && <MyIcon />}` keeps\n   * the default; content that renders nothing keeps the default glyph. A `<button>` or Wave\n   * `Button` passed here is merged into the built-in button, never nested (a development warning\n   * says so): its props apply, its text label (`<button>Done</button>`) names the button instead\n   * of `closeLabel`, and a Button's `icon`, `iconPosition` and `disabledFocusable` apply while\n   * `appearance` and `size` are ignored. Fluent's `DialogTitle` `action` holds Fluent's close\n   * button; WaveUI renders its own.\n   */\n  closeButton?: Slot<'span'>;\n  /**\n   * Header buttons for the `title` prop form, placed before the built-in Close button in the\n   * dialog's top end corner, in DOM and Tab order (an expand toggle, a menu). The title's end\n   * padding makes room for them. Interactive: name icon-only buttons. Renders nothing when empty.\n   * See also `Dialog.Title`'s `action`. Fluent's `DialogTitle` `action`, for the `title` prop\n   * form.\n   */\n  titleAction?: Slot<'span'>;\n  /**\n   * Accessible name of the built-in Close button (an icon-only button). Localize it with the\n   * page's language. A text label of a button merged into `closeButton` names it instead.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Content rendered inside the dialog body (put `Dialog.Footer` here as well). */\n  children: React.ReactNode;\n  /** Ref to the dialog surface (`role=\"dialog\"`, or `alertdialog` with `modalType=\"alert\"`). */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogFooter sub-component. */\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Footer content, typically action buttons (wrap closing buttons in `Dialog.Close`). */\n  children: React.ReactNode;\n  /** Ref to the footer element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the DialogTitle sub-component. */\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** The title; any content. */\n  children: React.ReactNode;\n  /**\n   * Header buttons for this title, placed before the built-in Close button in the dialog's top end\n   * corner (after `Dialog.Content`'s `titleAction`), not inside the heading, so they never become\n   * part of the dialog's name. Outside `Dialog.Content` (in a Drawer) they render right after the\n   * heading. Interactive: name icon-only buttons. Renders nothing when empty. Fluent's\n   * `DialogTitle` `action`; unlike Fluent's, it is never filled by default (the Close button is\n   * the Content's).\n   */\n  action?: Slot<'span'>;\n  /** Ref to the heading element. */\n  ref?: React.Ref<HTMLHeadingElement>;\n}\n\n/** Props a `Dialog.Trigger` puts on its element (and passes to a render-prop child). */\nexport interface DialogTriggerRenderProps extends React.HTMLAttributes<HTMLElement> {\n  'aria-haspopup': 'dialog';\n  'aria-expanded': boolean;\n  /** The dialog surface's id, while the dialog is open. */\n  'aria-controls'?: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogTrigger sub-component. */\nexport interface DialogTriggerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that opens and closes the dialog. A single element receives the trigger props\n   * (merged with its own: handlers composed, classes joined, its own `id` kept); a function\n   * receives them.\n   */\n  children: React.ReactNode | ((props: DialogTriggerRenderProps) => React.ReactNode);\n  /**\n   * `false` renders the 0.4 wrapper `<span>` around the children instead of merging the trigger\n   * props onto the child. The span carries the click handler; `aria-haspopup`, `aria-expanded`\n   * and `aria-controls` go to the first element in the tab order inside it.\n   * @default true\n   */\n  asChild?: boolean;\n  /** Ref to the trigger element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/** Props a `Dialog.Close` puts on its element (and passes to a render-prop child). */\nexport interface DialogCloseRenderProps extends React.HTMLAttributes<HTMLElement> {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  /** A callback ref, so the props spread onto any element type. */\n  ref: React.RefCallback<HTMLElement>;\n}\n\n/** Properties for the DialogClose sub-component. */\nexport interface DialogCloseProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  /**\n   * The element that closes the dialog, typically a footer button. A single element receives an\n   * `onClick` composed with its own (its handler runs first; `preventDefault()` keeps the dialog\n   * open); a function receives the props.\n   */\n  children: React.ReactNode | ((props: DialogCloseRenderProps) => React.ReactNode);\n  /** `false` renders a wrapper `<span>` that closes the dialog on click. @default true */\n  asChild?: boolean;\n  /** Ref to the close element (the child, or the wrapper span). */\n  ref?: React.Ref<HTMLElement>;\n}\n\ninterface DialogContextValue {\n  open: boolean;\n  /** Asks the root to open or close, with the reason and event for `onOpenChange`. */\n  requestOpen: ModalRequestOpen;\n  /** The resolved `modalType`. */\n  modalType: DialogModalType;\n  /** The trigger element (`attach`) and the focus-restore target resolved from it (`focusRef`). */\n  trigger: ModalTrigger;\n  finalFocusRef: React.RefObject<HTMLElement | null> | undefined;\n  /** The resolved `unmountOnClose`: `false` keeps `Dialog.Content` mounted while closed. */\n  unmountOnClose: boolean;\n  /** The id of the open dialog surface (for the trigger's `aria-controls`), or `undefined`. */\n  contentId: string | undefined;\n  /** Registers the surface's id while it is mounted; returns the unregister function. */\n  registerContentId: (id: string) => () => void;\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null);\nDialogContext.displayName = 'DialogContext';\n\nconst inertDialogContext: DialogContextValue = {\n  open: false,\n  requestOpen: () => {},\n  modalType: 'modal',\n  trigger: inertModalTrigger,\n  finalFocusRef: undefined,\n  unmountOnClose: true,\n  contentId: undefined,\n  registerContentId: () => () => {},\n};\n\nfunction useDialogContext(componentName: string): DialogContextValue {\n  return useRequiredContext(DialogContext, componentName, 'Dialog', () => inertDialogContext);\n}\n\n// The root of `Dialog` (documented on the export below). A const arrow (like DrawerRoot): its type\n// can be named in consumers' declaration files, e.g. a story's `satisfies Meta<typeof Dialog>` (a\n// function declaration's `typeof` cannot, TS4023).\nconst DialogRoot = ({\n  open,\n  defaultOpen,\n  onOpenChange,\n  modalType = 'modal',\n  finalFocusRef,\n  unmountOnClose = true,\n  children,\n}: DialogProps) => {\n  const [openState, requestOpen] = useModalOpenState(open, defaultOpen, onOpenChange);\n  // The surface lives in a portal, which renders only in the browser: until then (the server\n  // HTML, hydration) the dialog reports itself closed, so the trigger's aria-expanded never\n  // describes a dialog that is not there.\n  const isClient = useIsClient();\n  const isOpen = openState && isClient;\n  const trigger = useModalTrigger();\n  // After Dialog.Content's focus restore (a child's layout effects run first), start the trigger\n  // session, or end it and forget the trigger that opened it.\n  useModalTriggerSession(trigger, isOpen);\n  const [contentId, setContentId] = React.useState<string | undefined>(undefined);\n  const registerContentId = React.useCallback((id: string) => {\n    setContentId(id);\n    return () => setContentId((current) => (current === id ? undefined : current));\n  }, []);\n\n  const context = React.useMemo<DialogContextValue>(\n    () => ({\n      open: isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    }),\n    [\n      isOpen,\n      requestOpen,\n      modalType,\n      trigger,\n      finalFocusRef,\n      unmountOnClose,\n      contentId,\n      registerContentId,\n    ],\n  );\n\n  return <DialogContext.Provider value={context}>{children}</DialogContext.Provider>;\n};\nDialogRoot.displayName = 'Dialog';\n\n/**\n * Opens and closes the dialog: a click while it is open asks it to close (reason `trigger`). Only a\n * non-modal dialog's trigger, or a trigger rendered inside the dialog's own content, can receive\n * one (a modal dialog makes the page inert). Fluent's `DialogTrigger` never toggles (outside the\n * surface it only opens, inside it only closes); this trigger always does. Puts\n * `aria-haspopup=\"dialog\"`, `aria-expanded`, `aria-controls` (while open), a click handler and a\n * ref on its single child (no wrapper element), or passes them to a render-prop child. A custom\n * child component must forward `ref` and spread its props; one that does not is wrapped in a\n * `<span>` automatically (with a development warning), the span that `asChild={false}` renders.\n * Focus returns to the trigger when the dialog closes (with several triggers, to the one that\n * opened it). On the span, the state ARIA goes to the first element in the tab order inside it,\n * and focus returns to that element (to the span when you made it the trigger with a `role` such\n * as `button` and `tabIndex={0}`, or when nothing inside it can take focus).\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  const { open, requestOpen, trigger, contentId } = useDialogContext('Dialog.Trigger');\n  return useModalTriggerPart<DialogTriggerRenderProps>(\n    { open, requestOpen, trigger, controlsId: contentId },\n    props,\n    'Dialog.Trigger',\n  );\n};\nDialogTrigger.displayName = 'DialogTrigger';\n\n/**\n * Closes the dialog: composes a click handler onto its single child (its own `onClick` runs first;\n * calling `preventDefault()` there keeps the dialog open), or passes it to a render-prop child.\n *\n * @example\n * <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n */\nexport const DialogClose = (props: DialogCloseProps) => {\n  const { requestOpen } = useDialogContext('Dialog.Close');\n  return useModalClosePart<DialogCloseRenderProps>(requestOpen, props, 'Dialog.Close');\n};\nDialogClose.displayName = 'DialogClose';\n\n/**\n * The surface's width cap per size. `full` lifts the caps, the margin, the radius and the border,\n * takes the viewport's dynamic height and pads the safe-area insets (`max()` keeps the 24px\n * padding where there is no inset, and never adds the two). The side insets are physical (the\n * left inset pads the left side in either direction), so the side padding is too: one class per\n * side, with no direction override that a consumer's padding class would leave behind.\n */\nconst sizeClasses: Record<DialogSize, string> = {\n  small: 'max-w-[400px]',\n  medium: 'max-w-[600px]',\n  large: 'max-w-[940px]',\n  full: 'm-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]', // wave-allow-physical: the safe-area insets are physical sides\n};\n\n/** The title-actions area of a `full` dialog moves by the safe-area insets, as the padding does. */\nconst fullTitleActionsClasses =\n  'top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]';\n\n/** The gap (px) between the titles' text and the title-actions area. */\nconst TITLE_ACTIONS_GAP = 8;\n\nconst BACKDROP_IGNORED_WARNING_KEY = 'Dialog.Content:backdrop-ignored';\nconst BACKDROP_IGNORED_WARNING =\n  'Dialog.Content: `backdrop` is ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.';\n\nconst NON_MODAL_FULL_WARNING_KEY = 'Dialog.Content:non-modal-full';\nconst NON_MODAL_FULL_WARNING =\n  'Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page\\'s controls kept clear of it.';\n\n/**\n * The width (px) of the title-actions area, measured with a `ResizeObserver` (`null` until the\n * first measurement, and without `ResizeObserver`). The observer's first callback arrives before\n * the next paint.\n */\nfunction useTitleActionsWidth(area: HTMLElement | null): number | null {\n  const [width, setWidth] = React.useState<number | null>(null);\n  React.useLayoutEffect(() => {\n    if (!area || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setWidth(entry.borderBoxSize?.[0]?.inlineSize ?? area.offsetWidth);\n    });\n    observer.observe(area, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setWidth(null);\n    };\n  }, [area]);\n  return width;\n}\n\n/**\n * The dialog surface, rendered in a portal (inheriting the WaveProvider theme) while the dialog is\n * open, and kept there while it is closed, `hidden` and `inert`, when the Dialog has\n * `unmountOnClose={false}`: the backdrop, and the surface centred in the positioner (the\n * backdrop's sibling) with the title, the title-actions area (title actions, then the Close\n * button) and a scrolling body. It takes the full width up to its `size` and never exceeds the\n * viewport (the body scrolls, also sideways for content wider than the dialog); `size=\"full\"`\n * fills the viewport. Its 1rem gap to the viewport edges is its own margin, so a margin in\n * `className` replaces the gap: with the width and height caps lifted as well and its height set\n * to the viewport's, it fills the viewport. It is `role=\"dialog\"`, or `role=\"alertdialog\"` when the\n * Dialog has `modalType=\"alert\"` (a `role` you pass wins), and carries `data-modal-type` and\n * `data-size` with the resolved values. A non-modal dialog has no backdrop: the positioner only\n * centres the surface and lets presses through to the page. The titles' end padding follows the\n * width of the title-actions area (`--wave-dialog-title-end-padding`, 2rem until it is measured).\n *\n * It mounts through the presence core: the backdrop, the positioner and the surface render\n * `data-presence` (`entered` while open, `exited` while kept closed; `entering` and `exiting`\n * only while a motion of yours runs on the surface), and the backdrop and the positioner are\n * `inert` while exiting and `hidden` and `inert` while kept closed. No motion ships: animate the\n * surface with `data-[presence=…]:` classes in `className` (an enter's start as\n * `data-[presence=entering]:starting:`, each with a `motion-reduce:` counterpart); a closed\n * surface waits for that motion before it unmounts or hides, while focus, the trap and the\n * isolation follow the open state at once.\n */\nexport const DialogContent = ({\n  title,\n  size = 'medium',\n  backdrop,\n  closeButton,\n  titleAction,\n  closeLabel = 'Close',\n  children,\n  className,\n  style,\n  id,\n  onKeyDown,\n  ref,\n  ...rest\n}: DialogContentProps) => {\n  const {\n    open,\n    requestOpen,\n    modalType,\n    trigger,\n    finalFocusRef,\n    unmountOnClose,\n    registerContentId,\n  } = useDialogContext('Dialog.Content');\n  // Every surface mounts through the presence core (D5, D103), with no motion of its own: kept\n  // mounted while closed with `unmountOnClose={false}`, else removed once it has exited.\n  const {\n    isMounted,\n    ref: presenceRef,\n    presenceProps,\n  } = usePresence(open, { unmountOnExit: unmountOnClose });\n  const keptMounted = !unmountOnClose;\n  const generatedId = useId('wave-dialog');\n  const contentId = id ?? generatedId;\n  const propTitleId = useId('wave-dialog-title');\n  const titles = useTitleRegistry();\n\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const attachSurface = React.useCallback((node: HTMLDivElement | null) => {\n    surfaceRef.current = node;\n    setSurface(node);\n  }, []);\n  // Reports the surface's id to the root (the trigger's `aria-controls`) while it is mounted. A new\n  // `id` makes a new callback, which useMergedRefs re-attaches after the commit (re-registering).\n  const registerId = React.useCallback(\n    (node: HTMLDivElement | null) => (node ? registerContentId(contentId) : undefined),\n    [registerContentId, contentId],\n  );\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, attachSurface, registerId, presenceRef);\n  // The portal wrapper: a kept-mounted surface moves to the top of its stack when it opens\n  // (before the layer registers and the trap moves focus in).\n  const portalRef = React.useRef<HTMLDivElement | null>(null);\n  useRaiseOnOpen(open, keptMounted, portalRef);\n\n  // An alert dialog needs an answer: a backdrop press does not close it (Escape still does;\n  // useModalLayer registers its layer without outside presses).\n  const backdropPress = useBackdropPress(surfaceRef, modalType !== 'alert');\n  const onDismiss = useModalDismiss(requestOpen, 'Dialog', backdropPress.afterOutsidePress);\n  const layer = useModalLayer({\n    open,\n    modalType,\n    onDismiss,\n    refs: [surfaceRef],\n    container: surface,\n    triggerRef: trigger.focusRef,\n    finalFocusRef,\n  });\n  // A non-modal dialog keeps its place in the page's keyboard order right after its opener. The\n  // opener is captured whenever the dialog opens, so a modal dialog that turns non-modal while open\n  // (focus inside it by then) still knows it.\n  const nonModal = modalType === 'non-modal';\n  const opener = useModalOpener(open, trigger, surface);\n  const onTabOrderKeyDown = usePopoverTabOrder({\n    enabled: open && nonModal,\n    surface,\n    anchorRef: opener,\n    getPreviousStop: getTabbableThrough,\n  });\n  useUnnamedModalWarning(open ? surface : null, titles.hasTitle, 'Dialog.Content', 'Dialog.Title');\n  useOpenInsideWarning(open, keptMounted, layer.layerId, 'Dialog');\n\n  // A non-modal dialog has no backdrop: a given slot (not undefined, null or a boolean) is ignored.\n  const backdropIgnored =\n    nonModal && backdrop !== undefined && backdrop !== null && typeof backdrop !== 'boolean';\n  React.useEffect(() => {\n    if (backdropIgnored) warnOnce(BACKDROP_IGNORED_WARNING_KEY, BACKDROP_IGNORED_WARNING);\n  }, [backdropIgnored]);\n  // A full non-modal dialog covers the page it leaves usable (D87.8).\n  const coversUsablePage = open && nonModal && size === 'full';\n  React.useEffect(() => {\n    if (coversUsablePage) warnOnce(NON_MODAL_FULL_WARNING_KEY, NON_MODAL_FULL_WARNING);\n  }, [coversUsablePage]);\n\n  // The title-actions area (held in state) and the outlet `Dialog.Title` actions portal into. Both\n  // attach in the commit that mounts the surface, so a title's action is in the DOM in the next\n  // commit, the one in which the focus trap starts (it waits for the surface held in state). The\n  // area is measured only while the dialog is open (a kept-mounted closed one measures nothing).\n  const [titleActionsArea, setTitleActionsArea] = React.useState<HTMLDivElement | null>(null);\n  const [titleActionsOutlet, setTitleActionsOutlet] = React.useState<HTMLSpanElement | null>(null);\n  const titleActionsWidth = useTitleActionsWidth(open ? titleActionsArea : null);\n\n  // The height of the sticky Dialog.Footer, reserved as the body's scroll padding.\n  const [footerHeight, setFooterHeight] = React.useState<number | null>(null);\n  const surfaceContext = React.useMemo<ModalSurfaceContextValue>(\n    () => ({ ...titles.context, setFooterHeight, titleActionsOutlet }),\n    [titles.context, titleActionsOutlet],\n  );\n\n  if (!isMounted) return null;\n\n  const hasTitle = slotRendersContent(title);\n  // The titles' end padding: the area's width and a gap while it has a size, none while it is\n  // empty; unset (the 2rem fallback) until it is measured.\n  const titleEndPadding =\n    titleActionsWidth === null\n      ? undefined\n      : titleActionsWidth > 0\n        ? `${titleActionsWidth + TITLE_ACTIONS_GAP}px`\n        : '0px';\n  const surfaceStyle =\n    titleEndPadding === undefined\n      ? style\n      : ({ '--wave-dialog-title-end-padding': titleEndPadding, ...style } as React.CSSProperties);\n\n  return (\n    <Portal ref={portalRef} layerId={layer.layerId}>\n      {/* Each top-level element carries the presence attributes (D7, D103): hidden and inert while\n          kept closed, so a closed dialog leaves no backdrop over the page. */}\n      {!nonModal && (\n        <ModalBackdrop\n          backdrop={backdrop}\n          className={dialogContentClassNames.backdrop}\n          layerId={layer.layerId}\n          open={open}\n          onMouseDown={backdropPress.onMouseDown}\n          presenceProps={presenceProps}\n        />\n      )}\n      <div\n        {...presenceProps}\n        // Centres the surface and lets presses through to the backdrop (modal) or the page\n        // (non-modal) around it.\n        className={cn(\n          dialogContentClassNames.positioner,\n          'pointer-events-none fixed inset-0 flex items-center justify-center',\n        )}\n      >\n        <div\n          ref={mergedRef}\n          role={modalType === 'alert' ? 'alertdialog' : 'dialog'}\n          id={contentId}\n          aria-labelledby={hasTitle ? propTitleId : titles.titleId}\n          tabIndex={-1}\n          data-modal-type={modalType}\n          data-size={size}\n          {...rest}\n          data-presence={presenceProps['data-presence']}\n          style={surfaceStyle}\n          onKeyDown={composeEventHandlers(onKeyDown, onTabOrderKeyDown)}\n          className={cn(\n            dialogContentClassNames.root,\n            // The border marks the surface where the shadow cannot: in high contrast the page,\n            // the backdrop and the surface are black, and forced colors drop shadows. The 1rem gap\n            // to the viewport edges is the surface's own margin, not the positioner's padding, so\n            // a margin in `className` replaces it and a full-screen dialog can reach the edges.\n            // Its minimum width is zero, so content wider than the room inside the gap scrolls in\n            // the body instead of pushing the surface over the gap.\n            'pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64',\n            sizeClasses[size],\n            className,\n          )}\n        >\n          <ModalSurfaceContext.Provider value={surfaceContext}>\n            {hasTitle && (\n              <h2\n                id={propTitleId}\n                className={cn(\n                  dialogTitleClassNames.root,\n                  'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold',\n                )}\n              >\n                {title}\n              </h2>\n            )}\n            <div\n              ref={setTitleActionsArea}\n              className={cn(\n                dialogContentClassNames.titleActions,\n                'absolute end-4 top-4 flex items-start gap-1',\n                size === 'full' && fullTitleActionsClasses,\n              )}\n            >\n              {slotRendersContent(titleAction)\n                ? renderSlot(\n                    titleAction,\n                    'span',\n                    cn(dialogContentClassNames.titleAction, 'inline-flex items-center gap-1'),\n                  )\n                : null}\n              {/* Each Dialog.Title action portals here, in mount order. */}\n              <span ref={setTitleActionsOutlet} className=\"contents\" />\n              <ModalCloseButton\n                componentName=\"Dialog.Content\"\n                closeButton={closeButton}\n                closeLabel={closeLabel}\n                onClose={(event) => requestOpen(false, { reason: 'close-button', event })}\n                className={cn(dialogContentClassNames.closeButton, 'text-muted-foreground')}\n              />\n            </div>\n            <div\n              // The scroll padding keeps a focused field above the sticky footer (WCAG 2.4.11).\n              className={cn(\n                dialogContentClassNames.body,\n                '-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1',\n              )}\n              style={\n                footerHeight === null\n                  ? undefined\n                  : ({ '--wave-dialog-footer-height': `${footerHeight}px` } as React.CSSProperties)\n              }\n            >\n              {children}\n            </div>\n          </ModalSurfaceContext.Provider>\n        </div>\n      </div>\n    </Portal>\n  );\n};\nDialogContent.displayName = 'DialogContent';\n\n/**\n * A heading that names the dialog (`aria-labelledby`), for rich titles or custom layouts. Render it\n * inside `Dialog.Content` (instead of the `title` prop). Like the `title` heading, its end padding\n * follows the width of the dialog's title-actions area (2rem until it is measured), so a long first\n * line stays clear of the title actions and the Close button; a `className` padding wins. Its\n * `action` renders in that area, before the Close button, and never inside the heading.\n */\nexport const DialogTitle = ({\n  id,\n  action,\n  className,\n  children,\n  ref,\n  ...rest\n}: DialogTitleProps) => {\n  const { id: titleId, ref: titleRef } = useModalTitle('Dialog.Title', 'Dialog.Content', id, ref);\n  // `undefined` outside Dialog.Content (a Drawer), `null` until the content's outlet is attached.\n  const outlet = React.useContext(ModalSurfaceContext)?.titleActionsOutlet;\n  const heading = (\n    <h2\n      {...rest}\n      id={titleId}\n      ref={titleRef}\n      className={cn(\n        dialogTitleClassNames.root,\n        'pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground',\n        className,\n      )}\n    >\n      {children}\n    </h2>\n  );\n  if (!slotRendersContent(action)) return heading;\n  const actionElement = renderSlot(\n    action,\n    'span',\n    cn(dialogTitleClassNames.action, 'inline-flex items-center gap-1'),\n  );\n  return (\n    <>\n      {heading}\n      {outlet === undefined ? actionElement : outlet && createPortal(actionElement, outlet)}\n    </>\n  );\n};\nDialogTitle.displayName = 'DialogTitle';\n\n/**\n * `Dialog.Footer` inside `Dialog.Content`. The body is `p-1`, and sticky positioning stops at its\n * padding edge: `-bottom-1` with `-mb-1 pb-2` covers the body's bottom padding, `-mx-1 px-1` its\n * focus-ring inset, and `pt-3` separates the actions from the content scrolling under them.\n */\nconst stickyFooterClasses =\n  'sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3';\n\n/**\n * `Dialog.Footer` where no body reserves its height as scroll padding (a Drawer's body): a plain\n * action row, which never covers a focused field.\n */\nconst footerRowClasses = 'mt-6 flex justify-end gap-2';\n\n/**\n * Action row at the end of the dialog body. It stays where you render it in the DOM and sticks to\n * the bottom of the body while long content scrolls under it (with an opaque background); the body\n * reserves its height as scroll padding, so a focused field is never hidden behind it. Inside a\n * `<form>` that wraps the fields and the footer it sticks too: make it the form's last child.\n * Render it inside `Dialog.Content`: outside it, it would stay on the page while the dialog is\n * closed (a development warning says so). Inside a `Drawer`, whose body reserves no footer height,\n * it does not stick: it is an action row at the end of the content. Render one `Dialog.Footer` per\n * `Dialog.Content`: with two at once, the body reserves the height of the one measured last, and\n * unmounting either clears it until the other resizes (swapping one footer for another is fine).\n */\nexport const DialogFooter = ({ children, className, ref, ...rest }: DialogFooterProps) => {\n  const surfaceContext = React.useContext(ModalSurfaceContext);\n  const outsideContent = surfaceContext === null;\n  const setFooterHeight = surfaceContext?.setFooterHeight;\n  const [footer, setFooter] = React.useState<HTMLDivElement | null>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, setFooter);\n\n  React.useEffect(() => {\n    if (!outsideContent) return;\n    warnOnce(\n      'Dialog.Footer:outside-content',\n      'Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.',\n    );\n  }, [outsideContent]);\n\n  // Reports the footer's border-box height to Dialog.Content. The observer's first callback,\n  // delivered before the next paint, supplies the first value; without ResizeObserver the body\n  // keeps its default scroll padding.\n  React.useLayoutEffect(() => {\n    if (!footer || !setFooterHeight || typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[entries.length - 1];\n      if (!entry) return;\n      setFooterHeight(entry.borderBoxSize?.[0]?.blockSize ?? footer.offsetHeight);\n    });\n    observer.observe(footer, { box: 'border-box' });\n    return () => {\n      observer.disconnect();\n      setFooterHeight(null);\n    };\n  }, [footer, setFooterHeight]);\n\n  return (\n    <div\n      ref={mergedRef}\n      {...rest}\n      // Sticky only where the surface reserves the footer's height (Dialog.Content).\n      className={cn(\n        dialogFooterClassNames.root,\n        setFooterHeight ? stickyFooterClasses : footerRowClasses,\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\nDialogFooter.displayName = 'DialogFooter';\n\n/**\n * A dialog (Fluent UI v2 style), modal by default: `Dialog` holds the open state; `Dialog.Trigger`\n * opens and closes it and `Dialog.Content` renders the surface in a portal while open (and, with\n * `unmountOnClose={false}`, keeps it there while closed, `hidden` and `inert`).\n *\n * - **Modal**: focus moves into the dialog and Tab stays inside it (toasts included), the rest of\n *   the page is `inert` (instead of `aria-modal`, so toasts and live regions stay announced), and\n *   the page does not scroll.\n * - **Closing**: Escape (only the topmost layer: a popup opened inside closes first), a click on\n *   the backdrop (a drag that starts inside does not close it), the Close button and `Dialog.Close`.\n *   `onOpenChange` gets the reason as its second argument (`details.reason`), so a controlled\n *   dialog can refuse some of them. A backdrop press blurs the focused field before the dialog\n *   closes, so a typed value is committed as with the Close button; when a controlled dialog\n *   refuses the press, the field gets focus back (an alert dialog's press leaves focus where it\n *   was). Focus returns to the first of these that can take focus: `finalFocusRef`, the element\n *   that had focus when the dialog opened, the trigger, an element next to where that opener was.\n * - **Alert dialogs**: `modalType=\"alert\"` renders `role=\"alertdialog\"` for a confirmation that\n *   needs an answer; a backdrop press does not close it.\n * - **Non-modal dialogs**: `modalType=\"non-modal\"` leaves the page usable (no backdrop, no focus\n *   trap, nothing inert, the page scrolls). Focus moves in on open; Tab and Shift+Tab leave the\n *   dialog in the page's order right after the element that opened it; Escape closes it only while\n *   focus is inside it; presses on the page never close it; focus returns to the opener only from\n *   inside. Keep the page's controls clear of the dialog, which covers the page under it.\n * - **Size**: `Dialog.Content` `size` caps the width at 400px (`small`), 600px (`medium`, the\n *   default) or 940px (`large`); `full` covers the viewport and pads its safe-area insets.\n * - **Backdrop**: the backdrop is the surface's sibling and a slot (`backdrop`: `null` removes it,\n *   `appearance` picks `dimmed` or `transparent`). A modal opened over another modal dims the page\n *   once: its backdrop is transparent while the lower one is open.\n * - **Close button and title actions**: `closeButton` sets the built-in Close button's content, or\n *   hides it (`null`); a button passed there is merged into it. `titleAction` and `Dialog.Title`'s\n *   `action` place header buttons before the Close button in the top end corner, in DOM and Tab\n *   order, and the titles' end padding makes room for them. Initial focus goes to the first\n *   focusable element: a title action, else the Close button.\n * - **Footer**: `Dialog.Footer` sticks to the bottom of the scrolling body, and the body keeps a\n *   focused field above it.\n * - **Kept mounted**: `unmountOnClose={false}` keeps the content mounted while the dialog is\n *   closed, so a form keeps what was typed and the components inside keep their state; each open\n *   focuses the first focusable element again (an `autoFocus` inside never applies), and a kept\n *   dialog opened while another overlay is open stacks above it.\n * - **Presence**: the surface mounts through the presence core and renders `data-presence`; no\n *   motion ships, and `data-[presence=…]:` classes on `Dialog.Content` animate it.\n * - **Naming**: give `Dialog.Content` a `title`, a `Dialog.Title`, or `aria-label`.\n *\n * The sub-components are also exported under flat names (`DialogTrigger`, `DialogContent`,\n * `DialogFooter`, `DialogTitle`, `DialogClose`) for React Server Components, which cannot use the\n * dotted form; dotted access (`Dialog.Content`) needs a client file.\n *\n * @example\n * <Dialog>\n *   <Dialog.Trigger><Button>Delete</Button></Dialog.Trigger>\n *   <Dialog.Content title=\"Delete file?\">\n *     This cannot be undone.\n *     <Dialog.Footer>\n *       <Dialog.Close><Button appearance=\"subtle\">Cancel</Button></Dialog.Close>\n *       <Button appearance=\"primary\" onClick={remove}>Delete</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n */\nexport const Dialog = /* @__PURE__ */ Object.assign(DialogRoot, {\n  Trigger: DialogTrigger,\n  Content: DialogContent,\n  Footer: DialogFooter,\n  Title: DialogTitle,\n  Close: DialogClose,\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog.mjs

@@ -1,157 +1,222 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
-import { slotRendersContent as n } from "../../lib/slot.mjs";
-import { dialogContentClassNames as r, dialogFooterClassNames as i, dialogTitleClassNames as a } from "../../lib/classNames.mjs";
-import { useId as o } from "../../hooks/useId.mjs";
-import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
-import { useIsClient as c } from "../../hooks/useIsClient.mjs";
-import { Portal as l } from "../portal/Portal.mjs";
-import { Button as u } from "../button/Button.mjs";
-import { DismissIcon as d } from "../../lib/icons.mjs";
-import { useModalLayer as f } from "../../hooks/useModalLayer.mjs";
-import { ModalSurfaceContext as p, inertModalTrigger as m, useBackdropPress as h, useModalClosePart as g, useModalDismiss as _, useModalOpenState as v, useModalTitle as y, useModalTrigger as b, useModalTriggerPart as x, useModalTriggerSession as S, useRequiredContext as C, useTitleRegistry as w, useUnnamedModalWarning as T } from "./Dialog.shared.mjs";
-import * as E from "react";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { renderSlot as n, slotRendersContent as r } from "../../lib/slot.mjs";
+import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
+import { dialogContentClassNames as a, dialogFooterClassNames as o, dialogTitleClassNames as s } from "../../lib/classNames.mjs";
+import { useId as c } from "../../hooks/useId.mjs";
+import { useMergedRefs as l } from "../../hooks/useMergedRefs.mjs";
+import { useIsClient as u } from "../../hooks/useIsClient.mjs";
+import { usePresence as d } from "../../hooks/usePresence.mjs";
+import { Portal as f } from "../portal/Portal.mjs";
+import { getTabbableThrough as p, usePopoverTabOrder as m } from "./Popover.shared.mjs";
+import { ModalSurfaceContext as h, inertModalTrigger as g, useBackdropPress as ee, useModalClosePart as _, useModalDismiss as te, useModalOpenState as v, useModalOpener as ne, useModalTitle as y, useModalTrigger as b, useModalTriggerPart as re, useModalTriggerSession as x, useOpenInsideWarning as ie, useRaiseOnOpen as ae, useRequiredContext as S, useTitleRegistry as oe, useUnnamedModalWarning as se } from "./Dialog.shared.mjs";
+import { useModalLayer as ce } from "../../hooks/useModalLayer.mjs";
+import { ModalBackdrop as le, ModalCloseButton as ue } from "./Dialog.slots.mjs";
+import * as C from "react";
+import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { createPortal as D } from "react-dom";
 //#region src/components/overlays/Dialog.tsx
-var k = E.createContext(null);
-k.displayName = "DialogContext";
-var A = {
+var O = C.createContext(null);
+O.displayName = "DialogContext";
+var k = {
 	open: !1,
 	requestOpen: () => {},
 	modalType: "modal",
-	trigger: m,
+	trigger: g,
 	finalFocusRef: void 0,
+	unmountOnClose: !0,
 	contentId: void 0,
 	registerContentId: () => () => {}
 };
-function j(e) {
-	return C(k, e, "Dialog", () => A);
+function A(e) {
+	return S(O, e, "Dialog", () => k);
 }
-var M = ({ open: e, defaultOpen: t, onOpenChange: n, modalType: r = "modal", finalFocusRef: i, children: a }) => {
-	let [o, s] = v(e, t, n), l = c(), u = o && l, d = b();
-	S(d, u);
-	let [f, p] = E.useState(void 0), m = E.useCallback((e) => (p(e), () => p((t) => t === e ? void 0 : t)), []), h = E.useMemo(() => ({
-		open: u,
-		requestOpen: s,
+var j = ({ open: e, defaultOpen: t, onOpenChange: n, modalType: r = "modal", finalFocusRef: i, unmountOnClose: a = !0, children: o }) => {
+	let [s, c] = v(e, t, n), l = u(), d = s && l, f = b();
+	x(f, d);
+	let [p, m] = C.useState(void 0), h = C.useCallback((e) => (m(e), () => m((t) => t === e ? void 0 : t)), []), g = C.useMemo(() => ({
+		open: d,
+		requestOpen: c,
 		modalType: r,
-		trigger: d,
+		trigger: f,
 		finalFocusRef: i,
-		contentId: f,
-		registerContentId: m
+		unmountOnClose: a,
+		contentId: p,
+		registerContentId: h
 	}), [
-		u,
-		s,
-		r,
 		d,
-		i,
+		c,
+		r,
 		f,
-		m
+		i,
+		a,
+		p,
+		h
 	]);
-	return /* @__PURE__ */ D(k.Provider, {
-		value: h,
-		children: a
+	return /* @__PURE__ */ T(O.Provider, {
+		value: g,
+		children: o
 	});
 };
-M.displayName = "Dialog";
-var N = (e) => {
-	let { open: t, requestOpen: n, trigger: r, contentId: i } = j("Dialog.Trigger");
-	return x({
+j.displayName = "Dialog";
+var M = (e) => {
+	let { open: t, requestOpen: n, trigger: r, contentId: i } = A("Dialog.Trigger");
+	return re({
 		open: t,
 		requestOpen: n,
 		trigger: r,
 		controlsId: i
 	}, e, "Dialog.Trigger");
 };
-N.displayName = "DialogTrigger";
-var P = (e) => {
-	let { requestOpen: t } = j("Dialog.Close");
-	return g(t, e, "Dialog.Close");
+M.displayName = "DialogTrigger";
+var N = (e) => {
+	let { requestOpen: t } = A("Dialog.Close");
+	return _(t, e, "Dialog.Close");
 };
-P.displayName = "DialogClose";
-var F = {
+N.displayName = "DialogClose";
+var de = {
 	small: "max-w-[400px]",
-	medium: "max-w-[600px]"
-}, I = ({ title: t, size: i = "medium", closeLabel: c = "Close", children: m, className: g, id: v, ref: y, ...b }) => {
-	let { open: x, requestOpen: S, modalType: C, trigger: k, finalFocusRef: A, registerContentId: M } = j("Dialog.Content"), N = o("wave-dialog"), P = v ?? N, I = o("wave-dialog-title"), L = w(), [R, z] = E.useState(null), B = E.useRef(null), V = E.useCallback((e) => {
-		B.current = e, z(e);
-	}, []), H = E.useCallback((e) => e ? M(P) : void 0, [M, P]), U = s(y, V, H), W = C !== "alert", G = h(B, W), K = _(S, "Dialog", G.afterOutsidePress), q = f({
-		open: x,
-		onDismiss: K,
-		refs: [B],
-		outsidePress: W,
-		container: R,
-		triggerRef: k.focusRef,
-		finalFocusRef: A
+	medium: "max-w-[600px]",
+	large: "max-w-[940px]",
+	full: "m-0 h-dvh max-h-none max-w-none rounded-none border-0 pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))] pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]"
+}, fe = "top-[max(1rem,env(safe-area-inset-top))] end-[max(1rem,env(safe-area-inset-right))] wave-rtl:end-[max(1rem,env(safe-area-inset-left))]", pe = 8, me = "Dialog.Content:backdrop-ignored", he = "Dialog.Content: `backdrop` is ignored with `modalType=\"non-modal\"`: a non-modal dialog has no backdrop, so the page behind it stays usable.", ge = "Dialog.Content:non-modal-full", _e = "Dialog.Content: `size=\"full\"` with `modalType=\"non-modal\"` covers the whole page while leaving it usable, so Tab reaches controls hidden behind the dialog. Use `modalType=\"modal\"`, or a smaller size with the page's controls kept clear of it.";
+function ve(e) {
+	let [t, n] = C.useState(null);
+	return C.useLayoutEffect(() => {
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver((t) => {
+			let r = t[t.length - 1];
+			r && n(r.borderBoxSize?.[0]?.inlineSize ?? e.offsetWidth);
+		});
+		return t.observe(e, { box: "border-box" }), () => {
+			t.disconnect(), n(null);
+		};
+	}, [e]), t;
+}
+var P = ({ title: o, size: u = "medium", backdrop: g, closeButton: _, titleAction: v, closeLabel: y = "Close", children: b, className: re, style: x, id: S, onKeyDown: w, ref: D, ...O }) => {
+	let { open: k, requestOpen: j, modalType: M, trigger: N, finalFocusRef: P, unmountOnClose: F, registerContentId: I } = A("Dialog.Content"), { isMounted: L, ref: R, presenceProps: z } = d(k, { unmountOnExit: F }), B = !F, ye = c("wave-dialog"), V = S ?? ye, H = c("wave-dialog-title"), U = oe(), [W, be] = C.useState(null), G = C.useRef(null), xe = C.useCallback((e) => {
+		G.current = e, be(e);
+	}, []), Se = C.useCallback((e) => e ? I(V) : void 0, [I, V]), Ce = l(D, xe, Se, R), K = C.useRef(null);
+	ae(k, B, K);
+	let q = ee(G, M !== "alert"), we = te(j, "Dialog", q.afterOutsidePress), J = ce({
+		open: k,
+		modalType: M,
+		onDismiss: we,
+		refs: [G],
+		container: W,
+		triggerRef: N.focusRef,
+		finalFocusRef: P
+	}), Y = M === "non-modal", Te = ne(k, N, W), Ee = m({
+		enabled: k && Y,
+		surface: W,
+		anchorRef: Te,
+		getPreviousStop: p
 	});
-	T(x ? R : null, L.hasTitle, "Dialog.Content", "Dialog.Title");
-	let [J, Y] = E.useState(null), X = E.useMemo(() => ({
-		...L.context,
-		setFooterHeight: Y
-	}), [L.context]);
-	if (!x) return null;
-	let Z = n(t);
-	return /* @__PURE__ */ D(l, {
-		layerId: q.layerId,
-		children: /* @__PURE__ */ D("div", {
-			className: e(r.backdrop, "fixed inset-0 flex items-center justify-center bg-backdrop"),
-			onMouseDown: G.onMouseDown,
-			children: /* @__PURE__ */ D("div", {
-				ref: U,
-				role: C === "alert" ? "alertdialog" : "dialog",
-				id: P,
-				"aria-labelledby": Z ? I : L.titleId,
+	se(k ? W : null, U.hasTitle, "Dialog.Content", "Dialog.Title"), ie(k, B, J.layerId, "Dialog");
+	let X = Y && g != null && typeof g != "boolean";
+	C.useEffect(() => {
+		X && t(me, he);
+	}, [X]);
+	let Z = k && Y && u === "full";
+	C.useEffect(() => {
+		Z && t(ge, _e);
+	}, [Z]);
+	let [De, Oe] = C.useState(null), [Q, ke] = C.useState(null), $ = ve(k ? De : null), [Ae, je] = C.useState(null), Me = C.useMemo(() => ({
+		...U.context,
+		setFooterHeight: je,
+		titleActionsOutlet: Q
+	}), [U.context, Q]);
+	if (!L) return null;
+	let Ne = r(o), Pe = $ === null ? void 0 : $ > 0 ? `${$ + pe}px` : "0px", Fe = Pe === void 0 ? x : {
+		"--wave-dialog-title-end-padding": Pe,
+		...x
+	};
+	return /* @__PURE__ */ E(f, {
+		ref: K,
+		layerId: J.layerId,
+		children: [!Y && /* @__PURE__ */ T(le, {
+			backdrop: g,
+			className: a.backdrop,
+			layerId: J.layerId,
+			open: k,
+			onMouseDown: q.onMouseDown,
+			presenceProps: z
+		}), /* @__PURE__ */ T("div", {
+			...z,
+			className: e(a.positioner, "pointer-events-none fixed inset-0 flex items-center justify-center"),
+			children: /* @__PURE__ */ T("div", {
+				ref: Ce,
+				role: M === "alert" ? "alertdialog" : "dialog",
+				id: V,
+				"aria-labelledby": Ne ? H : U.titleId,
 				tabIndex: -1,
-				"data-modal-type": C,
-				...b,
-				className: e(r.root, "relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64", F[i], g),
-				children: /* @__PURE__ */ O(p.Provider, {
-					value: X,
+				"data-modal-type": M,
+				"data-size": u,
+				...O,
+				"data-presence": z["data-presence"],
+				style: Fe,
+				onKeyDown: i(w, Ee),
+				className: e(a.root, "pointer-events-auto relative m-4 flex min-w-0 max-h-[calc(100dvh-2rem)] w-full flex-col rounded-lg border border-border bg-background p-6 text-foreground shadow-64", de[u], re),
+				children: /* @__PURE__ */ E(h.Provider, {
+					value: Me,
 					children: [
-						Z && /* @__PURE__ */ D("h2", {
-							id: I,
-							className: e(a.root, "pe-8 text-subtitle-1 font-semibold"),
-							children: t
+						Ne && /* @__PURE__ */ T("h2", {
+							id: H,
+							className: e(s.root, "pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold"),
+							children: o
 						}),
-						/* @__PURE__ */ D(u, {
-							appearance: "subtle",
-							size: "small",
-							icon: /* @__PURE__ */ D(d, {}),
-							"aria-label": c,
-							onClick: (e) => S(!1, {
-								reason: "close-button",
-								event: e.nativeEvent
-							}),
-							className: e(r.closeButton, "absolute end-4 top-4 text-muted-foreground")
+						/* @__PURE__ */ E("div", {
+							ref: Oe,
+							className: e(a.titleActions, "absolute end-4 top-4 flex items-start gap-1", u === "full" && fe),
+							children: [
+								r(v) ? n(v, "span", e(a.titleAction, "inline-flex items-center gap-1")) : null,
+								/* @__PURE__ */ T("span", {
+									ref: ke,
+									className: "contents"
+								}),
+								/* @__PURE__ */ T(ue, {
+									componentName: "Dialog.Content",
+									closeButton: _,
+									closeLabel: y,
+									onClose: (e) => j(!1, {
+										reason: "close-button",
+										event: e
+									}),
+									className: e(a.closeButton, "text-muted-foreground")
+								})
+							]
 						}),
-						/* @__PURE__ */ D("div", {
-							className: e(r.body, "-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1"),
-							style: J === null ? void 0 : { "--wave-dialog-footer-height": `${J}px` },
-							children: m
+						/* @__PURE__ */ T("div", {
+							className: e(a.body, "-mx-1 mt-1 min-h-0 flex-1 overflow-y-auto scroll-pb-(--wave-dialog-footer-height) p-1 text-body-1"),
+							style: Ae === null ? void 0 : { "--wave-dialog-footer-height": `${Ae}px` },
+							children: b
 						})
 					]
 				})
 			})
-		})
+		})]
 	});
 };
-I.displayName = "DialogContent";
-var L = ({ id: t, className: n, children: r, ref: i, ...o }) => {
-	let { id: s, ref: c } = y("Dialog.Title", "Dialog.Content", t, i);
-	return /* @__PURE__ */ D("h2", {
-		...o,
-		id: s,
-		ref: c,
-		className: e(a.root, "pe-8 text-subtitle-1 font-semibold text-foreground", n),
-		children: r
+P.displayName = "DialogContent";
+var F = ({ id: t, action: i, className: a, children: o, ref: c, ...l }) => {
+	let { id: u, ref: d } = y("Dialog.Title", "Dialog.Content", t, c), f = C.useContext(h)?.titleActionsOutlet, p = /* @__PURE__ */ T("h2", {
+		...l,
+		id: u,
+		ref: d,
+		className: e(s.root, "pe-[var(--wave-dialog-title-end-padding,2rem)] text-subtitle-1 font-semibold text-foreground", a),
+		children: o
 	});
+	if (!r(i)) return p;
+	let m = n(i, "span", e(s.action, "inline-flex items-center gap-1"));
+	return /* @__PURE__ */ E(w, { children: [p, f === void 0 ? m : f && D(m, f)] });
 };
-L.displayName = "DialogTitle";
-var R = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3", z = "mt-6 flex justify-end gap-2", B = ({ children: n, className: r, ref: a, ...o }) => {
-	let c = E.useContext(p), l = c === null, u = c?.setFooterHeight, [d, f] = E.useState(null), m = s(a, f);
-	return E.useEffect(() => {
-		l && t("Dialog.Footer:outside-content", "Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.");
-	}, [l]), E.useLayoutEffect(() => {
+F.displayName = "DialogTitle";
+var I = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-background px-1 pb-2 pt-3", L = "mt-6 flex justify-end gap-2", R = ({ children: n, className: r, ref: i, ...a }) => {
+	let s = C.useContext(h), c = s === null, u = s?.setFooterHeight, [d, f] = C.useState(null), p = l(i, f);
+	return C.useEffect(() => {
+		c && t("Dialog.Footer:outside-content", "Dialog.Footer must be rendered inside Dialog.Content. Outside it, the footer stays on the page while the dialog is closed.");
+	}, [c]), C.useLayoutEffect(() => {
 		if (!d || !u || typeof ResizeObserver > "u") return;
 		let e = new ResizeObserver((e) => {
 			let t = e[e.length - 1];
@@ -160,22 +225,22 @@ var R = "sticky -bottom-1 z-10 -mx-1 -mb-1 mt-6 flex justify-end gap-2 bg-backgr
 		return e.observe(d, { box: "border-box" }), () => {
 			e.disconnect(), u(null);
 		};
-	}, [d, u]), /* @__PURE__ */ D("div", {
-		ref: m,
-		...o,
-		className: e(i.root, u ? R : z, r),
+	}, [d, u]), /* @__PURE__ */ T("div", {
+		ref: p,
+		...a,
+		className: e(o.root, u ? I : L, r),
 		children: n
 	});
 };
-B.displayName = "DialogFooter";
-var V = /* @__PURE__ */ Object.assign(M, {
-	Trigger: N,
-	Content: I,
-	Footer: B,
-	Title: L,
-	Close: P
+R.displayName = "DialogFooter";
+var z = /* @__PURE__ */ Object.assign(j, {
+	Trigger: M,
+	Content: P,
+	Footer: R,
+	Title: F,
+	Close: N
 });
 //#endregion
-export { V as Dialog, P as DialogClose, I as DialogContent, B as DialogFooter, L as DialogTitle, N as DialogTrigger };
+export { z as Dialog, N as DialogClose, P as DialogContent, R as DialogFooter, F as DialogTitle, M as DialogTrigger };
 
 //# sourceMappingURL=Dialog.mjs.map