@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';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useDialogPopup = useDialogPopup;
var React = _interopRequireWildcard(require("react"));
var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
var _composite = require("../../composite/composite");
function useDialogPopup(parameters) {
  const {
    descriptionElementId,
    initialFocus,
    mounted,
    openMethod,
    ref,
    setPopupElement,
    titleElementId
  } = parameters;
  const popupRef = React.useRef(null);
  const handleRef = (0, _useMergedRefs.useMergedRefs)(ref, popupRef, setPopupElement);

  // 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]);
  const popupProps = {
    'aria-labelledby': titleElementId ?? undefined,
    'aria-describedby': descriptionElementId ?? undefined,
    role: 'dialog',
    tabIndex: -1,
    ref: handleRef,
    hidden: !mounted,
    onKeyDown(event) {
      if (_composite.COMPOSITE_KEYS.has(event.key)) {
        event.stopPropagation();
      }
    }
  };
  return {
    popupProps,
    resolvedInitialFocus
  };
}