@fluentui/react-menu 9.4.1 → 9.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +119 -1
- package/CHANGELOG.md +32 -2
- package/dist/index.d.ts +102 -14
- package/lib/components/Menu/Menu.types.js.map +1 -1
- package/lib/components/Menu/useMenu.js +23 -26
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js +0 -2
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.js +2 -2
- package/lib/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +3 -1
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuList/MenuList.types.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js +20 -29
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListContextValues.js +0 -2
- package/lib/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +20 -14
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +42 -28
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/contexts/menuContext.js +0 -1
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuListContext.js +0 -1
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-amd/Menu.js +6 -0
- package/lib-amd/Menu.js.map +1 -0
- package/lib-amd/MenuDivider.js +6 -0
- package/lib-amd/MenuDivider.js.map +1 -0
- package/lib-amd/MenuGroup.js +6 -0
- package/lib-amd/MenuGroup.js.map +1 -0
- package/lib-amd/MenuGroupHeader.js +6 -0
- package/lib-amd/MenuGroupHeader.js.map +1 -0
- package/lib-amd/MenuItem.js +6 -0
- package/lib-amd/MenuItem.js.map +1 -0
- package/lib-amd/MenuItemCheckbox.js +6 -0
- package/lib-amd/MenuItemCheckbox.js.map +1 -0
- package/lib-amd/MenuItemRadio.js +6 -0
- package/lib-amd/MenuItemRadio.js.map +1 -0
- package/lib-amd/MenuList.js +6 -0
- package/lib-amd/MenuList.js.map +1 -0
- package/lib-amd/MenuPopover.js +6 -0
- package/lib-amd/MenuPopover.js.map +1 -0
- package/lib-amd/MenuSplitGroup.js +6 -0
- package/lib-amd/MenuSplitGroup.js.map +1 -0
- package/lib-amd/MenuTrigger.js +6 -0
- package/lib-amd/MenuTrigger.js.map +1 -0
- package/lib-amd/components/Menu/Menu.js +16 -0
- package/lib-amd/components/Menu/Menu.js.map +1 -0
- package/lib-amd/components/Menu/Menu.types.js +5 -0
- package/lib-amd/components/Menu/Menu.types.js.map +1 -0
- package/lib-amd/components/Menu/index.js +10 -0
- package/lib-amd/components/Menu/index.js.map +1 -0
- package/lib-amd/components/Menu/renderMenu.js +15 -0
- package/lib-amd/components/Menu/renderMenu.js.map +1 -0
- package/lib-amd/components/Menu/useMenu.js +230 -0
- package/lib-amd/components/Menu/useMenu.js.map +1 -0
- package/lib-amd/components/Menu/useMenuContextValues.js +28 -0
- package/lib-amd/components/Menu/useMenuContextValues.js.map +1 -0
- package/lib-amd/components/MenuDivider/MenuDivider.js +15 -0
- package/lib-amd/components/MenuDivider/MenuDivider.js.map +1 -0
- package/lib-amd/components/MenuDivider/MenuDivider.types.js +5 -0
- package/lib-amd/components/MenuDivider/MenuDivider.types.js.map +1 -0
- package/lib-amd/components/MenuDivider/index.js +10 -0
- package/lib-amd/components/MenuDivider/index.js.map +1 -0
- package/lib-amd/components/MenuDivider/renderMenuDivider.js +15 -0
- package/lib-amd/components/MenuDivider/renderMenuDivider.js.map +1 -0
- package/lib-amd/components/MenuDivider/useMenuDivider.js +18 -0
- package/lib-amd/components/MenuDivider/useMenuDivider.js.map +1 -0
- package/lib-amd/components/MenuDivider/useMenuDividerStyles.js +18 -0
- package/lib-amd/components/MenuDivider/useMenuDividerStyles.js.map +1 -0
- package/lib-amd/components/MenuGroup/MenuGroup.js +16 -0
- package/lib-amd/components/MenuGroup/MenuGroup.js.map +1 -0
- package/lib-amd/components/MenuGroup/MenuGroup.types.js +5 -0
- package/lib-amd/components/MenuGroup/MenuGroup.types.js.map +1 -0
- package/lib-amd/components/MenuGroup/index.js +11 -0
- package/lib-amd/components/MenuGroup/index.js.map +1 -0
- package/lib-amd/components/MenuGroup/renderMenuGroup.js +16 -0
- package/lib-amd/components/MenuGroup/renderMenuGroup.js.map +1 -0
- package/lib-amd/components/MenuGroup/useMenuGroup.js +20 -0
- package/lib-amd/components/MenuGroup/useMenuGroup.js.map +1 -0
- package/lib-amd/components/MenuGroup/useMenuGroupContextValues.js +12 -0
- package/lib-amd/components/MenuGroup/useMenuGroupContextValues.js.map +1 -0
- package/lib-amd/components/MenuGroup/useMenuGroupStyles.js +14 -0
- package/lib-amd/components/MenuGroup/useMenuGroupStyles.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.js +15 -0
- package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.types.js +5 -0
- package/lib-amd/components/MenuGroupHeader/MenuGroupHeader.types.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/index.js +10 -0
- package/lib-amd/components/MenuGroupHeader/index.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/renderMenuGroupHeader.js +15 -0
- package/lib-amd/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/useMenuGroupHeader.js +19 -0
- package/lib-amd/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -0
- package/lib-amd/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +27 -0
- package/lib-amd/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -0
- package/lib-amd/components/MenuItem/MenuItem.js +15 -0
- package/lib-amd/components/MenuItem/MenuItem.js.map +1 -0
- package/lib-amd/components/MenuItem/MenuItem.types.js +5 -0
- package/lib-amd/components/MenuItem/MenuItem.types.js.map +1 -0
- package/lib-amd/components/MenuItem/index.js +10 -0
- package/lib-amd/components/MenuItem/index.js.map +1 -0
- package/lib-amd/components/MenuItem/renderMenuItem.js +19 -0
- package/lib-amd/components/MenuItem/renderMenuItem.js.map +1 -0
- package/lib-amd/components/MenuItem/useCharacterSearch.js +22 -0
- package/lib-amd/components/MenuItem/useCharacterSearch.js.map +1 -0
- package/lib-amd/components/MenuItem/useMenuItem.js +80 -0
- package/lib-amd/components/MenuItem/useMenuItem.js.map +1 -0
- package/lib-amd/components/MenuItem/useMenuItemStyles.js +100 -0
- package/lib-amd/components/MenuItem/useMenuItemStyles.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js +15 -0
- package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.js +5 -0
- package/lib-amd/components/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/index.js +10 -0
- package/lib-amd/components/MenuItemCheckbox/index.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js +16 -0
- package/lib-amd/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js +26 -0
- package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -0
- package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +31 -0
- package/lib-amd/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/MenuItemRadio.js +15 -0
- package/lib-amd/components/MenuItemRadio/MenuItemRadio.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/MenuItemRadio.types.js +5 -0
- package/lib-amd/components/MenuItemRadio/MenuItemRadio.types.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/index.js +10 -0
- package/lib-amd/components/MenuItemRadio/index.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/renderMenuItemRadio.js +19 -0
- package/lib-amd/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/useMenuItemRadio.js +27 -0
- package/lib-amd/components/MenuItemRadio/useMenuItemRadio.js.map +1 -0
- package/lib-amd/components/MenuItemRadio/useMenuItemRadioStyles.js +31 -0
- package/lib-amd/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -0
- package/lib-amd/components/MenuList/MenuList.js +16 -0
- package/lib-amd/components/MenuList/MenuList.js.map +1 -0
- package/lib-amd/components/MenuList/MenuList.types.js +5 -0
- package/lib-amd/components/MenuList/MenuList.types.js.map +1 -0
- package/lib-amd/components/MenuList/index.js +11 -0
- package/lib-amd/components/MenuList/index.js.map +1 -0
- package/lib-amd/components/MenuList/renderMenuList.js +15 -0
- package/lib-amd/components/MenuList/renderMenuList.js.map +1 -0
- package/lib-amd/components/MenuList/useMenuList.js +124 -0
- package/lib-amd/components/MenuList/useMenuList.js.map +1 -0
- package/lib-amd/components/MenuList/useMenuListContextValues.js +20 -0
- package/lib-amd/components/MenuList/useMenuListContextValues.js.map +1 -0
- package/lib-amd/components/MenuList/useMenuListStyles.js +21 -0
- package/lib-amd/components/MenuList/useMenuListStyles.js.map +1 -0
- package/lib-amd/components/MenuPopover/MenuPopover.js +15 -0
- package/lib-amd/components/MenuPopover/MenuPopover.js.map +1 -0
- package/lib-amd/components/MenuPopover/MenuPopover.types.js +5 -0
- package/lib-amd/components/MenuPopover/MenuPopover.types.js.map +1 -0
- package/lib-amd/components/MenuPopover/index.js +10 -0
- package/lib-amd/components/MenuPopover/index.js.map +1 -0
- package/lib-amd/components/MenuPopover/renderMenuPopover.js +18 -0
- package/lib-amd/components/MenuPopover/renderMenuPopover.js.map +1 -0
- package/lib-amd/components/MenuPopover/useMenuPopover.js +82 -0
- package/lib-amd/components/MenuPopover/useMenuPopover.js.map +1 -0
- package/lib-amd/components/MenuPopover/useMenuPopoverStyles.js +21 -0
- package/lib-amd/components/MenuPopover/useMenuPopoverStyles.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.js +15 -0
- package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.types.js +5 -0
- package/lib-amd/components/MenuSplitGroup/MenuSplitGroup.types.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/index.js +10 -0
- package/lib-amd/components/MenuSplitGroup/index.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/renderMenuSplitGroup.js +14 -0
- package/lib-amd/components/MenuSplitGroup/renderMenuSplitGroup.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/useMenuSplitGroup.js +47 -0
- package/lib-amd/components/MenuSplitGroup/useMenuSplitGroup.js.map +1 -0
- package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js +43 -0
- package/lib-amd/components/MenuSplitGroup/useMenuSplitGroupStyles.js.map +1 -0
- package/lib-amd/components/MenuTrigger/MenuTrigger.js +18 -0
- package/lib-amd/components/MenuTrigger/MenuTrigger.js.map +1 -0
- package/lib-amd/components/MenuTrigger/MenuTrigger.types.js +5 -0
- package/lib-amd/components/MenuTrigger/MenuTrigger.types.js.map +1 -0
- package/lib-amd/components/MenuTrigger/index.js +9 -0
- package/lib-amd/components/MenuTrigger/index.js.map +1 -0
- package/lib-amd/components/MenuTrigger/renderMenuTrigger.js +15 -0
- package/lib-amd/components/MenuTrigger/renderMenuTrigger.js.map +1 -0
- package/lib-amd/components/MenuTrigger/useMenuTrigger.js +112 -0
- package/lib-amd/components/MenuTrigger/useMenuTrigger.js.map +1 -0
- package/lib-amd/components/index.js +7 -0
- package/lib-amd/components/index.js.map +1 -0
- package/lib-amd/contexts/menuContext.js +31 -0
- package/lib-amd/contexts/menuContext.js.map +1 -0
- package/lib-amd/contexts/menuGroupContext.js +13 -0
- package/lib-amd/contexts/menuGroupContext.js.map +1 -0
- package/lib-amd/contexts/menuListContext.js +23 -0
- package/lib-amd/contexts/menuListContext.js.map +1 -0
- package/lib-amd/contexts/menuTriggerContext.js +14 -0
- package/lib-amd/contexts/menuTriggerContext.js.map +1 -0
- package/lib-amd/index.js +69 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-amd/selectable/index.js +7 -0
- package/lib-amd/selectable/index.js.map +1 -0
- package/lib-amd/selectable/types.js +5 -0
- package/lib-amd/selectable/types.js.map +1 -0
- package/lib-amd/selectable/useCheckmarkStyles.js +28 -0
- package/lib-amd/selectable/useCheckmarkStyles.js.map +1 -0
- package/lib-amd/utils/index.js +6 -0
- package/lib-amd/utils/index.js.map +1 -0
- package/lib-amd/utils/useIsSubmenu.js +20 -0
- package/lib-amd/utils/useIsSubmenu.js.map +1 -0
- package/lib-amd/utils/useOnMenuEnter.js +59 -0
- package/lib-amd/utils/useOnMenuEnter.js.map +1 -0
- package/lib-commonjs/components/Menu/useMenu.js +23 -26
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js +0 -2
- package/lib-commonjs/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js +2 -2
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +3 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.js +20 -29
- package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js +0 -2
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +20 -14
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +42 -28
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/contexts/menuContext.js +0 -1
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js +0 -1
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -9
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
define(["require", "exports", "react", "@fluentui/react-utilities", "@fluentui/react-portal"], function (require, exports, React, react_utilities_1, react_portal_1) {
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.dispatchMenuEnterEvent = exports.useOnMenuMouseEnter = exports.MENU_ENTER_EVENT = void 0;
|
|
5
|
+
/**
|
|
6
|
+
* Name of the custom event
|
|
7
|
+
*/
|
|
8
|
+
exports.MENU_ENTER_EVENT = 'fuimenuenter';
|
|
9
|
+
/**
|
|
10
|
+
* This hook works similarly to @see {useOnClickOutside}
|
|
11
|
+
*
|
|
12
|
+
* Problem: Trying to behave the same as system menus:
|
|
13
|
+
* When the mouse leaves a stack of nested menus the stack should not dismiss.
|
|
14
|
+
* However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.
|
|
15
|
+
*
|
|
16
|
+
* We don't use the native mouseenter event because it would trigger too many times in the document
|
|
17
|
+
* Instead, dispatch custom DOM event from the menu so that it can bubble
|
|
18
|
+
* Each nested menu can use the listener to check if the event is from a child or parent menu
|
|
19
|
+
*/
|
|
20
|
+
var useOnMenuMouseEnter = function (options) {
|
|
21
|
+
var refs = options.refs, callback = options.callback, element = options.element, disabled = options.disabled;
|
|
22
|
+
// Keep mouse event here because this is essentially a custom 'mouseenter' event
|
|
23
|
+
var listener = react_utilities_1.useEventCallback(function (ev) {
|
|
24
|
+
var _a;
|
|
25
|
+
var popoverRef = refs[0];
|
|
26
|
+
var someMenuPopover = ev.target;
|
|
27
|
+
// someMenu is a child -> will always be contained because of vParents
|
|
28
|
+
// someMenu is a parent -> will always not be contained because no vParent
|
|
29
|
+
// someMenu is the current popover -> it will contain itself
|
|
30
|
+
var isOutsidePopover = !react_portal_1.elementContains((_a = popoverRef.current) !== null && _a !== void 0 ? _a : null, someMenuPopover);
|
|
31
|
+
if (isOutsidePopover && !disabled) {
|
|
32
|
+
callback(ev);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
React.useEffect(function () {
|
|
36
|
+
// eslint-disable-next-line eqeqeq
|
|
37
|
+
if (element == null) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (!disabled) {
|
|
41
|
+
element.addEventListener(exports.MENU_ENTER_EVENT, listener);
|
|
42
|
+
}
|
|
43
|
+
return function () {
|
|
44
|
+
element.removeEventListener(exports.MENU_ENTER_EVENT, listener);
|
|
45
|
+
};
|
|
46
|
+
}, [listener, element, disabled]);
|
|
47
|
+
};
|
|
48
|
+
exports.useOnMenuMouseEnter = useOnMenuMouseEnter;
|
|
49
|
+
/**
|
|
50
|
+
* Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`
|
|
51
|
+
* @param el element for the event target
|
|
52
|
+
* @param nativeEvent the native mouse event this is mapped to
|
|
53
|
+
*/
|
|
54
|
+
var dispatchMenuEnterEvent = function (el, nativeEvent) {
|
|
55
|
+
el.dispatchEvent(new CustomEvent(exports.MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent: nativeEvent } }));
|
|
56
|
+
};
|
|
57
|
+
exports.dispatchMenuEnterEvent = dispatchMenuEnterEvent;
|
|
58
|
+
});
|
|
59
|
+
//# sourceMappingURL=useOnMenuEnter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOnMenuEnter.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-menu/src/utils/useOnMenuEnter.ts"],"names":[],"mappings":";;;;IAKA;;OAEG;IACU,QAAA,gBAAgB,GAAG,cAAc,CAAC;IAE/C;;;;;;;;;;OAUG;IACI,IAAM,mBAAmB,GAAG,UAAC,OAAyC;QACnE,IAAA,IAAI,GAAkC,OAAO,KAAzC,EAAE,QAAQ,GAAwB,OAAO,SAA/B,EAAE,OAAO,GAAe,OAAO,QAAtB,EAAE,QAAQ,GAAK,OAAO,SAAZ,CAAa;QAEtD,gFAAgF;QAChF,IAAM,QAAQ,GAAG,kCAAgB,CAAC,UAAC,EAAc;;YAC/C,IAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YAC3B,IAAM,eAAe,GAAG,EAAE,CAAC,MAAqB,CAAC;YAEjD,sEAAsE;YACtE,0EAA0E;YAC1E,4DAA4D;YAC5D,IAAM,gBAAgB,GAAG,CAAC,8BAAe,CAAC,MAAA,UAAU,CAAC,OAAO,mCAAI,IAAI,EAAE,eAAe,CAAC,CAAC;YACvF,IAAI,gBAAgB,IAAI,CAAC,QAAQ,EAAE;gBACjC,QAAQ,CAAC,EAAE,CAAC,CAAC;aACd;QACH,CAAC,CAAC,CAAC;QAEH,KAAK,CAAC,SAAS,CAAC;YACd,kCAAkC;YAClC,IAAI,OAAO,IAAI,IAAI,EAAE;gBACnB,OAAO;aACR;YAUD,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO,CAAC,gBAAgB,CAAC,wBAAgB,EAAE,QAA4B,CAAC,CAAC;aAC1E;YAED,OAAO;gBACL,OAAO,CAAC,mBAAmB,CAAC,wBAAgB,EAAE,QAA4B,CAAC,CAAC;YAC9E,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC;IAvCW,QAAA,mBAAmB,uBAuC9B;IAEF;;;;OAIG;IACI,IAAM,sBAAsB,GAAG,UAAC,EAAe,EAAE,WAAuB;QAC7E,EAAE,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAgB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,WAAW,aAAA,EAAE,EAAE,CAAC,CAAC,CAAC;IAClG,CAAC,CAAC;IAFW,QAAA,sBAAsB,0BAEjC","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n const { refs, callback, element, disabled } = options;\n\n // Keep mouse event here because this is essentially a custom 'mouseenter' event\n const listener = useEventCallback((ev: MouseEvent) => {\n const popoverRef = refs[0];\n const someMenuPopover = ev.target as HTMLElement;\n\n // someMenu is a child -> will always be contained because of vParents\n // someMenu is a parent -> will always not be contained because no vParent\n // someMenu is the current popover -> it will contain itself\n const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n if (isOutsidePopover && !disabled) {\n callback(ev);\n }\n });\n\n React.useEffect(() => {\n // eslint-disable-next-line eqeqeq\n if (element == null) {\n return;\n }\n\n /**\n * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n * evt is being typed as a base class of MouseEvent -> `Event`.\n * This type is used to override `listener` calls to make TS happy\n */\n\n type ListenerOverride = (evt: Event) => void;\n\n if (!disabled) {\n element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n }\n\n return () => {\n element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n };\n }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"]}
|
|
@@ -121,7 +121,6 @@ const useMenu_unstable = props => {
|
|
|
121
121
|
open,
|
|
122
122
|
setOpen,
|
|
123
123
|
checkedValues,
|
|
124
|
-
defaultCheckedValues,
|
|
125
124
|
onCheckedValueChange,
|
|
126
125
|
persistOnItemClick
|
|
127
126
|
};
|
|
@@ -133,33 +132,25 @@ exports.useMenu_unstable = useMenu_unstable;
|
|
|
133
132
|
* i.e checkboxes and radios
|
|
134
133
|
*/
|
|
135
134
|
|
|
136
|
-
const useMenuSelectableState =
|
|
135
|
+
const useMenuSelectableState = props => {
|
|
137
136
|
const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
|
|
138
|
-
state:
|
|
139
|
-
defaultState:
|
|
137
|
+
state: props.checkedValues,
|
|
138
|
+
defaultState: props.defaultCheckedValues,
|
|
140
139
|
initialState: {}
|
|
141
140
|
});
|
|
142
|
-
const {
|
|
143
|
-
onCheckedValueChange: onCheckedValueChangeOriginal
|
|
144
|
-
} = state;
|
|
145
141
|
const onCheckedValueChange = react_utilities_1.useEventCallback((e, {
|
|
146
142
|
name,
|
|
147
143
|
checkedItems
|
|
148
144
|
}) => {
|
|
149
|
-
|
|
150
|
-
onCheckedValueChangeOriginal(e, {
|
|
151
|
-
name,
|
|
152
|
-
checkedItems
|
|
153
|
-
});
|
|
154
|
-
}
|
|
145
|
+
var _a;
|
|
155
146
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
} : {
|
|
160
|
-
[name]: checkedItems
|
|
161
|
-
};
|
|
147
|
+
(_a = props.onCheckedValueChange) === null || _a === void 0 ? void 0 : _a.call(props, e, {
|
|
148
|
+
name,
|
|
149
|
+
checkedItems
|
|
162
150
|
});
|
|
151
|
+
setCheckedValues(currentValue => ({ ...currentValue,
|
|
152
|
+
[name]: checkedItems
|
|
153
|
+
}));
|
|
163
154
|
});
|
|
164
155
|
return [checkedValues, onCheckedValueChange];
|
|
165
156
|
};
|
|
@@ -240,8 +231,10 @@ const useMenuOpenState = state => {
|
|
|
240
231
|
disabled: !open,
|
|
241
232
|
element: targetDocument,
|
|
242
233
|
refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
|
|
243
|
-
callback:
|
|
244
|
-
open: false
|
|
234
|
+
callback: event => setOpen(event, {
|
|
235
|
+
open: false,
|
|
236
|
+
type: 'clickOutside',
|
|
237
|
+
event
|
|
245
238
|
})
|
|
246
239
|
}); // only close on scroll for context, or when closeOnScroll is specified
|
|
247
240
|
|
|
@@ -249,20 +242,24 @@ const useMenuOpenState = state => {
|
|
|
249
242
|
react_utilities_1.useOnScrollOutside({
|
|
250
243
|
contains: react_portal_1.elementContains,
|
|
251
244
|
element: targetDocument,
|
|
252
|
-
callback:
|
|
253
|
-
open: false
|
|
245
|
+
callback: event => setOpen(event, {
|
|
246
|
+
open: false,
|
|
247
|
+
type: 'scrollOutside',
|
|
248
|
+
event
|
|
254
249
|
}),
|
|
255
250
|
refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
|
|
256
251
|
disabled: !open || !closeOnScroll
|
|
257
252
|
});
|
|
258
253
|
index_1.useOnMenuMouseEnter({
|
|
259
254
|
element: targetDocument,
|
|
260
|
-
callback:
|
|
255
|
+
callback: event => {
|
|
261
256
|
// When moving from a menu directly back to its trigger, this handler can close the menu
|
|
262
257
|
// Explicitly check a flag to see if this situation happens
|
|
263
258
|
if (!enteringTriggerRef.current) {
|
|
264
|
-
setOpen(
|
|
265
|
-
open: false
|
|
259
|
+
setOpen(event, {
|
|
260
|
+
open: false,
|
|
261
|
+
type: 'menuMouseEnter',
|
|
262
|
+
event
|
|
266
263
|
});
|
|
267
264
|
}
|
|
268
265
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuState } from './Menu.types';\nimport { Tab } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? ('after' as const) : ('below' as const),\n align: isSubmenu ? ('top' as const) : ('start' as const),\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n };\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n defaultCheckedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n state: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: state.checkedValues,\n defaultState: state.defaultCheckedValues,\n initialState: {},\n });\n const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n if (onCheckedValueChangeOriginal) {\n onCheckedValueChangeOriginal(e, { name, checkedItems });\n }\n\n setCheckedValues(s => {\n return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };\n });\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'onOpenChange'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = React.useRef(false);\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (e.type === 'keydown') {\n if ((e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvents, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: e => setOpen(e, { open: false }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, { open: false }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: e => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(e, { open: false });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeout.current);\n };\n }, []);\n\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (shouldHandleCloseRef.current) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n }\n\n shouldHandleCloseRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/Menu/useMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { usePositioningMouseTarget, usePositioning, resolvePositioningShorthand } from '@fluentui/react-positioning';\nimport {\n useControllableState,\n useId,\n useOnClickOutside,\n useEventCallback,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MENU_ENTER_EVENT, useOnMenuMouseEnter } from '../../utils/index';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuOpenChangeData, MenuOpenEvent, MenuProps, MenuState } from './Menu.types';\nimport { Tab } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Menu.\n *\n * The returned state can be modified with hooks such as useMenuStyles,\n * before being passed to renderMenu_unstable.\n *\n * @param props - props from this instance of Menu\n */\nexport const useMenu_unstable = (props: MenuProps): MenuState => {\n const isSubmenu = useIsSubmenu();\n const {\n hoverDelay = 500,\n inline = false,\n hasCheckmarks = false,\n hasIcons = false,\n closeOnScroll = false,\n openOnContext = false,\n persistOnItemClick = false,\n openOnHover = isSubmenu,\n defaultCheckedValues,\n } = props;\n const triggerId = useId('menu');\n const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n\n const positioningState = {\n position: isSubmenu ? 'after' : 'below',\n align: isSubmenu ? 'top' : 'start',\n target: props.openOnContext ? contextTarget : undefined,\n ...resolvePositioningShorthand(props.positioning),\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Menu must contain at most two children');\n }\n }\n\n let menuTrigger: React.ReactElement | undefined = undefined;\n let menuPopover: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n menuTrigger = children[0];\n menuPopover = children[1];\n } else if (children.length === 1) {\n menuPopover = children[0];\n }\n\n const { targetRef: triggerRef, containerRef: menuPopoverRef } = usePositioning(positioningState);\n\n // TODO Better way to narrow types ?\n const [open, setOpen] = useMenuOpenState({\n hoverDelay,\n isSubmenu,\n setContextTarget,\n closeOnScroll,\n menuPopoverRef,\n triggerRef,\n open: props.open,\n defaultOpen: props.defaultOpen,\n onOpenChange: props.onOpenChange,\n openOnContext,\n });\n\n const [checkedValues, onCheckedValueChange] = useMenuSelectableState({\n checkedValues: props.checkedValues,\n defaultCheckedValues,\n onCheckedValueChange: props.onCheckedValueChange,\n });\n\n return {\n inline,\n hoverDelay,\n triggerId,\n isSubmenu,\n openOnHover,\n contextTarget,\n setContextTarget,\n hasCheckmarks,\n hasIcons,\n closeOnScroll,\n menuTrigger,\n menuPopover,\n triggerRef,\n menuPopoverRef,\n components: {},\n openOnContext,\n open,\n setOpen,\n checkedValues,\n onCheckedValueChange,\n persistOnItemClick,\n };\n};\n\n/**\n * Adds appropriate state values and handlers for selectable items\n * i.e checkboxes and radios\n */\nconst useMenuSelectableState = (\n props: Pick<MenuProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,\n) => {\n const [checkedValues, setCheckedValues] = useControllableState({\n state: props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n const onCheckedValueChange: MenuState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {\n props.onCheckedValueChange?.(e, { name, checkedItems });\n\n setCheckedValues(currentValue => ({\n ...currentValue,\n [name]: checkedItems,\n }));\n });\n\n return [checkedValues, onCheckedValueChange] as const;\n};\n\nconst useMenuOpenState = (\n state: Pick<\n MenuState,\n | 'isSubmenu'\n | 'menuPopoverRef'\n | 'setContextTarget'\n | 'triggerRef'\n | 'openOnContext'\n | 'closeOnScroll'\n | 'hoverDelay'\n > &\n Pick<MenuProps, 'open' | 'defaultOpen' | 'onOpenChange'>,\n) => {\n const { targetDocument } = useFluent();\n const parentSetOpen = useMenuContext_unstable(context => context.setOpen);\n const onOpenChange: MenuProps['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const shouldHandleCloseRef = React.useRef(false);\n const shouldHandleTabRef = React.useRef(false);\n const pressedShiftRef = React.useRef(false);\n const setOpenTimeout = React.useRef(0);\n const enteringTriggerRef = React.useRef(false);\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n\n const trySetOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n const event = e instanceof CustomEvent && e.type === MENU_ENTER_EVENT ? e.detail.nativeEvent : e;\n onOpenChange?.(event, { ...data });\n if (data.open && e.type === 'contextmenu') {\n state.setContextTarget(e as React.MouseEvent);\n }\n\n if (!data.open) {\n state.setContextTarget(undefined);\n shouldHandleCloseRef.current = true;\n }\n\n if (e.type === 'keydown') {\n if ((e as React.KeyboardEvent<HTMLElement>).key === Tab) {\n shouldHandleTabRef.current = true;\n pressedShiftRef.current = (e as React.KeyboardEvent<HTMLElement>).shiftKey;\n }\n }\n\n if (data.bubble) {\n parentSetOpen(e, { ...data });\n }\n\n setOpenState(data.open);\n });\n\n const setOpen = useEventCallback((e: MenuOpenEvent, data: MenuOpenChangeData) => {\n clearTimeout(setOpenTimeout.current);\n if (!(e instanceof Event) && e.persist) {\n // < React 17 still uses pooled synthetic events\n e.persist();\n }\n\n if (e.type === 'mouseleave' || e.type === 'mouseenter' || e.type === 'mousemove' || e.type === MENU_ENTER_EVENT) {\n if (state.triggerRef.current?.contains(e.target as HTMLElement)) {\n enteringTriggerRef.current = e.type === 'mouseenter' || e.type === 'mousemove';\n }\n\n // FIXME leaking Node timeout type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n setOpenTimeout.current = setTimeout(() => trySetOpen(e, data), state.hoverDelay);\n } else {\n trySetOpen(e, data);\n }\n });\n\n useOnClickOutside({\n contains: elementContains,\n disabled: !open,\n element: targetDocument,\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n callback: event => setOpen(event, { open: false, type: 'clickOutside', event }),\n });\n\n // only close on scroll for context, or when closeOnScroll is specified\n const closeOnScroll = state.openOnContext || state.closeOnScroll;\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: event => setOpen(event, { open: false, type: 'scrollOutside', event }),\n refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(\n Boolean,\n ) as React.MutableRefObject<HTMLElement>[],\n disabled: !open || !closeOnScroll,\n });\n\n useOnMenuMouseEnter({\n element: targetDocument,\n callback: event => {\n // When moving from a menu directly back to its trigger, this handler can close the menu\n // Explicitly check a flag to see if this situation happens\n if (!enteringTriggerRef.current) {\n setOpen(event, { open: false, type: 'menuMouseEnter', event });\n }\n },\n disabled: !open,\n refs: [state.menuPopoverRef],\n });\n\n // Clear timeout on unmount\n // Setting state after a component unmounts can cause memory leaks\n React.useEffect(() => {\n return () => {\n clearTimeout(setOpenTimeout.current);\n };\n }, []);\n\n // Manage focus for open state\n const { findFirstFocusable, findNextFocusable, findPrevFocusable } = useFocusFinders();\n const focusFirst = React.useCallback(() => {\n const firstFocusable = findFirstFocusable(state.menuPopoverRef.current);\n firstFocusable?.focus();\n }, [findFirstFocusable, state.menuPopoverRef]);\n\n const focusAfterMenuTrigger = React.useCallback(() => {\n const nextFocusable = findNextFocusable(state.triggerRef.current);\n nextFocusable?.focus();\n }, [findNextFocusable, state.triggerRef]);\n\n const focusBeforeMenuTrigger = React.useCallback(() => {\n const prevFocusable = findPrevFocusable(state.triggerRef.current);\n prevFocusable?.focus();\n }, [findPrevFocusable, state.triggerRef]);\n\n React.useEffect(() => {\n if (open) {\n focusFirst();\n } else {\n if (shouldHandleCloseRef.current) {\n if (shouldHandleTabRef.current && !state.isSubmenu) {\n pressedShiftRef.current ? focusBeforeMenuTrigger() : focusAfterMenuTrigger();\n } else {\n state.triggerRef.current?.focus();\n }\n }\n }\n\n shouldHandleCloseRef.current = false;\n shouldHandleTabRef.current = false;\n pressedShiftRef.current = false;\n }, [state.triggerRef, state.isSubmenu, open, focusFirst, focusAfterMenuTrigger, focusBeforeMenuTrigger]);\n\n return [open, setOpen] as const;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -8,7 +8,6 @@ exports.useMenuContextValues_unstable = void 0;
|
|
|
8
8
|
function useMenuContextValues_unstable(state) {
|
|
9
9
|
const {
|
|
10
10
|
checkedValues,
|
|
11
|
-
defaultCheckedValues,
|
|
12
11
|
hasCheckmarks,
|
|
13
12
|
hasIcons,
|
|
14
13
|
inline,
|
|
@@ -26,7 +25,6 @@ function useMenuContextValues_unstable(state) {
|
|
|
26
25
|
|
|
27
26
|
const menu = {
|
|
28
27
|
checkedValues,
|
|
29
|
-
defaultCheckedValues,
|
|
30
28
|
hasCheckmarks,
|
|
31
29
|
hasIcons,
|
|
32
30
|
inline,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,6BAAhB,CAA8C,KAA9C,EAA8D;EAC5D,MAAM;IACJ,aADI;IAEJ,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/Menu/useMenuContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,6BAAhB,CAA8C,KAA9C,EAA8D;EAC5D,MAAM;IACJ,aADI;IAEJ,aAFI;IAGJ,QAHI;IAIJ,MAJI;IAKJ,SALI;IAMJ,cANI;IAOJ,oBAPI;IAQJ,IARI;IASJ,aATI;IAUJ,WAVI;IAWJ,kBAXI;IAYJ,OAZI;IAaJ,SAbI;IAcJ;EAdI,IAeF,KAfJ,CAD4D,CAkB5D;;EACA,MAAM,IAAI,GAAG;IACX,aADW;IAEX,aAFW;IAGX,QAHW;IAIX,MAJW;IAKX,SALW;IAMX,cANW;IAOX,oBAPW;IAQX,IARW;IASX,aATW;IAUX,WAVW;IAWX,kBAXW;IAYX,OAZW;IAaX,SAbW;IAcX;EAdW,CAAb;EAiBA,OAAO;IAAE;EAAF,CAAP;AACD;;AArCD,OAAA,CAAA,6BAAA,GAAA,6BAAA","sourcesContent":["import type { MenuContextValues, MenuState } from './Menu.types';\n\nexport function useMenuContextValues_unstable(state: MenuState): MenuContextValues {\n const {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n inline,\n isSubmenu,\n menuPopoverRef,\n onCheckedValueChange,\n open,\n openOnContext,\n openOnHover,\n persistOnItemClick,\n setOpen,\n triggerId,\n triggerRef,\n } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menu = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n inline,\n isSubmenu,\n menuPopoverRef,\n onCheckedValueChange,\n open,\n openOnContext,\n openOnHover,\n persistOnItemClick,\n setOpen,\n triggerId,\n triggerRef,\n };\n\n return { menu };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -20,12 +20,12 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
20
20
|
"jrapky": "fd1gkq",
|
|
21
21
|
"Frg6f3": ["f1q7jvqi", "f1rnx978"],
|
|
22
22
|
"a9b677": "f14z66ap",
|
|
23
|
-
"Bn0qgzm": "
|
|
23
|
+
"Bn0qgzm": "f1vxd6vx",
|
|
24
24
|
"oivjwe": "fg706s2",
|
|
25
25
|
"B9xav0g": "frpde29"
|
|
26
26
|
}
|
|
27
27
|
}, {
|
|
28
|
-
"d": [".fvjh0tl{margin-top:4px;}", ".f1rnx978{margin-right:-5px;}", ".f1q7jvqi{margin-left:-5px;}", ".fd1gkq{margin-bottom:4px;}", ".f14z66ap{width:auto;}", ".
|
|
28
|
+
"d": [".fvjh0tl{margin-top:4px;}", ".f1rnx978{margin-right:-5px;}", ".f1q7jvqi{margin-left:-5px;}", ".fd1gkq{margin-bottom:4px;}", ".f14z66ap{width:auto;}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}"]
|
|
29
29
|
});
|
|
30
30
|
|
|
31
31
|
const useMenuDividerStyles_unstable = state => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE;AAD+D,CAA1D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAQO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n width: 'auto',\n ...shorthands.borderBottom(
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE;AAD+D,CAA1D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;;AAQO,MAAM,6BAA6B,GAAI,KAAD,IAA4B;EACvE,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {\n root: 'fui-MenuDivider',\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.margin('4px', '-5px', '4px', '-5px'),\n width: 'auto',\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n});\n\nexport const useMenuDividerStyles_unstable = (state: MenuDividerState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,qBAAhB,CAAsC,KAAtC,EAA6D,GAA7D,EAAwF;EACtF,MAAM,QAAQ,GAAG,iBAAA,CAAA,KAAA,CAAM,YAAN,CAAjB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,mBAAmB,QAFc;MAGjC,IAAI,EAAE,OAH2B;MAIjC,GAAG;IAJ8B,CAA7B,CAJD;IAUL
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACH,SAAgB,qBAAhB,CAAsC,KAAtC,EAA6D,GAA7D,EAAwF;EACtF,MAAM,QAAQ,GAAG,iBAAA,CAAA,KAAA,CAAM,YAAN,CAAjB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,mBAAmB,QAFc;MAGjC,IAAI,EAAE,OAH2B;MAIjC,GAAG;IAJ8B,CAA7B,CAJD;IAUL;EAVK,CAAP;AAYD;;AAfD,OAAA,CAAA,qBAAA,GAAA,qBAAA","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n const headerId = useId('menu-group');\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n 'aria-labelledby': headerId,\n role: 'group',\n ...props,\n }),\n headerId,\n };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -95,7 +95,9 @@ const useMenuItem_unstable = (props, ref) => {
|
|
|
95
95
|
setOpen(event, {
|
|
96
96
|
open: false,
|
|
97
97
|
keyboard: dismissedWithKeyboardRef.current,
|
|
98
|
-
bubble: true
|
|
98
|
+
bubble: true,
|
|
99
|
+
type: 'menuItemClick',
|
|
100
|
+
event
|
|
99
101
|
});
|
|
100
102
|
dismissedWithKeyboardRef.current = false;
|
|
101
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useEventCallback, resolveShorthand, useMergedRefs, getNativeElementProps } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useCharacterSearch } from './useCharacterSearch';\nimport { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';\nimport {\n ChevronRightFilled,\n ChevronRightRegular,\n ChevronLeftFilled,\n ChevronLeftRegular,\n bundleIcon,\n} from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport type { MenuItemProps, MenuItemState } from './MenuItem.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection, ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n\nconst ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);\nconst ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {\n const isSubmenuTrigger = useMenuTriggerContext_unstable();\n const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);\n const {\n as = 'div',\n disabled,\n disabledFocusable,\n hasSubmenu = isSubmenuTrigger,\n persistOnClick = persistOnClickContext,\n } = props;\n const hasIcons = useMenuListContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuListContext_unstable(context => context.hasCheckmarks);\n const setOpen = useMenuContext_unstable(context => context.setOpen);\n\n const { dir } = useFluent();\n const innerRef = React.useRef<ARIAButtonElementIntersection<'div'>>(null);\n const dismissedWithKeyboardRef = React.useRef(false);\n\n const isDisabled = Boolean(disabled || disabledFocusable);\n\n const state: MenuItemState = {\n hasSubmenu,\n disabled: isDisabled,\n persistOnClick,\n components: {\n root: 'div',\n icon: 'span',\n checkmark: 'span',\n submenuIndicator: 'span',\n content: 'span',\n secondaryContent: 'span',\n },\n isNativeButton: as === 'button',\n root: getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'div'>>(\n { disabled: false, disabledFocusable: isDisabled, as },\n {\n required: true,\n defaultProps: {\n role: 'menuitem',\n ...props,\n ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,\n onKeyDown: useEventCallback(event => {\n props.onKeyDown?.(event);\n if (!event.isDefaultPrevented() && (event.key === Space || event.key === Enter)) {\n dismissedWithKeyboardRef.current = true;\n }\n }),\n onMouseEnter: useEventCallback(event => {\n innerRef.current?.focus();\n\n props.onMouseEnter?.(event);\n }),\n onClick: useEventCallback(event => {\n if (!hasSubmenu && !persistOnClick) {\n setOpen(event, {\n open: false,\n keyboard: dismissedWithKeyboardRef.current,\n bubble: true,\n type: 'menuItemClick',\n event,\n });\n dismissedWithKeyboardRef.current = false;\n }\n\n props.onClick?.(event);\n }),\n },\n },\n ),\n ),\n icon: resolveShorthand(props.icon, { required: hasIcons }),\n checkmark: resolveShorthand(props.checkmark, { required: hasCheckmarks }),\n submenuIndicator: resolveShorthand(props.submenuIndicator, {\n required: hasSubmenu,\n defaultProps: {\n children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon />,\n },\n }),\n content: resolveShorthand(props.content, {\n required: !!props.children,\n defaultProps: { children: props.children },\n }),\n secondaryContent: resolveShorthand(props.secondaryContent),\n };\n useCharacterSearch(state, innerRef);\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -41,22 +41,6 @@ const useMenuList_unstable = (props, ref) => {
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
const innerRef = React.useRef(null);
|
|
44
|
-
const initialState = {
|
|
45
|
-
components: {
|
|
46
|
-
root: 'div'
|
|
47
|
-
},
|
|
48
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
49
|
-
ref: react_utilities_1.useMergedRefs(ref, innerRef),
|
|
50
|
-
role: 'menu',
|
|
51
|
-
'aria-labelledby': menuContext.triggerId,
|
|
52
|
-
...focusAttributes,
|
|
53
|
-
...props
|
|
54
|
-
}),
|
|
55
|
-
hasIcons: menuContext.hasIcons || false,
|
|
56
|
-
hasCheckmarks: menuContext.hasCheckmarks || false,
|
|
57
|
-
...(hasMenuContext && menuContext),
|
|
58
|
-
...props
|
|
59
|
-
};
|
|
60
44
|
const setFocusByFirstCharacter = React.useCallback((e, itemEl) => {
|
|
61
45
|
// TODO use some kind of children registration to reduce dependency on DOM roles
|
|
62
46
|
const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
|
|
@@ -102,13 +86,11 @@ const useMenuList_unstable = (props, ref) => {
|
|
|
102
86
|
}
|
|
103
87
|
}, [findAllFocusable]);
|
|
104
88
|
const [checkedValues, setCheckedValues] = react_utilities_1.useControllableState({
|
|
105
|
-
state:
|
|
106
|
-
defaultState:
|
|
89
|
+
state: hasMenuContext ? menuContext.checkedValues : props.checkedValues,
|
|
90
|
+
defaultState: props.defaultCheckedValues,
|
|
107
91
|
initialState: {}
|
|
108
92
|
});
|
|
109
|
-
const
|
|
110
|
-
onCheckedValueChange
|
|
111
|
-
} = initialState;
|
|
93
|
+
const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;
|
|
112
94
|
const toggleCheckbox = react_utilities_1.useEventCallback((e, name, value, checked) => {
|
|
113
95
|
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
|
|
114
96
|
const newCheckedItems = [...checkedItems];
|
|
@@ -119,7 +101,7 @@ const useMenuList_unstable = (props, ref) => {
|
|
|
119
101
|
newCheckedItems.push(value);
|
|
120
102
|
}
|
|
121
103
|
|
|
122
|
-
|
|
104
|
+
handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
|
|
123
105
|
name,
|
|
124
106
|
checkedItems: newCheckedItems
|
|
125
107
|
});
|
|
@@ -132,18 +114,29 @@ const useMenuList_unstable = (props, ref) => {
|
|
|
132
114
|
setCheckedValues(s => ({ ...s,
|
|
133
115
|
[name]: newCheckedItems
|
|
134
116
|
}));
|
|
135
|
-
|
|
117
|
+
handleCheckedValueChange === null || handleCheckedValueChange === void 0 ? void 0 : handleCheckedValueChange(e, {
|
|
136
118
|
name,
|
|
137
119
|
checkedItems: newCheckedItems
|
|
138
120
|
});
|
|
139
121
|
});
|
|
140
|
-
|
|
122
|
+
return {
|
|
123
|
+
components: {
|
|
124
|
+
root: 'div'
|
|
125
|
+
},
|
|
126
|
+
root: react_utilities_1.getNativeElementProps('div', {
|
|
127
|
+
ref: react_utilities_1.useMergedRefs(ref, innerRef),
|
|
128
|
+
role: 'menu',
|
|
129
|
+
'aria-labelledby': menuContext.triggerId,
|
|
130
|
+
...focusAttributes,
|
|
131
|
+
...props
|
|
132
|
+
}),
|
|
133
|
+
hasIcons: menuContext.hasIcons || false,
|
|
134
|
+
hasCheckmarks: menuContext.hasCheckmarks || false,
|
|
135
|
+
checkedValues,
|
|
141
136
|
setFocusByFirstCharacter,
|
|
142
137
|
selectRadio,
|
|
143
|
-
toggleCheckbox
|
|
144
|
-
checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
|
|
138
|
+
toggleCheckbox
|
|
145
139
|
};
|
|
146
|
-
return state;
|
|
147
140
|
};
|
|
148
141
|
|
|
149
142
|
exports.useMenuList_unstable = useMenuList_unstable;
|
|
@@ -154,14 +147,12 @@ exports.useMenuList_unstable = useMenuList_unstable;
|
|
|
154
147
|
const useMenuContextSelectors = () => {
|
|
155
148
|
const checkedValues = menuContext_1.useMenuContext_unstable(context => context.checkedValues);
|
|
156
149
|
const onCheckedValueChange = menuContext_1.useMenuContext_unstable(context => context.onCheckedValueChange);
|
|
157
|
-
const defaultCheckedValues = menuContext_1.useMenuContext_unstable(context => context.defaultCheckedValues);
|
|
158
150
|
const triggerId = menuContext_1.useMenuContext_unstable(context => context.triggerId);
|
|
159
151
|
const hasIcons = menuContext_1.useMenuContext_unstable(context => context.hasIcons);
|
|
160
152
|
const hasCheckmarks = menuContext_1.useMenuContext_unstable(context => context.hasCheckmarks);
|
|
161
153
|
return {
|
|
162
154
|
checkedValues,
|
|
163
155
|
onCheckedValueChange,
|
|
164
|
-
defaultCheckedValues,
|
|
165
156
|
triggerId,
|
|
166
157
|
hasIcons,
|
|
167
158
|
hasCheckmarks
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState, UninitializedMenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n const initialState: UninitializedMenuListState = {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n ...(hasMenuContext && menuContext),\n ...props,\n };\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: initialState.checkedValues,\n defaultState: initialState.defaultCheckedValues,\n initialState: {},\n });\n\n const { onCheckedValueChange } = initialState;\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n const state = {\n ...initialState,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n checkedValues: checkedValues ?? {},\n };\n\n return state;\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const defaultCheckedValues = useMenuContext_unstable(context => context.defaultCheckedValues);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n defaultCheckedValues,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n useMergedRefs,\n useEventCallback,\n useControllableState,\n getNativeElementProps,\n} from '@fluentui/react-utilities';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { MenuContext } from '../../contexts/menuContext';\nimport type { MenuListProps, MenuListState } from './MenuList.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLElement>): MenuListState => {\n const focusAttributes = useArrowNavigationGroup({ circular: true, ignoreDefaultKeydown: { Tab: true } });\n const { findAllFocusable } = useFocusFinders();\n const menuContext = useMenuContextSelectors();\n const hasMenuContext = useHasParentContext(MenuContext);\n\n if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {\n // TODO throw warnings in development safely\n // eslint-disable-next-line no-console\n console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');\n }\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const setFocusByFirstCharacter = React.useCallback(\n (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n // TODO use some kind of children registration to reduce dependency on DOM roles\n const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];\n if (!innerRef.current) {\n return;\n }\n\n const menuItems = findAllFocusable(\n innerRef.current,\n (el: HTMLElement) => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')!) !== -1,\n );\n\n let startIndex = menuItems.indexOf(itemEl) + 1;\n if (startIndex === menuItems.length) {\n startIndex = 0;\n }\n\n const firstChars = menuItems.map(menuItem => menuItem.textContent?.charAt(0).toLowerCase());\n const char = e.key.toLowerCase();\n\n const getIndexFirstChars = (start: number, firstChar: string) => {\n for (let i = start; i < firstChars.length; i++) {\n if (char === firstChars[i]) {\n return i;\n }\n }\n return -1;\n };\n\n // Check remaining slots in the menu\n let index = getIndexFirstChars(startIndex, char);\n\n // If not found in remaining slots, check from beginning\n if (index === -1) {\n index = getIndexFirstChars(0, char);\n }\n\n // If match was found...\n if (index > -1) {\n menuItems[index].focus();\n }\n },\n [findAllFocusable],\n );\n\n const [checkedValues, setCheckedValues] = useControllableState({\n state: hasMenuContext ? menuContext.checkedValues : props.checkedValues,\n defaultState: props.defaultCheckedValues,\n initialState: {},\n });\n\n const handleCheckedValueChange = hasMenuContext ? menuContext.onCheckedValueChange : props.onCheckedValueChange;\n\n const toggleCheckbox = useEventCallback(\n (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked: boolean) => {\n const checkedItems = checkedValues?.[name] || [];\n const newCheckedItems = [...checkedItems];\n if (checked) {\n newCheckedItems.splice(newCheckedItems.indexOf(value), 1);\n } else {\n newCheckedItems.push(value);\n }\n\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n },\n );\n\n const selectRadio = useEventCallback((e: React.MouseEvent | React.KeyboardEvent, name: string, value: string) => {\n const newCheckedItems = [value];\n setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));\n handleCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'menu',\n 'aria-labelledby': menuContext.triggerId,\n ...focusAttributes,\n ...props,\n }),\n hasIcons: menuContext.hasIcons || false,\n hasCheckmarks: menuContext.hasCheckmarks || false,\n checkedValues,\n setFocusByFirstCharacter,\n selectRadio,\n toggleCheckbox,\n };\n};\n\n/**\n * Adds some sugar to fetching multiple context selector values\n */\nconst useMenuContextSelectors = () => {\n const checkedValues = useMenuContext_unstable(context => context.checkedValues);\n const onCheckedValueChange = useMenuContext_unstable(context => context.onCheckedValueChange);\n const triggerId = useMenuContext_unstable(context => context.triggerId);\n const hasIcons = useMenuContext_unstable(context => context.hasIcons);\n const hasCheckmarks = useMenuContext_unstable(context => context.hasCheckmarks);\n\n return {\n checkedValues,\n onCheckedValueChange,\n triggerId,\n hasIcons,\n hasCheckmarks,\n };\n};\n\n/**\n * Helper function to detect if props and MenuContext values are both used\n */\nconst usingPropsAndMenuContext = (\n props: MenuListProps,\n contextValue: ReturnType<typeof useMenuContextSelectors>,\n hasMenuContext: boolean,\n) => {\n let isUsingPropsAndContext = false;\n for (const val in contextValue) {\n if (props[val as keyof Omit<typeof contextValue, 'hasMenuContext' | 'onCheckedValueChange' | 'triggerId'>]) {\n isUsingPropsAndContext = true;\n }\n }\n\n return hasMenuContext && isUsingPropsAndContext;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -10,7 +10,6 @@ function useMenuListContextValues_unstable(state) {
|
|
|
10
10
|
checkedValues,
|
|
11
11
|
hasCheckmarks,
|
|
12
12
|
hasIcons,
|
|
13
|
-
onCheckedValueChange,
|
|
14
13
|
selectRadio,
|
|
15
14
|
setFocusByFirstCharacter,
|
|
16
15
|
toggleCheckbox
|
|
@@ -20,7 +19,6 @@ function useMenuListContextValues_unstable(state) {
|
|
|
20
19
|
checkedValues,
|
|
21
20
|
hasCheckmarks,
|
|
22
21
|
hasIcons,
|
|
23
|
-
onCheckedValueChange,
|
|
24
22
|
selectRadio,
|
|
25
23
|
setFocusByFirstCharacter,
|
|
26
24
|
toggleCheckbox
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,iCAAhB,CAAkD,KAAlD,EAAsE;EACpE,MAAM;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-menu/src/components/MenuList/useMenuListContextValues.ts"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,iCAAhB,CAAkD,KAAlD,EAAsE;EACpE,MAAM;IAAE,aAAF;IAAiB,aAAjB;IAAgC,QAAhC;IAA0C,WAA1C;IAAuD,wBAAvD;IAAiF;EAAjF,IAAoG,KAA1G,CADoE,CAGpE;;EACA,MAAM,QAAQ,GAAG;IACf,aADe;IAEf,aAFe;IAGf,QAHe;IAIf,WAJe;IAKf,wBALe;IAMf;EANe,CAAjB;EASA,OAAO;IAAE;EAAF,CAAP;AACD;;AAdD,OAAA,CAAA,iCAAA,GAAA,iCAAA","sourcesContent":["import type { MenuListContextValues, MenuListState } from './MenuList.types';\n\nexport function useMenuListContextValues_unstable(state: MenuListState): MenuListContextValues {\n const { checkedValues, hasCheckmarks, hasIcons, selectRadio, setFocusByFirstCharacter, toggleCheckbox } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const menuList = {\n checkedValues,\n hasCheckmarks,\n hasIcons,\n selectRadio,\n setFocusByFirstCharacter,\n toggleCheckbox,\n };\n\n return { menuList };\n}\n"],"sourceRoot":"../src/"}
|