UNPKG

@ariakit/react-core

Version:

Ariakit React core

150 lines (123 loc) 5.1 kB
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); var _6M54DBBOcjs = require('./6M54DBBO.cjs'); var _VNVMHTCYcjs = require('./VNVMHTCY.cjs'); var _N37IROBRcjs = require('./N37IROBR.cjs'); var _YTEJF6TYcjs = require('./YTEJF6TY.cjs'); var _25BPIGZHcjs = require('./25BPIGZH.cjs'); var _WULEED4Qcjs = require('./WULEED4Q.cjs'); var _OZM4QA2Vcjs = require('./OZM4QA2V.cjs'); var _7EQBAZ46cjs = require('./7EQBAZ46.cjs'); // src/menu/menu-item.tsx var _dom = require('@ariakit/core/utils/dom'); var _events = require('@ariakit/core/utils/events'); var _focus = require('@ariakit/core/utils/focus'); var _misc = require('@ariakit/core/utils/misc'); var TagName = "div"; function menuHasFocus(baseElement, items, currentTarget) { var _a; if (!baseElement) return false; if (_focus.hasFocusWithin.call(void 0, baseElement)) return true; const expandedItem = items == null ? void 0 : items.find((item) => { var _a2; if (item.element === currentTarget) return false; return ((_a2 = item.element) == null ? void 0 : _a2.getAttribute("aria-expanded")) === "true"; }); const expandedMenuId = (_a = expandedItem == null ? void 0 : expandedItem.element) == null ? void 0 : _a.getAttribute("aria-controls"); if (!expandedMenuId) return false; const doc = _dom.getDocument.call(void 0, baseElement); const expandedMenu = doc.getElementById(expandedMenuId); if (!expandedMenu) return false; if (_focus.hasFocusWithin.call(void 0, expandedMenu)) return true; return !!expandedMenu.querySelector("[role=menuitem][aria-expanded=true]"); } var useMenuItem = _WULEED4Qcjs.createHook.call(void 0, function useMenuItem2(_a) { var _b = _a, { store, hideOnClick = true, preventScrollOnKeyDown = true, focusOnHover, blurOnHoverEnd } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [ "store", "hideOnClick", "preventScrollOnKeyDown", "focusOnHover", "blurOnHoverEnd" ]); const menuContext = _6M54DBBOcjs.useMenuScopedContext.call(void 0, true); const menubarContext = _VNVMHTCYcjs.useMenubarScopedContext.call(void 0, ); store = store || menuContext || menubarContext; _misc.invariant.call(void 0, store, process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or Menubar component" ); const onClickProp = props.onClick; const hideOnClickProp = _OZM4QA2Vcjs.useBooleanEvent.call(void 0, hideOnClick); const hideMenu = "hideAll" in store ? store.hideAll : void 0; const isWithinMenu = !!hideMenu; const onClick = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => { onClickProp == null ? void 0 : onClickProp(event); if (event.defaultPrevented) return; if (_events.isDownloading.call(void 0, event)) return; if (_events.isOpeningInNewTab.call(void 0, event)) return; if (!hideMenu) return; const popupType = event.currentTarget.getAttribute("aria-haspopup"); if (popupType === "menu") return; if (!hideOnClickProp(event)) return; hideMenu(); }); const contentElement = _25BPIGZHcjs.useStoreState.call(void 0, store, (state) => "contentElement" in state ? state.contentElement : null ); const role = _dom.getPopupItemRole.call(void 0, contentElement, "menuitem"); props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { role }, props), { onClick }); props = _YTEJF6TYcjs.useCompositeItem.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store, preventScrollOnKeyDown }, props)); props = _N37IROBRcjs.useCompositeHover.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, { store }, props), { focusOnHover(event) { const getFocusOnHover = () => { if (typeof focusOnHover === "function") return focusOnHover(event); if (focusOnHover != null) return focusOnHover; return true; }; if (!store) return false; if (!getFocusOnHover()) return false; const { baseElement, items } = store.getState(); if (isWithinMenu) { if (event.currentTarget.hasAttribute("aria-expanded")) { event.currentTarget.focus(); } return true; } if (menuHasFocus(baseElement, items, event.currentTarget)) { event.currentTarget.focus(); return true; } return false; }, blurOnHoverEnd(event) { if (typeof blurOnHoverEnd === "function") return blurOnHoverEnd(event); if (blurOnHoverEnd != null) return blurOnHoverEnd; return isWithinMenu; } })); return props; } ); var MenuItem = _WULEED4Qcjs.memo.call(void 0, _WULEED4Qcjs.forwardRef.call(void 0, function MenuItem2(props) { const htmlProps = useMenuItem(props); return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps); }) ); exports.useMenuItem = useMenuItem; exports.MenuItem = MenuItem;