@instructure/ui-select 8.25.1-snapshot-10 → 8.25.1-snapshot-15

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/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
6
+ ## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-select
9
9
 
@@ -33,13 +33,7 @@ id: Select.Group
33
33
  **/
34
34
 
35
35
  class Group extends Component {
36
- static displayName = "Group";
37
- static componentId = 'Select.Group';
38
- static allowedProps = allowedProps;
39
- static propTypes = propTypes;
40
- static defaultProps = {};
41
36
  /* istanbul ignore next */
42
-
43
37
  render() {
44
38
  // this component is only used for prop validation. Select.Group children
45
39
  // are parsed in Select and rendered as Options components
@@ -48,5 +42,10 @@ class Group extends Component {
48
42
 
49
43
  }
50
44
 
45
+ Group.displayName = "Group";
46
+ Group.componentId = 'Select.Group';
47
+ Group.allowedProps = allowedProps;
48
+ Group.propTypes = propTypes;
49
+ Group.defaultProps = {};
51
50
  export default Group;
52
51
  export { Group };
@@ -33,17 +33,7 @@ id: Select.Option
33
33
  **/
34
34
 
35
35
  class Option extends Component {
36
- static displayName = "Option";
37
- static componentId = 'Select.Option';
38
- static allowedProps = allowedProps;
39
- static propTypes = propTypes;
40
- static defaultProps = {
41
- isHighlighted: false,
42
- isSelected: false,
43
- isDisabled: false
44
- };
45
36
  /* istanbul ignore next */
46
-
47
37
  render() {
48
38
  // this component is only used for prop validation. Select.Option children
49
39
  // are parsed in Select and rendered as Options.Item components
@@ -52,5 +42,14 @@ class Option extends Component {
52
42
 
53
43
  }
54
44
 
45
+ Option.displayName = "Option";
46
+ Option.componentId = 'Select.Option';
47
+ Option.allowedProps = allowedProps;
48
+ Option.propTypes = propTypes;
49
+ Option.defaultProps = {
50
+ isHighlighted: false,
51
+ isSelected: false,
52
+ isDisabled: false
53
+ };
55
54
  export default Option;
56
55
  export { Option };
@@ -3,7 +3,7 @@ const _excluded = ["id", "renderLabel", "children"],
3
3
  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
4
4
  _excluded3 = ["ref"];
5
5
 
6
- var _dec, _dec2, _dec3, _class, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
6
+ var _dec, _dec2, _dec3, _class, _class2, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
7
7
 
8
8
  /*
9
9
  * The MIT License (MIT)
@@ -55,54 +55,63 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
55
55
  ---
56
56
  @tsProps
57
57
  **/
58
- let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class Select extends Component {
59
- static displayName = "Select";
60
- static componentId = 'Select';
61
- static allowedProps = allowedProps;
62
- static propTypes = propTypes;
63
- static defaultProps = {
64
- inputValue: '',
65
- isShowingOptions: false,
66
- size: 'medium',
67
- // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
68
- interaction: void 0,
69
- isRequired: false,
70
- isInline: false,
71
- visibleOptionsCount: 8,
72
- placement: 'bottom stretch',
73
- constrain: 'window',
74
- shouldNotWrap: false
75
- };
76
- static Option = Option;
77
- static Group = Group;
58
+ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends Component {
59
+ constructor() {
60
+ super(...arguments);
61
+ this.state = {
62
+ hasInputRef: false
63
+ };
64
+ this.ref = null;
65
+ this._input = null;
66
+ this._defaultId = this.props.deterministicId();
67
+ this._inputContainer = null;
68
+ this._listView = null;
69
+ this._optionIds = [];
70
+ this._optionHeight = 36;
71
+
72
+ this.handleInputRef = node => {
73
+ var _this$props$inputRef, _this$props;
74
+
75
+ // ensures list is positioned with respect to input if list is open on mount
76
+ if (!this.state.hasInputRef) {
77
+ this.setState({
78
+ hasInputRef: true
79
+ });
80
+ }
81
+
82
+ this._input = node;
83
+ (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
84
+ };
85
+
86
+ this.handleListRef = node => {
87
+ var _this$props$listRef, _this$props2;
88
+
89
+ (_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
90
+
91
+ if (node && node.querySelector('[role="option"]')) {
92
+ this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
93
+ }
94
+ };
95
+
96
+ this.handleInputContainerRef = node => {
97
+ this._inputContainer = node;
98
+ };
99
+ }
78
100
 
79
101
  componentDidMount() {
80
- var _this$props$makeStyle, _this$props;
102
+ var _this$props$makeStyle, _this$props3;
81
103
 
82
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
104
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
83
105
  }
84
106
 
85
107
  componentDidUpdate() {
86
- var _this$props$makeStyle2, _this$props2;
108
+ var _this$props$makeStyle2, _this$props4;
87
109
 
88
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // scroll option into view if needed
110
+ (_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
89
111
 
90
112
  this.scrollToOption(this.highlightedOptionId);
91
113
  }
92
114
 
93
- state = {
94
- hasInputRef: false
95
- };
96
- ref = null;
97
- _input = null;
98
- _defaultId = this.props.deterministicId();
99
- _inputContainer = null;
100
- _listView = null; // temporarily stores actionable options
101
-
102
- _optionIds = []; // best guess for first calculation of list height
103
-
104
- _optionHeight = 36;
105
-
106
115
  focus() {
107
116
  this._input && this._input.focus();
108
117
  }
@@ -184,32 +193,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
184
193
  return selectedOptionId;
185
194
  }
186
195
 
187
- handleInputRef = node => {
188
- var _this$props$inputRef, _this$props3;
189
-
190
- // ensures list is positioned with respect to input if list is open on mount
191
- if (!this.state.hasInputRef) {
192
- this.setState({
193
- hasInputRef: true
194
- });
195
- }
196
-
197
- this._input = node;
198
- (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, node);
199
- };
200
- handleListRef = node => {
201
- var _this$props$listRef, _this$props4;
202
-
203
- (_this$props$listRef = (_this$props4 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props4, node); // store option height to calculate list maxHeight
204
-
205
- if (node && node.querySelector('[role="option"]')) {
206
- this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
207
- }
208
- };
209
- handleInputContainerRef = node => {
210
- this._inputContainer = node;
211
- };
212
-
213
196
  scrollToOption(id) {
214
197
  if (this._listView) {
215
198
  const option = this._listView.querySelector(`[id="${id}"]`);
@@ -587,6 +570,18 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
587
570
  });
588
571
  }
589
572
 
590
- }) || _class) || _class) || _class);
573
+ }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
574
+ inputValue: '',
575
+ isShowingOptions: false,
576
+ size: 'medium',
577
+ // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
578
+ interaction: void 0,
579
+ isRequired: false,
580
+ isInline: false,
581
+ visibleOptionsCount: 8,
582
+ placement: 'bottom stretch',
583
+ constrain: 'window',
584
+ shouldNotWrap: false
585
+ }, _class2.Option = Option, _class2.Group = Group, _class2)) || _class) || _class) || _class);
591
586
  export default Select;
