@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/dialog.cjs

@@ -0,0 +1,741 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dialog_exports = {};
+__export(dialog_exports, {
+  Dialog: () => Dialog,
+  DialogHandle: () => DialogHandle,
+  DialogStore: () => DialogStore,
+  DialogViewportDataAttributes: () => DialogViewportDataAttributes,
+  createDialogHandle: () => createDialogHandle,
+  useDialogRootContext: () => useDialogRootContext,
+  useRenderDialogRoot: () => useRenderDialogRoot
+});
+module.exports = __toCommonJS(dialog_exports);
+var import_octane = require("octane");
+var import_FloatingFocusManager = require("./utils/floating/FloatingFocusManager.cjs");
+var import_FloatingPortal = require("./utils/floating/FloatingPortal.cjs");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_ReactStore = require("./utils/store/ReactStore.cjs");
+var import_createSelector = require("./utils/store/createSelector.cjs");
+var import_useClick = require("./utils/floating/useClick.cjs");
+var import_useDismiss = require("./utils/floating/useDismiss.cjs");
+var import_useScrollLock = require("./utils/useScrollLock.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_useOpenInteractionType = require("./utils/useOpenInteractionType.cjs");
+var import_popupStateMapping = require("./utils/popupStateMapping.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_empty = require("./utils/empty.cjs");
+var import_inertValue = require("./utils/inertValue.cjs");
+var import_InternalBackdrop = require("./utils/InternalBackdrop.cjs");
+var import_element = require("./utils/floating/element.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_popups = require("./utils/popups/index.cjs");
+var import_popupTriggerMap = require("./utils/popups/popupTriggerMap.cjs");
+const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+const popupStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+const dialogSelectors = {
+  ...import_popups.popupStoreSelectors,
+  modal: (0, import_createSelector.createSelector)((state) => state.modal),
+  nested: (0, import_createSelector.createSelector)((state) => state.nested),
+  nestedOpenDialogCount: (0, import_createSelector.createSelector)(
+    (state) => state.nestedOpenDialogCount
+  ),
+  nestedOpenDrawerCount: (0, import_createSelector.createSelector)(
+    (state) => state.nestedOpenDrawerCount
+  ),
+  disablePointerDismissal: (0, import_createSelector.createSelector)(
+    (state) => state.disablePointerDismissal
+  ),
+  openMethod: (0, import_createSelector.createSelector)((state) => state.openMethod),
+  descriptionElementId: (0, import_createSelector.createSelector)((state) => state.descriptionElementId),
+  titleElementId: (0, import_createSelector.createSelector)((state) => state.titleElementId),
+  viewportElement: (0, import_createSelector.createSelector)((state) => state.viewportElement),
+  role: (0, import_createSelector.createSelector)((state) => state.role)
+};
+function createInitialDialogState(initialState = {}) {
+  return {
+    ...(0, import_popups.createInitialPopupStoreState)(),
+    modal: true,
+    disablePointerDismissal: false,
+    popupElement: null,
+    viewportElement: null,
+    descriptionElementId: void 0,
+    titleElementId: void 0,
+    openMethod: null,
+    nested: false,
+    nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
+    role: "dialog",
+    ...initialState
+  };
+}
+class DialogStore extends import_ReactStore.ReactStore {
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new import_popupTriggerMap.PopupTriggerMap();
+    const state = createInitialDialogState(initialState);
+    state.floatingRootContext = (0, import_popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+    super(
+      state,
+      {
+        popupRef: { current: null },
+        backdropRef: { current: null },
+        internalBackdropRef: { current: null },
+        outsidePressEnabledRef: { current: true },
+        triggerElements,
+        onOpenChange: void 0,
+        onOpenChangeComplete: void 0
+      },
+      dialogSelectors
+    );
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    eventDetails.preventUnmountOnClose = () => {
+      this.set("preventUnmountingOnClose", true);
+    };
+    if (!nextOpen && eventDetails.trigger == null && this.state.activeTriggerId != null) {
+      eventDetails.trigger = this.state.activeTriggerElement ?? void 0;
+    }
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+    const updatedState = { open: nextOpen };
+    (0, import_popups.setPopupOpenState)(updatedState, nextOpen, eventDetails.trigger);
+    this.update(updatedState);
+  };
+  static useStore(externalStore, initialState, slot) {
+    return (0, import_popups.usePopupStore)(
+      externalStore,
+      (floatingId, nested) => new DialogStore(initialState, floatingId, nested),
+      true,
+      slot
+    ).store;
+  }
+}
+class DialogHandle {
+  store;
+  constructor(store) {
+    this.store = store ?? new DialogStore();
+  }
+  open(triggerId) {
+    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : void 0;
+    this.store.setOpen(
+      true,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, triggerElement)
+    );
+  }
+  openWithPayload(payload) {
+    this.store.set("payload", payload);
+    this.store.setOpen(
+      true,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, void 0)
+    );
+  }
+  close() {
+    this.store.setOpen(
+      false,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction, void 0, void 0)
+    );
+  }
+  get isOpen() {
+    return this.store.select("open");
+  }
+}
+function createDialogHandle() {
+  return new DialogHandle();
+}
+const IsDrawerContext = (0, import_octane.createContext)(false);
+const DialogRootContext = (0, import_octane.createContext)(void 0);
+function useDialogRootContext(optional) {
+  const dialogRootContext = (0, import_octane.useContext)(DialogRootContext);
+  if (optional === false && dialogRootContext === void 0) {
+    throw new Error(
+      "Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>."
+    );
+  }
+  return dialogRootContext;
+}
+function useDialogRoot(params, slot) {
+  const { store, actionsRef } = params;
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  (0, import_popups.usePopupRootSync)(store, open, (0, import_internal.subSlot)(slot, "rootSync"));
+  (0, import_popups.useImplicitActiveTrigger)(store, {}, (0, import_internal.subSlot)(slot, "iat"));
+  const { forceUnmount } = (0, import_popups.useOpenStateTransitions)(
+    open,
+    store,
+    void 0,
+    (0, import_internal.subSlot)(slot, "ost")
+  );
+  const handleImperativeClose = (0, import_octane.useCallback)(
+    () => {
+      store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.imperativeAction));
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "close")
+  );
+  (0, import_octane.useImperativeHandle)(
+    actionsRef,
+    () => ({ unmount: forceUnmount, close: handleImperativeClose }),
+    [forceUnmount, handleImperativeClose],
+    (0, import_internal.subSlot)(slot, "imp")
+  );
+}
+function DialogInteractions(props) {
+  const slot = (0, import_internal.S)("DialogInteractions");
+  const { store, parentContext, isDrawer } = props;
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const disablePointerDismissal = store.useState("disablePointerDismissal", (0, import_internal.subSlot)(slot, "dpd"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const popupElement = store.useState("popupElement", (0, import_internal.subSlot)(slot, "pel"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "nod"));
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "ndr"));
+  const isTopmost = ownNestedOpenDialogs === 0;
+  const dismiss = (0, import_useDismiss.useDismiss)(
+    floatingRootContext,
+    {
+      outsidePressEvent() {
+        if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
+          return "intentional";
+        }
+        return {
+          mouse: modal === "trap-focus" ? "sloppy" : "intentional",
+          touch: "sloppy"
+        };
+      },
+      outsidePress(event) {
+        if (!store.context.outsidePressEnabledRef.current) {
+          return false;
+        }
+        if ("button" in event && event.button !== 0) {
+          return false;
+        }
+        if ("touches" in event && event.touches.length !== 1) {
+          return false;
+        }
+        const target = (0, import_element.getTarget)(event);
+        if (isTopmost && !disablePointerDismissal) {
+          if (modal) {
+            return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === target || store.context.backdropRef.current === target || (0, import_element.contains)(target, popupElement) && !target?.hasAttribute("data-base-ui-portal") : true;
+          }
+          return true;
+        }
+        return false;
+      },
+      escapeKey: isTopmost
+    },
+    (0, import_internal.subSlot)(slot, "dismiss")
+  );
+  (0, import_useScrollLock.useScrollLock)(open && modal === true, popupElement, (0, import_internal.subSlot)(slot, "scroll"));
+  store.useContextCallback(
+    "onNestedDialogOpen",
+    (dialogCount, drawerCount) => {
+      setOwnNestedOpenDialogs(dialogCount);
+      setOwnNestedOpenDrawers(drawerCount);
+    },
+    (0, import_internal.subSlot)(slot, "cc-open")
+  );
+  store.useContextCallback(
+    "onNestedDialogClose",
+    () => {
+      setOwnNestedOpenDialogs(0);
+      setOwnNestedOpenDrawers(0);
+    },
+    (0, import_internal.subSlot)(slot, "cc-close")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (parentContext?.onNestedDialogOpen && open) {
+        parentContext.onNestedDialogOpen(
+          ownNestedOpenDialogs + 1,
+          ownNestedOpenDrawers + (isDrawer ? 1 : 0)
+        );
+      }
+      if (parentContext?.onNestedDialogClose && !open) {
+        parentContext.onNestedDialogClose();
+      }
+      return () => {
+        if (parentContext?.onNestedDialogClose && open) {
+          parentContext.onNestedDialogClose();
+        }
+      };
+    },
+    [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext],
+    (0, import_internal.subSlot)(slot, "e:parent")
+  );
+  const activeTriggerProps = dismiss.reference ?? import_empty.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? import_empty.EMPTY_OBJECT;
+  const popupProps = dismiss.floating ?? import_empty.EMPTY_OBJECT;
+  (0, import_popups.usePopupInteractionProps)(
+    store,
+    {
+      activeTriggerProps,
+      inactiveTriggerProps,
+      popupProps,
+      nestedOpenDialogCount: ownNestedOpenDialogs,
+      nestedOpenDrawerCount: ownNestedOpenDrawers
+    },
+    (0, import_internal.subSlot)(slot, "pip")
+  );
+  return null;
+}
+function useRenderDialogRoot(props, mode) {
+  const slot = (0, import_internal.S)("DialogRoot");
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal: disablePointerDismissalProp = false,
+    modal: modalProp = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const isDrawer = mode === "drawer";
+  const isAlertDialog = mode === "alert-dialog";
+  const modal = isAlertDialog ? true : modalProp;
+  const disablePointerDismissal = isAlertDialog || disablePointerDismissalProp;
+  const role = isAlertDialog ? "alertdialog" : "dialog";
+  const parentDialogRootContext = useDialogRootContext(true);
+  const nested = Boolean(parentDialogRootContext);
+  const rootState = { modal, disablePointerDismissal, nested, role };
+  const store = DialogStore.useStore(
+    handle?.store,
+    {
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
+      ...rootState
+    },
+    (0, import_internal.subSlot)(slot, "store")
+  );
+  store.useControlledProp("openProp", openProp, (0, import_internal.subSlot)(slot, "cp-open"));
+  store.useControlledProp("triggerIdProp", triggerIdProp, (0, import_internal.subSlot)(slot, "cp-tid"));
+  store.useSyncedValues(rootState, (0, import_internal.subSlot)(slot, "sv-root"));
+  store.useContextCallback("onOpenChange", onOpenChange, (0, import_internal.subSlot)(slot, "cc-change"));
+  store.useContextCallback(
+    "onOpenChangeComplete",
+    onOpenChangeComplete,
+    (0, import_internal.subSlot)(slot, "cc-complete")
+  );
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const payload = store.useState("payload", (0, import_internal.subSlot)(slot, "payload"));
+  useDialogRoot({ store, actionsRef }, (0, import_internal.subSlot)(slot, "root"));
+  const shouldRenderInteractions = open || mounted;
+  const contextValue = (0, import_octane.useMemo)(() => ({ store }), [store], (0, import_internal.subSlot)(slot, "ctx"));
+  const resolvedChildren = typeof children === "function" && !(0, import_octane.isChildrenBlock)(children) ? children({ payload }) : children;
+  const content = [
+    shouldRenderInteractions ? (0, import_octane.createElement)(DialogInteractions, {
+      key: "interactions",
+      store,
+      parentContext: parentDialogRootContext?.store.context,
+      isDrawer
+    }) : null,
+    (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children: resolvedChildren })
+  ];
+  return (0, import_octane.createElement)(IsDrawerContext.Provider, {
+    value: false,
+    children: (0, import_octane.createElement)(DialogRootContext.Provider, {
+      value: contextValue,
+      children: content
+    })
+  });
+}
+function DialogRoot(props) {
+  const mode = (0, import_octane.useContext)(IsDrawerContext) ? "drawer" : "dialog";
+  return useRenderDialogRoot(props, mode);
+}
+function DialogTrigger(componentProps) {
+  const slot = (0, import_internal.S)("DialogTrigger");
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    nativeButton = true,
+    id: idProp,
+    payload,
+    handle,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const dialogRootContext = useDialogRootContext(true);
+  const store = handle?.store ?? dialogRootContext?.store;
+  if (!store) {
+    throw new Error(
+      "Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle."
+    );
+  }
+  const thisTriggerId = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const floatingContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "fc"));
+  const isOpenedByThisTrigger = store.useState(
+    "isOpenedByTrigger",
+    (0, import_internal.subSlot)(slot, "obt"),
+    thisTriggerId
+  );
+  const popupId = store.useState("triggerPopupId", (0, import_internal.subSlot)(slot, "tpid"), thisTriggerId);
+  const triggerElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ter"));
+  const { registerTrigger, isMountedByThisTrigger } = (0, import_popups.useTriggerDataForwarding)(
+    thisTriggerId,
+    triggerElementRef,
+    store,
+    { payload },
+    (0, import_internal.subSlot)(slot, "tdf")
+  );
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const click = (0, import_useClick.useClick)(
+    floatingContext,
+    { enabled: floatingContext != null },
+    (0, import_internal.subSlot)(slot, "click")
+  );
+  const interactionTypeProps = (0, import_useOpenInteractionType.useOpenMethodTriggerProps)(
+    () => store.select("open"),
+    (interactionType) => {
+      store.set("openMethod", interactionType);
+    },
+    (0, import_internal.subSlot)(slot, "omt")
+  );
+  const state = { disabled, open: isOpenedByThisTrigger };
+  const rootTriggerProps = store.useState(
+    "triggerProps",
+    (0, import_internal.subSlot)(slot, "tp"),
+    isMountedByThisTrigger
+  );
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [buttonRef, ref, registerTrigger, triggerElementRef],
+      props: [
+        click.reference,
+        rootTriggerProps,
+        interactionTypeProps,
+        {
+          [CLICK_TRIGGER_IDENTIFIER]: "",
+          id: thisTriggerId,
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpenedByThisTrigger,
+          "aria-controls": popupId
+        },
+        elementProps,
+        getButtonProps
+      ],
+      stateAttributesMapping: import_popupStateMapping.triggerOpenStateMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const DialogPortalContext = (0, import_octane.createContext)(void 0);
+function useDialogPortalContext() {
+  const value = (0, import_octane.useContext)(DialogPortalContext);
+  if (value === void 0) {
+    throw new Error("Base UI: <Dialog.Portal> is missing.");
+  }
+  return value;
+}
+function DialogPortal(props) {
+  const slot = (0, import_internal.S)("DialogPortal");
+  const { keepMounted = false, container, children, ...portalProps } = props;
+  const { store } = useDialogRootContext();
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return (0, import_octane.createElement)(DialogPortalContext.Provider, {
+    value: keepMounted,
+    children: (0, import_octane.createElement)(import_FloatingPortal.FloatingPortal, {
+      container,
+      // Octane reconciles an ARRAY child as a keyed list, so every entry needs a key —
+      // including the consumer's, which is why it goes through a keyed Fragment rather than
+      // being keyed in place. Same shape as the Popup path below.
+      children: [
+        mounted && modal === true ? (0, import_octane.createElement)(import_InternalBackdrop.InternalBackdrop, {
+          key: "internal-backdrop",
+          ref: store.context.internalBackdropRef,
+          inert: (0, import_inertValue.inertValue)(!open)
+        }) : null,
+        (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children })
+      ]
+    })
+  });
+}
+function DialogBackdrop(componentProps) {
+  const slot = (0, import_internal.S)("DialogBackdrop");
+  const { render, className, style, forceRender = false, ref, ...elementProps } = componentProps;
+  const { store } = useDialogRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const nested = store.useState("nested", (0, import_internal.subSlot)(slot, "nested"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "ts"));
+  const state = { open, transitionStatus };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref: [store.context.backdropRef, ref],
+      stateAttributesMapping: popupStateAttributesMapping,
+      props: [
+        {
+          role: "presentation",
+          hidden: !mounted,
+          style: { userSelect: "none", WebkitUserSelect: "none" }
+        },
+        elementProps
+      ],
+      enabled: forceRender || !nested
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function DialogPopup(componentProps) {
+  const slot = (0, import_internal.S)("DialogPopup");
+  const { render, className, style, finalFocus, initialFocus, ref, ...elementProps } = componentProps;
+  const { store } = useDialogRootContext();
+  const descriptionElementId = store.useState("descriptionElementId", (0, import_internal.subSlot)(slot, "did"));
+  const disablePointerDismissal = store.useState("disablePointerDismissal", (0, import_internal.subSlot)(slot, "dpd"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const rootPopupProps = store.useState("popupProps", (0, import_internal.subSlot)(slot, "pp"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const nested = store.useState("nested", (0, import_internal.subSlot)(slot, "nested"));
+  const nestedOpenDialogCount = store.useState("nestedOpenDialogCount", (0, import_internal.subSlot)(slot, "nodc"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "om"));
+  const titleElementId = store.useState("titleElementId", (0, import_internal.subSlot)(slot, "tid"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "ts"));
+  const role = store.useState("role", (0, import_internal.subSlot)(slot, "role"));
+  const floatingId = floatingRootContext.useState("floatingId", (0, import_internal.subSlot)(slot, "fid"));
+  const popupId = elementProps.id ?? floatingId;
+  useDialogPortalContext();
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open,
+      ref: store.context.popupRef,
+      onComplete() {
+        if (open) {
+          store.context.onOpenChangeComplete?.(true);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  const resolvedInitialFocus = initialFocus === void 0 ? (0, import_popups.createDefaultInitialFocus)(store.context.popupRef) : initialFocus;
+  const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const setPopupElement = store.useStateSetter("popupElement", (0, import_internal.subSlot)(slot, "spe"));
+  const state = { open, nested, transitionStatus, nestedDialogOpen };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      props: [
+        rootPopupProps,
+        {
+          id: popupId,
+          "aria-labelledby": titleElementId ?? void 0,
+          "aria-describedby": descriptionElementId ?? void 0,
+          role,
+          ...import_popups.FOCUSABLE_POPUP_PROPS,
+          hidden: !mounted,
+          onKeyDown(event) {
+            if (import_keys.COMPOSITE_KEYS.has(event.key)) {
+              event.stopPropagation();
+            }
+          },
+          style: { ["--nested-dialogs"]: nestedOpenDialogCount }
+        },
+        elementProps
+      ],
+      ref: [ref, store.context.popupRef, setPopupElement],
+      stateAttributesMapping: popupStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_FloatingFocusManager.FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
+  });
+}
+function DialogTitle(componentProps) {
+  const slot = (0, import_internal.S)("DialogTitle");
+  const { render, className, style, id: idProp, ref, ...elementProps } = componentProps;
+  const { store } = useDialogRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  store.useSyncedValueWithCleanup("titleElementId", id, (0, import_internal.subSlot)(slot, "sync"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "h2",
+    { render, className, style },
+    { ref, props: [{ id }, elementProps] },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function DialogDescription(componentProps) {
+  const slot = (0, import_internal.S)("DialogDescription");
+  const { render, className, style, id: idProp, ref, ...elementProps } = componentProps;
+  const { store } = useDialogRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  store.useSyncedValueWithCleanup("descriptionElementId", id, (0, import_internal.subSlot)(slot, "sync"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "p",
+    { render, className, style },
+    { ref, props: [{ id }, elementProps] },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function DialogClose(componentProps) {
+  const slot = (0, import_internal.S)("DialogClose");
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    nativeButton = true,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const { store } = useDialogRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const state = { disabled };
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.closePress, event));
+    }
+  }
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [ref, buttonRef],
+      props: [{ onClick: handleClick }, elementProps, getButtonProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const DialogViewportDataAttributes = {
+  open: import_popupStateMapping.CommonPopupDataAttributes.open,
+  closed: import_popupStateMapping.CommonPopupDataAttributes.closed,
+  startingStyle: import_popupStateMapping.CommonPopupDataAttributes.startingStyle,
+  endingStyle: import_popupStateMapping.CommonPopupDataAttributes.endingStyle,
+  nested: "data-nested",
+  nestedDialogOpen: "data-nested-dialog-open"
+};
+const viewportStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping,
+  nested(value) {
+    return value ? { [DialogViewportDataAttributes.nested]: "" } : null;
+  },
+  nestedDialogOpen(value) {
+    return value ? { [DialogViewportDataAttributes.nestedDialogOpen]: "" } : null;
+  }
+};
+function DialogViewport(componentProps) {
+  const slot = (0, import_internal.S)("DialogViewport");
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+  const keepMounted = useDialogPortalContext();
+  const { store } = useDialogRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const nested = store.useState("nested", (0, import_internal.subSlot)(slot, "nested"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "ts"));
+  const nestedOpenDialogCount = store.useState("nestedOpenDialogCount", (0, import_internal.subSlot)(slot, "nodc"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const setViewportElement = store.useStateSetter("viewportElement", (0, import_internal.subSlot)(slot, "sve"));
+  const state = {
+    open,
+    nested,
+    transitionStatus,
+    nestedDialogOpen: nestedOpenDialogCount > 0
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      enabled: keepMounted || mounted,
+      state,
+      ref: [ref, setViewportElement],
+      stateAttributesMapping: viewportStateAttributesMapping,
+      props: [
+        {
+          role: "presentation",
+          hidden: !mounted,
+          style: { pointerEvents: !open ? "none" : void 0 },
+          children
+        },
+        elementProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Backdrop: DialogBackdrop,
+  Popup: DialogPopup,
+  Viewport: DialogViewport,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  createHandle: createDialogHandle,
+  Handle: DialogHandle
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  DialogHandle,
+  DialogStore,
+  DialogViewportDataAttributes,
+  createDialogHandle,
+  useDialogRootContext,
+  useRenderDialogRoot
+});