@fluentui-react-native/menu 1.0.61 → 1.0.62

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 (22) hide show
  1. package/CHANGELOG.json +22 -1
  2. package/CHANGELOG.md +11 -2
  3. package/lib/MenuItem/MenuItemTokens.macos.js +9 -9
  4. package/lib/MenuItem/MenuItemTokens.macos.js.map +1 -1
  5. package/lib/MenuList/MenuList.d.ts.map +1 -1
  6. package/lib/MenuList/MenuList.js +14 -6
  7. package/lib/MenuList/MenuList.js.map +1 -1
  8. package/lib/MenuList/MenuList.types.d.ts +2 -0
  9. package/lib/MenuList/MenuList.types.d.ts.map +1 -1
  10. package/lib/MenuList/MenuList.types.js.map +1 -1
  11. package/lib-commonjs/MenuItem/MenuItemTokens.macos.js +9 -9
  12. package/lib-commonjs/MenuItem/MenuItemTokens.macos.js.map +1 -1
  13. package/lib-commonjs/MenuList/MenuList.d.ts.map +1 -1
  14. package/lib-commonjs/MenuList/MenuList.js +13 -5
  15. package/lib-commonjs/MenuList/MenuList.js.map +1 -1
  16. package/lib-commonjs/MenuList/MenuList.types.d.ts +2 -0
  17. package/lib-commonjs/MenuList/MenuList.types.d.ts.map +1 -1
  18. package/lib-commonjs/MenuList/MenuList.types.js.map +1 -1
  19. package/package.json +2 -1
  20. package/src/MenuItem/MenuItemTokens.macos.ts +9 -9
  21. package/src/MenuList/MenuList.tsx +28 -5
  22. package/src/MenuList/MenuList.types.ts +2 -0
package/CHANGELOG.json CHANGED
@@ -2,7 +2,28 @@
2
2
  "name": "@fluentui-react-native/menu",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 27 Oct 2022 13:18:21 GMT",