592
587
  export { Select };
@@ -42,13 +42,7 @@ id: Select.Group
42
42
  @tsProps
43
43
  **/
44
44
  class Group extends _react.Component {
45
- static displayName = "Group";
46
- static componentId = 'Select.Group';
47
- static allowedProps = _props.allowedProps;
48
- static propTypes = _props.propTypes;
49
- static defaultProps = {};
50
45
  /* istanbul ignore next */
51
-
52
46
  render() {
53
47
  // this component is only used for prop validation. Select.Group children
54
48
  // are parsed in Select and rendered as Options components
@@ -58,5 +52,10 @@ class Group extends _react.Component {
58
52
  }
59
53
 
60
54
  exports.Group = Group;
55
+ Group.displayName = "Group";
56
+ Group.componentId = 'Select.Group';
57
+ Group.allowedProps = _props.allowedProps;
58
+ Group.propTypes = _props.propTypes;
59
+ Group.defaultProps = {};
61
60
  var _default = Group;
62
61
  exports.default = _default;
@@ -42,17 +42,7 @@ id: Select.Option
42
42
  @tsProps
43
43
  **/
44
44
  class Option extends _react.Component {
45
- static displayName = "Option";
46
- static componentId = 'Select.Option';
47
- static allowedProps = _props.allowedProps;
48
- static propTypes = _props.propTypes;
49
- static defaultProps = {
50
- isHighlighted: false,
51
- isSelected: false,
52
- isDisabled: false
53
- };
54
45
  /* istanbul ignore next */
55
-
56
46
  render() {
57
47
  // this component is only used for prop validation. Select.Option children
58
48
  // are parsed in Select and rendered as Options.Item components
@@ -62,5 +52,14 @@ class Option extends _react.Component {
62
52
  }
63
53
 
64
54
  exports.Option = Option;
55
+ Option.displayName = "Option";
56
+ Option.componentId = 'Select.Option';
57
+ Option.allowedProps = _props.allowedProps;
58
+ Option.propTypes = _props.propTypes;
59
+ Option.defaultProps = {
60
+ isHighlighted: false,
61
+ isSelected: false,
62
+ isDisabled: false
63
+ };
65
64
  var _default = Option;
66
65
  exports.default = _default;
@@ -59,7 +59,7 @@ const _excluded = ["id", "renderLabel", "children"],
59
59
  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
60
60
  _excluded3 = ["ref"];
61
61
 
62
- var _dec, _dec2, _dec3, _class, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
62
+ var _dec, _dec2, _dec3, _class, _class2, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
63
63
 
64
64
  /**
65
65
  ---
@@ -68,54 +68,63 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
68
68
  ---
69
69
  @tsProps
70
70
  **/
71
- let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class Select extends _react.Component {
72
- static displayName = "Select";
73
- static componentId = 'Select';
74
- static allowedProps = _props.allowedProps;
75
- static propTypes = _props.propTypes;
76
- static defaultProps = {
77
- inputValue: '',
78
- isShowingOptions: false,
79
- size: 'medium',
80
- // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
81
- interaction: void 0,
82
- isRequired: false,
83
- isInline: false,
84
- visibleOptionsCount: 8,
85
- placement: 'bottom stretch',
86
- constrain: 'window',
87
- shouldNotWrap: false
88
- };
89
- static Option = _Option.Option;
90
- static Group = _Group.Group;
71
+ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Select extends _react.Component {
72
+ constructor() {
73
+ super(...arguments);
74
+ this.state = {
75
+ hasInputRef: false
76
+ };
77
+ this.ref = null;
78
+ this._input = null;
79
+ this._defaultId = this.props.deterministicId();
80
+ this._inputContainer = null;
81
+ this._listView = null;
82
+ this._optionIds = [];
83
+ this._optionHeight = 36;
84
+
85
+ this.handleInputRef = node => {
86
+ var _this$props$inputRef, _this$props;
87
+
88
+ // ensures list is positioned with respect to input if list is open on mount
89
+ if (!this.state.hasInputRef) {
90
+ this.setState({
91
+ hasInputRef: true
92
+ });
93
+ }
94
+
95
+ this._input = node;
96
+ (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
97
+ };
98
+
99
+ this.handleListRef = node => {
100
+ var _this$props$listRef, _this$props2;
101
+
102
+ (_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
103
+
104
+ if (node && node.querySelector('[role="option"]')) {
105
+ this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
106
+ }
107
+ };
108
+
109
+ this.handleInputContainerRef = node => {
110
+ this._inputContainer = node;
111
+ };
112
+ }
91
113
 
92
114
  componentDidMount() {
93
- var _this$props$makeStyle, _this$props;
115
+ var _this$props$makeStyle, _this$props3;
94
116
 
95
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
117
+ (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
96
118
  }
97
119
 
98
120
  componentDidUpdate() {
99
- var _this$props$makeStyle2, _this$props2;
121
+ var _this$props$makeStyle2, _this$props4;
100
122
 
101
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // scroll option into view if needed
123
+ (_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
124
 
103
125
  this.scrollToOption(this.highlightedOptionId);
104
126
  }
105
127
 
106
- state = {
107
- hasInputRef: false
108
- };
109
- ref = null;
110
- _input = null;
111
- _defaultId = this.props.deterministicId();
112
- _inputContainer = null;
113
- _listView = null; // temporarily stores actionable options
114
-
115
- _optionIds = []; // best guess for first calculation of list height
116
-
117
- _optionHeight = 36;
118
-
119
128
  focus() {
120
129
  this._input && this._input.focus();
121
130
  }
@@ -197,32 +206,6 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
197
206
  return selectedOptionId;
198
207
  }
199
208
 
200
- handleInputRef = node => {
201
- var _this$props$inputRef, _this$props3;
202
-
203
- // ensures list is positioned with respect to input if list is open on mount
204
- if (!this.state.hasInputRef) {
205
- this.setState({
206
- hasInputRef: true
207
- });
208
- }
209
-
210
- this._input = node;
211
- (_this$props$inputRef = (_this$props3 = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props3, node);
212
- };
213
- handleListRef = node => {
214
- var _this$props$listRef, _this$props4;
215
-
216
- (_this$props$listRef = (_this$props4 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props4, node); // store option height to calculate list maxHeight
217
-
218
- if (node && node.querySelector('[role="option"]')) {
219
- this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
220
- }
221
- };
222
- handleInputContainerRef = node => {
223
- this._inputContainer = node;
224
- };
225
-
226
209
  scrollToOption(id) {
227
210
  if (this._listView) {
228
211
  const option = this._listView.querySelector(`[id="${id}"]`);
@@ -596,7 +579,19 @@ let Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0
596
579
  });
597
580
  }
598
581
 
599
- }) || _class) || _class) || _class);
582
+ }, _class2.displayName = "Select", _class2.componentId = 'Select', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
583
+ inputValue: '',
584
+ isShowingOptions: false,
585
+ size: 'medium',
586
+ // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
587
+ interaction: void 0,
588
+ isRequired: false,
589
+ isInline: false,
590
+ visibleOptionsCount: 8,
591
+ placement: 'bottom stretch',
592
+ constrain: 'window',
593
+ shouldNotWrap: false
594
+ }, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _class2)) || _class) || _class) || _class);
600
595
  exports.Select = Select;
