@instructure/ui-select 8.17.1-snapshot.18 → 8.17.1-snapshot.32

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 (6) hide show
  1. package/es/Select/index.js +50 -58
  2. package/es/Select/theme.js +8 -8
  3. package/lib/Select/index.js +50 -58
  4. package/lib/Select/theme.js +8 -8
  5. package/package.json +23 -23
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Select/index.js CHANGED
@@ -69,8 +69,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
69
69
  this._optionHeight = 36;
70
70
 
71
71
  this.handleInputRef = node => {
72
- var _this$props$inputRef, _this$props;
73
-
74
72
  // ensures list is positioned with respect to input if list is open on mount
75
73
  if (!this.state.hasInputRef) {
76
74
  this.setState({
@@ -79,13 +77,11 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
79
77
  }
80
78
 
81
79
  this.ref = node;
82
- (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
80
+ this.props.inputRef?.(node);
83
81
  };
84
82
 
85
83
  this.handleListRef = node => {
86
- var _this$props$listRef, _this$props2;
87
-
88
- (_this$props$listRef = (_this$props2 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props2, node); // store option height to calculate list maxHeight
84
+ this.props.listRef?.(node); // store option height to calculate list maxHeight
89
85
 
90
86
  if (node && node.querySelector('[role="option"]')) {
91
87
  this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -98,15 +94,11 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
98
94
  }
99
95
 
100
96
  componentDidMount() {
101
- var _this$props$makeStyle, _this$props3;
102
-
103
- (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
97
+ this.props.makeStyles?.();
104
98
  }
105
99
 
106
100
  componentDidUpdate() {
107
- var _this$props$makeStyle2, _this$props4;
108
-
109
- (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4); // scroll option into view if needed
101
+ this.props.makeStyles?.(); // scroll option into view if needed
110
102
 
111
103
  this.scrollToOption(this.highlightedOptionId);
112
104
  }
@@ -219,23 +211,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
219
211
  const onRequestHighlightOption = this.props.onRequestHighlightOption;
220
212
 
221
213
  if (id) {
222
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
214
+ onRequestHighlightOption?.(event, {
223
215
  id
224
216
  });
225
217
  }
226
218
  }
227
219
 
228
220
  getEventHandlers() {
229
- const _this$props5 = this.props,
230
- isShowingOptions = _this$props5.isShowingOptions,
231
- onRequestShowOptions = _this$props5.onRequestShowOptions,
232
- onRequestHideOptions = _this$props5.onRequestHideOptions,
233
- onRequestSelectOption = _this$props5.onRequestSelectOption;
221
+ const _this$props = this.props,
222
+ isShowingOptions = _this$props.isShowingOptions,
223
+ onRequestShowOptions = _this$props.onRequestShowOptions,
224
+ onRequestHideOptions = _this$props.onRequestHideOptions,
225
+ onRequestSelectOption = _this$props.onRequestSelectOption;
234
226
  const highlightedOptionId = this.highlightedOptionId;
235
227
  const selectedOptionId = this.selectedOptionId;
236
228
  return this.interaction === 'enabled' ? {
237
229
  onRequestShowOptions: event => {
238
- onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
230
+ onRequestShowOptions?.(event);
239
231
 
240
232
  if (selectedOptionId && !Array.isArray(selectedOptionId)) {
241
233
  // highlight selected option on show
@@ -243,7 +235,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
243
235
  }
244
236
  },
245
237
  onRequestHideOptions: event => {
246
- onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
238
+ onRequestHideOptions?.(event);
247
239
  },
248
240
  onRequestHighlightOption: (event, _ref) => {
249
241
  let id = _ref.id,
@@ -280,7 +272,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
280
272
 
281
273
  if (id && this._optionIds.indexOf(id) !== -1) {
282
274
  // only select if id exists as a valid option
283
- onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
275
+ onRequestSelectOption?.(event, {
284
276
  id
285
277
  });
286
278
  }
@@ -385,12 +377,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
385
377
  const getListProps = data.getListProps,
386
378
  getOptionProps = data.getOptionProps,
387
379
  getDisabledOptionProps = data.getDisabledOptionProps;
388
- const _this$props6 = this.props,
389
- isShowingOptions = _this$props6.isShowingOptions,
390
- optionsMaxWidth = _this$props6.optionsMaxWidth,
391
- optionsMaxHeight = _this$props6.optionsMaxHeight,
392
- visibleOptionsCount = _this$props6.visibleOptionsCount,
393
- children = _this$props6.children;
380
+ const _this$props2 = this.props,
381
+ isShowingOptions = _this$props2.isShowingOptions,
382
+ optionsMaxWidth = _this$props2.optionsMaxWidth,
383
+ optionsMaxHeight = _this$props2.optionsMaxHeight,
384
+ visibleOptionsCount = _this$props2.visibleOptionsCount,
385
+ children = _this$props2.children;
394
386
  let lastWasGroup = false;
395
387
  const viewProps = isShowingOptions ? {
396
388
  display: 'block',
@@ -436,11 +428,11 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
436
428
  }
437
429
 
438
430
  renderIcon() {
439
- const _this$props7 = this.props,
440
- styles = _this$props7.styles,
441
- isShowingOptions = _this$props7.isShowingOptions;
431
+ const _this$props3 = this.props,
432
+ styles = _this$props3.styles,
433
+ isShowingOptions = _this$props3.isShowingOptions;
442
434
  return jsx("span", {
443
- css: styles === null || styles === void 0 ? void 0 : styles.icon
435
+ css: styles?.icon
444
436
  }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, {
445
437
  inline: false
446
438
  })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = jsx(IconArrowOpenDownLine, {
@@ -452,24 +444,24 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
452
444
  const getInputProps = data.getInputProps,
453
445
  getTriggerProps = data.getTriggerProps;
454
446
 
455
- const _this$props8 = this.props,
456
- renderLabel = _this$props8.renderLabel,
457
- inputValue = _this$props8.inputValue,
458
- placeholder = _this$props8.placeholder,
459
- isRequired = _this$props8.isRequired,
460
- shouldNotWrap = _this$props8.shouldNotWrap,
461
- size = _this$props8.size,
462
- isInline = _this$props8.isInline,
463
- width = _this$props8.width,
464
- htmlSize = _this$props8.htmlSize,
465
- messages = _this$props8.messages,
466
- renderBeforeInput = _this$props8.renderBeforeInput,
467
- renderAfterInput = _this$props8.renderAfterInput,
468
- onFocus = _this$props8.onFocus,
469
- onBlur = _this$props8.onBlur,
470
- onInputChange = _this$props8.onInputChange,
471
- onRequestHideOptions = _this$props8.onRequestHideOptions,
472
- rest = _objectWithoutProperties(_this$props8, _excluded2);
447
+ const _this$props4 = this.props,
448
+ renderLabel = _this$props4.renderLabel,
449
+ inputValue = _this$props4.inputValue,
450
+ placeholder = _this$props4.placeholder,
451
+ isRequired = _this$props4.isRequired,
452
+ shouldNotWrap = _this$props4.shouldNotWrap,
453
+ size = _this$props4.size,
454
+ isInline = _this$props4.isInline,
455
+ width = _this$props4.width,
456
+ htmlSize = _this$props4.htmlSize,
457
+ messages = _this$props4.messages,
458
+ renderBeforeInput = _this$props4.renderBeforeInput,
459
+ renderAfterInput = _this$props4.renderAfterInput,
460
+ onFocus = _this$props4.onFocus,
461
+ onBlur = _this$props4.onBlur,
462
+ onInputChange = _this$props4.onInputChange,
463
+ onRequestHideOptions = _this$props4.onRequestHideOptions,
464
+ rest = _objectWithoutProperties(_this$props4, _excluded2);
473
465
 
474
466
  const interaction = this.interaction;
475
467
  const passthroughProps = omitProps(rest, Select.allowedProps);
@@ -523,13 +515,13 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
523
515
  }
524
516
 
525
517
  render() {
526
- const _this$props9 = this.props,
527
- constrain = _this$props9.constrain,
528
- placement = _this$props9.placement,
529
- mountNode = _this$props9.mountNode,
530
- assistiveText = _this$props9.assistiveText,
531
- isShowingOptions = _this$props9.isShowingOptions,
532
- styles = _this$props9.styles; // clear temporary option store
518
+ const _this$props5 = this.props,
519
+ constrain = _this$props5.constrain,
520
+ placement = _this$props5.placement,
521
+ mountNode = _this$props5.mountNode,
522
+ assistiveText = _this$props5.assistiveText,
523
+ isShowingOptions = _this$props5.isShowingOptions,
524
+ styles = _this$props5.styles; // clear temporary option store
533
525
 
534
526
  this._optionIds = [];
535
527
  const highlightedOptionId = this.highlightedOptionId;
@@ -547,12 +539,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
547
539
  getDisabledOptionProps = _ref3.getDisabledOptionProps,
548
540
  getDescriptionProps = _ref3.getDescriptionProps;
549
541
  return jsx("span", getRootProps({
550
- css: styles === null || styles === void 0 ? void 0 : styles.select
542
+ css: styles?.select
551
543
  }), this.renderInput({
552
544
  getInputProps,
553
545
  getTriggerProps
554
546
  }), jsx("span", Object.assign({}, getDescriptionProps(), {
555
- css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
547
+ css: styles?.assistiveText
556
548
  }), assistiveText), jsx(Popover, {
557
549
  constrain: constrain,
558
550
  placement: placement,
package/es/Select/theme.js CHANGED
@@ -31,14 +31,14 @@ const generateComponentTheme = theme => {
31
31
  const colors = theme.colors,
32
32
  typography = theme.typography;
33
33
  const componentVariables = {
34
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
35
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
36
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
37
- smallIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
38
- mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
39
- largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
40
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
41
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
34
+ fontSize: typography?.fontSizeMedium,
35
+ fontFamily: typography?.fontFamily,
36
+ fontWeight: typography?.fontWeightNormal,
37
+ smallIconSize: typography?.fontSizeXSmall,
38
+ mediumIconSize: typography?.fontSizeSmall,
39
+ largeIconSize: typography?.fontSizeMedium,
40
+ color: colors?.textDarkest,
41
+ background: colors?.backgroundLightest
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
package/lib/Select/index.js CHANGED
@@ -82,8 +82,6 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
82
82
  this._optionHeight = 36;
83
83
 
84
84
  this.handleInputRef = node => {
85
- var _this$props$inputRef, _this$props;
86
-
87
85
  // ensures list is positioned with respect to input if list is open on mount
88
86
  if (!this.state.hasInputRef) {
89
87
  this.setState({
@@ -92,13 +90,11 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
92
90
  }
93
91
 
94
92
  this.ref = node;
95
- (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
93
+ this.props.inputRef?.(node);
96
94
  };
97
95
 
98
96
  this.handleListRef = node => {
99
- var _this$props$listRef, _this$props2;
100
-
101
- (_this$props$listRef = (_this$props2 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props2, node); // store option height to calculate list maxHeight
97
+ this.props.listRef?.(node); // store option height to calculate list maxHeight
102
98
 
103
99
  if (node && node.querySelector('[role="option"]')) {
104
100
  this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -111,15 +107,11 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
111
107
  }
112
108
 
113
109
  componentDidMount() {
114
- var _this$props$makeStyle, _this$props3;
115
-
116
- (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
110
+ this.props.makeStyles?.();
117
111
  }
118
112
 
119
113
  componentDidUpdate() {
120
- var _this$props$makeStyle2, _this$props4;
121
-
122
- (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4); // scroll option into view if needed
114
+ this.props.makeStyles?.(); // scroll option into view if needed
123
115
 
124
116
  this.scrollToOption(this.highlightedOptionId);
125
117
  }
@@ -232,23 +224,23 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
232
224
  const onRequestHighlightOption = this.props.onRequestHighlightOption;
233
225
 
234
226
  if (id) {
235
- onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
227
+ onRequestHighlightOption?.(event, {
236
228
  id
237
229
  });
238
230
  }
239
231
  }
240
232
 
241
233
  getEventHandlers() {
242
- const _this$props5 = this.props,
243
- isShowingOptions = _this$props5.isShowingOptions,
244
- onRequestShowOptions = _this$props5.onRequestShowOptions,
245
- onRequestHideOptions = _this$props5.onRequestHideOptions,
246
- onRequestSelectOption = _this$props5.onRequestSelectOption;
234
+ const _this$props = this.props,
235
+ isShowingOptions = _this$props.isShowingOptions,
236
+ onRequestShowOptions = _this$props.onRequestShowOptions,
237
+ onRequestHideOptions = _this$props.onRequestHideOptions,
238
+ onRequestSelectOption = _this$props.onRequestSelectOption;
247
239
  const highlightedOptionId = this.highlightedOptionId;
248
240
  const selectedOptionId = this.selectedOptionId;
249
241
  return this.interaction === 'enabled' ? {
250
242
  onRequestShowOptions: event => {
251
- onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
243
+ onRequestShowOptions?.(event);
252
244
 
253
245
  if (selectedOptionId && !Array.isArray(selectedOptionId)) {
254
246
  // highlight selected option on show
@@ -256,7 +248,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
256
248
  }
257
249
  },
258
250
  onRequestHideOptions: event => {
259
- onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
251
+ onRequestHideOptions?.(event);
260
252
  },
261
253
  onRequestHighlightOption: (event, _ref) => {
262
254
  let id = _ref.id,
@@ -293,7 +285,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
293
285
 
294
286
  if (id && this._optionIds.indexOf(id) !== -1) {
295
287
  // only select if id exists as a valid option
296
- onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
288
+ onRequestSelectOption?.(event, {
297
289
  id
298
290
  });
299
291
  }
@@ -396,12 +388,12 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
396
388
  const getListProps = data.getListProps,
397
389
  getOptionProps = data.getOptionProps,
398
390
  getDisabledOptionProps = data.getDisabledOptionProps;
399
- const _this$props6 = this.props,
400
- isShowingOptions = _this$props6.isShowingOptions,
401
- optionsMaxWidth = _this$props6.optionsMaxWidth,
402
- optionsMaxHeight = _this$props6.optionsMaxHeight,
403
- visibleOptionsCount = _this$props6.visibleOptionsCount,
404
- children = _this$props6.children;
391
+ const _this$props2 = this.props,
392
+ isShowingOptions = _this$props2.isShowingOptions,
393
+ optionsMaxWidth = _this$props2.optionsMaxWidth,
394
+ optionsMaxHeight = _this$props2.optionsMaxHeight,
395
+ visibleOptionsCount = _this$props2.visibleOptionsCount,
396
+ children = _this$props2.children;
405
397
  let lastWasGroup = false;
406
398
  const viewProps = isShowingOptions ? {
407
399
  display: 'block',
@@ -447,11 +439,11 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
447
439
  }
448
440
 
449
441
  renderIcon() {
450
- const _this$props7 = this.props,
451
- styles = _this$props7.styles,
452
- isShowingOptions = _this$props7.isShowingOptions;
442
+ const _this$props3 = this.props,
443
+ styles = _this$props3.styles,
444
+ isShowingOptions = _this$props3.isShowingOptions;
453
445
  return (0, _emotion.jsx)("span", {
454
- css: styles === null || styles === void 0 ? void 0 : styles.icon
446
+ css: styles?.icon
455
447
  }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {
456
448
  inline: false
457
449
  })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _emotion.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {
@@ -462,24 +454,24 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
462
454
  renderInput(data) {
463
455
  const getInputProps = data.getInputProps,
464
456
  getTriggerProps = data.getTriggerProps;
465
- const _this$props8 = this.props,
466
- renderLabel = _this$props8.renderLabel,
467
- inputValue = _this$props8.inputValue,
468
- placeholder = _this$props8.placeholder,
469
- isRequired = _this$props8.isRequired,
470
- shouldNotWrap = _this$props8.shouldNotWrap,
471
- size = _this$props8.size,
472
- isInline = _this$props8.isInline,
473
- width = _this$props8.width,
474
- htmlSize = _this$props8.htmlSize,
475
- messages = _this$props8.messages,
476
- renderBeforeInput = _this$props8.renderBeforeInput,
477
- renderAfterInput = _this$props8.renderAfterInput,
478
- onFocus = _this$props8.onFocus,
479
- onBlur = _this$props8.onBlur,
480
- onInputChange = _this$props8.onInputChange,
481
- onRequestHideOptions = _this$props8.onRequestHideOptions,
482
- rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
457
+ const _this$props4 = this.props,
458
+ renderLabel = _this$props4.renderLabel,
459
+ inputValue = _this$props4.inputValue,
460
+ placeholder = _this$props4.placeholder,
461
+ isRequired = _this$props4.isRequired,
462
+ shouldNotWrap = _this$props4.shouldNotWrap,
463
+ size = _this$props4.size,
464
+ isInline = _this$props4.isInline,
465
+ width = _this$props4.width,
466
+ htmlSize = _this$props4.htmlSize,
467
+ messages = _this$props4.messages,
468
+ renderBeforeInput = _this$props4.renderBeforeInput,
469
+ renderAfterInput = _this$props4.renderAfterInput,
470
+ onFocus = _this$props4.onFocus,
471
+ onBlur = _this$props4.onBlur,
472
+ onInputChange = _this$props4.onInputChange,
473
+ onRequestHideOptions = _this$props4.onRequestHideOptions,
474
+ rest = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
483
475
  const interaction = this.interaction;
484
476
  const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
485
477
 
@@ -532,13 +524,13 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
532
524
  }
533
525
 
534
526
  render() {
535
- const _this$props9 = this.props,
536
- constrain = _this$props9.constrain,
537
- placement = _this$props9.placement,
538
- mountNode = _this$props9.mountNode,
539
- assistiveText = _this$props9.assistiveText,
540
- isShowingOptions = _this$props9.isShowingOptions,
541
- styles = _this$props9.styles; // clear temporary option store
527
+ const _this$props5 = this.props,
528
+ constrain = _this$props5.constrain,
529
+ placement = _this$props5.placement,
530
+ mountNode = _this$props5.mountNode,
531
+ assistiveText = _this$props5.assistiveText,
532
+ isShowingOptions = _this$props5.isShowingOptions,
533
+ styles = _this$props5.styles; // clear temporary option store
542
534
 
543
535
  this._optionIds = [];
544
536
  const highlightedOptionId = this.highlightedOptionId;
@@ -556,12 +548,12 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
556
548
  getDisabledOptionProps = _ref3.getDisabledOptionProps,
557
549
  getDescriptionProps = _ref3.getDescriptionProps;
558
550
  return (0, _emotion.jsx)("span", getRootProps({
559
- css: styles === null || styles === void 0 ? void 0 : styles.select
551
+ css: styles?.select
560
552
  }), this.renderInput({
561
553
  getInputProps,
562
554
  getTriggerProps
563
555
  }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
564
- css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
556
+ css: styles?.assistiveText
565
557
  }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
566
558
  constrain: constrain,
567
559
  placement: placement,
package/lib/Select/theme.js CHANGED
@@ -38,14 +38,14 @@ const generateComponentTheme = theme => {
38
38
  const colors = theme.colors,
39
39
  typography = theme.typography;
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.fontWeightNormal,
44
- smallIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
45
- mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
46
- largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
47
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
48
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
41
+ fontSize: typography?.fontSizeMedium,
42
+ fontFamily: typography?.fontFamily,
43
+ fontWeight: typography?.fontWeightNormal,
44
+ smallIconSize: typography?.fontSizeXSmall,
45
+ mediumIconSize: typography?.fontSizeSmall,
46
+ largeIconSize: typography?.fontSizeMedium,
47
+ color: colors?.textDarkest,
48
+ background: colors?.backgroundLightest
49
49
  };
50
50
  return { ...componentVariables
51
51
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-select",
3
- "version": "8.17.1-snapshot.18+9f145a7d2",
3
+ "version": "8.17.1-snapshot.32+0670cf5bc",
4
4
  "description": "A component for select and autocomplete behavior.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,30 +23,30 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.18+9f145a7d2",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.18+9f145a7d2",
28
- "@instructure/ui-test-locator": "8.17.1-snapshot.18+9f145a7d2",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.18+9f145a7d2",
30
- "@instructure/ui-themes": "8.17.1-snapshot.18+9f145a7d2"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.32+0670cf5bc",
27
+ "@instructure/ui-color-utils": "8.17.1-snapshot.32+0670cf5bc",
28
+ "@instructure/ui-test-locator": "8.17.1-snapshot.32+0670cf5bc",
29
+ "@instructure/ui-test-utils": "8.17.1-snapshot.32+0670cf5bc",
30
+ "@instructure/ui-themes": "8.17.1-snapshot.32+0670cf5bc"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.17.1-snapshot.18+9f145a7d2",
35
- "@instructure/shared-types": "8.17.1-snapshot.18+9f145a7d2",
36
- "@instructure/ui-dom-utils": "8.17.1-snapshot.18+9f145a7d2",
37
- "@instructure/ui-form-field": "8.17.1-snapshot.18+9f145a7d2",
38
- "@instructure/ui-icons": "8.17.1-snapshot.18+9f145a7d2",
39
- "@instructure/ui-options": "8.17.1-snapshot.18+9f145a7d2",
40
- "@instructure/ui-popover": "8.17.1-snapshot.18+9f145a7d2",
41
- "@instructure/ui-position": "8.17.1-snapshot.18+9f145a7d2",
42
- "@instructure/ui-prop-types": "8.17.1-snapshot.18+9f145a7d2",
43
- "@instructure/ui-react-utils": "8.17.1-snapshot.18+9f145a7d2",
44
- "@instructure/ui-selectable": "8.17.1-snapshot.18+9f145a7d2",
45
- "@instructure/ui-testable": "8.17.1-snapshot.18+9f145a7d2",
46
- "@instructure/ui-text-input": "8.17.1-snapshot.18+9f145a7d2",
47
- "@instructure/ui-utils": "8.17.1-snapshot.18+9f145a7d2",
48
- "@instructure/ui-view": "8.17.1-snapshot.18+9f145a7d2",
49
- "@instructure/uid": "8.17.1-snapshot.18+9f145a7d2",
34
+ "@instructure/emotion": "8.17.1-snapshot.32+0670cf5bc",
35
+ "@instructure/shared-types": "8.17.1-snapshot.32+0670cf5bc",
36
+ "@instructure/ui-dom-utils": "8.17.1-snapshot.32+0670cf5bc",
37
+ "@instructure/ui-form-field": "8.17.1-snapshot.32+0670cf5bc",
38
+ "@instructure/ui-icons": "8.17.1-snapshot.32+0670cf5bc",
39
+ "@instructure/ui-options": "8.17.1-snapshot.32+0670cf5bc",
40
+ "@instructure/ui-popover": "8.17.1-snapshot.32+0670cf5bc",
41
+ "@instructure/ui-position": "8.17.1-snapshot.32+0670cf5bc",
42
+ "@instructure/ui-prop-types": "8.17.1-snapshot.32+0670cf5bc",
43
+ "@instructure/ui-react-utils": "8.17.1-snapshot.32+0670cf5bc",
44
+ "@instructure/ui-selectable": "8.17.1-snapshot.32+0670cf5bc",
45
+ "@instructure/ui-testable": "8.17.1-snapshot.32+0670cf5bc",
46
+ "@instructure/ui-text-input": "8.17.1-snapshot.32+0670cf5bc",
47
+ "@instructure/ui-utils": "8.17.1-snapshot.32+0670cf5bc",
48
+ "@instructure/ui-view": "8.17.1-snapshot.32+0670cf5bc",
49
+ "@instructure/uid": "8.17.1-snapshot.32+0670cf5bc",
50
50
  "prop-types": "^15"
51
51
  },
52
52
  "peerDependencies": {
@@ -56,5 +56,5 @@
56
56
  "access": "public"
57
57
  },
58
58
  "sideEffects": false,
59
- "gitHead": "9f145a7d2f84eda965b570fa5702e1fda0c92e58"
59
+ "gitHead": "0670cf5bc27401023eb273a44bdbf8cc79b5efa8"
60
60
  }