@instructure/ui-menu 8.8.1-snapshot.3 → 8.8.1-snapshot.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Menu/MenuItem/index.js +14 -60
- package/es/Menu/MenuItem/props.js +67 -0
- package/es/Menu/MenuItemGroup/index.js +10 -57
- package/es/Menu/MenuItemGroup/props.js +71 -0
- package/es/Menu/MenuItemSeparator/index.js +5 -8
- package/{src/Menu/MenuItemSeparator/types.ts → es/Menu/MenuItemSeparator/props.js} +5 -5
- package/es/Menu/index.js +5 -151
- package/es/Menu/props.js +167 -0
- package/lib/Menu/MenuItem/index.js +15 -62
- package/lib/Menu/MenuItem/props.js +79 -0
- package/lib/Menu/MenuItemGroup/index.js +11 -62
- package/lib/Menu/MenuItemGroup/props.js +87 -0
- package/lib/Menu/MenuItemSeparator/index.js +6 -9
- package/{src/Menu/MenuItemGroup/types.ts → lib/Menu/MenuItemSeparator/props.js} +13 -16
- package/lib/Menu/index.js +6 -156
- package/lib/Menu/props.js +182 -0
- package/package.json +21 -21
- package/src/Menu/MenuItem/index.tsx +14 -56
- package/src/Menu/MenuItem/props.ts +109 -0
- package/src/Menu/MenuItem/styles.ts +1 -1
- package/src/Menu/MenuItemGroup/index.tsx +9 -56
- package/src/Menu/MenuItemGroup/props.ts +110 -0
- package/src/Menu/MenuItemSeparator/index.tsx +6 -9
- package/src/Menu/{MenuItem/types.ts → MenuItemSeparator/props.ts} +19 -19
- package/src/Menu/index.tsx +6 -139
- package/src/Menu/props.ts +235 -0
- package/src/index.ts +4 -4
- package/types/Menu/MenuItem/index.d.ts +37 -45
- package/types/Menu/MenuItem/index.d.ts.map +1 -1
- package/types/Menu/MenuItem/props.d.ts +27 -0
- package/types/Menu/MenuItem/props.d.ts.map +1 -0
- package/types/Menu/MenuItem/styles.d.ts +1 -1
- package/types/Menu/MenuItemGroup/index.d.ts +29 -46
- package/types/Menu/MenuItemGroup/index.d.ts.map +1 -1
- package/types/Menu/MenuItemGroup/props.d.ts +25 -0
- package/types/Menu/MenuItemGroup/props.d.ts.map +1 -0
- package/types/Menu/MenuItemSeparator/index.d.ts +3 -6
- package/types/Menu/MenuItemSeparator/index.d.ts.map +1 -1
- package/types/Menu/MenuItemSeparator/props.d.ts +11 -0
- package/types/Menu/MenuItemSeparator/props.d.ts.map +1 -0
- package/types/Menu/index.d.ts +60 -122
- package/types/Menu/index.d.ts.map +1 -1
- package/types/Menu/{types.d.ts → props.d.ts} +12 -4
- package/types/Menu/props.d.ts.map +1 -0
- package/types/index.d.ts +4 -4
- package/es/Menu/MenuItem/types.js +0 -1
- package/es/Menu/MenuItemGroup/types.js +0 -1
- package/es/Menu/MenuItemSeparator/types.js +0 -1
- package/es/Menu/types.js +0 -1
- package/lib/Menu/MenuItem/types.js +0 -1
- package/lib/Menu/MenuItemGroup/types.js +0 -1
- package/lib/Menu/MenuItemSeparator/types.js +0 -1
- package/lib/Menu/types.js +0 -1
- package/src/Menu/types.ts +0 -63
- package/types/Menu/MenuItem/types.d.ts +0 -19
- package/types/Menu/MenuItem/types.d.ts.map +0 -1
- package/types/Menu/MenuItemGroup/types.d.ts +0 -17
- package/types/Menu/MenuItemGroup/types.d.ts.map +0 -1
- package/types/Menu/MenuItemSeparator/types.d.ts +0 -5
- package/types/Menu/MenuItemSeparator/types.d.ts.map +0 -1
- package/types/Menu/types.d.ts.map +0 -1
|
@@ -26,11 +26,9 @@ var _dec, _dec2, _class, _class2, _temp, _IconCheckSolid, _IconArrowOpenEndSoli;
|
|
|
26
26
|
|
|
27
27
|
/** @jsx jsx */
|
|
28
28
|
import { Component } from 'react';
|
|
29
|
-
import PropTypes from 'prop-types';
|
|
30
29
|
import keycode from 'keycode';
|
|
31
30
|
import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons';
|
|
32
31
|
import { uid } from '@instructure/uid';
|
|
33
|
-
import { controllable } from '@instructure/ui-prop-types';
|
|
34
32
|
import { omitProps, getElementType } from '@instructure/ui-react-utils';
|
|
35
33
|
import { createChainedFunction } from '@instructure/ui-utils';
|
|
36
34
|
import { isActiveElement, findDOMNode } from '@instructure/ui-dom-utils';
|
|
@@ -39,6 +37,7 @@ import { withStyle, jsx } from '@instructure/emotion';
|
|
|
39
37
|
import { MenuContext } from '../../MenuContext';
|
|
40
38
|
import generateStyle from './styles';
|
|
41
39
|
import generateComponentTheme from './theme';
|
|
40
|
+
import { propTypes, allowedProps } from './props';
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
43
|
---
|
|
@@ -179,20 +178,24 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
179
178
|
}
|
|
180
179
|
|
|
181
180
|
renderContent() {
|
|
181
|
+
var _this$props$styles, _this$props$styles2, _this$props$styles3;
|
|
182
|
+
|
|
182
183
|
const _this$props2 = this.props,
|
|
183
184
|
children = _this$props2.children,
|
|
184
185
|
type = _this$props2.type;
|
|
185
186
|
return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
|
|
186
|
-
css: this.props.styles.icon
|
|
187
|
+
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
|
|
187
188
|
}, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
|
|
188
|
-
css: this.props.styles.label,
|
|
189
|
+
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
|
|
189
190
|
id: this.labelId
|
|
190
191
|
}, children), type === 'flyout' && jsx("span", {
|
|
191
|
-
css: this.props.styles.icon
|
|
192
|
+
css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
|
|
192
193
|
}, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))));
|
|
193
194
|
}
|
|
194
195
|
|
|
195
196
|
render() {
|
|
197
|
+
var _this$props$styles4;
|
|
198
|
+
|
|
196
199
|
const _this$props3 = this.props,
|
|
197
200
|
disabled = _this$props3.disabled,
|
|
198
201
|
controls = _this$props3.controls,
|
|
@@ -204,79 +207,30 @@ let MenuItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
204
207
|
const ElementType = this.elementType;
|
|
205
208
|
return jsx(ElementType // eslint-disable-line jsx-a11y/mouse-events-have-key-events
|
|
206
209
|
, Object.assign({
|
|
207
|
-
tabIndex:
|
|
210
|
+
tabIndex: -1 // note: tabIndex can be overridden by Menu or MenuItemGroup components
|
|
208
211
|
|
|
209
212
|
}, props, {
|
|
210
213
|
href: href,
|
|
211
214
|
role: this.role,
|
|
212
215
|
"aria-labelledby": this.labelId,
|
|
213
|
-
"aria-disabled": disabled ? 'true' :
|
|
216
|
+
"aria-disabled": disabled ? 'true' : void 0,
|
|
214
217
|
"aria-controls": controls,
|
|
215
|
-
"aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' :
|
|
218
|
+
"aria-checked": type === 'checkbox' || type === 'radio' ? this.selected ? 'true' : 'false' : void 0,
|
|
216
219
|
onClick: this.handleClick,
|
|
217
220
|
onKeyUp: createChainedFunction(onKeyUp, this.handleKeyUp),
|
|
218
221
|
onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
|
|
219
222
|
ref: c => {
|
|
220
223
|
this._node = c;
|
|
221
224
|
},
|
|
222
|
-
css: this.props.styles.menuItem,
|
|
225
|
+
css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
|
|
223
226
|
onMouseOver: this.handleMouseOver
|
|
224
227
|
}), this.renderContent());
|
|
225
228
|
}
|
|
226
229
|
|
|
227
|
-
}, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = {
|
|
228
|
-
// eslint-disable-next-line react/require-default-props
|
|
229
|
-
makeStyles: PropTypes.func,
|
|
230
|
-
// eslint-disable-next-line react/require-default-props
|
|
231
|
-
styles: PropTypes.object,
|
|
232
|
-
|
|
233
|
-
/* the menu item label */
|
|
234
|
-
children: PropTypes.node.isRequired,
|
|
235
|
-
|
|
236
|
-
/* whether to set the menu item state to selected or not on initial render */
|
|
237
|
-
defaultSelected: PropTypes.bool,
|
|
238
|
-
|
|
239
|
-
/**
|
|
240
|
-
* whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
|
|
241
|
-
*/
|
|
242
|
-
selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* when used with the `selected` prop, the component will not control its own state
|
|
246
|
-
*/
|
|
247
|
-
onSelect: PropTypes.func,
|
|
248
|
-
onClick: PropTypes.func,
|
|
249
|
-
onKeyDown: PropTypes.func,
|
|
250
|
-
onKeyUp: PropTypes.func,
|
|
251
|
-
onMouseOver: PropTypes.func,
|
|
252
|
-
|
|
253
|
-
/**
|
|
254
|
-
* the id of the element that the menu item will act upon
|
|
255
|
-
*/
|
|
256
|
-
controls: PropTypes.string,
|
|
257
|
-
disabled: PropTypes.bool,
|
|
258
|
-
|
|
259
|
-
/**
|
|
260
|
-
* the element type to render as (will default to `<a>` if href is provided)
|
|
261
|
-
*/
|
|
262
|
-
as: PropTypes.elementType,
|
|
263
|
-
// eslint-disable-line react/require-default-props
|
|
264
|
-
type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
|
|
265
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
266
|
-
href: PropTypes.string
|
|
267
|
-
}, _class2.defaultProps = {
|
|
230
|
+
}, _class2.displayName = "MenuItem", _class2.componentId = 'Menu.Item', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
268
231
|
type: 'button',
|
|
269
232
|
disabled: false,
|
|
270
|
-
onSelect: function (e, value, selected, item) {}
|
|
271
|
-
defaultSelected: void 0,
|
|
272
|
-
selected: void 0,
|
|
273
|
-
onClick: void 0,
|
|
274
|
-
onKeyDown: void 0,
|
|
275
|
-
onKeyUp: void 0,
|
|
276
|
-
onMouseOver: void 0,
|
|
277
|
-
controls: void 0,
|
|
278
|
-
value: void 0,
|
|
279
|
-
href: void 0
|
|
233
|
+
onSelect: function (e, value, selected, item) {}
|
|
280
234
|
}, _class2.contextType = MenuContext, _temp)) || _class) || _class);
|
|
281
235
|
export default MenuItem;
|
|
282
236
|
export { MenuItem };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
import PropTypes from 'prop-types';
|
|
25
|
+
import { controllable } from '@instructure/ui-prop-types';
|
|
26
|
+
const propTypes = {
|
|
27
|
+
/**
|
|
28
|
+
* the menu item label
|
|
29
|
+
*/
|
|
30
|
+
children: PropTypes.node.isRequired,
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* whether to set the menu item state to selected or not on initial render
|
|
34
|
+
*/
|
|
35
|
+
defaultSelected: PropTypes.bool,
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
|
|
39
|
+
*/
|
|
40
|
+
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
|
+
onSelect: PropTypes.func,
|
|
46
|
+
onClick: PropTypes.func,
|
|
47
|
+
onKeyDown: PropTypes.func,
|
|
48
|
+
onKeyUp: PropTypes.func,
|
|
49
|
+
onMouseOver: PropTypes.func,
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* the id of the element that the menu item will act upon
|
|
53
|
+
*/
|
|
54
|
+
controls: PropTypes.string,
|
|
55
|
+
disabled: PropTypes.bool,
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* the element type to render as (will default to `<a>` if href is provided)
|
|
59
|
+
*/
|
|
60
|
+
as: PropTypes.elementType,
|
|
61
|
+
// eslint-disable-line react/require-default-props
|
|
62
|
+
type: PropTypes.oneOf(['button', 'checkbox', 'radio', 'flyout']),
|
|
63
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
64
|
+
href: PropTypes.string
|
|
65
|
+
};
|
|
66
|
+
const allowedProps = ['children', 'defaultSelected', 'selected', 'onSelect', 'onClick', 'onKeyDown', 'onKeyUp', 'onMouseOver', 'controls', 'disabled', 'as', 'type', 'value', 'href'];
|
|
67
|
+
export { propTypes, allowedProps };
|
|
@@ -26,17 +26,15 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
26
26
|
|
|
27
27
|
/** @jsx jsx */
|
|
28
28
|
import { Children, Component } from 'react';
|
|
29
|
-
import PropTypes from 'prop-types';
|
|
30
29
|
import { withStyle, jsx } from '@instructure/emotion';
|
|
31
|
-
import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
32
30
|
import { omitProps, safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
|
|
33
31
|
import { uid } from '@instructure/uid';
|
|
34
32
|
import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
|
|
35
33
|
import { testable } from '@instructure/ui-testable';
|
|
36
34
|
import { MenuItem } from '../MenuItem';
|
|
37
|
-
import { MenuItemSeparator } from '../MenuItemSeparator';
|
|
38
35
|
import generateStyle from './styles';
|
|
39
36
|
import generateComponentTheme from './theme';
|
|
37
|
+
import { propTypes, allowedProps } from './props';
|
|
40
38
|
|
|
41
39
|
/**
|
|
42
40
|
---
|
|
@@ -127,9 +125,11 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
|
|
|
127
125
|
}
|
|
128
126
|
|
|
129
127
|
renderLabel() {
|
|
128
|
+
var _this$props$styles;
|
|
129
|
+
|
|
130
130
|
const label = this.props.label;
|
|
131
131
|
return hasVisibleChildren(label) ? jsx("span", {
|
|
132
|
-
css: this.props.styles.label
|
|
132
|
+
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
|
|
133
133
|
}, label) : label;
|
|
134
134
|
}
|
|
135
135
|
|
|
@@ -166,71 +166,24 @@ let MenuItemGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _d
|
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
render() {
|
|
169
|
+
var _this$props$styles2, _this$props$styles3;
|
|
170
|
+
|
|
169
171
|
const props = omitProps(this.props, MenuItemGroup.propTypes);
|
|
170
172
|
return jsx("span", Object.assign({}, props, {
|
|
171
|
-
css: this.props.styles.menuItemGroup,
|
|
173
|
+
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
|
|
172
174
|
role: "presentation"
|
|
173
175
|
}), jsx("span", {
|
|
174
176
|
id: this._labelId
|
|
175
177
|
}, this.renderLabel()), jsx("ul", {
|
|
176
178
|
role: "menu",
|
|
177
|
-
css: this.props.styles.items,
|
|
178
|
-
"aria-disabled": this.props.disabled ? 'true' :
|
|
179
|
+
css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
|
|
180
|
+
"aria-disabled": this.props.disabled ? 'true' : void 0,
|
|
179
181
|
"aria-labelledby": this._labelId
|
|
180
182
|
}, this.renderChildren()));
|
|
181
183
|
}
|
|
182
184
|
|
|
183
|
-
}, _class2.displayName = "MenuItemGroup", _class2.componentId = 'Menu.Group', _class2.propTypes = {
|
|
184
|
-
// eslint-disable-next-line react/require-default-props
|
|
185
|
-
makeStyles: PropTypes.func,
|
|
186
|
-
// eslint-disable-next-line react/require-default-props
|
|
187
|
-
styles: PropTypes.object,
|
|
188
|
-
label: PropTypes.node.isRequired,
|
|
189
|
-
allowMultiple: PropTypes.bool,
|
|
190
|
-
|
|
191
|
-
/**
|
|
192
|
-
* children of type `Menu.Item`, `Menu.Separator`
|
|
193
|
-
*/
|
|
194
|
-
children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* an array of the values (or indices by default) for the selected items
|
|
198
|
-
*/
|
|
199
|
-
selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* an array of the values (or indices by default) for the selected items on initial render
|
|
203
|
-
*/
|
|
204
|
-
defaultSelected: PropTypes.array,
|
|
205
|
-
|
|
206
|
-
/**
|
|
207
|
-
* call this function when a menu item is selected
|
|
208
|
-
*/
|
|
209
|
-
onSelect: PropTypes.func,
|
|
210
|
-
onMouseOver: PropTypes.func,
|
|
211
|
-
onKeyDown: PropTypes.func,
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* the id of the element that the menu items will act upon
|
|
215
|
-
*/
|
|
216
|
-
controls: PropTypes.string,
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* returns a reference to the `MenuItem`
|
|
220
|
-
*/
|
|
221
|
-
itemRef: PropTypes.func,
|
|
222
|
-
disabled: PropTypes.bool,
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
* should the group appear in the tab order (the first item will have a tabIndex of 0)
|
|
226
|
-
*/
|
|
227
|
-
isTabbable: PropTypes.bool
|
|
228
|
-
}, _class2.defaultProps = {
|
|
229
|
-
onMouseOver: void 0,
|
|
185
|
+
}, _class2.displayName = "MenuItemGroup", _class2.componentId = 'Menu.Group', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
230
186
|
disabled: false,
|
|
231
|
-
controls: void 0,
|
|
232
|
-
onKeyDown: void 0,
|
|
233
|
-
selected: void 0,
|
|
234
187
|
children: null,
|
|
235
188
|
isTabbable: false,
|
|
236
189
|
allowMultiple: false,
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* The MIT License (MIT)
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2015 - present Instructure, Inc.
|
|
5
|
+
*
|
|
6
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
* in the Software without restriction, including without limitation the rights
|
|
9
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
* furnished to do so, subject to the following conditions:
|
|
12
|
+
*
|
|
13
|
+
* The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
* copies or substantial portions of the Software.
|
|
15
|
+
*
|
|
16
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
* SOFTWARE.
|
|
23
|
+
*/
|
|
24
|
+
import PropTypes from 'prop-types';
|
|
25
|
+
import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
26
|
+
import { MenuItem } from '../MenuItem';
|
|
27
|
+
import { MenuItemSeparator } from '../MenuItemSeparator';
|
|
28
|
+
const propTypes = {
|
|
29
|
+
label: PropTypes.node.isRequired,
|
|
30
|
+
allowMultiple: PropTypes.bool,
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* children of type `Menu.Item`, `Menu.Separator`
|
|
34
|
+
*/
|
|
35
|
+
children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* an array of the values (or indices by default) for the selected items
|
|
39
|
+
*/
|
|
40
|
+
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
|
+
defaultSelected: PropTypes.array,
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* call this function when a menu item is selected
|
|
49
|
+
*/
|
|
50
|
+
onSelect: PropTypes.func,
|
|
51
|
+
onMouseOver: PropTypes.func,
|
|
52
|
+
onKeyDown: PropTypes.func,
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* the id of the element that the menu items will act upon
|
|
56
|
+
*/
|
|
57
|
+
controls: PropTypes.string,
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* returns a reference to the `MenuItem`
|
|
61
|
+
*/
|
|
62
|
+
itemRef: PropTypes.func,
|
|
63
|
+
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
|
+
isTabbable: PropTypes.bool
|
|
69
|
+
};
|
|
70
|
+
const allowedProps = ['label', 'allowMultiple', 'children', 'selected', 'defaultSelected', 'onSelect', 'onMouseOver', 'onKeyDown', 'controls', 'itemRef', 'disabled', 'isTabbable'];
|
|
71
|
+
export { propTypes, allowedProps };
|
|
@@ -26,12 +26,12 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
26
26
|
|
|
27
27
|
/** @jsx jsx */
|
|
28
28
|
import { Component } from 'react';
|
|
29
|
-
import PropTypes from 'prop-types';
|
|
30
29
|
import { withStyle, jsx } from '@instructure/emotion';
|
|
31
30
|
import { testable } from '@instructure/ui-testable';
|
|
32
31
|
import { omitProps } from '@instructure/ui-react-utils';
|
|
33
32
|
import generateStyle from './styles';
|
|
34
33
|
import generateComponentTheme from './theme';
|
|
34
|
+
import { propTypes, allowedProps } from './props';
|
|
35
35
|
|
|
36
36
|
/**
|
|
37
37
|
---
|
|
@@ -50,18 +50,15 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
render() {
|
|
53
|
+
var _this$props$styles;
|
|
54
|
+
|
|
53
55
|
const props = omitProps(this.props, MenuItemSeparator.propTypes);
|
|
54
56
|
return jsx("div", Object.assign({}, props, {
|
|
55
57
|
role: "presentation",
|
|
56
|
-
css: this.props.styles.menuItemSeparator
|
|
58
|
+
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator
|
|
57
59
|
}));
|
|
58
60
|
}
|
|
59
61
|
|
|
60
|
-
}, _class2.displayName = "MenuItemSeparator", _class2.componentId = 'Menu.Separator', _class2.propTypes =
|
|
61
|
-
// eslint-disable-next-line react/require-default-props
|
|
62
|
-
makeStyles: PropTypes.func,
|
|
63
|
-
// eslint-disable-next-line react/require-default-props
|
|
64
|
-
styles: PropTypes.object
|
|
65
|
-
}, _temp)) || _class) || _class);
|
|
62
|
+
}, _class2.displayName = "MenuItemSeparator", _class2.componentId = 'Menu.Separator', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _temp)) || _class) || _class);
|
|
66
63
|
export default MenuItemSeparator;
|
|
67
64
|
export { MenuItemSeparator };
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
24
|
+
// keeping here to keep the structure of props.ts
|
|
25
|
+
// eslint-disable-next-line
|
|
26
|
+
const propTypes = {};
|
|
27
|
+
const allowedProps = [];
|
|
28
|
+
export { propTypes, allowedProps };
|
package/es/Menu/index.js
CHANGED
|
@@ -26,12 +26,9 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
26
26
|
|
|
27
27
|
/** @jsx jsx */
|
|
28
28
|
import { Children, Component } from 'react';
|
|
29
|
-
import PropTypes from 'prop-types';
|
|
30
29
|
import keycode from 'keycode';
|
|
31
30
|
import { Popover } from '@instructure/ui-popover';
|
|
32
31
|
import { uid } from '@instructure/uid';
|
|
33
|
-
import { controllable, Children as ChildrenPropTypes } from '@instructure/ui-prop-types';
|
|
34
|
-
import { PositionPropTypes } from '@instructure/ui-position';
|
|
35
32
|
import { safeCloneElement, matchComponentTypes } from '@instructure/ui-react-utils';
|
|
36
33
|
import { logError as error } from '@instructure/console';
|
|
37
34
|
import { containsActiveElement } from '@instructure/ui-dom-utils';
|
|
@@ -43,6 +40,7 @@ import { MenuItemSeparator } from './MenuItemSeparator';
|
|
|
43
40
|
import { withStyle, jsx } from '@instructure/emotion';
|
|
44
41
|
import generateStyle from './styles';
|
|
45
42
|
import generateComponentTheme from './theme';
|
|
43
|
+
import { propTypes, allowedProps } from './props';
|
|
46
44
|
|
|
47
45
|
/**
|
|
48
46
|
---
|
|
@@ -326,6 +324,8 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
326
324
|
}
|
|
327
325
|
|
|
328
326
|
renderMenu() {
|
|
327
|
+
var _this$props$styles;
|
|
328
|
+
|
|
329
329
|
const _this$props2 = this.props,
|
|
330
330
|
menuRef = _this$props2.menuRef,
|
|
331
331
|
disabled = _this$props2.disabled,
|
|
@@ -346,7 +346,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
346
346
|
role: "menu",
|
|
347
347
|
"aria-label": label,
|
|
348
348
|
tabIndex: "0",
|
|
349
|
-
css: this.props.styles.menu,
|
|
349
|
+
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
|
|
350
350
|
"aria-labelledby": labelledBy || trigger && this._labelId,
|
|
351
351
|
"aria-controls": controls,
|
|
352
352
|
"aria-disabled": disabled ? 'true' : null,
|
|
@@ -422,150 +422,7 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
422
422
|
}, this.renderMenu()) : this.renderMenu();
|
|
423
423
|
}
|
|
424
424
|
|
|
425
|
-
}, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = {
|
|
426
|
-
// eslint-disable-next-line react/require-default-props
|
|
427
|
-
makeStyles: PropTypes.func,
|
|
428
|
-
// eslint-disable-next-line react/require-default-props
|
|
429
|
-
styles: PropTypes.object,
|
|
430
|
-
|
|
431
|
-
/**
|
|
432
|
-
* Children of type `Menu.Item`, `Menu.Group`, `Menu.Separator`, or `Menu`
|
|
433
|
-
*/
|
|
434
|
-
children: ChildrenPropTypes.oneOf(['MenuItem', 'MenuItemGroup', 'MenuItemSeparator', 'Menu']),
|
|
435
|
-
|
|
436
|
-
/**
|
|
437
|
-
* Description of the `<Menu />`
|
|
438
|
-
*/
|
|
439
|
-
label: PropTypes.string,
|
|
440
|
-
|
|
441
|
-
/**
|
|
442
|
-
* Is the `<Menu />` disabled
|
|
443
|
-
*/
|
|
444
|
-
disabled: PropTypes.bool,
|
|
445
|
-
|
|
446
|
-
/**
|
|
447
|
-
* The trigger element, if the `<Menu />` is to render as a popover
|
|
448
|
-
*/
|
|
449
|
-
trigger: PropTypes.node,
|
|
450
|
-
|
|
451
|
-
/**
|
|
452
|
-
* If a trigger is supplied, where should the `<Menu />` be placed (relative to the trigger)
|
|
453
|
-
*/
|
|
454
|
-
placement: PositionPropTypes.placement,
|
|
455
|
-
|
|
456
|
-
/**
|
|
457
|
-
* Should the `<Menu />` be open for the initial render
|
|
458
|
-
*/
|
|
459
|
-
defaultShow: PropTypes.bool,
|
|
460
|
-
|
|
461
|
-
/**
|
|
462
|
-
* Is the `<Menu />` open (should be accompanied by `onToggle`)
|
|
463
|
-
*/
|
|
464
|
-
show: controllable(PropTypes.bool, 'onToggle', 'defaultShow'),
|
|
465
|
-
|
|
466
|
-
/**
|
|
467
|
-
* Callback fired when the `<Menu />` is toggled open/closed. When used with `show`,
|
|
468
|
-
* the component will not control its own state.
|
|
469
|
-
*/
|
|
470
|
-
onToggle: PropTypes.func,
|
|
471
|
-
|
|
472
|
-
/**
|
|
473
|
-
* Callback fired when an item within the `<Menu />` is selected
|
|
474
|
-
*/
|
|
475
|
-
onSelect: PropTypes.func,
|
|
476
|
-
|
|
477
|
-
/**
|
|
478
|
-
* If a trigger is supplied, callback fired when the `<Menu />` is closed
|
|
479
|
-
*/
|
|
480
|
-
onDismiss: PropTypes.func,
|
|
481
|
-
|
|
482
|
-
/**
|
|
483
|
-
* If a trigger is supplied, callback fired when the `<Menu />` trigger is blurred
|
|
484
|
-
*/
|
|
485
|
-
onBlur: PropTypes.func,
|
|
486
|
-
|
|
487
|
-
/**
|
|
488
|
-
* If a trigger is supplied, callback fired when the `<Menu />` trigger is focused
|
|
489
|
-
*/
|
|
490
|
-
onFocus: PropTypes.func,
|
|
491
|
-
|
|
492
|
-
/**
|
|
493
|
-
* If a trigger is supplied, callback fired onMouseOver for the `<Menu />` trigger
|
|
494
|
-
*/
|
|
495
|
-
onMouseOver: PropTypes.func,
|
|
496
|
-
|
|
497
|
-
/**
|
|
498
|
-
* Callback fired on the onKeyDown of the `<Menu />`
|
|
499
|
-
*/
|
|
500
|
-
onKeyDown: PropTypes.func,
|
|
501
|
-
|
|
502
|
-
/**
|
|
503
|
-
* Callback fired on the onKeyUp of the `<Menu />`
|
|
504
|
-
*/
|
|
505
|
-
onKeyUp: PropTypes.func,
|
|
506
|
-
|
|
507
|
-
/*
|
|
508
|
-
* A function that returns a reference to the `<Menu />`
|
|
509
|
-
*/
|
|
510
|
-
menuRef: PropTypes.func,
|
|
511
|
-
|
|
512
|
-
/**
|
|
513
|
-
* A function that returns a reference to the `<Popover />`
|
|
514
|
-
*/
|
|
515
|
-
popoverRef: PropTypes.func,
|
|
516
|
-
|
|
517
|
-
/**
|
|
518
|
-
* If a trigger is supplied, an element or a function returning an element to use as the mount node
|
|
519
|
-
* for the `<Menu />` (defaults to `document.body`)
|
|
520
|
-
*/
|
|
521
|
-
mountNode: PositionPropTypes.mountNode,
|
|
522
|
-
|
|
523
|
-
/**
|
|
524
|
-
* The parent in which to constrain the menu.
|
|
525
|
-
* One of: 'window', 'scroll-parent', 'parent', 'none', an element,
|
|
526
|
-
* or a function returning an element
|
|
527
|
-
*/
|
|
528
|
-
constrain: PositionPropTypes.constrain,
|
|
529
|
-
|
|
530
|
-
/**
|
|
531
|
-
* If a trigger is supplied, an element, function returning an element, or array of elements that will not
|
|
532
|
-
* be hidden from the screen reader when the `<Menu />` is open
|
|
533
|
-
*/
|
|
534
|
-
liveRegion: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.func]),
|
|
535
|
-
|
|
536
|
-
/**
|
|
537
|
-
* If a trigger is supplied, should the `<Menu />` hide when an item is selected
|
|
538
|
-
*/
|
|
539
|
-
shouldHideOnSelect: PropTypes.bool,
|
|
540
|
-
|
|
541
|
-
/**
|
|
542
|
-
* If a trigger is supplied, should the `<Menu />` focus the trigger on after closing
|
|
543
|
-
*/
|
|
544
|
-
shouldFocusTriggerOnClose: PropTypes.bool,
|
|
545
|
-
|
|
546
|
-
/**
|
|
547
|
-
* The type of `<Menu />`
|
|
548
|
-
*/
|
|
549
|
-
type: PropTypes.oneOf(['flyout']),
|
|
550
|
-
id: PropTypes.string,
|
|
551
|
-
|
|
552
|
-
/**
|
|
553
|
-
* Whether or not an arrow pointing to the trigger should be rendered
|
|
554
|
-
*/
|
|
555
|
-
withArrow: PropTypes.bool,
|
|
556
|
-
|
|
557
|
-
/**
|
|
558
|
-
* The horizontal offset for the positioned content.
|
|
559
|
-
* Works only if `trigger` is provided.
|
|
560
|
-
*/
|
|
561
|
-
offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
562
|
-
|
|
563
|
-
/**
|
|
564
|
-
* The vertical offset for the positioned content.
|
|
565
|
-
* Works only if `trigger` is provided.
|
|
566
|
-
*/
|
|
567
|
-
offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
568
|
-
}, _class2.defaultProps = {
|
|
425
|
+
}, _class2.displayName = "Menu", _class2.componentId = 'Menu', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
|
|
569
426
|
children: null,
|
|
570
427
|
label: null,
|
|
571
428
|
disabled: false,
|
|
@@ -587,9 +444,6 @@ let Menu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
587
444
|
liveRegion: null,
|
|
588
445
|
shouldHideOnSelect: true,
|
|
589
446
|
shouldFocusTriggerOnClose: true,
|
|
590
|
-
show: void 0,
|
|
591
|
-
id: void 0,
|
|
592
|
-
type: void 0,
|
|
593
447
|
withArrow: true,
|
|
594
448
|
offsetX: 0,
|
|
595
449
|
offsetY: 0
|