@instructure/ui-menu 8.17.1-snapshot.21 → 8.17.1-snapshot.71
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 +16 -24
- package/es/Menu/MenuItem/theme.js +13 -13
- package/es/Menu/MenuItemGroup/index.js +11 -19
- package/es/Menu/MenuItemGroup/theme.js +6 -6
- package/es/Menu/MenuItemSeparator/index.js +3 -9
- package/es/Menu/MenuItemSeparator/theme.js +3 -3
- package/es/Menu/index.js +28 -38
- package/es/Menu/theme.js +7 -7
- package/lib/Menu/MenuItem/index.js +16 -24
- package/lib/Menu/MenuItem/theme.js +13 -13
- package/lib/Menu/MenuItemGroup/index.js +11 -19
- package/lib/Menu/MenuItemGroup/theme.js +6 -6
- package/lib/Menu/MenuItemSeparator/index.js +3 -9
- package/lib/Menu/MenuItemSeparator/theme.js +3 -3
- package/lib/Menu/index.js +28 -38
- package/lib/Menu/theme.js +7 -7
- package/package.json +20 -20
- package/tsconfig.build.tsbuildinfo +1 -1
package/lib/Menu/index.js
CHANGED
|
@@ -225,15 +225,11 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
componentDidMount() {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
228
|
+
this.props.makeStyles?.();
|
|
231
229
|
}
|
|
232
230
|
|
|
233
231
|
componentDidUpdate() {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
232
|
+
this.props.makeStyles?.();
|
|
237
233
|
}
|
|
238
234
|
|
|
239
235
|
get menuItems() {
|
|
@@ -242,15 +238,11 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
242
238
|
|
|
243
239
|
focus() {
|
|
244
240
|
if (this.shown) {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
(0, _console.logError)(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
|
|
241
|
+
(0, _console.logError)(!!this._menu?.focus, '[Menu] Could not focus the menu.');
|
|
248
242
|
|
|
249
243
|
this._menu.focus();
|
|
250
244
|
} else {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
(0, _console.logError)(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
|
|
245
|
+
(0, _console.logError)(!!this._trigger?.focus, '[Menu] Could not focus the trigger.');
|
|
254
246
|
|
|
255
247
|
this._trigger.focus();
|
|
256
248
|
}
|
|
@@ -288,9 +280,9 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
288
280
|
}
|
|
289
281
|
|
|
290
282
|
renderChildren() {
|
|
291
|
-
const _this$
|
|
292
|
-
children = _this$
|
|
293
|
-
disabled = _this$
|
|
283
|
+
const _this$props = this.props,
|
|
284
|
+
children = _this$props.children,
|
|
285
|
+
disabled = _this$props.disabled;
|
|
294
286
|
let count = 0;
|
|
295
287
|
return _react.Children.map(children, child => {
|
|
296
288
|
if (!(0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
|
|
@@ -370,13 +362,11 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
370
362
|
}
|
|
371
363
|
|
|
372
364
|
renderMenu() {
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
trigger = _this$props4.trigger,
|
|
379
|
-
onKeyUp = _this$props4.onKeyUp;
|
|
365
|
+
const _this$props2 = this.props,
|
|
366
|
+
disabled = _this$props2.disabled,
|
|
367
|
+
label = _this$props2.label,
|
|
368
|
+
trigger = _this$props2.trigger,
|
|
369
|
+
onKeyUp = _this$props2.onKeyUp;
|
|
380
370
|
const labelledBy = this.props['aria-labelledby'];
|
|
381
371
|
const controls = this.props['aria-controls'];
|
|
382
372
|
return (0, _emotion.jsx)(_MenuContext.MenuContext.Provider, {
|
|
@@ -388,7 +378,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
388
378
|
role: "menu",
|
|
389
379
|
"aria-label": label,
|
|
390
380
|
tabIndex: 0,
|
|
391
|
-
css:
|
|
381
|
+
css: this.props.styles?.menu,
|
|
392
382
|
"aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
|
|
393
383
|
"aria-controls": controls,
|
|
394
384
|
"aria-disabled": disabled ? 'true' : void 0,
|
|
@@ -399,20 +389,20 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
399
389
|
}
|
|
400
390
|
|
|
401
391
|
render() {
|
|
402
|
-
const _this$
|
|
403
|
-
show = _this$
|
|
404
|
-
defaultShow = _this$
|
|
405
|
-
placement = _this$
|
|
406
|
-
withArrow = _this$
|
|
407
|
-
trigger = _this$
|
|
408
|
-
mountNode = _this$
|
|
409
|
-
popoverRef = _this$
|
|
410
|
-
disabled = _this$
|
|
411
|
-
onDismiss = _this$
|
|
412
|
-
onFocus = _this$
|
|
413
|
-
onMouseOver = _this$
|
|
414
|
-
offsetX = _this$
|
|
415
|
-
offsetY = _this$
|
|
392
|
+
const _this$props3 = this.props,
|
|
393
|
+
show = _this$props3.show,
|
|
394
|
+
defaultShow = _this$props3.defaultShow,
|
|
395
|
+
placement = _this$props3.placement,
|
|
396
|
+
withArrow = _this$props3.withArrow,
|
|
397
|
+
trigger = _this$props3.trigger,
|
|
398
|
+
mountNode = _this$props3.mountNode,
|
|
399
|
+
popoverRef = _this$props3.popoverRef,
|
|
400
|
+
disabled = _this$props3.disabled,
|
|
401
|
+
onDismiss = _this$props3.onDismiss,
|
|
402
|
+
onFocus = _this$props3.onFocus,
|
|
403
|
+
onMouseOver = _this$props3.onMouseOver,
|
|
404
|
+
offsetX = _this$props3.offsetX,
|
|
405
|
+
offsetY = _this$props3.offsetY;
|
|
416
406
|
return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
|
|
417
407
|
isShowingContent: show,
|
|
418
408
|
defaultIsShowingContent: defaultShow,
|
|
@@ -447,7 +437,7 @@ let Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0,
|
|
|
447
437
|
renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
|
|
448
438
|
ref: el => {
|
|
449
439
|
this._trigger = el;
|
|
450
|
-
this.ref =
|
|
440
|
+
this.ref = el?.ref || el;
|
|
451
441
|
},
|
|
452
442
|
'aria-haspopup': true,
|
|
453
443
|
id: this._labelId,
|
package/lib/Menu/theme.js
CHANGED
|
@@ -39,13 +39,13 @@ const generateComponentTheme = theme => {
|
|
|
39
39
|
breakpoints = theme.breakpoints,
|
|
40
40
|
borders = theme.borders;
|
|
41
41
|
const componentVariables = {
|
|
42
|
-
minWidth: breakpoints
|
|
43
|
-
maxWidth: breakpoints
|
|
44
|
-
background: colors
|
|
45
|
-
focusBorderStyle: borders
|
|
46
|
-
focusBorderWidth: borders
|
|
47
|
-
focusBorderColor: colors
|
|
48
|
-
focusBorderRadius: borders
|
|
42
|
+
minWidth: breakpoints?.xxSmall,
|
|
43
|
+
maxWidth: breakpoints?.xSmall,
|
|
44
|
+
background: colors?.backgroundLightest,
|
|
45
|
+
focusBorderStyle: borders?.style,
|
|
46
|
+
focusBorderWidth: borders?.widthMedium,
|
|
47
|
+
focusBorderColor: colors?.borderBrand,
|
|
48
|
+
focusBorderRadius: borders?.radiusMedium
|
|
49
49
|
};
|
|
50
50
|
return { ...componentVariables
|
|
51
51
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-menu",
|
|
3
|
-
"version": "8.17.1-snapshot.
|
|
3
|
+
"version": "8.17.1-snapshot.71+34dfb2442",
|
|
4
4
|
"description": "A dropdown menu component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,27 +23,27 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-babel-preset": "8.17.1-snapshot.
|
|
27
|
-
"@instructure/ui-color-utils": "8.17.1-snapshot.
|
|
28
|
-
"@instructure/ui-test-locator": "8.17.1-snapshot.
|
|
29
|
-
"@instructure/ui-test-queries": "8.17.1-snapshot.
|
|
30
|
-
"@instructure/ui-test-utils": "8.17.1-snapshot.
|
|
31
|
-
"@instructure/ui-themes": "8.17.1-snapshot.
|
|
26
|
+
"@instructure/ui-babel-preset": "8.17.1-snapshot.71+34dfb2442",
|
|
27
|
+
"@instructure/ui-color-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
28
|
+
"@instructure/ui-test-locator": "8.17.1-snapshot.71+34dfb2442",
|
|
29
|
+
"@instructure/ui-test-queries": "8.17.1-snapshot.71+34dfb2442",
|
|
30
|
+
"@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
31
|
+
"@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.13.10",
|
|
35
|
-
"@instructure/console": "8.17.1-snapshot.
|
|
36
|
-
"@instructure/emotion": "8.17.1-snapshot.
|
|
37
|
-
"@instructure/shared-types": "8.17.1-snapshot.
|
|
38
|
-
"@instructure/ui-a11y-utils": "8.17.1-snapshot.
|
|
39
|
-
"@instructure/ui-dom-utils": "8.17.1-snapshot.
|
|
40
|
-
"@instructure/ui-icons": "8.17.1-snapshot.
|
|
41
|
-
"@instructure/ui-popover": "8.17.1-snapshot.
|
|
42
|
-
"@instructure/ui-position": "8.17.1-snapshot.
|
|
43
|
-
"@instructure/ui-prop-types": "8.17.1-snapshot.
|
|
44
|
-
"@instructure/ui-react-utils": "8.17.1-snapshot.
|
|
45
|
-
"@instructure/ui-testable": "8.17.1-snapshot.
|
|
46
|
-
"@instructure/ui-utils": "8.17.1-snapshot.
|
|
35
|
+
"@instructure/console": "8.17.1-snapshot.71+34dfb2442",
|
|
36
|
+
"@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
|
|
37
|
+
"@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
|
|
38
|
+
"@instructure/ui-a11y-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
39
|
+
"@instructure/ui-dom-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
40
|
+
"@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
|
|
41
|
+
"@instructure/ui-popover": "8.17.1-snapshot.71+34dfb2442",
|
|
42
|
+
"@instructure/ui-position": "8.17.1-snapshot.71+34dfb2442",
|
|
43
|
+
"@instructure/ui-prop-types": "8.17.1-snapshot.71+34dfb2442",
|
|
44
|
+
"@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
45
|
+
"@instructure/ui-testable": "8.17.1-snapshot.71+34dfb2442",
|
|
46
|
+
"@instructure/ui-utils": "8.17.1-snapshot.71+34dfb2442",
|
|
47
47
|
"keycode": "^2",
|
|
48
48
|
"prop-types": "^15"
|
|
49
49
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
56
|
"sideEffects": false,
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
|
|
58
58
|
}
|