@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/popover.cjs

@@ -0,0 +1,966 @@
+"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 popover_exports = {};
+__export(popover_exports, {
+  Popover: () => Popover,
+  PopoverHandle: () => PopoverHandle,
+  PopoverStore: () => PopoverStore,
+  PopoverViewportCssVars: () => PopoverViewportCssVars,
+  createPopoverHandle: () => createPopoverHandle,
+  usePopoverPortalContext: () => usePopoverPortalContext,
+  usePopoverPositionerContext: () => usePopoverPositionerContext,
+  usePopoverRootContext: () => usePopoverRootContext
+});
+module.exports = __toCommonJS(popover_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_mergeProps = require("./utils/mergeProps.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useBaseUiId = require("./utils/useBaseUiId.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_empty = require("./utils/empty.cjs");
+var import_ReactStore = require("./utils/store/ReactStore.cjs");
+var import_createSelector = require("./utils/store/createSelector.cjs");
+var import_useTimeout = require("./utils/useTimeout.cjs");
+var import_useClick = require("./utils/floating/useClick.cjs");
+var import_useDismiss = require("./utils/floating/useDismiss.cjs");
+var import_FocusGuard = require("./utils/floating/FocusGuard.cjs");
+var import_FloatingTree = require("./utils/floating/FloatingTree.cjs");
+var import_FloatingFocusManager = require("./utils/floating/FloatingFocusManager.cjs");
+var import_FloatingPortal = require("./utils/floating/FloatingPortal.cjs");
+var import_useHoverFloatingInteraction = require("./utils/floating/useHoverFloatingInteraction.cjs");
+var import_useAnchorPositioning = require("./utils/useAnchorPositioning.cjs");
+var import_usePositioner = require("./utils/usePositioner.cjs");
+var import_usePopupViewport = require("./utils/usePopupViewport.cjs");
+var import_useAnchoredPopupScrollLock = require("./utils/useAnchoredPopupScrollLock.cjs");
+var import_adaptiveOriginMiddleware = require("./utils/adaptiveOriginMiddleware.cjs");
+var import_InternalBackdrop = require("./utils/InternalBackdrop.cjs");
+var import_useAnimationsFinished = require("./utils/useAnimationsFinished.cjs");
+var import_useOpenChangeComplete = require("./utils/useOpenChangeComplete.cjs");
+var import_getDisabledMountTransitionStyles = require("./utils/getDisabledMountTransitionStyles.cjs");
+var import_constants = require("./utils/constants.cjs");
+var import_closePart = require("./utils/closePart.cjs");
+var import_popupStateMapping = require("./utils/popupStateMapping.cjs");
+var import_useTransitionStatus = require("./utils/useTransitionStatus.cjs");
+var import_keys = require("./utils/composite/keys.cjs");
+var import_inertValue = require("./utils/inertValue.cjs");
+var import_dom = require("./utils/dom.cjs");
+var import_useHoverReferenceInteraction = require("./utils/floating/useHoverReferenceInteraction.cjs");
+var import_useOpenInteractionType = require("./utils/useOpenInteractionType.cjs");
+var import_popupStateMapping2 = require("./utils/popupStateMapping.cjs");
+var import_popups = require("./utils/popups/index.cjs");
+var import_useTriggerFocusGuards = require("./utils/popups/useTriggerFocusGuards.cjs");
+var import_popupTriggerMap = require("./utils/popups/popupTriggerMap.cjs");
+const OPEN_DELAY = 300;
+const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+function createInitialPopoverState() {
+  return {
+    ...(0, import_popups.createInitialPopupStoreState)(),
+    disabled: false,
+    modal: false,
+    focusManagerModal: false,
+    instantType: void 0,
+    openMethod: null,
+    openChangeReason: null,
+    titleElementId: void 0,
+    descriptionElementId: void 0,
+    stickIfOpen: true,
+    nested: false,
+    openOnHover: false,
+    closeDelay: 0,
+    hasViewport: false
+  };
+}
+const popoverSelectors = {
+  ...import_popups.popupStoreSelectors,
+  disabled: (0, import_createSelector.createSelector)((state) => state.disabled),
+  instantType: (0, import_createSelector.createSelector)((state) => state.instantType),
+  openMethod: (0, import_createSelector.createSelector)((state) => state.openMethod),
+  openChangeReason: (0, import_createSelector.createSelector)((state) => state.openChangeReason),
+  modal: (0, import_createSelector.createSelector)((state) => state.modal),
+  focusManagerModal: (0, import_createSelector.createSelector)((state) => state.focusManagerModal),
+  stickIfOpen: (0, import_createSelector.createSelector)((state) => state.stickIfOpen),
+  titleElementId: (0, import_createSelector.createSelector)((state) => state.titleElementId),
+  descriptionElementId: (0, import_createSelector.createSelector)(
+    (state) => state.descriptionElementId
+  ),
+  openOnHover: (0, import_createSelector.createSelector)((state) => state.openOnHover),
+  closeDelay: (0, import_createSelector.createSelector)((state) => state.closeDelay),
+  hasViewport: (0, import_createSelector.createSelector)((state) => state.hasViewport)
+};
+class PopoverStore extends import_ReactStore.ReactStore {
+  constructor(initialState, floatingId, nested = false) {
+    const initial = { ...createInitialPopoverState(), ...initialState };
+    const triggerElements = new import_popupTriggerMap.PopupTriggerMap();
+    if (initial.open && initialState?.mounted === void 0) {
+      initial.mounted = true;
+    }
+    initial.floatingRootContext = (0, import_popups.createPopupFloatingRootContext)(
+      triggerElements,
+      floatingId,
+      nested
+    );
+    super(
+      initial,
+      {
+        popupRef: { current: null },
+        backdropRef: { current: null },
+        internalBackdropRef: { current: null },
+        onOpenChange: void 0,
+        onOpenChangeComplete: void 0,
+        triggerFocusTargetRef: { current: null },
+        beforeContentFocusGuardRef: { current: null },
+        stickIfOpenTimeout: new import_useTimeout.Timeout(),
+        triggerElements
+      },
+      popoverSelectors
+    );
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    const isHover = eventDetails.reason === import_createChangeEventDetails.REASONS.triggerHover;
+    const isKeyboardClick = eventDetails.reason === import_createChangeEventDetails.REASONS.triggerPress && eventDetails.event.detail === 0;
+    const isDismissClose = !nextOpen && (eventDetails.reason === import_createChangeEventDetails.REASONS.escapeKey || eventDetails.reason == null);
+    const shouldPreventUnmountOnClose = (0, import_popups.attachPreventUnmountOnClose)(eventDetails);
+    const activeTriggerId = this.select("activeTriggerId");
+    if (!nextOpen && eventDetails.reason === import_createChangeEventDetails.REASONS.closePress && eventDetails.trigger == null && activeTriggerId != null) {
+      eventDetails.trigger = this.context.triggerElements.getById(activeTriggerId) ?? this.select("activeTriggerElement") ?? void 0;
+    }
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+    const changeState = () => {
+      const updatedState = {
+        open: nextOpen,
+        openChangeReason: eventDetails.reason
+      };
+      (0, import_popups.setPopupOpenState)(
+        updatedState,
+        nextOpen,
+        eventDetails.trigger,
+        shouldPreventUnmountOnClose()
+      );
+      this.update(updatedState);
+    };
+    if (isHover) {
+      this.set("stickIfOpen", true);
+      this.context.stickIfOpenTimeout.start(import_constants.PATIENT_CLICK_THRESHOLD, () => {
+        this.set("stickIfOpen", false);
+      });
+      (0, import_octane.flushSync)(changeState);
+    } else {
+      changeState();
+    }
+    if (isKeyboardClick || isDismissClose) {
+      this.set("instantType", isKeyboardClick ? "click" : "dismiss");
+    } else if (eventDetails.reason === import_createChangeEventDetails.REASONS.focusOut) {
+      this.set("instantType", "focus");
+    } else {
+      this.set("instantType", void 0);
+    }
+  };
+  disposeEffect = () => {
+    return this.context.stickIfOpenTimeout.disposeEffect();
+  };
+  static useStore(externalStore, initialState, slot) {
+    const { store, internalStore } = (0, import_popups.usePopupStore)(
+      externalStore,
+      (floatingId, nested) => new PopoverStore(initialState, floatingId, nested),
+      false,
+      (0, import_internal.subSlot)(slot, "pop")
+    );
+    (0, import_octane.useEffect)(
+      () => internalStore?.disposeEffect(),
+      [internalStore],
+      (0, import_internal.subSlot)(slot, "dispose")
+    );
+    return store;
+  }
+}
+class PopoverHandle {
+  store;
+  constructor() {
+    this.store = new PopoverStore();
+  }
+  open(triggerId) {
+    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) ?? void 0 : void 0;
+    if (triggerId && !triggerElement) {
+      throw new Error(`Base UI: PopoverHandle.open: No trigger found with id "${triggerId}".`);
+    }
+    this.store.setOpen(
+      true,
+      (0, import_createChangeEventDetails.createChangeEventDetails)(
+        import_createChangeEventDetails.REASONS.imperativeAction,
+        void 0,
+        triggerElement
+      )
+    );
+  }
+  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 createPopoverHandle() {
+  return new PopoverHandle();
+}
+const PopoverRootContext = (0, import_octane.createContext)(void 0);
+function usePopoverRootContext(optional) {
+  const context = (0, import_octane.useContext)(PopoverRootContext);
+  if (context === void 0 && !optional) {
+    throw new Error(
+      "Base UI: PopoverRootContext is missing. Popover parts must be placed within <Popover.Root>."
+    );
+  }
+  return context;
+}
+const PopoverPortalContext = (0, import_octane.createContext)(void 0);
+function usePopoverPortalContext() {
+  const value = (0, import_octane.useContext)(PopoverPortalContext);
+  if (value === void 0) {
+    throw new Error("Base UI: <Popover.Portal> is missing.");
+  }
+  return value;
+}
+const PopoverPositionerContext = (0, import_octane.createContext)(
+  void 0
+);
+function usePopoverPositionerContext() {
+  const context = (0, import_octane.useContext)(PopoverPositionerContext);
+  if (!context) {
+    throw new Error(
+      "Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>."
+    );
+  }
+  return context;
+}
+function PopoverInteractions(props) {
+  const slot = (0, import_internal.S)("PopoverInteractions");
+  const { store, modal } = props;
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const dismiss = (0, import_useDismiss.useDismiss)(
+    floatingRootContext,
+    {
+      outsidePressEvent: {
+        mouse: modal === "trap-focus" ? "sloppy" : "intentional",
+        touch: "sloppy"
+      }
+    },
+    (0, import_internal.subSlot)(slot, "dismiss")
+  );
+  const activeTriggerProps = dismiss.reference ?? import_empty.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? import_empty.EMPTY_OBJECT;
+  const popupProps = (0, import_octane.useMemo)(
+    () => (0, import_mergeProps.mergeProps)(import_popups.FOCUSABLE_POPUP_PROPS, dismiss.floating),
+    [dismiss.floating],
+    (0, import_internal.subSlot)(slot, "pp")
+  );
+  (0, import_popups.usePopupInteractionProps)(
+    store,
+    { activeTriggerProps, inactiveTriggerProps, popupProps },
+    (0, import_internal.subSlot)(slot, "pip")
+  );
+  return null;
+}
+function PopoverRootComponent(props) {
+  const slot = (0, import_internal.S)("PopoverRoot");
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    modal = false,
+    handle,
+    actionsRef,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const store = PopoverStore.useStore(
+    handle?.store,
+    {
+      modal,
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp
+    },
+    (0, import_internal.subSlot)(slot, "store")
+  );
+  (0, import_popups.useInitialOpenSync)(
+    store,
+    openProp,
+    defaultOpen,
+    defaultTriggerIdProp,
+    (0, import_internal.subSlot)(slot, "ios")
+  );
+  store.useControlledProp("openProp", openProp, (0, import_internal.subSlot)(slot, "cp-open"));
+  store.useControlledProp("triggerIdProp", triggerIdProp, (0, import_internal.subSlot)(slot, "cp-tid"));
+  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"));
+  const nested = (0, import_FloatingTree.useFloatingParentNodeId)() != null;
+  store.useContextCallback("onOpenChange", onOpenChange, (0, import_internal.subSlot)(slot, "cc-change"));
+  store.useContextCallback(
+    "onOpenChangeComplete",
+    onOpenChangeComplete,
+    (0, import_internal.subSlot)(slot, "cc-complete")
+  );
+  (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,
+    () => {
+      store.update({ stickIfOpen: true, openChangeReason: null });
+    },
+    (0, import_internal.subSlot)(slot, "ost")
+  );
+  store.useSyncedValues({ modal, nested }, (0, import_internal.subSlot)(slot, "sv"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open) {
+        store.context.stickIfOpenTimeout.clear();
+      }
+    },
+    [store, open],
+    (0, import_internal.subSlot)(slot, "e:stick")
+  );
+  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")
+  );
+  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)(PopoverInteractions, { key: "interactions", store, modal }) : null,
+    (0, import_octane.createElement)(import_octane.Fragment, { key: "children", children: resolvedChildren })
+  ];
+  return (0, import_octane.createElement)(PopoverRootContext.Provider, {
+    value: contextValue,
+    children: content
+  });
+}
+function PopoverRoot(props) {
+  const slot = (0, import_internal.S)("PopoverRootWrapper");
+  if (usePopoverRootContext(true)) {
+    return (0, import_octane.createElement)(PopoverRootComponent, props);
+  }
+  return (0, import_octane.createElement)(import_FloatingTree.FloatingTree, {
+    children: (0, import_octane.createElement)(PopoverRootComponent, props)
+  });
+}
+function PopoverTrigger(componentProps) {
+  const slot = (0, import_internal.S)("PopoverTrigger");
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    nativeButton = true,
+    handle,
+    payload,
+    openOnHover = false,
+    delay = OPEN_DELAY,
+    closeDelay = 0,
+    id: idProp,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const rootContext = usePopoverRootContext(true);
+  const store = handle?.store ?? rootContext?.store;
+  if (!store) {
+    throw new Error(
+      "Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle."
+    );
+  }
+  const thisTriggerId = (0, import_useBaseUiId.useBaseUiId)(idProp, (0, import_internal.subSlot)(slot, "id"));
+  const isTriggerActive = store.useState("isTriggerActive", (0, import_internal.subSlot)(slot, "ita"), thisTriggerId);
+  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, disabled, openOnHover, closeDelay },
+    (0, import_internal.subSlot)(slot, "tdf")
+  );
+  const openReason = store.useState("openChangeReason", (0, import_internal.subSlot)(slot, "ocr"));
+  const stickIfOpen = store.useState("stickIfOpen", (0, import_internal.subSlot)(slot, "sio"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "om"));
+  const focusManagerModal = store.useState("focusManagerModal", (0, import_internal.subSlot)(slot, "fmm"));
+  const hoverProps = (0, import_useHoverReferenceInteraction.useHoverReferenceInteraction)(
+    floatingContext,
+    {
+      enabled: !disabled && floatingContext != null && openOnHover && (openMethod !== "touch" || openReason !== import_createChangeEventDetails.REASONS.triggerPress),
+      mouseOnly: true,
+      move: false,
+      handleClose: (0, import_useHoverReferenceInteraction.safePolygon)(),
+      restMs: delay,
+      delay: { close: closeDelay },
+      triggerElementRef,
+      isActiveTrigger: isTriggerActive,
+      isClosing: () => store.select("transitionStatus") === "ending"
+    },
+    (0, import_internal.subSlot)(slot, "hover")
+  );
+  const click = (0, import_useClick.useClick)(
+    floatingContext,
+    { enabled: floatingContext != null, stickIfOpen },
+    (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 rootTriggerProps = store.useState(
+    "triggerProps",
+    (0, import_internal.subSlot)(slot, "tp"),
+    isMountedByThisTrigger
+  );
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const stateAttributesMapping = {
+    open(value) {
+      if (value && openReason === import_createChangeEventDetails.REASONS.triggerPress) {
+        return import_popupStateMapping2.pressableTriggerOpenStateMapping.open(value);
+      }
+      return import_popupStateMapping2.triggerOpenStateMapping.open(value);
+    }
+  };
+  const { preFocusGuardRef, handlePreFocusGuardFocus, handleFocusTargetFocus } = (0, import_useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef, (0, import_internal.subSlot)(slot, "tfg"));
+  const state = { disabled, open: isOpenedByThisTrigger };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      state,
+      ref: [buttonRef, ref, registerTrigger, triggerElementRef],
+      props: [
+        click.reference,
+        hoverProps,
+        rootTriggerProps,
+        interactionTypeProps,
+        {
+          [CLICK_TRIGGER_IDENTIFIER]: "",
+          id: thisTriggerId,
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpenedByThisTrigger,
+          "aria-controls": popupId
+        },
+        elementProps,
+        getButtonProps
+      ],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const keyedElement = (0, import_octane.createElement)(import_octane.Fragment, { key: thisTriggerId, children: element });
+  if (isMountedByThisTrigger && !focusManagerModal) {
+    return [
+      (0, import_octane.createElement)(import_FocusGuard.FocusGuard, {
+        key: `${thisTriggerId}-pre-guard`,
+        ref: preFocusGuardRef,
+        onFocus: handlePreFocusGuardFocus
+      }),
+      keyedElement,
+      (0, import_octane.createElement)(import_FocusGuard.FocusGuard, {
+        key: `${thisTriggerId}-post-guard`,
+        ref: store.context.triggerFocusTargetRef,
+        onFocus: handleFocusTargetFocus
+      })
+    ];
+  }
+  return keyedElement;
+}
+function PopoverPortal(props) {
+  const slot = (0, import_internal.S)("PopoverPortal");
+  const { keepMounted = false, ref, ...portalProps } = props;
+  const { store } = usePopoverRootContext();
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return (0, import_octane.createElement)(PopoverPortalContext.Provider, {
+    value: keepMounted,
+    children: (0, import_octane.createElement)(import_FloatingPortal.FloatingPortal, { ref, ...portalProps })
+  });
+}
+function PopoverPositioner(componentProps) {
+  const slot = (0, import_internal.S)("PopoverPositioner");
+  const {
+    render,
+    className,
+    style,
+    anchor,
+    positionMethod = "absolute",
+    side = "bottom",
+    align = "center",
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionBoundary = "clipping-ancestors",
+    collisionPadding = 5,
+    arrowPadding = 5,
+    sticky = false,
+    disableAnchorTracking = false,
+    collisionAvoidance = import_constants.POPUP_COLLISION_AVOIDANCE,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const { store } = usePopoverRootContext();
+  const keepMounted = usePopoverPortalContext();
+  const nodeId = (0, import_FloatingTree.useFloatingNodeId)(void 0, (0, import_internal.subSlot)(slot, "nodeId"));
+  const floatingRootContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const openReason = store.useState("openChangeReason", (0, import_internal.subSlot)(slot, "reason"));
+  const triggerElement = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "trigger"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "method"));
+  const positionerElement = store.useState("positionerElement", (0, import_internal.subSlot)(slot, "posEl"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const hasViewport = store.useState("hasViewport", (0, import_internal.subSlot)(slot, "viewport"));
+  const prevTriggerElementRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "prevTrigger"));
+  const runOnceAnimationsFinish = (0, import_useAnimationsFinished.useAnimationsFinished)(
+    positionerElement,
+    false,
+    false,
+    (0, import_internal.subSlot)(slot, "anim")
+  );
+  const positioning = (0, import_useAnchorPositioning.useAnchorPositioning)(
+    {
+      anchor,
+      floatingRootContext,
+      positionMethod,
+      mounted,
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      arrowPadding,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      disableAnchorTracking,
+      keepMounted,
+      nodeId,
+      collisionAvoidance,
+      adaptiveOrigin: hasViewport ? import_adaptiveOriginMiddleware.adaptiveOrigin : void 0
+    },
+    (0, import_internal.subSlot)(slot, "positioning")
+  );
+  const domReference = floatingRootContext.useState("domReferenceElement", (0, import_internal.subSlot)(slot, "domref"));
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      const currentTriggerElement = domReference;
+      const prevTriggerElement = prevTriggerElementRef.current;
+      if (currentTriggerElement) {
+        prevTriggerElementRef.current = currentTriggerElement;
+      }
+      if (prevTriggerElement && currentTriggerElement && currentTriggerElement !== prevTriggerElement) {
+        store.set("instantType", void 0);
+        const ac = new AbortController();
+        runOnceAnimationsFinish(() => {
+          store.set("instantType", "trigger-change");
+        }, ac.signal);
+        return () => {
+          ac.abort();
+        };
+      }
+      return void 0;
+    },
+    [domReference, runOnceAnimationsFinish, store],
+    (0, import_internal.subSlot)(slot, "e:trigger")
+  );
+  (0, import_useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(
+    open && modal === true && openReason !== import_createChangeEventDetails.REASONS.triggerHover,
+    openMethod === "touch",
+    positionerElement,
+    triggerElement
+  );
+  const setPositionerElement = (0, import_octane.useCallback)(
+    (element2) => {
+      store.set("positionerElement", element2);
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "setPosEl")
+  );
+  const state = {
+    open,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
+    instant: instantType
+  };
+  const element = (0, import_usePositioner.usePositioner)(
+    componentProps,
+    state,
+    {
+      styles: positioning.positionerStyles,
+      transitionStatus,
+      props: elementProps,
+      refs: [ref, setPositionerElement],
+      hidden: !mounted,
+      inert: !open
+    },
+    (0, import_internal.subSlot)(slot, "positioner")
+  );
+  return (0, import_octane.createElement)(PopoverPositionerContext.Provider, {
+    value: positioning,
+    // Octane reconciles an ARRAY child as a keyed list, so both slots carry a key. Only the
+    // modal path renders the backdrop, which is why a non-modal popover never warned.
+    children: [
+      mounted && modal === true && openReason !== import_createChangeEventDetails.REASONS.triggerHover ? (0, import_octane.createElement)(import_InternalBackdrop.InternalBackdrop, {
+        key: "internal-backdrop",
+        ref: store.context.internalBackdropRef,
+        inert: (0, import_inertValue.inertValue)(!open),
+        cutout: triggerElement
+      }) : null,
+      (0, import_octane.createElement)(import_FloatingTree.FloatingNode, { key: "floating-node", id: nodeId, children: element })
+    ]
+  });
+}
+const popoverPopupStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+function PopoverPopup(componentProps) {
+  const slot = (0, import_internal.S)("PopoverPopup");
+  const { render, className, style, initialFocus, finalFocus, ref, ...elementProps } = componentProps;
+  const { store } = usePopoverRootContext();
+  const positioner = usePopoverPositionerContext();
+  const insideToolbar = false;
+  const { context: closePartContext, hasClosePart } = (0, import_closePart.useClosePartCount)();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const openMethod = store.useState("openMethod", (0, import_internal.subSlot)(slot, "method"));
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const popupProps = store.useState("popupProps", (0, import_internal.subSlot)(slot, "popupProps"));
+  const titleId = store.useState("titleElementId", (0, import_internal.subSlot)(slot, "titleId"));
+  const descriptionId = store.useState("descriptionElementId", (0, import_internal.subSlot)(slot, "descId"));
+  const modal = store.useState("modal", (0, import_internal.subSlot)(slot, "modal"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const openReason = store.useState("openChangeReason", (0, import_internal.subSlot)(slot, "reason"));
+  const activeTriggerElement = store.useState("activeTriggerElement", (0, import_internal.subSlot)(slot, "trigger"));
+  const floatingContext = store.useState("floatingRootContext", (0, import_internal.subSlot)(slot, "frc"));
+  const floatingId = floatingContext.useState("floatingId", (0, import_internal.subSlot)(slot, "fid"));
+  const disabled = store.useState("disabled", (0, import_internal.subSlot)(slot, "disabled"));
+  const openOnHover = store.useState("openOnHover", (0, import_internal.subSlot)(slot, "hover"));
+  const closeDelay = store.useState("closeDelay", (0, import_internal.subSlot)(slot, "closeDelay"));
+  const popupId = elementProps.id ?? floatingId;
+  (0, import_useOpenChangeComplete.useOpenChangeComplete)(
+    {
+      open,
+      ref: store.context.popupRef,
+      onComplete() {
+        if (open) {
+          store.context.onOpenChangeComplete?.(true);
+        }
+      }
+    },
+    (0, import_internal.subSlot)(slot, "occ")
+  );
+  (0, import_useHoverFloatingInteraction.useHoverFloatingInteraction)(
+    floatingContext,
+    { enabled: openOnHover && !disabled, closeDelay },
+    (0, import_internal.subSlot)(slot, "hoverInteraction")
+  );
+  const resolvedInitialFocus = initialFocus === void 0 ? (0, import_popups.createDefaultInitialFocus)(store.context.popupRef) : initialFocus;
+  const focusManagerModal = modal !== false && hasClosePart;
+  store.useSyncedValue("focusManagerModal", focusManagerModal, (0, import_internal.subSlot)(slot, "fmm"));
+  const setPopupElement = (0, import_octane.useCallback)(
+    (element2) => {
+      store.set("popupElement", element2);
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "setPopupEl")
+  );
+  const state = {
+    open,
+    side: positioner.side,
+    align: positioner.align,
+    instant: instantType,
+    transitionStatus
+  };
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: [ref, store.context.popupRef, setPopupElement],
+      props: [
+        popupProps,
+        {
+          id: popupId,
+          role: "dialog",
+          ...import_popups.FOCUSABLE_POPUP_PROPS,
+          "aria-labelledby": titleId,
+          "aria-describedby": descriptionId,
+          onKeyDown(event) {
+            if (insideToolbar && import_keys.COMPOSITE_KEYS.has(event.key)) {
+              event.stopPropagation();
+            }
+          }
+        },
+        (0, import_getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus),
+        elementProps
+      ],
+      stateAttributesMapping: popoverPopupStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  return (0, import_octane.createElement)(import_FloatingFocusManager.FloatingFocusManager, {
+    context: floatingContext,
+    openInteractionType: openMethod,
+    modal: focusManagerModal,
+    disabled: !mounted || openReason === import_createChangeEventDetails.REASONS.triggerHover,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    restoreFocus: "popup",
+    previousFocusableElement: (0, import_dom.isHTMLElement)(activeTriggerElement) ? activeTriggerElement : void 0,
+    nextFocusableElement: store.context.triggerFocusTargetRef,
+    beforeContentFocusGuardRef: store.context.beforeContentFocusGuardRef,
+    children: (0, import_octane.createElement)(import_closePart.ClosePartProvider, { value: closePartContext, children: element })
+  });
+}
+function PopoverArrow(componentProps) {
+  const slot = (0, import_internal.S)("PopoverArrow");
+  const { render, className, style, ref, ...elementProps } = componentProps;
+  const { store } = usePopoverRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const { arrowRef, side, align, arrowUncentered, arrowStyles } = usePopoverPositionerContext();
+  const state = {
+    open,
+    side,
+    align,
+    uncentered: arrowUncentered
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    componentProps,
+    {
+      state,
+      ref: [ref, arrowRef],
+      props: [{ style: arrowStyles, "aria-hidden": true }, elementProps],
+      stateAttributesMapping: import_popupStateMapping.popupStateMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const popoverBackdropStateAttributesMapping = {
+  ...import_popupStateMapping.popupStateMapping,
+  ...import_useTransitionStatus.transitionStatusMapping
+};
+function PopoverBackdrop(props) {
+  const slot = (0, import_internal.S)("PopoverBackdrop");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { store } = usePopoverRootContext();
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const mounted = store.useState("mounted", (0, import_internal.subSlot)(slot, "mounted"));
+  const transitionStatus = store.useState("transitionStatus", (0, import_internal.subSlot)(slot, "trans"));
+  const openReason = store.useState("openChangeReason", (0, import_internal.subSlot)(slot, "reason"));
+  const state = {
+    open,
+    transitionStatus
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    props,
+    {
+      state,
+      ref: [store.context.backdropRef, ref],
+      props: [
+        {
+          role: "presentation",
+          hidden: !mounted,
+          style: {
+            pointerEvents: openReason === import_createChangeEventDetails.REASONS.triggerHover ? "none" : void 0,
+            userSelect: "none",
+            WebkitUserSelect: "none"
+          }
+        },
+        elementProps
+      ],
+      stateAttributesMapping: popoverBackdropStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PopoverTitle(componentProps) {
+  const slot = (0, import_internal.S)("PopoverTitle");
+  const { render, className, style, ref, ...elementProps } = componentProps;
+  const { store } = usePopoverRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(elementProps.id, (0, import_internal.subSlot)(slot, "id"));
+  store.useSyncedValueWithCleanup("titleElementId", id, (0, import_internal.subSlot)(slot, "sync"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "h2",
+    componentProps,
+    {
+      ref,
+      props: [{ id }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PopoverDescription(componentProps) {
+  const slot = (0, import_internal.S)("PopoverDescription");
+  const { render, className, style, ref, ...elementProps } = componentProps;
+  const { store } = usePopoverRootContext();
+  const id = (0, import_useBaseUiId.useBaseUiId)(elementProps.id, (0, import_internal.subSlot)(slot, "id"));
+  store.useSyncedValueWithCleanup("descriptionElementId", id, (0, import_internal.subSlot)(slot, "sync"));
+  return (0, import_useRenderElement.useRenderElement)(
+    "p",
+    componentProps,
+    {
+      ref,
+      props: [{ id }, elementProps]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function PopoverClose(componentProps) {
+  const slot = (0, import_internal.S)("PopoverClose");
+  const {
+    render,
+    className,
+    style,
+    disabled = false,
+    nativeButton = true,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const { buttonRef, getButtonProps } = (0, import_useButton.useButton)(
+    { disabled, focusableWhenDisabled: false, native: nativeButton },
+    (0, import_internal.subSlot)(slot, "btn")
+  );
+  const { store } = usePopoverRootContext();
+  (0, import_closePart.useClosePartRegistration)();
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    componentProps,
+    {
+      ref: [ref, buttonRef],
+      props: [
+        {
+          onClick(event) {
+            store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.closePress, event));
+          }
+        },
+        elementProps,
+        getButtonProps
+      ]
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const PopoverViewportCssVars = {
+  /**
+   * The width of the parent popup when the previous content was rendered. Placed on the
+   * 'previous' container so the popup's dimensions can be frozen while content animates.
+   */
+  popupWidth: "--popup-width",
+  /** The height of the parent popup when the previous content was rendered. */
+  popupHeight: "--popup-height"
+};
+const viewportStateAttributesMapping = {
+  activationDirection: (value) => value ? { "data-activation-direction": value } : null
+};
+function PopoverViewport(componentProps) {
+  const slot = (0, import_internal.S)("PopoverViewport");
+  const { render, className, style, children, ref, ...elementProps } = componentProps;
+  const { store } = usePopoverRootContext();
+  const { side } = usePopoverPositionerContext();
+  const instantType = store.useState("instantType", (0, import_internal.subSlot)(slot, "instant"));
+  const { children: childrenToRender, state: viewportState } = (0, import_usePopupViewport.usePopupViewport)(
+    { store, side, cssVars: PopoverViewportCssVars, children },
+    (0, import_internal.subSlot)(slot, "vp")
+  );
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    {
+      state,
+      ref,
+      props: [elementProps, { children: childrenToRender }],
+      stateAttributesMapping: viewportStateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Positioner: PopoverPositioner,
+  Popup: PopoverPopup,
+  Viewport: PopoverViewport,
+  Arrow: PopoverArrow,
+  Backdrop: PopoverBackdrop,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Close: PopoverClose,
+  createHandle: createPopoverHandle,
+  Handle: PopoverHandle
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  PopoverHandle,
+  PopoverStore,
+  PopoverViewportCssVars,
+  createPopoverHandle,
+  usePopoverPortalContext,
+  usePopoverPositionerContext,
+  usePopoverRootContext
+});