@fluentui-react-native/menu 0.13.1 → 0.14.2
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 +58 -1
- package/CHANGELOG.md +28 -2
- package/SPEC.md +345 -0
- package/jest.config.js +2 -0
- package/lib/Menu/useMenu.js +1 -1
- package/lib/Menu/useMenu.js.map +1 -1
- package/lib/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib/MenuPopover/useMenuPopover.js +2 -1
- package/lib/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.d.ts +2 -2
- package/lib/MenuTrigger/MenuTrigger.d.ts.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.js +9 -9
- package/lib/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.types.d.ts +2 -2
- package/lib/MenuTrigger/MenuTrigger.types.d.ts.map +1 -1
- package/lib/MenuTrigger/useMenuTrigger.d.ts +2 -2
- package/lib/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib/MenuTrigger/useMenuTrigger.js +4 -2
- package/lib/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/__tests__/Menu.test.d.ts +2 -0
- package/lib/__tests__/Menu.test.d.ts.map +1 -0
- package/lib/__tests__/Menu.test.js +145 -0
- package/lib/__tests__/Menu.test.js.map +1 -0
- package/lib-commonjs/Menu/useMenu.js +1 -1
- package/lib-commonjs/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.js +2 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.d.ts +2 -2
- package/lib-commonjs/MenuTrigger/MenuTrigger.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.js +9 -9
- package/lib-commonjs/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts +2 -2
- package/lib-commonjs/MenuTrigger/MenuTrigger.types.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts +2 -2
- package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js +4 -2
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/__tests__/Menu.test.d.ts +2 -0
- package/lib-commonjs/__tests__/Menu.test.d.ts.map +1 -0
- package/lib-commonjs/__tests__/Menu.test.js +148 -0
- package/lib-commonjs/__tests__/Menu.test.js.map +1 -0
- package/package.json +5 -3
- package/src/Menu/useMenu.ts +1 -1
- package/src/MenuList/MenuList.types.ts +1 -0
- package/src/MenuPopover/useMenuPopover.ts +3 -1
- package/src/MenuTrigger/MenuTrigger.tsx +11 -11
- package/src/MenuTrigger/MenuTrigger.types.ts +2 -2
- package/src/MenuTrigger/useMenuTrigger.ts +5 -3
- package/src/__tests__/Menu.test.tsx +235 -0
- package/src/__tests__/__snapshots__/Menu.test.tsx.snap +2098 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,64 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 06 Jun 2022 20:30:12 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/menu_v0.14.2",
|
|
7
|
+
"version": "0.14.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "ruaraki@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/menu",
|
|
13
|
+
"commit": "59f213110a277b6414c0ab505d4fce2e825f4b81",
|
|
14
|
+
"comment": "Spec and minor fixes"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Mon, 06 Jun 2022 19:20:10 GMT",
|
|
21
|
+
"tag": "@fluentui-react-native/menu_v0.14.1",
|
|
22
|
+
"version": "0.14.1",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "beachball",
|
|
27
|
+
"package": "@fluentui-react-native/menu",
|
|
28
|
+
"comment": "Bump @fluentui-react-native/callout to v0.20.6",
|
|
29
|
+
"commit": "1042260cedd07b3d36af2bfee16166eb86e51a92"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui-react-native/menu",
|
|
34
|
+
"comment": "Bump @fluentui-react-native/interactive-hooks to v0.16.2",
|
|
35
|
+
"commit": "1042260cedd07b3d36af2bfee16166eb86e51a92"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui-react-native/menu",
|
|
40
|
+
"comment": "Bump @fluentui-react-native/button to v0.22.27",
|
|
41
|
+
"commit": "1042260cedd07b3d36af2bfee16166eb86e51a92"
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"date": "Mon, 06 Jun 2022 18:30:37 GMT",
|
|
48
|
+
"tag": "@fluentui-react-native/menu_v0.14.0",
|
|
49
|
+
"version": "0.14.0",
|
|
50
|
+
"comments": {
|
|
51
|
+
"minor": [
|
|
52
|
+
{
|
|
53
|
+
"author": "ruaraki@microsoft.com",
|
|
54
|
+
"package": "@fluentui-react-native/menu",
|
|
55
|
+
"commit": "e07a112e088d569bde0da58b21f97a4fdc9a5024",
|
|
56
|
+
"comment": "Write initial snapshot and rerender tests"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Fri, 03 Jun 2022 19:33:31 GMT",
|
|
6
63
|
"tag": "@fluentui-react-native/menu_v0.13.1",
|
|
7
64
|
"version": "0.13.1",
|
|
8
65
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 06 Jun 2022 20:30:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.14.2
|
|
8
|
+
|
|
9
|
+
Mon, 06 Jun 2022 20:30:12 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Spec and minor fixes (ruaraki@microsoft.com)
|
|
14
|
+
|
|
15
|
+
## 0.14.1
|
|
16
|
+
|
|
17
|
+
Mon, 06 Jun 2022 19:20:10 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- Bump @fluentui-react-native/callout to v0.20.6
|
|
22
|
+
- Bump @fluentui-react-native/interactive-hooks to v0.16.2
|
|
23
|
+
- Bump @fluentui-react-native/button to v0.22.27
|
|
24
|
+
|
|
25
|
+
## 0.14.0
|
|
26
|
+
|
|
27
|
+
Mon, 06 Jun 2022 18:30:37 GMT
|
|
28
|
+
|
|
29
|
+
### Minor changes
|
|
30
|
+
|
|
31
|
+
- Write initial snapshot and rerender tests (ruaraki@microsoft.com)
|
|
32
|
+
|
|
7
33
|
## 0.13.1
|
|
8
34
|
|
|
9
|
-
Fri, 03 Jun 2022 19:33:
|
|
35
|
+
Fri, 03 Jun 2022 19:33:31 GMT
|
|
10
36
|
|
|
11
37
|
### Patches
|
|
12
38
|
|
package/SPEC.md
ADDED
|
@@ -0,0 +1,345 @@
|
|
|
1
|
+
# Menu
|
|
2
|
+
|
|
3
|
+
## Background
|
|
4
|
+
|
|
5
|
+
A `Menu` is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.
|
|
6
|
+
|
|
7
|
+
## Requirements
|
|
8
|
+
|
|
9
|
+
If using FURN's theming, the `Menu` and its sub-components require use of the `ThemeProvider` from `@fluentui-react-native/theme` to work properly with themes. Please see [this page](../../../docs/pages/Guides/UpdateThemeProvider.md) for information on updating your `ThemeProvider` if using the version from `@uifabricshared/theming-react-native`.
|
|
10
|
+
|
|
11
|
+
## Sample code
|
|
12
|
+
|
|
13
|
+
The below samples do not represent the definitive props of the final implemented component, but represent the ideal final implementations. Can be subject to change during the implementation phase.
|
|
14
|
+
|
|
15
|
+
### Basic Menu
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
const menu = (
|
|
19
|
+
<Menu>
|
|
20
|
+
<MenuTrigger><Button>Open menu</Button></MenuTrigger>
|
|
21
|
+
<MenuPopover>
|
|
22
|
+
<MenuList>
|
|
23
|
+
<MenuItem>Option 1</MenuItem>
|
|
24
|
+
<MenuItem>Option 2</MenuItem>
|
|
25
|
+
<MenuItem>Option 3</MenuItem>
|
|
26
|
+
</MenuList>
|
|
27
|
+
</MenuPopover>
|
|
28
|
+
<Menu>
|
|
29
|
+
)
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Submenus
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
const menu = (
|
|
36
|
+
<Menu>
|
|
37
|
+
<MenuTrigger><Button>Open menu</Button></MenuTrigger>
|
|
38
|
+
<MenuPopover>
|
|
39
|
+
<MenuList>
|
|
40
|
+
<MenuItem>Option 1</MenuItem>
|
|
41
|
+
<Menu>
|
|
42
|
+
<MenuTrigger>
|
|
43
|
+
<MenuItem>Open submenu</MenuItem>
|
|
44
|
+
</MenuTrigger>
|
|
45
|
+
<MenuPopover>
|
|
46
|
+
<MenuList>
|
|
47
|
+
<MenuItem>Option 1</MenuItem>
|
|
48
|
+
<MenuItem>Option 2</MenuItem>
|
|
49
|
+
<MenuItem>Option 3</MenuItem>
|
|
50
|
+
</MenuList>
|
|
51
|
+
</MenuPopover>
|
|
52
|
+
</Menu>
|
|
53
|
+
</MenuList>
|
|
54
|
+
</MenuPopover>
|
|
55
|
+
<Menu>
|
|
56
|
+
)
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Selection
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
const [selectedItems, setSelectedItems] = React.useState([]);
|
|
63
|
+
const menuCheckbox = (
|
|
64
|
+
<Menu
|
|
65
|
+
selectedItems={selectedItems}
|
|
66
|
+
onSelectionChange={setSeelctedItems}
|
|
67
|
+
>
|
|
68
|
+
<MenuTrigger><Button>Open menu</Button></MenuTrigger>
|
|
69
|
+
<MenuPopover>
|
|
70
|
+
<MenuList>
|
|
71
|
+
<MenuItemCheckbox name="checkbox1">Option 1</MenuItemCheckbox>
|
|
72
|
+
<MenuItemCheckbox name="checkbox2">Option 2</MenuItemCheckbox>
|
|
73
|
+
<MenuItemCheckbox name="checkbox3">Option 3</MenuItemCheckbox>
|
|
74
|
+
</MenuList>
|
|
75
|
+
</MenuPopover>
|
|
76
|
+
<Menu>
|
|
77
|
+
)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Visual Examples
|
|
81
|
+
|
|
82
|
+
Coming soon
|
|
83
|
+
|
|
84
|
+
## Variants
|
|
85
|
+
|
|
86
|
+
### Nested menus
|
|
87
|
+
|
|
88
|
+
A `Menu` should be able to trigger a submenu, or an additional instance of `Menu`, as a part of one or more of its options. The nested `Menu` component should have the same functional capabilities as the root `Menu` component, however it will have some default behavioral differences.
|
|
89
|
+
|
|
90
|
+
Nested menus are by default triggered by hovering over a trigger, but can also be opened by invoking the trigger component for the nested `Menu`.
|
|
91
|
+
|
|
92
|
+
### Selection state
|
|
93
|
+
|
|
94
|
+
A `Menu` should be able to track and represent the selection, or checked, state of its options.
|
|
95
|
+
|
|
96
|
+
When an option has a configurable selection state, it does not dismiss the `Menu` when toggled, as opposed to other options which close the `Menu` on being invoked by default.
|
|
97
|
+
|
|
98
|
+
### Sections
|
|
99
|
+
|
|
100
|
+
A `Menu` can be divided into sections using dividers. The `Menu` does not support `MenuGroups` yet, but can visually represent sections using `MenuDividers`.
|
|
101
|
+
|
|
102
|
+
### Disabled option(s)
|
|
103
|
+
|
|
104
|
+
All options in a `Menu` component can be disabled and should provide a visible indication for this purpose. Although disabled actions cannot be invoked, they are keyboard focusable for the purposes of accessibility.
|
|
105
|
+
|
|
106
|
+
## API
|
|
107
|
+
|
|
108
|
+
### Menu
|
|
109
|
+
|
|
110
|
+
The root level component serves as a simplified interface for configuring the triggering of a Menu.
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
export interface MenuProps extends MenuListProps {
|
|
114
|
+
/**
|
|
115
|
+
* Whether the popup is open
|
|
116
|
+
*/
|
|
117
|
+
open?: boolean;
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Call back when the component requests to change value
|
|
121
|
+
*/
|
|
122
|
+
onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Whether the popup is open by default
|
|
126
|
+
*/
|
|
127
|
+
defaultOpen?: boolean;
|
|
128
|
+
|
|
129
|
+
/*
|
|
130
|
+
* Opens the menu on hover
|
|
131
|
+
*/
|
|
132
|
+
openOnHover?: boolean;
|
|
133
|
+
}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### MenuTrigger
|
|
137
|
+
|
|
138
|
+
A non-visual component that wraps its child and configures them to be the trigger that will open a menu. This component should only accept one child. Accepts no other props.
|
|
139
|
+
|
|
140
|
+
### MenuPopover
|
|
141
|
+
|
|
142
|
+
This component provides the temporary surface that will host the `Menu`'s options.
|
|
143
|
+
|
|
144
|
+
```ts
|
|
145
|
+
export type MenuPopoverProps = ICalloutProps;
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### MenuList
|
|
149
|
+
|
|
150
|
+
This component is used internally by `Menu` and manages the context and layout of its items.
|
|
151
|
+
|
|
152
|
+
#### MenuList Props
|
|
153
|
+
|
|
154
|
+
```ts
|
|
155
|
+
export type MenuListProps = {
|
|
156
|
+
/**
|
|
157
|
+
* Callback when checked items change for value with a name
|
|
158
|
+
*
|
|
159
|
+
* @param name - the name of the value
|
|
160
|
+
* @param isChecked - whether the item is checked
|
|
161
|
+
*/
|
|
162
|
+
onCheckedChange?: (e: InteractionEvent, name: string, isChecked: boolean) => void;
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Map of all checked items
|
|
166
|
+
*/
|
|
167
|
+
checked?: Record<string, boolean>;
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* Default items to be checked on mount
|
|
171
|
+
*/
|
|
172
|
+
defaultChecked?: Record<string, boolean>;
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* States that menu items can contain selectable items and reserve slots for item alignment
|
|
176
|
+
*/
|
|
177
|
+
hasCheckmarks?: boolean;
|
|
178
|
+
};
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
#### MenuList Tokens
|
|
182
|
+
|
|
183
|
+
```ts
|
|
184
|
+
export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
|
|
185
|
+
/**
|
|
186
|
+
* Space between items in pixels
|
|
187
|
+
*/
|
|
188
|
+
gap?: number;
|
|
189
|
+
}
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
#### MenuList Slots
|
|
193
|
+
|
|
194
|
+
- `root` - The container of the `Menu`'s options that wraps all `children`.
|
|
195
|
+
|
|
196
|
+
### MenuDivider
|
|
197
|
+
|
|
198
|
+
Creates a divider element in the `MenuList`. This divider is purely visual and does not handle any grouping logic of the options in the `MenuList`.
|
|
199
|
+
|
|
200
|
+
### MenuItem
|
|
201
|
+
|
|
202
|
+
#### MenuItem Props
|
|
203
|
+
|
|
204
|
+
```ts
|
|
205
|
+
export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
206
|
+
/**
|
|
207
|
+
* Text to show for the item
|
|
208
|
+
*/
|
|
209
|
+
content: string;
|
|
210
|
+
|
|
211
|
+
/**
|
|
212
|
+
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
213
|
+
*/
|
|
214
|
+
componentRef?: React.RefObject<IFocusable>;
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* A callback to call on button click event
|
|
218
|
+
*/
|
|
219
|
+
onClick?: (e: InteractionEvent) => void;
|
|
220
|
+
}
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
#### MenuItem Tokens
|
|
224
|
+
|
|
225
|
+
```ts
|
|
226
|
+
export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
227
|
+
checkmarkSize?: number;
|
|
228
|
+
submenuIndicatorPadding?: number;
|
|
229
|
+
submenuIndicatorSize?: number;
|
|
230
|
+
gap?: number;
|
|
231
|
+
|
|
232
|
+
disabled?: MenuItemTokens;
|
|
233
|
+
focused?: MenuItemTokens;
|
|
234
|
+
hovered?: MenuItemTokens;
|
|
235
|
+
pressed?: MenuItemTokens;
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
#### MenuItem Slots
|
|
240
|
+
|
|
241
|
+
- `root` - The outer container representing the `MenuItem` itself that wraps everything passed via the `children` prop.
|
|
242
|
+
- `content` - If specified, renders the `content` prop as text.
|
|
243
|
+
- `checkmark` - If specified, renders space such that the `content` aligns with other items which have checkmarks. Only used when the `Menu` has `hasCheckmarks`.
|
|
244
|
+
- `submenuIndicator` - If specified, renders an SVG which indicates that the `MenuItem` is a trigger for a nested `Menu`.
|
|
245
|
+
|
|
246
|
+
### MenuItemCheckbox/Radio
|
|
247
|
+
|
|
248
|
+
Variants of `MenuItem` that allows a single or multiple selection state based on the value that it represents. These `MenuItems` do not support submenus. `MenuItemCheckbox` and `MenuItemRadio` share the same types for props, tokens, and slots.
|
|
249
|
+
|
|
250
|
+
#### MenuItemCheckbox/Radio Props
|
|
251
|
+
|
|
252
|
+
```ts
|
|
253
|
+
export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
254
|
+
content: string;
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* Applies disabled styles to menu item but remains focusable
|
|
258
|
+
*/
|
|
259
|
+
disabled?: boolean;
|
|
260
|
+
|
|
261
|
+
/**
|
|
262
|
+
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
263
|
+
*/
|
|
264
|
+
componentRef?: React.RefObject<IFocusable>;
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Identifier for the control
|
|
268
|
+
*/
|
|
269
|
+
name: string;
|
|
270
|
+
}
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
#### MenuItemCheckbox/Radio Tokens
|
|
274
|
+
|
|
275
|
+
```ts
|
|
276
|
+
export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
277
|
+
checkmarkColor?: ColorValue;
|
|
278
|
+
checkmarkPadding?: number;
|
|
279
|
+
checkmarkSize?: number;
|
|
280
|
+
checkmarkVisibility?: number;
|
|
281
|
+
gap?: number;
|
|
282
|
+
|
|
283
|
+
checked?: MenuItemCheckboxTokens;
|
|
284
|
+
disabled?: MenuItemCheckboxTokens;
|
|
285
|
+
focused?: MenuItemCheckboxTokens;
|
|
286
|
+
hovered?: MenuItemCheckboxTokens;
|
|
287
|
+
pressed?: MenuItemCheckboxTokens;
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
#### MenuItemCheckbox/Radio Slots
|
|
292
|
+
|
|
293
|
+
- `root` - The outer container representing the `MenuItem` itself that wraps everything passed via the `children` prop.
|
|
294
|
+
- `content` - If specified, renders the `content` prop as text.
|
|
295
|
+
- `checkmark` - If specified, renders an SVG which indicates that the `MenuItem` is selected.
|
|
296
|
+
|
|
297
|
+
## Behaviors
|
|
298
|
+
|
|
299
|
+
### Mouse interactions
|
|
300
|
+
|
|
301
|
+
- Clicking on a menu's trigger will open the menu
|
|
302
|
+
- Clicking outside of a menu's trigger and popover will light dismiss the menu
|
|
303
|
+
- Clicking on a `MenuItem` which is not configured to track selection will invoke the `MenuItem` and close the menu by default
|
|
304
|
+
- Clicking on a `MenuItem` variant which is configured to track selection will toggle its selection state in the configured way and not close the menu.
|
|
305
|
+
- If the menu is configured to open on hover, it will only close once the mouse leaves both the trigger and the popover. There is a delay for this behavior.
|
|
306
|
+
- Submenus are configured to open on hover by default. If the mouse stops hovering over the submenu, only the submenu will close.
|
|
307
|
+
|
|
308
|
+
### Keyboard interactions
|
|
309
|
+
|
|
310
|
+
- When a menu is invoked via keyboard, open the menu and place focus on the first focusable element by default.
|
|
311
|
+
- Up and down inside of the menu that has focus should navigate vertically between keyboard focusable elements
|
|
312
|
+
- On win32, up and down should circularly navigate through a list of menu items. On MacOS, circular navigation does not occur.
|
|
313
|
+
- Right key on a menu item that has an available submenu or split button should invoke the submenu, and move focus into it onto the first focusable item (Left in RTL)
|
|
314
|
+
- Left key when in a submenu should close the submenu and place focus back on the parent menu's item that opened the submenu. (Right in RTL)
|
|
315
|
+
- ESC on a menu should close the currently focused menu. If focus is in a submenu and ESC is hit, it should only close the current submenu and return focus to the parent's element where focus was previously.
|
|
316
|
+
- Space and Enter key execute the action that is currently focused in the menu.
|
|
317
|
+
|
|
318
|
+
### MenuItem selection
|
|
319
|
+
|
|
320
|
+
Below are the interactions that should be supported for all menu items that are required to handle a selection state.
|
|
321
|
+
|
|
322
|
+
In the event that the selection method is a radio, the previous selected item must be unselected.
|
|
323
|
+
|
|
324
|
+
| Type | Action | Result | Details |
|
|
325
|
+
| ------------- | ------ | ------ | -------------------------------------------- |
|
|
326
|
+
| Keyboard | Space | Toggle | Toggle the selection status of the menu item |
|
|
327
|
+
| Keyboard | Enter | Toggle | Toggle the selection status of the menu item |
|
|
328
|
+
| Mouse | Click | Toggle | Toggle the selection status of the menu item |
|
|
329
|
+
| Accessibility | Toggle | Toggle | Toggle the selection status of the menu item |
|
|
330
|
+
|
|
331
|
+
### Positioning
|
|
332
|
+
|
|
333
|
+
#### Menu positioning
|
|
334
|
+
|
|
335
|
+
The default positioning for the root `Menu` is below the trigger and aligned with the left (or right in RTL) edge.
|
|
336
|
+
|
|
337
|
+
#### Submenu positioning
|
|
338
|
+
|
|
339
|
+
The default positioning for a submenu is to the right of the menu item trigger (or left in RTL) and aligned with the top edge.
|
|
340
|
+
|
|
341
|
+
## Accessibility
|
|
342
|
+
|
|
343
|
+
The `MenuTrigger` will set `expand` or `collapsed` state and will respond to actions which explicitly tell it to expand or collapse (win32 only)
|
|
344
|
+
The `MenuPopover` has its role set to `menu`, and `MenuItmes` and variants have their role set to `menuitem`.
|
|
345
|
+
The `MenuItem` variants which track selection have the `Toggle` pattern available.
|
package/jest.config.js
ADDED
package/lib/Menu/useMenu.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __assign } from "tslib";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { useMenuContext } from '../context/menuContext';
|
|
4
4
|
export var useMenu = function (props) {
|
|
5
|
-
var triggerRef = React.useRef(
|
|
5
|
+
var triggerRef = React.useRef();
|
|
6
6
|
var context = useMenuContext();
|
|
7
7
|
var isSubmenu = context.triggerRef !== null;
|
|
8
8
|
var isControlled = typeof props.open !== 'undefined';
|
package/lib/Menu/useMenu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenu.js","sourceRoot":"","sources":["../../src/Menu/useMenu.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,MAAM,CAAC,IAAM,OAAO,GAAG,UAAC,KAAgB;IACtC,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"useMenu.js","sourceRoot":"","sources":["../../src/Menu/useMenu.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,MAAM,CAAC,IAAM,OAAO,GAAG,UAAC,KAAgB;IACtC,IAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;IAClC,IAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,IAAM,SAAS,GAAG,OAAO,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,IAAM,YAAY,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC;IACjD,IAAA,KAAkB,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,EAAtD,IAAI,QAAA,EAAE,OAAO,QAAyC,CAAC;IAE9D,mDAAmD;IACnD,oEAAoE;IACpE,mDAAmD;IACnD,IAAM,WAAW,GAAG,SAAS,CAAC;IAE9B,0DAA0D;IAC1D,wDAAwD;IACxD,oDAAoD;IACpD,sDAAsD;IACtD,IAAM,0BAA0B,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC;IAExF,2BACE,WAAW,aAAA,IACR,KAAK,KACR,IAAI,MAAA,EACJ,OAAO,SAAA,EACP,UAAU,YAAA,EACV,SAAS,WAAA,EACT,YAAY,cAAA,EACZ,0BAA0B,4BAAA,IAC1B;AACJ,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG,UAAC,YAAqB,EAAE,KAAgB;IACvD,IAAA,WAAW,GAAyB,KAAK,YAA9B,EAAE,YAAY,GAAW,KAAK,aAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAClD,IAAM,YAAY,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzE,IAAA,KAAkC,KAAK,CAAC,QAAQ,CAAU,YAAY,CAAC,EAAtE,YAAY,QAAA,EAAE,eAAe,QAAyC,CAAC;IAE9E,IAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAEjD,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,UAAC,CAAmB,EAAE,MAAe;QACnC,IAAM,QAAQ,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,EAAE;YACjB,eAAe,CAAC,MAAM,CAAC,CAAC;SACzB;QACD,IAAI,YAAY,IAAI,QAAQ,KAAK,MAAM,EAAE;YACvC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,CAAC,CACrD,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC1B,CAAC,CAAC"}
|
|
@@ -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;AAErF,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/E;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD;
|
|
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;AAErF,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,sBAAsB;IAC1E,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/E;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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"useMenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAKzE,eAAO,MAAM,cAAc,WAAY,gBAAgB,KAAG,gBAuDzD,CAAC"}
|
|
@@ -2,11 +2,12 @@ import React from 'react';
|
|
|
2
2
|
import { I18nManager, Platform } from 'react-native';
|
|
3
3
|
import { useMenuContext } from '../context/menuContext';
|
|
4
4
|
import { isCloseOnHoverOutEnabled } from '../consts';
|
|
5
|
+
var controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'];
|
|
5
6
|
export var useMenuPopover = function (_props) {
|
|
6
7
|
var context = useMenuContext();
|
|
7
8
|
var setOpen = context.setOpen, triggerRef = context.triggerRef, isControlled = context.isControlled, isSubmenu = context.isSubmenu, openOnHover = context.openOnHover, parentPopoverHoverOutTimer = context.parentPopoverHoverOutTimer, popoverHoverOutTimer = context.popoverHoverOutTimer, setPopoverHoverOutTimer = context.setPopoverHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer;
|
|
8
9
|
var onDismiss = React.useCallback(function () { return setOpen(undefined, false /* isOpen */); }, [setOpen]);
|
|
9
|
-
var dismissBehaviors = isControlled ?
|
|
10
|
+
var dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
|
|
10
11
|
var directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
|
|
11
12
|
// Initial focus behavior differs per platform, Windows platforms move focus
|
|
12
13
|
// automatically onto first element of Callout
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IAE/B,IAAA,OAAO,GASL,OAAO,QATF,EACP,UAAU,GAQR,OAAO,WARC,EACV,YAAY,GAOV,OAAO,aAPG,EACZ,SAAS,GAMP,OAAO,UANA,EACT,WAAW,GAKT,OAAO,YALE,EACX,0BAA0B,GAIxB,OAAO,2BAJiB,EAC1B,oBAAoB,GAGlB,OAAO,qBAHW,EACpB,uBAAuB,GAErB,OAAO,wBAFc,EACvB,oBAAoB,GAClB,OAAO,qBADW,CACV;IAEZ,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,EAAtC,CAAsC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7F,IAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAErD,IAAM,0BAA0B,GAAG,CAAC,yBAAyB,EAAE,8BAA8B,CAAuB,CAAC;AAErH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,MAAwB;IACrD,IAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IAE/B,IAAA,OAAO,GASL,OAAO,QATF,EACP,UAAU,GAQR,OAAO,WARC,EACV,YAAY,GAOV,OAAO,aAPG,EACZ,SAAS,GAMP,OAAO,UANA,EACT,WAAW,GAKT,OAAO,YALE,EACX,0BAA0B,GAIxB,OAAO,2BAJiB,EAC1B,oBAAoB,GAGlB,OAAO,qBAHW,EACpB,uBAAuB,GAErB,OAAO,wBAFc,EACvB,oBAAoB,GAClB,OAAO,qBADW,CACV;IAEZ,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,cAAM,OAAA,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,EAAtC,CAAsC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7F,IAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,IAAM,eAAe,GAAG,kBAAkB,CAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAEzE,4EAA4E;IAC5E,8CAA8C;IAC9C,IAAM,eAAe,GAAG,QAAQ,CAAC,EAAE,KAAM,OAAe,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,CAAC;IACtF,IAAM,uBAAuB,GAAG,WAAW,CAAC;IAC5C,IAAM,iBAAiB,GAAG,MAAM,CAAC;IAEjC,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,YAAY,CAAC,oBAAoB,CAAC,CAAC;QACnC,YAAY,CAAC,oBAAoB,CAAC,CAAC;QACnC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,0BAA0B,EAAE,oBAAoB,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAC7E,IAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QAED,IAAM,KAAK,GAAG,UAAU,CAAC;YACvB,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEpD,OAAO;QACL,KAAK,EAAE;YACL,iBAAiB,mBAAA;YACjB,MAAM,EAAE,UAAU;YAClB,SAAS,WAAA;YACT,eAAe,iBAAA;YACf,gBAAgB,kBAAA;YAChB,uBAAuB,yBAAA;YACvB,eAAe,iBAAA;SAChB;QACD,SAAS,EAAE;YACT,YAAY,cAAA;YACZ,YAAY,EAAE,wBAAwB,IAAI,YAAY;SACvD;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,kBAAkB,GAAG,UAAC,SAAkB,EAAE,KAAc;IAC5D,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,SAAS,CAAC;KAClB;IAED,IAAI,KAAK,EAAE;QACT,OAAO,aAAa,CAAC;KACtB;IAED,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const MenuTrigger: import("@fluentui-react-native/framework").ComposableFunction<
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const MenuTrigger: import("@fluentui-react-native/framework").ComposableFunction<React.PropsWithChildren<Record<never, any>>>;
|
|
3
3
|
export default MenuTrigger;
|
|
4
4
|
//# sourceMappingURL=MenuTrigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,WAAW,4GAqBtB,CAAC;AAwBH,eAAe,WAAW,CAAC"}
|
|
@@ -4,8 +4,8 @@ import { memoize, stagedComponent } from '@fluentui-react-native/framework';
|
|
|
4
4
|
import { menuTriggerName } from './MenuTrigger.types';
|
|
5
5
|
import { useMenuTrigger } from './useMenuTrigger';
|
|
6
6
|
import { MenuTriggerProvider } from '../context/menuTriggerContext';
|
|
7
|
-
export var MenuTrigger = stagedComponent(function (
|
|
8
|
-
var menuTrigger = useMenuTrigger(
|
|
7
|
+
export var MenuTrigger = stagedComponent(function (_props) {
|
|
8
|
+
var menuTrigger = useMenuTrigger();
|
|
9
9
|
return function (_rest, children) {
|
|
10
10
|
var childrenArray = React.Children.toArray(children);
|
|
11
11
|
if (__DEV__) {
|
|
@@ -17,24 +17,24 @@ export var MenuTrigger = stagedComponent(function (props) {
|
|
|
17
17
|
// child component which may affect accessibility, we need to modify the
|
|
18
18
|
// state in the inner render so we can access the child component and its props.
|
|
19
19
|
var child = childrenArray[0];
|
|
20
|
-
var revisedProps =
|
|
20
|
+
var revisedProps = getRevisedProps(menuTrigger, child.props);
|
|
21
21
|
var revised = React.cloneElement(child, revisedProps);
|
|
22
22
|
return React.createElement(MenuTriggerProvider, { value: menuTrigger.hasSubmenu }, revised);
|
|
23
23
|
};
|
|
24
24
|
});
|
|
25
25
|
MenuTrigger.displayName = menuTriggerName;
|
|
26
|
-
var
|
|
27
|
-
function
|
|
28
|
-
var revisedProps =
|
|
26
|
+
var getRevisedProps = memoize(getRevisedPropsWorker);
|
|
27
|
+
function getRevisedPropsWorker(state, props) {
|
|
28
|
+
var revisedProps = state.props;
|
|
29
29
|
if (props.accessibilityState) {
|
|
30
|
-
revisedProps.accessibilityState = __assign(__assign({},
|
|
30
|
+
revisedProps.accessibilityState = __assign(__assign({}, revisedProps.accessibilityState), props.accessibilityState);
|
|
31
31
|
}
|
|
32
32
|
if (props.accessibilityActions) {
|
|
33
|
-
revisedProps.accessibilityActions = __assign(__assign({},
|
|
33
|
+
revisedProps.accessibilityActions = __assign(__assign({}, revisedProps.accessibilityActions), props.accessibilityActions);
|
|
34
34
|
}
|
|
35
35
|
if (props.onAccessibilityAction) {
|
|
36
36
|
revisedProps.onAccessibilityAction = function (e) {
|
|
37
|
-
|
|
37
|
+
revisedProps.onAccessibilityAction(e);
|
|
38
38
|
props.onAccessibilityAction(e);
|
|
39
39
|
};
|
|
40
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"MenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,eAAe,EAA2C,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,CAAC,IAAM,WAAW,GAAG,eAAe,CAAC,UAAC,MAAmD;IAC7F,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,OAAO,UAAC,KAAkD,EAAE,QAAyB;QACnF,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAyB,CAAC;QAE/E,IAAI,OAAO,EAAE;YACX,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC9B,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;aACzD;SACF;QAED,8EAA8E;QAC9E,wEAAwE;QACxE,gFAAgF;QAChF,IAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;QAC/B,IAAM,YAAY,GAAG,eAAe,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QAC/D,IAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QAExD,OAAO,oBAAC,mBAAmB,IAAC,KAAK,EAAE,WAAW,CAAC,UAAU,IAAG,OAAO,CAAuB,CAAC;IAC7F,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,eAAe,CAAC;AAE1C,IAAM,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACvD,SAAS,qBAAqB,CAAC,KAAuB,EAAE,KAAU;IAChE,IAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC;IACjC,IAAI,KAAK,CAAC,kBAAkB,EAAE;QAC5B,YAAY,CAAC,kBAAkB,yBAAQ,YAAY,CAAC,kBAAkB,GAAK,KAAK,CAAC,kBAAkB,CAAE,CAAC;KACvG;IAED,IAAI,KAAK,CAAC,oBAAoB,EAAE;QAC9B,YAAY,CAAC,oBAAoB,yBAAQ,YAAY,CAAC,oBAAoB,GAAK,KAAK,CAAC,oBAAoB,CAAE,CAAC;KAC7G;IAED,IAAI,KAAK,CAAC,qBAAqB,EAAE;QAC/B,YAAY,CAAC,qBAAqB,GAAG,UAAC,CAA2B;YAC/D,YAAY,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACtC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;KACH;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { InteractionEvent, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks';
|
|
3
3
|
import { ViewProps } from 'react-native';
|
|
4
4
|
export declare const menuTriggerName = "MenuTrigger";
|
|
5
|
-
export interface
|
|
5
|
+
export interface MenuTriggerChildProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
6
6
|
/**
|
|
7
7
|
* A RefObject to refer to the trigger component.
|
|
8
8
|
*/
|
|
@@ -13,7 +13,7 @@ export interface MenuTriggerProps extends Omit<IWithPressableOptions<ViewProps>,
|
|
|
13
13
|
onClick?: (e: InteractionEvent) => void;
|
|
14
14
|
}
|
|
15
15
|
export interface MenuTriggerState {
|
|
16
|
-
props:
|
|
16
|
+
props: MenuTriggerChildProps;
|
|
17
17
|
hasSubmenu: boolean;
|
|
18
18
|
}
|
|
19
19
|
//# sourceMappingURL=MenuTrigger.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"MenuTrigger.types.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AACnG,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAE7C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC9F;;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,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const useMenuTrigger: (
|
|
1
|
+
import { MenuTriggerState } from './MenuTrigger.types';
|
|
2
|
+
export declare const useMenuTrigger: () => MenuTriggerState;
|
|
3
3
|
//# sourceMappingURL=useMenuTrigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"useMenuTrigger.d.ts","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAUvD,eAAO,MAAM,cAAc,QAAO,gBAmEjC,CAAC"}
|
|
@@ -3,10 +3,12 @@ import { Platform } from 'react-native';
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { delayHover, isCloseOnHoverOutEnabled } from '../consts';
|
|
5
5
|
var accessibilityActions = Platform.OS === 'win32' ? [{ name: 'Expand' }, { name: 'Collapse' }] : [];
|
|
6
|
-
|
|
6
|
+
var expandedState = { expanded: true };
|
|
7
|
+
var collapsedState = { expanded: false };
|
|
8
|
+
export var useMenuTrigger = function () {
|
|
7
9
|
var context = useMenuContext();
|
|
8
10
|
var open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
|
|
9
|
-
var accessibilityState = open ?
|
|
11
|
+
var accessibilityState = open ? expandedState : collapsedState;
|
|
10
12
|
var onAccessibilityAction = React.useCallback(function (e) {
|
|
11
13
|
if (Platform.OS === 'win32') {
|
|
12
14
|
switch (e.nativeEvent.actionName) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAqD,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC3F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAEjE,IAAM,oBAAoB,GACxB,QAAQ,CAAC,EAAE,KAAM,OAAe,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAmC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAqC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
|