@instructure/ui-select 8.18.0 → 8.18.1-snapshot.12

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/LICENSE.md ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: The MIT License (MIT)
3
+ category: Getting Started
4
+ order: 9
5
+ ---
6
+
7
+ # The MIT License (MIT)
8
+
9
+ Copyright (c) 2015 Instructure, Inc.
10
+
11
+ **Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ of this software and associated documentation files (the "Software"), to deal
13
+ in the Software without restriction, including without limitation the rights
14
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ copies of the Software, and to permit persons to whom the Software is
16
+ furnished to do so, subject to the following conditions.**
17
+
18
+ The above copyright notice and this permission notice shall be included in all
19
+ copies or substantial portions of the Software.
20
+
21
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ SOFTWARE.
@@ -69,6 +69,8 @@ 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
+
72
74
  // ensures list is positioned with respect to input if list is open on mount
73
75
  if (!this.state.hasInputRef) {
74
76
  this.setState({
@@ -77,11 +79,13 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
77
79
  }
78
80
 
79
81
  this.ref = node;
80
- this.props.inputRef?.(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);
81
83
  };
82
84
 
83
85
  this.handleListRef = node => {
84
- this.props.listRef?.(node); // store option height to calculate list maxHeight
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
85
89
 
86
90
  if (node && node.querySelector('[role="option"]')) {
87
91
  this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -94,11 +98,15 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
94
98
  }
95
99
 
96
100
  componentDidMount() {
97
- this.props.makeStyles?.();
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);
98
104
  }
99
105
 
100
106
  componentDidUpdate() {
101
- this.props.makeStyles?.(); // scroll option into view if needed
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
102
110
 
103
111
  this.scrollToOption(this.highlightedOptionId);
104
112
  }
@@ -211,23 +219,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
211
219
  const onRequestHighlightOption = this.props.onRequestHighlightOption;
212
220
 
213
221
  if (id) {
214
- onRequestHighlightOption?.(event, {
222
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
215
223
  id
216
224
  });
217
225
  }
218
226
  }
219
227
 
