@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/overlays/dialog/index.tsx

@@ -1,451 +0,0 @@
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/base/dialog.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` directive dropped (no RSC here).
- * - `framer-motion` → `motion/react`; `@/lib/{utils,icon-context,springs,shape-context,
- *   size-context,surface-context,surface-classes}` rewritten to `../../../lib/*`;
- *   `@/components/ui/button` → `../../button`.
- * - `DialogProps`: every member re-declared with the FF docs API-table text (modo's parser
- *   lists only members declared in the interface body and needs a description on each);
- *   same for `DialogSlotProps` and `DialogContentProps`.
- * - modo item: TSDoc (from the FF "Dialog" docs page) on the root `Dialog`, the compound
- *   statics attached as `Dialog.Trigger = …` (expando properties, so TypeScript types
- *   `<Dialog.Content>` without a cast and modo's check-items sees them), upstream's named
- *   exports kept, and a default export.
- * - FF's "With a sidebar" docs example is not ported: Sidebar is omitted from this port.
- *   A "Surfaces inside a dialog" example (a Select popover lifting off the dialog's own
- *   level) stands in for it — it makes the same point the sidebar dialog made about
- *   composing inside an `xl` panel, using only items this port ships.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[Npx]` →
- *   `text-<role>[-compact]`; inline `fontVariationSettings` and `font-bold`
- *   → `weight-*`; the `bg-black/40` / `dark:bg-black/80` backdrop → `bg-scrim`.
- * - The panel morphs out of its trigger through the shared morph layer
- *   (`lib/use-morph.ts` + `MorphSurface`, goo by default on `spring.goo`;
- *   `Dialog.Content` takes `from` / `effect` / `hideSource` / `tier`), and the
- *   backdrop's opacity follows the morph's progress. The popup is a
- *   transparent, centered box; its level is painted by the morph's surface
- *   layers and the padding sits on their content box. `Dialog` holds the open
- *   state itself (`useControllableState`) to feed the morph, and scopes
- *   `Morph.Part` pairs to the dialog.
- * - The trigger / close slot shape moved to `lib/slot.ts`, shared with the
- *   other overlays.
- * - `onOpenChange(open, details)` hears Base UI's change details (`reason`,
- *   `event`, `cancel()`), as Popover does: the handler runs before the state
- *   changes, so `details.cancel()` keeps the dialog as it is (emulates
- *   Radix's `onEscapeKeyDown` / `onPointerDownOutside` / `onInteractOutside`).
- * - `Dialog` takes `disablePointerDismissal`; `Dialog.Content` types and
- *   forwards `initialFocus` / `finalFocus` to the popup (a custom
- *   `finalFocus` turns the morph's own focus return off) and takes
- *   `popupClassName`, merged after the popup's width classes.
- *   One-argument handlers keep working. `DialogState` reports through it for
- *   AlertDialog, Sheet and Command too; `createDialogChangeDetails` builds
- *   the same shape for a change the library makes itself.
- */
-
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
-import { motion } from 'motion/react'
-import {
-  type ComponentProps,
-  createContext,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-  type RefObject,
-  useContext,
-  useId,
-  useImperativeHandle,
-  useMemo,
-} from 'react'
-import { useIcon } from '../../../lib/icon-context'
-import { MorphSurface } from '../../../lib/morph-layers'
-import { MorphPartScope } from '../../../lib/morph-part'
-import { useShape } from '../../../lib/shape-context'
-import { useSize, useSizeVariant } from '../../../lib/size-context'
-import { type SlotProps, slotId, slotRender } from '../../../lib/slot'
-import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
-import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
-import { useControllableState } from '../../../lib/use-controllable-state'
-import { type MorphOrigin, useMorph, useMorphOrigin } from '../../../lib/use-morph'
-import { cn } from '../../../lib/utils'
-import { Button } from '../../button'
-
-const DIALOG_OFFSET = 4
-
-type DialogSlotProps = SlotProps
-
-const DialogContext = createContext<{ open: boolean; origin: RefObject<MorphOrigin> }>({
-  open: false,
-  origin: { current: {} },
-})
-
-/** The open state and origin `DialogState` provides, for content built on another Base UI popup (Sheet). */
-const useDialogState = () => useContext(DialogContext)
-
-const DialogTrigger = forwardRef<HTMLButtonElement, DialogSlotProps>(({ render, asChild, children, ...props }, ref) => {
-  const el = slotRender(render, asChild, children)
-  return el ? (
-    <DialogPrimitive.Trigger ref={ref} render={el} {...props} id={slotId(el, props.id)} />
-  ) : (
-    <DialogPrimitive.Trigger ref={ref} {...props}>
-      {children}
-    </DialogPrimitive.Trigger>
-  )
-})
-DialogTrigger.displayName = 'DialogTrigger'
-
-const DialogClose = forwardRef<HTMLButtonElement, DialogSlotProps>(({ render, asChild, children, ...props }, ref) => {
-  const el = slotRender(render, asChild, children)
-  return el ? (
-    <DialogPrimitive.Close ref={ref} render={el} {...props} />
-  ) : (
-    <DialogPrimitive.Close ref={ref} {...props}>
-      {children}
-    </DialogPrimitive.Close>
-  )
-})
-DialogClose.displayName = 'DialogClose'
-
-interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
-  /** Width: 400, 540, or 880. Compact regions narrow each by 1 notch: 360,
-   *  480, 800. `xl` is the canvas for composed layouts — a sidebar beside a
-   *  panel — which usually pair it with `className="p-0"` and a fixed
-   *  height. Defaults to `"sm"`. */
-  size?: 'sm' | 'lg' | 'xl'
-  /** Portal target. When set, the overlay and panel render inside this element
-   *  (positioned `absolute`) instead of covering the viewport (`fixed`). Pair
-   *  with a `position: relative; overflow: hidden` container — and usually
-   *  `<Dialog modal={false}>` — to scope a dialog to a bounded region, e.g. a
-   *  docs preview. Defaults to the document body / full-viewport behaviour. */
-  container?: HTMLElement | null
-  /** The ✕ in the top-right corner. Drop it when the content has its own
-   *  way out, e.g. a command menu that closes on Escape and on a pick.
-   *  Defaults to `true`. */
-  showCloseButton?: boolean
-  /** Where the panel sits: centered, or anchored 12dvh from the top so a
-   *  panel whose height follows its content (a command menu) keeps its top
-   *  edge still. Defaults to `"center"`. */
-  position?: 'center' | 'top'
-  /** Where the panel grows from (see Morph): the pressed trigger (its center when none), the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
-  tier?: 'moderate' | 'slow'
-  /** Where focus goes when the dialog opens: a ref, `false` to leave it, `true` for the default, or a function of how it opened (`'mouse'`, `'touch'`, `'pen'`, `'keyboard'`). Defaults to the first tabbable element in the panel. */
-  initialFocus?: DialogPopupProps['initialFocus']
-  /** Where focus goes when the dialog closes: a ref, `false` to leave it, `true` for the default, or a function of how it closed. Defaults to the trigger. */
-  finalFocus?: DialogPopupProps['finalFocus']
-  /** Classes for the positioned popup box around the surface, merged after its width (`w-[calc(100%-2rem)]` capped by `size`), so `w-max` or `max-w-[60rem]` sizes the panel. `className` styles the surface's content box. */
-  popupClassName?: string
-  /** Dialog content. Everything inside reads the dialog's surface level as its substrate. */
-  children?: ReactNode
-}
-
-type DialogPopupProps = ComponentProps<typeof DialogPrimitive.Popup>
-
-const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  (
-    {
-      className,
-      children,
-      size = 'sm',
-      container,
-      showCloseButton = true,
-      position = 'center',
-      from,
-      effect,
-      hideSource,
-      tier,
-      initialFocus,
-      finalFocus,
-      popupClassName,
-      ...props
-    },
-    ref,
-  ) => {
-    const XIcon = useIcon('x')
-    const shape = useShape()
-    const substrate = useSurface()
-    const dialogLevel = Math.min(substrate + DIALOG_OFFSET, 8)
-    // The size ladder narrows the dialog one notch in compact regions —
-    // width only, the padding stays put (see Sizes).
-    const compact = useSize().variant === 'compact'
-    const { open, origin } = useDialogState()
-    const morph = useMorph(open, origin, {
-      from,
-      effect,
-      hideSource,
-      tier,
-      // A custom `finalFocus` places focus itself; the morph's own return
-      // to the trigger would undo it.
-      returnFocus: typeof finalFocus === 'boolean' ? finalFocus : finalFocus === undefined,
-    })
-    useImperativeHandle(ref, () => morph.popup as HTMLDivElement, [morph.popup])
-
-    return (
-      <DialogPrimitive.Portal container={container ?? undefined}>
-        <DialogPrimitive.Backdrop
-          render={<motion.div style={{ opacity: morph.progress }} />}
-          className={cn(container ? 'absolute' : 'fixed', 'inset-0 z-50 bg-scrim')}
-        />
-        <DialogPrimitive.Popup
-          ref={morph.popupRef}
-          {...props}
-          initialFocus={initialFocus}
-          finalFocus={finalFocus}
-          className={cn(
-            container ? 'absolute' : 'fixed',
-            'left-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 focus:outline-none',
-            position === 'top' ? 'top-[12dvh]' : 'top-1/2 -translate-y-1/2',
-            size === 'sm' && (compact ? 'max-w-[360px]' : 'max-w-[400px]'),
-            size === 'lg' && (compact ? 'max-w-[480px]' : 'max-w-[540px]'),
-            size === 'xl' && (compact ? 'max-w-[800px]' : 'max-w-[880px]'),
-            popupClassName,
-          )}
-        >
-          <SurfaceProvider value={dialogLevel}>
-            <MorphSurface
-              morph={morph}
-              bg={SURFACE_BG[dialogLevel]}
-              shadow={SURFACE_SHADOW[dialogLevel]}
-              radius={shape.container}
-              className={cn('p-6', className)}
-            >
-              {children}
-              {showCloseButton && (
-                <DialogPrimitive.Close
-                  render={
-                    <Button variant="ghost" size="icon-sm" className="absolute right-3 top-3">
-                      <XIcon />
-                      <span className="sr-only">Close</span>
-                    </Button>
-                  }
-                />
-              )}
-            </MorphSurface>
-          </SurfaceProvider>
-        </DialogPrimitive.Popup>
-      </DialogPrimitive.Portal>
-    )
-  },
-)
-DialogContent.displayName = 'DialogContent'
-
-function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('flex flex-col gap-1.5 mb-4', className)} {...props} />
-}
-
-function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('flex justify-end gap-2 mt-6', className)} {...props} />
-}
-
-const DialogTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => {
-    // The title role of the type scale — see Sizes.
-    const compact = useSizeVariant() === 'compact'
-    return (
-      <DialogPrimitive.Title
-        ref={ref}
-        className={cn(
-          compact ? 'text-title-compact' : 'text-title',
-          'weight-bold text-foreground leading-tight',
-          className,
-        )}
-        {...props}
-      />
-    )
-  },
-)
-DialogTitle.displayName = 'DialogTitle'
-
-const DialogDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => {
-    const compact = useSizeVariant() === 'compact'
-    return (
-      <DialogPrimitive.Description
-        ref={ref}
-        className={cn(compact ? 'text-body-compact' : 'text-body', 'text-muted-foreground', className)}
-        {...props}
-      />
-    )
-  },
-)
-DialogDescription.displayName = 'DialogDescription'
-
-/** What `onOpenChange` receives besides the open state: Base UI's Dialog change details. */
-type DialogOpenChangeDetails = DialogPrimitive.Root.ChangeEventDetails
-
-/** The part of Base UI's change details `DialogState` reads; Drawer's and AlertDialog's fit too. */
-interface OpenChangeDetailsLike {
-  isCanceled: boolean
-  trigger?: Element
-  event?: Event
-}
-
-/**
- * Change details in Base UI's shape for a change the library makes itself (an
- * AlertDialog action closing it, Command's hotkey), so `onOpenChange` handlers
- * always get `reason`, `event` and a working `cancel()`.
- */
-function createDialogChangeDetails(
-  reason: DialogOpenChangeDetails['reason'],
-  event: Event = new Event('change'),
-  trigger?: Element,
-): DialogOpenChangeDetails {
-  const details = {
-    reason,
-    event,
-    trigger,
-    isCanceled: false,
-    isPropagationAllowed: false,
-    cancel: () => {
-      details.isCanceled = true
-    },
-    allowPropagation: () => {
-      details.isPropagationAllowed = true
-    },
-    preventUnmountOnClose: () => {},
-  }
-  return details as DialogOpenChangeDetails
-}
-
-interface DialogStateProps<Details extends OpenChangeDetailsLike> {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean, details: Details) => void
-  children: (root: { open: boolean; onOpenChange: (next: boolean, details: Details) => void }) => ReactNode
-}
-
-/**
- * A dialog's open state, held here (not in Base UI's Root) because the morph
- * reads it, and the open event tells it which trigger was pressed. Also
- * scopes `Morph.Part` pairs. AlertDialog, Sheet and Command share it.
- */
-function DialogState<Details extends OpenChangeDetailsLike>({
-  open,
-  defaultOpen = false,
-  onOpenChange,
-  children,
-}: DialogStateProps<Details>) {
-  // The change is reported here, not through the state hook, so the handler
-  // gets Base UI's details and can cancel it.
-  const [current, setCurrent] = useControllableState(open, defaultOpen)
-  const { origin, capture } = useMorphOrigin()
-  const id = useId()
-  const ctx = useMemo(() => ({ open: current, origin }), [current, origin])
-  const parts = useMemo(() => ({ id, open: current }), [id, current])
-
-  return (
-    <DialogContext.Provider value={ctx}>
-      <MorphPartScope.Provider value={parts}>
-        {children({
-          open: current,
-          onOpenChange: (next, details) => {
-            if (next === current) return
-            onOpenChange?.(next, details)
-            if (details.isCanceled) return
-            if (next) capture(details)
-            setCurrent(next)
-          },
-        })}
-      </MorphPartScope.Provider>
-    </DialogContext.Provider>
-  )
-}
-
-interface DialogProps {
-  /** Controlled open state. */
-  open?: boolean
-  /** Initial open state, for an uncontrolled dialog. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the dialog opens or closes, with Base UI's change details: `reason` (`'escape-key'`, `'outside-press'`, `'trigger-press'`, `'close-press'`, …), the `event`, and `cancel()` to keep it as it is. */
-  onOpenChange?: (open: boolean, details: DialogOpenChangeDetails) => void
-  /** Traps focus and locks page scroll while open. Defaults to `true`. */
-  modal?: boolean
-  /** Ignore presses outside the panel: only Escape and the dialog's own closes dismiss it. Defaults to `false`. */
-  disablePointerDismissal?: boolean
-  /** The trigger and the content — `Dialog.Trigger` plus a `Dialog.Content`. */
-  children?: ReactNode
-}
-
-/**
- * 3 widths, grown out of whatever opened them.
- *
- * The panel lifts 4 surface levels off whatever substrate it opens on and
- * re-provides that level, so a dropdown or select inside it keeps climbing
- * the ladder instead of melting into the dialog. Width comes from
- * `Dialog.Content`'s `size` — 400, 540 or 880, each one notch narrower in
- * compact regions. The panel grows out of its trigger through the shared
- * morph (see Morph): goo by default on `spring.goo`, or from the press
- * point, its own center, a viewport edge or any element, and the backdrop
- * fades with it. `Morph.Part` pairs an element in the trigger with its twin
- * in the panel, so a card's image or title flies into the dialog.
- * `position="top"` anchors the panel 12dvh down so a content-sized panel (a
- * command menu) keeps its top edge still. Built on Base UI's Dialog: open
- * state is controlled with `open` / `onOpenChange` or left to `defaultOpen`.
- * `onOpenChange` hears why (`details.reason`) and can `details.cancel()` it,
- * e.g. to keep the dialog open on an outside press.
- *
- * Statics:
- * - `Dialog.Trigger` — the control that opens it. `render={<Button/>}` or
- *   Radix-style `asChild` with a single child both work.
- * - `Dialog.Content` — the panel: `size`, `position`, `showCloseButton`,
- *   `container`, `initialFocus`, `finalFocus`, `popupClassName` (sizes the
- *   popup box), and the morph options `from`, `effect`, `hideSource`,
- *   `tier`.
- * - `Dialog.Header` / `Dialog.Footer` — the stacked title block, and the
- *   right-aligned action row.
- * - `Dialog.Title` / `Dialog.Description` — the labelled heading and its
- *   supporting line, wired to the panel for screen readers.
- * - `Dialog.Close` — dismisses it; same `render` / `asChild` shape as the
- *   trigger. `Dialog.Content` renders its own ✕ unless
- *   `showCloseButton={false}`.
- *
- * @example {@include ./examples.mdx}
- */
-function Dialog({ children, open, defaultOpen, onOpenChange, modal, disablePointerDismissal }: DialogProps) {
-  return (
-    <DialogState open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {root => (
-        <DialogPrimitive.Root {...root} modal={modal} disablePointerDismissal={disablePointerDismissal}>
-          {children}
-        </DialogPrimitive.Root>
-      )}
-    </DialogState>
-  )
-}
-
-Dialog.Trigger = DialogTrigger
-Dialog.Content = DialogContent
-Dialog.Header = DialogHeader
-Dialog.Footer = DialogFooter
-Dialog.Title = DialogTitle
-Dialog.Description = DialogDescription
-Dialog.Close = DialogClose
-
-export type {
-  DialogContentProps,
-  DialogOpenChangeDetails,
-  DialogProps,
-  DialogSlotProps as DialogTriggerProps,
-  DialogSlotProps as DialogCloseProps,
-}
-export {
-  createDialogChangeDetails,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogState,
-  DialogTitle,
-  DialogTrigger,
-  useDialogState,
-}
-
-export default Dialog