@fluentui/react-menu 0.0.0-nightly050f89bf0020211102.1 → 0.0.0-nightly442708a36520211209.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 +238 -26
- package/CHANGELOG.md +66 -20
- package/dist/react-menu.d.ts +34 -7
- package/lib/components/Menu/Menu.js +3 -3
- package/lib/components/Menu/Menu.js.map +1 -1
- package/lib/components/Menu/renderMenu.js +1 -1
- package/lib/components/Menu/renderMenu.js.map +1 -1
- package/lib/components/Menu/useMenu.js +103 -117
- package/lib/components/Menu/useMenu.js.map +1 -1
- package/lib/components/Menu/useMenuContextValues.js +34 -32
- package/lib/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib/components/MenuDivider/MenuDivider.js +2 -2
- package/lib/components/MenuDivider/MenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/renderMenuDivider.js +6 -7
- package/lib/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDivider.js +6 -7
- package/lib/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib/components/MenuDivider/useMenuDividerStyles.d.ts +1 -0
- package/lib/components/MenuDivider/useMenuDividerStyles.js +6 -5
- package/lib/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib/components/MenuGroup/MenuGroup.js +5 -3
- package/lib/components/MenuGroup/MenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/index.d.ts +1 -0
- package/lib/components/MenuGroup/index.js +1 -0
- package/lib/components/MenuGroup/index.js.map +1 -1
- package/lib/components/MenuGroup/renderMenuGroup.js +6 -7
- package/lib/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroup.js +6 -6
- package/lib/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupContextValues.js +7 -7
- package/lib/components/MenuGroup/useMenuGroupContextValues.js.map +1 -1
- package/lib/components/MenuGroup/useMenuGroupStyles.d.ts +3 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.js +7 -0
- package/lib/components/MenuGroup/useMenuGroupStyles.js.map +1 -0
- package/lib/components/MenuGroupHeader/MenuGroupHeader.js +2 -2
- package/lib/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js +6 -7
- package/lib/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js +8 -6
- package/lib/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +1 -0
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +5 -4
- package/lib/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
- package/lib/components/MenuItem/MenuItem.js +2 -4
- package/lib/components/MenuItem/MenuItem.js.map +1 -1
- package/lib/components/MenuItem/renderMenuItem.js +6 -7
- package/lib/components/MenuItem/renderMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useCharacterSearch.js +6 -6
- package/lib/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib/components/MenuItem/useMenuItem.js +31 -36
- package/lib/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib/components/MenuItem/useMenuItemStyles.d.ts +1 -0
- package/lib/components/MenuItem/useMenuItemStyles.js +16 -8
- package/lib/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js +4 -4
- package/lib/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/index.d.ts +1 -0
- package/lib/components/MenuItemCheckbox/index.js +1 -0
- package/lib/components/MenuItemCheckbox/index.js.map +1 -1
- package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js +6 -7
- package/lib/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js +12 -13
- package/lib/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +2 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +4 -1
- package/lib/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib/components/MenuItemRadio/MenuItemRadio.js +2 -2
- package/lib/components/MenuItemRadio/MenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/index.d.ts +1 -0
- package/lib/components/MenuItemRadio/index.js +1 -0
- package/lib/components/MenuItemRadio/index.js.map +1 -1
- package/lib/components/MenuItemRadio/renderMenuItemRadio.js +6 -7
- package/lib/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadio.js +12 -12
- package/lib/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +1 -0
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js +4 -1
- package/lib/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib/components/MenuList/MenuList.js +3 -3
- package/lib/components/MenuList/MenuList.js.map +1 -1
- package/lib/components/MenuList/MenuList.types.d.ts +8 -6
- package/lib/components/MenuList/renderMenuList.js +6 -7
- package/lib/components/MenuList/renderMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuList.js +66 -86
- package/lib/components/MenuList/useMenuList.js.map +1 -1
- package/lib/components/MenuList/useMenuListContextValues.js +18 -16
- package/lib/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib/components/MenuList/useMenuListStyles.d.ts +1 -0
- package/lib/components/MenuList/useMenuListStyles.js +9 -7
- package/lib/components/MenuList/useMenuListStyles.js.map +1 -1
- package/lib/components/MenuPopover/MenuPopover.js +2 -2
- package/lib/components/MenuPopover/MenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/renderMenuPopover.js +7 -7
- package/lib/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopover.js +29 -38
- package/lib/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/components/MenuPopover/useMenuPopoverStyles.d.ts +1 -0
- package/lib/components/MenuPopover/useMenuPopoverStyles.js +12 -8
- package/lib/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.js +2 -2
- package/lib/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/MenuTrigger.types.d.ts +2 -1
- package/lib/components/MenuTrigger/renderMenuTrigger.js +1 -1
- package/lib/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/useMenuTrigger.js +3 -4
- package/lib/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/components/MenuTrigger/useTriggerElement.js +57 -70
- package/lib/components/MenuTrigger/useTriggerElement.js.map +1 -1
- package/lib/contexts/menuContext.js +5 -11
- package/lib/contexts/menuContext.js.map +1 -1
- package/lib/contexts/menuGroupContext.js +3 -5
- package/lib/contexts/menuGroupContext.js.map +1 -1
- package/lib/contexts/menuListContext.js +7 -17
- package/lib/contexts/menuListContext.js.map +1 -1
- package/lib/contexts/menuTriggerContext.js +3 -5
- package/lib/contexts/menuTriggerContext.js.map +1 -1
- package/lib/selectable/useCheckmarkStyles.js +3 -3
- package/lib/selectable/useCheckmarkStyles.js.map +1 -1
- package/lib/utils/useIsSubmenu.js +2 -4
- package/lib/utils/useIsSubmenu.js.map +1 -1
- package/lib/utils/useOnMenuEnter.js +16 -14
- package/lib/utils/useOnMenuEnter.js.map +1 -1
- package/lib-commonjs/Menu.js +1 -1
- package/lib-commonjs/MenuDivider.js +1 -1
- package/lib-commonjs/MenuGroup.js +1 -1
- package/lib-commonjs/MenuGroupHeader.js +1 -1
- package/lib-commonjs/MenuItem.js +1 -1
- package/lib-commonjs/MenuItemCheckbox.js +1 -1
- package/lib-commonjs/MenuItemRadio.js +1 -1
- package/lib-commonjs/MenuList.js +1 -1
- package/lib-commonjs/MenuPopover.js +1 -1
- package/lib-commonjs/MenuTrigger.js +1 -1
- package/lib-commonjs/components/Menu/Menu.js +6 -6
- package/lib-commonjs/components/Menu/Menu.js.map +1 -1
- package/lib-commonjs/components/Menu/index.js +1 -1
- package/lib-commonjs/components/Menu/renderMenu.js +3 -3
- package/lib-commonjs/components/Menu/renderMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenu.js +112 -127
- package/lib-commonjs/components/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/components/Menu/useMenuContextValues.js +34 -32
- package/lib-commonjs/components/Menu/useMenuContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/MenuDivider.js +6 -6
- package/lib-commonjs/components/MenuDivider/MenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/index.js +1 -1
- package/lib-commonjs/components/MenuDivider/renderMenuDivider.js +8 -10
- package/lib-commonjs/components/MenuDivider/renderMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDivider.js +7 -9
- package/lib-commonjs/components/MenuDivider/useMenuDivider.js.map +1 -1
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js +8 -6
- package/lib-commonjs/components/MenuDivider/useMenuDividerStyles.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/MenuGroup.js +10 -7
- package/lib-commonjs/components/MenuGroup/MenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/index.d.ts +1 -0
- package/lib-commonjs/components/MenuGroup/index.js +3 -1
- package/lib-commonjs/components/MenuGroup/index.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/renderMenuGroup.js +9 -11
- package/lib-commonjs/components/MenuGroup/renderMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js +7 -8
- package/lib-commonjs/components/MenuGroup/useMenuGroup.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupContextValues.js +8 -8
- package/lib-commonjs/components/MenuGroup/useMenuGroupContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.d.ts +3 -0
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js +18 -0
- package/lib-commonjs/components/MenuGroup/useMenuGroupStyles.js.map +1 -0
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js +6 -6
- package/lib-commonjs/components/MenuGroupHeader/MenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/index.js +1 -1
- package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js +8 -10
- package/lib-commonjs/components/MenuGroupHeader/renderMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js +10 -9
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeader.js.map +1 -1
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js +8 -6
- package/lib-commonjs/components/MenuGroupHeader/useMenuGroupHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItem/MenuItem.js +6 -9
- package/lib-commonjs/components/MenuItem/MenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/index.js +1 -1
- package/lib-commonjs/components/MenuItem/renderMenuItem.js +9 -11
- package/lib-commonjs/components/MenuItem/renderMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js +7 -7
- package/lib-commonjs/components/MenuItem/useCharacterSearch.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItem.js +38 -44
- package/lib-commonjs/components/MenuItem/useMenuItem.js.map +1 -1
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js +20 -10
- package/lib-commonjs/components/MenuItem/useMenuItemStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js +7 -7
- package/lib-commonjs/components/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/index.d.ts +1 -0
- package/lib-commonjs/components/MenuItemCheckbox/index.js +3 -1
- package/lib-commonjs/components/MenuItemCheckbox/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/renderMenuItemCheckbox.js +9 -11
- package/lib-commonjs/components/MenuItemCheckbox/renderMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js +17 -19
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.d.ts +2 -1
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js +10 -5
- package/lib-commonjs/components/MenuItemCheckbox/useMenuItemCheckboxStyles.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.js +6 -6
- package/lib-commonjs/components/MenuItemRadio/MenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/index.d.ts +1 -0
- package/lib-commonjs/components/MenuItemRadio/index.js +3 -1
- package/lib-commonjs/components/MenuItemRadio/index.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.js +9 -11
- package/lib-commonjs/components/MenuItemRadio/renderMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js +17 -18
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadio.js.map +1 -1
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js +9 -4
- package/lib-commonjs/components/MenuItemRadio/useMenuItemRadioStyles.js.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.js +8 -8
- package/lib-commonjs/components/MenuList/MenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/MenuList.types.d.ts +8 -6
- package/lib-commonjs/components/MenuList/index.js +1 -1
- package/lib-commonjs/components/MenuList/renderMenuList.js +9 -11
- package/lib-commonjs/components/MenuList/renderMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuList.js +72 -93
- package/lib-commonjs/components/MenuList/useMenuList.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js +18 -16
- package/lib-commonjs/components/MenuList/useMenuListContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuList/useMenuListStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuList/useMenuListStyles.js +11 -8
- package/lib-commonjs/components/MenuList/useMenuListStyles.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/MenuPopover.js +6 -6
- package/lib-commonjs/components/MenuPopover/MenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/index.js +1 -1
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js +10 -11
- package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js +36 -46
- package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.d.ts +1 -0
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js +14 -9
- package/lib-commonjs/components/MenuPopover/useMenuPopoverStyles.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js +4 -4
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/MenuTrigger.types.d.ts +2 -1
- package/lib-commonjs/components/MenuTrigger/index.js +1 -1
- package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js +3 -3
- package/lib-commonjs/components/MenuTrigger/renderMenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js +4 -6
- package/lib-commonjs/components/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/components/MenuTrigger/useTriggerElement.js +64 -78
- package/lib-commonjs/components/MenuTrigger/useTriggerElement.js.map +1 -1
- package/lib-commonjs/components/index.js +1 -1
- package/lib-commonjs/contexts/menuContext.js +4 -10
- package/lib-commonjs/contexts/menuContext.js.map +1 -1
- package/lib-commonjs/contexts/menuGroupContext.js +3 -5
- package/lib-commonjs/contexts/menuGroupContext.js.map +1 -1
- package/lib-commonjs/contexts/menuListContext.js +6 -16
- package/lib-commonjs/contexts/menuListContext.js.map +1 -1
- package/lib-commonjs/contexts/menuTriggerContext.js +3 -5
- package/lib-commonjs/contexts/menuTriggerContext.js.map +1 -1
- package/lib-commonjs/index.js +1 -1
- package/lib-commonjs/selectable/index.js +1 -1
- package/lib-commonjs/selectable/useCheckmarkStyles.js +4 -4
- package/lib-commonjs/selectable/useCheckmarkStyles.js.map +1 -1
- package/lib-commonjs/utils/index.js +1 -1
- package/lib-commonjs/utils/useIsSubmenu.js +5 -7
- package/lib-commonjs/utils/useIsSubmenu.js.map +1 -1
- package/lib-commonjs/utils/useOnMenuEnter.js +18 -16
- package/lib-commonjs/utils/useOnMenuEnter.js.map +1 -1
- package/package.json +16 -16
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib/common/mockUseMenuContext.d.ts +0 -7
- package/lib/common/mockUseMenuContext.js +0 -36
- package/lib/common/mockUseMenuContext.js.map +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/common/mockUseMenuContext.d.ts +0 -7
- package/lib-commonjs/common/mockUseMenuContext.js +0 -47
- package/lib-commonjs/common/mockUseMenuContext.js.map +0 -1
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
4
3
|
import { menuItemSlots } from '../MenuItem/index';
|
|
5
4
|
/** Function that renders the final JSX of the component */
|
|
6
5
|
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
6
|
+
export const renderMenuItemCheckbox = state => {
|
|
7
|
+
const {
|
|
8
|
+
slots,
|
|
9
|
+
slotProps
|
|
10
|
+
} = getSlots(state, menuItemSlots);
|
|
11
|
+
return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.checkmark, Object.assign({}, slotProps.checkmark)), /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)), /*#__PURE__*/React.createElement(slots.content, Object.assign({}, slotProps.content)), /*#__PURE__*/React.createElement(slots.secondaryContent, Object.assign({}, slotProps.secondaryContent)));
|
|
13
12
|
};
|
|
14
13
|
//# sourceMappingURL=renderMenuItemCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/renderMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAIA;;AACA,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAiC;AACrE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,EAAuB,aAAvB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,CADF;AAQD,CAXM","sourceRoot":""}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { resolveShorthand } from '@fluentui/react-utilities';
|
|
4
3
|
import { Checkmark16Filled } from '@fluentui/react-icons';
|
|
@@ -6,32 +5,32 @@ import { useMenuListContext } from '../../contexts/menuListContext';
|
|
|
6
5
|
import { useMenuItem } from '../MenuItem/useMenuItem';
|
|
7
6
|
/** Returns the props and state required to render the component */
|
|
8
7
|
|
|
9
|
-
export
|
|
10
|
-
|
|
8
|
+
export const useMenuItemCheckbox = (props, ref) => {
|
|
9
|
+
const state = useMenuItem({
|
|
11
10
|
role: 'menuitemcheckbox',
|
|
12
|
-
persistOnClick: true
|
|
13
|
-
|
|
11
|
+
persistOnClick: true,
|
|
12
|
+
...props,
|
|
14
13
|
checkmark: resolveShorthand(props.checkmark, {
|
|
15
14
|
defaultProps: {
|
|
16
15
|
children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
|
|
17
16
|
},
|
|
18
17
|
required: true
|
|
19
18
|
})
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
}, ref);
|
|
20
|
+
const toggleCheckbox = useMenuListContext(context => context.toggleCheckbox);
|
|
21
|
+
const {
|
|
22
|
+
onClick: onClickOriginal
|
|
23
|
+
} = state.root;
|
|
24
|
+
const checked = useMenuListContext(context => {
|
|
26
25
|
var _a;
|
|
27
26
|
|
|
28
|
-
|
|
27
|
+
const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
|
|
29
28
|
return checkedItems.indexOf(state.value) !== -1;
|
|
30
29
|
});
|
|
31
30
|
state.checked = checked;
|
|
32
31
|
state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
|
|
33
32
|
|
|
34
|
-
state.root.onClick =
|
|
33
|
+
state.root.onClick = e => {
|
|
35
34
|
if (state.disabled) {
|
|
36
35
|
e.preventDefault();
|
|
37
36
|
e.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,WAAT,QAA4B,yBAA5B;AAGA;;AACA,OAAO,MAAM,mBAAmB,GAAG,CACjC,KADiC,EAEjC,GAFiC,KAGR;AACzB,QAAM,KAAK,GAAG,WAAW,CACvB;AACE,IAAA,IAAI,EAAE,kBADR;AAEE,IAAA,cAAc,EAAE,IAFlB;AAGE,OAAG,KAHL;AAIE,IAAA,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlB;AAJ7B,GADuB,EAUvB,GAVuB,CAAzB;AAaA,QAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,cAApB,CAAzC;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO,IAAG;;;AAC3C,UAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;AACA,WAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;AACD,GAHiC,CAAlC;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAtByB,CAwBzB;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;AACvB,QAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,CAAC,CAAC,eAAF;AACA;AACD;;AAED,IAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAd;AACA,IAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;AACD,GATD;;AAWA,SAAO,KAAP;AACD,CAxCM","sourceRoot":""}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
|
|
3
|
+
export declare const useMenuItemCheckboxStyles: (state: MenuItemCheckboxState) => void;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { mergeClasses } from '@fluentui/react-make-styles';
|
|
1
2
|
import { useCheckmarkStyles } from '../../selectable/index';
|
|
2
3
|
import { useMenuItemStyles } from '../MenuItem/useMenuItemStyles';
|
|
3
|
-
export
|
|
4
|
+
export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
|
|
5
|
+
export const useMenuItemCheckboxStyles = state => {
|
|
6
|
+
state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);
|
|
4
7
|
useMenuItemStyles(state);
|
|
5
8
|
useCheckmarkStyles(state);
|
|
6
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,wBAAnC;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,6BAA7B;AACA,SAAS,kBAAT,QAAmC,wBAAnC;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,MAAM,yBAAyB,GAAG,sBAAlC;AAEP,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAiC;AACxE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,yBAAD,EAA4B,KAAK,CAAC,IAAN,CAAW,SAAvC,CAAnC;AAEA,EAAA,iBAAiB,CAAC,KAAD,CAAjB;AACA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD,CALM","sourceRoot":""}
|
|
@@ -6,8 +6,8 @@ import { useMenuItemRadioStyles } from './useMenuItemRadioStyles';
|
|
|
6
6
|
* Define a styled MenuItemRadio, using the `useMenuItemRadio` hook.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
export
|
|
10
|
-
|
|
9
|
+
export const MenuItemRadio = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
10
|
+
const state = useMenuItemRadio(props, ref);
|
|
11
11
|
useMenuItemRadioStyles(state);
|
|
12
12
|
return renderMenuItemRadio(state);
|
|
13
13
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAIA;;AAEG;;AACH,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemRadio/MenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,SAAS,sBAAT,QAAuC,0BAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpG,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AACA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALqE,CAA/D;AAOP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourceRoot":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuItemRadio/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuItemRadio/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
4
3
|
import { menuItemSlots } from '../MenuItem/index';
|
|
@@ -7,11 +6,11 @@ import { menuItemSlots } from '../MenuItem/index';
|
|
|
7
6
|
* slots to children.
|
|
8
7
|
*/
|
|
9
8
|
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return /*#__PURE__*/React.createElement(slots.root,
|
|
9
|
+
export const renderMenuItemRadio = state => {
|
|
10
|
+
const {
|
|
11
|
+
slots,
|
|
12
|
+
slotProps
|
|
13
|
+
} = getSlots(state, menuItemSlots);
|
|
14
|
+
return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), /*#__PURE__*/React.createElement(slots.checkmark, Object.assign({}, slotProps.checkmark)), /*#__PURE__*/React.createElement(slots.icon, Object.assign({}, slotProps.icon)), /*#__PURE__*/React.createElement(slots.content, Object.assign({}, slotProps.content)), /*#__PURE__*/React.createElement(slots.secondaryContent, Object.assign({}, slotProps.secondaryContent)));
|
|
16
15
|
};
|
|
17
16
|
//# sourceMappingURL=renderMenuItemRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemRadio/renderMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,aAAT,QAA8B,mBAA9B;AAIA;;;AAGG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAA8B;AAC/D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,EAAuB,aAAvB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,SAAf,CAAhB,CADF,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAFF,eAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,CAHF,eAIE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAJF,CADF;AAQD,CAXM","sourceRoot":""}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { resolveShorthand } from '@fluentui/react-utilities';
|
|
4
3
|
import { Checkmark16Filled } from '@fluentui/react-icons';
|
|
@@ -8,32 +7,33 @@ import { useMenuItem } from '../MenuItem/useMenuItem';
|
|
|
8
7
|
* Given user props, returns state and render function for a MenuItemRadio.
|
|
9
8
|
*/
|
|
10
9
|
|
|
11
|
-
export
|
|
12
|
-
|
|
10
|
+
export const useMenuItemRadio = (props, ref) => {
|
|
11
|
+
const radioProps = {
|
|
13
12
|
role: 'menuitemradio'
|
|
14
13
|
};
|
|
15
|
-
|
|
14
|
+
const state = useMenuItem({ ...radioProps,
|
|
15
|
+
...props,
|
|
16
16
|
checkmark: resolveShorthand(props.checkmark, {
|
|
17
17
|
defaultProps: {
|
|
18
18
|
children: /*#__PURE__*/React.createElement(Checkmark16Filled, null)
|
|
19
19
|
},
|
|
20
20
|
required: true
|
|
21
21
|
})
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
}, ref);
|
|
23
|
+
const selectRadio = useMenuListContext(context => context.selectRadio);
|
|
24
|
+
const {
|
|
25
|
+
onClick: onClickOriginal
|
|
26
|
+
} = state.root;
|
|
27
|
+
const checked = useMenuListContext(context => {
|
|
28
28
|
var _a;
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
const checkedItems = ((_a = context.checkedValues) === null || _a === void 0 ? void 0 : _a[state.name]) || [];
|
|
31
31
|
return checkedItems.indexOf(state.value) !== -1;
|
|
32
32
|
});
|
|
33
33
|
state.checked = checked;
|
|
34
34
|
state.root['aria-checked'] = state.checked; // MenuItem state already transforms keyDown to click events
|
|
35
35
|
|
|
36
|
-
state.root.onClick =
|
|
36
|
+
state.root.onClick = e => {
|
|
37
37
|
if (state.disabled) {
|
|
38
38
|
e.preventDefault();
|
|
39
39
|
e.stopPropagation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemRadio/useMenuItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,iBAAT,QAAkC,uBAAlC;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,WAAT,QAA4B,yBAA5B;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAA4B,GAA5B,KAA+E;AAC7G,QAAM,UAAU,GAAG;AACjB,IAAA,IAAI,EAAE;AADW,GAAnB;AAIA,QAAM,KAAK,GAAG,WAAW,CACvB,EACE,GAAG,UADL;AAEE,OAAG,KAFL;AAGE,IAAA,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB;AAC3C,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAkB,IAAlB;AAAZ,OAD6B;AAE3C,MAAA,QAAQ,EAAE;AAFiC,KAAlB;AAH7B,GADuB,EASvB,GATuB,CAAzB;AAYA,QAAM,WAAW,GAAG,kBAAkB,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAAtC;AACA,QAAM;AAAE,IAAA,OAAO,EAAE;AAAX,MAA+B,KAAK,CAAC,IAA3C;AACA,QAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO,IAAG;;;AAC3C,UAAM,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,aAAR,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAG,KAAK,CAAC,IAAT,CAArB,KAAuC,EAA5D;AACA,WAAO,YAAY,CAAC,OAAb,CAAqB,KAAK,CAAC,KAA3B,MAAsC,CAAC,CAA9C;AACD,GAHiC,CAAlC;AAKA,EAAA,KAAK,CAAC,OAAN,GAAgB,OAAhB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,cAAX,IAA6B,KAAK,CAAC,OAAnC,CAzB6G,CA2B7G;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAqB,CAAC,IAAG;AACvB,QAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,CAAC,CAAC,eAAF;AACA;AACD;;AAED,IAAA,WAAW,KAAA,IAAX,IAAA,WAAW,KAAA,KAAA,CAAX,GAAW,KAAA,CAAX,GAAA,WAAW,CAAG,CAAH,EAAM,KAAK,CAAC,IAAZ,EAAkB,KAAK,CAAC,KAAxB,EAA+B,KAAK,CAAC,OAArC,CAAX;AACA,IAAA,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,CAAH,CAAf;AACD,GATD;;AAWA,SAAO,KAAP;AACD,CAxCM","sourceRoot":""}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import { mergeClasses } from '@fluentui/react-make-styles';
|
|
1
2
|
import { useCheckmarkStyles } from '../../selectable/index';
|
|
2
3
|
import { useMenuItemStyles } from '../MenuItem/useMenuItemStyles';
|
|
3
|
-
export
|
|
4
|
+
export const menuItemRadioClassName = 'fui-MenuItemRadio';
|
|
5
|
+
export const useMenuItemRadioStyles = state => {
|
|
6
|
+
state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);
|
|
4
7
|
useMenuItemStyles(state);
|
|
5
8
|
useCheckmarkStyles(state);
|
|
6
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,wBAAnC;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuItemRadio/useMenuItemRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,QAA6B,6BAA7B;AACA,SAAS,kBAAT,QAAmC,wBAAnC;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,MAAM,sBAAsB,GAAG,mBAA/B;AAEP,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAA8B;AAClE,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,sBAAD,EAAyB,KAAK,CAAC,IAAN,CAAW,SAApC,CAAnC;AAEA,EAAA,iBAAiB,CAAC,KAAD,CAAjB;AACA,EAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD,CALM","sourceRoot":""}
|
|
@@ -7,9 +7,9 @@ import { useMenuListStyles } from './useMenuListStyles';
|
|
|
7
7
|
* Define a styled MenuList, using the `useMenuList` hook.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
export
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
export const MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
11
|
+
const state = useMenuList(props, ref);
|
|
12
|
+
const contextValues = useMenuListContextValues(state);
|
|
13
13
|
useMenuListStyles(state);
|
|
14
14
|
return renderMenuList(state, contextValues);
|
|
15
15
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuList/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,wBAAT,QAAyC,4BAAzC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAIA;;AAEG;;AACH,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuList/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,wBAAT,QAAyC,4BAAzC;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AAIA;;AAEG;;AACH,OAAO,MAAM,QAAQ,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC1F,QAAM,KAAK,GAAG,WAAW,CAAC,KAAD,EAAQ,GAAR,CAAzB;AACA,QAAM,aAAa,GAAG,wBAAwB,CAAC,KAAD,CAA9C;AACA,EAAA,iBAAiB,CAAC,KAAD,CAAjB;AAEA,SAAO,cAAc,CAAC,KAAD,EAAQ,aAAR,CAArB;AACD,CAN2D,CAArD;AAQP,QAAQ,CAAC,WAAT,GAAuB,UAAvB","sourceRoot":""}
|
|
@@ -2,6 +2,13 @@ import * as React from 'react';
|
|
|
2
2
|
import { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
|
3
3
|
import { MenuListContextValue } from '../../contexts/menuListContext';
|
|
4
4
|
import { SelectableHandler } from '../../selectable/index';
|
|
5
|
+
export declare type MenuCheckedValueChangeEvent = React.MouseEvent | React.KeyboardEvent;
|
|
6
|
+
export declare type MenuCheckedValueChangeData = {
|
|
7
|
+
/** The name of the value */
|
|
8
|
+
name: string;
|
|
9
|
+
/** The items for this value that are checked */
|
|
10
|
+
checkedItems: string[];
|
|
11
|
+
};
|
|
5
12
|
export declare type MenuListCommons = {
|
|
6
13
|
/**
|
|
7
14
|
* Callback when checked items change for value with a name
|
|
@@ -9,12 +16,7 @@ export declare type MenuListCommons = {
|
|
|
9
16
|
* @param event - React's original SyntheticEvent
|
|
10
17
|
* @param data - A data object with relevant information
|
|
11
18
|
*/
|
|
12
|
-
onCheckedValueChange?: (e:
|
|
13
|
-
/** The name of the value */
|
|
14
|
-
name: string;
|
|
15
|
-
/** The items for this value that are checked */
|
|
16
|
-
checkedItems: string[];
|
|
17
|
-
}) => void;
|
|
19
|
+
onCheckedValueChange?: (e: MenuCheckedValueChangeEvent, data: MenuCheckedValueChangeData) => void;
|
|
18
20
|
/**
|
|
19
21
|
* Map of all checked values
|
|
20
22
|
*/
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { getSlots } from '@fluentui/react-utilities';
|
|
4
3
|
import { MenuListProvider } from '../../contexts/menuListContext';
|
|
@@ -6,13 +5,13 @@ import { MenuListProvider } from '../../contexts/menuListContext';
|
|
|
6
5
|
* Function that renders the final JSX of the component
|
|
7
6
|
*/
|
|
8
7
|
|
|
9
|
-
export
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
export const renderMenuList = (state, contextValues) => {
|
|
9
|
+
const {
|
|
10
|
+
slots,
|
|
11
|
+
slotProps
|
|
12
|
+
} = getSlots(state);
|
|
14
13
|
return /*#__PURE__*/React.createElement(MenuListProvider, {
|
|
15
14
|
value: contextValues.menuList
|
|
16
|
-
}, /*#__PURE__*/React.createElement(slots.root,
|
|
15
|
+
}, /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root)));
|
|
17
16
|
};
|
|
18
17
|
//# sourceMappingURL=renderMenuList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/MenuList/renderMenuList.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/MenuList/renderMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,gBAAT,QAAiC,gCAAjC;AAEA;;AAEG;;AACH,OAAO,MAAM,cAAc,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;AAC3F,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAgB,KAAhB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAjB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADF,CADF;AAKD,CARM","sourceRoot":""}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __assign, __spreadArrays } from "tslib";
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { useMergedRefs, useEventCallback, useControllableState, getNativeElementProps } from '@fluentui/react-utilities';
|
|
4
3
|
import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
|
|
@@ -9,13 +8,15 @@ import { MenuContext } from '../../contexts/menuContext';
|
|
|
9
8
|
* Returns the props and state required to render the component
|
|
10
9
|
*/
|
|
11
10
|
|
|
12
|
-
export
|
|
13
|
-
|
|
11
|
+
export const useMenuList = (props, ref) => {
|
|
12
|
+
const focusAttributes = useArrowNavigationGroup({
|
|
14
13
|
circular: true
|
|
15
14
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const {
|
|
16
|
+
findAllFocusable
|
|
17
|
+
} = useFocusFinders();
|
|
18
|
+
const menuContext = useMenuContextSelectors();
|
|
19
|
+
const hasMenuContext = useHasParentContext(MenuContext);
|
|
19
20
|
|
|
20
21
|
if (usingPropsAndMenuContext(props, menuContext, hasMenuContext)) {
|
|
21
22
|
// TODO throw warnings in development safely
|
|
@@ -23,44 +24,44 @@ export var useMenuList = function (props, ref) {
|
|
|
23
24
|
console.warn('You are using both MenuList and Menu props, we recommend you to use Menu props when available');
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
root: getNativeElementProps('div', __assign(__assign({
|
|
27
|
+
const innerRef = React.useRef(null);
|
|
28
|
+
const initialState = {
|
|
29
|
+
root: getNativeElementProps('div', {
|
|
30
30
|
ref: useMergedRefs(ref, innerRef),
|
|
31
31
|
role: 'menu',
|
|
32
|
-
'aria-labelledby': menuContext.triggerId
|
|
33
|
-
|
|
32
|
+
'aria-labelledby': menuContext.triggerId,
|
|
33
|
+
...focusAttributes,
|
|
34
|
+
...props
|
|
35
|
+
}),
|
|
34
36
|
hasIcons: menuContext.hasIcons,
|
|
35
|
-
hasCheckmarks: menuContext.hasCheckmarks
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
hasCheckmarks: menuContext.hasCheckmarks,
|
|
38
|
+
...(hasMenuContext && menuContext),
|
|
39
|
+
...props
|
|
40
|
+
};
|
|
41
|
+
const setFocusByFirstCharacter = React.useCallback((e, itemEl) => {
|
|
39
42
|
// TODO use some kind of children registration to reduce dependency on DOM roles
|
|
40
|
-
|
|
43
|
+
const acceptedRoles = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
|
|
41
44
|
|
|
42
45
|
if (!innerRef.current) {
|
|
43
46
|
return;
|
|
44
47
|
}
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
});
|
|
49
|
-
var startIndex = menuItems.indexOf(itemEl) + 1;
|
|
49
|
+
const menuItems = findAllFocusable(innerRef.current, el => el.hasAttribute('role') && acceptedRoles.indexOf(el.getAttribute('role')) !== -1);
|
|
50
|
+
let startIndex = menuItems.indexOf(itemEl) + 1;
|
|
50
51
|
|
|
51
52
|
if (startIndex === menuItems.length) {
|
|
52
53
|
startIndex = 0;
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
|
|
56
|
+
const firstChars = menuItems.map(menuItem => {
|
|
56
57
|
var _a;
|
|
57
58
|
|
|
58
59
|
return (_a = menuItem.textContent) === null || _a === void 0 ? void 0 : _a.charAt(0).toLowerCase();
|
|
59
60
|
});
|
|
60
|
-
|
|
61
|
+
const char = e.key.toLowerCase();
|
|
61
62
|
|
|
62
|
-
|
|
63
|
-
for (
|
|
63
|
+
const getIndexFirstChars = (start, firstChar) => {
|
|
64
|
+
for (let i = start; i < firstChars.length; i++) {
|
|
64
65
|
if (char === firstChars[i]) {
|
|
65
66
|
return i;
|
|
66
67
|
}
|
|
@@ -70,7 +71,7 @@ export var useMenuList = function (props, ref) {
|
|
|
70
71
|
}; // Check remaining slots in the menu
|
|
71
72
|
|
|
72
73
|
|
|
73
|
-
|
|
74
|
+
let index = getIndexFirstChars(startIndex, char); // If not found in remaining slots, check from beginning
|
|
74
75
|
|
|
75
76
|
if (index === -1) {
|
|
76
77
|
index = getIndexFirstChars(0, char);
|
|
@@ -81,20 +82,17 @@ export var useMenuList = function (props, ref) {
|
|
|
81
82
|
menuItems[index].focus();
|
|
82
83
|
}
|
|
83
84
|
}, [findAllFocusable]);
|
|
84
|
-
|
|
85
|
-
var _a = useControllableState({
|
|
85
|
+
const [checkedValues, setCheckedValues] = useControllableState({
|
|
86
86
|
state: initialState.checkedValues,
|
|
87
87
|
defaultState: initialState.defaultCheckedValues,
|
|
88
88
|
initialState: {}
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
var newCheckedItems = __spreadArrays(checkedItems);
|
|
89
|
+
});
|
|
90
|
+
const {
|
|
91
|
+
onCheckedValueChange
|
|
92
|
+
} = initialState;
|
|
93
|
+
const toggleCheckbox = useEventCallback((e, name, value, checked) => {
|
|
94
|
+
const checkedItems = (checkedValues === null || checkedValues === void 0 ? void 0 : checkedValues[name]) || [];
|
|
95
|
+
const newCheckedItems = [...checkedItems];
|
|
98
96
|
|
|
99
97
|
if (checked) {
|
|
100
98
|
newCheckedItems.splice(newCheckedItems.indexOf(value), 1);
|
|
@@ -103,67 +101,49 @@ export var useMenuList = function (props, ref) {
|
|
|
103
101
|
}
|
|
104
102
|
|
|
105
103
|
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
106
|
-
name
|
|
104
|
+
name,
|
|
107
105
|
checkedItems: newCheckedItems
|
|
108
106
|
});
|
|
109
|
-
setCheckedValues(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
return __assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a));
|
|
113
|
-
});
|
|
107
|
+
setCheckedValues(s => ({ ...s,
|
|
108
|
+
[name]: newCheckedItems
|
|
109
|
+
}));
|
|
114
110
|
});
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
setCheckedValues(
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
return __assign(__assign({}, s), (_a = {}, _a[name] = newCheckedItems, _a));
|
|
121
|
-
});
|
|
111
|
+
const selectRadio = useEventCallback((e, name, value) => {
|
|
112
|
+
const newCheckedItems = [value];
|
|
113
|
+
setCheckedValues(s => ({ ...s,
|
|
114
|
+
[name]: newCheckedItems
|
|
115
|
+
}));
|
|
122
116
|
onCheckedValueChange === null || onCheckedValueChange === void 0 ? void 0 : onCheckedValueChange(e, {
|
|
123
|
-
name
|
|
117
|
+
name,
|
|
124
118
|
checkedItems: newCheckedItems
|
|
125
119
|
});
|
|
126
120
|
});
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
toggleCheckbox: toggleCheckbox,
|
|
121
|
+
const state = { ...initialState,
|
|
122
|
+
setFocusByFirstCharacter,
|
|
123
|
+
selectRadio,
|
|
124
|
+
toggleCheckbox,
|
|
132
125
|
checkedValues: checkedValues !== null && checkedValues !== void 0 ? checkedValues : {}
|
|
133
|
-
}
|
|
134
|
-
|
|
126
|
+
};
|
|
135
127
|
return state;
|
|
136
128
|
};
|
|
137
129
|
/**
|
|
138
130
|
* Adds some sugar to fetching multiple context selector values
|
|
139
131
|
*/
|
|
140
132
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
var defaultCheckedValues = useMenuContext(function (context) {
|
|
149
|
-
return context.defaultCheckedValues;
|
|
150
|
-
});
|
|
151
|
-
var triggerId = useMenuContext(function (context) {
|
|
152
|
-
return context.triggerId;
|
|
153
|
-
});
|
|
154
|
-
var hasIcons = useMenuContext(function (context) {
|
|
155
|
-
return context.hasIcons;
|
|
156
|
-
});
|
|
157
|
-
var hasCheckmarks = useMenuContext(function (context) {
|
|
158
|
-
return context.hasCheckmarks;
|
|
159
|
-
});
|
|
133
|
+
const useMenuContextSelectors = () => {
|
|
134
|
+
const checkedValues = useMenuContext(context => context.checkedValues);
|
|
135
|
+
const onCheckedValueChange = useMenuContext(context => context.onCheckedValueChange);
|
|
136
|
+
const defaultCheckedValues = useMenuContext(context => context.defaultCheckedValues);
|
|
137
|
+
const triggerId = useMenuContext(context => context.triggerId);
|
|
138
|
+
const hasIcons = useMenuContext(context => context.hasIcons);
|
|
139
|
+
const hasCheckmarks = useMenuContext(context => context.hasCheckmarks);
|
|
160
140
|
return {
|
|
161
|
-
checkedValues
|
|
162
|
-
onCheckedValueChange
|
|
163
|
-
defaultCheckedValues
|
|
164
|
-
triggerId
|
|
165
|
-
hasIcons
|
|
166
|
-
hasCheckmarks
|
|
141
|
+
checkedValues,
|
|
142
|
+
onCheckedValueChange,
|
|
143
|
+
defaultCheckedValues,
|
|
144
|
+
triggerId,
|
|
145
|
+
hasIcons,
|
|
146
|
+
hasCheckmarks
|
|
167
147
|
};
|
|
168
148
|
};
|
|
169
149
|
/**
|
|
@@ -171,10 +151,10 @@ var useMenuContextSelectors = function () {
|
|
|
171
151
|
*/
|
|
172
152
|
|
|
173
153
|
|
|
174
|
-
|
|
175
|
-
|
|
154
|
+
const usingPropsAndMenuContext = (props, contextValue, hasMenuContext) => {
|
|
155
|
+
let isUsingPropsAndContext = false;
|
|
176
156
|
|
|
177
|
-
for (
|
|
157
|
+
for (const val in contextValue) {
|
|
178
158
|
if (props[val]) {
|
|
179
159
|
isUsingPropsAndContext = true;
|
|
180
160
|
}
|