@instructure/ui-menu 8.17.1-snapshot.21 → 8.17.1-snapshot.30

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 (18) hide show
  1. package/es/Menu/MenuItem/index.js +16 -24
  2. package/es/Menu/MenuItem/theme.js +13 -13
  3. package/es/Menu/MenuItemGroup/index.js +11 -19
  4. package/es/Menu/MenuItemGroup/theme.js +6 -6
  5. package/es/Menu/MenuItemSeparator/index.js +3 -9
  6. package/es/Menu/MenuItemSeparator/theme.js +3 -3
  7. package/es/Menu/index.js +28 -38
  8. package/es/Menu/theme.js +7 -7
  9. package/lib/Menu/MenuItem/index.js +16 -24
  10. package/lib/Menu/MenuItem/theme.js +13 -13
  11. package/lib/Menu/MenuItemGroup/index.js +11 -19
  12. package/lib/Menu/MenuItemGroup/theme.js +6 -6
  13. package/lib/Menu/MenuItemSeparator/index.js +3 -9
  14. package/lib/Menu/MenuItemSeparator/theme.js +3 -3
  15. package/lib/Menu/index.js +28 -38
  16. package/lib/Menu/theme.js +7 -7
  17. package/package.json +20 -20
  18. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Menu/MenuItem/index.js CHANGED
@@ -137,9 +137,7 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
137
137
  }
138
138
 
139
139
  componentDidMount() {
140
- var _this$props$makeStyle, _this$props2;
141
-
142
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
140
+ this.props.makeStyles?.();
143
141
  const context = this.context;
144
142
 
145
143
  if (context && context.registerMenuItem) {
@@ -148,9 +146,7 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
148
146
  }
149
147
 
150
148
  componentDidUpdate() {
151
- var _this$props$makeStyle2, _this$props3;
152
-
153
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
149
+ this.props.makeStyles?.();
154
150
  }
155
151
 
156
152
  componentWillUnmount() {
@@ -195,31 +191,27 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
195
191
  }
196
192
 
197
193
  renderContent() {
198
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
199
-
200
- const _this$props4 = this.props,
201
- children = _this$props4.children,
202
- type = _this$props4.type;
194
+ const _this$props2 = this.props,
195
+ children = _this$props2.children,
196
+ type = _this$props2.type;
203
197
  return jsx("span", null, (type === 'checkbox' || type === 'radio') && jsx("span", {
204
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
198
+ css: this.props.styles?.icon
205
199
  }, this.selected && (_IconCheckSolid || (_IconCheckSolid = jsx(IconCheckSolid, null)))), jsx("span", {
206
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
200
+ css: this.props.styles?.label,
207
201
  id: this.labelId
208
202
  }, children), type === 'flyout' && jsx("span", {
209
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
203
+ css: this.props.styles?.icon
210
204
  }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = jsx(IconArrowOpenEndSolid, null))));
211
205
  }
212
206
 
213
207
  render() {
214
- var _this$props$styles4;
215
-
216
- const _this$props5 = this.props,
217
- disabled = _this$props5.disabled,
218
- controls = _this$props5.controls,
219
- onKeyDown = _this$props5.onKeyDown,
220
- onKeyUp = _this$props5.onKeyUp,
221
- type = _this$props5.type,
222
- href = _this$props5.href;
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;
223
215
  const props = omitProps(this.props, MenuItem.allowedProps);
224
216
  const ElementType = this.elementType;
225
217
  return jsx(ElementType, Object.assign({
@@ -236,7 +228,7 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
236
228
  onKeyUp: createChainedFunction(onKeyUp, this.handleKeyUp),
237
229
  onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
238
230
  ref: this.handleRef,
239
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
231
+ css: this.props.styles?.menuItem,
240
232
  onMouseOver: this.handleMouseOver
241
233
  }), this.renderContent());
242
234
  }
package/es/Menu/MenuItem/theme.js CHANGED
@@ -40,19 +40,19 @@ const generateComponentTheme = theme => {
40
40
  }
41
41
  };
42
42
  const componentVariables = {
43
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
47
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
48
- labelPadding: spacing === null || spacing === void 0 ? void 0 : spacing.large,
49
- labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
50
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
51
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
- activeBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
54
- activeLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
- activeIconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
43
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
44
+ fontFamily: typography?.fontFamily,
45
+ fontWeight: typography?.fontWeightNormal,
46
+ lineHeight: typography?.lineHeightCondensed,
47
+ fontSize: typography?.fontSizeMedium,
48
+ labelPadding: spacing?.large,
49
+ labelColor: colors?.textDarkest,
50
+ background: colors?.backgroundLightest,
51
+ iconColor: colors?.textDarkest,
52
+ iconPadding: spacing?.small,
53
+ activeBackground: colors?.backgroundBrand,
54
+ activeLabelColor: colors?.textLightest,
55
+ activeIconColor: colors?.textLightest
56
56
  };
