@bigbinary/neeto-atoms 1.0.133-beta1 → 1.0.133

package/dist/DialogTrigger-a3diAOif.js

@@ -0,0 +1,992 @@
+import * as React from 'react';
+import { f as formatErrorMessage, u as useRenderElement, t as transitionStatusMapping, p as popupStateMapping, a as useButton, c as createChangeEventDetails, b as closePress, d as useBaseUiId, e as useIsoLayoutEffect, g as useTransitionStatus, h as useStableCallback, i as useOpenChangeComplete, j as useId, k as useFloatingParentNodeId, l as useRefWithInit, F as FloatingRootStore, m as getFloatingFocusElement, E as EMPTY_OBJECT, C as CommonPopupDataAttributes, n as FloatingFocusManager, o as FloatingPortal, I as InternalBackdrop, q as inertValue, r as useOpenInteractionType, s as imperativeAction, v as useDismiss, w as useScrollLock, x as useInteractions, y as getTarget, z as contains, R as ReactStore, P as PopupTriggerMap, A as popupStoreSelectors, B as createInitialPopupStoreState, D as createSelector, G as useOnFirstRender, H as useClick, J as CLICK_TRIGGER_IDENTIFIER, K as triggerOpenStateMapping } from './useOpenInteractionType-CVfxIsuz.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-dom';
+import { p as isElement } from './floating-ui.utils.dom-Bw_Rc4bg.js';
+
+const DialogRootContext = /*#__PURE__*/React.createContext(undefined);
+function useDialogRootContext(optional) {
+  const dialogRootContext = React.useContext(DialogRootContext);
+  if (optional === false && dialogRootContext === undefined) {
+    throw new Error(formatErrorMessage(27));
+  }
+  return dialogRootContext;
+}
+
+const stateAttributesMapping$1 = {
+  ...popupStateMapping,
+  ...transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogBackdrop = /*#__PURE__*/React.forwardRef(function DialogBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping: stateAttributesMapping$1,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      }
+    }, elementProps],
+    enabled: forceRender || !nested
+  });
+});
+
+/**
+ * A button that closes the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogClose = /*#__PURE__*/React.forwardRef(function DialogClose(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const open = store.useState('open');
+  function handleClick(event) {
+    if (open) {
+      store.setOpen(false, createChangeEventDetails(closePress, event.nativeEvent));
+    }
+  }
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled
+  };
+  return useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef],
+    props: [{
+      onClick: handleClick
+    }, elementProps, getButtonProps]
+  });
+});
+
+/**
+ * A paragraph with additional information about the dialog.
+ * Renders a `<p>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogDescription = /*#__PURE__*/React.forwardRef(function DialogDescription(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const id = useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('descriptionElementId', id);
+  return useRenderElement('p', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+
+/**
+ * Returns a callback ref that registers/unregisters the trigger element in the store.
+ *
+ * @param store The Store instance where the trigger should be registered.
+ */
+function useTriggerRegistration(id, store) {
+  // Keep track of the currently registered element to unregister it on unmount or id change.
+  const registeredElementIdRef = React.useRef(null);
+  const registeredElementRef = React.useRef(null);
+  return React.useCallback(element => {
+    if (id === undefined) {
+      return;
+    }
+    if (registeredElementIdRef.current !== null) {
+      const registeredId = registeredElementIdRef.current;
+      const registeredElement = registeredElementRef.current;
+      const currentElement = store.context.triggerElements.getById(registeredId);
+      if (registeredElement && currentElement === registeredElement) {
+        store.context.triggerElements.delete(registeredId);
+      }
+      registeredElementIdRef.current = null;
+      registeredElementRef.current = null;
+    }
+    if (element !== null) {
+      registeredElementIdRef.current = id;
+      registeredElementRef.current = element;
+      store.context.triggerElements.add(id, element);
+    }
+  }, [store, id]);
+}
+
+/**
+ * Sets up trigger data forwarding to the store.
+ *
+ * @param triggerId Id of the trigger.
+ * @param triggerElement The trigger DOM element.
+ * @param store The Store instance managing the popup state.
+ * @param stateUpdates An object with state updates to apply when the trigger is active.
+ */
+function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
+  const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
+  const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
+  const registerTrigger = useStableCallback(element => {
+    baseRegisterTrigger(element);
+    if (!element || !store.select('open')) {
+      return;
+    }
+    const activeTriggerId = store.select('activeTriggerId');
+    if (activeTriggerId === triggerId) {
+      store.update({
+        activeTriggerElement: element,
+        ...stateUpdates
+      });
+      return;
+    }
+    if (activeTriggerId == null) {
+      // This runs when popup is open, but no active trigger is set.
+      // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
+      // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).
+      // This is mostly for compatibility with contained triggers where no explicit `triggerId` was required in controlled mode.
+      store.update({
+        activeTriggerId: triggerId,
+        activeTriggerElement: element,
+        ...stateUpdates
+      });
+    }
+  });
+  useIsoLayoutEffect(() => {
+    if (isMountedByThisTrigger) {
+      store.update({
+        activeTriggerElement: triggerElementRef.current,
+        ...stateUpdates
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMountedByThisTrigger, store, triggerElementRef, ...Object.values(stateUpdates)]);
+  return {
+    registerTrigger,
+    isMountedByThisTrigger
+  };
+}
+/**
+ * Ensures that when there's only one trigger element registered, it is set as the active trigger.
+ * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
+ * with the contained triggers.
+ *
+ * This should be called on the Root part.
+ *
+ * @param open Whether the popup is open.
+ * @param store The Store instance managing the popup state.
+ */
+function useImplicitActiveTrigger(store) {
+  const open = store.useState('open');
+  useIsoLayoutEffect(() => {
+    if (open && !store.select('activeTriggerId') && store.context.triggerElements.size === 1) {
+      const iteratorResult = store.context.triggerElements.entries().next();
+      if (!iteratorResult.done) {
+        const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
+        store.update({
+          activeTriggerId: implicitTriggerId,
+          activeTriggerElement: implicitTriggerElement
+        });
+      }
+    }
+  }, [open, store]);
+}
+
+/**
+ * Mangages the mounted state of the popup.
+ * Sets up the transition status listeners and handles unmounting when needed.
+ * Updates the `mounted` and `transitionStatus` states in the store.
+ *
+ * @param open Whether the popup is open.
+ * @param store The Store instance managing the popup state.
+ * @param onUnmount Optional callback to be called when the popup is unmounted.
+ *
+ * @returns A function to forcibly unmount the popup.
+ */
+function useOpenStateTransitions(open, store, onUnmount) {
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useTransitionStatus(open);
+  store.useSyncedValues({
+    mounted,
+    transitionStatus
+  });
+  const forceUnmount = useStableCallback(() => {
+    setMounted(false);
+    store.update({
+      activeTriggerId: null,
+      activeTriggerElement: null,
+      mounted: false
+    });
+    store.context.onOpenChangeComplete?.(false);
+  });
+  const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
+  useOpenChangeComplete({
+    enabled: !preventUnmountingOnClose,
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (!open) {
+        forceUnmount();
+      }
+    }
+  });
+  return {
+    forceUnmount,
+    transitionStatus
+  };
+}
+
+/**
+ * Initializes a FloatingRootStore that is kept in sync with the provided PopupStore.
+ * The new instance is created only once and updated on every render.
+ */
+function useSyncedFloatingRootContext(options) {
+  const {
+    popupStore,
+    treatPopupAsFloatingElement = false,
+    onOpenChange
+  } = options;
+  const floatingId = useId();
+  const nested = useFloatingParentNodeId() != null;
+  const open = popupStore.useState('open');
+  const referenceElement = popupStore.useState('activeTriggerElement');
+  const floatingElement = popupStore.useState(treatPopupAsFloatingElement ? 'popupElement' : 'positionerElement');
+  const triggerElements = popupStore.context.triggerElements;
+  const store = useRefWithInit(() => new FloatingRootStore({
+    open,
+    transitionStatus: undefined,
+    referenceElement,
+    floatingElement,
+    triggerElements,
+    onOpenChange,
+    floatingId,
+    syncOnly: true,
+    nested
+  })).current;
+  useIsoLayoutEffect(() => {
+    const valuesToSync = {
+      open,
+      floatingId,
+      referenceElement,
+      floatingElement
+    };
+    if (isElement(referenceElement)) {
+      valuesToSync.domReferenceElement = referenceElement;
+    }
+    if (store.state.positionReference === store.state.referenceElement) {
+      valuesToSync.positionReference = referenceElement;
+    }
+    store.update(valuesToSync);
+  }, [open, floatingId, referenceElement, floatingElement, store]);
+
+  // TODO: When `setOpen` is a part of the PopupStore API, we don't need to sync it.
+  store.context.onOpenChange = onOpenChange;
+  store.context.nested = nested;
+  return store;
+}
+
+const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
+
+/**
+ * Adds base screen reader props to the reference and floating elements for a
+ * given floating element `role`.
+ * @see https://floating-ui.com/docs/useRole
+ */
+function useRole(context, props = {}) {
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const defaultFloatingId = store.useState('floatingId');
+  const domReference = store.useState('domReferenceElement');
+  const floatingElement = store.useState('floatingElement');
+  const {
+    role = 'dialog'
+  } = props;
+  const defaultReferenceId = useId();
+  const referenceId = domReference?.id || defaultReferenceId;
+  const floatingId = React.useMemo(() => getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
+  const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
+  const parentId = useFloatingParentNodeId();
+  const isNested = parentId != null;
+  const trigger = React.useMemo(() => {
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return EMPTY_OBJECT;
+    }
+    return {
+      'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
+      'aria-expanded': 'false',
+      ...(ariaRole === 'listbox' && {
+        role: 'combobox'
+      }),
+      ...(ariaRole === 'menu' && isNested && {
+        role: 'menuitem'
+      }),
+      ...(role === 'select' && {
+        'aria-autocomplete': 'none'
+      }),
+      ...(role === 'combobox' && {
+        'aria-autocomplete': 'list'
+      })
+    };
+  }, [ariaRole, isNested, role]);
+  const reference = React.useMemo(() => {
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return {
+        [`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open ? floatingId : undefined
+      };
+    }
+    const triggerProps = trigger;
+    return {
+      ...triggerProps,
+      'aria-expanded': open ? 'true' : 'false',
+      'aria-controls': open ? floatingId : undefined,
+      ...(ariaRole === 'menu' && {
+        id: referenceId
+      })
+    };
+  }, [ariaRole, floatingId, open, referenceId, role, trigger]);
+  const floating = React.useMemo(() => {
+    const floatingProps = {
+      id: floatingId,
+      ...(ariaRole && {
+        role: ariaRole
+      })
+    };
+    if (ariaRole === 'tooltip' || role === 'label') {
+      return floatingProps;
+    }
+    return {
+      ...floatingProps,
+      ...(ariaRole === 'menu' && {
+        'aria-labelledby': referenceId
+      })
+    };
+  }, [ariaRole, floatingId, referenceId, role]);
+  const item = React.useCallback(({
+    active,
+    selected
+  }) => {
+    const commonProps = {
+      role: 'option',
+      ...(active && {
+        id: `${floatingId}-fui-option`
+      })
+    };
+
+    // For `menu`, we are unable to tell if the item is a `menuitemradio`
+    // or `menuitemcheckbox`. For backwards-compatibility reasons, also
+    // avoid defaulting to `menuitem` as it may overwrite custom role props.
+    switch (role) {
+      case 'select':
+      case 'combobox':
+        return {
+          ...commonProps,
+          'aria-selected': selected
+        };
+    }
+    return {};
+  }, [floatingId, role]);
+  return React.useMemo(() => ({
+    reference,
+    floating,
+    item,
+    trigger
+  }), [reference, floating, trigger, item]);
+}
+
+let DialogPopupCssVars = /*#__PURE__*/function (DialogPopupCssVars) {
+  /**
+   * Indicates how many dialogs are nested within.
+   * @type {number}
+   */
+  DialogPopupCssVars["nestedDialogs"] = "--nested-dialogs";
+  return DialogPopupCssVars;
+}({});
+
+let DialogPopupDataAttributes = function (DialogPopupDataAttributes) {
+  /**
+   * Present when the dialog is open.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["open"] = CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the dialog is closed.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the dialog is animating in.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the dialog is animating out.
+   */
+  DialogPopupDataAttributes[DialogPopupDataAttributes["endingStyle"] = CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the dialog is nested within another dialog.
+   */
+  DialogPopupDataAttributes["nested"] = "data-nested";
+  /**
+   * Present when the dialog has other open dialogs nested within it.
+   */
+  DialogPopupDataAttributes["nestedDialogOpen"] = "data-nested-dialog-open";
+  return DialogPopupDataAttributes;
+}({});
+
+const DialogPortalContext = /*#__PURE__*/React.createContext(undefined);
+function useDialogPortalContext() {
+  const value = React.useContext(DialogPortalContext);
+  if (value === undefined) {
+    throw new Error(formatErrorMessage(26));
+  }
+  return value;
+}
+
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+const HOME = 'Home';
+const END = 'End';
+const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
+const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
+const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
+new Set([...ARROW_KEYS, HOME, END]);
+const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
+
+const stateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      [DialogPopupDataAttributes.nestedDialogOpen]: ''
+    } : null;
+  }
+};
+
+/**
+ * A container for the dialog contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogPopup = /*#__PURE__*/React.forwardRef(function DialogPopup(componentProps, forwardedRef) {
+  const {
+    className,
+    finalFocus,
+    initialFocus,
+    render,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const descriptionElementId = store.useState('descriptionElementId');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const floatingRootContext = store.useState('floatingRootContext');
+  const rootPopupProps = store.useState('popupProps');
+  const modal = store.useState('modal');
+  const mounted = store.useState('mounted');
+  const nested = store.useState('nested');
+  const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
+  const open = store.useState('open');
+  const openMethod = store.useState('openMethod');
+  const titleElementId = store.useState('titleElementId');
+  const transitionStatus = store.useState('transitionStatus');
+  const role = store.useState('role');
+  useDialogPortalContext();
+  useOpenChangeComplete({
+    open,
+    ref: store.context.popupRef,
+    onComplete() {
+      if (open) {
+        store.context.onOpenChangeComplete?.(true);
+      }
+    }
+  });
+
+  // Default initial focus logic:
+  // If opened by touch, focus the popup element to prevent the virtual keyboard from opening
+  // (this is required for Android specifically as iOS handles this automatically).
+  function defaultInitialFocus(interactionType) {
+    if (interactionType === 'touch') {
+      return store.context.popupRef.current;
+    }
+    return true;
+  }
+  const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
+  const nestedDialogOpen = nestedOpenDialogCount > 0;
+  const state = {
+    open,
+    nested,
+    transitionStatus,
+    nestedDialogOpen
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    props: [rootPopupProps, {
+      'aria-labelledby': titleElementId ?? undefined,
+      'aria-describedby': descriptionElementId ?? undefined,
+      role,
+      tabIndex: -1,
+      hidden: !mounted,
+      onKeyDown(event) {
+        if (COMPOSITE_KEYS.has(event.key)) {
+          event.stopPropagation();
+        }
+      },
+      style: {
+        [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount
+      }
+    }, elementProps],
+    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/jsx(FloatingFocusManager, {
+    context: floatingRootContext,
+    openInteractionType: openMethod,
+    disabled: !mounted,
+    closeOnFocusOut: !disablePointerDismissal,
+    initialFocus: resolvedInitialFocus,
+    returnFocus: finalFocus,
+    modal: modal !== false,
+    restoreFocus: "popup",
+    children: element
+  });
+});
+
+const DialogPortal = /*#__PURE__*/React.forwardRef(function DialogPortal(props, forwardedRef) {
+  const {
+    keepMounted = false,
+    ...portalProps
+  } = props;
+  const {
+    store
+  } = useDialogRootContext();
+  const mounted = store.useState('mounted');
+  const modal = store.useState('modal');
+  const open = store.useState('open');
+  const shouldRender = mounted || keepMounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(DialogPortalContext.Provider, {
+    value: keepMounted,
+    children: /*#__PURE__*/jsxs(FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps,
+      children: [mounted && modal === true && /*#__PURE__*/jsx(InternalBackdrop, {
+        ref: store.context.internalBackdropRef,
+        inert: inertValue(!open)
+      }), props.children]
+    })
+  });
+});
+
+function useDialogRoot(params) {
+  const {
+    store,
+    parentContext,
+    actionsRef,
+    isDrawer
+  } = params;
+  const open = store.useState('open');
+  const disablePointerDismissal = store.useState('disablePointerDismissal');
+  const modal = store.useState('modal');
+  const popupElement = store.useState('popupElement');
+  const {
+    openMethod,
+    triggerProps
+  } = useOpenInteractionType(open);
+  useImplicitActiveTrigger(store);
+  const {
+    forceUnmount
+  } = useOpenStateTransitions(open, store);
+  const createDialogEventDetails = useStableCallback(reason => {
+    const details = createChangeEventDetails(reason);
+    details.preventUnmountOnClose = () => {
+      store.set('preventUnmountingOnClose', true);
+    };
+    return details;
+  });
+  const handleImperativeClose = React.useCallback(() => {
+    store.setOpen(false, createDialogEventDetails(imperativeAction));
+  }, [store, createDialogEventDetails]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  const floatingRootContext = useSyncedFloatingRootContext({
+    popupStore: store,
+    onOpenChange: store.setOpen,
+    treatPopupAsFloatingElement: true
+  });
+  const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React.useState(0);
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React.useState(0);
+  const isTopmost = ownNestedOpenDialogs === 0;
+  const role = useRole(floatingRootContext);
+  const dismiss = useDismiss(floatingRootContext, {
+    outsidePressEvent() {
+      if (store.context.internalBackdropRef.current || store.context.backdropRef.current) {
+        return 'intentional';
+      }
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
+      return {
+        mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
+        touch: 'sloppy'
+      };
+    },
+    outsidePress(event) {
+      if (!store.context.outsidePressEnabledRef.current) {
+        return false;
+      }
+
+      // For mouse events, only accept left button (button 0)
+      // For touch events, a single touch is equivalent to left button
+      if ('button' in event && event.button !== 0) {
+        return false;
+      }
+      if ('touches' in event && event.touches.length !== 1) {
+        return false;
+      }
+      const target = getTarget(event);
+      if (isTopmost && !disablePointerDismissal) {
+        const eventTarget = target;
+        // Only close if the click occurred on the dialog's owning backdrop.
+        // This supports multiple modal dialogs that aren't nested in the React tree:
+        // https://github.com/mui/base-ui/issues/1320
+        if (modal) {
+          return store.context.internalBackdropRef.current || store.context.backdropRef.current ? store.context.internalBackdropRef.current === eventTarget || store.context.backdropRef.current === eventTarget || contains(eventTarget, popupElement) && !eventTarget?.hasAttribute('data-base-ui-portal') : true;
+        }
+        return true;
+      }
+      return false;
+    },
+    escapeKey: isTopmost
+  });
+  useScrollLock(open && modal === true, popupElement);
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getTriggerProps
+  } = useInteractions([role, dismiss]);
+
+  // Listen for nested open/close events on this store to maintain the counts.
+  store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
+    setOwnNestedOpenDialogs(dialogCount);
+    setOwnNestedOpenDrawers(drawerCount);
+  });
+  store.useContextCallback('onNestedDialogClose', () => {
+    setOwnNestedOpenDialogs(0);
+    setOwnNestedOpenDrawers(0);
+  });
+
+  // Notify parent of our open/close state using parent callbacks, if any
+  React.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]);
+  const activeTriggerProps = React.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
+  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
+  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
+  store.useSyncedValues({
+    openMethod,
+    activeTriggerProps,
+    inactiveTriggerProps,
+    popupProps,
+    floatingRootContext,
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
+  });
+}
+
+const selectors = {
+  ...popupStoreSelectors,
+  modal: createSelector(state => state.modal),
+  nested: createSelector(state => state.nested),
+  nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: createSelector(state => state.nestedOpenDrawerCount),
+  disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
+  openMethod: createSelector(state => state.openMethod),
+  descriptionElementId: createSelector(state => state.descriptionElementId),
+  titleElementId: createSelector(state => state.titleElementId),
+  viewportElement: createSelector(state => state.viewportElement),
+  role: createSelector(state => state.role)
+};
+class DialogStore extends ReactStore {
+  constructor(initialState) {
+    super(createInitialState(initialState), {
+      popupRef: /*#__PURE__*/React.createRef(),
+      backdropRef: /*#__PURE__*/React.createRef(),
+      internalBackdropRef: /*#__PURE__*/React.createRef(),
+      outsidePressEnabledRef: {
+        current: true
+      },
+      triggerElements: new PopupTriggerMap(),
+      onOpenChange: undefined,
+      onOpenChangeComplete: undefined
+    }, selectors);
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    eventDetails.preventUnmountOnClose = () => {
+      this.set('preventUnmountingOnClose', true);
+    };
+    if (!nextOpen && eventDetails.trigger == null && this.state.activeTriggerId != null) {
+      // When closing the dialog, pass the old trigger to the onOpenChange event
+      // so it's not reset too early (potentially causing focus issues in controlled scenarios).
+      eventDetails.trigger = this.state.activeTriggerElement ?? undefined;
+    }
+    this.context.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
+    const updatedState = {
+      open: nextOpen
+    };
+
+    // If a popup is closing, the `trigger` may be null.
+    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
+    const newTriggerId = eventDetails.trigger?.id ?? null;
+    if (newTriggerId || nextOpen) {
+      updatedState.activeTriggerId = newTriggerId;
+      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
+    }
+    this.update(updatedState);
+  };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = useRefWithInit(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
+}
+function createInitialState(initialState = {}) {
+  return {
+    ...createInitialPopupStoreState(),
+    modal: true,
+    disablePointerDismissal: false,
+    popupElement: null,
+    viewportElement: null,
+    descriptionElementId: undefined,
+    titleElementId: undefined,
+    openMethod: null,
+    nested: false,
+    nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
+    role: 'dialog',
+    ...initialState
+  };
+}
+
+const IsDrawerContext = /*#__PURE__*/React.createContext(false);
+function DialogRoot(props) {
+  const {
+    children,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    onOpenChangeComplete,
+    disablePointerDismissal = false,
+    modal = true,
+    actionsRef,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null
+  } = props;
+  const parentDialogRootContext = useDialogRootContext(true);
+  const isDrawer = React.useContext(IsDrawerContext);
+  const nested = Boolean(parentDialogRootContext);
+  const store = DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    modal,
+    disablePointerDismissal,
+    nested
+  });
+
+  // Support initially open state when uncontrolled
+  useOnFirstRender(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useSyncedValues({
+    disablePointerDismissal,
+    nested,
+    modal
+  });
+  store.useContextCallback('onOpenChange', onOpenChange);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const payload = store.useState('payload');
+  useDialogRoot({
+    store,
+    actionsRef,
+    parentContext: parentDialogRootContext?.store.context,
+    isDrawer});
+  const contextValue = React.useMemo(() => ({
+    store
+  }), [store]);
+  return /*#__PURE__*/jsx(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/jsx(DialogRootContext.Provider, {
+      value: contextValue,
+      children: typeof children === 'function' ? children({
+        payload
+      }) : children
+    })
+  });
+}
+
+/**
+ * A heading that labels the dialog.
+ * Renders an `<h2>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = useDialogRootContext();
+  const id = useBaseUiId(idProp);
+  store.useSyncedValueWithCleanup('titleElementId', id);
+  return useRenderElement('h2', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      id
+    }, elementProps]
+  });
+});
+
+/**
+ * A button that opens the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    id: idProp,
+    payload,
+    handle,
+    style,
+    ...elementProps
+  } = componentProps;
+  const dialogRootContext = useDialogRootContext(true);
+  const store = handle?.store ?? dialogRootContext?.store;
+  if (!store) {
+    throw new Error(formatErrorMessage(79));
+  }
+  const thisTriggerId = useBaseUiId(idProp);
+  const floatingContext = store.useState('floatingRootContext');
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const triggerElementRef = React.useRef(null);
+  const {
+    registerTrigger,
+    isMountedByThisTrigger
+  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+    payload
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const click = useClick(floatingContext, {
+    enabled: floatingContext != null
+  });
+  const localInteractionProps = useInteractions([click]);
+  const state = {
+    disabled,
+    open: isOpenedByThisTrigger
+  };
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  return useRenderElement('button', componentProps, {
+    state,
+    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
+    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
+      [CLICK_TRIGGER_IDENTIFIER]: '',
+      id: thisTriggerId
+    }, elementProps, getButtonProps],
+    stateAttributesMapping: triggerOpenStateMapping
+  });
+});
+
+export { DialogPopup as D, IsDrawerContext as I, DialogClose as a, DialogPortal as b, DialogBackdrop as c, DialogRoot as d, DialogTitle as e, DialogDescription as f, DialogTrigger as g, DialogStore as h, useDialogRoot as i, DialogRootContext as j, useDialogRootContext as u };
+//# sourceMappingURL=DialogTrigger-a3diAOif.js.map