@base-ui-components/react/cjs/dialog/popup/useDialogPopup.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDialogPopup = useDialogPopup;
var React = _interopRequireWildcard(require("react"));
var _react2 = require("@floating-ui/react");
var _useBaseUiId = require("../../utils/useBaseUiId");
var _useForkRef = require("../../utils/useForkRef");
var _mergeReactProps = require("../../utils/mergeReactProps");
var _useScrollLock = require("../../utils/useScrollLock");
var _useEnhancedEffect = require("../../utils/useEnhancedEffect");
var _translateOpenChangeReason = require("../../utils/translateOpenChangeReason");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function useDialogPopup(parameters) {
  const {
    descriptionElementId,
    floatingRootContext,
    getPopupProps,
    id: idParam,
    initialFocus,
    modal,
    mounted,
    setOpen,
    open,
    openMethod,
    ref,
    setPopupElementId,
    setPopupElement,
    titleElementId
  } = parameters;
  const handleFloatingUIOpenChange = (isOpen, event, reason) => {
    setOpen(isOpen, event, (0, _translateOpenChangeReason.translateOpenChangeReason)(reason));
  };
  const {
    context,
    elements
  } = (0, _react2.useFloating)({
    open,
    onOpenChange: handleFloatingUIOpenChange,
    rootContext: floatingRootContext
  });
  const popupRef = React.useRef(null);
  const id = (0, _useBaseUiId.useBaseUiId)(idParam);
  const handleRef = (0, _useForkRef.useForkRef)(ref, popupRef, setPopupElement);
  (0, _useScrollLock.useScrollLock)(modal && open, elements.floating);

  // 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).
  const defaultInitialFocus = React.useCallback(interactionType => {
    if (interactionType === 'touch') {
      return popupRef;
    }
    return 0;
  }, []);
  const resolvedInitialFocus = React.useMemo(() => {
    if (initialFocus == null) {
      return defaultInitialFocus(openMethod ?? '');
    }
    if (typeof initialFocus === 'function') {
      return initialFocus(openMethod ?? '');
    }
    return initialFocus;
  }, [defaultInitialFocus, initialFocus, openMethod]);
  (0, _useEnhancedEffect.useEnhancedEffect)(() => {
    setPopupElementId(id);
    return () => {
      setPopupElementId(undefined);
    };
  }, [id, setPopupElementId]);
  const getRootProps = externalProps => (0, _mergeReactProps.mergeReactProps)(externalProps, {
    'aria-labelledby': titleElementId ?? undefined,
    'aria-describedby': descriptionElementId ?? undefined,
    'aria-modal': open && modal ? true : undefined,
    role: 'dialog',
    tabIndex: -1,
    ...getPopupProps(),
    id,
    ref: handleRef,
    hidden: !mounted
  });
  return {
    floatingContext: context,
    getRootProps,
    resolvedInitialFocus
  };
}