@fluentui-react-native/menu 0.6.0 → 0.7.0

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.
Files changed (119) hide show
  1. package/CHANGELOG.json +16 -1
  2. package/CHANGELOG.md +10 -2
  3. package/lib/Menu/Menu.types.d.ts +2 -2
  4. package/lib/Menu/Menu.types.d.ts.map +1 -1
  5. package/lib/MenuItem/MenuItem.d.ts.map +1 -1
  6. package/lib/MenuItem/MenuItem.js +3 -1
  7. package/lib/MenuItem/MenuItem.js.map +1 -1
  8. package/lib/MenuItem/MenuItem.styling.d.ts.map +1 -1
  9. package/lib/MenuItem/MenuItem.styling.js +7 -0
  10. package/lib/MenuItem/MenuItem.styling.js.map +1 -1
  11. package/lib/MenuItem/MenuItem.types.d.ts +12 -7
  12. package/lib/MenuItem/MenuItem.types.d.ts.map +1 -1
  13. package/lib/MenuItem/MenuItemTokens.d.ts.map +1 -1
  14. package/lib/MenuItem/MenuItemTokens.js +2 -0
  15. package/lib/MenuItem/MenuItemTokens.js.map +1 -1
  16. package/lib/MenuItem/MenuItemTokens.win32.d.ts.map +1 -1
  17. package/lib/MenuItem/MenuItemTokens.win32.js +2 -0
  18. package/lib/MenuItem/MenuItemTokens.win32.js.map +1 -1
  19. package/lib/MenuItem/useMenuItem.d.ts.map +1 -1
  20. package/lib/MenuItem/useMenuItem.js +4 -1
  21. package/lib/MenuItem/useMenuItem.js.map +1 -1
  22. package/lib/MenuItemCheckbox/MenuItemCheckbox.d.ts.map +1 -1
  23. package/lib/MenuItemCheckbox/MenuItemCheckbox.js +6 -1
  24. package/lib/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
  25. package/lib/MenuItemCheckbox/MenuItemCheckbox.styling.d.ts.map +1 -1
  26. package/lib/MenuItemCheckbox/MenuItemCheckbox.styling.js +11 -6
  27. package/lib/MenuItemCheckbox/MenuItemCheckbox.styling.js.map +1 -1
  28. package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts +12 -6
  29. package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map +1 -1
  30. package/lib/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -1
  31. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.d.ts.map +1 -1
  32. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.js +20 -0
  33. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.js.map +1 -1
  34. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.win32.d.ts.map +1 -1
  35. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.win32.js +20 -0
  36. package/lib/MenuItemCheckbox/MenuItemCheckboxTokens.win32.js.map +1 -1
  37. package/lib/MenuItemCheckbox/useMenuItemCheckbox.js +3 -2
  38. package/lib/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  39. package/lib/MenuList/MenuList.types.d.ts +1 -0
  40. package/lib/MenuList/MenuList.types.d.ts.map +1 -1
  41. package/lib/context/menuListContext.d.ts +1 -0
  42. package/lib/context/menuListContext.d.ts.map +1 -0
  43. package/lib/context/menuListContext.js +2 -0
  44. package/lib/context/menuListContext.js.map +1 -0
  45. package/lib/index.d.ts +1 -0
  46. package/lib/index.d.ts.map +1 -1
  47. package/lib/index.js +1 -0
  48. package/lib/index.js.map +1 -1
  49. package/lib-commonjs/Menu/Menu.types.d.ts +2 -2
  50. package/lib-commonjs/Menu/Menu.types.d.ts.map +1 -1
  51. package/lib-commonjs/MenuItem/MenuItem.d.ts.map +1 -1
  52. package/lib-commonjs/MenuItem/MenuItem.js +3 -1
  53. package/lib-commonjs/MenuItem/MenuItem.js.map +1 -1
  54. package/lib-commonjs/MenuItem/MenuItem.styling.d.ts.map +1 -1
  55. package/lib-commonjs/MenuItem/MenuItem.styling.js +7 -0
  56. package/lib-commonjs/MenuItem/MenuItem.styling.js.map +1 -1
  57. package/lib-commonjs/MenuItem/MenuItem.types.d.ts +12 -7
  58. package/lib-commonjs/MenuItem/MenuItem.types.d.ts.map +1 -1
  59. package/lib-commonjs/MenuItem/MenuItemTokens.d.ts.map +1 -1
  60. package/lib-commonjs/MenuItem/MenuItemTokens.js +2 -0
  61. package/lib-commonjs/MenuItem/MenuItemTokens.js.map +1 -1
  62. package/lib-commonjs/MenuItem/MenuItemTokens.win32.d.ts.map +1 -1
  63. package/lib-commonjs/MenuItem/MenuItemTokens.win32.js +2 -0
  64. package/lib-commonjs/MenuItem/MenuItemTokens.win32.js.map +1 -1
  65. package/lib-commonjs/MenuItem/useMenuItem.d.ts.map +1 -1
  66. package/lib-commonjs/MenuItem/useMenuItem.js +4 -1
  67. package/lib-commonjs/MenuItem/useMenuItem.js.map +1 -1
  68. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.d.ts.map +1 -1
  69. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.js +6 -1
  70. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.js.map +1 -1
  71. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.styling.d.ts.map +1 -1
  72. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.styling.js +11 -6
  73. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.styling.js.map +1 -1
  74. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts +12 -6
  75. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map +1 -1
  76. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.js.map +1 -1
  77. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.d.ts.map +1 -1
  78. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.js +20 -0
  79. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.js.map +1 -1
  80. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.win32.d.ts.map +1 -1
  81. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.win32.js +20 -0
  82. package/lib-commonjs/MenuItemCheckbox/MenuItemCheckboxTokens.win32.js.map +1 -1
  83. package/lib-commonjs/MenuItemCheckbox/useMenuItemCheckbox.js +3 -2
  84. package/lib-commonjs/MenuItemCheckbox/useMenuItemCheckbox.js.map +1 -1
  85. package/lib-commonjs/MenuList/MenuList.types.d.ts +1 -0
  86. package/lib-commonjs/MenuList/MenuList.types.d.ts.map +1 -1
  87. package/lib-commonjs/context/menuListContext.d.ts +1 -0
  88. package/lib-commonjs/context/menuListContext.d.ts.map +1 -0
  89. package/lib-commonjs/context/menuListContext.js +2 -0
  90. package/lib-commonjs/context/menuListContext.js.map +1 -0
  91. package/lib-commonjs/index.d.ts +1 -0
  92. package/lib-commonjs/index.d.ts.map +1 -1
  93. package/lib-commonjs/index.js +3 -1
  94. package/lib-commonjs/index.js.map +1 -1
  95. package/package.json +1 -1
  96. package/src/Menu/Menu.types.ts +2 -2
  97. package/src/MenuItem/MenuItem.styling.ts +10 -0
  98. package/src/MenuItem/MenuItem.tsx +3 -1
  99. package/src/MenuItem/MenuItem.types.ts +14 -8
  100. package/src/MenuItem/MenuItemTokens.ts +2 -0
  101. package/src/MenuItem/MenuItemTokens.win32.ts +2 -0
  102. package/src/MenuItem/useMenuItem.ts +3 -1
  103. package/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts +18 -10
  104. package/src/MenuItemCheckbox/MenuItemCheckbox.tsx +12 -1
  105. package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts +13 -7
  106. package/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts +20 -0
  107. package/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts +20 -0
  108. package/src/MenuItemCheckbox/useMenuItemCheckbox.ts +2 -2
  109. package/src/MenuList/MenuList.types.ts +3 -1
  110. package/src/context/{menuTriggerContext.ts → menuListContext.ts} +0 -0
  111. package/src/index.ts +1 -0
  112. package/lib/context/menuTriggerContext.d.ts +0 -1
  113. package/lib/context/menuTriggerContext.d.ts.map +0 -1
  114. package/lib/context/menuTriggerContext.js +0 -2
  115. package/lib/context/menuTriggerContext.js.map +0 -1
  116. package/lib-commonjs/context/menuTriggerContext.d.ts +0 -1
  117. package/lib-commonjs/context/menuTriggerContext.d.ts.map +0 -1
  118. package/lib-commonjs/context/menuTriggerContext.js +0 -2
  119. package/lib-commonjs/context/menuTriggerContext.js.map +0 -1
