@fluentui-react-native/menu 1.0.61 → 1.0.63
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 +37 -1
- package/CHANGELOG.md +19 -2
- package/SPEC.md +1 -1
- package/lib/MenuItem/MenuItemTokens.macos.js +9 -9
- package/lib/MenuItem/MenuItemTokens.macos.js.map +1 -1
- package/lib/MenuList/MenuList.d.ts.map +1 -1
- package/lib/MenuList/MenuList.js +14 -6
- package/lib/MenuList/MenuList.js.map +1 -1
- package/lib/MenuList/MenuList.types.d.ts +2 -0
- package/lib/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib/MenuList/MenuList.types.js.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.types.d.ts +2 -3
- package/lib/MenuTrigger/MenuTrigger.types.d.ts.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib/MenuTrigger/getRevisedProps.d.ts.map +1 -1
- package/lib/MenuTrigger/getRevisedProps.js +3 -5
- package/lib/MenuTrigger/getRevisedProps.js.map +1 -1
- package/lib-commonjs/MenuItem/MenuItemTokens.macos.js +9 -9
- package/lib-commonjs/MenuItem/MenuItemTokens.macos.js.map +1 -1
- package/lib-commonjs/MenuList/MenuList.d.ts.map +1 -1
- package/lib-commonjs/MenuList/MenuList.js +13 -5
- package/lib-commonjs/MenuList/MenuList.js.map +1 -1
- package/lib-commonjs/MenuList/MenuList.types.d.ts +2 -0
- package/lib-commonjs/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib-commonjs/MenuList/MenuList.types.js.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts +2 -3
- package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.types.js.map +1 -1
- package/lib-commonjs/MenuTrigger/getRevisedProps.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/getRevisedProps.js +3 -5
- package/lib-commonjs/MenuTrigger/getRevisedProps.js.map +1 -1
- package/package.json +2 -1
- package/src/MenuItem/MenuItemTokens.macos.ts +9 -9
- package/src/MenuList/MenuList.tsx +28 -5
- package/src/MenuList/MenuList.types.ts +2 -0
- package/src/MenuTrigger/MenuTrigger.types.ts +2 -3
- package/src/MenuTrigger/getRevisedProps.ts +3 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,43 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Sat, 29 Oct 2022 01:04:58 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/menu_v1.0.63",
|
|
7
|
+
"version": "1.0.63",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "sanajmi@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/menu",
|
|
13
|
+
"commit": "9d5251df615f035066294a17a93e50bead28d7cc",
|
|
14
|
+
"comment": "MenuV1: Update types to PressablePropsExtended"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Sat, 29 Oct 2022 00:18:41 GMT",
|
|
21
|
+
"tag": "@fluentui-react-native/menu_v1.0.62",
|
|
22
|
+
"version": "1.0.62",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "sanajmi@microsoft.com",
|
|
27
|
+
"package": "@fluentui-react-native/menu",
|
|
28
|
+
"commit": "afd897fce7b8442dcefcb0d92217807f4fa7e70b",
|
|
29
|
+
"comment": "MenuV1 (macOS): Add FocusZone"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "sanajmi@microsoft.com",
|
|
33
|
+
"package": "@fluentui-react-native/menu",
|
|
34
|
+
"commit": "1bfe45236cf9e2db058b31cda686e4a6bdb548fa",
|
|
35
|
+
"comment": "MenuV1 (macOS): Update MenuItem tokens"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Thu, 27 Oct 2022 13:19:00 GMT",
|
|
6
42
|
"tag": "@fluentui-react-native/menu_v1.0.61",
|
|
7
43
|
"version": "1.0.61",
|
|
8
44
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Sat, 29 Oct 2022 01:04:58 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 1.0.63
|
|
8
|
+
|
|
9
|
+
Sat, 29 Oct 2022 01:04:58 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- MenuV1: Update types to PressablePropsExtended (sanajmi@microsoft.com)
|
|
14
|
+
|
|
15
|
+
## 1.0.62
|
|
16
|
+
|
|
17
|
+
Sat, 29 Oct 2022 00:18:41 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- MenuV1 (macOS): Add FocusZone (sanajmi@microsoft.com)
|
|
22
|
+
- MenuV1 (macOS): Update MenuItem tokens (sanajmi@microsoft.com)
|
|
23
|
+
|
|
7
24
|
## 1.0.61
|
|
8
25
|
|
|
9
|
-
Thu, 27 Oct 2022 13:
|
|
26
|
+
Thu, 27 Oct 2022 13:19:00 GMT
|
|
10
27
|
|
|
11
28
|
### Patches
|
|
12
29
|
|
package/SPEC.md
CHANGED
|
@@ -224,7 +224,7 @@ Creates a divider element in the `MenuList`. This divider is purely visual and d
|
|
|
224
224
|
#### MenuItem Props
|
|
225
225
|
|
|
226
226
|
```ts
|
|
227
|
-
export interface MenuItemProps extends Omit<
|
|
227
|
+
export interface MenuItemProps extends Omit<PressablePropsExtended, 'onPress'> {
|
|
228
228
|
/**
|
|
229
229
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
230
230
|
*/
|
|
@@ -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
|
-
|
|
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.
|
|
17
|
-
color: t.colors.
|
|
16
|
+
backgroundColor: t.colors.menuItemBackgroundHovered,
|
|
17
|
+
color: t.colors.menuItemTextHovered,
|
|
18
18
|
},
|
|
19
19
|
pressed: {
|
|
20
|
-
backgroundColor: t.colors.
|
|
21
|
-
color: t.colors.
|
|
20
|
+
backgroundColor: t.colors.menuItemBackgroundPressed,
|
|
21
|
+
color: t.colors.menuItemTextHovered,
|
|
22
22
|
},
|
|
23
23
|
disabled: {
|
|
24
|
-
backgroundColor: t.colors.
|
|
25
|
-
color: t.colors.
|
|
24
|
+
backgroundColor: t.colors.menuBackground,
|
|
25
|
+
color: t.colors.disabledText,
|
|
26
26
|
},
|
|
27
27
|
}); };
|
|
28
28
|
//# sourceMappingURL=MenuItemTokens.macos.js.map
|
|
@@ -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,
|
|
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"}
|
|
@@ -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;
|
|
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
|
-
|
|
36
|
-
withSlots(Slots.
|
|
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
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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;
|
|
@@ -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;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,IAAM,YAAY,GAAG,UAAU,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
|
|
2
|
+
import { InteractionEvent, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
|
|
4
3
|
export declare const menuTriggerName = "MenuTrigger";
|
|
5
|
-
export interface MenuTriggerChildProps extends Omit<
|
|
4
|
+
export interface MenuTriggerChildProps extends Omit<PressablePropsExtended, 'onPress'> {
|
|
6
5
|
/**
|
|
7
6
|
* A RefObject to refer to the trigger component.
|
|
8
7
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAEpG,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC;IACpF;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,eAAe,GAAG,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRevisedProps.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,eAAe,8BAAiC,CAAC;AAC9D,iBAAS,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,GAAG,qBAAqB,
|
|
1
|
+
{"version":3,"file":"getRevisedProps.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,eAAe,8BAAiC,CAAC;AAC9D,iBAAS,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,GAAG,qBAAqB,CAuCzF"}
|
|
@@ -28,20 +28,18 @@ function getRevisedPropsWorker(state, props) {
|
|
|
28
28
|
props.onClick(e);
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
var onHoverIn = undefined;
|
|
32
31
|
if (props.onHoverIn) {
|
|
33
|
-
onHoverIn = function (e) {
|
|
32
|
+
revisedProps.onHoverIn = function (e) {
|
|
34
33
|
state.props.onHoverIn(isMouseEvent(e) && e);
|
|
35
34
|
props.onHoverIn(e);
|
|
36
35
|
};
|
|
37
36
|
}
|
|
38
|
-
var onHoverOut = undefined;
|
|
39
37
|
if (props.onHoverOut) {
|
|
40
|
-
onHoverOut = function (e) {
|
|
38
|
+
revisedProps.onHoverOut = function (e) {
|
|
41
39
|
state.props.onHoverOut(isMouseEvent(e) && e);
|
|
42
40
|
props.onHoverOut(e);
|
|
43
41
|
};
|
|
44
42
|
}
|
|
45
|
-
return __assign(
|
|
43
|
+
return __assign({}, revisedProps);
|
|
46
44
|
}
|
|
47
45
|
//# sourceMappingURL=getRevisedProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRevisedProps.js","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAoB,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAG1F;;;;;GAKG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAC9D,SAAS,qBAAqB,CAAC,KAAuB,EAAE,KAAU;IAChE,IAAM,YAAY,gBAAQ,KAAK,CAAC,KAAK,CAAE,CAAC;IACxC,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,CAAC,kBAAkB,yBAAQ,KAAK,CAAC,KAAK,CAAC,kBAAkB,GAAK,KAAK,CAAC,kBAAkB,CAAE,CAAC;KACtG;IAED,IAAI,KAAK,CAAC,oBAAoB,EAAE;QAC9B,YAAY,CAAC,oBAAoB,mCAAO,KAAK,CAAC,KAAK,CAAC,oBAAoB,SAAK,KAAK,CAAC,oBAAoB,OAAC,CAAC;KAC1G;IAED,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,YAAY,CAAC,qBAAqB,GAAG,UAAC,CAA2B;YAC/D,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACrC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,YAAY,CAAC,OAAO,GAAG,UAAC,CAAmB;YACzC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACvB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC;KACH;IAED,IAAI,
|
|
1
|
+
{"version":3,"file":"getRevisedProps.js","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAoB,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAG1F;;;;;GAKG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AAC9D,SAAS,qBAAqB,CAAC,KAAuB,EAAE,KAAU;IAChE,IAAM,YAAY,gBAAQ,KAAK,CAAC,KAAK,CAAE,CAAC;IACxC,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,CAAC,kBAAkB,yBAAQ,KAAK,CAAC,KAAK,CAAC,kBAAkB,GAAK,KAAK,CAAC,kBAAkB,CAAE,CAAC;KACtG;IAED,IAAI,KAAK,CAAC,oBAAoB,EAAE;QAC9B,YAAY,CAAC,oBAAoB,mCAAO,KAAK,CAAC,KAAK,CAAC,oBAAoB,SAAK,KAAK,CAAC,oBAAoB,OAAC,CAAC;KAC1G;IAED,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,YAAY,CAAC,qBAAqB,GAAG,UAAC,CAA2B;YAC/D,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACrC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,YAAY,CAAC,OAAO,GAAG,UAAC,CAAmB;YACzC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACvB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,YAAY,CAAC,SAAS,GAAG,UAAC,CAAmB;YAC3C,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5C,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,UAAU,EAAE;QACpB,YAAY,CAAC,UAAU,GAAG,UAAC,CAAmB;YAC5C,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,CAAC;KACH;IAED,oBAAY,YAAY,EAAG;AAC7B,CAAC"}
|
|
@@ -6,26 +6,26 @@ var defaultMenuItemTokens = function (t) { return ({
|
|
|
6
6
|
backgroundColor: t.colors.transparentBackground,
|
|
7
7
|
borderRadius: 5,
|
|
8
8
|
checkmarkSize: 16,
|
|
9
|
-
|
|
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.
|
|
20
|
-
color: t.colors.
|
|
19
|
+
backgroundColor: t.colors.menuItemBackgroundHovered,
|
|
20
|
+
color: t.colors.menuItemTextHovered,
|
|
21
21
|
},
|
|
22
22
|
pressed: {
|
|
23
|
-
backgroundColor: t.colors.
|
|
24
|
-
color: t.colors.
|
|
23
|
+
backgroundColor: t.colors.menuItemBackgroundPressed,
|
|
24
|
+
color: t.colors.menuItemTextHovered,
|
|
25
25
|
},
|
|
26
26
|
disabled: {
|
|
27
|
-
backgroundColor: t.colors.
|
|
28
|
-
color: t.colors.
|
|
27
|
+
backgroundColor: t.colors.menuBackground,
|
|
28
|
+
color: t.colors.disabledText,
|
|
29
29
|
},
|
|
30
30
|
}); };
|
|
31
31
|
exports.defaultMenuItemTokens = defaultMenuItemTokens;
|
|
@@ -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,
|
|
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"}
|
|
@@ -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;
|
|
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"}
|
|
@@ -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
|
-
|
|
39
|
-
(0, framework_1.withSlots)(Slots.
|
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.tsx"],"names":[],"mappings":";;;;AAAA,qBAAqB;AACrB,6DAA0B;AAC1B,
|
|
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"}
|
|
@@ -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;
|
|
@@ -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;
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"MenuList.types.js","sourceRoot":"","sources":["../../src/MenuList/MenuList.types.ts"],"names":[],"mappings":";;;AAMa,QAAA,YAAY,GAAG,UAAU,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
|
|
2
|
+
import { InteractionEvent, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
|
|
4
3
|
export declare const menuTriggerName = "MenuTrigger";
|
|
5
|
-
export interface MenuTriggerChildProps extends Omit<
|
|
4
|
+
export interface MenuTriggerChildProps extends Omit<PressablePropsExtended, 'onPress'> {
|
|
6
5
|
/**
|
|
7
6
|
* A RefObject to refer to the trigger component.
|
|
8
7
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAEpG,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC;IACpF;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEhD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,qBAAqB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;CACrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAG,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRevisedProps.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,eAAe,8BAAiC,CAAC;AAC9D,iBAAS,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,GAAG,qBAAqB,
|
|
1
|
+
{"version":3,"file":"getRevisedProps.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E;;;;;GAKG;AACH,eAAO,MAAM,eAAe,8BAAiC,CAAC;AAC9D,iBAAS,qBAAqB,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,GAAG,qBAAqB,CAuCzF"}
|
|
@@ -31,20 +31,18 @@ function getRevisedPropsWorker(state, props) {
|
|
|
31
31
|
props.onClick(e);
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
|
-
var onHoverIn = undefined;
|
|
35
34
|
if (props.onHoverIn) {
|
|
36
|
-
onHoverIn = function (e) {
|
|
35
|
+
revisedProps.onHoverIn = function (e) {
|
|
37
36
|
state.props.onHoverIn((0, interactive_hooks_1.isMouseEvent)(e) && e);
|
|
38
37
|
props.onHoverIn(e);
|
|
39
38
|
};
|
|
40
39
|
}
|
|
41
|
-
var onHoverOut = undefined;
|
|
42
40
|
if (props.onHoverOut) {
|
|
43
|
-
onHoverOut = function (e) {
|
|
41
|
+
revisedProps.onHoverOut = function (e) {
|
|
44
42
|
state.props.onHoverOut((0, interactive_hooks_1.isMouseEvent)(e) && e);
|
|
45
43
|
props.onHoverOut(e);
|
|
46
44
|
};
|
|
47
45
|
}
|
|
48
|
-
return (0, tslib_1.__assign)(
|
|
46
|
+
return (0, tslib_1.__assign)({}, revisedProps);
|
|
49
47
|
}
|
|
50
48
|
//# sourceMappingURL=getRevisedProps.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getRevisedProps.js","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":";;;;AACA,8DAA2D;AAC3D,8EAA0F;AAG1F;;;;;GAKG;AACU,QAAA,eAAe,GAAG,IAAA,mBAAO,EAAC,qBAAqB,CAAC,CAAC;AAC9D,SAAS,qBAAqB,CAAC,KAAuB,EAAE,KAAU;IAChE,IAAM,YAAY,6BAAQ,KAAK,CAAC,KAAK,CAAE,CAAC;IACxC,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,CAAC,kBAAkB,mDAAQ,KAAK,CAAC,KAAK,CAAC,kBAAkB,GAAK,KAAK,CAAC,kBAAkB,CAAE,CAAC;KACtG;IAED,IAAI,KAAK,CAAC,oBAAoB,EAAE;QAC9B,YAAY,CAAC,oBAAoB,6DAAO,KAAK,CAAC,KAAK,CAAC,oBAAoB,SAAK,KAAK,CAAC,oBAAoB,OAAC,CAAC;KAC1G;IAED,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,YAAY,CAAC,qBAAqB,GAAG,UAAC,CAA2B;YAC/D,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACrC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,YAAY,CAAC,OAAO,GAAG,UAAC,CAAmB;YACzC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACvB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC;KACH;IAED,IAAI,
|
|
1
|
+
{"version":3,"file":"getRevisedProps.js","sourceRoot":"","sources":["../../src/MenuTrigger/getRevisedProps.ts"],"names":[],"mappings":";;;;AACA,8DAA2D;AAC3D,8EAA0F;AAG1F;;;;;GAKG;AACU,QAAA,eAAe,GAAG,IAAA,mBAAO,EAAC,qBAAqB,CAAC,CAAC;AAC9D,SAAS,qBAAqB,CAAC,KAAuB,EAAE,KAAU;IAChE,IAAM,YAAY,6BAAQ,KAAK,CAAC,KAAK,CAAE,CAAC;IACxC,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,CAAC,kBAAkB,mDAAQ,KAAK,CAAC,KAAK,CAAC,kBAAkB,GAAK,KAAK,CAAC,kBAAkB,CAAE,CAAC;KACtG;IAED,IAAI,KAAK,CAAC,oBAAoB,EAAE;QAC9B,YAAY,CAAC,oBAAoB,6DAAO,KAAK,CAAC,KAAK,CAAC,oBAAoB,SAAK,KAAK,CAAC,oBAAoB,OAAC,CAAC;KAC1G;IAED,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,YAAY,CAAC,qBAAqB,GAAG,UAAC,CAA2B;YAC/D,KAAK,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACrC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,YAAY,CAAC,OAAO,GAAG,UAAC,CAAmB;YACzC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACvB,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,YAAY,CAAC,SAAS,GAAG,UAAC,CAAmB;YAC3C,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAA,gCAAY,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC5C,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC;KACH;IAED,IAAI,KAAK,CAAC,UAAU,EAAE;QACpB,YAAY,CAAC,UAAU,GAAG,UAAC,CAAmB;YAC5C,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,IAAA,gCAAY,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,CAAC;KACH;IAED,iCAAY,YAAY,EAAG;AAC7B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.63",
|
|
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",
|
|
@@ -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
|
-
|
|
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.
|
|
21
|
-
color: t.colors.
|
|
20
|
+
backgroundColor: t.colors.menuItemBackgroundHovered,
|
|
21
|
+
color: t.colors.menuItemTextHovered,
|
|
22
22
|
},
|
|
23
23
|
pressed: {
|
|
24
|
-
backgroundColor: t.colors.
|
|
25
|
-
color: t.colors.
|
|
24
|
+
backgroundColor: t.colors.menuItemBackgroundPressed,
|
|
25
|
+
color: t.colors.menuItemTextHovered,
|
|
26
26
|
},
|
|
27
27
|
disabled: {
|
|
28
|
-
backgroundColor: t.colors.
|
|
29
|
-
color: t.colors.
|
|
28
|
+
backgroundColor: t.colors.menuBackground,
|
|
29
|
+
color: t.colors.disabledText,
|
|
30
30
|
},
|
|
31
31
|
});
|
|
@@ -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
|
-
|
|
44
|
-
|
|
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
|
-
|
|
47
|
-
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
return <MenuListProvider value={contextValue}>{content}</MenuListProvider>;
|
|
48
71
|
};
|
|
49
72
|
},
|
|
50
73
|
});
|
|
@@ -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 {
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
|
|
1
|
+
import { InteractionEvent, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks';
|
|
3
2
|
|
|
4
3
|
export const menuTriggerName = 'MenuTrigger';
|
|
5
4
|
|
|
6
|
-
export interface MenuTriggerChildProps extends Omit<
|
|
5
|
+
export interface MenuTriggerChildProps extends Omit<PressablePropsExtended, 'onPress'> {
|
|
7
6
|
/**
|
|
8
7
|
* A RefObject to refer to the trigger component.
|
|
9
8
|
*/
|
|
@@ -34,21 +34,19 @@ function getRevisedPropsWorker(state: MenuTriggerState, props: any): MenuTrigger
|
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
let onHoverIn = undefined;
|
|
38
37
|
if (props.onHoverIn) {
|
|
39
|
-
onHoverIn = (e: InteractionEvent) => {
|
|
38
|
+
revisedProps.onHoverIn = (e: InteractionEvent) => {
|
|
40
39
|
state.props.onHoverIn(isMouseEvent(e) && e);
|
|
41
40
|
props.onHoverIn(e);
|
|
42
41
|
};
|
|
43
42
|
}
|
|
44
43
|
|
|
45
|
-
let onHoverOut = undefined;
|
|
46
44
|
if (props.onHoverOut) {
|
|
47
|
-
onHoverOut = (e: InteractionEvent) => {
|
|
45
|
+
revisedProps.onHoverOut = (e: InteractionEvent) => {
|
|
48
46
|
state.props.onHoverOut(isMouseEvent(e) && e);
|
|
49
47
|
props.onHoverOut(e);
|
|
50
48
|
};
|
|
51
49
|
}
|
|
52
50
|
|
|
53
|
-
return { ...revisedProps
|
|
51
|
+
return { ...revisedProps };
|
|
54
52
|
}
|