268 lines
10 KiB
JavaScript
268 lines
10 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
Object.defineProperty(exports, "useMenu_unstable", {
|
|
enumerable: true,
|
|
get: function() {
|
|
return useMenu_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _reactpositioning = require("@fluentui/react-positioning");
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
const _reacttabster = require("@fluentui/react-tabster");
|
|
const _menuContext = require("../../contexts/menuContext");
|
|
const _index = require("../../utils/index");
|
|
const _useIsSubmenu = require("../../utils/useIsSubmenu");
|
|
// If it's not possible to position the submenu in smaller viewports, try
|
|
// and fallback to this order of positions
|
|
const submenuFallbackPositions = [
|
|
'after',
|
|
'after-bottom',
|
|
'before-top',
|
|
'before',
|
|
'before-bottom',
|
|
'above'
|
|
];
|
|
const useMenu_unstable = (props)=>{
|
|
const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
|
|
const { hoverDelay = 500, inline = false, hasCheckmarks = false, hasIcons = false, closeOnScroll = false, openOnContext = false, persistOnItemClick = false, openOnHover = isSubmenu, defaultCheckedValues, mountNode = null } = props;
|
|
const triggerId = (0, _reactutilities.useId)('menu');
|
|
const [contextTarget, setContextTarget] = (0, _reactpositioning.usePositioningMouseTarget)();
|
|
const positioningState = {
|
|
position: isSubmenu ? 'after' : 'below',
|
|
align: isSubmenu ? 'top' : 'start',
|
|
target: props.openOnContext ? contextTarget : undefined,
|
|
fallbackPositions: isSubmenu ? submenuFallbackPositions : undefined,
|
|
...(0, _reactpositioning.resolvePositioningShorthand)(props.positioning)
|
|
};
|
|
const children = _react.Children.toArray(props.children);
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (children.length === 0) {
|
|
// eslint-disable-next-line no-console
|
|
console.warn('Menu must contain at least one child');
|
|
}
|
|
if (children.length > 2) {
|
|
// eslint-disable-next-line no-console
|
|
console.warn('Menu must contain at most two children');
|
|
}
|
|
}
|
|
let menuTrigger = undefined;
|
|
let menuPopover = undefined;
|
|
if (children.length === 2) {
|
|
menuTrigger = children[0];
|
|
menuPopover = children[1];
|
|
} else if (children.length === 1) {
|
|
menuPopover = children[0];
|
|
}
|
|
const { targetRef: triggerRef, containerRef: menuPopoverRef } = (0, _reactpositioning.usePositioning)(positioningState);
|
|
// TODO Better way to narrow types ?
|
|
const [open, setOpen] = useMenuOpenState({
|
|
hoverDelay,
|
|
isSubmenu,
|
|
setContextTarget,
|
|
closeOnScroll,
|
|
menuPopoverRef,
|
|
triggerRef,
|
|
open: props.open,
|
|
defaultOpen: props.defaultOpen,
|
|
onOpenChange: props.onOpenChange,
|
|
openOnContext
|
|
});
|
|
const [checkedValues, onCheckedValueChange] = useMenuSelectableState({
|
|
checkedValues: props.checkedValues,
|
|
defaultCheckedValues,
|
|
onCheckedValueChange: props.onCheckedValueChange
|
|
});
|
|
return {
|
|
inline,
|
|
hoverDelay,
|
|
triggerId,
|
|
isSubmenu,
|
|
openOnHover,
|
|
contextTarget,
|
|
setContextTarget,
|
|
hasCheckmarks,
|
|
hasIcons,
|
|
closeOnScroll,
|
|
menuTrigger,
|
|
menuPopover,
|
|
mountNode,
|
|
triggerRef,
|
|
menuPopoverRef,
|
|
components: {},
|
|
openOnContext,
|
|
open,
|
|
setOpen,
|
|
checkedValues,
|
|
onCheckedValueChange,
|
|
persistOnItemClick
|
|
};
|
|
};
|
|
/**
|
|
* Adds appropriate state values and handlers for selectable items
|
|
* i.e checkboxes and radios
|
|
*/ const useMenuSelectableState = (props)=>{
|
|
const [checkedValues, setCheckedValues] = (0, _reactutilities.useControllableState)({
|
|
state: props.checkedValues,
|
|
defaultState: props.defaultCheckedValues,
|
|
initialState: {}
|
|
});
|
|
const onCheckedValueChange = (0, _reactutilities.useEventCallback)((e, { name, checkedItems })=>{
|
|
var _props_onCheckedValueChange;
|
|
(_props_onCheckedValueChange = props.onCheckedValueChange) === null || _props_onCheckedValueChange === void 0 ? void 0 : _props_onCheckedValueChange.call(props, e, {
|
|
name,
|
|
checkedItems
|
|
});
|
|
setCheckedValues((currentValue)=>({
|
|
...currentValue,
|
|
[name]: checkedItems
|
|
}));
|
|
});
|
|
return [
|
|
checkedValues,
|
|
onCheckedValueChange
|
|
];
|
|
};
|
|
const useMenuOpenState = (state)=>{
|
|
'use no memo';
|
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
const parentSetOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
|
|
const onOpenChange = (0, _reactutilities.useEventCallback)((e, data)=>{
|
|
var _state_onOpenChange;
|
|
return (_state_onOpenChange = state.onOpenChange) === null || _state_onOpenChange === void 0 ? void 0 : _state_onOpenChange.call(state, e, data);
|
|
});
|
|
const enteringTriggerRef = _react.useRef(false);
|
|
const [open, setOpenState] = (0, _reactutilities.useControllableState)({
|
|
state: state.open,
|
|
defaultState: state.defaultOpen,
|
|
initialState: false
|
|
});
|
|
const trySetOpen = (0, _reactutilities.useEventCallback)((e, data)=>{
|
|
const event = e instanceof CustomEvent && e.type === _index.MENU_ENTER_EVENT ? e.detail.nativeEvent : e;
|
|
onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
|
|
...data
|
|
});
|
|
if (data.open && e.type === 'contextmenu') {
|
|
state.setContextTarget(e);
|
|
}
|
|
if (!data.open) {
|
|
state.setContextTarget(undefined);
|
|
}
|
|
if (data.bubble) {
|
|
parentSetOpen(e, {
|
|
...data
|
|
});
|
|
}
|
|
setOpenState(data.open);
|
|
});
|
|
const [setOpenTimeout, clearOpenTimeout] = (0, _reactutilities.useTimeout)();
|
|
const setOpen = (0, _reactutilities.useEventCallback)((e, data)=>{
|
|
clearOpenTimeout();
|
|
if (!(e instanceof Event) && e.persist) {
|
|
// < React 17 still uses pooled synthetic events
|
|
e.persist();
|
|
}
|
|
if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === _index.MENU_ENTER_EVENT) {
|
|
var _state_triggerRef_current;
|
|
if ((_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.contains(e.target)) {
|
|
enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';
|
|
}
|
|
setOpenTimeout(()=>trySetOpen(e, data), state.hoverDelay);
|
|
} else {
|
|
trySetOpen(e, data);
|
|
}
|
|
});
|
|
(0, _reactutilities.useOnClickOutside)({
|
|
contains: _reactutilities.elementContains,
|
|
disabled: !open,
|
|
element: targetDocument,
|
|
refs: [
|
|
state.menuPopoverRef,
|
|
!state.openOnContext && state.triggerRef
|
|
].filter(Boolean),
|
|
callback: (event)=>setOpen(event, {
|
|
open: false,
|
|
type: 'clickOutside',
|
|
event
|
|
})
|
|
});
|
|
// only close on scroll for context, or when closeOnScroll is specified
|
|
const closeOnScroll = state.openOnContext || state.closeOnScroll;
|
|
(0, _reactutilities.useOnScrollOutside)({
|
|
contains: _reactutilities.elementContains,
|
|
element: targetDocument,
|
|
callback: (event)=>setOpen(event, {
|
|
open: false,
|
|
type: 'scrollOutside',
|
|
event
|
|
}),
|
|
refs: [
|
|
state.menuPopoverRef,
|
|
!state.openOnContext && state.triggerRef
|
|
].filter(Boolean),
|
|
disabled: !open || !closeOnScroll
|
|
});
|
|
(0, _index.useOnMenuMouseEnter)({
|
|
element: targetDocument,
|
|
callback: (event)=>{
|
|
// When moving from a menu directly back to its trigger, this handler can close the menu
|
|
// Explicitly check a flag to see if this situation happens
|
|
if (!enteringTriggerRef.current) {
|
|
setOpen(event, {
|
|
open: false,
|
|
type: 'menuMouseEnter',
|
|
event
|
|
});
|
|
}
|
|
},
|
|
disabled: !open,
|
|
refs: [
|
|
state.menuPopoverRef
|
|
]
|
|
});
|
|
// Manage focus for open state
|
|
const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
|
|
const focusFirst = _react.useCallback(()=>{
|
|
const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);
|
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
}, [
|
|
findFirstFocusable,
|
|
state.menuPopoverRef
|
|
]);
|
|
const firstMount = (0, _reactutilities.useFirstMount)();
|
|
_react.useEffect(()=>{
|
|
if (open) {
|
|
focusFirst();
|
|
} else {
|
|
if (!firstMount) {
|
|
if ((targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)) {
|
|
var // after any event handler (event handlers will update state and re-render).
|
|
// Since the browser only performs the default behaviour for the Tab key once
|
|
// keyboard events have fully bubbled up the window, the browser will move
|
|
// focus to the next tabbable element before/after the trigger if needed.
|
|
// If the Tab key was not pressed, focus will remain on the trigger as expected.
|
|
_state_triggerRef_current;
|
|
(_state_triggerRef_current = state.triggerRef.current) === null || _state_triggerRef_current === void 0 ? void 0 : _state_triggerRef_current.focus();
|
|
}
|
|
}
|
|
}
|
|
// firstMount change should not re-run this effect
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
state.triggerRef,
|
|
state.isSubmenu,
|
|
open,
|
|
focusFirst,
|
|
targetDocument,
|
|
state.menuPopoverRef
|
|
]);
|
|
return [
|
|
open,
|
|
setOpen
|
|
];
|
|
};
|