@@ -2,5 +2,6 @@ export { Menu } from './Menu/Menu';
2
2
  export { MenuTrigger } from './MenuTrigger/MenuTrigger';
3
3
  export { MenuPopover } from './MenuPopover/MenuPopover';
4
4
  export { MenuItem } from './MenuItem/MenuItem';
5
+ export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
5
6
  export { MenuList } from './MenuList/MenuList';
6
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MenuList = exports.MenuItem = exports.MenuPopover = exports.MenuTrigger = exports.Menu = void 0;
3
+ exports.MenuList = exports.MenuItemCheckbox = exports.MenuItem = exports.MenuPopover = exports.MenuTrigger = exports.Menu = void 0;
4
4
  var Menu_1 = require("./Menu/Menu");
5
5
  Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
6
6
  var MenuTrigger_1 = require("./MenuTrigger/MenuTrigger");
@@ -9,6 +9,8 @@ var MenuPopover_1 = require("./MenuPopover/MenuPopover");
9
9
  Object.defineProperty(exports, "MenuPopover", { enumerable: true, get: function () { return MenuPopover_1.MenuPopover; } });
10
10
  var MenuItem_1 = require("./MenuItem/MenuItem");
11
11
  Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return MenuItem_1.MenuItem; } });
12
+ var MenuItemCheckbox_1 = require("./MenuItemCheckbox/MenuItemCheckbox");
13
+ Object.defineProperty(exports, "MenuItemCheckbox", { enumerable: true, get: function () { return MenuItemCheckbox_1.MenuItemCheckbox; } });
12
14
  var MenuList_1 = require("./MenuList/MenuList");
