@instructure/ui-menu 8.13.1-snapshot.2 → 8.13.1-snapshot.27
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/es/Menu/MenuItem/index.js +28 -21
- package/es/Menu/MenuItem/props.js +0 -23
- package/es/Menu/MenuItemGroup/index.js +17 -13
- package/es/Menu/MenuItemGroup/props.js +1 -30
- package/es/Menu/MenuItemSeparator/index.js +6 -2
- package/es/Menu/index.js +56 -52
- package/es/Menu/props.js +1 -113
- package/es/MenuContext.js +3 -3
- package/lib/Menu/MenuItem/index.js +28 -21
- package/lib/Menu/MenuItem/props.js +0 -23
- package/lib/Menu/MenuItemGroup/index.js +17 -13
- package/lib/Menu/MenuItemGroup/props.js +1 -30
- package/lib/Menu/MenuItemSeparator/index.js +6 -2
- package/lib/Menu/index.js +58 -52
- package/lib/Menu/props.js +1 -113
- package/lib/MenuContext.js +2 -2
- package/package.json +21 -21
- package/src/Menu/MenuItem/index.tsx +24 -34
- package/src/Menu/MenuItem/props.ts +36 -27
- package/src/Menu/MenuItemGroup/index.tsx +28 -48
- package/src/Menu/MenuItemGroup/props.ts +37 -30
- package/src/Menu/MenuItemSeparator/index.tsx +2 -4
- package/src/Menu/index.tsx +79 -133
- package/src/Menu/props.ts +76 -84
- package/src/MenuContext.ts +3 -2
- package/tsconfig.build.json +25 -2
- package/tsconfig.build.tsbuildinfo +1 -0
- package/types/Menu/MenuItem/MenuItemLocator.d.ts +52 -52
- package/types/Menu/MenuItem/index.d.ts +24 -23
- package/types/Menu/MenuItem/index.d.ts.map +1 -1
- package/types/Menu/MenuItem/props.d.ts +30 -7
- package/types/Menu/MenuItem/props.d.ts.map +1 -1
- package/types/Menu/MenuItemGroup/MenuItemGroupLocator.d.ts +182 -182
- package/types/Menu/MenuItemGroup/index.d.ts +22 -22
- package/types/Menu/MenuItemGroup/index.d.ts.map +1 -1
- package/types/Menu/MenuItemGroup/props.d.ts +33 -8
- package/types/Menu/MenuItemGroup/props.d.ts.map +1 -1
- package/types/Menu/MenuItemSeparator/index.d.ts.map +1 -1
- package/types/Menu/MenuLocator.d.ts +576 -576
- package/types/Menu/index.d.ts +57 -67
- package/types/Menu/index.d.ts.map +1 -1
- package/types/Menu/props.d.ts +94 -16
- package/types/Menu/props.d.ts.map +1 -1
- package/types/MenuContext.d.ts +3 -2
- package/types/MenuContext.d.ts.map +1 -1
|
@@ -44,10 +44,12 @@ import { propTypes, allowedProps } from './props';
|
|
|
44
44
|
parent: Menu
|
|
45
45
|
id: Menu.Item
|
|
46
46
|
---
|
|
47
|
+
@tsProps
|
|
47
48
|
**/
|
|
48
49
|
let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItem extends Component {
|
|
49
50
|
constructor(props) {
|
|
50
|
-
super();
|
|
51
|
+
super(props);
|
|
52
|
+
this.labelId = void 0;
|
|
51
53
|
this.ref = null;
|
|
52
54
|
|
|
53
55
|
this.handleRef = el => {
|
|
@@ -93,7 +95,8 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
93
95
|
|
|
94
96
|
if (enterKey) {
|
|
95
97
|
// handle space key on keyUp for FF
|
|
96
|
-
findDOMNode(this.ref)
|
|
98
|
+
const refNode = findDOMNode(this.ref);
|
|
99
|
+
refNode.click();
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
};
|
|
@@ -107,7 +110,8 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
107
110
|
e.stopPropagation();
|
|
108
111
|
|
|
109
112
|
if (spaceKey) {
|
|
110
|
-
findDOMNode(this.ref)
|
|
113
|
+
const refNode = findDOMNode(this.ref);
|
|
114
|
+
refNode.click();
|
|
111
115
|
}
|
|
112
116
|
}
|
|
113
117
|
};
|
|
@@ -122,7 +126,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
122
126
|
|
|
123
127
|
if (typeof props.selected === 'undefined') {
|
|
124
128
|
this.state = {
|
|
125
|
-
selected: props.defaultSelected
|
|
129
|
+
selected: !!props.defaultSelected
|
|
126
130
|
};
|
|
127
131
|
}
|
|
128
132
|
|
|
@@ -134,7 +138,9 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
134
138
|
}
|
|
135
139
|
|
|
136
140
|
componentDidMount() {
|
|
137
|
-
|
|
141
|
+
var _this$props$makeStyle, _this$props2;
|
|
142
|
+
|
|
143
|
+
(_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
|
|
138
144
|
const context = this.context;
|
|
139
145
|
|
|
140
146
|
if (context && context.registerMenuItem) {
|
|
@@ -143,7 +149,9 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
componentDidUpdate() {
|
|
146
|
-
|
|
152
|
+
var _this$props$makeStyle2, _this$props3;
|
|
153
|
+
|
|
154
|
+
(_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
|
|
147
155
|
}
|
|
148
156
|
|
|
149
157
|
componentWillUnmount() {
|
|
@@ -183,15 +191,16 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
183
191
|
}
|
|
184
192
|
|
|
185
193
|
focus() {
|
|
186
|
-
findDOMNode(this.ref)
|
|
194
|
+
const refNode = findDOMNode(this.ref);
|
|
195
|
+
refNode.focus();
|
|
187
196
|
}
|
|
188
197
|
|
|
189
198
|
renderContent() {
|
|
190
199
|
var _this$props$styles, _this$props$styles2, _this$props$styles3;
|
|
191
200
|
|
|
192
|
-
const _this$
|
|
193
|
-
children = _this$
|
|
194
|
-
type = _this$
|
|
201
|
+
const _this$props4 = this.props,
|
|
202
|
+
children = _this$props4.children,
|
|
203
|
+
type = _this$props4.type;
|
|
195
204
|
return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
|
|
196
205
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
|
|
197
206
|
}, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
|
|
@@ -205,17 +214,16 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
205
214
|
render() {
|
|
206
215
|
var _this$props$styles4;
|
|
207
216
|
|
|
208
|
-
const _this$
|
|
209
|
-
disabled = _this$
|
|
210
|
-
controls = _this$
|
|
211
|
-
onKeyDown = _this$
|
|
212
|
-
onKeyUp = _this$
|
|
213
|
-
type = _this$
|
|
214
|
-
href = _this$
|
|
217
|
+
const _this$props5 = this.props,
|
|
218
|
+
disabled = _this$props5.disabled,
|
|
219
|
+
controls = _this$props5.controls,
|
|
220
|
+
onKeyDown = _this$props5.onKeyDown,
|
|
221
|
+
onKeyUp = _this$props5.onKeyUp,
|
|
222
|
+
type = _this$props5.type,
|
|
223
|
+
href = _this$props5.href;
|
|
215
224
|
const props = omitProps(this.props, MenuItem.allowedProps);
|
|
216
225
|
const ElementType = this.elementType;
|
|
217
|
-
return jsx(ElementType
|
|
218
|
-
, Object.assign({
|
|
226
|
+
return jsx(ElementType, Object.assign({
|
|
219
227
|
tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
|
|
220
228
|
|
|
221
229
|
}, props, {
|
|
@@ -236,8 +244,7 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
236
244
|
|
|
237
245
|
}, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
238
246
|
type: 'button',
|
|
239
|
-
disabled: false
|
|
240
|
-
onSelect: function (e, value, selected, item) {}
|
|
247
|
+
disabled: false
|
|
241
248
|
}, _class2.contextType = MenuContext, _temp)) || _class) || _class);
|
|
242
249
|
export default MenuItem;
|
|
243
250
|
export { MenuItem };
|
|
@@ -24,39 +24,16 @@
|
|
|
24
24
|
import PropTypes from 'prop-types';
|
|
25
25
|
import { controllable } from '@instructure/ui-prop-types';
|
|
26
26
|
const propTypes = {
|
|
27
|
-
/**
|
|
28
|
-
* the menu item label
|
|
29
|
-
*/
|
|
30
27
|
children: PropTypes.node.isRequired,
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* whether to set the menu item state to selected or not on initial render
|
|
34
|
-
*/
|
|
35
28
|
defaultSelected: PropTypes.bool,
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
|
|
39
|
-
*/
|
|
40
29
|
selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* when used with the `selected` prop, the component will not control its own state
|
|
44
|
-
*/
|
|
45
30
|
onSelect: PropTypes.func,
|
|
46
31
|
onClick: PropTypes.func,
|
|
47
32
|
onKeyDown: PropTypes.func,
|
|
48
33
|
onKeyUp: PropTypes.func,
|
|
49
34
|
onMouseOver: PropTypes.func,
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* the id of the element that the menu item will act upon
|
|
53
|
-
*/
|
|
54
35
|
controls: PropTypes.string,
|
|
55
36
|
disabled: PropTypes.bool,
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* the element type to render as (will default to `<a>` if href is provided)
|
|
59
|
-
*/
|
|
60
37
|
as: PropTypes.elementType,
|
|
61
38
|
// eslint-disable-line react/require-default-props
|
|
62
39
|
type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
|
|
@@ -41,10 +41,12 @@ import { propTypes, allowedProps } from './props';
|
|
|
41
41
|
parent: Menu
|
|
42
42
|
id: Menu.Group
|
|
43
43
|
---
|
|
44
|
+
@tsProps
|
|
44
45
|
**/
|
|
45
46
|
let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class MenuItemGroup extends Component {
|
|
46
47
|
constructor(props) {
|
|
47
|
-
super();
|
|
48
|
+
super(props);
|
|
49
|
+
this._labelId = void 0;
|
|
48
50
|
this.ref = null;
|
|
49
51
|
|
|
50
52
|
this.handleRef = el => {
|
|
@@ -99,11 +101,15 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
|
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
componentDidMount() {
|
|
102
|
-
|
|
104
|
+
var _this$props$makeStyle, _this$props;
|
|
105
|
+
|
|
106
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
103
107
|
}
|
|
104
108
|
|
|
105
109
|
componentDidUpdate() {
|
|
106
|
-
|
|
110
|
+
var _this$props$makeStyle2, _this$props2;
|
|
111
|
+
|
|
112
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
107
113
|
}
|
|
108
114
|
|
|
109
115
|
selectedFromChildren(props) {
|
|
@@ -139,13 +145,13 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
|
|
|
139
145
|
}
|
|
140
146
|
|
|
141
147
|
renderChildren() {
|
|
142
|
-
const _this$
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
const _this$props3 = this.props,
|
|
149
|
+
disabled = _this$props3.disabled,
|
|
150
|
+
controls = _this$props3.controls,
|
|
151
|
+
allowMultiple = _this$props3.allowMultiple,
|
|
152
|
+
isTabbable = _this$props3.isTabbable,
|
|
153
|
+
onMouseOver = _this$props3.onMouseOver;
|
|
154
|
+
const children = this.props.children;
|
|
149
155
|
let index = -1;
|
|
150
156
|
return Children.map(children, child => {
|
|
151
157
|
if (matchComponentTypes(child, [MenuItem])) {
|
|
@@ -193,9 +199,7 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
|
|
|
193
199
|
children: null,
|
|
194
200
|
isTabbable: false,
|
|
195
201
|
allowMultiple: false,
|
|
196
|
-
defaultSelected: []
|
|
197
|
-
itemRef: function (item) {},
|
|
198
|
-
onSelect: function (e, value, selected, item) {}
|
|
202
|
+
defaultSelected: []
|
|
199
203
|
}, _temp)) || _class) || _class);
|
|
200
204
|
export default MenuItemGroup;
|
|
201
205
|
export { MenuItemGroup };
|
|
@@ -28,44 +28,15 @@ import { MenuItemSeparator } from '../MenuItemSeparator';
|
|
|
28
28
|
const propTypes = {
|
|
29
29
|
label: PropTypes.node.isRequired,
|
|
30
30
|
allowMultiple: PropTypes.bool,
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* children of type `Menu.Item`, `Menu.Separator`
|
|
34
|
-
*/
|
|
35
31
|
children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* an array of the values (or indices by default) for the selected items
|
|
39
|
-
*/
|
|
40
32
|
selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* an array of the values (or indices by default) for the selected items on initial render
|
|
44
|
-
*/
|
|
45
33
|
defaultSelected: PropTypes.array,
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* call this function when a menu item is selected
|
|
49
|
-
*/
|
|
50
34
|
onSelect: PropTypes.func,
|
|
51
35
|
onMouseOver: PropTypes.func,
|
|
52
|
-
onKeyDown: PropTypes.func,
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* the id of the element that the menu items will act upon
|
|
56
|
-
*/
|
|
57
36
|
controls: PropTypes.string,
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* returns a reference to the `MenuItem`
|
|
61
|
-
*/
|
|
62
37
|
itemRef: PropTypes.func,
|
|
63
38
|
disabled: PropTypes.bool,
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* should the group appear in the tab order (the first item will have a tabIndex of 0)
|
|
67
|
-
*/
|
|
68
39
|
isTabbable: PropTypes.bool
|
|
69
40
|
};
|
|
70
|
-
const allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', '
|
|
41
|
+
const allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'controls', 'itemRef', 'disabled', 'isTabbable'];
|
|
71
42
|
export { propTypes, allowedProps };
|
|
@@ -51,11 +51,15 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
componentDidMount() {
|
|
54
|
-
|
|
54
|
+
var _this$props$makeStyle, _this$props;
|
|
55
|
+
|
|
56
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
componentDidUpdate() {
|
|
58
|
-
|
|
60
|
+
var _this$props$makeStyle2, _this$props2;
|
|
61
|
+
|
|
62
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
59
63
|
}
|
|
60
64
|
|
|
61
65
|
render() {
|
package/es/Menu/index.js
CHANGED
|
@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
27
|
/** @jsx jsx */
|
|
28
|
-
import { Children, Component } from 'react';
|
|
28
|
+
import React, { Children, Component } from 'react';
|
|
29
29
|
import keycode from 'keycode';
|
|
30
30
|
import { Popover } from '@instructure/ui-popover';
|
|
31
31
|
import { uid } from '@instructure/uid';
|
|
@@ -46,6 +46,7 @@ import { propTypes, allowedProps } from './props';
|
|
|
46
46
|
---
|
|
47
47
|
category: components
|
|
48
48
|
---
|
|
49
|
+
@tsProps
|
|
49
50
|
**/
|
|
50
51
|
let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Menu extends Component {
|
|
51
52
|
constructor(props) {
|
|
@@ -59,7 +60,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
59
60
|
this._trigger = null;
|
|
60
61
|
this._menu = null;
|
|
61
62
|
this._labelId = uid('Menu__label');
|
|
62
|
-
this._activeSubMenu =
|
|
63
|
+
this._activeSubMenu = void 0;
|
|
64
|
+
this._id = void 0;
|
|
63
65
|
this.ref = null;
|
|
64
66
|
|
|
65
67
|
this.handleRef = el => {
|
|
@@ -112,10 +114,10 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
112
114
|
const _keycode$codes = keycode.codes,
|
|
113
115
|
down = _keycode$codes.down,
|
|
114
116
|
up = _keycode$codes.up,
|
|
115
|
-
pgup = _keycode$codes.pgup,
|
|
116
|
-
pgdn = _keycode$codes.pgdn,
|
|
117
117
|
tab = _keycode$codes.tab,
|
|
118
118
|
left = _keycode$codes.left;
|
|
119
|
+
const pgdn = keycode.codes['page down'];
|
|
120
|
+
const pgup = keycode.codes['page up'];
|
|
119
121
|
|
|
120
122
|
if (key === down || key === pgdn) {
|
|
121
123
|
event.preventDefault();
|
|
@@ -193,6 +195,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
193
195
|
|
|
194
196
|
this.show = event => {
|
|
195
197
|
if (this._popover) {
|
|
198
|
+
//TODO make events consistents
|
|
196
199
|
this._popover.show(event);
|
|
197
200
|
}
|
|
198
201
|
};
|
|
@@ -201,11 +204,15 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
201
204
|
}
|
|
202
205
|
|
|
203
206
|
componentDidMount() {
|
|
204
|
-
|
|
207
|
+
var _this$props$makeStyle, _this$props;
|
|
208
|
+
|
|
209
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
205
210
|
}
|
|
206
211
|
|
|
207
|
-
componentDidUpdate(
|
|
208
|
-
|
|
212
|
+
componentDidUpdate() {
|
|
213
|
+
var _this$props$makeStyle2, _this$props2;
|
|
214
|
+
|
|
215
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
209
216
|
}
|
|
210
217
|
|
|
211
218
|
get menuItems() {
|
|
@@ -214,11 +221,15 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
214
221
|
|
|
215
222
|
focus() {
|
|
216
223
|
if (this.shown) {
|
|
217
|
-
|
|
224
|
+
var _this$_menu;
|
|
225
|
+
|
|
226
|
+
error(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
|
|
218
227
|
|
|
219
228
|
this._menu.focus();
|
|
220
229
|
} else {
|
|
221
|
-
|
|
230
|
+
var _this$_trigger;
|
|
231
|
+
|
|
232
|
+
error(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
|
|
222
233
|
|
|
223
234
|
this._trigger.focus();
|
|
224
235
|
}
|
|
@@ -247,7 +258,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
247
258
|
|
|
248
259
|
const current = this.focusedIndex < 0 && step < 0 ? 0 : this.focusedIndex;
|
|
249
260
|
const nextItem = this.menuItems[(current + count + step) % count];
|
|
250
|
-
error(nextItem && nextItem.focus, '[Menu] Could not focus next menu item.');
|
|
261
|
+
error(typeof nextItem !== 'undefined' && typeof nextItem.focus !== 'undefined', '[Menu] Could not focus next menu item.');
|
|
251
262
|
nextItem.focus();
|
|
252
263
|
}
|
|
253
264
|
|
|
@@ -256,9 +267,9 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
256
267
|
}
|
|
257
268
|
|
|
258
269
|
renderChildren() {
|
|
259
|
-
const _this$
|
|
260
|
-
children = _this$
|
|
261
|
-
disabled = _this$
|
|
270
|
+
const _this$props3 = this.props,
|
|
271
|
+
children = _this$props3.children,
|
|
272
|
+
disabled = _this$props3.disabled;
|
|
262
273
|
let count = 0;
|
|
263
274
|
return Children.map(children, child => {
|
|
264
275
|
if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
|
|
@@ -274,8 +285,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
274
285
|
}, child);
|
|
275
286
|
}
|
|
276
287
|
|
|
277
|
-
const
|
|
278
|
-
|
|
288
|
+
const menuItemChild = child;
|
|
289
|
+
const controls = menuItemChild.props['aria-controls'] || menuItemChild.props.controls || this.props['aria-controls'] || this.props.controls;
|
|
279
290
|
|
|
280
291
|
if (matchComponentTypes(child, ['MenuItem'])) {
|
|
281
292
|
return jsx("li", {
|
|
@@ -330,21 +341,21 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
330
341
|
}, child.props.title || child.props.label)
|
|
331
342
|
}));
|
|
332
343
|
}
|
|
344
|
+
|
|
345
|
+
return;
|
|
333
346
|
});
|
|
334
347
|
}
|
|
335
348
|
|
|
336
349
|
renderMenu() {
|
|
337
350
|
var _this$props$styles;
|
|
338
351
|
|
|
339
|
-
const _this$
|
|
340
|
-
disabled = _this$
|
|
341
|
-
label = _this$
|
|
342
|
-
trigger = _this$
|
|
343
|
-
onKeyUp = _this$
|
|
344
|
-
const labelledBy = this.props['aria-labelledby'];
|
|
345
|
-
|
|
346
|
-
const controls = this.props['aria-controls']; // eslint-disable-line react/prop-types
|
|
347
|
-
|
|
352
|
+
const _this$props4 = this.props,
|
|
353
|
+
disabled = _this$props4.disabled,
|
|
354
|
+
label = _this$props4.label,
|
|
355
|
+
trigger = _this$props4.trigger,
|
|
356
|
+
onKeyUp = _this$props4.onKeyUp;
|
|
357
|
+
const labelledBy = this.props['aria-labelledby'];
|
|
358
|
+
const controls = this.props['aria-controls'];
|
|
348
359
|
return jsx(MenuContext.Provider, {
|
|
349
360
|
value: {
|
|
350
361
|
removeMenuItem: this.removeMenuItem,
|
|
@@ -355,7 +366,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
355
366
|
"aria-label": label,
|
|
356
367
|
tabIndex: 0,
|
|
357
368
|
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
|
|
358
|
-
"aria-labelledby": labelledBy || trigger
|
|
369
|
+
"aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
|
|
359
370
|
"aria-controls": controls,
|
|
360
371
|
"aria-disabled": disabled ? 'true' : void 0,
|
|
361
372
|
onKeyDown: this.handleMenuKeyDown,
|
|
@@ -365,26 +376,30 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
365
376
|
}
|
|
366
377
|
|
|
367
378
|
render() {
|
|
368
|
-
const _this$
|
|
369
|
-
show = _this$
|
|
370
|
-
defaultShow = _this$
|
|
371
|
-
placement = _this$
|
|
372
|
-
withArrow = _this$
|
|
373
|
-
trigger = _this$
|
|
374
|
-
mountNode = _this$
|
|
375
|
-
popoverRef = _this$
|
|
376
|
-
disabled = _this$
|
|
377
|
-
onDismiss = _this$
|
|
378
|
-
onFocus = _this$
|
|
379
|
-
onMouseOver = _this$
|
|
380
|
-
offsetX = _this$
|
|
381
|
-
offsetY = _this$
|
|
379
|
+
const _this$props5 = this.props,
|
|
380
|
+
show = _this$props5.show,
|
|
381
|
+
defaultShow = _this$props5.defaultShow,
|
|
382
|
+
placement = _this$props5.placement,
|
|
383
|
+
withArrow = _this$props5.withArrow,
|
|
384
|
+
trigger = _this$props5.trigger,
|
|
385
|
+
mountNode = _this$props5.mountNode,
|
|
386
|
+
popoverRef = _this$props5.popoverRef,
|
|
387
|
+
disabled = _this$props5.disabled,
|
|
388
|
+
onDismiss = _this$props5.onDismiss,
|
|
389
|
+
onFocus = _this$props5.onFocus,
|
|
390
|
+
onMouseOver = _this$props5.onMouseOver,
|
|
391
|
+
offsetX = _this$props5.offsetX,
|
|
392
|
+
offsetY = _this$props5.offsetY;
|
|
382
393
|
return trigger ? jsx(Popover, {
|
|
383
394
|
isShowingContent: show,
|
|
384
395
|
defaultIsShowingContent: defaultShow,
|
|
385
396
|
onHideContent: (event, _ref) => {
|
|
386
397
|
let documentClick = _ref.documentClick;
|
|
387
|
-
|
|
398
|
+
|
|
399
|
+
if (typeof onDismiss === 'function') {
|
|
400
|
+
onDismiss(event, documentClick);
|
|
401
|
+
}
|
|
402
|
+
|
|
388
403
|
this.handleToggle(false);
|
|
389
404
|
},
|
|
390
405
|
onShowContent: () => this.handleToggle(true),
|
|
@@ -408,6 +423,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
408
423
|
},
|
|
409
424
|
renderTrigger: safeCloneElement(trigger, {
|
|
410
425
|
ref: el => {
|
|
426
|
+
this._trigger = el;
|
|
411
427
|
this.ref = el;
|
|
412
428
|
},
|
|
413
429
|
'aria-haspopup': true,
|
|
@@ -420,25 +436,13 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
420
436
|
}
|
|
421
437
|
|
|
422
438
|
}, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
423
|
-
children: null,
|
|
424
439
|
label: null,
|
|
425
440
|
disabled: false,
|
|
426
441
|
trigger: null,
|
|
427
442
|
placement: 'bottom center',
|
|
428
443
|
defaultShow: false,
|
|
429
|
-
onToggle: (shown, menu) => {},
|
|
430
|
-
onSelect: (event, value, selected, item) => {},
|
|
431
|
-
onDismiss: (event, documentClick) => {},
|
|
432
|
-
onBlur: event => {},
|
|
433
|
-
onFocus: event => {},
|
|
434
|
-
onMouseOver: event => {},
|
|
435
|
-
onKeyDown: event => {},
|
|
436
|
-
onKeyUp: event => {},
|
|
437
|
-
menuRef: el => {},
|
|
438
|
-
popoverRef: el => {},
|
|
439
444
|
mountNode: null,
|
|
440
445
|
constrain: 'window',
|
|
441
|
-
liveRegion: null,
|
|
442
446
|
shouldHideOnSelect: true,
|
|
443
447
|
shouldFocusTriggerOnClose: true,
|
|
444
448
|
withArrow: true,
|
package/es/Menu/props.js
CHANGED
|
@@ -25,143 +25,31 @@ import PropTypes from 'prop-types';
|
|
|
25
25
|
import { PositionPropTypes } from '@instructure/ui-position';
|
|
26
26
|
import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
27
27
|
const propTypes = {
|
|
28
|
-
/**
|
|
29
|
-
* Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
|
|
30
|
-
*/
|
|
31
28
|
children: ChildrenPropTypes.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Description of the `<Menu />`
|
|
35
|
-
*/
|
|
36
29
|
label: PropTypes.string,
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Is the `<Menu />` disabled
|
|
40
|
-
*/
|
|
41
30
|
disabled: PropTypes.bool,
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* The trigger element, if the `<Menu />` is to render as a popover
|
|
45
|
-
*/
|
|
46
31
|
trigger: PropTypes.node,
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
|
|
50
|
-
*/
|
|
51
32
|
placement: PositionPropTypes.placement,
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Should the `<Menu />` be open for the initial render
|
|
55
|
-
*/
|
|
56
33
|
defaultShow: PropTypes.bool,
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Is the `<Menu />` open (should be accompanied by `onToggle`)
|
|
60
|
-
*/
|
|
61
34
|
show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Callback fired when the `<Menu />` is toggled open/closed. When used with `show`,
|
|
65
|
-
* the component will not control its own state.
|
|
66
|
-
*/
|
|
67
35
|
onToggle: PropTypes.func,
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Callback fired when an item within the `<Menu />` is selected
|
|
71
|
-
*/
|
|
72
36
|
onSelect: PropTypes.func,
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* If a trigger is supplied, callback fired when the `<Menu />` is closed
|
|
76
|
-
*/
|
|
77
37
|
onDismiss: PropTypes.func,
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* If a trigger is supplied, callback fired when the `<Menu />` trigger is blurred
|
|
81
|
-
*/
|
|
82
|
-
onBlur: PropTypes.func,
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
|
|
86
|
-
*/
|
|
87
38
|
onFocus: PropTypes.func,
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
|
|
91
|
-
*/
|
|
92
39
|
onMouseOver: PropTypes.func,
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
* Callback fired on the onKeyDown of the `<Menu />`
|
|
96
|
-
*/
|
|
97
40
|
onKeyDown: PropTypes.func,
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* Callback fired on the onKeyUp of the `<Menu />`
|
|
101
|
-
*/
|
|
102
41
|
onKeyUp: PropTypes.func,
|
|
103
|
-
|
|
104
|
-
/**
|
|
105
|
-
* A function that returns a reference to the `<Menu />`
|
|
106
|
-
*/
|
|
107
42
|
menuRef: PropTypes.func,
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* A function that returns a reference to the `<Popover />`
|
|
111
|
-
*/
|
|
112
43
|
popoverRef: PropTypes.func,
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* If a trigger is supplied, an element or a function returning an element to use as the mount node
|
|
116
|
-
* for the `<Menu />` (defaults to `document.body`)
|
|
117
|
-
*/
|
|
118
44
|
mountNode: PositionPropTypes.mountNode,
|
|
119
|
-
|
|
120
|
-
/**
|
|
121
|
-
* The parent in which to constrain the menu.
|
|
122
|
-
* One of: 'window', 'scroll-parent', 'parent', 'none', an element,
|
|
123
|
-
* or a function returning an element
|
|
124
|
-
*/
|
|
125
45
|
constrain: PositionPropTypes.constrain,
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* If a trigger is supplied, an element, function returning an element, or array of elements that will not
|
|
129
|
-
* be hidden from the screen reader when the `<Menu />` is open
|
|
130
|
-
*/
|
|
131
|
-
liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* If a trigger is supplied, should the `<Menu />` hide when an item is selected
|
|
135
|
-
*/
|
|
136
46
|
shouldHideOnSelect: PropTypes.bool,
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
|
|
140
|
-
*/
|
|
141
47
|
shouldFocusTriggerOnClose: PropTypes.bool,
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* The type of `<Menu />`
|
|
145
|
-
*/
|
|
146
48
|
type: PropTypes.oneOf(['flyout']),
|
|
147
49
|
id: PropTypes.string,
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* Whether or not an arrow pointing to the trigger should be rendered
|
|
151
|
-
*/
|
|
152
50
|
withArrow: PropTypes.bool,
|
|
153
|
-
|
|
154
|
-
/**
|
|
155
|
-
* The horizontal offset for the positioned content.
|
|
156
|
-
* Works only if `trigger` is provided.
|
|
157
|
-
*/
|
|
158
51
|
offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
159
|
-
|
|
160
|
-
/**
|
|
161
|
-
* The vertical offset for the positioned content.
|
|
162
|
-
* Works only if `trigger` is provided.
|
|
163
|
-
*/
|
|
164
52
|
offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
165
53
|
};
|
|
166
|
-
const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', '
|
|
54
|
+
const allowedProps = ['children', 'label', 'disabled', 'trigger', 'placement', 'defaultShow', 'show', 'onToggle', 'onSelect', 'onDismiss', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
|
|
167
55
|
export { propTypes, allowedProps };
|