@ariakit/react-core/cjs/menu/menu.cjs

Ariakit React core

"use strict";Object.defineProperty(exports, "__esModule", {value: true});

var _EK4OBMTNcjs = require('../__chunks/EK4OBMTN.cjs');


var _VESZKTSJcjs = require('../__chunks/VESZKTSJ.cjs');
require('../__chunks/RF45TVVP.cjs');


var _U5MBFBNTcjs = require('../__chunks/U5MBFBNT.cjs');
require('../__chunks/UMS7MLRY.cjs');
require('../__chunks/YYY7KD73.cjs');
require('../__chunks/YM5HDH3C.cjs');
require('../__chunks/XPWK4QRC.cjs');


var _6SC6IEJJcjs = require('../__chunks/6SC6IEJJ.cjs');
require('../__chunks/6NFJUQ7Q.cjs');
require('../__chunks/UI5KWBYV.cjs');
require('../__chunks/L634CRNJ.cjs');
require('../__chunks/3PV6Y4XH.cjs');
require('../__chunks/WWNMQZJA.cjs');
require('../__chunks/CXFFS6H4.cjs');
require('../__chunks/W32FX7DM.cjs');
require('../__chunks/ERSQB5XO.cjs');
require('../__chunks/5RIUFRY2.cjs');
require('../__chunks/HMJY2Y4H.cjs');
require('../__chunks/JQCSYNKY.cjs');
require('../__chunks/MXT5U5PP.cjs');
require('../__chunks/JLMLKTUB.cjs');
require('../__chunks/LCWSLOYU.cjs');
require('../__chunks/V7JASX7S.cjs');
require('../__chunks/56NPFF7P.cjs');
require('../__chunks/GASMO7Y4.cjs');
require('../__chunks/O5T5YIJ4.cjs');
require('../__chunks/26P4PLHI.cjs');
require('../__chunks/YVOQ2BCB.cjs');
require('../__chunks/4SKDRUBR.cjs');
require('../__chunks/AQ2LO7WV.cjs');
require('../__chunks/DRXSFB5O.cjs');
require('../__chunks/EM3Q5QVV.cjs');
require('../__chunks/XRHNSFIK.cjs');
require('../__chunks/DN4TDPKM.cjs');
require('../__chunks/2XVCJUVB.cjs');
require('../__chunks/4IRVZ6J3.cjs');
require('../__chunks/7X7JMIHX.cjs');
require('../__chunks/WDV6EJ2U.cjs');
require('../__chunks/VFNUZFXS.cjs');
require('../__chunks/EOGOO37X.cjs');
require('../__chunks/BB34VMZX.cjs');
require('../__chunks/T3QB4FR3.cjs');


var _RDNUVX4Vcjs = require('../__chunks/RDNUVX4V.cjs');
require('../__chunks/ZYZTL3IQ.cjs');




var _SQLDFLTEcjs = require('../__chunks/SQLDFLTE.cjs');


var _4KGS3DOWcjs = require('../__chunks/4KGS3DOW.cjs');
require('../__chunks/TWX5YNTH.cjs');