13
15
  Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return MenuList_1.MenuList; } });
14
16
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AACb,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,oCAAmC;AAA1B,4FAAA,IAAI,OAAA;AACb,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,yDAAwD;AAA/C,0GAAA,WAAW,OAAA;AACpB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA;AACjB,wEAAuE;AAA9D,oHAAA,gBAAgB,OAAA;AACzB,gDAA+C;AAAtC,oGAAA,QAAQ,OAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/menu",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "A cross-platform Menu component using the Fluent Design System",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -1,10 +1,10 @@
1
- import type { IViewProps } from '@fluentui-react-native/adapters';
2
1
  import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
3
2
  import React from 'react';
3
+ import type { MenuListProps } from '../MenuList/MenuList.types';
4
4
 
5
5
  export const menuName = 'Menu';
6
6
 
7
- export interface MenuProps extends Omit<IViewProps, 'onPress'> {
7
+ export interface MenuProps extends MenuListProps {
8
8
  defaultOpen?: boolean;
9
9
  open?: boolean;
10
10
  onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
@@ -21,6 +21,16 @@ export const stylingSettings: UseStylingOptions<MenuItemProps, MenuItemSlotProps
21
21
  }),
22
22
  ['backgroundColor', ...layoutStyles.keys],
23
23
  ),
