@fluentui-react-native/menu 1.2.2 → 1.2.4
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 +31 -1
- package/CHANGELOG.md +18 -2
- package/lib/MenuPopover/useMenuPopover.d.ts +1 -1
- package/lib/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib/MenuPopover/useMenuPopover.js +30 -1
- package/lib/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.d.ts +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.js +30 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.js.map +1 -1
- package/package.json +2 -2
- package/src/MenuPopover/useMenuPopover.ts +42 -1
- package/src/__tests__/__snapshots__/Menu.test.tsx.snap +14 -0
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,37 @@
|
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 28 Dec 2022 17:45:17 GMT",
|
|
6
|
+
"tag": "@fluentui-react-native/menu_v1.2.4",
|
|
7
|
+
"version": "1.2.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui-react-native/menu",
|
|
13
|
+
"comment": "Bump @fluentui-react-native/button to v0.32.11",
|
|
14
|
+
"commit": "bae1bb6e4a7c37bdec33890c72e75f041422bee1"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 28 Dec 2022 06:51:05 GMT",
|
|
21
|
+
"tag": "@fluentui-react-native/menu_v1.2.3",
|
|
22
|
+
"version": "1.2.3",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "ruaraki@microsoft.com",
|
|
27
|
+
"package": "@fluentui-react-native/menu",
|
|
28
|
+
"commit": "b1d5abf56e13657d0f946f43bf37326e06b0fb62",
|
|
29
|
+
"comment": "Override key handling"
|
|
30
|
+
}
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"date": "Tue, 27 Dec 2022 22:21:15 GMT",
|
|
6
36
|
"tag": "@fluentui-react-native/menu_v1.2.2",
|
|
7
37
|
"version": "1.2.2",
|
|
8
38
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui-react-native/menu
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 28 Dec 2022 17:45:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 1.2.4
|
|
8
|
+
|
|
9
|
+
Wed, 28 Dec 2022 17:45:17 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @fluentui-react-native/button to v0.32.11
|
|
14
|
+
|
|
15
|
+
## 1.2.3
|
|
16
|
+
|
|
17
|
+
Wed, 28 Dec 2022 06:51:05 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- Override key handling (ruaraki@microsoft.com)
|
|
22
|
+
|
|
7
23
|
## 1.2.2
|
|
8
24
|
|
|
9
|
-
Tue, 27 Dec 2022 22:
|
|
25
|
+
Tue, 27 Dec 2022 22:21:15 GMT
|
|
10
26
|
|
|
11
27
|
### Patches
|
|
12
28
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
|
|
2
|
-
export declare const useMenuPopover: (
|
|
2
|
+
export declare const useMenuPopover: (props: MenuPopoverProps) => MenuPopoverState;
|
|
3
3
|
//# sourceMappingURL=useMenuPopover.d.ts.map
|
|
@@ -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;AAIzE,eAAO,MAAM,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;AAIzE,eAAO,MAAM,cAAc,UAAW,gBAAgB,KAAG,gBA+GxD,CAAC"}
|
|
@@ -2,9 +2,10 @@ import React from 'react';
|
|
|
2
2
|
import { I18nManager, Platform } from 'react-native';
|
|
3
3
|
import { useMenuContext } from '../context/menuContext';
|
|
4
4
|
var controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'];
|
|
5
|
-
export var useMenuPopover = function (
|
|
5
|
+
export var useMenuPopover = function (props) {
|
|
6
6
|
var context = useMenuContext();
|
|
7
7
|
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, shouldFocusOnContainer = context.shouldFocusOnContainer, triggerHoverOutTimer = context.triggerHoverOutTimer;
|
|
8
|
+
var onKeyDownProp = props.onKeyDown, onKeyUpProp = props.onKeyUp;
|
|
8
9
|
var onDismiss = React.useCallback(function () { return setOpen(undefined, false /* isOpen */); }, [setOpen]);
|
|
9
10
|
var dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
|
|
10
11
|
var directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
|
|
@@ -27,6 +28,32 @@ export var useMenuPopover = function (_props) {
|
|
|
27
28
|
}, 500);
|
|
28
29
|
setPopoverHoverOutTimer(timer);
|
|
29
30
|
}, [openOnHover, setOpen, setPopoverHoverOutTimer]);
|
|
31
|
+
var onKeyDown = React.useCallback(function (e) {
|
|
32
|
+
onKeyDownProp && onKeyDownProp(e);
|
|
33
|
+
// Mark key events that move selection as handled.
|
|
34
|
+
// These key events are handled on the native side.
|
|
35
|
+
switch (e.nativeEvent.key) {
|
|
36
|
+
case 'ArrowUp':
|
|
37
|
+
case 'ArrowDown':
|
|
38
|
+
case 'Tab':
|
|
39
|
+
case 'Home':
|
|
40
|
+
case 'End':
|
|
41
|
+
e.stopPropagation();
|
|
42
|
+
}
|
|
43
|
+
}, [onKeyDownProp]);
|
|
44
|
+
var onKeyUp = React.useCallback(function (e) {
|
|
45
|
+
onKeyUpProp && onKeyUpProp(e);
|
|
46
|
+
// Mark key events that move selection as handled.
|
|
47
|
+
// These key events are handled on the native side.
|
|
48
|
+
switch (e.nativeEvent.key) {
|
|
49
|
+
case 'ArrowUp':
|
|
50
|
+
case 'ArrowDown':
|
|
51
|
+
case 'Tab':
|
|
52
|
+
case 'Home':
|
|
53
|
+
case 'End':
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
}
|
|
56
|
+
}, [onKeyUpProp]);
|
|
30
57
|
var _a = React.useState(shouldFocusOnContainer), canFocusOnPopover = _a[0], setCanFocusOnPopover = _a[1];
|
|
31
58
|
var onBlur = React.useCallback(function () {
|
|
32
59
|
setCanFocusOnPopover(false);
|
|
@@ -49,6 +76,8 @@ export var useMenuPopover = function (_props) {
|
|
|
49
76
|
innerView: {
|
|
50
77
|
onMouseEnter: onMouseEnter,
|
|
51
78
|
onMouseLeave: onMouseLeave,
|
|
79
|
+
onKeyDown: onKeyDown,
|
|
80
|
+
onKeyUp: onKeyUp,
|
|
52
81
|
accessible: shouldFocusOnContainer,
|
|
53
82
|
focusable: canFocusOnPopover,
|
|
54
83
|
onBlur: onBlur,
|
|
@@ -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;AAGxD,IAAM,0BAA0B,GAAG,CAAC,yBAAyB,EAAE,8BAA8B,CAAuB,CAAC;AAErH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
|
|
2
|
-
export declare const useMenuPopover: (
|
|
2
|
+
export declare const useMenuPopover: (props: MenuPopoverProps) => MenuPopoverState;
|
|
3
3
|
//# sourceMappingURL=useMenuPopover.d.ts.map
|
|
@@ -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;AAIzE,eAAO,MAAM,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;AAIzE,eAAO,MAAM,cAAc,UAAW,gBAAgB,KAAG,gBA+GxD,CAAC"}
|
|
@@ -6,9 +6,10 @@ var react_1 = (0, tslib_1.__importDefault)(require("react"));
|
|
|
6
6
|
var react_native_1 = require("react-native");
|
|
7
7
|
var menuContext_1 = require("../context/menuContext");
|
|
8
8
|
var controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'];
|
|
9
|
-
var useMenuPopover = function (
|
|
9
|
+
var useMenuPopover = function (props) {
|
|
10
10
|
var context = (0, menuContext_1.useMenuContext)();
|
|
11
11
|
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, shouldFocusOnContainer = context.shouldFocusOnContainer, triggerHoverOutTimer = context.triggerHoverOutTimer;
|
|
12
|
+
var onKeyDownProp = props.onKeyDown, onKeyUpProp = props.onKeyUp;
|
|
12
13
|
var onDismiss = react_1.default.useCallback(function () { return setOpen(undefined, false /* isOpen */); }, [setOpen]);
|
|
13
14
|
var dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
|
|
14
15
|
var directionalHint = getDirectionalHint(isSubmenu, react_native_1.I18nManager.isRTL);
|
|
@@ -31,6 +32,32 @@ var useMenuPopover = function (_props) {
|
|
|
31
32
|
}, 500);
|
|
32
33
|
setPopoverHoverOutTimer(timer);
|
|
33
34
|
}, [openOnHover, setOpen, setPopoverHoverOutTimer]);
|
|
35
|
+
var onKeyDown = react_1.default.useCallback(function (e) {
|
|
36
|
+
onKeyDownProp && onKeyDownProp(e);
|
|
37
|
+
// Mark key events that move selection as handled.
|
|
38
|
+
// These key events are handled on the native side.
|
|
39
|
+
switch (e.nativeEvent.key) {
|
|
40
|
+
case 'ArrowUp':
|
|
41
|
+
case 'ArrowDown':
|
|
42
|
+
case 'Tab':
|
|
43
|
+
case 'Home':
|
|
44
|
+
case 'End':
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
}
|
|
47
|
+
}, [onKeyDownProp]);
|
|
48
|
+
var onKeyUp = react_1.default.useCallback(function (e) {
|
|
49
|
+
onKeyUpProp && onKeyUpProp(e);
|
|
50
|
+
// Mark key events that move selection as handled.
|
|
51
|
+
// These key events are handled on the native side.
|
|
52
|
+
switch (e.nativeEvent.key) {
|
|
53
|
+
case 'ArrowUp':
|
|
54
|
+
case 'ArrowDown':
|
|
55
|
+
case 'Tab':
|
|
56
|
+
case 'Home':
|
|
57
|
+
case 'End':
|
|
58
|
+
e.stopPropagation();
|
|
59
|
+
}
|
|
60
|
+
}, [onKeyUpProp]);
|
|
34
61
|
var _a = react_1.default.useState(shouldFocusOnContainer), canFocusOnPopover = _a[0], setCanFocusOnPopover = _a[1];
|
|
35
62
|
var onBlur = react_1.default.useCallback(function () {
|
|
36
63
|
setCanFocusOnPopover(false);
|
|
@@ -53,6 +80,8 @@ var useMenuPopover = function (_props) {
|
|
|
53
80
|
innerView: {
|
|
54
81
|
onMouseEnter: onMouseEnter,
|
|
55
82
|
onMouseLeave: onMouseLeave,
|
|
83
|
+
onKeyDown: onKeyDown,
|
|
84
|
+
onKeyUp: onKeyUp,
|
|
56
85
|
accessible: shouldFocusOnContainer,
|
|
57
86
|
focusable: canFocusOnPopover,
|
|
58
87
|
onBlur: onBlur,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":";;;;AAAA,6DAA0B;AAC1B,6CAAqD;AAErD,sDAAwD;AAGxD,IAAM,0BAA0B,GAAG,CAAC,yBAAyB,EAAE,8BAA8B,CAAuB,CAAC;AAE9G,IAAM,cAAc,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"useMenuPopover.js","sourceRoot":"","sources":["../../src/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui-react-native/menu",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"description": "A cross-platform Menu component using the Fluent Design System",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"tslib": "^2.3.1"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@fluentui-react-native/button": ">=0.32.
|
|
38
|
+
"@fluentui-react-native/button": ">=0.32.11 <1.0.0",
|
|
39
39
|
"@fluentui-react-native/eslint-config-rules": "^0.1.1",
|
|
40
40
|
"@fluentui-react-native/scripts": "^0.1.1",
|
|
41
41
|
"@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
|
|
@@ -6,7 +6,7 @@ import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
|
|
|
6
6
|
|
|
7
7
|
const controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[];
|
|
8
8
|
|
|
9
|
-
export const useMenuPopover = (
|
|
9
|
+
export const useMenuPopover = (props: MenuPopoverProps): MenuPopoverState => {
|
|
10
10
|
const context = useMenuContext();
|
|
11
11
|
const {
|
|
12
12
|
setOpen,
|
|
@@ -21,6 +21,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
|
|
|
21
21
|
triggerHoverOutTimer,
|
|
22
22
|
} = context;
|
|
23
23
|
|
|
24
|
+
const { onKeyDown: onKeyDownProp, onKeyUp: onKeyUpProp } = props;
|
|
25
|
+
|
|
24
26
|
const onDismiss = React.useCallback(() => setOpen(undefined, false /* isOpen */), [setOpen]);
|
|
25
27
|
const dismissBehaviors = isControlled ? controlledDismissBehaviors : undefined;
|
|
26
28
|
const directionalHint = getDirectionalHint(isSubmenu, I18nManager.isRTL);
|
|
@@ -36,6 +38,7 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
|
|
|
36
38
|
clearTimeout(popoverHoverOutTimer);
|
|
37
39
|
clearTimeout(parentPopoverHoverOutTimer);
|
|
38
40
|
}, [parentPopoverHoverOutTimer, popoverHoverOutTimer, triggerHoverOutTimer]);
|
|
41
|
+
|
|
39
42
|
const onMouseLeave = React.useCallback(() => {
|
|
40
43
|
if (!openOnHover) {
|
|
41
44
|
return;
|
|
@@ -47,6 +50,42 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
|
|
|
47
50
|
setPopoverHoverOutTimer(timer);
|
|
48
51
|
}, [openOnHover, setOpen, setPopoverHoverOutTimer]);
|
|
49
52
|
|
|
53
|
+
const onKeyDown = React.useCallback(
|
|
54
|
+
(e) => {
|
|
55
|
+
onKeyDownProp && onKeyDownProp(e);
|
|
56
|
+
|
|
57
|
+
// Mark key events that move selection as handled.
|
|
58
|
+
// These key events are handled on the native side.
|
|
59
|
+
switch (e.nativeEvent.key) {
|
|
60
|
+
case 'ArrowUp':
|
|
61
|
+
case 'ArrowDown':
|
|
62
|
+
case 'Tab':
|
|
63
|
+
case 'Home':
|
|
64
|
+
case 'End':
|
|
65
|
+
e.stopPropagation();
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
[onKeyDownProp],
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
const onKeyUp = React.useCallback(
|
|
72
|
+
(e) => {
|
|
73
|
+
onKeyUpProp && onKeyUpProp(e);
|
|
74
|
+
|
|
75
|
+
// Mark key events that move selection as handled.
|
|
76
|
+
// These key events are handled on the native side.
|
|
77
|
+
switch (e.nativeEvent.key) {
|
|
78
|
+
case 'ArrowUp':
|
|
79
|
+
case 'ArrowDown':
|
|
80
|
+
case 'Tab':
|
|
81
|
+
case 'Home':
|
|
82
|
+
case 'End':
|
|
83
|
+
e.stopPropagation();
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
[onKeyUpProp],
|
|
87
|
+
);
|
|
88
|
+
|
|
50
89
|
const [canFocusOnPopover, setCanFocusOnPopover] = React.useState<boolean>(shouldFocusOnContainer);
|
|
51
90
|
const onBlur = React.useCallback(() => {
|
|
52
91
|
setCanFocusOnPopover(false);
|
|
@@ -71,6 +110,8 @@ export const useMenuPopover = (_props: MenuPopoverProps): MenuPopoverState => {
|
|
|
71
110
|
innerView: {
|
|
72
111
|
onMouseEnter,
|
|
73
112
|
onMouseLeave,
|
|
113
|
+
onKeyDown,
|
|
114
|
+
onKeyUp,
|
|
74
115
|
accessible: shouldFocusOnContainer,
|
|
75
116
|
focusable: canFocusOnPopover,
|
|
76
117
|
onBlur,
|
|
@@ -196,6 +196,8 @@ Array [
|
|
|
196
196
|
accessible={false}
|
|
197
197
|
focusable={false}
|
|
198
198
|
onBlur={[Function]}
|
|
199
|
+
onKeyDown={[Function]}
|
|
200
|
+
onKeyUp={[Function]}
|
|
199
201
|
onMouseEnter={[Function]}
|
|
200
202
|
onMouseLeave={[Function]}
|
|
201
203
|
>
|
|
@@ -465,6 +467,8 @@ Array [
|
|
|
465
467
|
accessible={false}
|
|
466
468
|
focusable={false}
|
|
467
469
|
onBlur={[Function]}
|
|
470
|
+
onKeyDown={[Function]}
|
|
471
|
+
onKeyUp={[Function]}
|
|
468
472
|
onMouseEnter={[Function]}
|
|
469
473
|
onMouseLeave={[Function]}
|
|
470
474
|
>
|
|
@@ -666,6 +670,8 @@ Array [
|
|
|
666
670
|
accessible={false}
|
|
667
671
|
focusable={false}
|
|
668
672
|
onBlur={[Function]}
|
|
673
|
+
onKeyDown={[Function]}
|
|
674
|
+
onKeyUp={[Function]}
|
|
669
675
|
onMouseEnter={[Function]}
|
|
670
676
|
onMouseLeave={[Function]}
|
|
671
677
|
>
|
|
@@ -1067,6 +1073,8 @@ Array [
|
|
|
1067
1073
|
accessible={false}
|
|
1068
1074
|
focusable={false}
|
|
1069
1075
|
onBlur={[Function]}
|
|
1076
|
+
onKeyDown={[Function]}
|
|
1077
|
+
onKeyUp={[Function]}
|
|
1070
1078
|
onMouseEnter={[Function]}
|
|
1071
1079
|
onMouseLeave={[Function]}
|
|
1072
1080
|
>
|
|
@@ -1468,6 +1476,8 @@ Array [
|
|
|
1468
1476
|
accessible={false}
|
|
1469
1477
|
focusable={false}
|
|
1470
1478
|
onBlur={[Function]}
|
|
1479
|
+
onKeyDown={[Function]}
|
|
1480
|
+
onKeyUp={[Function]}
|
|
1471
1481
|
onMouseEnter={[Function]}
|
|
1472
1482
|
onMouseLeave={[Function]}
|
|
1473
1483
|
>
|
|
@@ -1869,6 +1879,8 @@ Array [
|
|
|
1869
1879
|
accessible={false}
|
|
1870
1880
|
focusable={false}
|
|
1871
1881
|
onBlur={[Function]}
|
|
1882
|
+
onKeyDown={[Function]}
|
|
1883
|
+
onKeyUp={[Function]}
|
|
1872
1884
|
onMouseEnter={[Function]}
|
|
1873
1885
|
onMouseLeave={[Function]}
|
|
1874
1886
|
>
|
|
@@ -2258,6 +2270,8 @@ Array [
|
|
|
2258
2270
|
accessible={false}
|
|
2259
2271
|
focusable={false}
|
|
2260
2272
|
onBlur={[Function]}
|
|
2273
|
+
onKeyDown={[Function]}
|
|
2274
|
+
onKeyUp={[Function]}
|
|
2261
2275
|
onMouseEnter={[Function]}
|
|
2262
2276
|
onMouseLeave={[Function]}
|
|
2263
2277
|
>
|