601
596
  var _default = Select;
602
597
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-select",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-15",
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.25.1-snapshot-10",
27
- "@instructure/ui-color-utils": "8.25.1-snapshot-10",
28
- "@instructure/ui-test-locator": "8.25.1-snapshot-10",
29
- "@instructure/ui-test-utils": "8.25.1-snapshot-10",
30
- "@instructure/ui-themes": "8.25.1-snapshot-10"
26
+ "@instructure/ui-babel-preset": "8.25.1-snapshot-15",
27
+ "@instructure/ui-color-utils": "8.25.1-snapshot-15",
28
+ "@instructure/ui-test-locator": "8.25.1-snapshot-15",
29
+ "@instructure/ui-test-utils": "8.25.1-snapshot-15",
30
+ "@instructure/ui-themes": "8.25.1-snapshot-15"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.25.1-snapshot-10",
35
- "@instructure/shared-types": "8.25.1-snapshot-10",
36
- "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
37
- "@instructure/ui-form-field": "8.25.1-snapshot-10",
38
- "@instructure/ui-icons": "8.25.1-snapshot-10",
39
- "@instructure/ui-options": "8.25.1-snapshot-10",
40
- "@instructure/ui-popover": "8.25.1-snapshot-10",
41
- "@instructure/ui-position": "8.25.1-snapshot-10",
42
- "@instructure/ui-prop-types": "8.25.1-snapshot-10",
43
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
44
- "@instructure/ui-selectable": "8.25.1-snapshot-10",
45
- "@instructure/ui-testable": "8.25.1-snapshot-10",
46
- "@instructure/ui-text-input": "8.25.1-snapshot-10",
47
- "@instructure/ui-utils": "8.25.1-snapshot-10",
48
- "@instructure/ui-view": "8.25.1-snapshot-10",
49
- "@instructure/uid": "8.25.1-snapshot-10",
34
+ "@instructure/emotion": "8.25.1-snapshot-15",
35
+ "@instructure/shared-types": "8.25.1-snapshot-15",
36
+ "@instructure/ui-dom-utils": "8.25.1-snapshot-15",
37
+ "@instructure/ui-form-field": "8.25.1-snapshot-15",
38
+ "@instructure/ui-icons": "8.25.1-snapshot-15",
39
+ "@instructure/ui-options": "8.25.1-snapshot-15",
40
+ "@instructure/ui-popover": "8.25.1-snapshot-15",
41
+ "@instructure/ui-position": "8.25.1-snapshot-15",
42
+ "@instructure/ui-prop-types": "8.25.1-snapshot-15",
43
+ "@instructure/ui-react-utils": "8.25.1-snapshot-15",
44
+ "@instructure/ui-selectable": "8.25.1-snapshot-15",
45
+ "@instructure/ui-testable": "8.25.1-snapshot-15",
46
+ "@instructure/ui-text-input": "8.25.1-snapshot-15",
47
+ "@instructure/ui-utils": "8.25.1-snapshot-15",
48
+ "@instructure/ui-view": "8.25.1-snapshot-15",
49
+ "@instructure/uid": "8.25.1-snapshot-15",
50
50
  "prop-types": "^15"
51
51
  },
52
52
  "peerDependencies": {