24
+ checkmark: buildProps(
25
+ (tokens: MenuItemTokens) => ({
26
+ style: {
27
+ height: tokens.checkmarkSize,
28
+ width: tokens.checkmarkSize,
29
+ marginEnd: tokens.gap,
30
+ },
31
+ }),
32
+ ['checkmarkSize', 'gap'],
33
+ ),
24
34
  content: buildProps(
25
35
  (tokens: MenuItemTokens, theme: Theme) => {
26
36
  return {
@@ -12,6 +12,7 @@ export const MenuItem = compose<MenuItemType>({
12
12
  ...stylingSettings,
13
13
  slots: {
14
14
  root: View,
15
+ checkmark: View,
15
16
  content: Text,
16
17
  submenuIndicator: SvgXml,
17
18
  },
@@ -28,8 +29,9 @@ export const MenuItem = compose<MenuItemType>({
28
29
 
29
30
  return (
30
31
  <Slots.root {...mergedProps}>
32
+ {menuItem.hasCheckmarks && <Slots.checkmark />}
31
33
  {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
32
- {mergedProps.hasSubmenu && <Slots.submenuIndicator xml={chevronXml} />}
34
+ {menuItem.hasSubmenu && <Slots.submenuIndicator xml={chevronXml} />}
33
35
  </Slots.root>
34
36
  );
35
37
  };
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ViewProps } from 'react-native';
3
- import { SvgProps, XmlProps } from 'react-native-svg';
3
+ import { XmlProps } from 'react-native-svg';
4
4
  import type { IViewProps } from '@fluentui-react-native/adapters';
5
5
  import { TextProps } from '@fluentui-react-native/experimental-text';
6
6
  import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
@@ -9,6 +9,9 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
9
9
  export const menuItemName = 'MenuItem';
10
10
 
11
11
  export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
12
+ checkmarkSize?: number;
13
+ gap?: number;
14
+
12
15
  disabled?: MenuItemTokens;
13
16
  focused?: MenuItemTokens;
14
17
  hovered?: MenuItemTokens;
@@ -28,23 +31,26 @@ export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'o
28
31
  */
29
32
  componentRef?: React.RefObject<IFocusable>;
30
33
 
31
- /**
32
- * If the menu item is a trigger for a submenu
33
- */
34
- hasSubmenu?: boolean;
35
-
36
34
  /**
37
35
  * A callback to call on button click event
38
36
  */
39
37
  onClick?: (e: InteractionEvent) => void;
40
38
  }
41
39
 
42
- export type MenuItemState = IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>>;
40
+ export interface MenuItemState extends IPressableHooks<MenuItemProps & React.ComponentPropsWithRef<any>> {
41
+ hasCheckmarks?: boolean;
42
+
43
+ /**
44
+ * If the menu item is a trigger for a submenu
45
+ */
46
+ hasSubmenu?: boolean;
47
+ }
43
48
 
44
49
  export interface MenuItemSlotProps {
45
50
  root: React.PropsWithRef<IViewProps>;
46
51
  content?: TextProps;
47
- submenuIndicator?: SvgProps | XmlProps;
52
+ checkmark?: React.PropsWithRef<IViewProps>;
53
+ submenuIndicator?: XmlProps;
48
54
  }
49
55
 
50
56
  export interface MenuItemType {
@@ -6,10 +6,12 @@ import { MenuItemTokens } from './MenuItem.types';
6
6
  export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
7
7
  backgroundColor: t.colors.neutralBackground1,
8
8
  borderRadius: globalTokens.corner.radius.medium,
9
+ checkmarkSize: 16,
9
10
  color: t.colors.neutralForeground2,
10
11
  fontFamily: t.typography.families.primary,
11
12
  fontSize: globalTokens.font.size[300],
12
13
  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
14
+ gap: globalTokens.spacing.xs,
13
15
  minHeight: 32,
14
16
  minWidth: 160,
15
17
  maxWidth: 300,
@@ -6,10 +6,12 @@ import { MenuItemTokens } from './MenuItem.types';
6
6
  export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: Theme): MenuItemTokens => ({
7
7
  backgroundColor: t.colors.neutralBackground1,
8
8
  borderRadius: globalTokens.corner.radius.none,
9
+ checkmarkSize: 16,
9
10
  color: t.colors.neutralForeground1,
10
11
  fontFamily: t.typography.families.primary,
11
12
  fontSize: globalTokens.font.size[200],
12
13
  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
14
+ gap: globalTokens.spacing.xs,
13
15
  minHeight: 24,
14
16
  minWidth: 160,
15
17
  maxWidth: 300,
@@ -12,6 +12,7 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
12
12
  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
13
13
  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
14
14
  const hasSubmenu = useMenuContext().isSubmenu;
15
+ const hasCheckmarks = useMenuContext().hasCheckmarks;
15
16
 
16
17
  return {
17
18
  props: {
@@ -23,11 +24,12 @@ export const useMenuItem = (props: MenuItemProps): MenuItemState => {
23
24
  accessibilityState: getAccessibilityState(disabled, accessibilityState),
24
25
  enableFocusRing: true,
25
26
  focusable: !disabled,
26
- hasSubmenu,
27
27
  ref: componentRef,
28
28
  ...onKeyProps,
29
29
  },
30
30
  state: pressable.state,
31
+ hasSubmenu,
32
+ hasCheckmarks,
31
33
  };
32
34
  };
33
35
 
@@ -3,7 +3,7 @@ import { fontStyles, layoutStyles } from '@fluentui-react-native/tokens';
3
3
  import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens';
4
4
  import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types';
5
5
 
6
- export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled'];
6
+ export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked'];
7
7
 
8
8
  export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemCheckboxSlotProps, MenuItemCheckboxTokens> = {
9
9
  tokens: [defaultMenuItemCheckboxTokens, menuItemCheckboxName],
@@ -21,16 +21,24 @@ export const stylingSettings: UseStylingOptions<MenuItemCheckboxProps, MenuItemC
21
21
  }),
22
22
  ['backgroundColor', ...layoutStyles.keys],
23
23
  ),
24
+ checkmark: buildProps(
25
+ (tokens: MenuItemCheckboxTokens) => ({
26
+ color: tokens.color,
27
+ height: tokens.checkmarkSize,
28
+ width: tokens.checkmarkSize,
29
+ viewBox: '0 0 ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2) + ' ' + (tokens.checkmarkSize - tokens.checkmarkPadding * 2),
30
+ style: { marginEnd: tokens.gap },
31
+ }),
32
+ ['checkmarkSize', 'gap', 'color'],
33
+ ),
24
34
  content: buildProps(
25
- (tokens: MenuItemCheckboxTokens, theme: Theme) => {
26
- return {
27
- style: {
28
- flexGrow: 1,
29
- color: tokens.color,
30
- ...fontStyles.from(tokens, theme),
31
- },
32
- };
33
- },
35
+ (tokens: MenuItemCheckboxTokens, theme: Theme) => ({
36
+ style: {
37
+ flexGrow: 1,
38
+ color: tokens.color,
39
+ ...fontStyles.from(tokens, theme),
40
+ },
41
+ }),
34
42
  ['color', ...fontStyles.keys],
35
43
  ),
36
44
  },
@@ -1,5 +1,6 @@
1
1
  /** @jsx withSlots */
2
2
  import { View } from 'react-native';
3
+ import { SvgXml } from 'react-native-svg';
3
4
  import { compose, mergeProps, UseSlots, withSlots } from '@fluentui-react-native/framework';
4
5
  import { Text } from '@fluentui-react-native/experimental-text';
5
6
  import { menuItemCheckboxName, MenuItemCheckboxProps, MenuItemCheckboxType } from './MenuItemCheckbox.types';
@@ -11,6 +12,7 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
11
12
  ...stylingSettings,
12
13
  slots: {
13
14
  root: View,
15
+ checkmark: SvgXml,
14
16
  content: Text,
15
17
  },
16
18
  useRender: (userProps: MenuItemCheckboxProps, useSlots: UseSlots<MenuItemCheckboxType>) => {
@@ -19,8 +21,17 @@ export const MenuItemCheckbox = compose<MenuItemCheckboxType>({
19
21
 
20
22
  return (final: MenuItemCheckboxProps) => {
21
23
  const mergedProps = mergeProps(menuItem.props, final);
24
+ const chevronXml = `
25
+ <svg>
26
+ <path fill='currentColor' d='M9.85355 3.14645C10.0488 3.34171 10.0488 3.65829 9.85355 3.85355L5.35355 8.35355C5.15829 8.54882 4.84171 8.54882 4.64645 8.35355L2.64645 6.35355C2.45118 6.15829 2.45118 5.84171 2.64645 5.64645C2.84171 5.45118 3.15829 5.45118 3.35355 5.64645L5 7.29289L9.14645 3.14645C9.34171 2.95118 9.65829 2.95118 9.85355 3.14645Z' />
27
+ </svg>`;
22
28
 
23
- return <Slots.root {...mergedProps}>{mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}</Slots.root>;
29
+ return (
30
+ <Slots.root {...mergedProps}>
31
+ <Slots.checkmark xml={chevronXml} />
32
+ {mergedProps.content && <Slots.content>{mergedProps.content}</Slots.content>}
33
+ </Slots.root>
34
+ );
24
35
  };
25
36
  },
26
37
  });
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
- import { ViewProps } from 'react-native';
2
+ import { ColorValue, ViewProps } from 'react-native';
3
+ import { XmlProps } from 'react-native-svg';
3
4
  import type { IViewProps } from '@fluentui-react-native/adapters';
4
5
  import { TextProps } from '@fluentui-react-native/experimental-text';
5
6
  import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
@@ -8,6 +9,13 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
8
9
  export const menuItemCheckboxName = 'MenuItemCheckbox';
9
10
 
10
11
  export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
12
+ checkmarkColor?: ColorValue;
13
+ checkmarkPadding?: number;
14
+ checkmarkSize?: number;
15
+ checkmarkVisibility?: number;
16
+ gap?: number;
17
+
18
+ checked?: MenuItemCheckboxTokens;
11
19
  disabled?: MenuItemCheckboxTokens;
12
20
  focused?: MenuItemCheckboxTokens;
13
21
  hovered?: MenuItemCheckboxTokens;
@@ -27,21 +35,19 @@ export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewPr
27
35
  */
28
36
  componentRef?: React.RefObject<IFocusable>;
29
37
 
30
- /**
31
- * If the menu item is a trigger for a submenu
32
- */
33
- hasSubmenu?: boolean;
34
-
35
38
  /**
36
39
  * A callback to call on button click event
37
40
  */
38
41
  onClick?: (e: InteractionEvent) => void;
39
42
  }
40
43
 
41
- export type MenuItemCheckboxState = IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>>;
44
+ export interface MenuItemCheckboxState extends IPressableHooks<MenuItemCheckboxProps & React.ComponentPropsWithRef<any>> {
45
+ hasCheckmarks?: boolean;
46
+ }
42
47
 
43
48
  export interface MenuItemCheckboxSlotProps {
44
49
  root: React.PropsWithRef<IViewProps>;
50
+ checkmark?: XmlProps;
45
51
  content?: TextProps;
46
52
  }
47
53
 
@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
6
6
  export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
7
7
  backgroundColor: t.colors.neutralBackground1,
8
8
  borderRadius: globalTokens.corner.radius.medium,
9
+ checkmarkPadding: globalTokens.spacing.none,
10
+ checkmarkSize: 16,
11
+ checkmarkVisibility: 0,
9
12
  color: t.colors.neutralForeground2,
10
13
  fontFamily: t.typography.families.primary,
11
14
  fontSize: globalTokens.font.size[300],
12
15
  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
16
+ gap: globalTokens.spacing.xs,
13
17
  minHeight: 32,
14
18
  minWidth: 160,
15
19
  maxWidth: 300,
@@ -17,13 +21,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
17
21
  hovered: {
18
22
  backgroundColor: t.colors.neutralBackground1Hover,
19
23
  color: t.colors.neutralForeground2Hover,
24
+ checked: {
25
+ checkmarkColor: t.colors.neutralForeground2Hover,
26
+ checkmarkVisibility: 1,
27
+ },
20
28
  },
21
29
  pressed: {
22
30
  backgroundColor: t.colors.neutralBackground1Pressed,
23
31
  color: t.colors.neutralForeground2Pressed,
32
+ checked: {
33
+ checkmarkColor: t.colors.neutralForeground2Pressed,
34
+ checkmarkVisibility: 1,
35
+ },
24
36
  },
25
37
  disabled: {
26
38
  backgroundColor: t.colors.neutralBackground1,
27
39
  color: t.colors.neutralForegroundDisabled,
40
+ checked: {
41
+ checkmarkColor: t.colors.neutralForegroundDisabled,
42
+ checkmarkVisibility: 1,
43
+ },
44
+ },
45
+ checked: {
46
+ checkmarkColor: t.colors.neutralForeground2,
47
+ checkmarkVisibility: 1,
28
48
  },
29
49
  });
@@ -6,10 +6,14 @@ import { MenuItemCheckboxTokens } from './MenuItemCheckbox.types';
6
6
  export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens, Theme> = (t: Theme): MenuItemCheckboxTokens => ({
7
7
  backgroundColor: t.colors.neutralBackground1,
8
8
  borderRadius: globalTokens.corner.radius.none,
9
+ checkmarkPadding: globalTokens.spacing.xxs,
10
+ checkmarkSize: 16,
11
+ checkmarkVisibility: 0,
9
12
  color: t.colors.neutralForeground1,
10
13
  fontFamily: t.typography.families.primary,
11
14
  fontSize: globalTokens.font.size[200],
12
15
  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
16
+ gap: globalTokens.spacing.xs,
13
17
  minHeight: 24,
14
18
  minWidth: 160,
15
19
  maxWidth: 300,
@@ -18,13 +22,29 @@ export const defaultMenuItemCheckboxTokens: TokenSettings<MenuItemCheckboxTokens
18
22
  hovered: {
19
23
  backgroundColor: t.colors.neutralBackground1Hover,
20
24
  color: t.colors.neutralForeground1Hover,
25
+ checked: {
26
+ checkmarkColor: t.colors.neutralForeground1Hover,
27
+ checkmarkVisibility: 1,
28
+ },
21
29
  },
22
30
  pressed: {
23
31
  backgroundColor: t.colors.neutralBackground1Pressed,
24
32
  color: t.colors.neutralForeground1Pressed,
33
+ checked: {
34
+ checkmarkColor: t.colors.neutralForeground1Pressed,
35
+ checkmarkVisibility: 1,
36
+ },
25
37
  },
26
38
  disabled: {
27
39
  backgroundColor: t.colors.neutralBackground1,
28
40
  color: t.colors.neutralForegroundDisabled,
41
+ checked: {
42
+ checkmarkColor: t.colors.neutralForegroundDisabled,
43
+ checkmarkVisibility: 1,
44
+ },
45
+ },
46
+ checked: {
47
+ checkmarkColor: t.colors.neutralForeground1,
48
+ checkmarkVisibility: 1,
29
49
  },
30
50
  });
@@ -11,7 +11,7 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
11
11
  const { onClick, accessibilityState, componentRef = defaultComponentRef, disabled, ...rest } = props;
12
12
  const pressable = useAsPressable({ ...rest, disabled, onPress: onClick });
13
13
  const onKeyProps = useKeyProps(onClick, ' ', 'Enter');
14
- const hasSubmenu = useMenuContext().isSubmenu;
14
+ const hasCheckmarks = useMenuContext().hasCheckmarks;
15
15
 
16
16
  return {
17
17
  props: {
@@ -23,11 +23,11 @@ export const useMenuItemCheckbox = (props: MenuItemCheckboxProps): MenuItemCheck
23
23
  accessibilityState: getAccessibilityState(disabled, accessibilityState),
24
24
  enableFocusRing: true,
25
25
  focusable: !disabled,
26
- hasSubmenu,
27
26
  ref: componentRef,
28
27
  ...onKeyProps,
29
28
  },
30
29
  state: pressable.state,
30
+ hasCheckmarks,
31
31
  };
32
32
  };
