@funstack/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/dialog/dialog-popup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-popup.mjs","names":[],"sources":["../../src/dialog/dialog-popup.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Activity,\n  startTransition,\n  useCallback,\n  useEffect,\n  useEffectEvent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogPopupState {\n  /** Committed open state (library mode); `false` in JS-free mode. Read `:open` for the DOM truth. */\n  readonly open: boolean;\n  readonly modal: boolean;\n}\n\nexport interface DialogPopupProps extends Omit<\n  ComponentPropsWithRef<\"dialog\">,\n  \"id\" | \"open\" | \"closedby\" | \"onToggle\" | \"onBeforeToggle\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Library mode: what happens to the children while the dialog is closed.\n   * - `false` (default): not rendered. Mounting them is part of the opening transition, so\n   *   content that suspends holds the open until it is ready. Unmount waits for the dialog's\n   *   exit animations.\n   * - `true`: rendered inside `<Activity mode=\"hidden\">`: DOM and state preserved, effects\n   *   stopped, pre-rendered at low priority. Not in the server HTML.\n   *\n   * Ignored in JS-free mode (always mounted).\n   */\n  keepMounted?: boolean;\n  /**\n   * Element to focus when the dialog opens: a ref, or a selector resolved inside the dialog.\n   * The library writes `autofocus` on it right before `showModal()` / `show()` and the platform\n   * focuses it. Default: the platform's choice (first focusable descendant; the dialog itself if\n   * none). Use `tabIndex={-1}` on a heading or wrapper for long or destructive dialogs (APG).\n   *\n   * In JS-free mode the browser opens the dialog itself, so the attribute is written after\n   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.\n   */\n  initialFocus?: RefObject<HTMLElement | null> | string;\n  /**\n   * Close on a click outside the dialog (on the backdrop for modal dialogs). Default `false`.\n   * Baseline: JS `pointerdown` + `click` listeners, which close only when both the press and the\n   * click land outside (a drag that starts inside, such as selecting text, never closes); with\n   * `experimental_closedBy`, native `closedby=\"any\"`, which behaves the same.\n   */\n  lightDismiss?: boolean;\n  /**\n   * Experimental (Chrome 134+, Firefox 141+; Safari 27.0 ignores it). Renders `closedby`\n   * (`\"any\"` when `lightDismiss`, else `\"closerequest\"`) and skips the JS dismiss listeners where\n   * `HTMLDialogElement.prototype.closedBy` exists. Elsewhere the JS baseline stays active.\n   * Default `false`.\n   */\n  experimental_closedBy?: boolean;\n  /**\n   * Library mode only. Forwarded to the `<ViewTransition default>` around the dialog. Animates\n   * the opening commit and content changes while open; the close is the browser's and animates\n   * with CSS. Ignored (dev warning) in JS-free mode.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, DialogPopupState>;\n  style?: StateValue<CSSProperties | undefined, DialogPopupState>;\n  children?: StateValue<ReactNode, DialogPopupState>;\n  /** Must render a `<dialog>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"dialog\">, DialogPopupState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Resolves `initialFocus` against the dialog (a ref, or a selector inside the dialog). */\nfunction resolveInitialFocus(\n  dialog: HTMLDialogElement,\n  initialFocus: RefObject<HTMLElement | null> | string,\n): HTMLElement | null {\n  if (typeof initialFocus === \"string\") return dialog.querySelector<HTMLElement>(initialFocus);\n  return initialFocus.current;\n}\n\n/** The nearest `<dialog>` around a node (the dialog itself counts). */\nfunction closestDialog(target: EventTarget | null): Element | null {\n  return target instanceof Element ? target.closest(\"dialog\") : null;\n}\n\n/**\n * An open popover that takes Escape before the dialog: `auto` or `hint` (they have a close\n * watcher). A `manual` popover, or `hint` where the engine maps it to `manual`, does not.\n */\nfunction isOpenLightPopover(element: Element): boolean {\n  if (!element.hasAttribute(\"popover\")) return false;\n  // The IDL attribute reflects the state the engine applies; jsdom has none.\n  const reflected: unknown = (element as HTMLElement).popover;\n  const state =\n    typeof reflected === \"string\" ? reflected : element.getAttribute(\"popover\")!.toLowerCase();\n  if (state === \"manual\") return false;\n  try {\n    return element.matches(\":popover-open\");\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Whether Escape belongs to a layer inside `dialog` that sits above it (design 9: \"closes the\n * innermost one only\"): the target is inside an open nested `<dialog>` or popover, or an open\n * `auto` / `hint` popover inside the dialog would take the close request (close watchers are\n * per document, not per focus).\n */\nfunction escapeBelongsToInnerLayer(dialog: HTMLDialogElement, target: EventTarget | null): boolean {\n  for (\n    let node = target instanceof Element ? target : null;\n    node !== null && node !== dialog;\n    node = node.parentElement\n  ) {\n    if (node instanceof HTMLDialogElement && node.open) return true;\n    if (isOpenLightPopover(node)) return true;\n  }\n  for (const element of dialog.querySelectorAll(\"[popover]\")) {\n    if (isOpenLightPopover(element)) return true;\n  }\n  return false;\n}\n\n/** Whether a pointer event on the dialog itself lies outside its border box (the `::backdrop`). */\nfunction onBackdrop(dialog: HTMLDialogElement, event: Event): boolean {\n  if (event.target !== dialog) return false;\n  const { clientX, clientY } = event as MouseEvent;\n  const rect = dialog.getBoundingClientRect();\n  return !(\n    rect.top <= clientY &&\n    clientY <= rect.bottom &&\n    rect.left <= clientX &&\n    clientX <= rect.right\n  );\n}\n\n/** An animation that ends: infinite ones (a spinner) would hold the content forever. */\nfunction ends(animation: Animation): boolean {\n  const end = animation.effect?.getComputedTiming().endTime;\n  return typeof end === \"number\" && Number.isFinite(end);\n}\n\n/**\n * The dialog itself: a `<dialog>` with the id the Trigger's `commandfor` names, wired to Title\n * and Description through `aria-labelledby` / `aria-describedby`. Never renders `open`: modal\n * opening and closing go through `showModal()` / `close()` only. Style it with `:open` and\n * `:modal`; it emits `data-modal` but no `data-open`.\n *\n * In library mode the children render from committed state, so content that suspends keeps the\n * dialog closed (and the Trigger pending) until it is ready; `showModal()` runs in the layout\n * effect of the commit that mounted them. Closing is the browser's: the native `close` event\n * becomes `openChangeAction(false, { reason, returnValue })`.\n *\n * Owned keys (conventions 1.2): `id`, `open`, `closedby`, `aria-labelledby` and\n * `aria-describedby` (token-merged), `data-modal`, `suppressHydrationWarning`.\n */\nexport function DialogPopup({\n  keepMounted,\n  initialFocus,\n  lightDismiss = false,\n  experimental_closedBy = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogPopupProps) {\n  const ctx = useDialogContext(\"Dialog.Popup\");\n  const isLibrary = ctx.mode === \"library\";\n  const { modal, ids, dialogRef, triggerRef } = ctx;\n  const [dialog, setDialog] = useState<HTMLDialogElement | null>(null);\n  // Children stay mounted while the dialog's exit animation runs (design 4.4).\n  const [exiting, setExiting] = useState(false);\n  const exitGeneration = useRef(0);\n  // Set by the synchronous `beforetoggle` of a close, cleared by the `close` event a task later:\n  // the dialog is closed but its notification is not dispatched yet, so the apply effect must\n  // not re-open it from a commit that lands in between.\n  const awaitingClose = useRef(false);\n  const warnedFocus = useRef(false);\n\n  useDevWarning(\n    !isLibrary && transition !== undefined,\n    \"Dialog.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the \" +\n      \"dialog outside any React transition. Animate it with CSS (`@starting-style`).\",\n  );\n  useDevWarning(\n    !isLibrary && keepMounted === false,\n    \"Dialog.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is \" +\n      \"always mounted so that the server HTML is complete.\",\n  );\n\n  const libraryRef = useCallback(\n    (element: HTMLDialogElement) => {\n      if (isDev && element.tagName !== \"DIALOG\") {\n        console.error(\n          `Dialog.Popup: expected to render a <dialog> element but got <${element.tagName.toLowerCase()}>. ` +\n            \"Top layer, backdrop, focus and Escape all come from a real <dialog>.\",\n        );\n      }\n      dialogRef.current = element;\n      setDialog(element);\n      return () => {\n        if (dialogRef.current === element) dialogRef.current = null;\n        setDialog(null);\n      };\n    },\n    [dialogRef],\n  );\n\n  // --- Opening -----------------------------------------------------------------------------\n\n  const openDialog = (element: HTMLDialogElement): void => {\n    let target: HTMLElement | null = null;\n    if (initialFocus !== undefined) {\n      target = resolveInitialFocus(element, initialFocus);\n      if (target === null || !element.contains(target)) {\n        if (isDev && !warnedFocus.current) {\n          warnedFocus.current = true;\n          console.error(\n            target === null\n              ? \"Dialog.Popup: `initialFocus` resolved to no element; the platform picks the focus target.\"\n              : \"Dialog.Popup: `initialFocus` is outside the dialog; the platform picks the focus target.\",\n          );\n        }\n        target = null;\n      }\n    }\n    // The platform's dialog focusing steps honour `autofocus`; React drops `autoFocus` on\n    // client-rendered content (react/react#23301). Never `.focus()` (design 6.1).\n    const added = target !== null && !target.hasAttribute(\"autofocus\");\n    if (added) target!.setAttribute(\"autofocus\", \"\");\n    try {\n      if (modal) element.showModal();\n      else element.show();\n    } finally {\n      if (added) target!.removeAttribute(\"autofocus\");\n    }\n  };\n\n  // Mount reconciliation (design 2.4): a click before hydration opened the dialog natively.\n  // Runs before the apply effect; the dispatch makes the apply effect wait for it.\n  const reconcileOnMount = useEffectEvent(() => {\n    const element = dialogRef.current;\n    if (element === null || !element.open) return;\n    ctx.requestOpen(undefined, \"platform\");\n  });\n  useLayoutEffect(() => {\n    if (isLibrary) reconcileOnMount();\n  }, [isLibrary]);\n\n  // The apply effect (design 2.5): after every commit, once nothing is in flight, the DOM\n  // follows committed state. Opens on the user's dispatch, `defaultOpen`, a controlled parent,\n  // the re-open of a refused or failed close; closes after a controlled close or a refused\n  // pre-hydration open.\n  useLayoutEffect(() => {\n    if (!isLibrary) return;\n    const element = dialogRef.current;\n    if (element === null || !element.isConnected) return;\n    if (ctx.pending || ctx.latestInFlight() !== null) return;\n    if (ctx.committed && !element.open) {\n      if (awaitingClose.current) return;\n      openDialog(element);\n    } else if (!ctx.committed && element.open) {\n      // An echo: the `close` listener finds nothing intended and skips the dispatch. `close()`,\n      // not `requestClose()`: a parent's close is not vetoable.\n      ctx.recordCloseIntent(undefined);\n      element.close();\n    }\n  });\n\n  // JS-free mode: there is no \"right before showModal()\" (the browser runs the command), so the\n  // `autofocus` attribute stays on the target while it is mounted.\n  useEffect(() => {\n    if (isLibrary || initialFocus === undefined || dialog === null) return;\n    const target = resolveInitialFocus(dialog, initialFocus);\n    if (target === null || !dialog.contains(target) || target.hasAttribute(\"autofocus\")) return;\n    target.setAttribute(\"autofocus\", \"\");\n    return () => target.removeAttribute(\"autofocus\");\n  }, [isLibrary, initialFocus, dialog]);\n\n  // --- Native listeners (conventions 7.4) ---------------------------------------------------\n\n  const onCommand = useEffectEvent((event: Event) => {\n    if (event.target !== dialogRef.current || event.defaultPrevented) return;\n    const command = String((event as Event & { command?: string }).command ?? \"\").toLowerCase();\n    if (command === \"show-modal\") {\n      // A foreign invoker (design 2.2): opening goes through the library in library mode.\n      if (!isLibrary) return;\n      event.preventDefault();\n      ctx.requestOpen(event, \"activate\");\n    } else if (command === \"request-close\" || command === \"close\") {\n      ctx.recordCloseIntent({ reason: \"activate\", event });\n    }\n  });\n\n  const onSubmit = useEffectEvent((event: Event) => {\n    const element = dialogRef.current;\n    const form = event.target;\n    if (element === null || !(form instanceof HTMLFormElement)) return;\n    if (form.closest(\"dialog\") !== element) return;\n    const submitter = (event as SubmitEvent).submitter;\n    const formMethod = submitter?.getAttribute(\"formmethod\");\n    const method = formMethod != null ? formMethod.toLowerCase() : form.method;\n    if (method !== \"dialog\") return;\n    ctx.recordCloseIntent({ reason: \"activate\", event });\n  });\n\n  const onClose = useEffectEvent((event: Event) => {\n    const element = dialogRef.current;\n    if (element === null || event.target !== element) return;\n    awaitingClose.current = false;\n\n    // Focus return is the platform's; it leaves focus inside the hidden dialog only when the\n    // opener is gone (design 6.2).\n    const doc = element.ownerDocument;\n    const active = doc.activeElement;\n    if (active !== null && active !== doc.body && element.contains(active)) {\n      const trigger = triggerRef.current;\n      if (trigger !== null && trigger.isConnected) trigger.focus();\n      else if (active instanceof HTMLElement) active.blur();\n    }\n\n    const intent = ctx.takeCloseIntent();\n    if (!isLibrary) return;\n\n    // Keep the children while the exit animation runs (design 4.4). Firefox has none.\n    if (element.isConnected && typeof element.getAnimations === \"function\") {\n      void getComputedStyle(element).opacity; // flush style so the exit transitions exist\n      const animations = element.getAnimations({ subtree: true }).filter(ends);\n      if (animations.length > 0) {\n        const generation = ++exitGeneration.current;\n        setExiting(true);\n        void Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {\n          if (exitGeneration.current === generation) startTransition(() => setExiting(false));\n        });\n      }\n    }\n\n    ctx.notifyClosed(intent?.event ?? event, intent?.reason ?? \"dismiss\", element.returnValue);\n  });\n\n  const onBeforeToggle = useEffectEvent((event: Event) => {\n    if (event.target !== dialogRef.current) return;\n    const newState = (event as ToggleEvent).newState;\n    awaitingClose.current = newState === \"closed\";\n  });\n\n  useEffect(() => {\n    if (dialog === null) return;\n    const doc = dialog.ownerDocument;\n    // Feature detection only with the flag on, inside an effect (conventions 8).\n    const nativeClosedBy = experimental_closedBy && \"closedBy\" in dialog;\n\n    const listeners: [EventTarget, string, EventListener, boolean][] = [\n      [dialog, \"command\", onCommand, false],\n      [dialog, \"submit\", onSubmit, false],\n      [dialog, \"close\", onClose, false],\n      [dialog, \"beforetoggle\", onBeforeToggle, false],\n    ];\n\n    if (!modal && !nativeClosedBy) {\n      // Non-modal dialogs get no close watcher Escape from the platform (design 2.6).\n      listeners.push([\n        dialog,\n        \"keydown\",\n        (event) => {\n          const keyboardEvent = event as KeyboardEvent;\n          if (keyboardEvent.key !== \"Escape\" || keyboardEvent.defaultPrevented) return;\n          if (!dialog.open || closestDialog(keyboardEvent.target) !== dialog) return;\n          // A popover or nested dialog inside takes this Escape (its close watcher); leave the\n          // event alone so that it can.\n          if (escapeBelongsToInnerLayer(dialog, keyboardEvent.target)) return;\n          keyboardEvent.preventDefault();\n          dialog.requestClose();\n        },\n        false,\n      ]);\n    }\n\n    // Light dismiss needs both the press and the click outside, like native `closedby=\"any\"`: a\n    // drag that starts inside (selecting text in an input) and ends on the backdrop or outside\n    // fires `click` on the common ancestor and must not close (it would lose a half-filled form).\n    let pressedOutside = false;\n\n    const isOutside = (target: EventTarget | null): boolean => {\n      if (!(target instanceof Node)) return true;\n      if (dialog.contains(target)) return false;\n      // The Trigger re-opening a non-modal dialog is not a click outside.\n      return !(triggerRef.current?.contains(target) ?? false);\n    };\n    let outsideAttached = false;\n    const onOutsidePointerDown = (event: Event) => {\n      pressedOutside = dialog.open && isOutside(event.target);\n    };\n    const onOutsideClick = (event: Event) => {\n      const pressed = pressedOutside;\n      pressedOutside = false;\n      if (!dialog.open || !pressed || !isOutside(event.target)) return;\n      dialog.requestClose();\n    };\n    const syncOutside = () => {\n      const want = dialog.open;\n      if (want === outsideAttached) return;\n      outsideAttached = want;\n      pressedOutside = false;\n      if (want) {\n        doc.addEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.addEventListener(\"click\", onOutsideClick, true);\n      } else {\n        doc.removeEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.removeEventListener(\"click\", onOutsideClick, true);\n      }\n    };\n\n    if (lightDismiss && !nativeClosedBy) {\n      if (modal) {\n        // A press or click on the ::backdrop targets the dialog itself, outside its border box.\n        listeners.push(\n          [\n            dialog,\n            \"pointerdown\",\n            (event) => {\n              pressedOutside = dialog.open && onBackdrop(dialog, event);\n            },\n            false,\n          ],\n          [\n            dialog,\n            \"click\",\n            (event) => {\n              const pressed = pressedOutside;\n              pressedOutside = false;\n              if (!dialog.open || !pressed || !onBackdrop(dialog, event)) return;\n              dialog.requestClose();\n            },\n            false,\n          ],\n        );\n      } else {\n        // A document listener only while open, following the native `toggle` (the React\n        // `onToggle` prop never fires on a hydrated <dialog>); reads `dialog.open`, not\n        // `newState` (coalescing).\n        listeners.push([dialog, \"toggle\", syncOutside, false]);\n        syncOutside();\n      }\n    }\n\n    for (const [target, type, listener, capture] of listeners) {\n      target.addEventListener(type, listener, capture);\n    }\n    return () => {\n      for (const [target, type, listener, capture] of listeners) {\n        target.removeEventListener(type, listener, capture);\n      }\n      if (outsideAttached) {\n        doc.removeEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.removeEventListener(\"click\", onOutsideClick, true);\n      }\n    };\n  }, [dialog, modal, lightDismiss, experimental_closedBy, triggerRef]);\n\n  // Development check: the dialog has an accessible name when it is (or can be) shown.\n  const shown = !isLibrary || ctx.committed;\n  useEffect(() => {\n    if (!isDev || dialog === null || !shown) return;\n    if (dialog.hasAttribute(\"aria-label\")) return;\n    const labelledBy = (dialog.getAttribute(\"aria-labelledby\") ?? \"\").split(/\\s+/);\n    const doc = dialog.ownerDocument;\n    if (labelledBy.some((id) => id !== \"\" && doc.getElementById(id) !== null)) return;\n    console.error(\n      \"Dialog.Popup: the dialog has no accessible name. Render a Dialog.Title, or give the \" +\n        \"Popup an `aria-label`.\",\n    );\n  }, [dialog, shown]);\n\n  const state: DialogPopupState = { open: ctx.committed, modal };\n  const visible = ctx.committed || exiting;\n\n  const content = (s: DialogPopupState): ReactNode => {\n    if (!isLibrary) return resolveStateValue(children, s);\n    if (keepMounted === true) {\n      // The mode changes with committed state, inside the Root's transition (conventions 5.5);\n      // it stays visible while an exit animation runs.\n      return (\n        <Activity mode={visible ? \"visible\" : \"hidden\"}>{resolveStateValue(children, s)}</Activity>\n      );\n    }\n    return visible ? resolveStateValue(children, s) : null;\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"dialog\"> & DataAttributes = {\n    id: ids.dialog,\n    // Never rendered: removing `open` by hand hides a modal dialog without `close` and leaves\n    // `:modal` true (research). Owned so a `render` element cannot add it.\n    open: undefined,\n    closedby: experimental_closedBy ? (lightDismiss ? \"any\" : \"closerequest\") : undefined,\n    \"aria-labelledby\": ids.title,\n    \"aria-describedby\": ids.description,\n    \"data-modal\": dataAttr(modal),\n    // A pre-hydration open leaves an `open` attribute the server did not render (design 2.4).\n    suppressHydrationWarning: true,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"dialog\">, DialogPopupState>({\n    defaultElement: \"dialog\",\n    render,\n    state,\n    className,\n    style,\n    children: content,\n    props: rest,\n    libraryProps,\n    ref: libraryRef,\n  });\n\n  return useTransitionBoundary(\"Dialog.Popup\", isLibrary ? transition : undefined, element);\n}\n\nDialogPopup.displayName = \"DialogPopup\";\n"],"mappings":";;;;;;;;;AAyFA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;AAGvC,SAAS,oBACP,QACA,cACoB;CACpB,IAAI,OAAO,iBAAiB,UAAU,OAAO,OAAO,cAA2B,YAAY;CAC3F,OAAO,aAAa;AACtB;;AAGA,SAAS,cAAc,QAA4C;CACjE,OAAO,kBAAkB,UAAU,OAAO,QAAQ,QAAQ,IAAI;AAChE;;;;;AAMA,SAAS,mBAAmB,SAA2B;CACrD,IAAI,CAAC,QAAQ,aAAa,SAAS,GAAG,OAAO;CAE7C,MAAM,YAAsB,QAAwB;CAGpD,KADE,OAAO,cAAc,WAAW,YAAY,QAAQ,aAAa,SAAS,CAAC,CAAE,YAAY,OAC7E,UAAU,OAAO;CAC/B,IAAI;EACF,OAAO,QAAQ,QAAQ,eAAe;CACxC,QAAQ;EACN,OAAO;CACT;AACF;;;;;;;AAQA,SAAS,0BAA0B,QAA2B,QAAqC;CACjG,KACE,IAAI,OAAO,kBAAkB,UAAU,SAAS,MAChD,SAAS,QAAQ,SAAS,QAC1B,OAAO,KAAK,eACZ;EACA,IAAI,gBAAgB,qBAAqB,KAAK,MAAM,OAAO;EAC3D,IAAI,mBAAmB,IAAI,GAAG,OAAO;CACvC;CACA,KAAK,MAAM,WAAW,OAAO,iBAAiB,WAAW,GACvD,IAAI,mBAAmB,OAAO,GAAG,OAAO;CAE1C,OAAO;AACT;;AAGA,SAAS,WAAW,QAA2B,OAAuB;CACpE,IAAI,MAAM,WAAW,QAAQ,OAAO;CACpC,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,OAAO,OAAO,sBAAsB;CAC1C,OAAO,EACL,KAAK,OAAO,WACZ,WAAW,KAAK,UAChB,KAAK,QAAQ,WACb,WAAW,KAAK;AAEpB;;AAGA,SAAS,KAAK,WAA+B;CAC3C,MAAM,MAAM,UAAU,QAAQ,kBAAkB,CAAC,CAAC;CAClD,OAAO,OAAO,QAAQ,YAAY,OAAO,SAAS,GAAG;AACvD;;;;;;;;;;;;;;;AAgBA,SAAgB,YAAY,EAC1B,aACA,cACA,eAAe,OACf,wBAAwB,OACxB,YACA,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,YAAY,IAAI,SAAS;CAC/B,MAAM,EAAE,OAAO,KAAK,WAAW,eAAe;CAC9C,MAAM,CAAC,QAAQ,aAAa,SAAmC,IAAI;CAEnE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,iBAAiB,OAAO,CAAC;CAI/B,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,cAAc,OAAO,KAAK;CAEhC,cACE,CAAC,aAAa,eAAe,KAAA,GAC7B,0KAEF;CACA,cACE,CAAC,aAAa,gBAAgB,OAC9B,4IAEF;CAEA,MAAM,aAAa,aAChB,YAA+B;EAC9B,IAAI,SAAS,QAAQ,YAAY,UAC/B,QAAQ,MACN,gEAAgE,QAAQ,QAAQ,YAAY,EAAE,wEAEhG;EAEF,UAAU,UAAU;EACpB,UAAU,OAAO;EACjB,aAAa;GACX,IAAI,UAAU,YAAY,SAAS,UAAU,UAAU;GACvD,UAAU,IAAI;EAChB;CACF,GACA,CAAC,SAAS,CACZ;CAIA,MAAM,cAAc,YAAqC;EACvD,IAAI,SAA6B;EACjC,IAAI,iBAAiB,KAAA,GAAW;GAC9B,SAAS,oBAAoB,SAAS,YAAY;GAClD,IAAI,WAAW,QAAQ,CAAC,QAAQ,SAAS,MAAM,GAAG;IAChD,IAAI,SAAS,CAAC,YAAY,SAAS;KACjC,YAAY,UAAU;KACtB,QAAQ,MACN,WAAW,OACP,8FACA,0FACN;IACF;IACA,SAAS;GACX;EACF;EAGA,MAAM,QAAQ,WAAW,QAAQ,CAAC,OAAO,aAAa,WAAW;EACjE,IAAI,OAAO,OAAQ,aAAa,aAAa,EAAE;EAC/C,IAAI;GACF,IAAI,OAAO,QAAQ,UAAU;QACxB,QAAQ,KAAK;EACpB,UAAU;GACR,IAAI,OAAO,OAAQ,gBAAgB,WAAW;EAChD;CACF;CAIA,MAAM,mBAAmB,qBAAqB;EAC5C,MAAM,UAAU,UAAU;EAC1B,IAAI,YAAY,QAAQ,CAAC,QAAQ,MAAM;EACvC,IAAI,YAAY,KAAA,GAAW,UAAU;CACvC,CAAC;CACD,sBAAsB;EACpB,IAAI,WAAW,iBAAiB;CAClC,GAAG,CAAC,SAAS,CAAC;CAMd,sBAAsB;EACpB,IAAI,CAAC,WAAW;EAChB,MAAM,UAAU,UAAU;EAC1B,IAAI,YAAY,QAAQ,CAAC,QAAQ,aAAa;EAC9C,IAAI,IAAI,WAAW,IAAI,eAAe,MAAM,MAAM;EAClD,IAAI,IAAI,aAAa,CAAC,QAAQ,MAAM;GAClC,IAAI,cAAc,SAAS;GAC3B,WAAW,OAAO;EACpB,OAAO,IAAI,CAAC,IAAI,aAAa,QAAQ,MAAM;GAGzC,IAAI,kBAAkB,KAAA,CAAS;GAC/B,QAAQ,MAAM;EAChB;CACF,CAAC;CAID,gBAAgB;EACd,IAAI,aAAa,iBAAiB,KAAA,KAAa,WAAW,MAAM;EAChE,MAAM,SAAS,oBAAoB,QAAQ,YAAY;EACvD,IAAI,WAAW,QAAQ,CAAC,OAAO,SAAS,MAAM,KAAK,OAAO,aAAa,WAAW,GAAG;EACrF,OAAO,aAAa,aAAa,EAAE;EACnC,aAAa,OAAO,gBAAgB,WAAW;CACjD,GAAG;EAAC;EAAW;EAAc;CAAM,CAAC;CAIpC,MAAM,YAAY,gBAAgB,UAAiB;EACjD,IAAI,MAAM,WAAW,UAAU,WAAW,MAAM,kBAAkB;EAClE,MAAM,UAAU,OAAQ,MAAuC,WAAW,EAAE,CAAC,CAAC,YAAY;EAC1F,IAAI,YAAY,cAAc;GAE5B,IAAI,CAAC,WAAW;GAChB,MAAM,eAAe;GACrB,IAAI,YAAY,OAAO,UAAU;EACnC,OAAO,IAAI,YAAY,mBAAmB,YAAY,SACpD,IAAI,kBAAkB;GAAE,QAAQ;GAAY;EAAM,CAAC;CAEvD,CAAC;CAED,MAAM,WAAW,gBAAgB,UAAiB;EAChD,MAAM,UAAU,UAAU;EAC1B,MAAM,OAAO,MAAM;EACnB,IAAI,YAAY,QAAQ,EAAE,gBAAgB,kBAAkB;EAC5D,IAAI,KAAK,QAAQ,QAAQ,MAAM,SAAS;EAExC,MAAM,aADa,MAAsB,WACX,aAAa,YAAY;EAEvD,KADe,cAAc,OAAO,WAAW,YAAY,IAAI,KAAK,YACrD,UAAU;EACzB,IAAI,kBAAkB;GAAE,QAAQ;GAAY;EAAM,CAAC;CACrD,CAAC;CAED,MAAM,UAAU,gBAAgB,UAAiB;EAC/C,MAAM,UAAU,UAAU;EAC1B,IAAI,YAAY,QAAQ,MAAM,WAAW,SAAS;EAClD,cAAc,UAAU;EAIxB,MAAM,MAAM,QAAQ;EACpB,MAAM,SAAS,IAAI;EACnB,IAAI,WAAW,QAAQ,WAAW,IAAI,QAAQ,QAAQ,SAAS,MAAM,GAAG;GACtE,MAAM,UAAU,WAAW;GAC3B,IAAI,YAAY,QAAQ,QAAQ,aAAa,QAAQ,MAAM;QACtD,IAAI,kBAAkB,aAAa,OAAO,KAAK;EACtD;EAEA,MAAM,SAAS,IAAI,gBAAgB;EACnC,IAAI,CAAC,WAAW;EAGhB,IAAI,QAAQ,eAAe,OAAO,QAAQ,kBAAkB,YAAY;GACtE,iBAAsB,OAAO,CAAC,CAAC;GAC/B,MAAM,aAAa,QAAQ,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI;GACvE,IAAI,WAAW,SAAS,GAAG;IACzB,MAAM,aAAa,EAAE,eAAe;IACpC,WAAW,IAAI;IACf,QAAa,WAAW,WAAW,KAAK,cAAc,UAAU,QAAQ,CAAC,CAAC,CAAC,WAAW;KACpF,IAAI,eAAe,YAAY,YAAY,sBAAsB,WAAW,KAAK,CAAC;IACpF,CAAC;GACH;EACF;EAEA,IAAI,aAAa,QAAQ,SAAS,OAAO,QAAQ,UAAU,WAAW,QAAQ,WAAW;CAC3F,CAAC;CAED,MAAM,iBAAiB,gBAAgB,UAAiB;EACtD,IAAI,MAAM,WAAW,UAAU,SAAS;EACxC,MAAM,WAAY,MAAsB;EACxC,cAAc,UAAU,aAAa;CACvC,CAAC;CAED,gBAAgB;EACd,IAAI,WAAW,MAAM;EACrB,MAAM,MAAM,OAAO;EAEnB,MAAM,iBAAiB,yBAAyB,cAAc;EAE9D,MAAM,YAA6D;GACjE;IAAC;IAAQ;IAAW;IAAW;GAAK;GACpC;IAAC;IAAQ;IAAU;IAAU;GAAK;GAClC;IAAC;IAAQ;IAAS;IAAS;GAAK;GAChC;IAAC;IAAQ;IAAgB;IAAgB;GAAK;EAChD;EAEA,IAAI,CAAC,SAAS,CAAC,gBAEb,UAAU,KAAK;GACb;GACA;IACC,UAAU;IACT,MAAM,gBAAgB;IACtB,IAAI,cAAc,QAAQ,YAAY,cAAc,kBAAkB;IACtE,IAAI,CAAC,OAAO,QAAQ,cAAc,cAAc,MAAM,MAAM,QAAQ;IAGpE,IAAI,0BAA0B,QAAQ,cAAc,MAAM,GAAG;IAC7D,cAAc,eAAe;IAC7B,OAAO,aAAa;GACtB;GACA;EACF,CAAC;EAMH,IAAI,iBAAiB;EAErB,MAAM,aAAa,WAAwC;GACzD,IAAI,EAAE,kBAAkB,OAAO,OAAO;GACtC,IAAI,OAAO,SAAS,MAAM,GAAG,OAAO;GAEpC,OAAO,EAAE,WAAW,SAAS,SAAS,MAAM,KAAK;EACnD;EACA,IAAI,kBAAkB;EACtB,MAAM,wBAAwB,UAAiB;GAC7C,iBAAiB,OAAO,QAAQ,UAAU,MAAM,MAAM;EACxD;EACA,MAAM,kBAAkB,UAAiB;GACvC,MAAM,UAAU;GAChB,iBAAiB;GACjB,IAAI,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,UAAU,MAAM,MAAM,GAAG;GAC1D,OAAO,aAAa;EACtB;EACA,MAAM,oBAAoB;GACxB,MAAM,OAAO,OAAO;GACpB,IAAI,SAAS,iBAAiB;GAC9B,kBAAkB;GAClB,iBAAiB;GACjB,IAAI,MAAM;IACR,IAAI,iBAAiB,eAAe,sBAAsB,IAAI;IAC9D,IAAI,iBAAiB,SAAS,gBAAgB,IAAI;GACpD,OAAO;IACL,IAAI,oBAAoB,eAAe,sBAAsB,IAAI;IACjE,IAAI,oBAAoB,SAAS,gBAAgB,IAAI;GACvD;EACF;EAEA,IAAI,gBAAgB,CAAC,gBAAgB;GACnC,IAAI,OAEF,UAAU,KACR;IACE;IACA;KACC,UAAU;KACT,iBAAiB,OAAO,QAAQ,WAAW,QAAQ,KAAK;IAC1D;IACA;GACF,GACA;IACE;IACA;KACC,UAAU;KACT,MAAM,UAAU;KAChB,iBAAiB;KACjB,IAAI,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,QAAQ,KAAK,GAAG;KAC5D,OAAO,aAAa;IACtB;IACA;GACF,CACF;QACK;IAIL,UAAU,KAAK;KAAC;KAAQ;KAAU;KAAa;IAAK,CAAC;IACrD,YAAY;GACd;EACF;EAEA,KAAK,MAAM,CAAC,QAAQ,MAAM,UAAU,YAAY,WAC9C,OAAO,iBAAiB,MAAM,UAAU,OAAO;EAEjD,aAAa;GACX,KAAK,MAAM,CAAC,QAAQ,MAAM,UAAU,YAAY,WAC9C,OAAO,oBAAoB,MAAM,UAAU,OAAO;GAEpD,IAAI,iBAAiB;IACnB,IAAI,oBAAoB,eAAe,sBAAsB,IAAI;IACjE,IAAI,oBAAoB,SAAS,gBAAgB,IAAI;GACvD;EACF;CACF,GAAG;EAAC;EAAQ;EAAO;EAAc;EAAuB;CAAU,CAAC;CAGnE,MAAM,QAAQ,CAAC,aAAa,IAAI;CAChC,gBAAgB;EACd,IAAI,CAAC,SAAS,WAAW,QAAQ,CAAC,OAAO;EACzC,IAAI,OAAO,aAAa,YAAY,GAAG;EACvC,MAAM,cAAc,OAAO,aAAa,iBAAiB,KAAK,GAAA,CAAI,MAAM,KAAK;EAC7E,MAAM,MAAM,OAAO;EACnB,IAAI,WAAW,MAAM,OAAO,OAAO,MAAM,IAAI,eAAe,EAAE,MAAM,IAAI,GAAG;EAC3E,QAAQ,MACN,4GAEF;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,MAAM,QAA0B;EAAE,MAAM,IAAI;EAAW;CAAM;CAC7D,MAAM,UAAU,IAAI,aAAa;CAEjC,MAAM,WAAW,MAAmC;EAClD,IAAI,CAAC,WAAW,OAAO,kBAAkB,UAAU,CAAC;EACpD,IAAI,gBAAgB,MAGlB,OACE,oBAAC,UAAD;GAAU,MAAM,UAAU,YAAY;GAAW,UAAA,kBAAkB,UAAU,CAAC;EAAY,CAAA;EAG9F,OAAO,UAAU,kBAAkB,UAAU,CAAC,IAAI;CACpD;CAEA,MAAM,eAAiE;EACrE,IAAI,IAAI;EAGR,MAAM,KAAA;EACN,UAAU,wBAAyB,eAAe,QAAQ,iBAAkB,KAAA;EAC5E,mBAAmB,IAAI;EACvB,oBAAoB,IAAI;EACxB,cAAc,SAAS,KAAK;EAE5B,0BAA0B;CAC5B;CAEA,MAAM,UAAU,UAA6D;EAC3E,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU;EACV,OAAO;EACP;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,gBAAgB,YAAY,aAAa,KAAA,GAAW,OAAO;AAC1F;AAEA,YAAY,cAAc"}
+{"version":3,"file":"dialog-popup.mjs","names":[],"sources":["../../src/dialog/dialog-popup.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Activity,\n  startTransition,\n  useCallback,\n  useEffect,\n  useEffectEvent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useDialogContext } from \"./dialog-context.js\";\n\nexport interface DialogPopupState {\n  /** Committed open state (library mode); `false` in JS-free mode. Read `:open` for the DOM truth. */\n  readonly open: boolean;\n  readonly modal: boolean;\n}\n\nexport interface DialogPopupProps extends Omit<\n  ComponentPropsWithRef<\"dialog\">,\n  \"id\" | \"open\" | \"closedby\" | \"onToggle\" | \"onBeforeToggle\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Library mode: what happens to the children while the dialog is closed.\n   * - `false` (default): not rendered. Mounting them is part of the opening transition, so\n   *   content that suspends holds the open until it is ready. Unmount waits for the dialog's\n   *   exit animations.\n   * - `true`: rendered inside `<Activity mode=\"hidden\">`: DOM and state preserved, effects\n   *   stopped, pre-rendered at low priority. Not in the server HTML.\n   *\n   * Ignored in JS-free mode (always mounted).\n   */\n  keepMounted?: boolean;\n  /**\n   * Element to focus when the dialog opens: a ref, or a selector resolved inside the dialog.\n   * The library writes `autofocus` on it right before `showModal()` / `show()` and the platform\n   * focuses it. Default: the platform's choice (first focusable descendant; the dialog itself if\n   * none). Use `tabIndex={-1}` on a heading or wrapper for long or destructive dialogs (APG).\n   *\n   * In JS-free mode the browser opens the dialog itself, so the attribute is written after\n   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.\n   */\n  initialFocus?: RefObject<HTMLElement | null> | string;\n  /**\n   * Close on a click outside the dialog (on the backdrop for modal dialogs). Default `false`.\n   * Baseline: JS `pointerdown` + `click` listeners, which close only when both the press and the\n   * click land outside (a drag that starts inside, such as selecting text, never closes); with\n   * `experimental_closedBy`, native `closedby=\"any\"`, which behaves the same.\n   */\n  lightDismiss?: boolean;\n  /**\n   * Experimental (Chrome 134+, Firefox 141+; Safari 27.0 ignores it). Renders `closedby`\n   * (`\"any\"` when `lightDismiss`, else `\"closerequest\"`) and skips the JS dismiss listeners where\n   * `HTMLDialogElement.prototype.closedBy` exists. Elsewhere the JS baseline stays active.\n   * Default `false`.\n   */\n  experimental_closedBy?: boolean;\n  /**\n   * Library mode only. Forwarded to the `<ViewTransition default>` around the dialog. Animates\n   * the opening commit and content changes while open; the close is the browser's and animates\n   * with CSS. Ignored (dev warning) in JS-free mode.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, DialogPopupState>;\n  style?: StateValue<CSSProperties | undefined, DialogPopupState>;\n  children?: StateValue<ReactNode, DialogPopupState>;\n  /** Must render a `<dialog>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"dialog\">, DialogPopupState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Resolves `initialFocus` against the dialog (a ref, or a selector inside the dialog). */\nfunction resolveInitialFocus(\n  dialog: HTMLDialogElement,\n  initialFocus: RefObject<HTMLElement | null> | string,\n): HTMLElement | null {\n  if (typeof initialFocus === \"string\") return dialog.querySelector<HTMLElement>(initialFocus);\n  return initialFocus.current;\n}\n\n/** The nearest `<dialog>` around a node (the dialog itself counts). */\nfunction closestDialog(target: EventTarget | null): Element | null {\n  return target instanceof Element ? target.closest(\"dialog\") : null;\n}\n\n/**\n * An open popover that takes Escape before the dialog: `auto` or `hint` (they have a close\n * watcher). A `manual` popover, or `hint` where the engine maps it to `manual`, does not.\n */\nfunction isOpenLightPopover(element: Element): boolean {\n  if (!element.hasAttribute(\"popover\")) return false;\n  // The IDL attribute reflects the state the engine applies; jsdom has none.\n  const reflected: unknown = (element as HTMLElement).popover;\n  const state =\n    typeof reflected === \"string\" ? reflected : element.getAttribute(\"popover\")!.toLowerCase();\n  if (state === \"manual\") return false;\n  try {\n    return element.matches(\":popover-open\");\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Whether Escape belongs to a layer inside `dialog` that sits above it (design 9: \"closes the\n * innermost one only\"): the target is inside an open nested `<dialog>` or popover, or an open\n * `auto` / `hint` popover inside the dialog would take the close request (close watchers are\n * per document, not per focus).\n */\nfunction escapeBelongsToInnerLayer(dialog: HTMLDialogElement, target: EventTarget | null): boolean {\n  for (\n    let node = target instanceof Element ? target : null;\n    node !== null && node !== dialog;\n    node = node.parentElement\n  ) {\n    if (node instanceof HTMLDialogElement && node.open) return true;\n    if (isOpenLightPopover(node)) return true;\n  }\n  for (const element of dialog.querySelectorAll(\"[popover]\")) {\n    if (isOpenLightPopover(element)) return true;\n  }\n  return false;\n}\n\n/** Whether a pointer event on the dialog itself lies outside its border box (the `::backdrop`). */\nfunction onBackdrop(dialog: HTMLDialogElement, event: Event): boolean {\n  if (event.target !== dialog) return false;\n  const { clientX, clientY } = event as MouseEvent;\n  const rect = dialog.getBoundingClientRect();\n  return !(\n    rect.top <= clientY &&\n    clientY <= rect.bottom &&\n    rect.left <= clientX &&\n    clientX <= rect.right\n  );\n}\n\n/** An animation that ends: infinite ones (a spinner) would hold the content forever. */\nfunction ends(animation: Animation): boolean {\n  const end = animation.effect?.getComputedTiming().endTime;\n  return typeof end === \"number\" && Number.isFinite(end);\n}\n\n/**\n * The dialog itself: a `<dialog>` with the id the Trigger's `commandfor` names, wired to Title\n * and Description through `aria-labelledby` / `aria-describedby`. Never renders `open`: modal\n * opening and closing go through `showModal()` / `close()` only. Style it with `:open` and\n * `:modal`; it emits `data-modal` but no `data-open`.\n *\n * In library mode the children render from committed state, so content that suspends keeps the\n * dialog closed (and the Trigger pending) until it is ready; `showModal()` runs in the layout\n * effect of the commit that mounted them. Closing is the browser's: the native `close` event\n * becomes `openChangeAction(false, { reason, returnValue })`.\n *\n * Owned keys (conventions 1.2): `id`, `open`, `closedby`, `aria-labelledby` and\n * `aria-describedby` (token-merged), `data-modal`, `suppressHydrationWarning`.\n */\nexport function DialogPopup({\n  keepMounted,\n  initialFocus,\n  lightDismiss = false,\n  experimental_closedBy = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: DialogPopupProps) {\n  const ctx = useDialogContext(\"Dialog.Popup\");\n  const isLibrary = ctx.mode === \"library\";\n  const { modal, ids, dialogRef, triggerRef } = ctx;\n  const [dialog, setDialog] = useState<HTMLDialogElement | null>(null);\n  // Children stay mounted while the dialog's exit animation runs (design 4.4).\n  const [exiting, setExiting] = useState(false);\n  const exitGeneration = useRef(0);\n  // Set by the synchronous `beforetoggle` of a close, cleared by the `close` event a task later:\n  // the dialog is closed but its notification is not dispatched yet, so the apply effect must\n  // not re-open it from a commit that lands in between.\n  const awaitingClose = useRef(false);\n  const warnedFocus = useRef(false);\n\n  useDevWarning(\n    !isLibrary && transition !== undefined,\n    \"Dialog.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the \" +\n      \"dialog outside any React transition. Animate it with CSS (`@starting-style`).\",\n  );\n  useDevWarning(\n    !isLibrary && keepMounted === false,\n    \"Dialog.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is \" +\n      \"always mounted so that the server HTML is complete.\",\n  );\n\n  const libraryRef = useCallback(\n    (element: HTMLDialogElement) => {\n      if (isDev && element.tagName !== \"DIALOG\") {\n        console.error(\n          `Dialog.Popup: expected to render a <dialog> element but got <${element.tagName.toLowerCase()}>. ` +\n            \"Top layer, backdrop, focus and Escape all come from a real <dialog>.\",\n        );\n      }\n      dialogRef.current = element;\n      setDialog(element);\n      return () => {\n        if (dialogRef.current === element) dialogRef.current = null;\n        setDialog(null);\n      };\n    },\n    [dialogRef],\n  );\n\n  // --- Opening -----------------------------------------------------------------------------\n\n  const openDialog = (element: HTMLDialogElement): void => {\n    let target: HTMLElement | null = null;\n    if (initialFocus !== undefined) {\n      target = resolveInitialFocus(element, initialFocus);\n      if (target === null || !element.contains(target)) {\n        if (isDev && !warnedFocus.current) {\n          warnedFocus.current = true;\n          console.error(\n            target === null\n              ? \"Dialog.Popup: `initialFocus` resolved to no element; the platform picks the focus target.\"\n              : \"Dialog.Popup: `initialFocus` is outside the dialog; the platform picks the focus target.\",\n          );\n        }\n        target = null;\n      }\n    }\n    // The platform's dialog focusing steps honour `autofocus`; React drops `autoFocus` on\n    // client-rendered content (react/react#23301). Never `.focus()` (design 6.1).\n    const added = target !== null && !target.hasAttribute(\"autofocus\");\n    if (added) target!.setAttribute(\"autofocus\", \"\");\n    try {\n      if (modal) element.showModal();\n      else element.show();\n    } finally {\n      if (added) target!.removeAttribute(\"autofocus\");\n    }\n  };\n\n  // Mount reconciliation (design 2.4): a click before hydration opened the dialog natively.\n  // Runs before the apply effect; the dispatch makes the apply effect wait for it.\n  const reconcileOnMount = useEffectEvent(() => {\n    const element = dialogRef.current;\n    if (element === null || !element.open) return;\n    ctx.requestOpen(undefined, \"platform\");\n  });\n  useLayoutEffect(() => {\n    if (isLibrary) reconcileOnMount();\n  }, [isLibrary]);\n\n  // The apply effect (design 2.5): after every commit, once nothing is in flight, the DOM\n  // follows committed state. Opens on the user's dispatch, `defaultOpen`, a controlled parent,\n  // the re-open of a refused or failed close; closes after a controlled close or a refused\n  // pre-hydration open.\n  useLayoutEffect(() => {\n    if (!isLibrary) return;\n    const element = dialogRef.current;\n    if (element === null || !element.isConnected) return;\n    if (ctx.pending || ctx.latestInFlight() !== null) return;\n    if (ctx.committed && !element.open) {\n      if (awaitingClose.current) return;\n      openDialog(element);\n    } else if (!ctx.committed && element.open) {\n      // An echo: the `close` listener finds nothing intended and skips the dispatch. `close()`,\n      // not `requestClose()`: a parent's close is not vetoable.\n      ctx.recordCloseIntent(undefined);\n      element.close();\n    }\n  });\n\n  // JS-free mode: there is no \"right before showModal()\" (the browser runs the command), so the\n  // `autofocus` attribute stays on the target while it is mounted.\n  useEffect(() => {\n    if (isLibrary || initialFocus === undefined || dialog === null) return;\n    const target = resolveInitialFocus(dialog, initialFocus);\n    if (target === null || !dialog.contains(target) || target.hasAttribute(\"autofocus\")) return;\n    target.setAttribute(\"autofocus\", \"\");\n    return () => target.removeAttribute(\"autofocus\");\n  }, [isLibrary, initialFocus, dialog]);\n\n  // --- Native listeners (conventions 7.4) ---------------------------------------------------\n\n  const onCommand = useEffectEvent((event: Event) => {\n    if (event.target !== dialogRef.current || event.defaultPrevented) return;\n    const command = String((event as Event & { command?: string }).command ?? \"\").toLowerCase();\n    if (command === \"show-modal\") {\n      // A foreign invoker (design 2.2): opening goes through the library in library mode.\n      if (!isLibrary) return;\n      event.preventDefault();\n      ctx.requestOpen(event, \"activate\");\n    } else if (command === \"request-close\" || command === \"close\") {\n      ctx.recordCloseIntent({ reason: \"activate\", event });\n    }\n  });\n\n  const onSubmit = useEffectEvent((event: Event) => {\n    const element = dialogRef.current;\n    const form = event.target;\n    if (element === null || !(form instanceof HTMLFormElement)) return;\n    if (form.closest(\"dialog\") !== element) return;\n    const submitter = (event as SubmitEvent).submitter;\n    const formMethod = submitter?.getAttribute(\"formmethod\");\n    const method = formMethod != null ? formMethod.toLowerCase() : form.method;\n    if (method !== \"dialog\") return;\n    ctx.recordCloseIntent({ reason: \"activate\", event });\n  });\n\n  const onClose = useEffectEvent((event: Event) => {\n    const element = dialogRef.current;\n    if (element === null || event.target !== element) return;\n    awaitingClose.current = false;\n\n    // Focus return is the platform's; it leaves focus inside the hidden dialog only when the\n    // opener is gone (design 6.2).\n    const doc = element.ownerDocument;\n    const active = doc.activeElement;\n    if (active !== null && active !== doc.body && element.contains(active)) {\n      const trigger = triggerRef.current;\n      if (trigger !== null && trigger.isConnected) trigger.focus();\n      else if (active instanceof HTMLElement) active.blur();\n    }\n\n    const intent = ctx.takeCloseIntent();\n    if (!isLibrary) return;\n\n    // Keep the children while the exit animation runs (design 4.4). Firefox has none.\n    if (element.isConnected && typeof element.getAnimations === \"function\") {\n      void getComputedStyle(element).opacity; // flush style so the exit transitions exist\n      const animations = element.getAnimations({ subtree: true }).filter(ends);\n      if (animations.length > 0) {\n        const generation = ++exitGeneration.current;\n        setExiting(true);\n        void Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {\n          if (exitGeneration.current === generation) startTransition(() => setExiting(false));\n        });\n      }\n    }\n\n    ctx.notifyClosed(intent?.event ?? event, intent?.reason ?? \"dismiss\", element.returnValue);\n  });\n\n  const onBeforeToggle = useEffectEvent((event: Event) => {\n    if (event.target !== dialogRef.current) return;\n    const newState = (event as ToggleEvent).newState;\n    awaitingClose.current = newState === \"closed\";\n    // Every native open counts as a new opening (design 3.4, as Popover 14.1): foreign,\n    // pre-hydration and JS-free opens too, so a Close action from an earlier opening skips its\n    // close. Counted here, synchronously inside `showModal()` / `show()`, not at the queued\n    // `toggle`: an action settling between the open and that task would otherwise still see the\n    // old generation and close the new open.\n    if (newState === \"open\") ctx.nextOpenGeneration();\n  });\n\n  useEffect(() => {\n    if (dialog === null) return;\n    const doc = dialog.ownerDocument;\n    // Feature detection only with the flag on, inside an effect (conventions 8).\n    const nativeClosedBy = experimental_closedBy && \"closedBy\" in dialog;\n\n    const listeners: [EventTarget, string, EventListener, boolean][] = [\n      [dialog, \"command\", onCommand, false],\n      [dialog, \"submit\", onSubmit, false],\n      [dialog, \"close\", onClose, false],\n      [dialog, \"beforetoggle\", onBeforeToggle, false],\n    ];\n\n    if (!modal && !nativeClosedBy) {\n      // Non-modal dialogs get no close watcher Escape from the platform (design 2.6).\n      listeners.push([\n        dialog,\n        \"keydown\",\n        (event) => {\n          const keyboardEvent = event as KeyboardEvent;\n          if (keyboardEvent.key !== \"Escape\" || keyboardEvent.defaultPrevented) return;\n          if (!dialog.open || closestDialog(keyboardEvent.target) !== dialog) return;\n          // A popover or nested dialog inside takes this Escape (its close watcher); leave the\n          // event alone so that it can.\n          if (escapeBelongsToInnerLayer(dialog, keyboardEvent.target)) return;\n          keyboardEvent.preventDefault();\n          dialog.requestClose();\n        },\n        false,\n      ]);\n    }\n\n    // Light dismiss needs both the press and the click outside, like native `closedby=\"any\"`: a\n    // drag that starts inside (selecting text in an input) and ends on the backdrop or outside\n    // fires `click` on the common ancestor and must not close (it would lose a half-filled form).\n    let pressedOutside = false;\n\n    const isOutside = (target: EventTarget | null): boolean => {\n      if (!(target instanceof Node)) return true;\n      if (dialog.contains(target)) return false;\n      // The Trigger re-opening a non-modal dialog is not a click outside.\n      return !(triggerRef.current?.contains(target) ?? false);\n    };\n    let outsideAttached = false;\n    const onOutsidePointerDown = (event: Event) => {\n      pressedOutside = dialog.open && isOutside(event.target);\n    };\n    const onOutsideClick = (event: Event) => {\n      const pressed = pressedOutside;\n      pressedOutside = false;\n      if (!dialog.open || !pressed || !isOutside(event.target)) return;\n      dialog.requestClose();\n    };\n    const syncOutside = () => {\n      const want = dialog.open;\n      if (want === outsideAttached) return;\n      outsideAttached = want;\n      pressedOutside = false;\n      if (want) {\n        doc.addEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.addEventListener(\"click\", onOutsideClick, true);\n      } else {\n        doc.removeEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.removeEventListener(\"click\", onOutsideClick, true);\n      }\n    };\n\n    if (lightDismiss && !nativeClosedBy) {\n      if (modal) {\n        // A press or click on the ::backdrop targets the dialog itself, outside its border box.\n        listeners.push(\n          [\n            dialog,\n            \"pointerdown\",\n            (event) => {\n              pressedOutside = dialog.open && onBackdrop(dialog, event);\n            },\n            false,\n          ],\n          [\n            dialog,\n            \"click\",\n            (event) => {\n              const pressed = pressedOutside;\n              pressedOutside = false;\n              if (!dialog.open || !pressed || !onBackdrop(dialog, event)) return;\n              dialog.requestClose();\n            },\n            false,\n          ],\n        );\n      } else {\n        // A document listener only while open, following the native `toggle` (the React\n        // `onToggle` prop never fires on a hydrated <dialog>); reads `dialog.open`, not\n        // `newState` (coalescing).\n        listeners.push([dialog, \"toggle\", syncOutside, false]);\n        syncOutside();\n      }\n    }\n\n    for (const [target, type, listener, capture] of listeners) {\n      target.addEventListener(type, listener, capture);\n    }\n    return () => {\n      for (const [target, type, listener, capture] of listeners) {\n        target.removeEventListener(type, listener, capture);\n      }\n      if (outsideAttached) {\n        doc.removeEventListener(\"pointerdown\", onOutsidePointerDown, true);\n        doc.removeEventListener(\"click\", onOutsideClick, true);\n      }\n    };\n  }, [dialog, modal, lightDismiss, experimental_closedBy, triggerRef]);\n\n  // Development check: the dialog has an accessible name when it is (or can be) shown.\n  const shown = !isLibrary || ctx.committed;\n  useEffect(() => {\n    if (!isDev || dialog === null || !shown) return;\n    if (dialog.hasAttribute(\"aria-label\")) return;\n    const labelledBy = (dialog.getAttribute(\"aria-labelledby\") ?? \"\").split(/\\s+/);\n    const doc = dialog.ownerDocument;\n    if (labelledBy.some((id) => id !== \"\" && doc.getElementById(id) !== null)) return;\n    console.error(\n      \"Dialog.Popup: the dialog has no accessible name. Render a Dialog.Title, or give the \" +\n        \"Popup an `aria-label`.\",\n    );\n  }, [dialog, shown]);\n\n  const state: DialogPopupState = { open: ctx.committed, modal };\n  const visible = ctx.committed || exiting;\n\n  const content = (s: DialogPopupState): ReactNode => {\n    if (!isLibrary) return resolveStateValue(children, s);\n    if (keepMounted === true) {\n      // The mode changes with committed state, inside the Root's transition (conventions 5.5);\n      // it stays visible while an exit animation runs.\n      return (\n        <Activity mode={visible ? \"visible\" : \"hidden\"}>{resolveStateValue(children, s)}</Activity>\n      );\n    }\n    return visible ? resolveStateValue(children, s) : null;\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"dialog\"> & DataAttributes = {\n    id: ids.dialog,\n    // Never rendered: removing `open` by hand hides a modal dialog without `close` and leaves\n    // `:modal` true (research). Owned so a `render` element cannot add it.\n    open: undefined,\n    closedby: experimental_closedBy ? (lightDismiss ? \"any\" : \"closerequest\") : undefined,\n    \"aria-labelledby\": ids.title,\n    \"aria-describedby\": ids.description,\n    \"data-modal\": dataAttr(modal),\n    // A pre-hydration open leaves an `open` attribute the server did not render (design 2.4).\n    suppressHydrationWarning: true,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"dialog\">, DialogPopupState>({\n    defaultElement: \"dialog\",\n    render,\n    state,\n    className,\n    style,\n    children: content,\n    props: rest,\n    libraryProps,\n    ref: libraryRef,\n  });\n\n  return useTransitionBoundary(\"Dialog.Popup\", isLibrary ? transition : undefined, element);\n}\n\nDialogPopup.displayName = \"DialogPopup\";\n"],"mappings":"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"}

