@ariakit/react-core
Version:
Ariakit React core
225 lines (195 loc) • 7.88 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});
var _5NYO4PEPcjs = require('../__chunks/5NYO4PEP.cjs');
require('../__chunks/HLFPESUH.cjs');
var _4FJIAISOcjs = require('../__chunks/4FJIAISO.cjs');
require('../__chunks/KPH4LMZO.cjs');
var _ZBFMPPGZcjs = require('../__chunks/ZBFMPPGZ.cjs');
var _QJ2ZUJN5cjs = require('../__chunks/QJ2ZUJN5.cjs');
require('../__chunks/QTZ3KD4A.cjs');
require('../__chunks/JVADL66K.cjs');
require('../__chunks/LZE4K2WU.cjs');
require('../__chunks/MIBORXQW.cjs');
var _3YJARQUNcjs = require('../__chunks/3YJARQUN.cjs');
require('../__chunks/ZVS6SBRR.cjs');
require('../__chunks/VF7H2WBX.cjs');
require('../__chunks/EJVJIL4S.cjs');
require('../__chunks/CWQU4R75.cjs');
require('../__chunks/PK35DJGA.cjs');
require('../__chunks/H5ZMZIC6.cjs');
require('../__chunks/PDQXLIRF.cjs');
require('../__chunks/T3QB4FR3.cjs');
var _76LCMKUIcjs = require('../__chunks/76LCMKUI.cjs');
require('../__chunks/FVVTEJ4K.cjs');
var _6TI3NXX6cjs = require('../__chunks/6TI3NXX6.cjs');
var _L5A2ID7Scjs = require('../__chunks/L5A2ID7S.cjs');
require('../__chunks/FDRJDQ5Y.cjs');
var _7EQBAZ46cjs = require('../__chunks/7EQBAZ46.cjs');
// src/menu/menu-button.tsx
var _dom = require('@ariakit/core/utils/dom');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "button";
function getInitialFocus(event, dir) {
const keyMap = {
ArrowDown: dir === "bottom" || dir === "top" ? "first" : false,
ArrowUp: dir === "bottom" || dir === "top" ? "last" : false,
ArrowRight: dir === "right" ? "first" : false,
ArrowLeft: dir === "left" ? "first" : false
};
return keyMap[event.key];
}
function hasActiveItem(items, excludeElement) {
return !!(items == null ? void 0 : items.some((item) => {
if (!item.element) return false;
if (item.element === excludeElement) return false;
return item.element.getAttribute("aria-expanded") === "true";
}));
}
var useMenuButton = _6TI3NXX6cjs.createHook.call(void 0,
function useMenuButton2(_a) {
var _b = _a, {
store,
focusable,
accessibleWhenDisabled,
showOnHover
} = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
"store",
"focusable",
"accessibleWhenDisabled",
"showOnHover"
]);
const context = _5NYO4PEPcjs.useMenuProviderContext.call(void 0, );
store = store || context;
_misc.invariant.call(void 0,
store,
process.env.NODE_ENV !== "production" && "MenuButton 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 disabled = _misc.disabledFromProps.call(void 0, props);
const showMenu = () => {
const trigger = ref.current;
if (!trigger) return;
store == null ? void 0 : store.setDisclosureElement(trigger);
store == null ? void 0 : store.setAnchorElement(trigger);
store == null ? void 0 : store.show();
};
const onFocusProp = props.onFocus;
const onFocus = _L5A2ID7Scjs.useEvent.call(void 0, (event) => {
onFocusProp == null ? void 0 : onFocusProp(event);
if (disabled) return;
if (event.defaultPrevented) return;
store == null ? void 0 : store.setAutoFocusOnShow(false);
store == null ? void 0 : store.setActiveId(null);
if (!parentMenubar) return;
if (!parentIsMenubar) return;
const { items } = parentMenubar.getState();
if (hasActiveItem(items, event.currentTarget)) {
showMenu();
}
});
const dir = _76LCMKUIcjs.useStoreState.call(void 0,
store,
(state) => state.placement.split("-")[0]
);
const onKeyDownProp = props.onKeyDown;
const onKeyDown = _L5A2ID7Scjs.useEvent.call(void 0, (event) => {
onKeyDownProp == null ? void 0 : onKeyDownProp(event);
if (disabled) return;
if (event.defaultPrevented) return;
const initialFocus = getInitialFocus(event, dir);
if (initialFocus) {
event.preventDefault();
showMenu();
store == null ? void 0 : store.setAutoFocusOnShow(true);
store == null ? void 0 : store.setInitialFocus(initialFocus);
}
});
const onClickProp = props.onClick;
const onClick = _L5A2ID7Scjs.useEvent.call(void 0, (event) => {
onClickProp == null ? void 0 : onClickProp(event);
if (event.defaultPrevented) return;
if (!store) return;
const isKeyboardClick = !event.detail;
const { open } = store.getState();
if (!open || isKeyboardClick) {
if (!hasParentMenu || isKeyboardClick) {
store.setAutoFocusOnShow(true);
}
store.setInitialFocus(isKeyboardClick ? "first" : "container");
}
if (hasParentMenu) {
showMenu();
}
});
props = _L5A2ID7Scjs.useWrapElement.call(void 0,
props,
(element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5NYO4PEPcjs.MenuContextProvider, { value: store, children: element }),
[store]
);
if (hasParentMenu) {
props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {}, props), {
render: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3YJARQUNcjs.Role.div, { render: props.render })
});
}
const id = _L5A2ID7Scjs.useId.call(void 0, props.id);
const parentContentElement = _76LCMKUIcjs.useStoreState.call(void 0,
(parentMenu == null ? void 0 : parentMenu.combobox) || parentMenu,
"contentElement"
);
const role = hasParentMenu || parentIsMenubar ? _dom.getPopupItemRole.call(void 0, parentContentElement, "menuitem") : void 0;
const contentElement = store.useState("contentElement");
props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
id,
role,
"aria-haspopup": _dom.getPopupRole.call(void 0, contentElement, "menu")
}, props), {
ref: _L5A2ID7Scjs.useMergeRefs.call(void 0, ref, props.ref),
onFocus,
onKeyDown,
onClick
});
props = _4FJIAISOcjs.useHovercardAnchor.call(void 0, _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
store,
focusable,
accessibleWhenDisabled
}, props), {
showOnHover: (event) => {
const getShowOnHover = () => {
if (typeof showOnHover === "function") return showOnHover(event);
if (showOnHover != null) return showOnHover;
if (hasParentMenu) return true;
if (!parentMenubar) return false;
const { items } = parentMenubar.getState();
return parentIsMenubar && hasActiveItem(items);
};
const canShowOnHover = getShowOnHover();
if (!canShowOnHover) return false;
const parent = parentIsMenubar ? parentMenubar : parentMenu;
if (!parent) return true;
parent.setActiveId(event.currentTarget.id);
return true;
}
}));
props = _QJ2ZUJN5cjs.usePopoverDisclosure.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
store,
toggleOnClick: !hasParentMenu,
focusable,
accessibleWhenDisabled
}, props));
props = _ZBFMPPGZcjs.useCompositeTypeahead.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
store,
typeahead: parentIsMenubar
}, props));
return props;
}
);
var MenuButton = _6TI3NXX6cjs.forwardRef.call(void 0, function MenuButton2(props) {
const htmlProps = useMenuButton(props);
return _6TI3NXX6cjs.createElement.call(void 0, TagName, htmlProps);
});
exports.MenuButton = MenuButton; exports.useMenuButton = useMenuButton;