"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.useMenu = useMenu; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var React = _interopRequireWildcard(require("react")); var _utils = require("@mui/utils"); var _menuReducer = require("./menuReducer"); var _DropdownContext = require("../useDropdown/DropdownContext"); var _useList = require("../useList"); var _useDropdown = require("../useDropdown"); var _useCompound = require("../useCompound"); var _combineHooksSlotProps = require("../utils/combineHooksSlotProps"); var _extractEventHandlers = require("../utils/extractEventHandlers"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } const FALLBACK_MENU_CONTEXT = { dispatch: () => {}, popupId: '', registerPopup: () => {}, registerTrigger: () => {}, state: { open: true, changeReason: null }, triggerElement: null }; /** * * Demos: * * - [Menu](https://mui.com/base-ui/react-menu/#hooks) * * API: * * - [useMenu API](https://mui.com/base-ui/react-menu/hooks-api/#use-menu) */ function useMenu(parameters = {}) { var _useId, _React$useContext; const { listboxRef: listboxRefProp, onItemsChange, id: idParam, disabledItemsFocusable = true, disableListWrap = false, autoFocus = true, componentName = 'useMenu' } = parameters; const rootRef = React.useRef(null); const handleRef = (0, _utils.unstable_useForkRef)(rootRef, listboxRefProp); const listboxId = (_useId = (0, _utils.unstable_useId)(idParam)) != null ? _useId : ''; const { state: { open, changeReason }, dispatch: menuDispatch, triggerElement, registerPopup } = (_React$useContext = React.useContext(_DropdownContext.DropdownContext)) != null ? _React$useContext : FALLBACK_MENU_CONTEXT; // store the initial open state to prevent focus stealing // (the first menu items gets focued only when the menu is opened by the user) const isInitiallyOpen = React.useRef(open); const { subitems, contextValue: compoundComponentContextValue } = (0, _useCompound.useCompoundParent)(); const subitemKeys = React.useMemo(() => Array.from(subitems.keys()), [subitems]); const getItemDomElement = React.useCallback(itemId => { var _subitems$get$ref$cur, _subitems$get; if (itemId == null) { return null; } return (_subitems$get$ref$cur = (_subitems$get = subitems.get(itemId)) == null ? void 0 : _subitems$get.ref.current) != null ? _subitems$get$ref$cur : null; }, [subitems]); const isItemDisabled = React.useCallback(id => { var _subitems$get2; return (subitems == null || (_subitems$get2 = subitems.get(id)) == null ? void 0 : _subitems$get2.disabled) || false; }, [subitems]); const getItemAsString = React.useCallback(id => { var _subitems$get3, _subitems$get4; return ((_subitems$get3 = subitems.get(id)) == null ? void 0 : _subitems$get3.label) || ((_subitems$get4 = subitems.get(id)) == null || (_subitems$get4 = _subitems$get4.ref.current) == null ? void 0 : _subitems$get4.innerText); }, [subitems]); const reducerActionContext = React.useMemo(() => ({ listboxRef: rootRef }), [rootRef]); const { dispatch: listDispatch, getRootProps: getListRootProps, contextValue: listContextValue, state: { highlightedValue }, rootRef: mergedListRef } = (0, _useList.useList)({ disabledItemsFocusable, disableListWrap, focusManagement: 'DOM', getItemDomElement, getInitialState: () => ({ selectedValues: [], highlightedValue: null }), isItemDisabled, items: subitemKeys, getItemAsString, rootRef: handleRef, onItemsChange, reducerActionContext, selectionMode: 'none', stateReducer: _menuReducer.menuReducer, componentName }); (0, _utils.unstable_useEnhancedEffect)(() => { registerPopup(listboxId); }, [listboxId, registerPopup]); (0, _utils.unstable_useEnhancedEffect)(() => { if (open && (changeReason == null ? void 0 : changeReason.type) === 'keydown' && changeReason.key === 'ArrowUp') { listDispatch({ type: _useList.ListActionTypes.highlightLast, event: changeReason }); } }, [open, changeReason, listDispatch]); React.useEffect(() => { if (open && autoFocus && highlightedValue && !isInitiallyOpen.current) { var _subitems$get5; (_subitems$get5 = subitems.get(highlightedValue)) == null || (_subitems$get5 = _subitems$get5.ref) == null || (_subitems$get5 = _subitems$get5.current) == null || _subitems$get5.focus(); } }, [open, autoFocus, highlightedValue, subitems, subitemKeys]); React.useEffect(() => { var _rootRef$current; // set focus to the highlighted item (but prevent stealing focus from other elements on the page) if ((_rootRef$current = rootRef.current) != null && _rootRef$current.contains(document.activeElement) && highlightedValue !== null) { var _subitems$get6; subitems == null || (_subitems$get6 = subitems.get(highlightedValue)) == null || (_subitems$get6 = _subitems$get6.ref.current) == null || _subitems$get6.focus(); } }, [highlightedValue, subitems]); const createHandleBlur = otherHandlers => event => { var _otherHandlers$onBlur, _rootRef$current2; (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event); if (event.defaultMuiPrevented) { return; } if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.contains(event.relatedTarget) || event.relatedTarget === triggerElement) { return; } menuDispatch({ type: _useDropdown.DropdownActionTypes.blur, event }); }; const createHandleKeyDown = otherHandlers => event => { var _otherHandlers$onKeyD; (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event); if (event.defaultMuiPrevented) { return; } if (event.key === 'Escape') { menuDispatch({ type: _useDropdown.DropdownActionTypes.escapeKeyDown, event }); } }; const getOwnListboxHandlers = (otherHandlers = {}) => ({ onBlur: createHandleBlur(otherHandlers), onKeyDown: createHandleKeyDown(otherHandlers) }); const getListboxProps = (externalProps = {}) => { const getCombinedRootProps = (0, _combineHooksSlotProps.combineHooksSlotProps)(getOwnListboxHandlers, getListRootProps); const externalEventHandlers = (0, _extractEventHandlers.extractEventHandlers)(externalProps); return (0, _extends2.default)({}, externalProps, externalEventHandlers, getCombinedRootProps(externalEventHandlers), { id: listboxId, role: 'menu' }); }; React.useDebugValue({ subitems, highlightedValue }); return { contextValue: (0, _extends2.default)({}, compoundComponentContextValue, listContextValue), dispatch: listDispatch, getListboxProps, highlightedValue, listboxRef: mergedListRef, menuItems: subitems, open, triggerElement }; }