pre-installations and preparations
This commit is contained in:
MuhammadKhalilzadeh committed
1 parent
3e5a0329cb
commit
201d621ac3
6977 files changed
+742826
No files matched your search
+198
@@ -0,0 +1,198 @@
|
||||
"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
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user