220
228
  getEventHandlers() {
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;
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;
226
234
  const highlightedOptionId = this.highlightedOptionId;
227
235
  const selectedOptionId = this.selectedOptionId;
228
236
  return this.interaction === 'enabled' ? {
229
237
  onRequestShowOptions: event => {
230
- onRequestShowOptions?.(event);
238
+ onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
231
239
 
232
240
  if (selectedOptionId && !Array.isArray(selectedOptionId)) {
233
241
  // highlight selected option on show
@@ -235,7 +243,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
235
243
  }
236
244
  },
237
245
  onRequestHideOptions: event => {
238
- onRequestHideOptions?.(event);
246
+ onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
239
247
  },
240
248
  onRequestHighlightOption: (event, _ref) => {
241
249
  let id = _ref.id,
@@ -272,7 +280,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
272
280
 
273
281
  if (id && this._optionIds.indexOf(id) !== -1) {
274
282
  // only select if id exists as a valid option
275
- onRequestSelectOption?.(event, {
283
+ onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
276
284
  id
277
285
  });
278
286
  }
@@ -377,12 +385,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
377
385
  const getListProps = data.getListProps,
378
386
  getOptionProps = data.getOptionProps,
379
387
  getDisabledOptionProps = data.getDisabledOptionProps;
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;
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;
386
394
  let lastWasGroup = false;
387
395
  const viewProps = isShowingOptions ? {
388
396
  display: 'block',
@@ -428,11 +436,11 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
428
436
  }
429
437
 
430
438
  renderIcon() {
431
- const _this$props3 = this.props,
432
- styles = _this$props3.styles,
433
- isShowingOptions = _this$props3.isShowingOptions;
439
+ const _this$props7 = this.props,
440
+ styles = _this$props7.styles,
441
+ isShowingOptions = _this$props7.isShowingOptions;
434
442
  return jsx("span", {
435
- css: styles?.icon
443
+ css: styles === null || styles === void 0 ? void 0 : styles.icon
436
444
  }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = jsx(IconArrowOpenUpLine, {
437
445
  inline: false
438
446
  })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = jsx(IconArrowOpenDownLine, {
@@ -444,24 +452,24 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
444
452
  const getInputProps = data.getInputProps,
445
453
  getTriggerProps = data.getTriggerProps;
446
454
 
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);
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);
465
473
 
466
474
  const interaction = this.interaction;
467
475
  const passthroughProps = omitProps(rest, Select.allowedProps);
@@ -515,13 +523,13 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
515
523
  }
516
524
 
517
525
  render() {
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
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
525
533
 
526
534
  this._optionIds = [];
527
535
  const highlightedOptionId = this.highlightedOptionId;
@@ -539,12 +547,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
539
547
  getDisabledOptionProps = _ref3.getDisabledOptionProps,
540
548
  getDescriptionProps = _ref3.getDescriptionProps;
541
549
  return jsx("span", getRootProps({
542
- css: styles?.select
550
+ css: styles === null || styles === void 0 ? void 0 : styles.select
543
551
  }), this.renderInput({
544
552
  getInputProps,
545
553
  getTriggerProps
546
554
  }), jsx("span", Object.assign({}, getDescriptionProps(), {
547
- css: styles?.assistiveText
555
+ css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
548
556
  }), assistiveText), jsx(Popover, {
549
557
  constrain: constrain,
550
558
  placement: placement,
@@ -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?.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
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
42
42
  };
43
43
  return { ...componentVariables
44
44
  };
@@ -82,6 +82,8 @@ 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
+
85
87
  // ensures list is positioned with respect to input if list is open on mount
86
88
  if (!this.state.hasInputRef) {
87
89
  this.setState({
@@ -90,11 +92,13 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
90
92
  }
91
93
 
92
94
  this.ref = node;
93
- this.props.inputRef?.(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);
94
96
  };
95
97
 
96
98
  this.handleListRef = node => {
97
- this.props.listRef?.(node); // store option height to calculate list maxHeight
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
98
102
 
99
103
  if (node && node.querySelector('[role="option"]')) {
100
104
  this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -107,11 +111,15 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
107
111
  }
108
112
 
109
113
  componentDidMount() {
110
- this.props.makeStyles?.();
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);
111
117
  }
112
118
 
113
119
  componentDidUpdate() {
114
- this.props.makeStyles?.(); // scroll option into view if needed
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
115
123
 
116
124
  this.scrollToOption(this.highlightedOptionId);
117
125
  }
@@ -224,23 +232,23 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
224
232
  const onRequestHighlightOption = this.props.onRequestHighlightOption;
225
233
 
226
234
  if (id) {
227
- onRequestHighlightOption?.(event, {
235
+ onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
228
236
  id
229
237
  });
230
238
  }
231
239
  }
232
240
 
233
241
  getEventHandlers() {
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;
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;
239
247
  const highlightedOptionId = this.highlightedOptionId;
240
248
  const selectedOptionId = this.selectedOptionId;
241
249
  return this.interaction === 'enabled' ? {
242
250
  onRequestShowOptions: event => {
243
- onRequestShowOptions?.(event);
251
+ onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
244
252
 
245
253
  if (selectedOptionId && !Array.isArray(selectedOptionId)) {
246
254
  // highlight selected option on show
@@ -248,7 +256,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
248
256
  }
249
257
  },
250
258
  onRequestHideOptions: event => {
251
- onRequestHideOptions?.(event);
259
+ onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
252
260
  },
253
261
  onRequestHighlightOption: (event, _ref) => {
254
262
  let id = _ref.id,
@@ -285,7 +293,7 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
285
293
 
286
294
  if (id && this._optionIds.indexOf(id) !== -1) {
287
295
  // only select if id exists as a valid option
288
- onRequestSelectOption?.(event, {
296
+ onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
289
297
  id
290
298
  });
291
299
  }
@@ -388,12 +396,12 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
388
396
  const getListProps = data.getListProps,
389
397
  getOptionProps = data.getOptionProps,
390
398
  getDisabledOptionProps = data.getDisabledOptionProps;
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;
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;
397
405
  let lastWasGroup = false;
398
406
  const viewProps = isShowingOptions ? {
399
407
  display: 'block',
@@ -439,11 +447,11 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
439
447
  }
440
448
 
441
449
  renderIcon() {
442
- const _this$props3 = this.props,
443
- styles = _this$props3.styles,
444
- isShowingOptions = _this$props3.isShowingOptions;
450
+ const _this$props7 = this.props,
451
+ styles = _this$props7.styles,
452
+ isShowingOptions = _this$props7.isShowingOptions;
445
453
  return (0, _emotion.jsx)("span", {
446
- css: styles?.icon
454
+ css: styles === null || styles === void 0 ? void 0 : styles.icon
447
455
  }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {
448
456
  inline: false
449
457
  })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _emotion.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {
@@ -454,24 +462,24 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
454
462
  renderInput(data) {
455
463
  const getInputProps = data.getInputProps,
456
464
  getTriggerProps = data.getTriggerProps;
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);
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);
475
483
  const interaction = this.interaction;
476
484
  const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
477
485
 
@@ -524,13 +532,13 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
524
532
  }
525
533
 
526
534
  render() {
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
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
534
542
 
535
543
  this._optionIds = [];
536
544
  const highlightedOptionId = this.highlightedOptionId;
@@ -548,12 +556,12 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
548
556
  getDisabledOptionProps = _ref3.getDisabledOptionProps,
549
557
  getDescriptionProps = _ref3.getDescriptionProps;
550
558
  return (0, _emotion.jsx)("span", getRootProps({
551
- css: styles?.select
559
+ css: styles === null || styles === void 0 ? void 0 : styles.select
552
560
  }), this.renderInput({
553
561
  getInputProps,
554
562
  getTriggerProps
555
563
  }), (0, _emotion.jsx)("span", Object.assign({}, getDescriptionProps(), {
556
- css: styles?.assistiveText
564
+ css: styles === null || styles === void 0 ? void 0 : styles.assistiveText
557
565
  }), assistiveText), (0, _emotion.jsx)(_Popover.Popover, {
558
566
  constrain: constrain,
559
567
  placement: placement,
@@ -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?.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
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
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.18.0",
3
+ "version": "8.18.1-snapshot.12+ca14b3dc8",
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.18.0",
27
- "@instructure/ui-color-utils": "8.18.0",
28
- "@instructure/ui-test-locator": "8.18.0",
29
- "@instructure/ui-test-utils": "8.18.0",
30
- "@instructure/ui-themes": "8.18.0"
26
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
27
+ "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
28
+ "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
29
+ "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
30
+ "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.18.0",
35
- "@instructure/shared-types": "8.18.0",
36
- "@instructure/ui-dom-utils": "8.18.0",
37
- "@instructure/ui-form-field": "8.18.0",
38
- "@instructure/ui-icons": "8.18.0",
39
- "@instructure/ui-options": "8.18.0",
40
- "@instructure/ui-popover": "8.18.0",
41
- "@instructure/ui-position": "8.18.0",
42
- "@instructure/ui-prop-types": "8.18.0",
43
- "@instructure/ui-react-utils": "8.18.0",
44
- "@instructure/ui-selectable": "8.18.0",
45
- "@instructure/ui-testable": "8.18.0",
46
- "@instructure/ui-text-input": "8.18.0",
47
- "@instructure/ui-utils": "8.18.0",
48
- "@instructure/ui-view": "8.18.0",
49
- "@instructure/uid": "8.18.0",
34
+ "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
35
+ "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
36
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.12+ca14b3dc8",
37
+ "@instructure/ui-form-field": "8.18.1-snapshot.12+ca14b3dc8",
38
+ "@instructure/ui-icons": "8.18.1-snapshot.12+ca14b3dc8",
39
+ "@instructure/ui-options": "8.18.1-snapshot.12+ca14b3dc8",
40
+ "@instructure/ui-popover": "8.18.1-snapshot.12+ca14b3dc8",
41
+ "@instructure/ui-position": "8.18.1-snapshot.12+ca14b3dc8",
42
+ "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
43
+ "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
44
+ "@instructure/ui-selectable": "8.18.1-snapshot.12+ca14b3dc8",
45
+ "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
46
+ "@instructure/ui-text-input": "8.18.1-snapshot.12+ca14b3dc8",
47
+ "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
48
+ "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
49
+ "@instructure/uid": "8.18.1-snapshot.12+ca14b3dc8",
50
50
  "prop-types": "^15"
51
51
  },
52
52
  "peerDependencies": {
@@ -55,5 +55,6 @@
55
55
  "publishConfig": {
56
56
  "access": "public"
57
57
  },
58
- "sideEffects": false
58
+ "sideEffects": false,
59
+ "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
59
60
  }