@fluentui/react-menu 9.4.1 → 9.5.1
Sign up to get free protection for your applications and to get access to all the features.
- 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,100 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-icons", "@fluentui/react-tabster", "@fluentui/react-theme", "../../selectable/index"], function (require, exports, tslib_1, react_1, react_icons_1, react_tabster_1, react_theme_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
var _a;
|
4
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
5
|
+
exports.useMenuItemStyles_unstable = exports.menuItemClassNames = void 0;
|
6
|
+
exports.menuItemClassNames = {
|
7
|
+
root: 'fui-MenuItem',
|
8
|
+
icon: 'fui-MenuItem__icon',
|
9
|
+
checkmark: 'fui-MenuItem__checkmark',
|
10
|
+
submenuIndicator: 'fui-MenuItem__submenuIndicator',
|
11
|
+
content: 'fui-MenuItem__content',
|
12
|
+
secondaryContent: 'fui-MenuItem__secondaryContent',
|
13
|
+
};
|
14
|
+
var useStyles = react_1.makeStyles({
|
15
|
+
focusIndicator: react_tabster_1.createFocusOutlineStyle(),
|
16
|
+
// TODO: this should be extracted to another package
|
17
|
+
resetButton: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ boxSizing: 'content-box', backgroundColor: 'inherit', color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', lineHeight: 'normal' }, react_1.shorthands.borderColor('transparent')), react_1.shorthands.overflow('visible')), react_1.shorthands.padding(0)), { WebkitAppearance: 'button', textAlign: 'unset' }),
|
18
|
+
root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { position: 'relative', color: react_theme_1.tokens.colorNeutralForeground2, backgroundColor: react_theme_1.tokens.colorNeutralBackground1, paddingRight: '10px', paddingLeft: '10px', height: '32px', display: 'flex', alignItems: 'center', fontSize: react_theme_1.tokens.fontSizeBase300, cursor: 'pointer' }), react_1.shorthands.gap('4px')), { ':hover': (_a = {
|
19
|
+
backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
|
20
|
+
color: react_theme_1.tokens.colorNeutralForeground2Hover
|
21
|
+
},
|
22
|
+
_a["& ." + react_icons_1.iconFilledClassName] = {
|
23
|
+
display: 'inline',
|
24
|
+
},
|
25
|
+
_a["& ." + react_icons_1.iconRegularClassName] = {
|
26
|
+
display: 'none',
|
27
|
+
},
|
28
|
+
_a["& ." + exports.menuItemClassNames.icon] = {
|
29
|
+
color: react_theme_1.tokens.colorNeutralForeground2BrandSelected,
|
30
|
+
},
|
31
|
+
_a), userSelect: 'none' }),
|
32
|
+
content: {
|
33
|
+
paddingLeft: '2px',
|
34
|
+
paddingRight: '2px',
|
35
|
+
backgroundColor: 'transparent',
|
36
|
+
flexGrow: 1,
|
37
|
+
},
|
38
|
+
secondaryContent: {
|
39
|
+
paddingLeft: '2px',
|
40
|
+
paddingRight: '2px',
|
41
|
+
color: react_theme_1.tokens.colorNeutralForeground3,
|
42
|
+
':hover': {
|
43
|
+
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
44
|
+
},
|
45
|
+
':focus': {
|
46
|
+
color: react_theme_1.tokens.colorNeutralForeground3Hover,
|
47
|
+
},
|
48
|
+
},
|
49
|
+
icon: {
|
50
|
+
width: '20px',
|
51
|
+
height: '20px',
|
52
|
+
fontSize: '20px',
|
53
|
+
lineHeight: 0,
|
54
|
+
alignItems: 'center',
|
55
|
+
display: 'inline-flex',
|
56
|
+
justifyContent: 'center',
|
57
|
+
},
|
58
|
+
submenuIndicator: {
|
59
|
+
width: '20px',
|
60
|
+
height: '20px',
|
61
|
+
fontSize: '20px',
|
62
|
+
lineHeight: 0,
|
63
|
+
alignItems: 'center',
|
64
|
+
display: 'inline-flex',
|
65
|
+
justifyContent: 'center',
|
66
|
+
},
|
67
|
+
disabled: {
|
68
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
69
|
+
':hover': {
|
70
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
71
|
+
},
|
72
|
+
':focus': {
|
73
|
+
color: react_theme_1.tokens.colorNeutralForegroundDisabled,
|
74
|
+
},
|
75
|
+
},
|
76
|
+
});
|
77
|
+
/** Applies style classnames to slots */
|
78
|
+
var useMenuItemStyles_unstable = function (state) {
|
79
|
+
var styles = useStyles();
|
80
|
+
state.root.className = react_1.mergeClasses(exports.menuItemClassNames.root, state.isNativeButton && styles.resetButton, styles.root, styles.focusIndicator, state.disabled && styles.disabled, state.root.className);
|
81
|
+
if (state.content) {
|
82
|
+
state.content.className = react_1.mergeClasses(exports.menuItemClassNames.content, styles.content, state.content.className);
|
83
|
+
}
|
84
|
+
if (state.checkmark) {
|
85
|
+
state.checkmark.className = react_1.mergeClasses(exports.menuItemClassNames.checkmark, state.checkmark.className);
|
86
|
+
}
|
87
|
+
if (state.secondaryContent) {
|
88
|
+
state.secondaryContent.className = react_1.mergeClasses(exports.menuItemClassNames.secondaryContent, !state.disabled && styles.secondaryContent, state.secondaryContent.className);
|
89
|
+
}
|
90
|
+
if (state.icon) {
|
91
|
+
state.icon.className = react_1.mergeClasses(exports.menuItemClassNames.icon, styles.icon, state.icon.className);
|
92
|
+
}
|
93
|
+
if (state.submenuIndicator) {
|
94
|
+
state.submenuIndicator.className = react_1.mergeClasses(exports.menuItemClassNames.submenuIndicator, styles.submenuIndicator, state.submenuIndicator.className);
|
95
|
+
}
|
96
|
+
index_1.useCheckmarkStyles_unstable(state);
|
97
|
+
};
|
98
|
+
exports.useMenuItemStyles_unstable = useMenuItemStyles_unstable;
|
99
|
+
});
|
100
|
+
//# sourceMappingURL=useMenuItemStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useMenuItemStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItem/useMenuItemStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport type { MenuItemCheckboxState } from '../MenuItemCheckbox/index';\nimport type { MenuItemSlots, MenuItemState } from './MenuItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuItemClassNames: SlotClassNames<MenuItemSlots> = {\n root: 'fui-MenuItem',\n icon: 'fui-MenuItem__icon',\n checkmark: 'fui-MenuItem__checkmark',\n submenuIndicator: 'fui-MenuItem__submenuIndicator',\n content: 'fui-MenuItem__content',\n secondaryContent: 'fui-MenuItem__secondaryContent',\n};\n\nconst useStyles = makeStyles({\n focusIndicator: createFocusOutlineStyle(),\n // TODO: this should be extracted to another package\n resetButton: {\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.borderColor('transparent'),\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n root: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n position: 'relative',\n color: tokens.colorNeutralForeground2,\n backgroundColor: tokens.colorNeutralBackground1,\n paddingRight: '10px',\n paddingLeft: '10px',\n height: '32px',\n display: 'flex',\n alignItems: 'center',\n fontSize: tokens.fontSizeBase300,\n cursor: 'pointer',\n ...shorthands.gap('4px'),\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n [`& .${menuItemClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n },\n\n userSelect: 'none',\n },\n content: {\n paddingLeft: '2px',\n paddingRight: '2px',\n backgroundColor: 'transparent',\n flexGrow: 1,\n },\n secondaryContent: {\n paddingLeft: '2px',\n paddingRight: '2px',\n color: tokens.colorNeutralForeground3,\n ':hover': {\n color: tokens.colorNeutralForeground3Hover,\n },\n ':focus': {\n color: tokens.colorNeutralForeground3Hover,\n },\n },\n icon: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n submenuIndicator: {\n width: '20px',\n height: '20px',\n fontSize: '20px',\n lineHeight: 0,\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':focus': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\n/** Applies style classnames to slots */\nexport const useMenuItemStyles_unstable = (state: MenuItemState) => {\n const styles = useStyles();\n state.root.className = mergeClasses(\n menuItemClassNames.root,\n state.isNativeButton && styles.resetButton,\n styles.root,\n styles.focusIndicator,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemClassNames.secondaryContent,\n !state.disabled && styles.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);\n }\n\n if (state.submenuIndicator) {\n state.submenuIndicator.className = mergeClasses(\n menuItemClassNames.submenuIndicator,\n styles.submenuIndicator,\n state.submenuIndicator.className,\n );\n }\n useCheckmarkStyles_unstable(state as MenuItemCheckboxState);\n};\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
define(["require", "exports", "react", "./useMenuItemCheckbox", "./renderMenuItemCheckbox", "./useMenuItemCheckboxStyles"], function (require, exports, React, useMenuItemCheckbox_1, renderMenuItemCheckbox_1, useMenuItemCheckboxStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.MenuItemCheckbox = void 0;
|
5
|
+
/**
|
6
|
+
* Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.
|
7
|
+
*/
|
8
|
+
exports.MenuItemCheckbox = React.forwardRef(function (props, ref) {
|
9
|
+
var state = useMenuItemCheckbox_1.useMenuItemCheckbox_unstable(props, ref);
|
10
|
+
useMenuItemCheckboxStyles_1.useMenuItemCheckboxStyles_unstable(state);
|
11
|
+
return renderMenuItemCheckbox_1.renderMenuItemCheckbox_unstable(state);
|
12
|
+
});
|
13
|
+
exports.MenuItemCheckbox.displayName = 'MenuItemCheckbox';
|
14
|
+
});
|
15
|
+
//# sourceMappingURL=MenuItemCheckbox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuItemCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,gBAAgB,GAA+C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtG,IAAM,KAAK,GAAG,kDAA4B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACvD,8DAAkC,CAAC,KAAK,CAAC,CAAC;QAE1C,OAAO,wDAA+B,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemCheckbox_unstable } from './useMenuItemCheckbox';\nimport { renderMenuItemCheckbox_unstable } from './renderMenuItemCheckbox';\nimport { useMenuItemCheckboxStyles_unstable } from './useMenuItemCheckboxStyles';\nimport type { MenuItemCheckboxProps } from './MenuItemCheckbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemCheckbox, using the `useMenuItemCheckbox_unstable` hook.\n */\nexport const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps> = React.forwardRef((props, ref) => {\n const state = useMenuItemCheckbox_unstable(props, ref);\n useMenuItemCheckboxStyles_unstable(state);\n\n return renderMenuItemCheckbox_unstable(state);\n});\n\nMenuItemCheckbox.displayName = 'MenuItemCheckbox';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuItemCheckbox.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;\n"]}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./MenuItemCheckbox.types", "./MenuItemCheckbox", "./renderMenuItemCheckbox", "./useMenuItemCheckbox", "./useMenuItemCheckboxStyles"], function (require, exports, tslib_1, MenuItemCheckbox_types_1, MenuItemCheckbox_1, renderMenuItemCheckbox_1, useMenuItemCheckbox_1, useMenuItemCheckboxStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(MenuItemCheckbox_types_1, exports);
|
5
|
+
tslib_1.__exportStar(MenuItemCheckbox_1, exports);
|
6
|
+
tslib_1.__exportStar(renderMenuItemCheckbox_1, exports);
|
7
|
+
tslib_1.__exportStar(useMenuItemCheckbox_1, exports);
|
8
|
+
tslib_1.__exportStar(useMenuItemCheckboxStyles_1, exports);
|
9
|
+
});
|
10
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/index.ts"],"names":[],"mappings":";;;IAAA,wDAAyC;IACzC,kDAAmC;IACnC,wDAAyC;IACzC,qDAAsC;IACtC,2DAA4C","sourcesContent":["export * from './MenuItemCheckbox.types';\nexport * from './MenuItemCheckbox';\nexport * from './renderMenuItemCheckbox';\nexport * from './useMenuItemCheckbox';\nexport * from './useMenuItemCheckboxStyles';\n"]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.renderMenuItemCheckbox_unstable = void 0;
|
5
|
+
/** Function that renders the final JSX of the component */
|
6
|
+
var renderMenuItemCheckbox_unstable = function (state) {
|
7
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
8
|
+
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
9
|
+
slots.checkmark && React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)),
|
10
|
+
slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
|
11
|
+
slots.content && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
|
12
|
+
slots.secondaryContent && React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))));
|
13
|
+
};
|
14
|
+
exports.renderMenuItemCheckbox_unstable = renderMenuItemCheckbox_unstable;
|
15
|
+
});
|
16
|
+
//# sourceMappingURL=renderMenuItemCheckbox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"renderMenuItemCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAKA,4DAA4D;IACrD,IAAM,+BAA+B,GAAG,UAAC,KAA4B;QACpE,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC/D,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACzD,KAAK,CAAC,gBAAgB,IAAI,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC1E,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,+BAA+B,mCAW1C","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/** Function that renders the final JSX of the component */\nexport const renderMenuItemCheckbox_unstable = (state: MenuItemCheckboxState) => {\n const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.content && <slots.content {...slotProps.content} />}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.root>\n );\n};\n"]}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "../../contexts/menuListContext", "../MenuItem/useMenuItem"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, menuListContext_1, useMenuItem_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useMenuItemCheckbox_unstable = void 0;
|
5
|
+
/** Returns the props and state required to render the component */
|
6
|
+
var useMenuItemCheckbox_unstable = function (props, ref) {
|
7
|
+
var toggleCheckbox = menuListContext_1.useMenuListContext_unstable(function (context) { return context.toggleCheckbox; });
|
8
|
+
var name = props.name, value = props.value;
|
9
|
+
var checked = menuListContext_1.useMenuListContext_unstable(function (context) {
|
10
|
+
var _a;
|
11
|
+
var checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
|
12
|
+
return checkedItems.indexOf(value) !== -1;
|
13
|
+
});
|
14
|
+
var state = tslib_1.__assign(tslib_1.__assign({}, useMenuItem_1.useMenuItem_unstable(tslib_1.__assign(tslib_1.__assign({ role: 'menuitemcheckbox', persistOnClick: true }, props), { 'aria-checked': checked, checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
|
15
|
+
defaultProps: { children: React.createElement(react_icons_1.Checkmark16Filled, null) },
|
16
|
+
required: true,
|
17
|
+
}), onClick: function (e) {
|
18
|
+
var _a;
|
19
|
+
toggleCheckbox === null || toggleCheckbox === void 0 ? void 0 : toggleCheckbox(e, name, value, checked);
|
20
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
21
|
+
} }), ref)), { name: name, value: value, checked: checked });
|
22
|
+
return state;
|
23
|
+
};
|
24
|
+
exports.useMenuItemCheckbox_unstable = useMenuItemCheckbox_unstable;
|
25
|
+
});
|
26
|
+
//# sourceMappingURL=useMenuItemCheckbox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useMenuItemCheckbox.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":";;;;IAQA,mEAAmE;IAC5D,IAAM,4BAA4B,GAAG,UAC1C,KAA4B,EAC5B,GAAwC;QAExC,IAAM,cAAc,GAAG,6CAA2B,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,cAAc,EAAtB,CAAsB,CAAC,CAAC;QAC9E,IAAA,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE9B,IAAM,OAAO,GAAG,6CAA2B,CAAC,UAAA,OAAO;;YACjD,IAAM,YAAY,GAAG,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAG,IAAI,CAAC,KAAI,EAAE,CAAC;YACzD,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,IAAM,KAAK,yCACN,kCAAoB,qCAEnB,IAAI,EAAE,kBAAkB,EACxB,cAAc,EAAE,IAAI,IACjB,KAAK,KACR,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE,kCAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;gBAC3C,YAAY,EAAE,EAAE,QAAQ,EAAE,oBAAC,+BAAiB,OAAG,EAAE;gBACjD,QAAQ,EAAE,IAAI;aACf,CAAC,EACF,OAAO,EAAE,UAAC,CAAyD;;gBACjE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;gBAC1C,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;YACrB,CAAC,KAEH,GAAG,CACJ,KACD,IAAI,MAAA,EACJ,KAAK,OAAA,EACL,OAAO,SAAA,GACR,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IApCW,QAAA,4BAA4B,gCAoCvC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/** Returns the props and state required to render the component */\nexport const useMenuItemCheckbox_unstable = (\n props: MenuItemCheckboxProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemCheckboxState => {\n const toggleCheckbox = useMenuListContext_unstable(context => context.toggleCheckbox);\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const state: MenuItemCheckboxState = {\n ...useMenuItem_unstable(\n {\n role: 'menuitemcheckbox',\n persistOnClick: true,\n ...props,\n 'aria-checked': checked,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n toggleCheckbox?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n name,\n value,\n checked,\n };\n\n return state;\n};\n"]}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
define(["require", "exports", "@griffel/react", "../../selectable/index", "../MenuItem/useMenuItemStyles"], function (require, exports, react_1, index_1, useMenuItemStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useMenuItemCheckboxStyles_unstable = exports.menuItemCheckboxClassNames = void 0;
|
5
|
+
exports.menuItemCheckboxClassNames = {
|
6
|
+
root: 'fui-MenuItemCheckbox',
|
7
|
+
icon: 'fui-MenuItemCheckbox__icon',
|
8
|
+
checkmark: 'fui-MenuItemCheckbox__checkmark',
|
9
|
+
content: 'fui-MenuItemCheckbox__content',
|
10
|
+
secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
|
11
|
+
};
|
12
|
+
var useMenuItemCheckboxStyles_unstable = function (state) {
|
13
|
+
state.root.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.root, state.root.className);
|
14
|
+
if (state.content) {
|
15
|
+
state.content.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.content, state.content.className);
|
16
|
+
}
|
17
|
+
if (state.secondaryContent) {
|
18
|
+
state.secondaryContent.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.secondaryContent, state.secondaryContent.className);
|
19
|
+
}
|
20
|
+
if (state.icon) {
|
21
|
+
state.icon.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.icon, state.icon.className);
|
22
|
+
}
|
23
|
+
if (state.checkmark) {
|
24
|
+
state.checkmark.className = react_1.mergeClasses(exports.menuItemCheckboxClassNames.checkmark, state.checkmark.className);
|
25
|
+
}
|
26
|
+
useMenuItemStyles_1.useMenuItemStyles_unstable(state);
|
27
|
+
index_1.useCheckmarkStyles_unstable(state);
|
28
|
+
};
|
29
|
+
exports.useMenuItemCheckboxStyles_unstable = useMenuItemCheckboxStyles_unstable;
|
30
|
+
});
|
31
|
+
//# sourceMappingURL=useMenuItemCheckboxStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useMenuItemCheckboxStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,0BAA0B,GAA4D;QACjG,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,4BAA4B;QAClC,SAAS,EAAE,iCAAiC;QAC5C,OAAO,EAAE,+BAA+B;QACxC,gBAAgB,EAAE,wCAAwC;KAC3D,CAAC;IAEK,IAAM,kCAAkC,GAAG,UAAC,KAA4B;QAC7E,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,kCAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE3F,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CAAC,kCAA0B,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACrG;QAED,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,KAAK,CAAC,gBAAgB,CAAC,SAAS,GAAG,oBAAY,CAC7C,kCAA0B,CAAC,gBAAgB,EAC3C,KAAK,CAAC,gBAAgB,CAAC,SAAS,CACjC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,kCAA0B,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5F;QAED,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,oBAAY,CAAC,kCAA0B,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;SAC3G;QAED,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,mCAA2B,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAxBW,QAAA,kCAAkC,sCAwB7C","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemCheckboxState } from './MenuItemCheckbox.types';\n\nexport const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemCheckbox',\n icon: 'fui-MenuItemCheckbox__icon',\n checkmark: 'fui-MenuItemCheckbox__checkmark',\n content: 'fui-MenuItemCheckbox__content',\n secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',\n};\n\nexport const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {\n state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemCheckboxClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
define(["require", "exports", "react", "./useMenuItemRadio", "./renderMenuItemRadio", "./useMenuItemRadioStyles"], function (require, exports, React, useMenuItemRadio_1, renderMenuItemRadio_1, useMenuItemRadioStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.MenuItemRadio = void 0;
|
5
|
+
/**
|
6
|
+
* Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.
|
7
|
+
*/
|
8
|
+
exports.MenuItemRadio = React.forwardRef(function (props, ref) {
|
9
|
+
var state = useMenuItemRadio_1.useMenuItemRadio_unstable(props, ref);
|
10
|
+
useMenuItemRadioStyles_1.useMenuItemRadioStyles_unstable(state);
|
11
|
+
return renderMenuItemRadio_1.renderMenuItemRadio_unstable(state);
|
12
|
+
});
|
13
|
+
exports.MenuItemRadio.displayName = 'MenuItemRadio';
|
14
|
+
});
|
15
|
+
//# sourceMappingURL=MenuItemRadio.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,aAAa,GAA4C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAChG,IAAM,KAAK,GAAG,4CAAyB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACpD,wDAA+B,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,kDAA4B,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuItemRadio_unstable } from './useMenuItemRadio';\nimport { renderMenuItemRadio_unstable } from './renderMenuItemRadio';\nimport { useMenuItemRadioStyles_unstable } from './useMenuItemRadioStyles';\nimport type { MenuItemRadioProps } from './MenuItemRadio.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuItemRadio, using the `useMenuItemRadio_unstable` hook.\n */\nexport const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps> = React.forwardRef((props, ref) => {\n const state = useMenuItemRadio_unstable(props, ref);\n useMenuItemRadioStyles_unstable(state);\n\n return renderMenuItemRadio_unstable(state);\n});\n\nMenuItemRadio.displayName = 'MenuItemRadio';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuItemRadio.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/MenuItemRadio.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MenuItemSelectableProps, MenuItemSelectableState } from '../../selectable/index';\nimport type { MenuItemProps, MenuItemState } from '../MenuItem/MenuItem.types';\n\nexport type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;\n\nexport type MenuItemRadioState = MenuItemState & MenuItemSelectableState;\n"]}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./MenuItemRadio.types", "./MenuItemRadio", "./renderMenuItemRadio", "./useMenuItemRadio", "./useMenuItemRadioStyles"], function (require, exports, tslib_1, MenuItemRadio_types_1, MenuItemRadio_1, renderMenuItemRadio_1, useMenuItemRadio_1, useMenuItemRadioStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(MenuItemRadio_types_1, exports);
|
5
|
+
tslib_1.__exportStar(MenuItemRadio_1, exports);
|
6
|
+
tslib_1.__exportStar(renderMenuItemRadio_1, exports);
|
7
|
+
tslib_1.__exportStar(useMenuItemRadio_1, exports);
|
8
|
+
tslib_1.__exportStar(useMenuItemRadioStyles_1, exports);
|
9
|
+
});
|
10
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/index.ts"],"names":[],"mappings":";;;IAAA,qDAAsC;IACtC,+CAAgC;IAChC,qDAAsC;IACtC,kDAAmC;IACnC,wDAAyC","sourcesContent":["export * from './MenuItemRadio.types';\nexport * from './MenuItemRadio';\nexport * from './renderMenuItemRadio';\nexport * from './useMenuItemRadio';\nexport * from './useMenuItemRadioStyles';\n"]}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.renderMenuItemRadio_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Redefine the render function to add slots. Reuse the menuitemradio structure but add
|
7
|
+
* slots to children.
|
8
|
+
*/
|
9
|
+
var renderMenuItemRadio_unstable = function (state) {
|
10
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
11
|
+
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
12
|
+
slots.checkmark && React.createElement(slots.checkmark, tslib_1.__assign({}, slotProps.checkmark)),
|
13
|
+
slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
|
14
|
+
slots.content && React.createElement(slots.content, tslib_1.__assign({}, slotProps.content)),
|
15
|
+
slots.secondaryContent && React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))));
|
16
|
+
};
|
17
|
+
exports.renderMenuItemRadio_unstable = renderMenuItemRadio_unstable;
|
18
|
+
});
|
19
|
+
//# sourceMappingURL=renderMenuItemRadio.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"renderMenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAyB;QAC9D,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,SAAS,IAAI,oBAAC,KAAK,CAAC,SAAS,uBAAK,SAAS,CAAC,SAAS,EAAI;YAC/D,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACzD,KAAK,CAAC,gBAAgB,IAAI,oBAAC,KAAK,CAAC,gBAAgB,uBAAK,SAAS,CAAC,gBAAgB,EAAI,CAC1E,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,4BAA4B,gCAWvC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\nimport type { MenuItemSlots } from '../MenuItem/MenuItem.types';\n\n/**\n * Redefine the render function to add slots. Reuse the menuitemradio structure but add\n * slots to children.\n */\nexport const renderMenuItemRadio_unstable = (state: MenuItemRadioState) => {\n const { slots, slotProps } = getSlots<MenuItemSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.checkmark && <slots.checkmark {...slotProps.checkmark} />}\n {slots.icon && <slots.icon {...slotProps.icon} />}\n {slots.content && <slots.content {...slotProps.content} />}\n {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n </slots.root>\n );\n};\n"]}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "../../contexts/menuListContext", "../MenuItem/useMenuItem"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, menuListContext_1, useMenuItem_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useMenuItemRadio_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Given user props, returns state and render function for a MenuItemRadio.
|
7
|
+
*/
|
8
|
+
var useMenuItemRadio_unstable = function (props, ref) {
|
9
|
+
var name = props.name, value = props.value;
|
10
|
+
var checked = menuListContext_1.useMenuListContext_unstable(function (context) {
|
11
|
+
var _a;
|
12
|
+
var checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[name]) || [];
|
13
|
+
return checkedItems.indexOf(value) !== -1;
|
14
|
+
});
|
15
|
+
var selectRadio = menuListContext_1.useMenuListContext_unstable(function (context) { return context.selectRadio; });
|
16
|
+
return tslib_1.__assign(tslib_1.__assign({}, useMenuItem_1.useMenuItem_unstable(tslib_1.__assign(tslib_1.__assign({}, props), { role: 'menuitemradio', 'aria-checked': checked, checkmark: react_utilities_1.resolveShorthand(props.checkmark, {
|
17
|
+
defaultProps: { children: React.createElement(react_icons_1.Checkmark16Filled, null) },
|
18
|
+
required: true,
|
19
|
+
}), onClick: function (e) {
|
20
|
+
var _a;
|
21
|
+
selectRadio === null || selectRadio === void 0 ? void 0 : selectRadio(e, name, value, checked);
|
22
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
23
|
+
} }), ref)), { checked: checked, name: name, value: value });
|
24
|
+
};
|
25
|
+
exports.useMenuItemRadio_unstable = useMenuItemRadio_unstable;
|
26
|
+
});
|
27
|
+
//# sourceMappingURL=useMenuItemRadio.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useMenuItemRadio.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UACvC,KAAyB,EACzB,GAAwC;QAEhC,IAAA,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE9B,IAAM,OAAO,GAAG,6CAA2B,CAAC,UAAA,OAAO;;YACjD,IAAM,YAAY,GAAG,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAG,IAAI,CAAC,KAAI,EAAE,CAAC;YACzD,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;QAEH,IAAM,WAAW,GAAG,6CAA2B,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,WAAW,EAAnB,CAAmB,CAAC,CAAC;QAEhF,6CACK,kCAAoB,uCAEhB,KAAK,KACR,IAAI,EAAE,eAAe,EACrB,cAAc,EAAE,OAAO,EACvB,SAAS,EAAE,kCAAgB,CAAC,KAAK,CAAC,SAAS,EAAE;gBAC3C,YAAY,EAAE,EAAE,QAAQ,EAAE,oBAAC,+BAAiB,OAAG,EAAE;gBACjD,QAAQ,EAAE,IAAI;aACf,CAAC,EACF,OAAO,EAAE,UAAC,CAAyD;;gBACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;gBACvC,MAAA,KAAK,CAAC,OAAO,+CAAb,KAAK,EAAW,CAAC,CAAC,CAAC;YACrB,CAAC,KAEH,GAAG,CACJ,KACD,OAAO,SAAA,EACP,IAAI,MAAA,EACJ,KAAK,OAAA,IACL;IACJ,CAAC,CAAC;IAlCW,QAAA,yBAAyB,6BAkCpC","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { Checkmark16Filled } from '@fluentui/react-icons';\nimport { useMenuListContext_unstable } from '../../contexts/menuListContext';\nimport { useMenuItem_unstable } from '../MenuItem/useMenuItem';\nimport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio.types';\nimport type { ARIAButtonElement, ARIAButtonElementIntersection } from '@fluentui/react-aria';\n\n/**\n * Given user props, returns state and render function for a MenuItemRadio.\n */\nexport const useMenuItemRadio_unstable = (\n props: MenuItemRadioProps,\n ref: React.Ref<ARIAButtonElement<'div'>>,\n): MenuItemRadioState => {\n const { name, value } = props;\n\n const checked = useMenuListContext_unstable(context => {\n const checkedItems = context.checkedValues?.[name] || [];\n return checkedItems.indexOf(value) !== -1;\n });\n\n const selectRadio = useMenuListContext_unstable(context => context.selectRadio);\n\n return {\n ...useMenuItem_unstable(\n {\n ...props,\n role: 'menuitemradio',\n 'aria-checked': checked,\n checkmark: resolveShorthand(props.checkmark, {\n defaultProps: { children: <Checkmark16Filled /> },\n required: true,\n }),\n onClick: (e: React.MouseEvent<ARIAButtonElementIntersection<'div'>>) => {\n selectRadio?.(e, name, value, checked);\n props.onClick?.(e);\n },\n },\n ref,\n ),\n checked,\n name,\n value,\n };\n};\n"]}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
define(["require", "exports", "@griffel/react", "../../selectable/index", "../MenuItem/useMenuItemStyles"], function (require, exports, react_1, index_1, useMenuItemStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useMenuItemRadioStyles_unstable = exports.menuItemRadioClassNames = void 0;
|
5
|
+
exports.menuItemRadioClassNames = {
|
6
|
+
root: 'fui-MenuItemRadio',
|
7
|
+
icon: 'fui-MenuItemRadio__icon',
|
8
|
+
checkmark: 'fui-MenuItemRadio__checkmark',
|
9
|
+
content: 'fui-MenuItemRadio__content',
|
10
|
+
secondaryContent: 'fui-MenuItemRadio__secondaryContent',
|
11
|
+
};
|
12
|
+
var useMenuItemRadioStyles_unstable = function (state) {
|
13
|
+
state.root.className = react_1.mergeClasses(exports.menuItemRadioClassNames.root, state.root.className);
|
14
|
+
if (state.content) {
|
15
|
+
state.content.className = react_1.mergeClasses(exports.menuItemRadioClassNames.content, state.content.className);
|
16
|
+
}
|
17
|
+
if (state.secondaryContent) {
|
18
|
+
state.secondaryContent.className = react_1.mergeClasses(exports.menuItemRadioClassNames.secondaryContent, state.secondaryContent.className);
|
19
|
+
}
|
20
|
+
if (state.icon) {
|
21
|
+
state.icon.className = react_1.mergeClasses(exports.menuItemRadioClassNames.icon, state.icon.className);
|
22
|
+
}
|
23
|
+
if (state.checkmark) {
|
24
|
+
state.checkmark.className = react_1.mergeClasses(exports.menuItemRadioClassNames.checkmark, state.checkmark.className);
|
25
|
+
}
|
26
|
+
useMenuItemStyles_1.useMenuItemStyles_unstable(state);
|
27
|
+
index_1.useCheckmarkStyles_unstable(state);
|
28
|
+
};
|
29
|
+
exports.useMenuItemRadioStyles_unstable = useMenuItemRadioStyles_unstable;
|
30
|
+
});
|
31
|
+
//# sourceMappingURL=useMenuItemRadioStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useMenuItemRadioStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,uBAAuB,GAA4D;QAC9F,IAAI,EAAE,mBAAmB;QACzB,IAAI,EAAE,yBAAyB;QAC/B,SAAS,EAAE,8BAA8B;QACzC,OAAO,EAAE,4BAA4B;QACrC,gBAAgB,EAAE,qCAAqC;KACxD,CAAC;IAEK,IAAM,+BAA+B,GAAG,UAAC,KAAyB;QACvE,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAExF,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SAClG;QAED,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,KAAK,CAAC,gBAAgB,CAAC,SAAS,GAAG,oBAAY,CAC7C,+BAAuB,CAAC,gBAAgB,EACxC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CACjC,CAAC;SACH;QAED,IAAI,KAAK,CAAC,IAAI,EAAE;YACd,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzF;QAED,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,oBAAY,CAAC,+BAAuB,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;SACxG;QAED,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAClC,mCAA2B,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAxBW,QAAA,+BAA+B,mCAwB1C","sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport { useCheckmarkStyles_unstable } from '../../selectable/index';\nimport { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { MenuItemSlots } from '../index';\nimport type { MenuItemRadioState } from './MenuItemRadio.types';\n\nexport const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {\n root: 'fui-MenuItemRadio',\n icon: 'fui-MenuItemRadio__icon',\n checkmark: 'fui-MenuItemRadio__checkmark',\n content: 'fui-MenuItemRadio__content',\n secondaryContent: 'fui-MenuItemRadio__secondaryContent',\n};\n\nexport const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {\n state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);\n\n if (state.content) {\n state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n menuItemRadioClassNames.secondaryContent,\n state.secondaryContent.className,\n );\n }\n\n if (state.icon) {\n state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);\n }\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);\n }\n\n useMenuItemStyles_unstable(state);\n useCheckmarkStyles_unstable(state);\n};\n"]}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
define(["require", "exports", "react", "./useMenuList", "./renderMenuList", "./useMenuListContextValues", "./useMenuListStyles"], function (require, exports, React, useMenuList_1, renderMenuList_1, useMenuListContextValues_1, useMenuListStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.MenuList = void 0;
|
5
|
+
/**
|
6
|
+
* Define a styled MenuList, using the `useMenuList_unstable` hook.
|
7
|
+
*/
|
8
|
+
exports.MenuList = React.forwardRef(function (props, ref) {
|
9
|
+
var state = useMenuList_1.useMenuList_unstable(props, ref);
|
10
|
+
var contextValues = useMenuListContextValues_1.useMenuListContextValues_unstable(state);
|
11
|
+
useMenuListStyles_1.useMenuListStyles_unstable(state);
|
12
|
+
return renderMenuList_1.renderMenuList_unstable(state, contextValues);
|
13
|
+
});
|
14
|
+
exports.MenuList.displayName = 'MenuList';
|
15
|
+
});
|
16
|
+
//# sourceMappingURL=MenuList.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,QAAQ,GAAuC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACtF,IAAM,KAAK,GAAG,kCAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAC/C,IAAM,aAAa,GAAG,4DAAiC,CAAC,KAAK,CAAC,CAAC;QAC/D,8CAA0B,CAAC,KAAK,CAAC,CAAC;QAElC,OAAO,wCAAuB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;IAEH,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n const state = useMenuList_unstable(props, ref);\n const contextValues = useMenuListContextValues_unstable(state);\n useMenuListStyles_unstable(state);\n\n return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuListContextValue } from '../../contexts/menuListContext';\nimport type { SelectableHandler } from '../../selectable/index';\n\nexport type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;\n\nexport type MenuCheckedValueChangeData = {\n /** The items for this value that are checked */\n checkedItems: string[];\n /** The name of the value */\n name: string;\n};\n\nexport type MenuListSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuListProps = ComponentProps<MenuListSlots> & {\n /**\n * Map of all checked values\n */\n checkedValues?: Record<string, string[]>;\n\n /**\n * Default values to be checked on mount\n */\n defaultCheckedValues?: Record<string, string[]>;\n\n /**\n * States that menu items can contain selectable items and reserve slots for item alignment\n */\n hasCheckmarks?: boolean;\n\n /**\n * States that menu items can contain icons and reserve slots for item alignment\n */\n hasIcons?: boolean;\n\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n};\n\nexport type MenuListState = ComponentState<MenuListSlots> &\n Required<Pick<MenuListProps, 'checkedValues' | 'hasCheckmarks' | 'hasIcons'>> & {\n /**\n * Selects a radio item, will de-select the currently selected ratio item\n */\n selectRadio: SelectableHandler;\n\n /**\n * Callback to set focus on the next menu item by first character\n */\n setFocusByFirstCharacter: NonNullable<MenuListContextValue['setFocusByFirstCharacter']>;\n\n /*\n * Toggles the state of a checkbox item\n */\n toggleCheckbox: SelectableHandler;\n\n /**\n * Default values to be checked on mount\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n defaultCheckedValues?: Record<string, string[]>;\n /**\n * Callback when checked items change for value with a name\n *\n * @param event - React's original SyntheticEvent\n * @param data - A data object with relevant information\n * @deprecated this property is not used internally anymore,\n * the signature remains just to avoid breaking changes\n */\n onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;\n };\n\nexport type MenuListContextValues = {\n menuList: MenuListContextValue;\n};\n\n/**\n * @deprecated this type is not being used internally anymore\n */\nexport type UninitializedMenuListState = Omit<\n MenuListState,\n 'checkedValues' | 'selectRadio' | 'setFocusByFirstCharacter' | 'toggleCheckbox'\n> &\n Partial<Pick<MenuListState, 'checkedValues'>>;\n"]}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./MenuList", "./MenuList.types", "./renderMenuList", "./useMenuList", "./useMenuListStyles", "./useMenuListContextValues"], function (require, exports, tslib_1, MenuList_1, MenuList_types_1, renderMenuList_1, useMenuList_1, useMenuListStyles_1, useMenuListContextValues_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(MenuList_1, exports);
|
5
|
+
tslib_1.__exportStar(MenuList_types_1, exports);
|
6
|
+
tslib_1.__exportStar(renderMenuList_1, exports);
|
7
|
+
tslib_1.__exportStar(useMenuList_1, exports);
|
8
|
+
tslib_1.__exportStar(useMenuListStyles_1, exports);
|
9
|
+
tslib_1.__exportStar(useMenuListContextValues_1, exports);
|
10
|
+
});
|
11
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,gDAAiC;IACjC,gDAAiC;IACjC,6CAA8B;IAC9B,mDAAoC;IACpC,0DAA2C","sourcesContent":["export * from './MenuList';\nexport * from './MenuList.types';\nexport * from './renderMenuList';\nexport * from './useMenuList';\nexport * from './useMenuListStyles';\nexport * from './useMenuListContextValues';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../contexts/menuListContext"], function (require, exports, tslib_1, React, react_utilities_1, menuListContext_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.renderMenuList_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Function that renders the final JSX of the component
|
7
|
+
*/
|
8
|
+
var renderMenuList_unstable = function (state, contextValues) {
|
9
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
10
|
+
return (React.createElement(menuListContext_1.MenuListProvider, { value: contextValues.menuList },
|
11
|
+
React.createElement(slots.root, tslib_1.__assign({}, slotProps.root))));
|
12
|
+
};
|
13
|
+
exports.renderMenuList_unstable = renderMenuList_unstable;
|
14
|
+
});
|
15
|
+
//# sourceMappingURL=renderMenuList.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"renderMenuList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/renderMenuList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAoB,EAAE,aAAoC;QAC1F,IAAA,KAAuB,0BAAQ,CAAgB,KAAK,CAAC,EAAnD,KAAK,WAAA,EAAE,SAAS,eAAmC,CAAC;QAE5D,OAAO,CACL,oBAAC,kCAAgB,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;YAC7C,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACjB,CACpB,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,uBAAuB,2BAQlC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuListContextValues, MenuListSlots, MenuListState } from './MenuList.types';\nimport { MenuListProvider } from '../../contexts/menuListContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuList_unstable = (state: MenuListState, contextValues: MenuListContextValues) => {\n const { slots, slotProps } = getSlots<MenuListSlots>(state);\n\n return (\n <MenuListProvider value={contextValues.menuList}>\n <slots.root {...slotProps.root} />\n </MenuListProvider>\n );\n};\n"]}
|