57
57
  return { ...componentVariables,
58
58
  ...themeSpecificStyle[themeName]
package/es/Menu/MenuItemGroup/index.js CHANGED
@@ -100,15 +100,11 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
100
100
  }
101
101
 
102
102
  componentDidMount() {
103
- var _this$props$makeStyle, _this$props;
104
-
105
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
103
+ this.props.makeStyles?.();
106
104
  }
107
105
 
108
106
  componentDidUpdate() {
109
- var _this$props$makeStyle2, _this$props2;
110
-
111
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
107
+ this.props.makeStyles?.();
112
108
  }
113
109
 
114
110
  selectedFromChildren(props) {
@@ -135,21 +131,19 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
135
131
  }
136
132
 
137
133
  renderLabel() {
138
- var _this$props$styles;
139
-
140
134
  const label = this.props.label;
141
135
  return hasVisibleChildren(label) ? jsx("span", {
142
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
136
+ css: this.props.styles?.label
143
137
  }, label) : label;
144
138
  }
145
139
 
146
140
  renderChildren() {
147
- const _this$props3 = this.props,
148
- disabled = _this$props3.disabled,
149
- controls = _this$props3.controls,
150
- allowMultiple = _this$props3.allowMultiple,
151
- isTabbable = _this$props3.isTabbable,
152
- onMouseOver = _this$props3.onMouseOver;
141
+ const _this$props = this.props,
142
+ disabled = _this$props.disabled,
143
+ controls = _this$props.controls,
144
+ allowMultiple = _this$props.allowMultiple,
145
+ isTabbable = _this$props.isTabbable,
146
+ onMouseOver = _this$props.onMouseOver;
153
147
  const children = this.props.children;
154
148
  let index = -1;
155
149
  return Children.map(children, child => {
@@ -177,18 +171,16 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
177
171
  }
178
172
 
179
173
  render() {
180
- var _this$props$styles2, _this$props$styles3;
181
-
182
174
  const props = omitProps(this.props, MenuItemGroup.allowedProps);
183
175
  return jsx("span", Object.assign({}, props, {
184
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
176
+ css: this.props.styles?.menuItemGroup,
185
177
  role: "presentation",
186
178
  ref: this.handleRef
187
179
  }), jsx("span", {
188
180
  id: this._labelId
189
181
  }, this.renderLabel()), jsx("ul", {
190
182
  role: "menu",
191
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
183
+ css: this.props.styles?.items,
192
184
  "aria-disabled": this.props.disabled ? 'true' : void 0,
193
185
  "aria-labelledby": this._labelId
194
186
  }, this.renderChildren()));
package/es/Menu/MenuItemGroup/theme.js CHANGED
@@ -38,12 +38,12 @@ const generateComponentTheme = theme => {
38
38
  }
39
39
  };
40
40
  const componentVariables = {
41
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
42
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
43
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
44
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
45
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
46
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
41
+ fontSize: typography?.fontSizeMedium,
42
+ fontFamily: typography?.fontFamily,
43
+ fontWeight: typography?.fontWeightBold,
44
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
45
+ color: colors?.textDarkest,
46
+ background: colors?.backgroundLightest
47
47
  };
48
48
  return { ...componentVariables,
49
49
  ...themeSpecificStyle[themeName]
package/es/Menu/MenuItemSeparator/index.js CHANGED
@@ -51,24 +51,18 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
51
51
  }
52
52
 
53
53
  componentDidMount() {
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);
54
+ this.props.makeStyles?.();
57
55
  }
58
56
 
59
57
  componentDidUpdate() {
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);
58
+ this.props.makeStyles?.();
63
59
  }
64
60
 
65
61
  render() {
66
- var _this$props$styles;
67
-
68
62
  const props = omitProps(this.props, MenuItemSeparator.allowedProps);
69
63
  return jsx("div", Object.assign({}, props, {
70
64
  role: "presentation",
71
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
65
+ css: this.props.styles?.menuItemSeparator,
72
66
  ref: this.handleRef
73
67
  }));
74
68
  }