package/dist/dialog/dialog-root.mjs

@@ -53,9 +53,15 @@ function DialogRoot({ open, defaultOpen, openChangeAction, modal = true, childre
 		closeIntent.current = void 0;
 		return intent;
 	}, []);
+	const generation = useRef(0);
+	const openGeneration = useCallback(() => generation.current, []);
+	const nextOpenGeneration = useCallback(() => {
+		generation.current++;
+	}, []);
 	const intended = () => latestInFlight()?.next ?? optimistic;
 	const requestOpen = (event, reason) => {
 		if (!isLibrary || intended()) return;
+		nextOpenGeneration();
 		dispatch(true, createActionDetails(event, {
 			reason,
 			returnValue: void 0
@@ -87,7 +93,9 @@ function DialogRoot({ open, defaultOpen, openChangeAction, modal = true, childre
 		triggerRef,
 		dialogRef,
 		recordCloseIntent,
-		takeCloseIntent
+		takeCloseIntent,
+		openGeneration,
+		nextOpenGeneration
 	};
 	return /* @__PURE__ */ jsx(DialogContext, {
 		value: context,

package/dist/dialog/dialog-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-root.mjs","names":[],"sources":["../../src/dialog/dialog-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { DialogContext } from \"./dialog-context.js\";\nimport type { DialogCloseIntent, DialogContextValue, DialogMode } from \"./dialog-context.js\";\n\n/** Details passed as the second argument of `openChangeAction`. */\nexport interface DialogOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: Trigger (open), Close or Form submit (close).\n   * `\"dismiss\"`: the user closed the dialog without a part: Escape, Android back, an assistive-\n   * technology dismiss gesture, or a click outside (`lightDismiss` / `closedby=\"any\"`).\n   * `\"platform\"`: the dialog was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n  /**\n   * On close: `dialog.returnValue`: the `value` of the Close button or the form submitter that\n   * closed it, `\"\"` for a dismiss. On open: `undefined`.\n   */\n  readonly returnValue: string | undefined;\n}\n\nexport interface DialogRootState {\n  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An `openChangeAction` dispatched through this Dialog is in flight (library mode only). */\n  readonly pending: boolean;\n  readonly modal: boolean;\n}\n\nexport interface DialogRootProps {\n  /**\n   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and\n   * `openChangeAction` also absent, JS-free mode).\n   */\n  open?: boolean;\n  /**\n   * Initial open state in uncontrolled library mode. The dialog opens after hydration, never in\n   * the server HTML.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the dialog opens when it resolves and the content has rendered); a\n   * notification for `false` (the dialog is already closed; the action runs inside the Root's\n   * transition). May be a Server Function. Rejections reach the nearest Error Boundary above\n   * Root.\n   *\n   * A controlled parent that does not adopt `false` gets the dialog re-opened once the action\n   * settles: closing is the browser's, this is not a veto.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, DialogOpenChangeDetails>;\n  /** `showModal()` (top layer, backdrop, inert page, Escape) or `show()`. Default `true`. */\n  modal?: boolean;\n  children?: StateValue<ReactNode, DialogRootState>;\n}\n\n/** How long a recorded close intent survives when the dialog did not close (design 2.3). */\nfunction clearLater(\n  intentRef: { current: DialogCloseIntent | undefined },\n  intent: DialogCloseIntent,\n  dialogRef: { current: HTMLDialogElement | null },\n): void {\n  setTimeout(() => {\n    // The dialog closed: its `close` event (queued as a task) consumes the intent. Still open:\n    // the close was cancelled (a prevented `cancel` or `command`), so the intent is stale.\n    if (intentRef.current === intent && dialogRef.current?.open === true) {\n      intentRef.current = undefined;\n    }\n  }, 0);\n}\n\n/**\n * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,\n * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.\n *\n * Without `open`, `defaultOpen` and `openChangeAction` the Dialog runs in **JS-free mode**: the\n * Trigger is a native `command=\"show-modal\"` invoker and the browser owns everything. With any of\n * them it runs in **library mode**: opening is a transition (the Trigger shows `data-pending`,\n * content renders from committed state, `showModal()` runs when it has committed); closing is\n * the browser's and `openChangeAction(false)` is a notification.\n */\nexport function DialogRoot({\n  open,\n  defaultOpen,\n  openChangeAction,\n  modal = true,\n  children,\n}: DialogRootProps) {\n  // Mode is decided once, from the first render's props (design 14).\n  const isLibraryNow =\n    open !== undefined || defaultOpen !== undefined || openChangeAction !== undefined;\n  const [mode] = useState<DialogMode>(isLibraryNow ? \"library\" : \"static\");\n  const isLibrary = mode === \"library\";\n  useDevWarning(\n    isLibrary !== isLibraryNow,\n    \"Dialog.Root: the mode changed after mount (`open`, `defaultOpen` and `openChangeAction` \" +\n      \"were all absent on one render and present on another). Switching between JS-free and \" +\n      \"library mode is not supported.\",\n  );\n\n  // Hooks cannot be conditional: static mode calls the hook too and never dispatches.\n  const { committed, optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    DialogOpenChangeDetails\n  >({\n    controlled: isLibrary ? open : undefined,\n    defaultValue: isLibrary ? defaultOpen : undefined,\n    initialValue: false,\n    action: isLibrary ? openChangeAction : undefined,\n    transitionTypes: (next) => transitionTypes(\"dialog\", next ? \"open\" : \"close\"),\n    warn: { component: \"Dialog.Root\", prop: \"open\" },\n  });\n\n  const id = useId();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const closeIntent = useRef<DialogCloseIntent | undefined>(undefined);\n\n  const recordCloseIntent = useCallback((intent: DialogCloseIntent | undefined) => {\n    closeIntent.current = intent;\n    if (intent !== undefined) clearLater(closeIntent, intent, dialogRef);\n  }, []);\n  const takeCloseIntent = useCallback(() => {\n    const intent = closeIntent.current;\n    closeIntent.current = undefined;\n    return intent;\n  }, []);\n\n  // What the user already intends: the latest in-flight dispatch, else the optimistic value\n  // (conventions 3.8 rule 1). Judging no-ops against it also deduplicates the StrictMode re-run\n  // of the mount reconciliation and recognises the library's own `close()` echoing back.\n  const intended = (): boolean => latestInFlight()?.next ?? optimistic;\n\n  const requestOpen = (event: Event | undefined, reason: ChangeReason): void => {\n    if (!isLibrary || intended()) return;\n    dispatch(true, createActionDetails(event, { reason, returnValue: undefined }));\n  };\n\n  const notifyClosed = (event: Event, reason: ChangeReason, returnValue: string): void => {\n    if (!isLibrary || !intended()) return;\n    dispatch(false, createActionDetails(event, { reason, returnValue }));\n  };\n\n  const openState = isLibrary && optimistic;\n  const pendingState = isLibrary && pending;\n\n  // Not memoised: `dispatch` is a new function on every render of the Root (Accordion does the\n  // same), so parts re-render with the Root, which they do anyway when its state changes.\n  const context: DialogContextValue = {\n    mode,\n    ids: { dialog: id, title: `${id}-title`, description: `${id}-description` },\n    modal,\n    committed: isLibrary && committed,\n    optimistic: openState,\n    pending: pendingState,\n    requestOpen,\n    notifyClosed,\n    latestInFlight,\n    triggerRef,\n    dialogRef,\n    recordCloseIntent,\n    takeCloseIntent,\n  };\n\n  const state: DialogRootState = {\n    open: openState,\n    pending: pendingState,\n    modal,\n  };\n\n  return <DialogContext value={context}>{resolveStateValue(children, state)}</DialogContext>;\n}\n\nDialogRoot.displayName = \"DialogRoot\";\n"],"mappings":";;;;;;;;;;;AAmEA,SAAS,WACP,WACA,QACA,WACM;CACN,iBAAiB;EAGf,IAAI,UAAU,YAAY,UAAU,UAAU,SAAS,SAAS,MAC9D,UAAU,UAAU,KAAA;CAExB,GAAG,CAAC;AACN;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,MACA,aACA,kBACA,QAAQ,MACR,YACkB;CAElB,MAAM,eACJ,SAAS,KAAA,KAAa,gBAAgB,KAAA,KAAa,qBAAqB,KAAA;CAC1E,MAAM,CAAC,QAAQ,SAAqB,eAAe,YAAY,QAAQ;CACvE,MAAM,YAAY,SAAS;CAC3B,cACE,cAAc,cACd,6MAGF;CAGA,MAAM,EAAE,WAAW,YAAY,SAAS,UAAU,mBAAmB,sBAGnE;EACA,YAAY,YAAY,OAAO,KAAA;EAC/B,cAAc,YAAY,cAAc,KAAA;EACxC,cAAc;EACd,QAAQ,YAAY,mBAAmB,KAAA;EACvC,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,SAAS,OAAO;EAC5E,MAAM;GAAE,WAAW;GAAe,MAAM;EAAO;CACjD,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,aAAa,OAA2B,IAAI;CAClD,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,cAAc,OAAsC,KAAA,CAAS;CAEnE,MAAM,oBAAoB,aAAa,WAA0C;EAC/E,YAAY,UAAU;EACtB,IAAI,WAAW,KAAA,GAAW,WAAW,aAAa,QAAQ,SAAS;CACrE,GAAG,CAAC,CAAC;CACL,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,SAAS,YAAY;EAC3B,YAAY,UAAU,KAAA;EACtB,OAAO;CACT,GAAG,CAAC,CAAC;CAKL,MAAM,iBAA0B,eAAe,CAAC,EAAE,QAAQ;CAE1D,MAAM,eAAe,OAA0B,WAA+B;EAC5E,IAAI,CAAC,aAAa,SAAS,GAAG;EAC9B,SAAS,MAAM,oBAAoB,OAAO;GAAE;GAAQ,aAAa,KAAA;EAAU,CAAC,CAAC;CAC/E;CAEA,MAAM,gBAAgB,OAAc,QAAsB,gBAA8B;EACtF,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG;EAC/B,SAAS,OAAO,oBAAoB,OAAO;GAAE;GAAQ;EAAY,CAAC,CAAC;CACrE;CAEA,MAAM,YAAY,aAAa;CAC/B,MAAM,eAAe,aAAa;CAIlC,MAAM,UAA8B;EAClC;EACA,KAAK;GAAE,QAAQ;GAAI,OAAO,GAAG,GAAG;GAAS,aAAa,GAAG,GAAG;EAAc;EAC1E;EACA,WAAW,aAAa;EACxB,YAAY;EACZ,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAQA,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA,kBAAkB,UAAU;GALjE,MAAM;GACN,SAAS;GACT;EAGqE,CAAC;CAAiB,CAAA;AAC3F;AAEA,WAAW,cAAc"}
+{"version":3,"file":"dialog-root.mjs","names":[],"sources":["../../src/dialog/dialog-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { DialogContext } from \"./dialog-context.js\";\nimport type { DialogCloseIntent, DialogContextValue, DialogMode } from \"./dialog-context.js\";\n\n/** Details passed as the second argument of `openChangeAction`. */\nexport interface DialogOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: Trigger (open), Close or Form submit (close).\n   * `\"dismiss\"`: the user closed the dialog without a part: Escape, Android back, an assistive-\n   * technology dismiss gesture, or a click outside (`lightDismiss` / `closedby=\"any\"`).\n   * `\"platform\"`: the dialog was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n  /**\n   * On close: `dialog.returnValue`: the `value` of the Close button or the form submitter that\n   * closed it, `\"\"` for a dismiss. On open: `undefined`.\n   */\n  readonly returnValue: string | undefined;\n}\n\nexport interface DialogRootState {\n  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An `openChangeAction` dispatched through this Dialog is in flight (library mode only). */\n  readonly pending: boolean;\n  readonly modal: boolean;\n}\n\nexport interface DialogRootProps {\n  /**\n   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and\n   * `openChangeAction` also absent, JS-free mode).\n   */\n  open?: boolean;\n  /**\n   * Initial open state in uncontrolled library mode. The dialog opens after hydration, never in\n   * the server HTML.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the dialog opens when it resolves and the content has rendered); a\n   * notification for `false` (the dialog is already closed; the action runs inside the Root's\n   * transition). May be a Server Function. Rejections reach the nearest Error Boundary above\n   * Root.\n   *\n   * A controlled parent that does not adopt `false` gets the dialog re-opened once the action\n   * settles: closing is the browser's, this is not a veto.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, DialogOpenChangeDetails>;\n  /** `showModal()` (top layer, backdrop, inert page, Escape) or `show()`. Default `true`. */\n  modal?: boolean;\n  children?: StateValue<ReactNode, DialogRootState>;\n}\n\n/** How long a recorded close intent survives when the dialog did not close (design 2.3). */\nfunction clearLater(\n  intentRef: { current: DialogCloseIntent | undefined },\n  intent: DialogCloseIntent,\n  dialogRef: { current: HTMLDialogElement | null },\n): void {\n  setTimeout(() => {\n    // The dialog closed: its `close` event (queued as a task) consumes the intent. Still open:\n    // the close was cancelled (a prevented `cancel` or `command`), so the intent is stale.\n    if (intentRef.current === intent && dialogRef.current?.open === true) {\n      intentRef.current = undefined;\n    }\n  }, 0);\n}\n\n/**\n * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,\n * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.\n *\n * Without `open`, `defaultOpen` and `openChangeAction` the Dialog runs in **JS-free mode**: the\n * Trigger is a native `command=\"show-modal\"` invoker and the browser owns everything. With any of\n * them it runs in **library mode**: opening is a transition (the Trigger shows `data-pending`,\n * content renders from committed state, `showModal()` runs when it has committed); closing is\n * the browser's and `openChangeAction(false)` is a notification.\n */\nexport function DialogRoot({\n  open,\n  defaultOpen,\n  openChangeAction,\n  modal = true,\n  children,\n}: DialogRootProps) {\n  // Mode is decided once, from the first render's props (design 14).\n  const isLibraryNow =\n    open !== undefined || defaultOpen !== undefined || openChangeAction !== undefined;\n  const [mode] = useState<DialogMode>(isLibraryNow ? \"library\" : \"static\");\n  const isLibrary = mode === \"library\";\n  useDevWarning(\n    isLibrary !== isLibraryNow,\n    \"Dialog.Root: the mode changed after mount (`open`, `defaultOpen` and `openChangeAction` \" +\n      \"were all absent on one render and present on another). Switching between JS-free and \" +\n      \"library mode is not supported.\",\n  );\n\n  // Hooks cannot be conditional: static mode calls the hook too and never dispatches.\n  const { committed, optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    DialogOpenChangeDetails\n  >({\n    controlled: isLibrary ? open : undefined,\n    defaultValue: isLibrary ? defaultOpen : undefined,\n    initialValue: false,\n    action: isLibrary ? openChangeAction : undefined,\n    transitionTypes: (next) => transitionTypes(\"dialog\", next ? \"open\" : \"close\"),\n    warn: { component: \"Dialog.Root\", prop: \"open\" },\n  });\n\n  const id = useId();\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const dialogRef = useRef<HTMLDialogElement | null>(null);\n  const closeIntent = useRef<DialogCloseIntent | undefined>(undefined);\n\n  const recordCloseIntent = useCallback((intent: DialogCloseIntent | undefined) => {\n    closeIntent.current = intent;\n    if (intent !== undefined) clearLater(closeIntent, intent, dialogRef);\n  }, []);\n  const takeCloseIntent = useCallback(() => {\n    const intent = closeIntent.current;\n    closeIntent.current = undefined;\n    return intent;\n  }, []);\n  // Advanced on every open (the open dispatch and the Popup's native `beforetoggle` to open), so a Close action that\n  // settles after the user dismissed and re-opened the dialog does not close the new open (the\n  // PO's open-generation rule, design/components/popover.md 3.4; review M2).\n  const generation = useRef(0);\n  const openGeneration = useCallback(() => generation.current, []);\n  const nextOpenGeneration = useCallback(() => {\n    generation.current++;\n  }, []);\n\n  // What the user already intends: the latest in-flight dispatch, else the optimistic value\n  // (conventions 3.8 rule 1). Judging no-ops against it also deduplicates the StrictMode re-run\n  // of the mount reconciliation and recognises the library's own `close()` echoing back.\n  const intended = (): boolean => latestInFlight()?.next ?? optimistic;\n\n  const requestOpen = (event: Event | undefined, reason: ChangeReason): void => {\n    if (!isLibrary || intended()) return;\n    nextOpenGeneration();\n    dispatch(true, createActionDetails(event, { reason, returnValue: undefined }));\n  };\n\n  const notifyClosed = (event: Event, reason: ChangeReason, returnValue: string): void => {\n    if (!isLibrary || !intended()) return;\n    dispatch(false, createActionDetails(event, { reason, returnValue }));\n  };\n\n  const openState = isLibrary && optimistic;\n  const pendingState = isLibrary && pending;\n\n  // Not memoised: `dispatch` is a new function on every render of the Root (Accordion does the\n  // same), so parts re-render with the Root, which they do anyway when its state changes.\n  const context: DialogContextValue = {\n    mode,\n    ids: { dialog: id, title: `${id}-title`, description: `${id}-description` },\n    modal,\n    committed: isLibrary && committed,\n    optimistic: openState,\n    pending: pendingState,\n    requestOpen,\n    notifyClosed,\n    latestInFlight,\n    triggerRef,\n    dialogRef,\n    recordCloseIntent,\n    takeCloseIntent,\n    openGeneration,\n    nextOpenGeneration,\n  };\n\n  const state: DialogRootState = {\n    open: openState,\n    pending: pendingState,\n    modal,\n  };\n\n  return <DialogContext value={context}>{resolveStateValue(children, state)}</DialogContext>;\n}\n\nDialogRoot.displayName = \"DialogRoot\";\n"],"mappings":";;;;;;;;;;;AAmEA,SAAS,WACP,WACA,QACA,WACM;CACN,iBAAiB;EAGf,IAAI,UAAU,YAAY,UAAU,UAAU,SAAS,SAAS,MAC9D,UAAU,UAAU,KAAA;CAExB,GAAG,CAAC;AACN;;;;;;;;;;;AAYA,SAAgB,WAAW,EACzB,MACA,aACA,kBACA,QAAQ,MACR,YACkB;CAElB,MAAM,eACJ,SAAS,KAAA,KAAa,gBAAgB,KAAA,KAAa,qBAAqB,KAAA;CAC1E,MAAM,CAAC,QAAQ,SAAqB,eAAe,YAAY,QAAQ;CACvE,MAAM,YAAY,SAAS;CAC3B,cACE,cAAc,cACd,6MAGF;CAGA,MAAM,EAAE,WAAW,YAAY,SAAS,UAAU,mBAAmB,sBAGnE;EACA,YAAY,YAAY,OAAO,KAAA;EAC/B,cAAc,YAAY,cAAc,KAAA;EACxC,cAAc;EACd,QAAQ,YAAY,mBAAmB,KAAA;EACvC,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,SAAS,OAAO;EAC5E,MAAM;GAAE,WAAW;GAAe,MAAM;EAAO;CACjD,CAAC;CAED,MAAM,KAAK,MAAM;CACjB,MAAM,aAAa,OAA2B,IAAI;CAClD,MAAM,YAAY,OAAiC,IAAI;CACvD,MAAM,cAAc,OAAsC,KAAA,CAAS;CAEnE,MAAM,oBAAoB,aAAa,WAA0C;EAC/E,YAAY,UAAU;EACtB,IAAI,WAAW,KAAA,GAAW,WAAW,aAAa,QAAQ,SAAS;CACrE,GAAG,CAAC,CAAC;CACL,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,SAAS,YAAY;EAC3B,YAAY,UAAU,KAAA;EACtB,OAAO;CACT,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,OAAO,CAAC;CAC3B,MAAM,iBAAiB,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAC/D,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW;CACb,GAAG,CAAC,CAAC;CAKL,MAAM,iBAA0B,eAAe,CAAC,EAAE,QAAQ;CAE1D,MAAM,eAAe,OAA0B,WAA+B;EAC5E,IAAI,CAAC,aAAa,SAAS,GAAG;EAC9B,mBAAmB;EACnB,SAAS,MAAM,oBAAoB,OAAO;GAAE;GAAQ,aAAa,KAAA;EAAU,CAAC,CAAC;CAC/E;CAEA,MAAM,gBAAgB,OAAc,QAAsB,gBAA8B;EACtF,IAAI,CAAC,aAAa,CAAC,SAAS,GAAG;EAC/B,SAAS,OAAO,oBAAoB,OAAO;GAAE;GAAQ;EAAY,CAAC,CAAC;CACrE;CAEA,MAAM,YAAY,aAAa;CAC/B,MAAM,eAAe,aAAa;CAIlC,MAAM,UAA8B;EAClC;EACA,KAAK;GAAE,QAAQ;GAAI,OAAO,GAAG,GAAG;GAAS,aAAa,GAAG,GAAG;EAAc;EAC1E;EACA,WAAW,aAAa;EACxB,YAAY;EACZ,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAQA,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA,kBAAkB,UAAU;GALjE,MAAM;GACN,SAAS;GACT;EAGqE,CAAC;CAAiB,CAAA;AAC3F;AAEA,WAAW,cAAc"}

package/dist/index.d.mts

@@ -5,6 +5,11 @@ import { AccordionPanelProps, AccordionPanelState } from "./accordion/accordion-
 import { AccordionRootExclusiveProps, AccordionRootMultipleProps, AccordionRootProps, AccordionRootState, AccordionValueChangeDetails } from "./accordion/accordion-root.mjs";
 import { AccordionTriggerProps, AccordionTriggerState } from "./accordion/accordion-trigger.mjs";
 import { Accordion } from "./accordion/index.mjs";
+import { CheckboxGroupItemProps, CheckboxGroupItemState } from "./checkbox-group/checkbox-group-item.mjs";
+import { CheckboxGroupRootProps, CheckboxGroupRootState, CheckboxGroupValueChangeDetails } from "./checkbox-group/checkbox-group-root.mjs";
+import { CheckboxGroupLabelProps } from "./checkbox-group/checkbox-group-label.mjs";
+import { CheckboxGroupParentProps, CheckboxGroupParentState } from "./checkbox-group/checkbox-group-parent.mjs";
+import { CheckboxGroup } from "./checkbox-group/index.mjs";
 import { Checkbox, CheckboxCheckedChangeDetails, CheckboxProps, CheckboxState } from "./checkbox/checkbox.mjs";
 import "./checkbox/index.mjs";
 import { DialogCloseDetails, DialogCloseProps, DialogCloseState } from "./dialog/dialog-close.mjs";
@@ -31,8 +36,25 @@ import { TooltipTriggerProps, TooltipTriggerState } from "./tooltip/tooltip-trig
 import { Tooltip } from "./tooltip/index.mjs";
 import { Switch, SwitchCheckedChangeDetails, SwitchProps, SwitchState } from "./switch/switch.mjs";
 import "./switch/index.mjs";
+import { PopoverCloseProps, PopoverCloseState } from "./popover/popover-close.mjs";
+import { PopoverAlign, PopoverPopupProps, PopoverPopupState, PopoverSide } from "./popover/popover-popup.mjs";
+import { PopoverDescriptionProps, PopoverDescriptionState } from "./popover/popover-description.mjs";
+import { PopoverOpenChangeDetails, PopoverRootProps, PopoverRootState } from "./popover/popover-root.mjs";
+import { PopoverTitleProps, PopoverTitleState } from "./popover/popover-title.mjs";
+import { PopoverTriggerProps, PopoverTriggerState } from "./popover/popover-trigger.mjs";
+import { Popover } from "./popover/index.mjs";
+import { MenuItemDetails, MenuItemProps, MenuItemState } from "./menu/menu-item.mjs";
+import { MenuCheckboxItemProps, MenuCheckboxItemState } from "./menu/menu-checkbox-item.mjs";
+import { MenuGroupLabelProps, MenuGroupLabelState, MenuGroupProps, MenuGroupState, MenuSeparatorProps, MenuSeparatorState } from "./menu/menu-group.mjs";
+import { MenuAlign, MenuPopupProps, MenuPopupState, MenuSide } from "./menu/menu-popup.mjs";
+import { MenuRadioGroupProps, MenuRadioGroupState } from "./menu/menu-radio-group.mjs";
+import { MenuRadioItemProps, MenuRadioItemState } from "./menu/menu-radio-item.mjs";
+import { MenuOpenChangeDetails, MenuRootProps, MenuRootState } from "./menu/menu-root.mjs";
+import { MenuTriggerProps, MenuTriggerState } from "./menu/menu-trigger.mjs";
+import { MenuSubmenuTriggerProps, MenuSubmenuTriggerState } from "./menu/menu-submenu-trigger.mjs";
+import { Menu } from "./menu/index.mjs";
 import { RadioGroupItemProps, RadioGroupItemState } from "./radio-group/radio-group-item.mjs";
 import { RadioGroupRootProps, RadioGroupRootState, RadioGroupValueChangeDetails } from "./radio-group/radio-group-root.mjs";
 import { RadioGroupLabelProps } from "./radio-group/radio-group-label.mjs";
 import { RadioGroup } from "./radio-group/index.mjs";
-export { Accordion, type AccordionItemProps, type AccordionItemState, type AccordionPanelProps, type AccordionPanelState, type AccordionRootExclusiveProps, type AccordionRootMultipleProps, type AccordionRootProps, type AccordionRootState, type AccordionTriggerProps, type AccordionTriggerState, type AccordionValueChangeDetails, type Action, type ActionDetails, type ChangeAction, type ChangeReason, Checkbox, type CheckboxCheckedChangeDetails, type CheckboxProps, type CheckboxState, Dialog, type DialogCloseDetails, type DialogCloseProps, type DialogCloseState, type DialogDescriptionProps, type DialogDescriptionState, type DialogFormProps, type DialogFormState, type DialogOpenChangeDetails, type DialogPopupProps, type DialogPopupState, type DialogRootProps, type DialogRootState, type DialogTitleProps, type DialogTitleState, type DialogTriggerProps, type DialogTriggerState, RadioGroup, type RadioGroupItemProps, type RadioGroupItemState, type RadioGroupLabelProps, type RadioGroupRootProps, type RadioGroupRootState, type RadioGroupValueChangeDetails, type RenderProp, type StateValue, Switch, type SwitchCheckedChangeDetails, type SwitchProps, type SwitchState, Tabs, type TabsActivationMode, type TabsIndicatorProps, type TabsIndicatorState, type TabsListProps, type TabsListState, type TabsOrientation, type TabsPanelProps, type TabsPanelState, type TabsRootProps, type TabsRootState, type TabsTabProps, type TabsTabState, type TabsValueChangeDetails, Toggle, type TogglePressedChangeDetails, type ToggleProps, type ToggleState, Tooltip, type TooltipAlign, type TooltipPopupProps, type TooltipPopupState, type TooltipProvides, type TooltipRootProps, type TooltipRootState, type TooltipSide, type TooltipTriggerProps, type TooltipTriggerState };
+export { Accordion, type AccordionItemProps, type AccordionItemState, type AccordionPanelProps, type AccordionPanelState, type AccordionRootExclusiveProps, type AccordionRootMultipleProps, type AccordionRootProps, type AccordionRootState, type AccordionTriggerProps, type AccordionTriggerState, type AccordionValueChangeDetails, type Action, type ActionDetails, type ChangeAction, type ChangeReason, Checkbox, type CheckboxCheckedChangeDetails, CheckboxGroup, type CheckboxGroupItemProps, type CheckboxGroupItemState, type CheckboxGroupLabelProps, type CheckboxGroupParentProps, type CheckboxGroupParentState, type CheckboxGroupRootProps, type CheckboxGroupRootState, type CheckboxGroupValueChangeDetails, type CheckboxProps, type CheckboxState, Dialog, type DialogCloseDetails, type DialogCloseProps, type DialogCloseState, type DialogDescriptionProps, type DialogDescriptionState, type DialogFormProps, type DialogFormState, type DialogOpenChangeDetails, type DialogPopupProps, type DialogPopupState, type DialogRootProps, type DialogRootState, type DialogTitleProps, type DialogTitleState, type DialogTriggerProps, type DialogTriggerState, Menu, type MenuAlign, type MenuCheckboxItemProps, type MenuCheckboxItemState, type MenuGroupLabelProps, type MenuGroupLabelState, type MenuGroupProps, type MenuGroupState, type MenuItemDetails, type MenuItemProps, type MenuItemState, type MenuOpenChangeDetails, type MenuPopupProps, type MenuPopupState, type MenuRadioGroupProps, type MenuRadioGroupState, type MenuRadioItemProps, type MenuRadioItemState, type MenuRootProps, type MenuRootState, type MenuSeparatorProps, type MenuSeparatorState, type MenuSide, type MenuSubmenuTriggerProps, type MenuSubmenuTriggerState, type MenuTriggerProps, type MenuTriggerState, Popover, type PopoverAlign, type PopoverCloseProps, type PopoverCloseState, type PopoverDescriptionProps, type PopoverDescriptionState, type PopoverOpenChangeDetails, type PopoverPopupProps, type PopoverPopupState, type PopoverRootProps, type PopoverRootState, type PopoverSide, type PopoverTitleProps, type PopoverTitleState, type PopoverTriggerProps, type PopoverTriggerState, RadioGroup, type RadioGroupItemProps, type RadioGroupItemState, type RadioGroupLabelProps, type RadioGroupRootProps, type RadioGroupRootState, type RadioGroupValueChangeDetails, type RenderProp, type StateValue, Switch, type SwitchCheckedChangeDetails, type SwitchProps, type SwitchState, Tabs, type TabsActivationMode, type TabsIndicatorProps, type TabsIndicatorState, type TabsListProps, type TabsListState, type TabsOrientation, type TabsPanelProps, type TabsPanelState, type TabsRootProps, type TabsRootState, type TabsTabProps, type TabsTabState, type TabsValueChangeDetails, Toggle, type TogglePressedChangeDetails, type ToggleProps, type ToggleState, Tooltip, type TooltipAlign, type TooltipPopupProps, type TooltipPopupState, type TooltipProvides, type TooltipRootProps, type TooltipRootState, type TooltipSide, type TooltipTriggerProps, type TooltipTriggerState };

package/dist/index.mjs

@@ -5,5 +5,8 @@ import { Tooltip } from "./tooltip/index.mjs";
 import { Switch } from "./switch/switch.mjs";
 import { Checkbox } from "./checkbox/checkbox.mjs";
 import { Dialog } from "./dialog/index.mjs";
+import { Popover } from "./popover/index.mjs";
+import { Menu } from "./menu/index.mjs";
 import { RadioGroup } from "./radio-group/index.mjs";
-export { Accordion, Checkbox, Dialog, RadioGroup, Switch, Tabs, Toggle, Tooltip };
+import { CheckboxGroup } from "./checkbox-group/index.mjs";
+export { Accordion, Checkbox, CheckboxGroup, Dialog, Menu, Popover, RadioGroup, Switch, Tabs, Toggle, Tooltip };

package/dist/internal/anchor-position.d.mts

@@ -0,0 +1,7 @@
+//#region src/internal/anchor-position.d.ts
+/** Physical side of the anchor the popup is placed on. */
+export type AnchorSide = "top" | "bottom" | "left" | "right";
+/** Alignment along that side. */
+export type AnchorAlign = "start" | "center" | "end";
+//#endregion
+//# sourceMappingURL=anchor-position.d.mts.map

package/dist/internal/anchor-position.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-position.d.mts","names":[],"sources":["../../src/internal/anchor-position.ts"],"mappings":";;YAQY;;YAEA"}

package/dist/internal/anchor-position.mjs

@@ -0,0 +1,16 @@
+//#region src/internal/anchor-position.ts
+/** Flip to the opposite side, then the other axis, then both, when the popup does not fit. */
+const POSITION_TRY_FALLBACKS = "flip-block, flip-inline, flip-block flip-inline";
+/**
+* The `position-area` for a side and an alignment (physical keywords): `bottom` + `center` is
+* `bottom`, `bottom` + `start` is `bottom span-right`, `right` + `start` is `right span-bottom`,
+* and so on.
+*/
+function positionArea(side, align) {
+	if (align === "center") return side;
+	return `${side} ${side === "top" || side === "bottom" ? align === "start" ? "span-right" : "span-left" : align === "start" ? "span-bottom" : "span-top"}`;
+}
+//#endregion
+export { POSITION_TRY_FALLBACKS, positionArea };
+
+//# sourceMappingURL=anchor-position.mjs.map

package/dist/internal/anchor-position.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor-position.mjs","names":[],"sources":["../../src/internal/anchor-position.ts"],"sourcesContent":["// Placement of a popover against its implicit anchor (the invoker set by `commandfor`,\n// `interestfor` or `showPopover({ source })`): inline `position-area` from a side and an\n// alignment, plus `position-try-fallbacks` that flip it when it does not fit. Shared by Tooltip,\n// Popover and Menu (design/components/tooltip.md 7.1, popover.md 8).\n//\n// No \"use client\" directive: pure functions, importable from anywhere (conventions 7.1).\n\n/** Physical side of the anchor the popup is placed on. */\nexport type AnchorSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n/** Alignment along that side. */\nexport type AnchorAlign = \"start\" | \"center\" | \"end\";\n\n/** Flip to the opposite side, then the other axis, then both, when the popup does not fit. */\nexport const POSITION_TRY_FALLBACKS = \"flip-block, flip-inline, flip-block flip-inline\";\n\n/**\n * The `position-area` for a side and an alignment (physical keywords): `bottom` + `center` is\n * `bottom`, `bottom` + `start` is `bottom span-right`, `right` + `start` is `right span-bottom`,\n * and so on.\n */\nexport function positionArea(side: AnchorSide, align: AnchorAlign): string {\n  if (align === \"center\") return side;\n  const vertical = side === \"top\" || side === \"bottom\";\n  const span = vertical\n    ? align === \"start\"\n      ? \"span-right\"\n      : \"span-left\"\n    : align === \"start\"\n      ? \"span-bottom\"\n      : \"span-top\";\n  return `${side} ${span}`;\n}\n"],"mappings":";;AAaA,MAAa,yBAAyB;;;;;;AAOtC,SAAgB,aAAa,MAAkB,OAA4B;CACzE,IAAI,UAAU,UAAU,OAAO;CAS/B,OAAO,GAAG,KAAK,GARE,SAAS,SAAS,SAAS,WAExC,UAAU,UACR,eACA,cACF,UAAU,UACR,gBACA;AAER"}

package/dist/internal/platform-attributes.d.mts

@@ -7,6 +7,12 @@ declare module "react" {
      * Not in `@types/react` 19.3.0 (no DefinitelyTyped issue filed as of 2026-10-16).
      */
     focusgroup?: string | undefined;
+    /**
+     * `focusgroupstart` (Chromium 150+): marks the item a `focusgroup` enters on when focus
+     * arrives from outside (with `nomemory`, always). Boolean attribute: pass `""`.
+     * Not in `@types/react` 19.3.0 (no DefinitelyTyped issue filed as of 2026-10-17).
+     */
+    focusgroupstart?: "" | undefined;
   }
   interface ButtonHTMLAttributes<T> {
     /**

package/dist/internal/platform-attributes.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-attributes.d.mts","names":[],"sources":["../../src/internal/platform-attributes.ts"],"mappings":";;YAkBY,eAAe;;;;;;IAMvB;;YAGQ,qBAAqB;;;;;;IAM7B;;;;;IAKA;;;;;;IAMA;;YAWQ,qBAAqB;;IAE7B;;YAGQ,mBAAmB;;IAE3B;;YAGQ;;IAER;;IAEA;;IAEA"}
+{"version":3,"file":"platform-attributes.d.mts","names":[],"sources":["../../src/internal/platform-attributes.ts"],"mappings":";;YAkBY,eAAe;;;;;;IAMvB;;;;;;IAMA;;YAGQ,qBAAqB;;;;;;IAM7B;;;;;IAKA;;;;;;IAMA;;YAWQ,qBAAqB;;IAE7B;;YAGQ,mBAAmB;;IAE3B;;YAGQ;;IAER;;IAEA;;IAEA"}

package/dist/internal/sync-presence.mjs

@@ -0,0 +1,19 @@
+//#region src/internal/sync-presence.ts
+/**
+* Makes a boolean attribute's presence match `present`. For group members that may hydrate after
+* their Root (`RadioGroup.Item`, `CheckboxGroup.Item` / `Parent`): hydration keeps server
+* attributes that differ from the client render (React only warns), and a member hydrating late
+* can render a different state than the server did.
+*
+* No `"use client"` directive: no client-only API (conventions 7.1).
+*/
+function syncPresence(el, name, present) {
+	if (el.hasAttribute(name) !== present) {
+		if (present) el.setAttribute(name, "");
+		else el.removeAttribute(name);
+	}
+}
+//#endregion
+export { syncPresence };
+
+//# sourceMappingURL=sync-presence.mjs.map

package/dist/internal/sync-presence.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-presence.mjs","names":[],"sources":["../../src/internal/sync-presence.ts"],"sourcesContent":["/**\n * Makes a boolean attribute's presence match `present`. For group members that may hydrate after\n * their Root (`RadioGroup.Item`, `CheckboxGroup.Item` / `Parent`): hydration keeps server\n * attributes that differ from the client render (React only warns), and a member hydrating late\n * can render a different state than the server did.\n *\n * No `\"use client\"` directive: no client-only API (conventions 7.1).\n */\nexport function syncPresence(el: Element, name: string, present: boolean): void {\n  if (el.hasAttribute(name) !== present) {\n    if (present) el.setAttribute(name, \"\");\n    else el.removeAttribute(name);\n  }\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,aAAa,IAAa,MAAc,SAAwB;CAC9E,IAAI,GAAG,aAAa,IAAI,MAAM,SAAS;EACrC,IAAI,SAAS,GAAG,aAAa,MAAM,EAAE;OAChC,GAAG,gBAAgB,IAAI;CAC9B;AACF"}

package/dist/internal/use-action-trigger.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { useEffect, useRef, useState, useTransition } from "react";
+//#region src/internal/use-action-trigger.ts
+/** Reports an error that cannot reach a boundary (conventions 2.4: never swallow). */
+function report(error) {
+	if (typeof reportError === "function") reportError(error);
+	else console.error(error);
+}
+/**
+* The transition of a pure-trigger part: an `action` with no state of its own (`Dialog.Close`,
+* `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection surfacing as
+* `useControllableAction`: React keeps only the newest thenable per `useTransition`, so the
+* rejection of a run that a later run superseded would be dropped. The hook catches it and throws
+* it from render, so it reaches the same boundary as the latest run's rejection does.
+*/
+function useActionTrigger(openGeneration) {
+	const [supersededError, setSupersededError] = useState(null);
+	const hasSupersededError = useRef(false);
+	if (supersededError !== null) throw supersededError.error;
+	const [pending, startOwnTransition] = useTransition();
+	const latest = useRef(0);
+	const mounted = useRef(false);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const run = (work, then) => {
+		const id = ++latest.current;
+		const generation = openGeneration?.();
+		startOwnTransition(async () => {
+			try {
+				await work();
+			} catch (error) {
+				if (id === latest.current) throw error;
+				if (!mounted.current) return;
+				if (hasSupersededError.current) {
+					report(error);
+					return;
+				}
+				hasSupersededError.current = true;
+				setSupersededError({ error });
+				return;
+			}
+			if (openGeneration !== void 0 && openGeneration() !== generation) return;
+			then?.();
+		});
+	};
+	return {
+		pending,
+		run
+	};
+}
+//#endregion
+export { useActionTrigger };
+
+//# sourceMappingURL=use-action-trigger.mjs.map

package/dist/internal/use-action-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-action-trigger.mjs","names":[],"sources":["../../src/internal/use-action-trigger.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef, useState, useTransition } from \"react\";\n\nexport interface ActionTrigger {\n  /** A run started through this hook is in flight (the part's own transition). */\n  readonly pending: boolean;\n  /**\n   * Runs `work` inside the part's own transition and, once it resolves, `then` (still inside the\n   * transition: a Close part's close, a menu item's close). A rejection skips `then` and reaches\n   * the nearest Error Boundary above the part, also when a later run superseded this one. With\n   * `openGeneration` (the hook's argument), `then` is skipped when a newer open of the overlay\n   * started after the run began.\n   */\n  readonly run: (work: () => unknown, then?: () => void) => void;\n}\n\n/** Reports an error that cannot reach a boundary (conventions 2.4: never swallow). */\nfunction report(error: unknown): void {\n  if (typeof reportError === \"function\") reportError(error);\n  else console.error(error);\n}\n\n/**\n * The transition of a pure-trigger part: an `action` with no state of its own (`Dialog.Close`,\n * `Popover.Close`, `Menu.Item`; conventions 3.4). Same superseded-rejection surfacing as\n * `useControllableAction`: React keeps only the newest thenable per `useTransition`, so the\n * rejection of a run that a later run superseded would be dropped. The hook catches it and throws\n * it from render, so it reaches the same boundary as the latest run's rejection does.\n */\nexport function useActionTrigger(openGeneration?: () => number): ActionTrigger {\n  // Thrown before `useTransition` on purpose (see use-controllable-action.ts): in the retry of\n  // an errored render `useTransition` would suspend on the newer run's pending thenable.\n  const [supersededError, setSupersededError] = useState<{ readonly error: unknown } | null>(null);\n  const hasSupersededError = useRef(false);\n  if (supersededError !== null) throw supersededError.error;\n\n  const [pending, startOwnTransition] = useTransition();\n  const latest = useRef(0);\n  const mounted = useRef(false);\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const run = (work: () => unknown, then?: () => void): void => {\n    const id = ++latest.current;\n    // The open this run belongs to (design/components/popover.md, review M2 / PO rule): if the\n    // user dismisses and re-opens while the action runs, its close must not close the new open.\n    const generation = openGeneration?.();\n    startOwnTransition(async () => {\n      try {\n        await work();\n      } catch (error) {\n        // The latest run's rejection takes React's own route to the boundary.\n        if (id === latest.current) throw error;\n        if (!mounted.current) return;\n        if (hasSupersededError.current) {\n          report(error);\n          return;\n        }\n        hasSupersededError.current = true;\n        // After an await, outside the transition: urgent, so the part re-renders and throws.\n        setSupersededError({ error });\n        return;\n      }\n      if (openGeneration !== undefined && openGeneration() !== generation) return;\n      then?.();\n    });\n  };\n\n  return { pending, run };\n}\n"],"mappings":";;;;AAiBA,SAAS,OAAO,OAAsB;CACpC,IAAI,OAAO,gBAAgB,YAAY,YAAY,KAAK;MACnD,QAAQ,MAAM,KAAK;AAC1B;;;;;;;;AASA,SAAgB,iBAAiB,gBAA8C;CAG7E,MAAM,CAAC,iBAAiB,sBAAsB,SAA6C,IAAI;CAC/F,MAAM,qBAAqB,OAAO,KAAK;CACvC,IAAI,oBAAoB,MAAM,MAAM,gBAAgB;CAEpD,MAAM,CAAC,SAAS,sBAAsB,cAAc;CACpD,MAAM,SAAS,OAAO,CAAC;CACvB,MAAM,UAAU,OAAO,KAAK;CAE5B,gBAAgB;EACd,QAAQ,UAAU;EAClB,aAAa;GACX,QAAQ,UAAU;EACpB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,MAAqB,SAA4B;EAC5D,MAAM,KAAK,EAAE,OAAO;EAGpB,MAAM,aAAa,iBAAiB;EACpC,mBAAmB,YAAY;GAC7B,IAAI;IACF,MAAM,KAAK;GACb,SAAS,OAAO;IAEd,IAAI,OAAO,OAAO,SAAS,MAAM;IACjC,IAAI,CAAC,QAAQ,SAAS;IACtB,IAAI,mBAAmB,SAAS;KAC9B,OAAO,KAAK;KACZ;IACF;IACA,mBAAmB,UAAU;IAE7B,mBAAmB,EAAE,MAAM,CAAC;IAC5B;GACF;GACA,IAAI,mBAAmB,KAAA,KAAa,eAAe,MAAM,YAAY;GACrE,OAAO;EACT,CAAC;CACH;CAEA,OAAO;EAAE;EAAS;CAAI;AACxB"}

package/dist/internal/use-delayed-pair.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/internal/use-delayed-pair.ts
+/** Plain factory, for code that owns its timers inside an effect (Tooltip). */
+function createDelayedPair() {
+	let timer;
+	let kind;
+	const cancel = () => {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = void 0;
+		kind = void 0;
+	};
+	const schedule = (next, delay, callback) => {
+		cancel();
+		kind = next;
+		timer = setTimeout(() => {
+			timer = void 0;
+			kind = void 0;
+			callback();
+		}, delay);
+	};
+	return {
+		open: (delay, callback) => schedule("open", delay, callback),
+		close: (delay, callback) => schedule("close", delay, callback),
+		cancelClose: () => {
+			if (kind === "close") cancel();
+		},
+		cancel
+	};
+}
+/** One `DelayedPair` per component instance, cancelled on unmount. */
+function useDelayedPair() {
+	const [pair] = useState(createDelayedPair);
+	useEffect(() => pair.cancel, [pair]);
+	return pair;
+}
+//#endregion
+export { createDelayedPair, useDelayedPair };
+
+//# sourceMappingURL=use-delayed-pair.mjs.map

package/dist/internal/use-delayed-pair.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-delayed-pair.mjs","names":[],"sources":["../../src/internal/use-delayed-pair.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * An open timer and a close timer that exclude each other: scheduling one cancels the other, so a\n * hover that leaves before the open delay elapses never opens, and coming back before the close\n * delay elapses never closes. Shared by Tooltip's JS path and Menu's submenu hover intent\n * (design/components/menu.md 7).\n */\nexport interface DelayedPair {\n  /** Run `callback` after `delay` ms, replacing any pending open or close. */\n  readonly open: (delay: number, callback: () => void) => void;\n  /** Run `callback` after `delay` ms, replacing any pending open or close. */\n  readonly close: (delay: number, callback: () => void) => void;\n  /** Cancel a pending close only (a pending open keeps running). */\n  readonly cancelClose: () => void;\n  /** Cancel whatever is pending. */\n  readonly cancel: () => void;\n}\n\n/** Plain factory, for code that owns its timers inside an effect (Tooltip). */\nexport function createDelayedPair(): DelayedPair {\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let kind: \"open\" | \"close\" | undefined;\n\n  const cancel = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    timer = undefined;\n    kind = undefined;\n  };\n  const schedule = (next: \"open\" | \"close\", delay: number, callback: () => void): void => {\n    cancel();\n    kind = next;\n    timer = setTimeout(() => {\n      timer = undefined;\n      kind = undefined;\n      callback();\n    }, delay);\n  };\n\n  return {\n    open: (delay, callback) => schedule(\"open\", delay, callback),\n    close: (delay, callback) => schedule(\"close\", delay, callback),\n    cancelClose: () => {\n      if (kind === \"close\") cancel();\n    },\n    cancel,\n  };\n}\n\n/** One `DelayedPair` per component instance, cancelled on unmount. */\nexport function useDelayedPair(): DelayedPair {\n  const [pair] = useState(createDelayedPair);\n  useEffect(() => pair.cancel, [pair]);\n  return pair;\n}\n"],"mappings":";;;;AAqBA,SAAgB,oBAAiC;CAC/C,IAAI;CACJ,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,UAAU,KAAA,GAAW,aAAa,KAAK;EAC3C,QAAQ,KAAA;EACR,OAAO,KAAA;CACT;CACA,MAAM,YAAY,MAAwB,OAAe,aAA+B;EACtF,OAAO;EACP,OAAO;EACP,QAAQ,iBAAiB;GACvB,QAAQ,KAAA;GACR,OAAO,KAAA;GACP,SAAS;EACX,GAAG,KAAK;CACV;CAEA,OAAO;EACL,OAAO,OAAO,aAAa,SAAS,QAAQ,OAAO,QAAQ;EAC3D,QAAQ,OAAO,aAAa,SAAS,SAAS,OAAO,QAAQ;EAC7D,mBAAmB;GACjB,IAAI,SAAS,SAAS,OAAO;EAC/B;EACA;CACF;AACF;;AAGA,SAAgB,iBAA8B;CAC5C,MAAM,CAAC,QAAQ,SAAS,iBAAiB;CACzC,gBAAgB,KAAK,QAAQ,CAAC,IAAI,CAAC;CACnC,OAAO;AACT"}

package/dist/internal/use-exit-animation.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { useRef, useState } from "react";
+//#region src/internal/use-exit-animation.ts
+/** An animation that ends: infinite ones (a spinner) would hold the content forever. */
+function ends(animation) {
+	const end = animation.effect?.getComputedTiming().endTime;
+	return typeof end === "number" && Number.isFinite(end);
+}
+/**
+* The running exit animations of a top-layer element that has just been hidden, read after a
+* style flush so that `transition-behavior: allow-discrete` exits exist. Empty where the engine
+* does not animate the exit (Firefox) or there is no CSS exit.
+*/
+function exitAnimations(element) {
+	if (!element.isConnected || typeof element.getAnimations !== "function") return [];
+	getComputedStyle(element).opacity;
+	return element.getAnimations({ subtree: true }).filter(ends);
+}
+/**
+* The deferred unmount of a top-layer popup's content while its hide animates. `held` is cleared
+* with a normal (urgent) update, never in a transition: the popup is already hidden, nothing
+* visible changes, and only transition commits start a document view transition, so a dismissal
+* runs one (its notification commit) instead of two (design 4.4).
+*/
+function useExitAnimation() {
+	const [held, setHeld] = useState(false);
+	const wait = useRef(null);
+	const generation = useRef(0);
+	const holdUntil = (animations) => {
+		const current = ++generation.current;
+		wait.current = current;
+		setHeld(true);
+		Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+			if (generation.current !== current) return;
+			wait.current = null;
+			setHeld(false);
+		});
+	};
+	const release = () => {
+		generation.current++;
+		wait.current = null;
+		setHeld(false);
+	};
+	return {
+		held,
+		holdUntil,
+		release,
+		holdDuringRender: () => setHeld(true),
+		waiting: () => wait.current !== null
+	};
+}
+//#endregion
+export { exitAnimations, useExitAnimation };
+
+//# sourceMappingURL=use-exit-animation.mjs.map

package/dist/internal/use-exit-animation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-exit-animation.mjs","names":[],"sources":["../../src/internal/use-exit-animation.ts"],"sourcesContent":["\"use client\";\nimport { useRef, useState } from \"react\";\n\n/** An animation that ends: infinite ones (a spinner) would hold the content forever. */\nfunction ends(animation: Animation): boolean {\n  const end = animation.effect?.getComputedTiming().endTime;\n  return typeof end === \"number\" && Number.isFinite(end);\n}\n\n/**\n * The running exit animations of a top-layer element that has just been hidden, read after a\n * style flush so that `transition-behavior: allow-discrete` exits exist. Empty where the engine\n * does not animate the exit (Firefox) or there is no CSS exit.\n */\nexport function exitAnimations(element: Element): Animation[] {\n  if (!element.isConnected || typeof element.getAnimations !== \"function\") return [];\n  void getComputedStyle(element).opacity;\n  return element.getAnimations({ subtree: true }).filter(ends);\n}\n\nexport interface ExitAnimation {\n  /** Keep the content mounted (design/components/popover.md 4.4). */\n  readonly held: boolean;\n  /** Set `held` now (urgent, library-internal) and clear it when `animations` settle. */\n  readonly holdUntil: (animations: readonly Animation[]) => void;\n  /** Clear `held` now (a normal update, never a transition), cancelling any wait in progress. */\n  readonly release: () => void;\n  /** Set `held` during render (the \"previous value in state\" pattern). */\n  readonly holdDuringRender: () => void;\n  /** Whether a `holdUntil` wait is still running. Handlers and effects only. */\n  readonly waiting: () => boolean;\n}\n\n/**\n * The deferred unmount of a top-layer popup's content while its hide animates. `held` is cleared\n * with a normal (urgent) update, never in a transition: the popup is already hidden, nothing\n * visible changes, and only transition commits start a document view transition, so a dismissal\n * runs one (its notification commit) instead of two (design 4.4).\n */\nexport function useExitAnimation(): ExitAnimation {\n  const [held, setHeld] = useState(false);\n  // The generation of the wait in progress, or null; a newer wait supersedes an older one.\n  const wait = useRef<number | null>(null);\n  const generation = useRef(0);\n\n  const holdUntil = (animations: readonly Animation[]): void => {\n    const current = ++generation.current;\n    wait.current = current;\n    setHeld(true);\n    void Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {\n      if (generation.current !== current) return;\n      wait.current = null;\n      setHeld(false);\n    });\n  };\n\n  const release = (): void => {\n    generation.current++;\n    wait.current = null;\n    setHeld(false);\n  };\n\n  return {\n    held,\n    holdUntil,\n    release,\n    holdDuringRender: () => setHeld(true),\n    waiting: () => wait.current !== null,\n  };\n}\n"],"mappings":";;;;AAIA,SAAS,KAAK,WAA+B;CAC3C,MAAM,MAAM,UAAU,QAAQ,kBAAkB,CAAC,CAAC;CAClD,OAAO,OAAO,QAAQ,YAAY,OAAO,SAAS,GAAG;AACvD;;;;;;AAOA,SAAgB,eAAe,SAA+B;CAC5D,IAAI,CAAC,QAAQ,eAAe,OAAO,QAAQ,kBAAkB,YAAY,OAAO,CAAC;CACjF,iBAAsB,OAAO,CAAC,CAAC;CAC/B,OAAO,QAAQ,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI;AAC7D;;;;;;;AAqBA,SAAgB,mBAAkC;CAChD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,OAAO,OAAsB,IAAI;CACvC,MAAM,aAAa,OAAO,CAAC;CAE3B,MAAM,aAAa,eAA2C;EAC5D,MAAM,UAAU,EAAE,WAAW;EAC7B,KAAK,UAAU;EACf,QAAQ,IAAI;EACZ,QAAa,WAAW,WAAW,KAAK,cAAc,UAAU,QAAQ,CAAC,CAAC,CAAC,WAAW;GACpF,IAAI,WAAW,YAAY,SAAS;GACpC,KAAK,UAAU;GACf,QAAQ,KAAK;EACf,CAAC;CACH;CAEA,MAAM,gBAAsB;EAC1B,WAAW;EACX,KAAK,UAAU;EACf,QAAQ,KAAK;CACf;CAEA,OAAO;EACL;EACA;EACA;EACA,wBAAwB,QAAQ,IAAI;EACpC,eAAe,KAAK,YAAY;CAClC;AACF"}

package/dist/internal/use-native-group-reconciliation.mjs

@@ -15,7 +15,7 @@ import { useCallback, useEffectEvent, useLayoutEffect, useRef } from "react";
 * - Form reset through `useFormReset` on the container: in a microtask after the reset,
 *   `readDefault()` vs `base()`.
 *
-* Values are compared with `Object.is`.
+* Values are compared with `equals` (default `Object.is`).
 */
 function useNativeGroupReconciliation(options) {
 	const { element } = options;
@@ -56,7 +56,7 @@ function useNativeGroupReconciliation(options) {
 	return { onItemMounted };
 }
 function reconcile(options, next, event) {
-	if (!Object.is(next, options.base())) options.onPlatformChange(next, event);
+	if (!(options.equals ?? Object.is)(next, options.base())) options.onPlatformChange(next, event);
 }
 //#endregion
 export { useNativeGroupReconciliation };