@instructure/ui-simple-select 10.16.1-snapshot-0 → 10.16.1-snapshot-1

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/CHANGELOG.md +1 -1
  2. package/es/SimpleSelect/__examples__/SimpleSelect.examples.js +27 -27
  3. package/es/SimpleSelect/__new-tests__/SimpleSelect.test.js +104 -79
  4. package/es/SimpleSelect/index.js +22 -16
  5. package/lib/SimpleSelect/__examples__/SimpleSelect.examples.js +27 -28
  6. package/lib/SimpleSelect/__new-tests__/SimpleSelect.test.js +143 -119
  7. package/lib/SimpleSelect/index.js +22 -17
  8. package/package.json +15 -15
  9. package/src/SimpleSelect/__examples__/SimpleSelect.examples.tsx +0 -2
  10. package/src/SimpleSelect/__new-tests__/SimpleSelect.test.tsx +1 -1
  11. package/src/SimpleSelect/index.tsx +5 -5
  12. package/src/SimpleSelect/props.ts +1 -1
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/SimpleSelect/__examples__/SimpleSelect.examples.d.ts.map +1 -1
  15. package/types/SimpleSelect/index.d.ts +4 -4
  16. package/types/SimpleSelect/index.d.ts.map +1 -1
  17. package/types/SimpleSelect/props.d.ts +1 -1
  18. package/types/SimpleSelect/props.d.ts.map +1 -1
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
- ## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-simple-select
9
9
 
package/es/SimpleSelect/__examples__/SimpleSelect.examples.js CHANGED
@@ -22,54 +22,54 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react';
26
25
  import { SimpleSelect } from '../../SimpleSelect';
26
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
27
27
  export default {
28
28
  sectionProp: 'size',
29
29
  maxExamplesPerPage: 50,
30
30
  propValues: {
31
- children: [[/*#__PURE__*/React.createElement(SimpleSelect.Option, {
31
+ children: [[_jsx(SimpleSelect.Option, {
32
32
  id: "0",
33
33
  value: "0",
34
- key: "0"
35
- }, "Option one"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
34
+ children: "Option one"
35
+ }, "0"), _jsx(SimpleSelect.Option, {
36
36
  id: "1",
37
37
  value: "1",
38
- key: "1"
39
- }, "Option two"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
38
+ children: "Option two"
39
+ }, "1"), _jsx(SimpleSelect.Option, {
40
40
  id: "2",
41
41
  value: "2",
42
- key: "2"
43
- }, "Option three"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
42
+ children: "Option three"
43
+ }, "2"), _jsx(SimpleSelect.Option, {
44
44
  id: "3",
45
45
  value: "3",
46
- key: "3",
47
- isDisabled: true
48
- }, "Option four")], [/*#__PURE__*/React.createElement(SimpleSelect.Option, {
46
+ isDisabled: true,
47
+ children: "Option four"
48
+ }, "3")], [_jsx(SimpleSelect.Option, {
49
49
  id: "0",
50
50
  value: "0",
51
- key: "0"
52
- }, "Item not in a group"), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
51
+ children: "Item not in a group"
52
+ }, "0"), _jsx(SimpleSelect.Group, {
53
53
  id: "1",
54
54
  renderLabel: "Group one",
55
- key: "1"
56
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
57
- id: "2",
58
- value: "2",
59
- key: "2"
60
- }, "Grouped item one")), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
55
+ children: _jsx(SimpleSelect.Option, {
56
+ id: "2",
57
+ value: "2",
58
+ children: "Grouped item one"
59
+ }, "2")
60
+ }, "1"), _jsx(SimpleSelect.Group, {
61
61
  id: "3",
62
62
  renderLabel: "Group two",
63
- key: "3"
64
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
65
- id: "4",
66
- value: "4",
67
- key: "4"
68
- }, "Grouped item two")), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
63
+ children: _jsx(SimpleSelect.Option, {
64
+ id: "4",
65
+ value: "4",
66
+ children: "Grouped item two"
67
+ }, "4")
68
+ }, "3"), _jsx(SimpleSelect.Option, {
69
69
  id: "5",
70
70
  value: "5",
71
- key: "5"
72
- }, "Item not in a group two")]]
71
+ children: "Item not in a group two"
72
+ }, "5")]]
73
73
  },