5
+ "date": "Sat, 29 Oct 2022 00:18:23 GMT",
6
+ "tag": "@fluentui-react-native/menu_v1.0.62",
7
+ "version": "1.0.62",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "sanajmi@microsoft.com",
12
+ "package": "@fluentui-react-native/menu",
13
+ "commit": "afd897fce7b8442dcefcb0d92217807f4fa7e70b",
14
+ "comment": "MenuV1 (macOS): Add FocusZone"
15
+ },
16
+ {
17
+ "author": "sanajmi@microsoft.com",
18
+ "package": "@fluentui-react-native/menu",
19
+ "commit": "1bfe45236cf9e2db058b31cda686e4a6bdb548fa",
20
+ "comment": "MenuV1 (macOS): Update MenuItem tokens"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Thu, 27 Oct 2022 13:19:00 GMT",
6
27
  "tag": "@fluentui-react-native/menu_v1.0.61",
7
28
  "version": "1.0.61",
8
29
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui-react-native/menu
2
2
 
3
- This log was last generated on Thu, 27 Oct 2022 13:18:21 GMT and should not be manually modified.
3
+ This log was last generated on Sat, 29 Oct 2022 00:18:23 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 1.0.62
8
+
9
+ Sat, 29 Oct 2022 00:18:23 GMT
10
+
11
+ ### Patches
12
+
13
+ - MenuV1 (macOS): Add FocusZone (sanajmi@microsoft.com)
14
+ - MenuV1 (macOS): Update MenuItem tokens (sanajmi@microsoft.com)
15
+
7
16
  ## 1.0.61
8
17
 
9
- Thu, 27 Oct 2022 13:18:21 GMT
18
+ Thu, 27 Oct 2022 13:19:00 GMT
10
19
 
11
20
  ### Patches
12
21
 
package/lib/MenuItem/MenuItemTokens.macos.js CHANGED
@@ -3,26 +3,26 @@ export var defaultMenuItemTokens = function (t) { return ({
3
3
  backgroundColor: t.colors.transparentBackground,
4
4
  borderRadius: 5,
5
5
  checkmarkSize: 16,
6
- submenuIndicatorPadding: globalTokens.spacing.none,
7
- submenuIndicatorSize: 16,
8
- color: t.colors.neutralForeground2,
6
+ color: t.colors.menuItemText,
9
7
  fontFamily: t.typography.families.primary,
10
8
  fontSize: globalTokens.font.size[300],
11
9
  fontWeight: globalTokens.font.weight.regular,
12
10
  gap: globalTokens.spacing.xs,
13
11
  paddingHorizontal: 5,
14
12
  paddingVertical: 3,
13
+ submenuIndicatorPadding: globalTokens.spacing.none,
14
+ submenuIndicatorSize: 16,
15
15
  focused: {
16
- backgroundColor: t.colors.brandBackground,
17
- color: t.colors.brandedContent,
16
+ backgroundColor: t.colors.menuItemBackgroundHovered,
17
+ color: t.colors.menuItemTextHovered,
18
18
  },
19
19
  pressed: {
20
- backgroundColor: t.colors.brandBackgroundPressed,
21
- color: t.colors.brandedPressedContent,
20
+ backgroundColor: t.colors.menuItemBackgroundPressed,
21
+ color: t.colors.menuItemTextHovered,
22
22
  },
23
23
  disabled: {
24
- backgroundColor: t.colors.transparentBackground,
25
- color: t.colors.neutralForegroundDisabled,
24
+ backgroundColor: t.colors.menuBackground,
25
+ color: t.colors.disabledText,
26
26
  },
27
27
  }); };
28
28
  //# sourceMappingURL=MenuItemTokens.macos.js.map
package/lib/MenuItem/MenuItemTokens.macos.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItemTokens.macos.js","sourceRoot":"","sources":["../../src/MenuItem/MenuItemTokens.macos.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAInE,MAAM,CAAC,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;IAC/C,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,EAAE;IACjB,uBAAuB,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI;IAClD,oBAAoB,EAAE,EAAE;IACxB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;IAClC,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;IACzC,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IACrC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAA0B;IAC/D,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE;IAC5B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;QACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;KAC/B;IACD,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,sBAAsB;QAChD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;KACtC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;QAC/C,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;KAC1C;CACF,CAAC,EAzBuG,CAyBvG,CAAC"}
1
+ {"version":3,"file":"MenuItemTokens.macos.js","sourceRoot":"","sources":["../../src/MenuItem/MenuItemTokens.macos.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAInE,MAAM,CAAC,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;IAC/C,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,EAAE;IACjB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;IAC5B,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;IACzC,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IACrC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAA0B;IAC/D,GAAG,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE;IAC5B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,uBAAuB,EAAE,YAAY,CAAC,OAAO,CAAC,IAAI;IAClD,oBAAoB,EAAE,EAAE;IACxB,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;QACnD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,mBAAmB;KACpC;IACD,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;QACnD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,mBAAmB;KACpC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;QACxC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;KAC7B;CACF,CAAC,EAzBuG,CAyBvG,CAAC"}
package/lib/MenuList/MenuList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AA0B7E,eAAO,MAAM,QAAQ,gLAmBnB,CAAC"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AA2B7E,eAAO,MAAM,QAAQ,gLAyCnB,CAAC"}
package/lib/MenuList/MenuList.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { __assign, __rest } from "tslib";
2
2
  /** @jsx withSlots */
3
3
  import React from 'react';
4
- import { View } from 'react-native';
4
+ import { Platform, View } from 'react-native';
5
5
  import { compose, mergeProps, stagedComponent, withSlots } from '@fluentui-react-native/framework';
6
6
  import { menuListName } from './MenuList.types';
7
7
  import { stylingSettings } from './MenuList.styling';
8
8
  import { MenuListProvider } from '../context/menuListContext';
9
9
  import { useMenuList } from './useMenuList';
10
10
  import { useMenuListContextValue } from './useMenuListContextValue';
11
+ import { FocusZone } from '@fluentui-react-native/focus-zone';
11
12
  var MenuStack = stagedComponent(function (props) {
12
13
  var gap = props.gap, rest = __rest(props, ["gap"]);
13
14
  return function (final, children) {
@@ -25,15 +26,22 @@ var MenuStack = stagedComponent(function (props) {
25
26
  };
26
27
  });
27
28
  MenuStack.displayName = 'MenuStack';
28
- export var MenuList = compose(__assign(__assign({ displayName: menuListName }, stylingSettings), { slots: {
29
- root: MenuStack,
30
- }, useRender: function (userProps, useSlots) {
29
+ export var MenuList = compose(__assign(__assign({ displayName: menuListName }, stylingSettings), { slots: __assign({ root: MenuStack }, (Platform.OS === 'macos' ? { focusZone: FocusZone } : null)), useRender: function (userProps, useSlots) {
31
30
  var menuList = useMenuList(userProps);
32
31
  var contextValue = useMenuListContextValue(menuList);
33
32
  var Slots = useSlots(menuList.props);
33
+ var focusZoneRef = React.useRef();
34
+ React.useEffect(function () {
35
+ var _a;
36
+ (_a = focusZoneRef === null || focusZoneRef === void 0 ? void 0 : focusZoneRef.current) === null || _a === void 0 ? void 0 : _a.focus();
37
+ }, []);
34
38
  return function (_final, children) {
35
- return (withSlots(MenuListProvider, { value: contextValue },
36
- withSlots(Slots.root, null, children)));
39
+ var content = Platform.OS === 'macos' ? (withSlots(Slots.root, null,
40
+ withSlots(Slots.focusZone, { componentRef: focusZoneRef, focusZoneDirection: 'vertical', defaultTabbableElement: focusZoneRef,
41
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
42
+ // @ts-ignore FocusZone takes ViewProps, but that isn't defined on it's type.
43
+ enableFocusRing: false, forceFocusMacOS: true }, children))) : (withSlots(Slots.root, null, children));
44
+ return withSlots(MenuListProvider, { value: contextValue }, content);
37
45
  };
38
46
  } }));
39
47
  //# sourceMappingURL=MenuList.js.map
package/lib/MenuList/MenuList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":";AAAA,qBAAqB;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAY,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7G,OAAO,EAAE,YAAY,EAA+B,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,IAAM,SAAS,GAAG,eAAe,CAAC,UAAC,KAAwD;IACjF,IAAA,GAAG,GAAc,KAAK,IAAnB,EAAK,IAAI,UAAK,KAAK,EAAxB,OAAgB,CAAF,CAAW;IAC/B,OAAO,UAAC,KAAwD,EAAE,QAAyB;QACzF,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,EAAE;YAC9B,6DAA6D;YAC7D,yCAAyC;YACzC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAuB,EAAE,KAAa;gBAC7E,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;oBAC5C,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;iBAC1F;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,UAAC,IAAI,eAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAQ,CAAC;IAC9D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,CAAC,IAAM,QAAQ,GAAG,OAAO,qBAC7B,WAAW,EAAE,YAAY,IACtB,eAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;KAChB,EACD,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,IAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;QACxC,IAAM,YAAY,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QACvD,IAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,UAAC,MAAqB,EAAE,QAAyB;YACtD,OAAO,CACL,UAAC,gBAAgB,IAAC,KAAK,EAAE,YAAY;gBACnC,UAAC,KAAK,CAAC,IAAI,QAAE,QAAQ,CAAc,CAClB,CACpB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
1
+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"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"}
package/lib/MenuList/MenuList.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
+ import { FocusZoneProps } from '@fluentui-react-native/focus-zone';
2
3
  import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
3
4
  import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
4
5
  import React from 'react';
@@ -43,6 +44,7 @@ export interface MenuListSlotProps {
43
44
  root: React.PropsWithRef<IViewProps> & {
44
45
  gap?: number;
45
46
  };
47
+ focusZone?: FocusZoneProps;
46
48
  }
47
49
  export interface MenuListType {
48
50
  props: MenuListProps;
package/lib/MenuList/MenuList.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
1
+ {"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
package/lib/MenuList/MenuList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,IAAM,YAAY,GAAG,UAAU,CAAC"}
1
+ {"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,IAAM,YAAY,GAAG,UAAU,CAAC"}
package/lib-commonjs/MenuItem/MenuItemTokens.macos.js CHANGED
@@ -6,26 +6,26 @@ var defaultMenuItemTokens = function (t) { return ({
6
6
  backgroundColor: t.colors.transparentBackground,
7
7
  borderRadius: 5,
8
8
  checkmarkSize: 16,
9
- submenuIndicatorPadding: theme_tokens_1.globalTokens.spacing.none,
10
- submenuIndicatorSize: 16,
11
- color: t.colors.neutralForeground2,
9
+ color: t.colors.menuItemText,
12
10
  fontFamily: t.typography.families.primary,
13
11
  fontSize: theme_tokens_1.globalTokens.font.size[300],
14
12
  fontWeight: theme_tokens_1.globalTokens.font.weight.regular,
15
13
  gap: theme_tokens_1.globalTokens.spacing.xs,
16
14
  paddingHorizontal: 5,
17
15
  paddingVertical: 3,
16
+ submenuIndicatorPadding: theme_tokens_1.globalTokens.spacing.none,
17
+ submenuIndicatorSize: 16,
18
18
  focused: {
19
- backgroundColor: t.colors.brandBackground,
20
- color: t.colors.brandedContent,
19
+ backgroundColor: t.colors.menuItemBackgroundHovered,
20
+ color: t.colors.menuItemTextHovered,
21
21
  },
22
22
  pressed: {
23
- backgroundColor: t.colors.brandBackgroundPressed,
24
- color: t.colors.brandedPressedContent,
23
+ backgroundColor: t.colors.menuItemBackgroundPressed,
24
+ color: t.colors.menuItemTextHovered,
25
25
  },
26
26
  disabled: {
27
- backgroundColor: t.colors.transparentBackground,
28
- color: t.colors.neutralForegroundDisabled,
27
+ backgroundColor: t.colors.menuBackground,
28
+ color: t.colors.disabledText,
29
29
  },
30
30
  }); };
31
31
  exports.defaultMenuItemTokens = defaultMenuItemTokens;
package/lib-commonjs/MenuItem/MenuItemTokens.macos.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuItemTokens.macos.js","sourceRoot":"","sources":["../../src/MenuItem/MenuItemTokens.macos.ts"],"names":[],"mappings":";;;AACA,oEAAmE;AAI5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;IAC/C,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,EAAE;IACjB,uBAAuB,EAAE,2BAAY,CAAC,OAAO,CAAC,IAAI;IAClD,oBAAoB,EAAE,EAAE;IACxB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,kBAAkB;IAClC,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;IACzC,QAAQ,EAAE,2BAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IACrC,UAAU,EAAE,2BAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAA0B;IAC/D,GAAG,EAAE,2BAAY,CAAC,OAAO,CAAC,EAAE;IAC5B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,eAAe;QACzC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;KAC/B;IACD,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,sBAAsB;QAChD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;KACtC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;QAC/C,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;KAC1C;CACF,CAAC,EAzBuG,CAyBvG,CAAC;AAzBU,QAAA,qBAAqB,yBAyB/B"}
1
+ {"version":3,"file":"MenuItemTokens.macos.js","sourceRoot":"","sources":["../../src/MenuItem/MenuItemTokens.macos.ts"],"names":[],"mappings":";;;AACA,oEAAmE;AAI5D,IAAM,qBAAqB,GAAyC,UAAC,CAAQ,IAAqB,OAAA,CAAC;IACxG,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,qBAAqB;IAC/C,YAAY,EAAE,CAAC;IACf,aAAa,EAAE,EAAE;IACjB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;IAC5B,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;IACzC,QAAQ,EAAE,2BAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;IACrC,UAAU,EAAE,2BAAY,CAAC,IAAI,CAAC,MAAM,CAAC,OAA0B;IAC/D,GAAG,EAAE,2BAAY,CAAC,OAAO,CAAC,EAAE;IAC5B,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,CAAC;IAClB,uBAAuB,EAAE,2BAAY,CAAC,OAAO,CAAC,IAAI;IAClD,oBAAoB,EAAE,EAAE;IACxB,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;QACnD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,mBAAmB;KACpC;IACD,OAAO,EAAE;QACP,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAyB;QACnD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,mBAAmB;KACpC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,cAAc;QACxC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY;KAC7B;CACF,CAAC,EAzBuG,CAyBvG,CAAC;AAzBU,QAAA,qBAAqB,yBAyB/B"}
package/lib-commonjs/MenuList/MenuList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AA0B7E,eAAO,MAAM,QAAQ,gLAmBnB,CAAC"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,aAAa,EAAgB,MAAM,kBAAkB,CAAC;AA2B7E,eAAO,MAAM,QAAQ,gLAyCnB,CAAC"}
package/lib-commonjs/MenuList/MenuList.js CHANGED
@@ -11,6 +11,7 @@ var MenuList_styling_1 = require("./MenuList.styling");
11
11
  var menuListContext_1 = require("../context/menuListContext");
12
12
  var useMenuList_1 = require("./useMenuList");
13
13
  var useMenuListContextValue_1 = require("./useMenuListContextValue");
14
+ var focus_zone_1 = require("@fluentui-react-native/focus-zone");
14
15
  var MenuStack = (0, framework_1.stagedComponent)(function (props) {
15
16
  var gap = props.gap, rest = (0, tslib_1.__rest)(props, ["gap"]);
16
17
  return function (final, children) {
@@ -28,15 +29,22 @@ var MenuStack = (0, framework_1.stagedComponent)(function (props) {
28
29
  };
29
30
  });
30
31
  MenuStack.displayName = 'MenuStack';
31
- exports.MenuList = (0, framework_1.compose)((0, tslib_1.__assign)((0, tslib_1.__assign)({ displayName: MenuList_types_1.menuListName }, MenuList_styling_1.stylingSettings), { slots: {
32
- root: MenuStack,
33
- }, useRender: function (userProps, useSlots) {
32
+ exports.MenuList = (0, framework_1.compose)((0, tslib_1.__assign)((0, tslib_1.__assign)({ displayName: MenuList_types_1.menuListName }, MenuList_styling_1.stylingSettings), { slots: (0, tslib_1.__assign)({ root: MenuStack }, (react_native_1.Platform.OS === 'macos' ? { focusZone: focus_zone_1.FocusZone } : null)), useRender: function (userProps, useSlots) {
34
33
  var menuList = (0, useMenuList_1.useMenuList)(userProps);
35
34
  var contextValue = (0, useMenuListContextValue_1.useMenuListContextValue)(menuList);
36
35
  var Slots = useSlots(menuList.props);
36
+ var focusZoneRef = react_1.default.useRef();
37
+ react_1.default.useEffect(function () {
38
+ var _a;
39
+ (_a = focusZoneRef === null || focusZoneRef === void 0 ? void 0 : focusZoneRef.current) === null || _a === void 0 ? void 0 : _a.focus();
40
+ }, []);
37
41
  return function (_final, children) {
38
- return ((0, framework_1.withSlots)(menuListContext_1.MenuListProvider, { value: contextValue },
39
- (0, framework_1.withSlots)(Slots.root, null, children)));
42
+ var content = react_native_1.Platform.OS === 'macos' ? ((0, framework_1.withSlots)(Slots.root, null,
43
+ (0, framework_1.withSlots)(Slots.focusZone, { componentRef: focusZoneRef, focusZoneDirection: 'vertical', defaultTabbableElement: focusZoneRef,
44
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
45
+ // @ts-ignore FocusZone takes ViewProps, but that isn't defined on it's type.
46
+ enableFocusRing: false, forceFocusMacOS: true }, children))) : ((0, framework_1.withSlots)(Slots.root, null, children));
47
+ return (0, framework_1.withSlots)(menuListContext_1.MenuListProvider, { value: contextValue }, content);
40
48
  };
41
49
  } }));
42
50
  //# sourceMappingURL=MenuList.js.map
package/lib-commonjs/MenuList/MenuList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;AAAA,qBAAqB;AACrB,6DAA0B;AAC1B,6CAAoC;AACpC,8DAA6G;AAC7G,mDAA6E;AAC7E,uDAAqD;AACrD,8DAA8D;AAC9D,6CAA4C;AAC5C,qEAAoE;AAGpE,IAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAwD;IACjF,IAAA,GAAG,GAAc,KAAK,IAAnB,EAAK,IAAI,uBAAK,KAAK,EAAxB,OAAgB,CAAF,CAAW;IAC/B,OAAO,UAAC,KAAwD,EAAE,QAAyB;QACzF,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,EAAE;YAC9B,6DAA6D;YAC7D,yCAAyC;YACzC,QAAQ,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAuB,EAAE,KAAa;gBAC7E,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;oBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;iBAC1F;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,2BAAC,mBAAI,4BAAK,IAAA,sBAAU,EAAC,IAAI,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAQ,CAAC;IAC9D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEvB,QAAA,QAAQ,GAAG,IAAA,mBAAO,gDAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;KAChB,EACD,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,IAAM,QAAQ,GAAG,IAAA,yBAAW,EAAC,SAAS,CAAC,CAAC;QACxC,IAAM,YAAY,GAAG,IAAA,iDAAuB,EAAC,QAAQ,CAAC,CAAC;QACvD,IAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,UAAC,MAAqB,EAAE,QAAyB;YACtD,OAAO,CACL,2BAAC,kCAAgB,IAAC,KAAK,EAAE,YAAY;gBACnC,2BAAC,KAAK,CAAC,IAAI,QAAE,QAAQ,CAAc,CAClB,CACpB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
1
+ {"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;AAAA,qBAAqB;AACrB,6DAA0B;AAC1B,6CAA8C;AAC9C,8DAA6G;AAC7G,mDAA6E;AAC7E,uDAAqD;AACrD,8DAA8D;AAC9D,6CAA4C;AAC5C,qEAAoE;AAEpE,gEAA8D;AAE9D,IAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAwD;IACjF,IAAA,GAAG,GAAc,KAAK,IAAnB,EAAK,IAAI,uBAAK,KAAK,EAAxB,OAAgB,CAAF,CAAW;IAC/B,OAAO,UAAC,KAAwD,EAAE,QAAyB;QACzF,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC,IAAI,QAAQ,EAAE;YAC9B,6DAA6D;YAC7D,yCAAyC;YACzC,QAAQ,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAuB,EAAE,KAAa;gBAC7E,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE;oBAC5C,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,IAAA,sBAAU,EAAC,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;iBAC1F;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,2BAAC,mBAAI,4BAAK,IAAA,sBAAU,EAAC,IAAI,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAQ,CAAC;IAC9D,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEvB,QAAA,QAAQ,GAAG,IAAA,mBAAO,gDAC7B,WAAW,EAAE,6BAAY,IACtB,kCAAe,KAClB,KAAK,0BACH,IAAI,EAAE,SAAS,IACZ,CAAC,uBAAQ,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,sBAAS,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAEhE,SAAS,EAAE,UAAC,SAAwB,EAAE,QAAgC;QACpE,IAAM,QAAQ,GAAG,IAAA,yBAAW,EAAC,SAAS,CAAC,CAAC;QACxC,IAAM,YAAY,GAAG,IAAA,iDAAuB,EAAC,QAAQ,CAAC,CAAC;QACvD,IAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAM,YAAY,GAAG,eAAK,CAAC,MAAM,EAAQ,CAAC;QAE1C,eAAK,CAAC,SAAS,CAAC;;YACd,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;QACjC,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,UAAC,MAAqB,EAAE,QAAyB;YACtD,IAAM,OAAO,GACX,uBAAQ,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CACxB,2BAAC,KAAK,CAAC,IAAI;gBACT,2BAAC,KAAK,CAAC,SAAS,IACd,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,UAAU,EAC9B,sBAAsB,EAAE,YAAY;oBACpC,6DAA6D;oBAC7D,6EAA6E;oBAC7E,eAAe,EAAE,KAAK,EACtB,eAAe,EAAE,IAAI,IAEpB,QAAQ,CACO,CACP,CACd,CAAC,CAAC,CAAC,CACF,2BAAC,KAAK,CAAC,IAAI,QAAE,QAAQ,CAAc,CACpC,CAAC;YAEJ,OAAO,2BAAC,kCAAgB,IAAC,KAAK,EAAE,YAAY,IAAG,OAAO,CAAoB,CAAC;QAC7E,CAAC,CAAC;IACJ,CAAC,IACD,CAAC"}
package/lib-commonjs/MenuList/MenuList.types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
+ import { FocusZoneProps } from '@fluentui-react-native/focus-zone';
2
3
  import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
3
4
  import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
4
5
  import React from 'react';
@@ -43,6 +44,7 @@ export interface MenuListSlotProps {
43
44
  root: React.PropsWithRef<IViewProps> & {
44
45
  gap?: number;
45
46
  };
47
+ focusZone?: FocusZoneProps;
46
48
  }
47
49
  export interface MenuListType {
48
50
  props: MenuListProps;
package/lib-commonjs/MenuList/MenuList.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
1
+ {"version":3,"file":"MenuList.types.d.ts","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACpE;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,iBAAiB,CAAC;IACvF,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAClF,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,SAAS,CAAC,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
package/lib-commonjs/MenuList/MenuList.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":";;;AAKa,QAAA,YAAY,GAAG,UAAU,CAAC"}
1
+ {"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":";;;AAMa,QAAA,YAAY,GAAG,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui-react-native/menu",
3
- "version": "1.0.61",
3
+ "version": "1.0.62",
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",
@@ -24,6 +24,7 @@
24
24
  "dependencies": {
25
25
  "@fluentui-react-native/adapters": ">=0.9.3 <1.0.0",
26
26
  "@fluentui-react-native/callout": ">=0.21.28 <1.0.0",
27
+ "@fluentui-react-native/focus-zone": ">=0.10.30 <1.0.0",
27
28
  "@fluentui-react-native/framework": "0.8.15",
28
29
  "@fluentui-react-native/interactive-hooks": ">=0.19.4 <1.0.0",
29
30
  "@fluentui-react-native/text": ">=0.15.11 <1.0.0",
package/src/MenuItem/MenuItemTokens.macos.ts CHANGED
@@ -7,25 +7,25 @@ export const defaultMenuItemTokens: TokenSettings<MenuItemTokens, Theme> = (t: T
7
7
  backgroundColor: t.colors.transparentBackground,
8
8
  borderRadius: 5, // hardcoded for now to match ContextualMenu
9
9
  checkmarkSize: 16,
10
- submenuIndicatorPadding: globalTokens.spacing.none,
11
- submenuIndicatorSize: 16,
12
- color: t.colors.neutralForeground2,
10
+ color: t.colors.menuItemText, // matches ContextualMenu
13
11
  fontFamily: t.typography.families.primary,
14
12
  fontSize: globalTokens.font.size[300],
15
13
  fontWeight: globalTokens.font.weight.regular as FontWeightValue,
16
14
  gap: globalTokens.spacing.xs,
17
15
  paddingHorizontal: 5, // hardcoded for now to match ContextualMenu
18
16
  paddingVertical: 3, // hardcoded for now to match ContextualMenu
17
+ submenuIndicatorPadding: globalTokens.spacing.none,
18
+ submenuIndicatorSize: 16,
19
19
  focused: {
20
- backgroundColor: t.colors.brandBackground,
21
- color: t.colors.brandedContent,
20
+ backgroundColor: t.colors.menuItemBackgroundHovered,
21
+ color: t.colors.menuItemTextHovered,
22
22
  },
23
23
  pressed: {
24
- backgroundColor: t.colors.brandBackgroundPressed,
25
- color: t.colors.brandedPressedContent,
24
+ backgroundColor: t.colors.menuItemBackgroundPressed,
25
+ color: t.colors.menuItemTextHovered,
26
26
  },
27
27
  disabled: {
28
- backgroundColor: t.colors.transparentBackground,
29
- color: t.colors.neutralForegroundDisabled,
28
+ backgroundColor: t.colors.menuBackground,
29
+ color: t.colors.disabledText,
30
30
  },
31
31
  });
package/src/MenuList/MenuList.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  /** @jsx withSlots */
2
2
  import React from 'react';
3
- import { View } from 'react-native';
3
+ import { Platform, View } from 'react-native';
4
4
  import { compose, mergeProps, stagedComponent, UseSlots, withSlots } from '@fluentui-react-native/framework';
5
5
  import { menuListName, MenuListProps, MenuListType } from './MenuList.types';
6
6
  import { stylingSettings } from './MenuList.styling';
@@ -8,6 +8,7 @@ import { MenuListProvider } from '../context/menuListContext';
8
8
  import { useMenuList } from './useMenuList';
9
9
  import { useMenuListContextValue } from './useMenuListContextValue';
10
10
  import { IViewProps } from '@fluentui-react-native/adapters';
11
+ import { FocusZone } from '@fluentui-react-native/focus-zone';
11
12
 
12
13
  const MenuStack = stagedComponent((props: React.PropsWithRef<IViewProps> & { gap?: number }) => {
13
14
  const { gap, ...rest } = props;
@@ -33,18 +34,40 @@ export const MenuList = compose<MenuListType>({
33
34
  ...stylingSettings,
34
35
  slots: {
35
36
  root: MenuStack,
37
+ ...(Platform.OS === 'macos' ? { focusZone: FocusZone } : null),
36
38
  },
37
39
  useRender: (userProps: MenuListProps, useSlots: UseSlots<MenuListType>) => {
38
40
  const menuList = useMenuList(userProps);
39
41
  const contextValue = useMenuListContextValue(menuList);
40
42
  const Slots = useSlots(menuList.props);
41
43
 
44
+ const focusZoneRef = React.useRef<View>();
45
+
46
+ React.useEffect(() => {
47
+ focusZoneRef?.current?.focus();
48
+ }, []);
49
+
42
50
  return (_final: MenuListProps, children: React.ReactNode) => {
43
- return (
44
- <MenuListProvider value={contextValue}>
51
+ const content =
52
+ Platform.OS === 'macos' ? (
53
+ <Slots.root>
54
+ <Slots.focusZone
55
+ componentRef={focusZoneRef}
56
+ focusZoneDirection={'vertical'}
57
+ defaultTabbableElement={focusZoneRef}
58
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
59
+ // @ts-ignore FocusZone takes ViewProps, but that isn't defined on it's type.
60
+ enableFocusRing={false}
61
+ forceFocusMacOS={true}
62
+ >
63
+ {children}
64
+ </Slots.focusZone>
65
+ </Slots.root>
66
+ ) : (
45
67
  <Slots.root>{children}</Slots.root>
46
- </MenuListProvider>
47
- );
68
+ );
69
+
70
+ return <MenuListProvider value={contextValue}>{content}</MenuListProvider>;
48
71
  };
49
72
  },
50
73
  });
package/src/MenuList/MenuList.types.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type { IViewProps } from '@fluentui-react-native/adapters';
2
+ import { FocusZoneProps } from '@fluentui-react-native/focus-zone';
2
3
  import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
3
4
  import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
4
5
  import React from 'react';
@@ -49,6 +50,7 @@ export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onChecke
49
50
 
50
51
  export interface MenuListSlotProps {
51
52
  root: React.PropsWithRef<IViewProps> & { gap?: number };
53
+ focusZone?: FocusZoneProps; // macOS only
52
54
  }
53
55
 
54
56
  export interface MenuListType {