33
33
 
@@ -5,7 +5,9 @@ export const menuListName = 'MenuList';
5
5
 
6
6
  export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {}
7
7
 
8
- export interface MenuListProps extends Omit<IViewProps, 'onPress'> {}
8
+ export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
9
+ hasCheckmarks?: boolean;
10
+ }
9
11
 
10
12
  export interface MenuListSlotProps {
11
13
  root: React.PropsWithRef<IViewProps>;
package/src/index.ts CHANGED
@@ -2,4 +2,5 @@ export { Menu } from './Menu/Menu';
2
2
  export { MenuTrigger } from './MenuTrigger/MenuTrigger';
3
3
  export { MenuPopover } from './MenuPopover/MenuPopover';
4
4
  export { MenuItem } from './MenuItem/MenuItem';
5
+ export { MenuItemCheckbox } from './MenuItemCheckbox/MenuItemCheckbox';
5
6
  export { MenuList } from './MenuList/MenuList';
@@ -1 +0,0 @@
1
- //# sourceMappingURL=menuTriggerContext.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- "use strict";
2
- //# sourceMappingURL=menuTriggerContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- //# sourceMappingURL=menuTriggerContext.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menuTriggerContext.d.ts","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- "use strict";
2
- //# sourceMappingURL=menuTriggerContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"menuTriggerContext.js","sourceRoot":"","sources":["../../src/context/menuTriggerContext.ts"],"names":[],"mappings":""}