74
74
  excludeProps: ['isOptionContentAppliedToInput'],
75
75
  getComponentProps: () => {
package/es/SimpleSelect/__new-tests__/SimpleSelect.test.js CHANGED
@@ -23,7 +23,7 @@ var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect
23
23
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
24
24
  * SOFTWARE.
25
25
  */
26
- import React from 'react';
26
+
27
27
  import { fireEvent, render, screen, waitFor } from '@testing-library/react';
28
28
  import { vi, it } from 'vitest';
29
29
  import userEvent from '@testing-library/user-event';
@@ -35,12 +35,13 @@ import { IconCheckSolid } from '@instructure/ui-icons';
35
35
  import { runAxeCheck } from '@instructure/ui-axe-check';
36
36
  import SimpleSelectExamples from '../__examples__/SimpleSelect.examples';
37
37
  import SimpleSelect from '../index';
38
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
38
39
  const defaultOptions = ['foo', 'bar', 'baz'];
39
- const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
40
+ const getOptions = disabled => defaultOptions.map(opt => _jsx(SimpleSelect.Option, {
40
41
  id: opt,
41
- key: opt,
42
42
  value: opt,
43
- isDisabled: opt === disabled
43
+ isDisabled: opt === disabled,
44
+ children: opt
44
45
  }, opt));
45
46
  describe('<SimpleSelect />', () => {
46
47
  let consoleErrorMock;
@@ -52,9 +53,10 @@ describe('<SimpleSelect />', () => {
52
53
  consoleErrorMock.mockRestore();
53
54
  });
54
55
  it('should render an input and a list', async () => {
55
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
56
- renderLabel: "Choose an option"
57
- }, getOptions()));
56
+ render(_jsx(SimpleSelect, {
57
+ renderLabel: "Choose an option",
58
+ children: getOptions()
59
+ }));
58
60
  const input = screen.getByLabelText('Choose an option');
59
61
  const listInitial = screen.queryByRole('listbox');
60
62
  expect(listInitial).not.toBeInTheDocument();
@@ -66,25 +68,32 @@ describe('<SimpleSelect />', () => {
66
68
  });
67
69
  });
68
70
  it('should render groups', async () => {
69
- render(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/React.createElement(SimpleSelect, {
70
- renderLabel: "Choose an option"
71
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
72
- id: "0",
73
- value: "0"
74
- }, "ungrouped option one"), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
75
- renderLabel: "Group one"
76
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
77
- id: "1",
78
- value: "1"
79
- }, "grouped option one")), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
80
- renderLabel: "Group two"
81
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
82
- id: "2",
83
- value: "2"
84
- }, "grouped option two")), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
85
- id: "3",
86
- value: "3"
87
- }, "ungrouped option two"))));
71
+ render(_SimpleSelect || (_SimpleSelect = _jsxs(SimpleSelect, {
72
+ renderLabel: "Choose an option",
73
+ children: [_jsx(SimpleSelect.Option, {
74
+ id: "0",
75
+ value: "0",
76
+ children: "ungrouped option one"
77
+ }), _jsx(SimpleSelect.Group, {
78
+ renderLabel: "Group one",
79
+ children: _jsx(SimpleSelect.Option, {
80
+ id: "1",
81
+ value: "1",
82
+ children: "grouped option one"
83
+ })
84
+ }), _jsx(SimpleSelect.Group, {
85
+ renderLabel: "Group two",
86
+ children: _jsx(SimpleSelect.Option, {
87
+ id: "2",
88
+ value: "2",
89
+ children: "grouped option two"
90
+ })
91
+ }), _jsx(SimpleSelect.Option, {
92
+ id: "3",
93
+ value: "3",
94
+ children: "ungrouped option two"
95
+ })]
96
+ })));
88
97
  const input = screen.getByLabelText('Choose an option');
89
98
  await userEvent.click(input);
90
99
  await waitFor(() => {
@@ -97,12 +106,16 @@ describe('<SimpleSelect />', () => {
97
106
  });
98
107
  });