// src/menu/menu.tsx
var _events = require('@ariakit/core/utils/events');
var _focus = require('@ariakit/core/utils/focus');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var TagName = "div";
var useMenu = _SQLDFLTEcjs.createHook.call(void 0, function useMenu2({
  store,
  modal: modalProp = false,
  portal = modalProp,
  hideOnEscape = true,
  autoFocusOnShow = true,
  hideOnHoverOutside,
  alwaysVisible,
  ...props
}) {
  const context = _U5MBFBNTcjs.useMenuProviderContext.call(void 0, );
  store = store || context;
  _misc.invariant.call(void 0, 
    store,
    process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component."
  );
  const ref = _react.useRef.call(void 0, null);
  const parentMenu = store.parent;
  const parentMenubar = store.menubar;
  const hasParentMenu = !!parentMenu;
  const parentIsMenubar = !!parentMenubar && !hasParentMenu;
  const modal = hasParentMenu ? false : modalProp;
  props = {
    ...props,
    ref: _4KGS3DOWcjs.useMergeRefs.call(void 0, ref, props.ref)
  };
  const { "aria-labelledby": ariaLabelledBy, ...menuListProps } = _EK4OBMTNcjs.useMenuList.call(void 0, {
    store,
    alwaysVisible,
    ...props
  });
  props = menuListProps;
  const [initialFocusRef, setInitialFocusRef] = _react.useState.call(void 0, );
  const autoFocusOnShowState = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "autoFocusOnShow");
  const initialFocus = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "initialFocus");
  const baseElement = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "baseElement");
  const items = _RDNUVX4Vcjs.useStoreState.call(void 0, store, "renderedItems");
  _react.useEffect.call(void 0, () => {
    let cleaning = false;
    setInitialFocusRef((prevInitialFocusRef) => {
      var _a, _b, _c;
      if (cleaning) return;
      if (modal && ((_a = prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current) == null ? void 0 : _a.isConnected)) {
        return prevInitialFocusRef;
      }
      if (!autoFocusOnShowState) return;
      let element;
      switch (initialFocus) {
        // TODO: Refactor
        case "first":
          element = ((_b = items.find((item) => !item.disabled && item.element)) == null ? void 0 : _b.element) || null;
          break;
        case "last":
          element = ((_c = [...items].reverse().find((item) => !item.disabled && item.element)) == null ? void 0 : _c.element) || null;
          break;
        default:
          element = baseElement;
      }
      if (element && element === (prevInitialFocusRef == null ? void 0 : prevInitialFocusRef.current)) {
        return prevInitialFocusRef;
      }
      const ref2 = _react.createRef.call(void 0, );
      ref2.current = element;
      return ref2;
    });
    return () => {
      cleaning = true;
    };
  }, [store, modal, autoFocusOnShowState, initialFocus, items, baseElement]);
  const mayAutoFocusOnShow = !!autoFocusOnShow;
  const canAutoFocusOnShow = !!initialFocusRef || !!props.initialFocus || modal;
  const contentElement = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    store.combobox || store,
    "contentElement"
  );
  const parentContentElement = _RDNUVX4Vcjs.useStoreState.call(void 0, 
    (parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
    "contentElement"
  );
  const preserveTabOrderAnchor = _react.useMemo.call(void 0, () => {
    if (!parentContentElement) return;
    if (!contentElement) return;
    const role = contentElement.getAttribute("role");
    const parentRole = parentContentElement.getAttribute("role");
    const parentIsMenuOrMenubar = parentRole === "menu" || parentRole === "menubar";
    if (parentIsMenuOrMenubar && role === "menu") return;
    return parentContentElement;
  }, [contentElement, parentContentElement]);
  if (preserveTabOrderAnchor !== void 0) {
    props = {
      preserveTabOrderAnchor,
      ...props
    };
  }
  props = _VESZKTSJcjs.useHovercard.call(void 0, {
    store,
    alwaysVisible,
    initialFocus: initialFocusRef,
    autoFocusOnShow: mayAutoFocusOnShow ? canAutoFocusOnShow && autoFocusOnShow : autoFocusOnShowState || modal,
    ...props,
    hideOnEscape(event) {
      if (_misc.isFalsyBooleanCallback.call(void 0, hideOnEscape, event)) return false;
      store == null ? void 0 : store.hideAll();
      return true;
    },
    hideOnHoverOutside(event) {
      const disclosureElement = store == null ? void 0 : store.getState().disclosureElement;
      const getHideOnHoverOutside = () => {
        if (typeof hideOnHoverOutside === "function") {
          return hideOnHoverOutside(event);
        }
        if (hideOnHoverOutside != null) return hideOnHoverOutside;
        if (hasParentMenu) return true;
        if (!parentIsMenubar) return false;
        if (!disclosureElement) return true;
        if (_focus.hasFocusWithin.call(void 0, disclosureElement)) return false;
        return true;
      };
      if (!getHideOnHoverOutside()) return false;
      if (event.defaultPrevented) return true;
      if (!hasParentMenu) return true;
      if (!disclosureElement) return true;
      _events.fireEvent.call(void 0, disclosureElement, "mouseout", event);
      if (!_focus.hasFocusWithin.call(void 0, disclosureElement)) return true;
      requestAnimationFrame(() => {
        if (_focus.hasFocusWithin.call(void 0, disclosureElement)) return;
        store == null ? void 0 : store.hide();
      });
      return false;
    },
    modal,
    portal,
    backdrop: hasParentMenu ? false : props.backdrop
  });
  props = {
    "aria-labelledby": ariaLabelledBy,
    ...props
  };
  return props;
});
var Menu = _6SC6IEJJcjs.createDialogComponent.call(void 0, 
  _SQLDFLTEcjs.forwardRef.call(void 0, function Menu2(props) {
    const htmlProps = useMenu(props);
    return _SQLDFLTEcjs.createElement.call(void 0, TagName, htmlProps);
  }),
  _U5MBFBNTcjs.useMenuProviderContext
);



exports.Menu = Menu; exports.useMenu = useMenu;