@ariakit/react-core/cjs/__chunks/7754RGGY.cjs

Ariakit React core

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


var _6M54DBBOcjs = require('./6M54DBBO.cjs');


var _QYV7ZYAGcjs = require('./QYV7ZYAG.cjs');


var _VIIJ4PIKcjs = require('./VIIJ4PIK.cjs');


var _SIL3OXTPcjs = require('./SIL3OXTP.cjs');


var _25BPIGZHcjs = require('./25BPIGZH.cjs');




var _WULEED4Qcjs = require('./WULEED4Q.cjs');





var _OZM4QA2Vcjs = require('./OZM4QA2V.cjs');




var _7EQBAZ46cjs = require('./7EQBAZ46.cjs');

// src/menu/menu-list.tsx
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "div";
function useAriaLabelledBy(_a) {
  var _b = _a, { store } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, ["store"]);
  const [id, setId] = _react.useState.call(void 0, void 0);
  const label = props["aria-label"];
  const disclosureElement = _25BPIGZHcjs.useStoreState.call(void 0, store, "disclosureElement");
  const contentElement = _25BPIGZHcjs.useStoreState.call(void 0, store, "contentElement");
  _react.useEffect.call(void 0, () => {
    const disclosure = disclosureElement;
    if (!disclosure) return;
    const menu = contentElement;
    if (!menu) return;
    const menuLabel = label || menu.hasAttribute("aria-label");
    if (menuLabel) {
      setId(void 0);
    } else if (disclosure.id) {
      setId(disclosure.id);
    }
  }, [label, disclosureElement, contentElement]);
  return id;
}
var useMenuList = _WULEED4Qcjs.createHook.call(void 0, 
  function useMenuList2(_a) {
    var _b = _a, { store, alwaysVisible, composite } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, ["store", "alwaysVisible", "composite"]);
    const context = _6M54DBBOcjs.useMenuProviderContext.call(void 0, );
    store = store || context;
    _misc.invariant.call(void 0, 
      store,
      process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
    );
    const parentMenu = store.parent;
    const parentMenubar = store.menubar;
    const hasParentMenu = !!parentMenu;
    const id = _OZM4QA2Vcjs.useId.call(void 0, props.id);
    const onKeyDownProp = props.onKeyDown;
    const dir = store.useState(
      (state) => state.placement.split("-")[0]
    );
    const orientation = store.useState(
      (state) => state.orientation === "both" ? void 0 : state.orientation
    );
    const isHorizontal = orientation !== "vertical";
    const isMenubarHorizontal = _25BPIGZHcjs.useStoreState.call(void 0, 
      parentMenubar,
      (state) => !!state && state.orientation !== "vertical"
    );
    const onKeyDown = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
      if (event.defaultPrevented) return;
      if (hasParentMenu || parentMenubar && !isHorizontal) {
        const hideMap = {
          ArrowRight: () => dir === "left" && !isHorizontal,
          ArrowLeft: () => dir === "right" && !isHorizontal,
          ArrowUp: () => dir === "bottom" && isHorizontal,
          ArrowDown: () => dir === "top" && isHorizontal
        };
        const action = hideMap[event.key];
        if (action == null ? void 0 : action()) {
          event.stopPropagation();
          event.preventDefault();
          return store == null ? void 0 : store.hide();
        }
      }
      if (parentMenubar) {
        const keyMap = {
          ArrowRight: () => {
            if (!isMenubarHorizontal) return;
            return parentMenubar.next();
          },
          ArrowLeft: () => {
            if (!isMenubarHorizontal) return;
            return parentMenubar.previous();
          },
          ArrowDown: () => {
            if (isMenubarHorizontal) return;
            return parentMenubar.next();
          },
          ArrowUp: () => {
            if (isMenubarHorizontal) return;
            return parentMenubar.previous();
          }
        };
        const action = keyMap[event.key];
        const id2 = action == null ? void 0 : action();
        if (id2 !== void 0) {
          event.stopPropagation();
          event.preventDefault();
          parentMenubar.move(id2);
        }
      }
    });
    props = _OZM4QA2Vcjs.useWrapElement.call(void 0, 
      props,
      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _6M54DBBOcjs.MenuScopedContextProvider, { value: store, children: element }),
      [store]
    );
    const ariaLabelledBy = useAriaLabelledBy(_7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props));
    const mounted = store.useState("mounted");
    const hidden = _VIIJ4PIKcjs.isHidden.call(void 0, mounted, props.hidden, alwaysVisible);
    const style = hidden ? _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props.style), { display: "none" }) : props.style;
    props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
      id,
      "aria-labelledby": ariaLabelledBy,
      hidden
    }, props), {
      ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, id ? store.setContentElement : null, props.ref),
      style,
      onKeyDown
    });
    const hasCombobox = !!store.combobox;
    composite = composite != null ? composite : !hasCombobox;
    if (composite) {
      props = _7EQBAZ46cjs.__spreadValues.call(void 0, {
        role: "menu",
        "aria-orientation": orientation
      }, props);
    }
    props = _SIL3OXTPcjs.useComposite.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, composite }, props));
    props = _QYV7ZYAGcjs.useCompositeTypeahead.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, typeahead: !hasCombobox }, props));
    return props;
  }
);
var MenuList = _WULEED4Qcjs.forwardRef.call(void 0, function MenuList2(props) {
  const htmlProps = useMenuList(props);
  return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});




exports.useMenuList = useMenuList; exports.MenuList = MenuList;