99
108
  it('should ignore invalid children', async () => {
100
- render(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/React.createElement(SimpleSelect, {
101
- renderLabel: "Choose an option"
102
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
103
- id: "0",
104
- value: 0
105
- }, "valid"), /*#__PURE__*/React.createElement("div", null, "invalid"))));
109
+ render(_SimpleSelect2 || (_SimpleSelect2 = _jsxs(SimpleSelect, {
110
+ renderLabel: "Choose an option",
111
+ children: [_jsx(SimpleSelect.Option, {
112
+ id: "0",
113
+ value: 0,
114
+ children: "valid"
115
+ }), _jsx("div", {
116
+ children: "invalid"
117
+ })]
118
+ })));
106
119
  const input = screen.getByLabelText('Choose an option');
107
120
  await userEvent.click(input);
108
121
  await waitFor(() => {
@@ -113,10 +126,11 @@ describe('<SimpleSelect />', () => {
113
126
  });
114
127
  it('should fire onFocus when input gains focus', async () => {
115
128
  const onFocus = vi.fn();
116
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
129
+ render(_jsx(SimpleSelect, {
117
130
  renderLabel: "Choose an option",
118
- onFocus: onFocus
119
- }, getOptions()));
131
+ onFocus: onFocus,
132
+ children: getOptions()
133
+ }));
120
134
  const input = screen.getByLabelText('Choose an option');
121
135
  input.focus();
122
136
  await waitFor(() => {
@@ -125,7 +139,7 @@ describe('<SimpleSelect />', () => {
125
139
  });
126
140
  describe('input', () => {
127
141
  it('should render with a custom id if given', async () => {
128
- render(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/React.createElement(SimpleSelect, {
142
+ render(_SimpleSelect3 || (_SimpleSelect3 = _jsx(SimpleSelect, {
129
143
  renderLabel: "Choose an option",
130
144
  id: "customSelect"
131
145
  })));
@@ -133,7 +147,7 @@ describe('<SimpleSelect />', () => {
133
147
  expect(input).toHaveAttribute('id', 'customSelect');
134
148
  });
135
149
  it('should always render readonly', async () => {
136
- render(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/React.createElement(SimpleSelect, {
150
+ render(_SimpleSelect4 || (_SimpleSelect4 = _jsx(SimpleSelect, {
137
151
  renderLabel: "Choose an option",
138
152
  interaction: "enabled"
139
153
  })));
@@ -142,7 +156,7 @@ describe('<SimpleSelect />', () => {
142
156
  expect(input).not.toHaveAttribute('disabled');
143
157
  });
144
158
  it('should render disabled when interaction="disabled"', async () => {
145
- render(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/React.createElement(SimpleSelect, {
159
+ render(_SimpleSelect5 || (_SimpleSelect5 = _jsx(SimpleSelect, {
146
160
  renderLabel: "Choose an option",
147
161
  interaction: "disabled"
148
162
  })));
@@ -151,7 +165,7 @@ describe('<SimpleSelect />', () => {
151
165
  expect(input).not.toHaveAttribute('readonly');
152
166
  });
153
167
  it('should render required when isRequired={true}', async () => {
154
- render(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/React.createElement(SimpleSelect, {
168
+ render(_SimpleSelect6 || (_SimpleSelect6 = _jsx(SimpleSelect, {
155
169
  renderLabel: "Choose an option",
156
170
  isRequired: true
157
171
  })));
@@ -159,49 +173,55 @@ describe('<SimpleSelect />', () => {
159
173
  expect(input).toHaveAttribute('required');
160
174
  });
161
175
  it('should allow assistive text', async () => {
162
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
176
+ render(_jsx(SimpleSelect, {
163
177
  renderLabel: "Choose an option",
164
- assistiveText: "hello world"
165
- }, getOptions()));
178
+ assistiveText: "hello world",
179
+ children: getOptions()
180
+ }));
166
181
  const input = screen.getByLabelText('Choose an option');
167
182
  const assistiveText = screen.getByText('hello world');
168
183
  const assistiveTextID = assistiveText.getAttribute('id');
169
184
  expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
170
185
  });
171
186
  it('should allow custom props to pass through', async () => {
172
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
187
+ render(_jsx(SimpleSelect, {
173
188
  renderLabel: "Choose an option",
174
- "data-custom-attr": "true"
175
- }, getOptions()));
189
+ "data-custom-attr": "true",
190
+ children: getOptions()
191
+ }));
176
192
  const input = screen.getByLabelText('Choose an option');
177
193
  expect(input).toHaveAttribute('data-custom-attr', 'true');
178
194
  });
179
195
  it('should provide a ref to the input element', async () => {
180
196
  const inputRef = vi.fn();
181
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
197
+ render(_jsx(SimpleSelect, {
182
198
  renderLabel: "Choose an option",
183
- inputRef: inputRef
184
- }, getOptions()));
199
+ inputRef: inputRef,
200
+ children: getOptions()
201
+ }));
185
202
  const input = screen.getByLabelText('Choose an option');
186
203
  expect(inputRef).toHaveBeenCalledWith(input);
187
204
  });
188
205
  });
189
206
  it('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
190
- const renderBeforeLabel = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/React.createElement(IconCheckSolid, {
207
+ const renderBeforeLabel = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = _jsx(IconCheckSolid, {
191
208
  "data-testid": "option-icon"
192
209
  })));
193
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
194
- renderLabel: "Choose an option"
195
- }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
196
- id: "option-1",
197
- value: "1",
198
- isDisabled: true,
199
- renderBeforeLabel: renderBeforeLabel
200
- }, "option one"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
201
- id: "option-2",
202
- value: "2",
203
- renderBeforeLabel: renderBeforeLabel
204
- }, "option two")));
210
+ render(_jsxs(SimpleSelect, {
211
+ renderLabel: "Choose an option",
212
+ children: [_jsx(SimpleSelect.Option, {
213
+ id: "option-1",
214
+ value: "1",
215
+ isDisabled: true,
216
+ renderBeforeLabel: renderBeforeLabel,
217
+ children: "option one"
218
+ }), _jsx(SimpleSelect.Option, {
219
+ id: "option-2",
220
+ value: "2",
221
+ renderBeforeLabel: renderBeforeLabel,
222
+ children: "option two"
223
+ })]
224
+ }));
205
225
  const input = screen.getByLabelText('Choose an option');
206
226
  await userEvent.click(input);
207
227
  await waitFor(() => {
@@ -232,9 +252,10 @@ describe('<SimpleSelect />', () => {
232
252
  });
233
253
  describe('list', () => {
234
254
  it('should set aria-disabled on options when isDisabled={true}', async () => {
235
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
236
- renderLabel: "Choose an option"
237
- }, getOptions(defaultOptions[2])));
255
+ render(_jsx(SimpleSelect, {
256
+ renderLabel: "Choose an option",
257
+ children: getOptions(defaultOptions[2])
258
+ }));
238
259
  const input = screen.getByLabelText('Choose an option');
239
260
  await userEvent.click(input);
240
261
  await waitFor(() => {
@@ -245,10 +266,11 @@ describe('<SimpleSelect />', () => {
245
266
  });
246
267
  it('should provide a ref to the list element', async () => {
247
268
  const listRef = vi.fn();
248
- render(/*#__PURE__*/React.createElement(SimpleSelect, {
269
+ render(_jsx(SimpleSelect, {
249
270
  renderLabel: "Choose an option",
250
- listRef: listRef
251
- }, getOptions()));
271
+ listRef: listRef,
272
+ children: getOptions()
273
+ }));
252
274
  const input = screen.getByLabelText('Choose an option');
253
275
  await userEvent.click(input);
254
276
  await waitFor(() => {
@@ -271,15 +293,16 @@ describe('<SimpleSelect />', () => {
271
293
  describe('children', () => {
272
294
  const initialOptions = ['foo', 'bar'];
273
295
  const updatedOptions = ['bar', 'baz'];
274
- const getOptions = options => options.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
296
+ const getOptions = options => options.map(opt => _jsx(SimpleSelect.Option, {
275
297
  id: opt,
276
- key: opt,
277
- value: opt
298
+ value: opt,
299
+ children: opt
278
300
  }, opt));
279
301
  const renderSimpleSelect = options => {
280
- return render(/*#__PURE__*/React.createElement(SimpleSelect, {
281
- renderLabel: "Choose an option"
282
- }, getOptions(options)));
302
+ return render(_jsx(SimpleSelect, {
303
+ renderLabel: "Choose an option",
304
+ children: getOptions(options)
305
+ }));
283
306
  };
284
307
  it('should clear selection if selected option does not exist in updated options', () => {
285
308
  const _renderSimpleSelect = renderSimpleSelect(initialOptions),
@@ -293,9 +316,10 @@ describe('<SimpleSelect />', () => {
293
316
  });
294
317
  fireEvent.click(fooOption);
295
318
  expect(input).toHaveValue('foo');
296
- rerender(/*#__PURE__*/React.createElement(SimpleSelect, {
297
- renderLabel: "Choose an option"
298
- }, getOptions(updatedOptions)));
319
+ rerender(_jsx(SimpleSelect, {
320
+ renderLabel: "Choose an option",
321
+ children: getOptions(updatedOptions)
322
+ }));
299
323
  expect(input).toHaveValue('');
300
324
  });
301
325
  it('should persist selected option if it exists in updated options', () => {
@@ -310,9 +334,10 @@ describe('<SimpleSelect />', () => {
310
334
  });
311
335
  fireEvent.click(barOption);
312
336
  expect(input).toHaveValue('bar');
313
- rerender(/*#__PURE__*/React.createElement(SimpleSelect, {
314
- renderLabel: "Choose an option"
315
- }, getOptions(updatedOptions)));
337
+ rerender(_jsx(SimpleSelect, {
338
+ renderLabel: "Choose an option",
339
+ children: getOptions(updatedOptions)
340
+ }));
316
341
  expect(input).toHaveValue('bar');
317
342
  });
318
343
  });
package/es/SimpleSelect/index.js CHANGED
@@ -27,13 +27,14 @@ var _dec, _dec2, _class, _SimpleSelect;
27
27
  * SOFTWARE.
28
28
  */
29
29
 
30
- import React, { Component, Children } from 'react';
30
+ import { isValidElement, Component, Children } from 'react';
31
31
  import { testable } from '@instructure/ui-testable';
32
32
  import { matchComponentTypes, passthroughProps, callRenderProp, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
33
33
  import { Select } from '@instructure/ui-select';
34
34
  import { Option } from './Option';
35
35
  import { Group } from './Group';
36
36
  import { allowedProps, propTypes } from './props';
37
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
37
38
  /**
38
39
  ---
39
40
  category: components
@@ -177,8 +178,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
177
178
  });
178
179
  }
179
180
  hasOptionsChanged(prevChildren, currentChildren) {
180
- const getValues = children => React.Children.map(children, child => {
181
- if (/*#__PURE__*/React.isValidElement(child)) {
181
+ const getValues = children => Children.map(children, child => {
182
+ if (/*#__PURE__*/isValidElement(child)) {
182
183
  return child.props.value;
183
184
  }
184
185
  return null;
@@ -260,11 +261,12 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
260
261
  return children;
261
262
  }
262
263
  renderEmptyOption() {
263
- return /*#__PURE__*/React.createElement(Select.Option, {
264
+ return _jsx(Select.Option, {
264
265
  id: this._emptyOptionId,
265
266
  isHighlighted: false,
266
- isSelected: false
267
- }, callRenderProp(this.props.renderEmptyOption));
267
+ isSelected: false,
268
+ children: callRenderProp(this.props.renderEmptyOption)
269
+ });
268
270
  }
269
271
  renderOption(option) {
270
272
  const _option$props = option.props,
@@ -287,16 +289,17 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
287
289
  children
288
290
  }) : renderLabel;
289
291
  };
290
- return /*#__PURE__*/React.createElement(Select.Option, Object.assign({
292
+ return _jsx(Select.Option, {
291
293
  id: id,
292
294
  value: value,
293
- key: option.key || id,
294
295
  isHighlighted: id === this.state.highlightedOptionId,
295
296
  isSelected: id === this.state.selectedOptionId,
296
297
  isDisabled: option.props.isDisabled,
297
298
  renderBeforeLabel: getRenderLabel(renderBeforeLabel),
298
- renderAfterLabel: getRenderLabel(renderAfterLabel)
299
- }, passthroughProps(rest)), children);
299
+ renderAfterLabel: getRenderLabel(renderAfterLabel),
300
+ ...passthroughProps(rest),
301
+ children: children
302
+ }, option.key || id);
300
303
  }
301
304
  renderGroup(group) {
302
305
  const _group$props = group.props,
@@ -304,10 +307,11 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
304
307
  renderLabel = _group$props.renderLabel,
305
308
  children = _group$props.children,
306
309
  rest = _objectWithoutProperties(_group$props, _excluded2);
307
- return /*#__PURE__*/React.createElement(Select.Group, Object.assign({
310
+ return _jsx(Select.Group, {
308
311
  renderLabel: renderLabel,
309
- key: group.key || id
310
- }, passthroughProps(rest)), Children.map(children, child => this.renderOption(child)));
312
+ ...passthroughProps(rest),
313
+ children: Children.map(children, child => this.renderOption(child))
314
+ }, group.key || id);
311
315
  }
312
316
  render() {
313
317
  const _this$props = this.props,
@@ -340,7 +344,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
340
344
  onHideOptions = _this$props.onHideOptions,
341
345
  children = _this$props.children,
342
346
  rest = _objectWithoutProperties(_this$props, _excluded3);
343
- return /*#__PURE__*/React.createElement(Select, Object.assign({
347
+ return _jsx(Select, {
344
348
  renderLabel: renderLabel,
345
349
  inputValue: this.state.inputValue,
346
350
  isShowingOptions: this.state.isShowingOptions,
@@ -370,8 +374,10 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
370
374
  onRequestHideOptions: this.handleHideOptions,
371
375
  onRequestHighlightOption: this.handleHighlightOption,
372
376
  onRequestSelectOption: this.handleSelectOption,
373
- isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
374
- }, passthroughProps(rest)), this.renderChildren());
377
+ isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
378
+ ...passthroughProps(rest),
379
+ children: this.renderChildren()
380
+ });
375
381
  }
376
382
  }, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.propTypes = propTypes, _SimpleSelect.defaultProps = {
377
383
  size: 'medium',
package/lib/SimpleSelect/__examples__/SimpleSelect.examples.js CHANGED
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
7
  var _SimpleSelect = require("../../SimpleSelect");
8
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
9
  /*
11
10
  * The MIT License (MIT)
12
11
  *
@@ -34,48 +33,48 @@ var _default = exports.default = {
34
33
  sectionProp: 'size',
35
34
  maxExamplesPerPage: 50,
36
35
  propValues: {
37
- children: [[/*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
36
+ children: [[(0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
38
37
  id: "0",
39
38
  value: "0",
40
- key: "0"
41
- }, "Option one"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
39
+ children: "Option one"
40
+ }, "0"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
42
41
  id: "1",
43
42
  value: "1",
44
- key: "1"
45
- }, "Option two"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
43
+ children: "Option two"
44
+ }, "1"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
46
45
  id: "2",
47
46
  value: "2",
48
- key: "2"
49
- }, "Option three"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
47
+ children: "Option three"
48
+ }, "2"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
50
49
  id: "3",
51
50
  value: "3",
52
- key: "3",
53
- isDisabled: true
54
- }, "Option four")], [/*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
51
+ isDisabled: true,
52
+ children: "Option four"
53
+ }, "3")], [(0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
55
54
  id: "0",
56
55
  value: "0",
57
- key: "0"
58
- }, "Item not in a group"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Group, {
56
+ children: "Item not in a group"
57
+ }, "0"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Group, {
59
58
  id: "1",
60
59
  renderLabel: "Group one",
61
- key: "1"
62
- }, /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
63
- id: "2",
64
- value: "2",
65
- key: "2"
66
- }, "Grouped item one")), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Group, {
60
+ children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
61
+ id: "2",
62
+ value: "2",
63
+ children: "Grouped item one"
64
+ }, "2")
65
+ }, "1"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Group, {
67
66
  id: "3",
68
67
  renderLabel: "Group two",
69
- key: "3"
70
- }, /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
71
- id: "4",
72
- value: "4",
73
- key: "4"
74
- }, "Grouped item two")), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
68
+ children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
69
+ id: "4",
70
+ value: "4",
71
+ children: "Grouped item two"
72
+ }, "4")
73
+ }, "3"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
75
74
  id: "5",
76
75
  value: "5",
77
- key: "5"
78
- }, "Item not in a group two")]]
76
+ children: "Item not in a group two"
77
+ }, "5")]]
79
78
  },
80
79
  excludeProps: ['isOptionContentAppliedToInput'],
81
80
  getComponentProps: () => {