@fluentui-react-native/menu 0.15.0 → 0.15.3
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 +46 -1
- package/CHANGELOG.md +26 -2
- package/lib/Menu/Menu.types.d.ts +13 -0
- package/lib/Menu/Menu.types.d.ts.map +1 -1
- package/lib/MenuItem/MenuItem.types.d.ts +15 -4
- package/lib/MenuItem/MenuItem.types.d.ts.map +1 -1
- package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts +18 -4
- package/lib/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map +1 -1
- package/lib/MenuList/MenuList.types.d.ts +17 -0
- package/lib/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib/MenuPopover/MenuPopover.d.ts +2 -1
- package/lib/MenuPopover/MenuPopover.d.ts.map +1 -1
- package/lib/MenuPopover/MenuPopover.js +19 -5
- package/lib/MenuPopover/MenuPopover.js.map +1 -1
- package/lib/MenuPopover/MenuPopover.types.d.ts +2 -1
- package/lib/MenuPopover/MenuPopover.types.d.ts.map +1 -1
- package/lib/MenuPopover/MenuPopoverTokens.d.ts +3 -0
- package/lib/MenuPopover/MenuPopoverTokens.d.ts.map +1 -0
- package/lib/MenuPopover/MenuPopoverTokens.js +4 -0
- package/lib/MenuPopover/MenuPopoverTokens.js.map +1 -0
- package/lib/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib/MenuTrigger/useMenuTrigger.js +6 -6
- package/lib/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/consts.d.ts +1 -1
- package/lib/consts.d.ts.map +1 -1
- package/lib/consts.js +1 -1
- package/lib/consts.js.map +1 -1
- package/lib-commonjs/Menu/Menu.types.d.ts +13 -0
- package/lib-commonjs/Menu/Menu.types.d.ts.map +1 -1
- package/lib-commonjs/MenuItem/MenuItem.types.d.ts +15 -4
- package/lib-commonjs/MenuItem/MenuItem.types.d.ts.map +1 -1
- package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts +18 -4
- package/lib-commonjs/MenuItemCheckbox/MenuItemCheckbox.types.d.ts.map +1 -1
- package/lib-commonjs/MenuList/MenuList.types.d.ts +17 -0
- package/lib-commonjs/MenuList/MenuList.types.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.d.ts +2 -1
- package/lib-commonjs/MenuPopover/MenuPopover.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.js +18 -4
- package/lib-commonjs/MenuPopover/MenuPopover.js.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts +2 -1
- package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopoverTokens.d.ts +3 -0
- package/lib-commonjs/MenuPopover/MenuPopoverTokens.d.ts.map +1 -0
- package/lib-commonjs/MenuPopover/MenuPopoverTokens.js +7 -0
- package/lib-commonjs/MenuPopover/MenuPopoverTokens.js.map +1 -0
- package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js +5 -5
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/consts.d.ts +1 -1
- package/lib-commonjs/consts.d.ts.map +1 -1
- package/lib-commonjs/consts.js +2 -2
- package/lib-commonjs/consts.js.map +1 -1
- package/package.json +1 -1
- package/src/Menu/Menu.types.ts +20 -0
- package/src/MenuItem/MenuItem.types.ts +18 -5
- package/src/MenuItemCheckbox/MenuItemCheckbox.types.ts +22 -5
- package/src/MenuList/MenuList.types.ts +20 -0
- package/src/MenuPopover/MenuPopover.tsx +28 -15
- package/src/MenuPopover/MenuPopover.types.ts +5 -1
- package/src/MenuPopover/MenuPopoverTokens.ts +7 -0
- package/src/MenuTrigger/useMenuTrigger.ts +15 -6
- package/src/consts.ts +1 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,52 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 21 Jun 2022 18:56:59 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/menu_v0.15.3",
|
|
7
|
+
"version": "0.15.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "ruaraki@microsoft.com",
|
|
12
|
+
"package": "@fluentui-react-native/menu",
|
|
13
|
+
"commit": "842bfbf392c70c12da4774d2c4295d442fe8fd02",
|
|
14
|
+
"comment": "Add tokens to MenuPopover"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Fri, 17 Jun 2022 20:00:18 GMT",
|
|
21
|
+
"tag": "@fluentui-react-native/menu_v0.15.2",
|
|
22
|
+
"version": "0.15.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "ruaraki@microsoft.com",
|
|
27
|
+
"package": "@fluentui-react-native/menu",
|
|
28
|
+
"commit": "0521256cec60beb1ed3418be7aa593b6ec6eef85",
|
|
29
|
+
"comment": "Add hoverDelay prop"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"date": "Fri, 17 Jun 2022 00:27:10 GMT",
|
|
36
|
+
"tag": "@fluentui-react-native/menu_v0.15.1",
|
|
37
|
+
"version": "0.15.1",
|
|
38
|
+
"comments": {
|
|
39
|
+
"patch": [
|
|
40
|
+
{
|
|
41
|
+
"author": "ruaraki@microsoft.com",
|
|
42
|
+
"package": "@fluentui-react-native/menu",
|
|
43
|
+
"commit": "90f04c4334bf46ae5b359f226177e0a8a22349c5",
|
|
44
|
+
"comment": "Update comments"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Thu, 16 Jun 2022 20:44:45 GMT",
|
|
6
51
|
"tag": "@fluentui-react-native/menu_v0.15.0",
|
|
7
52
|
"version": "0.15.0",
|
|
8
53
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 21 Jun 2022 18:56:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 0.15.3
|
|
8
|
+
|
|
9
|
+
Tue, 21 Jun 2022 18:56:59 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Add tokens to MenuPopover (ruaraki@microsoft.com)
|
|
14
|
+
|
|
15
|
+
## 0.15.2
|
|
16
|
+
|
|
17
|
+
Fri, 17 Jun 2022 20:00:18 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- Add hoverDelay prop (ruaraki@microsoft.com)
|
|
22
|
+
|
|
23
|
+
## 0.15.1
|
|
24
|
+
|
|
25
|
+
Fri, 17 Jun 2022 00:27:10 GMT
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- Update comments (ruaraki@microsoft.com)
|
|
30
|
+
|
|
7
31
|
## 0.15.0
|
|
8
32
|
|
|
9
|
-
Thu, 16 Jun 2022 20:44:
|
|
33
|
+
Thu, 16 Jun 2022 20:44:45 GMT
|
|
10
34
|
|
|
11
35
|
### Minor changes
|
|
12
36
|
|
package/lib/Menu/Menu.types.d.ts
CHANGED
|
@@ -4,8 +4,21 @@ import React from 'react';
|
|
|
4
4
|
import type { MenuListProps } from '../MenuList/MenuList.types';
|
|
5
5
|
export declare const menuName = "Menu";
|
|
6
6
|
export interface MenuProps extends MenuListProps {
|
|
7
|
+
/**
|
|
8
|
+
* Whether the popup is open on mount
|
|
9
|
+
*/
|
|
7
10
|
defaultOpen?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* How much delay to have between hover in and showing the menu, in ms.
|
|
13
|
+
*/
|
|
14
|
+
hoverDelay?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the popup is open
|
|
17
|
+
*/
|
|
8
18
|
open?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Call back when the component requests to change value
|
|
21
|
+
*/
|
|
9
22
|
onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
|
|
10
23
|
openOnHover?: boolean;
|
|
11
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}
|
|
@@ -7,20 +7,31 @@ import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions }
|
|
|
7
7
|
import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
|
|
8
8
|
export declare const menuItemName = "MenuItem";
|
|
9
9
|
export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
10
|
+
/**
|
|
11
|
+
* Height and width in pixels of the space that is reserved to align the item's text with other items which have checkmarks
|
|
12
|
+
*/
|
|
10
13
|
checkmarkSize?: number;
|
|
14
|
+
/**
|
|
15
|
+
* Amount of space in pixels around the indicator that shows that an item has a submenu
|
|
16
|
+
*/
|
|
11
17
|
submenuIndicatorPadding?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Height and width in pixels of the indicator that shows that an item has a submenu
|
|
20
|
+
*/
|
|
12
21
|
submenuIndicatorSize?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Space between parts of the item control in pixels
|
|
24
|
+
*/
|
|
13
25
|
gap?: number;
|
|
26
|
+
/**
|
|
27
|
+
* States of the item control
|
|
28
|
+
*/
|
|
14
29
|
disabled?: MenuItemTokens;
|
|
15
30
|
focused?: MenuItemTokens;
|
|
16
31
|
hovered?: MenuItemTokens;
|
|
17
32
|
pressed?: MenuItemTokens;
|
|
18
33
|
}
|
|
19
34
|
export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
20
|
-
/**
|
|
21
|
-
* Applies disabled styles to menu item but remains focusable
|
|
22
|
-
*/
|
|
23
|
-
disabled?: boolean;
|
|
24
35
|
/**
|
|
25
36
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
26
37
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.types.d.ts","sourceRoot":"","sources":["../../src/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAChI,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItem.types.d.ts","sourceRoot":"","sources":["../../src/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAChI,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IAC3F;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtF;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,aAAc,SAAQ,eAAe,CAAC,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
|
|
@@ -7,11 +7,29 @@ import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-re
|
|
|
7
7
|
import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
|
|
8
8
|
export declare const menuItemCheckboxName = "MenuItemCheckbox";
|
|
9
9
|
export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
10
|
+
/**
|
|
11
|
+
* Color of the checkmark icon
|
|
12
|
+
*/
|
|
10
13
|
checkmarkColor?: ColorValue;
|
|
14
|
+
/**
|
|
15
|
+
* Amount of space in pixels around the checkmark icon
|
|
16
|
+
*/
|
|
11
17
|
checkmarkPadding?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Height and width in pixels of the checkmark icon
|
|
20
|
+
*/
|
|
12
21
|
checkmarkSize?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Visibility of the checkmark icon from 0 to 1
|
|
24
|
+
*/
|
|
13
25
|
checkmarkVisibility?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Space between parts of the item control in pixels
|
|
28
|
+
*/
|
|
14
29
|
gap?: number;
|
|
30
|
+
/**
|
|
31
|
+
* States of the item control
|
|
32
|
+
*/
|
|
15
33
|
checked?: MenuItemCheckboxTokens;
|
|
16
34
|
disabled?: MenuItemCheckboxTokens;
|
|
17
35
|
focused?: MenuItemCheckboxTokens;
|
|
@@ -19,10 +37,6 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
|
|
|
19
37
|
pressed?: MenuItemCheckboxTokens;
|
|
20
38
|
}
|
|
21
39
|
export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
22
|
-
/**
|
|
23
|
-
* Applies disabled styles to menu item but remains focusable
|
|
24
|
-
*/
|
|
25
|
-
disabled?: boolean;
|
|
26
40
|
/**
|
|
27
41
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
28
42
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG,cAAc,CAAC,EAAE,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}
|
|
@@ -4,12 +4,29 @@ import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tok
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
export declare const menuListName = "MenuList";
|
|
6
6
|
export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
|
|
7
|
+
/**
|
|
8
|
+
* Space between items in pixels
|
|
9
|
+
*/
|
|
7
10
|
gap?: number;
|
|
8
11
|
}
|
|
9
12
|
export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
|
|
13
|
+
/**
|
|
14
|
+
* Array of all checked items
|
|
15
|
+
*/
|
|
10
16
|
checked?: string[];
|
|
17
|
+
/**
|
|
18
|
+
* Default items to be checked on mount
|
|
19
|
+
*/
|
|
11
20
|
defaultChecked?: string[];
|
|
21
|
+
/**
|
|
22
|
+
* States that menu items can contain selectable items and reserves space for item alignment
|
|
23
|
+
*/
|
|
12
24
|
hasCheckmarks?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Callback when checked items change
|
|
27
|
+
*
|
|
28
|
+
* @param checked Array of all currently checked values
|
|
29
|
+
*/
|
|
13
30
|
onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
|
|
14
31
|
}
|
|
15
32
|
export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onCheckedChange'> {
|
|
@@ -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,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,EAAE,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,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,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,3 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { MenuPopoverTokens } from './MenuPopover.types';
|
|
2
|
+
export declare const MenuPopover: import("@fluentui-react-native/use-tokens").CustomizableComponent<import("@fluentui-react-native/callout").ICalloutProps, MenuPopoverTokens, import("@fluentui-react-native/framework").Theme>;
|
|
2
3
|
export default MenuPopover;
|
|
3
4
|
//# sourceMappingURL=MenuPopover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK3F,eAAO,MAAM,WAAW,gMAyBvB,CAAC;AAGF,eAAe,WAAW,CAAC"}
|
|
@@ -1,19 +1,33 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { mergeProps,
|
|
3
|
+
import { compressible, mergeProps, patchTokens, useFluentTheme } from '@fluentui-react-native/framework';
|
|
4
4
|
import { Callout } from '@fluentui-react-native/callout';
|
|
5
5
|
import { menuPopoverName } from './MenuPopover.types';
|
|
6
6
|
import { useMenuPopover } from './useMenuPopover';
|
|
7
|
+
import { useMenuPopoverTokens } from './MenuPopoverTokens';
|
|
7
8
|
import { View } from 'react-native';
|
|
8
|
-
export var MenuPopover =
|
|
9
|
+
export var MenuPopover = compressible(function (props, useTokens) {
|
|
10
|
+
var _a;
|
|
11
|
+
var directionalHint = props.directionalHint, gapSpace = props.gapSpace, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minPadding = props.minPadding, borderWidth = props.borderWidth, borderColor = props.borderColor, backgroundColor = props.backgroundColor;
|
|
9
12
|
var state = useMenuPopover(props);
|
|
10
13
|
var theme = useFluentTheme();
|
|
14
|
+
var _b = useTokens(theme), tokens = _b[0], cache = _b[1];
|
|
15
|
+
_a = patchTokens(tokens, cache, {
|
|
16
|
+
directionalHint: directionalHint,
|
|
17
|
+
gapSpace: gapSpace,
|
|
18
|
+
maxHeight: maxHeight,
|
|
19
|
+
maxWidth: maxWidth,
|
|
20
|
+
minPadding: minPadding,
|
|
21
|
+
borderWidth: borderWidth,
|
|
22
|
+
borderColor: borderColor,
|
|
23
|
+
backgroundColor: backgroundColor,
|
|
24
|
+
}), tokens = _a[0], cache = _a[1];
|
|
11
25
|
return function (final, children) {
|
|
12
|
-
var mergedProps = mergeProps(state.props, final);
|
|
26
|
+
var mergedProps = mergeProps(tokens, state.props, final);
|
|
13
27
|
var content = React.createElement(View, state.innerView, children);
|
|
14
|
-
return
|
|
28
|
+
return React.createElement(Callout, __assign({}, mergedProps), content);
|
|
15
29
|
};
|
|
16
|
-
});
|
|
30
|
+
}, useMenuPopoverTokens);
|
|
17
31
|
MenuPopover.displayName = menuPopoverName;
|
|
18
32
|
export default MenuPopover;
|
|
19
33
|
//# sourceMappingURL=MenuPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAa,MAAM,kCAAkC,CAAC;AACpH,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,eAAe,EAAuC,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,CAAC,IAAM,WAAW,GAAG,YAAY,CACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAA2F,KAAK,gBAAhG,EAAE,QAAQ,GAAiF,KAAK,SAAtF,EAAE,SAAS,GAAsE,KAAK,UAA3E,EAAE,QAAQ,GAA4D,KAAK,SAAjE,EAAE,UAAU,GAAgD,KAAK,WAArD,EAAE,WAAW,GAAmC,KAAK,YAAxC,EAAE,WAAW,GAAsB,KAAK,YAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IACxH,IAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC3B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,KAAkB,WAAW,CAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EATD,MAAM,QAAA,EAAE,KAAK,QAAA,CASX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,UAAU,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,oBAAC,OAAO,eAAK,WAAW,GAAG,OAAO,CAAW,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,EACD,oBAAoB,CACrB,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAe,WAAW,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
|
-
import { ICalloutProps } from '@fluentui-react-native/callout';
|
|
2
|
+
import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
|
|
3
3
|
export declare const menuPopoverName = "MenuPopover";
|
|
4
|
+
export declare type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
|
|
4
5
|
export declare type MenuPopoverProps = ICalloutProps;
|
|
5
6
|
export interface MenuPopoverState {
|
|
6
7
|
props: ICalloutProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/
|
|
1
|
+
{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAE/E,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,oBAAY,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,CAAC;AAEtG,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,oBAAoB,yEAGhC,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { buildUseTokens } from '@fluentui-react-native/framework';
|
|
2
|
+
import { menuPopoverName } from './MenuPopover.types';
|
|
3
|
+
export var useMenuPopoverTokens = buildUseTokens(function (t) { return ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }); }, menuPopoverName);
|
|
4
|
+
//# sourceMappingURL=MenuPopoverTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuPopoverTokens.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAS,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAqB,MAAM,qBAAqB,CAAC;AAEzE,MAAM,CAAC,IAAM,oBAAoB,GAAG,cAAc,CAChD,UAAC,CAAQ,IAAK,OAAA,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,EAAnE,CAAmE,EACjF,eAAe,CAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,gBA8EjC,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { useMenuContext } from '../context/menuContext';
|
|
2
2
|
import { Platform } from 'react-native';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { hoverDelayDefault, isCloseOnHoverOutEnabled } from '../consts';
|
|
5
5
|
var accessibilityActions = Platform.OS === 'win32' ? [{ name: 'Expand' }, { name: 'Collapse' }] : [];
|
|
6
6
|
var expandedState = { expanded: true };
|
|
7
7
|
var collapsedState = { expanded: false };
|
|
8
8
|
export var useMenuTrigger = function () {
|
|
9
9
|
var context = useMenuContext();
|
|
10
|
-
var open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
|
|
10
|
+
var _a = context.hoverDelay, hoverDelay = _a === void 0 ? hoverDelayDefault : _a, open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
|
|
11
11
|
var accessibilityState = open ? expandedState : collapsedState;
|
|
12
12
|
var onAccessibilityAction = React.useCallback(function (e) {
|
|
13
13
|
if (Platform.OS === 'win32') {
|
|
@@ -28,18 +28,18 @@ export var useMenuTrigger = function () {
|
|
|
28
28
|
e.persist();
|
|
29
29
|
setTimeout(function () {
|
|
30
30
|
setOpen(e, true /* isOpen */);
|
|
31
|
-
},
|
|
31
|
+
}, hoverDelay);
|
|
32
32
|
}
|
|
33
|
-
}, [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
|
|
33
|
+
}, [hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
|
|
34
34
|
var onHoverOut = React.useCallback(function (e) {
|
|
35
35
|
if (openOnHover) {
|
|
36
36
|
e.persist();
|
|
37
37
|
var timer = setTimeout(function () {
|
|
38
38
|
setOpen(e, false /* isOpen */);
|
|
39
|
-
},
|
|
39
|
+
}, hoverDelay);
|
|
40
40
|
setTriggerHoverOutTimer(timer);
|
|
41
41
|
}
|
|
42
|
-
}, [openOnHover, setOpen, setTriggerHoverOutTimer]);
|
|
42
|
+
}, [hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer]);
|
|
43
43
|
var onClick = React.useCallback(function (e) {
|
|
44
44
|
setOpen(e, !open);
|
|
45
45
|
}, [open, setOpen]);
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
|
package/lib/consts.d.ts
CHANGED
package/lib/consts.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}
|
package/lib/consts.js
CHANGED
package/lib/consts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,IAAM,
|
|
1
|
+
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,MAAM,CAAC,IAAM,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC/C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,wBAAwB,GAAG,QAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}
|
|
@@ -4,8 +4,21 @@ import React from 'react';
|
|
|
4
4
|
import type { MenuListProps } from '../MenuList/MenuList.types';
|
|
5
5
|
export declare const menuName = "Menu";
|
|
6
6
|
export interface MenuProps extends MenuListProps {
|
|
7
|
+
/**
|
|
8
|
+
* Whether the popup is open on mount
|
|
9
|
+
*/
|
|
7
10
|
defaultOpen?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* How much delay to have between hover in and showing the menu, in ms.
|
|
13
|
+
*/
|
|
14
|
+
hoverDelay?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the popup is open
|
|
17
|
+
*/
|
|
8
18
|
open?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Call back when the component requests to change value
|
|
21
|
+
*/
|
|
9
22
|
onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
|
|
10
23
|
openOnHover?: boolean;
|
|
11
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,eAAO,MAAM,QAAQ,SAAS,CAAC;AAE/B,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAK9D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,0BAA0B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;IAC5C,OAAO,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1E,sBAAsB,EAAE,OAAO,CAAC;IAChC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;CAC9C"}
|
|
@@ -7,20 +7,31 @@ import { IFocusable, InteractionEvent, IPressableHooks, IWithPressableOptions }
|
|
|
7
7
|
import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
|
|
8
8
|
export declare const menuItemName = "MenuItem";
|
|
9
9
|
export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
10
|
+
/**
|
|
11
|
+
* Height and width in pixels of the space that is reserved to align the item's text with other items which have checkmarks
|
|
12
|
+
*/
|
|
10
13
|
checkmarkSize?: number;
|
|
14
|
+
/**
|
|
15
|
+
* Amount of space in pixels around the indicator that shows that an item has a submenu
|
|
16
|
+
*/
|
|
11
17
|
submenuIndicatorPadding?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Height and width in pixels of the indicator that shows that an item has a submenu
|
|
20
|
+
*/
|
|
12
21
|
submenuIndicatorSize?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Space between parts of the item control in pixels
|
|
24
|
+
*/
|
|
13
25
|
gap?: number;
|
|
26
|
+
/**
|
|
27
|
+
* States of the item control
|
|
28
|
+
*/
|
|
14
29
|
disabled?: MenuItemTokens;
|
|
15
30
|
focused?: MenuItemTokens;
|
|
16
31
|
hovered?: MenuItemTokens;
|
|
17
32
|
pressed?: MenuItemTokens;
|
|
18
33
|
}
|
|
19
34
|
export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
20
|
-
/**
|
|
21
|
-
* Applies disabled styles to menu item but remains focusable
|
|
22
|
-
*/
|
|
23
|
-
disabled?: boolean;
|
|
24
35
|
/**
|
|
25
36
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
26
37
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.types.d.ts","sourceRoot":"","sources":["../../src/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAChI,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItem.types.d.ts","sourceRoot":"","sources":["../../src/MenuItem/MenuItem.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAChI,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,YAAY,aAAa,CAAC;AAEvC,MAAM,WAAW,cAAe,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IAC3F;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtF;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,aAAc,SAAQ,eAAe,CAAC,aAAa,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACtG,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,QAAQ,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,SAAS,EAAE,iBAAiB,CAAC;CAC9B"}
|
|
@@ -7,11 +7,29 @@ import { IFocusable, IPressableHooks, IWithPressableOptions } from '@fluentui-re
|
|
|
7
7
|
import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens';
|
|
8
8
|
export declare const menuItemCheckboxName = "MenuItemCheckbox";
|
|
9
9
|
export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
10
|
+
/**
|
|
11
|
+
* Color of the checkmark icon
|
|
12
|
+
*/
|
|
10
13
|
checkmarkColor?: ColorValue;
|
|
14
|
+
/**
|
|
15
|
+
* Amount of space in pixels around the checkmark icon
|
|
16
|
+
*/
|
|
11
17
|
checkmarkPadding?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Height and width in pixels of the checkmark icon
|
|
20
|
+
*/
|
|
12
21
|
checkmarkSize?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Visibility of the checkmark icon from 0 to 1
|
|
24
|
+
*/
|
|
13
25
|
checkmarkVisibility?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Space between parts of the item control in pixels
|
|
28
|
+
*/
|
|
14
29
|
gap?: number;
|
|
30
|
+
/**
|
|
31
|
+
* States of the item control
|
|
32
|
+
*/
|
|
15
33
|
checked?: MenuItemCheckboxTokens;
|
|
16
34
|
disabled?: MenuItemCheckboxTokens;
|
|
17
35
|
focused?: MenuItemCheckboxTokens;
|
|
@@ -19,10 +37,6 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
|
|
|
19
37
|
pressed?: MenuItemCheckboxTokens;
|
|
20
38
|
}
|
|
21
39
|
export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
22
|
-
/**
|
|
23
|
-
* Applies disabled styles to menu item but remains focusable
|
|
24
|
-
*/
|
|
25
|
-
disabled?: boolean;
|
|
26
40
|
/**
|
|
27
41
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
28
42
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG,cAAc,CAAC,EAAE,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"MenuItemCheckbox.types.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckbox/MenuItemCheckbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAC9G,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAEtG,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AAEvD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY;IACnG;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,OAAO,CAAC,EAAE,sBAAsB,CAAC;CAClC;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAE3C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,qBAAsB,SAAQ,eAAe,CAAC,qBAAqB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;CAAG;AAE3H,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,qBAAqB,CAAC;IAC7B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,SAAS,EAAE,yBAAyB,CAAC;CACtC"}
|
|
@@ -4,12 +4,29 @@ import { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tok
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
export declare const menuListName = "MenuList";
|
|
6
6
|
export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
|
|
7
|
+
/**
|
|
8
|
+
* Space between items in pixels
|
|
9
|
+
*/
|
|
7
10
|
gap?: number;
|
|
8
11
|
}
|
|
9
12
|
export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
|
|
13
|
+
/**
|
|
14
|
+
* Array of all checked items
|
|
15
|
+
*/
|
|
10
16
|
checked?: string[];
|
|
17
|
+
/**
|
|
18
|
+
* Default items to be checked on mount
|
|
19
|
+
*/
|
|
11
20
|
defaultChecked?: string[];
|
|
21
|
+
/**
|
|
22
|
+
* States that menu items can contain selectable items and reserves space for item alignment
|
|
23
|
+
*/
|
|
12
24
|
hasCheckmarks?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Callback when checked items change
|
|
27
|
+
*
|
|
28
|
+
* @param checked Array of all currently checked values
|
|
29
|
+
*/
|
|
13
30
|
onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
|
|
14
31
|
}
|
|
15
32
|
export interface MenuListState extends Omit<MenuListProps, 'checked' | 'onCheckedChange'> {
|
|
@@ -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,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,EAAE,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,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,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,3 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { MenuPopoverTokens } from './MenuPopover.types';
|
|
2
|
+
export declare const MenuPopover: import("@fluentui-react-native/use-tokens").CustomizableComponent<import("@fluentui-react-native/callout").ICalloutProps, MenuPopoverTokens, import("@fluentui-react-native/framework").Theme>;
|
|
2
3
|
export default MenuPopover;
|
|
3
4
|
//# sourceMappingURL=MenuPopover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAK3F,eAAO,MAAM,WAAW,gMAyBvB,CAAC;AAGF,eAAe,WAAW,CAAC"}
|
|
@@ -7,16 +7,30 @@ var framework_1 = require("@fluentui-react-native/framework");
|
|
|
7
7
|
var callout_1 = require("@fluentui-react-native/callout");
|
|
8
8
|
var MenuPopover_types_1 = require("./MenuPopover.types");
|
|
9
9
|
var useMenuPopover_1 = require("./useMenuPopover");
|
|
10
|
+
var MenuPopoverTokens_1 = require("./MenuPopoverTokens");
|
|
10
11
|
var react_native_1 = require("react-native");
|
|
11
|
-
exports.MenuPopover = (0, framework_1.
|
|
12
|
+
exports.MenuPopover = (0, framework_1.compressible)(function (props, useTokens) {
|
|
13
|
+
var _a;
|
|
14
|
+
var directionalHint = props.directionalHint, gapSpace = props.gapSpace, maxHeight = props.maxHeight, maxWidth = props.maxWidth, minPadding = props.minPadding, borderWidth = props.borderWidth, borderColor = props.borderColor, backgroundColor = props.backgroundColor;
|
|
12
15
|
var state = (0, useMenuPopover_1.useMenuPopover)(props);
|
|
13
16
|
var theme = (0, framework_1.useFluentTheme)();
|
|
17
|
+
var _b = useTokens(theme), tokens = _b[0], cache = _b[1];
|
|
18
|
+
_a = (0, framework_1.patchTokens)(tokens, cache, {
|
|
19
|
+
directionalHint: directionalHint,
|
|
20
|
+
gapSpace: gapSpace,
|
|
21
|
+
maxHeight: maxHeight,
|
|
22
|
+
maxWidth: maxWidth,
|
|
23
|
+
minPadding: minPadding,
|
|
24
|
+
borderWidth: borderWidth,
|
|
25
|
+
borderColor: borderColor,
|
|
26
|
+
backgroundColor: backgroundColor,
|
|
27
|
+
}), tokens = _a[0], cache = _a[1];
|
|
14
28
|
return function (final, children) {
|
|
15
|
-
var mergedProps = (0, framework_1.mergeProps)(state.props, final);
|
|
29
|
+
var mergedProps = (0, framework_1.mergeProps)(tokens, state.props, final);
|
|
16
30
|
var content = react_1.default.createElement(react_native_1.View, state.innerView, children);
|
|
17
|
-
return
|
|
31
|
+
return react_1.default.createElement(callout_1.Callout, (0, tslib_1.__assign)({}, mergedProps), content);
|
|
18
32
|
};
|
|
19
|
-
});
|
|
33
|
+
}, MenuPopoverTokens_1.useMenuPopoverTokens);
|
|
20
34
|
exports.MenuPopover.displayName = MenuPopover_types_1.menuPopoverName;
|
|
21
35
|
exports.default = exports.MenuPopover;
|
|
22
36
|
//# sourceMappingURL=MenuPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,8DAAoH;AACpH,0DAAyD;AACzD,yDAA2F;AAC3F,mDAAkD;AAClD,yDAA2D;AAC3D,6CAAoC;AAEvB,QAAA,WAAW,GAAG,IAAA,wBAAY,EACrC,UAAC,KAAuB,EAAE,SAAuC;;IACvD,IAAA,eAAe,GAA2F,KAAK,gBAAhG,EAAE,QAAQ,GAAiF,KAAK,SAAtF,EAAE,SAAS,GAAsE,KAAK,UAA3E,EAAE,QAAQ,GAA4D,KAAK,SAAjE,EAAE,UAAU,GAAgD,KAAK,WAArD,EAAE,WAAW,GAAmC,KAAK,YAAxC,EAAE,WAAW,GAAsB,KAAK,YAA3B,EAAE,eAAe,GAAK,KAAK,gBAAV,CAAW;IACxH,IAAM,KAAK,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,IAAA,0BAAc,GAAE,CAAC;IAC3B,IAAA,KAAkB,SAAS,CAAC,KAAK,CAAC,EAAjC,MAAM,QAAA,EAAE,KAAK,QAAoB,CAAC;IAEvC,KAAkB,IAAA,uBAAW,EAAC,MAAM,EAAE,KAAK,EAAE;QAC3C,eAAe,iBAAA;QACf,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,QAAQ,UAAA;QACR,UAAU,YAAA;QACV,WAAW,aAAA;QACX,WAAW,aAAA;QACX,eAAe,iBAAA;KAChB,CAAC,EATD,MAAM,QAAA,EAAE,KAAK,QAAA,CASX;IAEH,OAAO,UAAC,KAAuB,EAAE,QAAyB;QACxD,IAAM,WAAW,GAAG,IAAA,sBAAU,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC3D,IAAM,OAAO,GAAG,eAAK,CAAC,aAAa,CAAC,mBAAI,EAAE,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACrE,OAAO,8BAAC,iBAAO,4BAAK,WAAW,GAAG,OAAO,CAAW,CAAC;IACvD,CAAC,CAAC;AACJ,CAAC,EACD,wCAAoB,CACrB,CAAC;AACF,mBAAW,CAAC,WAAW,GAAG,mCAAe,CAAC;AAE1C,kBAAe,mBAAW,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
|
-
import { ICalloutProps } from '@fluentui-react-native/callout';
|
|
2
|
+
import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
|
|
3
3
|
export declare const menuPopoverName = "MenuPopover";
|
|
4
|
+
export declare type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
|
|
4
5
|
export declare type MenuPopoverProps = ICalloutProps;
|
|
5
6
|
export interface MenuPopoverState {
|
|
6
7
|
props: ICalloutProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/
|
|
1
|
+
{"version":3,"file":"MenuPopover.types.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopover.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAE/E,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAI7C,oBAAY,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,WAAW,GAAG,kBAAkB,CAAC,CAAC;AAEtG,oBAAY,gBAAgB,GAAG,aAAa,CAAC;AAE7C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,UAAU,CAAC;CACvB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuPopoverTokens.d.ts","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,oBAAoB,yEAGhC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useMenuPopoverTokens = void 0;
|
|
4
|
+
var framework_1 = require("@fluentui-react-native/framework");
|
|
5
|
+
var MenuPopover_types_1 = require("./MenuPopover.types");
|
|
6
|
+
exports.useMenuPopoverTokens = (0, framework_1.buildUseTokens)(function (t) { return ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }); }, MenuPopover_types_1.menuPopoverName);
|
|
7
|
+
//# sourceMappingURL=MenuPopoverTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuPopoverTokens.js","sourceRoot":"","sources":["../../src/MenuPopover/MenuPopoverTokens.ts"],"names":[],"mappings":";;;AAAA,8DAAyE;AACzE,yDAAyE;AAE5D,QAAA,oBAAoB,GAAG,IAAA,0BAAc,EAChD,UAAC,CAAQ,IAAK,OAAA,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,EAAnE,CAAmE,EACjF,mCAAe,CAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,gBA8EjC,CAAC"}
|
|
@@ -11,7 +11,7 @@ var expandedState = { expanded: true };
|
|
|
11
11
|
var collapsedState = { expanded: false };
|
|
12
12
|
var useMenuTrigger = function () {
|
|
13
13
|
var context = (0, menuContext_1.useMenuContext)();
|
|
14
|
-
var open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
|
|
14
|
+
var _a = context.hoverDelay, hoverDelay = _a === void 0 ? consts_1.hoverDelayDefault : _a, open = context.open, openOnHover = context.openOnHover, popoverHoverOutTimer = context.popoverHoverOutTimer, setOpen = context.setOpen, setTriggerHoverOutTimer = context.setTriggerHoverOutTimer, triggerHoverOutTimer = context.triggerHoverOutTimer, triggerRef = context.triggerRef;
|
|
15
15
|
var accessibilityState = open ? expandedState : collapsedState;
|
|
16
16
|
var onAccessibilityAction = react_1.default.useCallback(function (e) {
|
|
17
17
|
if (react_native_1.Platform.OS === 'win32') {
|
|
@@ -32,18 +32,18 @@ var useMenuTrigger = function () {
|
|
|
32
32
|
e.persist();
|
|
33
33
|
setTimeout(function () {
|
|
34
34
|
setOpen(e, true /* isOpen */);
|
|
35
|
-
},
|
|
35
|
+
}, hoverDelay);
|
|
36
36
|
}
|
|
37
|
-
}, [openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
|
|
37
|
+
}, [hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer]);
|
|
38
38
|
var onHoverOut = react_1.default.useCallback(function (e) {
|
|
39
39
|
if (openOnHover) {
|
|
40
40
|
e.persist();
|
|
41
41
|
var timer = setTimeout(function () {
|
|
42
42
|
setOpen(e, false /* isOpen */);
|
|
43
|
-
},
|
|
43
|
+
}, hoverDelay);
|
|
44
44
|
setTriggerHoverOutTimer(timer);
|
|
45
45
|
}
|
|
46
|
-
}, [openOnHover, setOpen, setTriggerHoverOutTimer]);
|
|
46
|
+
}, [hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer]);
|
|
47
47
|
var onClick = react_1.default.useCallback(function (e) {
|
|
48
48
|
setOpen(e, !open);
|
|
49
49
|
}, [open, setOpen]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;AAAA,sDAAwD;AAGxD,6CAA2F;AAC3F,6DAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"useMenuTrigger.js","sourceRoot":"","sources":["../../src/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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"}
|
package/lib-commonjs/consts.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,SAAmC,CAAC"}
|
package/lib-commonjs/consts.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isCloseOnHoverOutEnabled = exports.
|
|
3
|
+
exports.isCloseOnHoverOutEnabled = exports.hoverDelayDefault = void 0;
|
|
4
4
|
var react_native_1 = require("react-native");
|
|
5
|
-
exports.
|
|
5
|
+
exports.hoverDelayDefault = react_native_1.Platform.select({
|
|
6
6
|
macos: 100,
|
|
7
7
|
default: 500, // win32
|
|
8
8
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAE3B,QAAA,
|
|
1
|
+
{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":";;;AAAA,6CAAwC;AAE3B,QAAA,iBAAiB,GAAG,uBAAQ,CAAC,MAAM,CAAC;IAC/C,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEU,QAAA,wBAAwB,GAAG,uBAAQ,CAAC,EAAE,KAAM,OAAe,CAAC"}
|
package/package.json
CHANGED
package/src/Menu/Menu.types.ts
CHANGED
|
@@ -5,9 +5,29 @@ import type { MenuListProps } from '../MenuList/MenuList.types';
|
|
|
5
5
|
export const menuName = 'Menu';
|
|
6
6
|
|
|
7
7
|
export interface MenuProps extends MenuListProps {
|
|
8
|
+
/**
|
|
9
|
+
* Whether the popup is open on mount
|
|
10
|
+
*/
|
|
8
11
|
defaultOpen?: boolean;
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* How much delay to have between hover in and showing the menu, in ms.
|
|
15
|
+
*/
|
|
16
|
+
hoverDelay?: number;
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Whether the popup is open
|
|
20
|
+
*/
|
|
9
21
|
open?: boolean;
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Call back when the component requests to change value
|
|
25
|
+
*/
|
|
10
26
|
onOpenChange?: (e: InteractionEvent, isOpen: boolean) => void;
|
|
27
|
+
|
|
28
|
+
/*
|
|
29
|
+
* Opens the menu on hovering over the trigger
|
|
30
|
+
*/
|
|
11
31
|
openOnHover?: boolean;
|
|
12
32
|
}
|
|
13
33
|
|
|
@@ -9,11 +9,29 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
|
|
|
9
9
|
export const menuItemName = 'MenuItem';
|
|
10
10
|
|
|
11
11
|
export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
12
|
+
/**
|
|
13
|
+
* Height and width in pixels of the space that is reserved to align the item's text with other items which have checkmarks
|
|
14
|
+
*/
|
|
12
15
|
checkmarkSize?: number;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Amount of space in pixels around the indicator that shows that an item has a submenu
|
|
19
|
+
*/
|
|
13
20
|
submenuIndicatorPadding?: number;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Height and width in pixels of the indicator that shows that an item has a submenu
|
|
24
|
+
*/
|
|
14
25
|
submenuIndicatorSize?: number;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Space between parts of the item control in pixels
|
|
29
|
+
*/
|
|
15
30
|
gap?: number;
|
|
16
31
|
|
|
32
|
+
/**
|
|
33
|
+
* States of the item control
|
|
34
|
+
*/
|
|
17
35
|
disabled?: MenuItemTokens;
|
|
18
36
|
focused?: MenuItemTokens;
|
|
19
37
|
hovered?: MenuItemTokens;
|
|
@@ -21,11 +39,6 @@ export interface MenuItemTokens extends LayoutTokens, FontTokens, IBorderTokens,
|
|
|
21
39
|
}
|
|
22
40
|
|
|
23
41
|
export interface MenuItemProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
24
|
-
/**
|
|
25
|
-
* Applies disabled styles to menu item but remains focusable
|
|
26
|
-
*/
|
|
27
|
-
disabled?: boolean;
|
|
28
|
-
|
|
29
42
|
/**
|
|
30
43
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
31
44
|
*/
|
|
@@ -9,12 +9,34 @@ import { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui
|
|
|
9
9
|
export const menuItemCheckboxName = 'MenuItemCheckbox';
|
|
10
10
|
|
|
11
11
|
export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorderTokens, IColorTokens {
|
|
12
|
+
/**
|
|
13
|
+
* Color of the checkmark icon
|
|
14
|
+
*/
|
|
12
15
|
checkmarkColor?: ColorValue;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Amount of space in pixels around the checkmark icon
|
|
19
|
+
*/
|
|
13
20
|
checkmarkPadding?: number;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Height and width in pixels of the checkmark icon
|
|
24
|
+
*/
|
|
14
25
|
checkmarkSize?: number;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Visibility of the checkmark icon from 0 to 1
|
|
29
|
+
*/
|
|
15
30
|
checkmarkVisibility?: number;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Space between parts of the item control in pixels
|
|
34
|
+
*/
|
|
16
35
|
gap?: number;
|
|
17
36
|
|
|
37
|
+
/**
|
|
38
|
+
* States of the item control
|
|
39
|
+
*/
|
|
18
40
|
checked?: MenuItemCheckboxTokens;
|
|
19
41
|
disabled?: MenuItemCheckboxTokens;
|
|
20
42
|
focused?: MenuItemCheckboxTokens;
|
|
@@ -23,11 +45,6 @@ export interface MenuItemCheckboxTokens extends LayoutTokens, FontTokens, IBorde
|
|
|
23
45
|
}
|
|
24
46
|
|
|
25
47
|
export interface MenuItemCheckboxProps extends Omit<IWithPressableOptions<ViewProps>, 'onPress'> {
|
|
26
|
-
/**
|
|
27
|
-
* Applies disabled styles to menu item but remains focusable
|
|
28
|
-
*/
|
|
29
|
-
disabled?: boolean;
|
|
30
|
-
|
|
31
48
|
/**
|
|
32
49
|
* A RefObject to access the IButton interface. Use this to access the public methods and properties of the component.
|
|
33
50
|
*/
|
|
@@ -6,13 +6,33 @@ import React from 'react';
|
|
|
6
6
|
export const menuListName = 'MenuList';
|
|
7
7
|
|
|
8
8
|
export interface MenuListTokens extends LayoutTokens, IBackgroundColorTokens {
|
|
9
|
+
/**
|
|
10
|
+
* Space between items in pixels
|
|
11
|
+
*/
|
|
9
12
|
gap?: number;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
export interface MenuListProps extends Omit<IViewProps, 'onPress'> {
|
|
16
|
+
/**
|
|
17
|
+
* Array of all checked items
|
|
18
|
+
*/
|
|
13
19
|
checked?: string[];
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Default items to be checked on mount
|
|
23
|
+
*/
|
|
14
24
|
defaultChecked?: string[];
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* States that menu items can contain selectable items and reserves space for item alignment
|
|
28
|
+
*/
|
|
15
29
|
hasCheckmarks?: boolean;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Callback when checked items change
|
|
33
|
+
*
|
|
34
|
+
* @param checked Array of all currently checked values
|
|
35
|
+
*/
|
|
16
36
|
onCheckedChange?: (e: InteractionEvent, checked: string[]) => void;
|
|
17
37
|
}
|
|
18
38
|
|
|
@@ -1,24 +1,37 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { mergeProps,
|
|
2
|
+
import { compressible, mergeProps, patchTokens, useFluentTheme, UseTokens } from '@fluentui-react-native/framework';
|
|
3
3
|
import { Callout } from '@fluentui-react-native/callout';
|
|
4
|
-
import { menuPopoverName, MenuPopoverProps } from './MenuPopover.types';
|
|
4
|
+
import { menuPopoverName, MenuPopoverProps, MenuPopoverTokens } from './MenuPopover.types';
|
|
5
5
|
import { useMenuPopover } from './useMenuPopover';
|
|
6
|
+
import { useMenuPopoverTokens } from './MenuPopoverTokens';
|
|
6
7
|
import { View } from 'react-native';
|
|
7
8
|
|
|
8
|
-
export const MenuPopover =
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
export const MenuPopover = compressible<MenuPopoverProps, MenuPopoverTokens>(
|
|
10
|
+
(props: MenuPopoverProps, useTokens: UseTokens<MenuPopoverTokens>) => {
|
|
11
|
+
const { directionalHint, gapSpace, maxHeight, maxWidth, minPadding, borderWidth, borderColor, backgroundColor } = props;
|
|
12
|
+
const state = useMenuPopover(props);
|
|
13
|
+
const theme = useFluentTheme();
|
|
14
|
+
let [tokens, cache] = useTokens(theme);
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
});
|
|
16
|
+
[tokens, cache] = patchTokens(tokens, cache, {
|
|
17
|
+
directionalHint,
|
|
18
|
+
gapSpace,
|
|
19
|
+
maxHeight,
|
|
20
|
+
maxWidth,
|
|
21
|
+
minPadding,
|
|
22
|
+
borderWidth,
|
|
23
|
+
borderColor,
|
|
24
|
+
backgroundColor,
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
return (final: MenuPopoverProps, children: React.ReactNode) => {
|
|
28
|
+
const mergedProps = mergeProps(tokens, state.props, final);
|
|
29
|
+
const content = React.createElement(View, state.innerView, children);
|
|
30
|
+
return <Callout {...mergedProps}>{content}</Callout>;
|
|
31
|
+
};
|
|
32
|
+
},
|
|
33
|
+
useMenuPopoverTokens,
|
|
34
|
+
);
|
|
22
35
|
MenuPopover.displayName = menuPopoverName;
|
|
23
36
|
|
|
24
37
|
export default MenuPopover;
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import { IViewProps } from '@fluentui-react-native/adapters';
|
|
2
|
-
import { ICalloutProps } from '@fluentui-react-native/callout';
|
|
2
|
+
import { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout';
|
|
3
3
|
|
|
4
4
|
export const menuPopoverName = 'MenuPopover';
|
|
5
5
|
|
|
6
|
+
// Support for anchorRect and beakWidth will come at a later time.
|
|
7
|
+
// Omitting dismissBehaviors as it doesn't seem to make sense as a token
|
|
8
|
+
export type MenuPopoverTokens = Omit<ICalloutTokens, 'anchorRect' | 'beakWidth' | 'dismissBehaviors'>;
|
|
9
|
+
|
|
6
10
|
export type MenuPopoverProps = ICalloutProps;
|
|
7
11
|
|
|
8
12
|
export interface MenuPopoverState {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { buildUseTokens, Theme } from '@fluentui-react-native/framework';
|
|
2
|
+
import { menuPopoverName, MenuPopoverTokens } from './MenuPopover.types';
|
|
3
|
+
|
|
4
|
+
export const useMenuPopoverTokens = buildUseTokens<MenuPopoverTokens>(
|
|
5
|
+
(t: Theme) => ({ borderWidth: 1, borderColor: t.colors.neutralStrokeAccessible }),
|
|
6
|
+
menuPopoverName,
|
|
7
|
+
);
|
|
@@ -3,7 +3,7 @@ import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
|
|
|
3
3
|
import { MenuTriggerState } from './MenuTrigger.types';
|
|
4
4
|
import { AccessibilityActionEvent, AccessibilityActionName, Platform } from 'react-native';
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import {
|
|
6
|
+
import { hoverDelayDefault, isCloseOnHoverOutEnabled } from '../consts';
|
|
7
7
|
|
|
8
8
|
const accessibilityActions =
|
|
9
9
|
Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : [];
|
|
@@ -12,7 +12,16 @@ const collapsedState = { expanded: false };
|
|
|
12
12
|
|
|
13
13
|
export const useMenuTrigger = (): MenuTriggerState => {
|
|
14
14
|
const context = useMenuContext();
|
|
15
|
-
const {
|
|
15
|
+
const {
|
|
16
|
+
hoverDelay = hoverDelayDefault,
|
|
17
|
+
open,
|
|
18
|
+
openOnHover,
|
|
19
|
+
popoverHoverOutTimer,
|
|
20
|
+
setOpen,
|
|
21
|
+
setTriggerHoverOutTimer,
|
|
22
|
+
triggerHoverOutTimer,
|
|
23
|
+
triggerRef,
|
|
24
|
+
} = context;
|
|
16
25
|
|
|
17
26
|
const accessibilityState = open ? expandedState : collapsedState;
|
|
18
27
|
|
|
@@ -41,10 +50,10 @@ export const useMenuTrigger = (): MenuTriggerState => {
|
|
|
41
50
|
e.persist();
|
|
42
51
|
setTimeout(() => {
|
|
43
52
|
setOpen(e, true /* isOpen */);
|
|
44
|
-
},
|
|
53
|
+
}, hoverDelay);
|
|
45
54
|
}
|
|
46
55
|
},
|
|
47
|
-
[openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
|
|
56
|
+
[hoverDelay, openOnHover, setOpen, triggerHoverOutTimer, popoverHoverOutTimer],
|
|
48
57
|
);
|
|
49
58
|
|
|
50
59
|
const onHoverOut = React.useCallback(
|
|
@@ -53,11 +62,11 @@ export const useMenuTrigger = (): MenuTriggerState => {
|
|
|
53
62
|
e.persist();
|
|
54
63
|
const timer = setTimeout(() => {
|
|
55
64
|
setOpen(e, false /* isOpen */);
|
|
56
|
-
},
|
|
65
|
+
}, hoverDelay);
|
|
57
66
|
setTriggerHoverOutTimer(timer);
|
|
58
67
|
}
|
|
59
68
|
},
|
|
60
|
-
[openOnHover, setOpen, setTriggerHoverOutTimer],
|
|
69
|
+
[hoverDelay, openOnHover, setOpen, setTriggerHoverOutTimer],
|
|
61
70
|
);
|
|
62
71
|
|
|
63
72
|
const onClick = React.useCallback(
|