@instructure/ui-menu 8.13.1-snapshot.3 → 8.13.1-snapshot.41

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.
Files changed (45) hide show
  1. package/es/Menu/MenuItem/index.js +28 -21
  2. package/es/Menu/MenuItem/props.js +0 -23
  3. package/es/Menu/MenuItemGroup/index.js +17 -13
  4. package/es/Menu/MenuItemGroup/props.js +1 -30
  5. package/es/Menu/MenuItemSeparator/index.js +6 -2
  6. package/es/Menu/index.js +56 -52
  7. package/es/Menu/props.js +1 -113
  8. package/es/MenuContext.js +3 -3
  9. package/lib/Menu/MenuItem/index.js +28 -21
  10. package/lib/Menu/MenuItem/props.js +0 -23
  11. package/lib/Menu/MenuItemGroup/index.js +17 -13
  12. package/lib/Menu/MenuItemGroup/props.js +1 -30
  13. package/lib/Menu/MenuItemSeparator/index.js +6 -2
  14. package/lib/Menu/index.js +58 -52
  15. package/lib/Menu/props.js +1 -113
  16. package/lib/MenuContext.js +2 -2
  17. package/package.json +21 -21
  18. package/src/Menu/MenuItem/index.tsx +24 -34
  19. package/src/Menu/MenuItem/props.ts +36 -27
  20. package/src/Menu/MenuItemGroup/index.tsx +28 -48
  21. package/src/Menu/MenuItemGroup/props.ts +37 -30
  22. package/src/Menu/MenuItemSeparator/index.tsx +2 -4
  23. package/src/Menu/index.tsx +79 -133
  24. package/src/Menu/props.ts +76 -84
  25. package/src/MenuContext.ts +3 -2
  26. package/tsconfig.build.json +25 -2
  27. package/tsconfig.build.tsbuildinfo +1 -0
  28. package/types/Menu/MenuItem/MenuItemLocator.d.ts +52 -52
  29. package/types/Menu/MenuItem/index.d.ts +24 -23
  30. package/types/Menu/MenuItem/index.d.ts.map +1 -1
  31. package/types/Menu/MenuItem/props.d.ts +30 -7
  32. package/types/Menu/MenuItem/props.d.ts.map +1 -1
  33. package/types/Menu/MenuItemGroup/MenuItemGroupLocator.d.ts +182 -182
  34. package/types/Menu/MenuItemGroup/index.d.ts +22 -22
  35. package/types/Menu/MenuItemGroup/index.d.ts.map +1 -1
  36. package/types/Menu/MenuItemGroup/props.d.ts +33 -8
  37. package/types/Menu/MenuItemGroup/props.d.ts.map +1 -1
  38. package/types/Menu/MenuItemSeparator/index.d.ts.map +1 -1
  39. package/types/Menu/MenuLocator.d.ts +576 -576
  40. package/types/Menu/index.d.ts +57 -67
  41. package/types/Menu/index.d.ts.map +1 -1
  42. package/types/Menu/props.d.ts +94 -16
  43. package/types/Menu/props.d.ts.map +1 -1
  44. package/types/MenuContext.d.ts +3 -2
  45. 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).click(); // eslint-disable-line react/no-find-dom-node
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).click(); // eslint-disable-line react/no-find-dom-node
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
- this.props.makeStyles();
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
- this.props.makeStyles();
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).focus(); // eslint-disable-line react/no-find-dom-node
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$props2 = this.props,
193
- children = _this$props2.children,
194
- type = _this$props2.type;
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$props3 = this.props,
209
- disabled = _this$props3.disabled,
210
- controls = _this$props3.controls,
211
- onKeyDown = _this$props3.onKeyDown,
212
- onKeyUp = _this$props3.onKeyUp,
213
- type = _this$props3.type,
214
- href = _this$props3.href;
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 // eslint-disable-line jsx-a11y/mouse-events-have-key-events
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
- this.props.makeStyles();
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
- this.props.makeStyles();
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$props = this.props,
143
- children = _this$props.children,
144
- disabled = _this$props.disabled,
145
- controls = _this$props.controls,
146
- allowMultiple = _this$props.allowMultiple,
147
- isTabbable = _this$props.isTabbable,
148
- onMouseOver = _this$props.onMouseOver;
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', 'onKeyDown', 'controls', 'itemRef', 'disabled', 'isTabbable'];
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
- this.props.makeStyles();
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
- this.props.makeStyles();
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 = null;
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
- this.props.makeStyles();
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(prevProps) {
208
- this.props.makeStyles();
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
- error(this._menu && this._menu.focus, '[Menu] Could not focus the menu.');
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
- error(this._trigger && this._trigger.focus, '[Menu] Could not focus the trigger.');
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$props = this.props,
260
- children = _this$props.children,
261
- disabled = _this$props.disabled;
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 controls = child.props['aria-controls'] || child.props.controls || this.props['aria-controls'] || // eslint-disable-line react/prop-types
278
- this.props.controls; // eslint-disable-line react/prop-types
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$props2 = this.props,
340
- disabled = _this$props2.disabled,
341
- label = _this$props2.label,
342
- trigger = _this$props2.trigger,
343
- onKeyUp = _this$props2.onKeyUp;
344
- const labelledBy = this.props['aria-labelledby']; // eslint-disable-line react/prop-types
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 && this._labelId,
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$props3 = this.props,
369
- show = _this$props3.show,
370
- defaultShow = _this$props3.defaultShow,
371
- placement = _this$props3.placement,
372
- withArrow = _this$props3.withArrow,
373
- trigger = _this$props3.trigger,
374
- mountNode = _this$props3.mountNode,
375
- popoverRef = _this$props3.popoverRef,
376
- disabled = _this$props3.disabled,
377
- onDismiss = _this$props3.onDismiss,
378
- onFocus = _this$props3.onFocus,
379
- onMouseOver = _this$props3.onMouseOver,
380
- offsetX = _this$props3.offsetX,
381
- offsetY = _this$props3.offsetY;
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
- onDismiss(event, documentClick);
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', 'onBlur', 'onFocus', 'onMouseOver', 'onKeyDown', 'onKeyUp', 'menuRef', 'popoverRef', 'mountNode', 'constrain', 'liveRegion', 'shouldHideOnSelect', 'shouldFocusTriggerOnClose', 'type', 'id', 'withArrow', 'offsetX', 'offsetY'];
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 };