package/es/Menu/MenuItemSeparator/theme.js CHANGED
@@ -32,9 +32,9 @@ const generateComponentTheme = theme => {
32
32
  spacing = theme.spacing,
33
33
  borders = theme.borders;
34
34
  const componentVariables = {
35
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
36
- height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
37
- margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
35
+ background: colors?.backgroundMedium,
36
+ height: borders?.widthSmall,
37
+ margin: `0 ${spacing?.small}`
38
38
  };
39
39
  return { ...componentVariables
40
40
  };
package/es/Menu/index.js CHANGED
@@ -202,15 +202,11 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
202
202
  }
203
203
 
204
204
  componentDidMount() {
205
- var _this$props$makeStyle, _this$props;
206
-
207
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
205
+ this.props.makeStyles?.();
208
206
  }
209
207
 
210
208
  componentDidUpdate() {
211
- var _this$props$makeStyle2, _this$props2;
212
-
213
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
209
+ this.props.makeStyles?.();
214
210
  }
215
211
 
216
212
  get menuItems() {
@@ -219,15 +215,11 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
219
215
 
220
216
  focus() {
221
217
  if (this.shown) {
222
- var _this$_menu;
223
-
224
- error(!!((_this$_menu = this._menu) !== null && _this$_menu !== void 0 && _this$_menu.focus), '[Menu] Could not focus the menu.');
218
+ error(!!this._menu?.focus, '[Menu] Could not focus the menu.');
225
219
 
226
220
  this._menu.focus();
227
221
  } else {
228
- var _this$_trigger;
229
-
230
- error(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Menu] Could not focus the trigger.');
222
+ error(!!this._trigger?.focus, '[Menu] Could not focus the trigger.');
231
223
 
232
224
  this._trigger.focus();
233
225
  }
@@ -265,9 +257,9 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
265
257
  }
266
258
 
267
259
  renderChildren() {
268
- const _this$props3 = this.props,
269
- children = _this$props3.children,
270
- disabled = _this$props3.disabled;
260
+ const _this$props = this.props,
261
+ children = _this$props.children,
262
+ disabled = _this$props.disabled;
271
263
  let count = 0;
272
264
  return Children.map(children, child => {
273
265
  if (!matchComponentTypes(child, ['MenuItemSeparator', 'MenuItem', 'MenuItemGroup', 'Menu'])) {
@@ -347,13 +339,11 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
347
339
  }
348
340
 
349
341
  renderMenu() {
350
- var _this$props$styles;
351
-
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;
342
+ const _this$props2 = this.props,
343
+ disabled = _this$props2.disabled,
344
+ label = _this$props2.label,
345
+ trigger = _this$props2.trigger,
346
+ onKeyUp = _this$props2.onKeyUp;
357
347
  const labelledBy = this.props['aria-labelledby'];
358
348
  const controls = this.props['aria-controls'];
359
349
  return jsx(MenuContext.Provider, {
@@ -365,7 +355,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
365
355
  role: "menu",
366
356
  "aria-label": label,
367
357
  tabIndex: 0,
368
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menu,
358
+ css: this.props.styles?.menu,
369
359
  "aria-labelledby": labelledBy || (trigger ? this._labelId : void 0),
370
360
  "aria-controls": controls,
371
361
  "aria-disabled": disabled ? 'true' : void 0,
@@ -376,20 +366,20 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
376
366
  }
377
367
 
378
368
  render() {
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;
369
+ const _this$props3 = this.props,
370
+ show = _this$props3.show,
371
+ defaultShow = _this$props3.defaultShow,
372
+ placement = _this$props3.placement,
373
+ withArrow = _this$props3.withArrow,
374
+ trigger = _this$props3.trigger,
375
+ mountNode = _this$props3.mountNode,
376
+ popoverRef = _this$props3.popoverRef,
377
+ disabled = _this$props3.disabled,
378
+ onDismiss = _this$props3.onDismiss,
379
+ onFocus = _this$props3.onFocus,
380
+ onMouseOver = _this$props3.onMouseOver,
381
+ offsetX = _this$props3.offsetX,
382
+ offsetY = _this$props3.offsetY;
393
383
  return trigger ? jsx(Popover, {
394
384
  isShowingContent: show,
395
385
  defaultIsShowingContent: defaultShow,
@@ -424,7 +414,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
424
414
  renderTrigger: safeCloneElement(trigger, {
425
415
  ref: el => {
426
416
  this._trigger = el;
427
- this.ref = (el === null || el === void 0 ? void 0 : el.ref) || el;
417
+ this.ref = el?.ref || el;
428
418
  },
429
419
  'aria-haspopup': true,
430
420
  id: this._labelId,
package/es/Menu/theme.js CHANGED
@@ -32,13 +32,13 @@ const generateComponentTheme = theme => {
32
32
  breakpoints = theme.breakpoints,
33
33
  borders = theme.borders;
34
34
  const componentVariables = {
35
- minWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xxSmall,
36
- maxWidth: breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.xSmall,
37
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
38
- focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
39
- focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
40
- focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
41
- focusBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium
35
+ minWidth: breakpoints?.xxSmall,
36
+ maxWidth: breakpoints?.xSmall,
37
+ background: colors?.backgroundLightest,
38
+ focusBorderStyle: borders?.style,
39
+ focusBorderWidth: borders?.widthMedium,
40
+ focusBorderColor: colors?.borderBrand,
41
+ focusBorderRadius: borders?.radiusMedium
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
package/lib/Menu/MenuItem/index.js CHANGED
@@ -140,9 +140,7 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
140
140
  }
141
141
 
142
142
  componentDidMount() {
143
- var _this$props$makeStyle, _this$props2;
144
-
145
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
143
+ this.props.makeStyles?.();
146
144
  const context = this.context;
147
145
 
148
146
  if (context && context.registerMenuItem) {
@@ -151,9 +149,7 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
151
149
  }
152
150
 
153
151
  componentDidUpdate() {
154
- var _this$props$makeStyle2, _this$props3;
155
-
156
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
152
+ this.props.makeStyles?.();
157
153
  }
158
154
 
159
155
  componentWillUnmount() {
@@ -198,31 +194,27 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
198
194
  }
199
195
 
200
196
  renderContent() {
201
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
202
-
203
- const _this$props4 = this.props,
204
- children = _this$props4.children,
205
- type = _this$props4.type;
197
+ const _this$props2 = this.props,
198
+ children = _this$props2.children,
199
+ type = _this$props2.type;
206
200
  return (0, _emotion.jsx)("span", null, (type === 'checkbox' || type === 'radio') && (0, _emotion.jsx)("span", {
207
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
201
+ css: this.props.styles?.icon
208
202
  }, this.selected && (_IconCheckSolid || (_IconCheckSolid = (0, _emotion.jsx)(_IconCheckSolid2.IconCheckSolid, null)))), (0, _emotion.jsx)("span", {
209
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.label,
203
+ css: this.props.styles?.label,
210
204
  id: this.labelId
211
205
  }, children), type === 'flyout' && (0, _emotion.jsx)("span", {
212
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
206
+ css: this.props.styles?.icon
213
207
  }, _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null))));
214
208
  }
215
209
 
216
210
  render() {
217
- var _this$props$styles4;
218
-
219
- const _this$props5 = this.props,
220
- disabled = _this$props5.disabled,
221
- controls = _this$props5.controls,
222
- onKeyDown = _this$props5.onKeyDown,
223
- onKeyUp = _this$props5.onKeyUp,
224
- type = _this$props5.type,
225
- href = _this$props5.href;
211
+ const _this$props3 = this.props,
212
+ disabled = _this$props3.disabled,
213
+ controls = _this$props3.controls,
214
+ onKeyDown = _this$props3.onKeyDown,
215
+ onKeyUp = _this$props3.onKeyUp,
216
+ type = _this$props3.type,
217
+ href = _this$props3.href;
226
218
  const props = (0, _omitProps.omitProps)(this.props, MenuItem.allowedProps);
227
219
  const ElementType = this.elementType;
228
220
  return (0, _emotion.jsx)(ElementType, Object.assign({
@@ -239,7 +231,7 @@ let MenuItem = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
239
231
  onKeyUp: (0, _createChainedFunction.createChainedFunction)(onKeyUp, this.handleKeyUp),
240
232
  onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
241
233
  ref: this.handleRef,
242
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.menuItem,
234
+ css: this.props.styles?.menuItem,
243
235
  onMouseOver: this.handleMouseOver
244
236
  }), this.renderContent());
245
237
  }
package/lib/Menu/MenuItem/theme.js CHANGED
@@ -47,19 +47,19 @@ const generateComponentTheme = theme => {
47
47
  }
48
48
  };
49
49
  const componentVariables = {
50
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
51
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
52
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
54
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
55
- labelPadding: spacing === null || spacing === void 0 ? void 0 : spacing.large,
56
- labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
57
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
58
- iconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
59
- iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
60
- activeBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
61
- activeLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
62
- activeIconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
50
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
51
+ fontFamily: typography?.fontFamily,
52
+ fontWeight: typography?.fontWeightNormal,
53
+ lineHeight: typography?.lineHeightCondensed,
54
+ fontSize: typography?.fontSizeMedium,
55
+ labelPadding: spacing?.large,
56
+ labelColor: colors?.textDarkest,
57
+ background: colors?.backgroundLightest,
58
+ iconColor: colors?.textDarkest,
59
+ iconPadding: spacing?.small,
60
+ activeBackground: colors?.backgroundBrand,
61
+ activeLabelColor: colors?.textLightest,
62
+ activeIconColor: colors?.textLightest
63
63
  };
64
64
  return { ...componentVariables,
65
65
  ...themeSpecificStyle[themeName]
package/lib/Menu/MenuItemGroup/index.js CHANGED
@@ -100,15 +100,11 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
100
100
  }
101
101
 
102
102
  componentDidMount() {
103
- var _this$props$makeStyle, _this$props;
104
-
105
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
103
+ this.props.makeStyles?.();
106
104
  }
107
105
 
108
106
  componentDidUpdate() {
109
- var _this$props$makeStyle2, _this$props2;
110
-
111
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
107
+ this.props.makeStyles?.();
112
108
  }
113
109
 
114
110
  selectedFromChildren(props) {
@@ -137,21 +133,19 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
137
133
  }
138
134
 
139
135
  renderLabel() {
140
- var _this$props$styles;
141
-
142
136
  const label = this.props.label;
143
137
  return (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)("span", {
144
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.label
138
+ css: this.props.styles?.label
145
139
  }, label) : label;
146
140
  }
147
141
 
148
142
  renderChildren() {
149
- const _this$props3 = this.props,
150
- disabled = _this$props3.disabled,
151
- controls = _this$props3.controls,
152
- allowMultiple = _this$props3.allowMultiple,
153
- isTabbable = _this$props3.isTabbable,
154
- onMouseOver = _this$props3.onMouseOver;
143
+ const _this$props = this.props,
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;
155
149
  const children = this.props.children;
156
150
  let index = -1;
157
151
  return _react.Children.map(children, child => {
@@ -179,18 +173,16 @@ let MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _de
179
173
  }
180
174
 
181
175
  render() {
182
- var _this$props$styles2, _this$props$styles3;
183
-
184
176
  const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
185
177
  return (0, _emotion.jsx)("span", Object.assign({}, props, {
186
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
178
+ css: this.props.styles?.menuItemGroup,
187
179
  role: "presentation",
188
180
  ref: this.handleRef
189
181
  }), (0, _emotion.jsx)("span", {
190
182
  id: this._labelId
191
183
  }, this.renderLabel()), (0, _emotion.jsx)("ul", {
192
184
  role: "menu",
193
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
185
+ css: this.props.styles?.items,
194
186
  "aria-disabled": this.props.disabled ? 'true' : void 0,
195
187
  "aria-labelledby": this._labelId
196
188
  }, this.renderChildren()));
package/lib/Menu/MenuItemGroup/theme.js CHANGED
@@ -45,12 +45,12 @@ const generateComponentTheme = theme => {
45
45
  }
46
46
  };
47
47
  const componentVariables = {
48
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
49
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
51
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
52
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
53
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
48
+ fontSize: typography?.fontSizeMedium,
49
+ fontFamily: typography?.fontFamily,
50
+ fontWeight: typography?.fontWeightBold,
51
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
52
+ color: colors?.textDarkest,
53
+ background: colors?.backgroundLightest
54
54
  };
55
55
  return { ...componentVariables,
56
56
  ...themeSpecificStyle[themeName]
package/lib/Menu/MenuItemSeparator/index.js CHANGED
@@ -41,24 +41,18 @@ let MenuItemSeparator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
41
41
  }
42
42
 
43
43
  componentDidMount() {
44
- var _this$props$makeStyle, _this$props;
45
-
46
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
44
+ this.props.makeStyles?.();
47
45
  }
48
46
 
49
47
  componentDidUpdate() {
50
- var _this$props$makeStyle2, _this$props2;
51
-
52
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
48
+ this.props.makeStyles?.();
53
49
  }
54
50
 
55
51
  render() {
56
- var _this$props$styles;
57
-
58
52
  const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
59
53
  return (0, _emotion.jsx)("div", Object.assign({}, props, {
60
54
  role: "presentation",
61
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,
55
+ css: this.props.styles?.menuItemSeparator,
62
56
  ref: this.handleRef
63
57
  }));
64
58
  }
package/lib/Menu/MenuItemSeparator/theme.js CHANGED
@@ -39,9 +39,9 @@ const generateComponentTheme = theme => {
39
39
  spacing = theme.spacing,
40
40
  borders = theme.borders;
41
41
  const componentVariables = {
42
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
43
- height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
44
- margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
42
+ background: colors?.backgroundMedium,
43
+ height: borders?.widthSmall,
44
+ margin: `0 ${spacing?.small}`
45
45
  };
46
46
  return { ...componentVariables
47
47
  };