@instructure/ui-simple-select 10.16.1-snapshot-0 → 10.16.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/lib/SimpleSelect/__new-tests__/SimpleSelect.test.js CHANGED
@@ -2,8 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
5
- var _react = _interopRequireDefault(require("react"));
6
- var _react2 = require("@testing-library/react");
5
+ var _react = require("@testing-library/react");
7
6
  var _vitest = require("vitest");
8
7
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
9
8
  require("@testing-library/jest-dom");
@@ -12,6 +11,7 @@ var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
12
11
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
13
12
  var _SimpleSelect7 = _interopRequireDefault(require("../__examples__/SimpleSelect.examples"));
14
13
  var _index = _interopRequireDefault(require("../index"));
14
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
15
  var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect5, _SimpleSelect6, _IconCheckSolid;
16
16
  /*
17
17
  * The MIT License (MIT)
@@ -38,11 +38,11 @@ var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect
38
38
  */
39
39
  // eslint-disable-next-line no-restricted-imports
40
40
  const defaultOptions = ['foo', 'bar', 'baz'];
41
- const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
41
+ const getOptions = disabled => defaultOptions.map(opt => (0, _jsxRuntime.jsx)(_index.default.Option, {
42
42
  id: opt,
43
- key: opt,
44
43
  value: opt,
45
- isDisabled: opt === disabled
44
+ isDisabled: opt === disabled,
45
+ children: opt
46
46
  }, opt));
47
47
  describe('<SimpleSelect />', () => {
48
48
  let consoleErrorMock;
@@ -54,44 +54,52 @@ describe('<SimpleSelect />', () => {
54
54
  consoleErrorMock.mockRestore();
55
55
  });
56
56
  (0, _vitest.it)('should render an input and a list', async () => {
57
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
58
- renderLabel: "Choose an option"
59
- }, getOptions()));
60
- const input = _react2.screen.getByLabelText('Choose an option');
61
- const listInitial = _react2.screen.queryByRole('listbox');
57
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
58
+ renderLabel: "Choose an option",
59
+ children: getOptions()
60
+ }));
61
+ const input = _react.screen.getByLabelText('Choose an option');
62
+ const listInitial = _react.screen.queryByRole('listbox');
62
63
  expect(listInitial).not.toBeInTheDocument();
63
64
  expect(input).toBeInTheDocument();
64
65
  await _userEvent.default.click(input);
65
- await (0, _react2.waitFor)(() => {
66
- const list = _react2.screen.queryByRole('listbox');
66
+ await (0, _react.waitFor)(() => {
67
+ const list = _react.screen.queryByRole('listbox');
67
68
  expect(list).toBeInTheDocument();
68
69
  });
69
70
  });
70
71
  (0, _vitest.it)('should render groups', async () => {
71
- (0, _react2.render)(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/_react.default.createElement(_index.default, {
72
- renderLabel: "Choose an option"
73
- }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
74
- id: "0",
75
- value: "0"
76
- }, "ungrouped option one"), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
77
- renderLabel: "Group one"
78
- }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
79
- id: "1",
80
- value: "1"
81
- }, "grouped option one")), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
82
- renderLabel: "Group two"
83
- }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
84
- id: "2",
85
- value: "2"
86
- }, "grouped option two")), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
87
- id: "3",
88
- value: "3"
89
- }, "ungrouped option two"))));
90
- const input = _react2.screen.getByLabelText('Choose an option');
72
+ (0, _react.render)(_SimpleSelect || (_SimpleSelect = (0, _jsxRuntime.jsxs)(_index.default, {
73
+ renderLabel: "Choose an option",
74
+ children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
75
+ id: "0",
76
+ value: "0",
77
+ children: "ungrouped option one"
78
+ }), (0, _jsxRuntime.jsx)(_index.default.Group, {
79
+ renderLabel: "Group one",
80
+ children: (0, _jsxRuntime.jsx)(_index.default.Option, {
81
+ id: "1",
82
+ value: "1",
83
+ children: "grouped option one"
84
+ })
85
+ }), (0, _jsxRuntime.jsx)(_index.default.Group, {
86
+ renderLabel: "Group two",
87
+ children: (0, _jsxRuntime.jsx)(_index.default.Option, {
88
+ id: "2",
89
+ value: "2",
90
+ children: "grouped option two"
91
+ })
92
+ }), (0, _jsxRuntime.jsx)(_index.default.Option, {
93
+ id: "3",
94
+ value: "3",
95
+ children: "ungrouped option two"
96
+ })]
97
+ })));
98
+ const input = _react.screen.getByLabelText('Choose an option');
91
99
  await _userEvent.default.click(input);
92
- await (0, _react2.waitFor)(() => {
93
- const groups = _react2.screen.getAllByRole('group');
94
- const labelOne = _react2.screen.getByText('Group one');
100
+ await (0, _react.waitFor)(() => {
101
+ const groups = _react.screen.getAllByRole('group');
102
+ const labelOne = _react.screen.getByText('Group one');
95
103
  const labelOneID = labelOne.getAttribute('id');
96
104
  expect(groups.length).toBe(2);
97
105
  expect(groups[0]).toHaveAttribute('aria-labelledby', labelOneID);
@@ -99,115 +107,126 @@ describe('<SimpleSelect />', () => {
99
107
  });
100
108
  });
101
109
  (0, _vitest.it)('should ignore invalid children', async () => {
102
- (0, _react2.render)(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/_react.default.createElement(_index.default, {
103
- renderLabel: "Choose an option"
104
- }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
105
- id: "0",
106
- value: 0
107
- }, "valid"), /*#__PURE__*/_react.default.createElement("div", null, "invalid"))));
108
- const input = _react2.screen.getByLabelText('Choose an option');
110
+ (0, _react.render)(_SimpleSelect2 || (_SimpleSelect2 = (0, _jsxRuntime.jsxs)(_index.default, {
111
+ renderLabel: "Choose an option",
112
+ children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
113
+ id: "0",
114
+ value: 0,
115
+ children: "valid"
116
+ }), (0, _jsxRuntime.jsx)("div", {
117
+ children: "invalid"
118
+ })]
119
+ })));
120
+ const input = _react.screen.getByLabelText('Choose an option');
109
121
  await _userEvent.default.click(input);
110
- await (0, _react2.waitFor)(() => {
111
- const invalidChild = _react2.screen.queryByText('invalid');
122
+ await (0, _react.waitFor)(() => {
123
+ const invalidChild = _react.screen.queryByText('invalid');
112
124
  expect(invalidChild).not.toBeInTheDocument();
113
125
  expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining('Expected one of Group, Option'), expect.any(String));
114
126
  });
115
127
  });
116
128
  (0, _vitest.it)('should fire onFocus when input gains focus', async () => {
117
129
  const onFocus = _vitest.vi.fn();
118
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
130
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
119
131
  renderLabel: "Choose an option",
120
- onFocus: onFocus
121
- }, getOptions()));
122
- const input = _react2.screen.getByLabelText('Choose an option');
132
+ onFocus: onFocus,
133
+ children: getOptions()
134
+ }));
135
+ const input = _react.screen.getByLabelText('Choose an option');
123
136
  input.focus();
124
- await (0, _react2.waitFor)(() => {
137
+ await (0, _react.waitFor)(() => {
125
138
  expect(onFocus).toHaveBeenCalled();
126
139
  });
127
140
  });
128
141
  describe('input', () => {
129
142
  (0, _vitest.it)('should render with a custom id if given', async () => {
130
- (0, _react2.render)(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/_react.default.createElement(_index.default, {
143
+ (0, _react.render)(_SimpleSelect3 || (_SimpleSelect3 = (0, _jsxRuntime.jsx)(_index.default, {
131
144
  renderLabel: "Choose an option",
132
145
  id: "customSelect"
133
146
  })));
134
- const input = _react2.screen.getByLabelText('Choose an option');
147
+ const input = _react.screen.getByLabelText('Choose an option');
135
148
  expect(input).toHaveAttribute('id', 'customSelect');
136
149
  });
137
150
  (0, _vitest.it)('should always render readonly', async () => {
138
- (0, _react2.render)(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/_react.default.createElement(_index.default, {
151
+ (0, _react.render)(_SimpleSelect4 || (_SimpleSelect4 = (0, _jsxRuntime.jsx)(_index.default, {
139
152
  renderLabel: "Choose an option",
140
153
  interaction: "enabled"
141
154
  })));
142
- const input = _react2.screen.getByLabelText('Choose an option');
155
+ const input = _react.screen.getByLabelText('Choose an option');
143
156
  expect(input).toHaveAttribute('readonly');
144
157
  expect(input).not.toHaveAttribute('disabled');
145
158
  });
146
159
  (0, _vitest.it)('should render disabled when interaction="disabled"', async () => {
147
- (0, _react2.render)(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/_react.default.createElement(_index.default, {
160
+ (0, _react.render)(_SimpleSelect5 || (_SimpleSelect5 = (0, _jsxRuntime.jsx)(_index.default, {
148
161
  renderLabel: "Choose an option",
149
162
  interaction: "disabled"
150
163
  })));
151
- const input = _react2.screen.getByLabelText('Choose an option');
164
+ const input = _react.screen.getByLabelText('Choose an option');
152
165
  expect(input).toHaveAttribute('disabled');
153
166
  expect(input).not.toHaveAttribute('readonly');
154
167
  });
155
168
  (0, _vitest.it)('should render required when isRequired={true}', async () => {
156
- (0, _react2.render)(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/_react.default.createElement(_index.default, {
169
+ (0, _react.render)(_SimpleSelect6 || (_SimpleSelect6 = (0, _jsxRuntime.jsx)(_index.default, {
157
170
  renderLabel: "Choose an option",
158
171
  isRequired: true
159
172
  })));
160
- const input = _react2.screen.getByLabelText('Choose an option *');
173
+ const input = _react.screen.getByLabelText('Choose an option *');
161
174
  expect(input).toHaveAttribute('required');
162
175
  });
163
176
  (0, _vitest.it)('should allow assistive text', async () => {
164
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
177
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
165
178
  renderLabel: "Choose an option",
166
- assistiveText: "hello world"
167
- }, getOptions()));
168
- const input = _react2.screen.getByLabelText('Choose an option');
169
- const assistiveText = _react2.screen.getByText('hello world');
179
+ assistiveText: "hello world",
180
+ children: getOptions()
181
+ }));
182
+ const input = _react.screen.getByLabelText('Choose an option');
183
+ const assistiveText = _react.screen.getByText('hello world');
170
184
  const assistiveTextID = assistiveText.getAttribute('id');
171
185
  expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
172
186
  });
173
187
  (0, _vitest.it)('should allow custom props to pass through', async () => {
174
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
188
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
175
189
  renderLabel: "Choose an option",
176
- "data-custom-attr": "true"
177
- }, getOptions()));
178
- const input = _react2.screen.getByLabelText('Choose an option');
190
+ "data-custom-attr": "true",
191
+ children: getOptions()
192
+ }));
193
+ const input = _react.screen.getByLabelText('Choose an option');
179
194
  expect(input).toHaveAttribute('data-custom-attr', 'true');
180
195
  });
181
196
  (0, _vitest.it)('should provide a ref to the input element', async () => {
182
197
  const inputRef = _vitest.vi.fn();
183
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
198
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
184
199
  renderLabel: "Choose an option",
185
- inputRef: inputRef
186
- }, getOptions()));
187
- const input = _react2.screen.getByLabelText('Choose an option');
200
+ inputRef: inputRef,
201
+ children: getOptions()
202
+ }));
203
+ const input = _react.screen.getByLabelText('Choose an option');
188
204
  expect(inputRef).toHaveBeenCalledWith(input);
189
205
  });
190
206
  });
191
207
  (0, _vitest.it)('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
192
- const renderBeforeLabel = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/_react.default.createElement(_IconCheckSolid2.IconCheckSolid, {
208
+ const renderBeforeLabel = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = (0, _jsxRuntime.jsx)(_IconCheckSolid2.IconCheckSolid, {
193
209
  "data-testid": "option-icon"
194
210
  })));
195
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
196
- renderLabel: "Choose an option"
197
- }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
198
- id: "option-1",
199
- value: "1",
200
- isDisabled: true,
201
- renderBeforeLabel: renderBeforeLabel
202
- }, "option one"), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
203
- id: "option-2",
204
- value: "2",
205
- renderBeforeLabel: renderBeforeLabel
206
- }, "option two")));
207
- const input = _react2.screen.getByLabelText('Choose an option');
211
+ (0, _react.render)((0, _jsxRuntime.jsxs)(_index.default, {
212
+ renderLabel: "Choose an option",
213
+ children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
214
+ id: "option-1",
215
+ value: "1",
216
+ isDisabled: true,
217
+ renderBeforeLabel: renderBeforeLabel,
218
+ children: "option one"
219
+ }), (0, _jsxRuntime.jsx)(_index.default.Option, {
220
+ id: "option-2",
221
+ value: "2",
222
+ renderBeforeLabel: renderBeforeLabel,
223
+ children: "option two"
224
+ })]
225
+ }));
226
+ const input = _react.screen.getByLabelText('Choose an option');
208
227
  await _userEvent.default.click(input);
209
- await (0, _react2.waitFor)(() => {
210
- const optionIcons = _react2.screen.getAllByTestId('option-icon');
228
+ await (0, _react.waitFor)(() => {
229
+ const optionIcons = _react.screen.getAllByTestId('option-icon');
211
230
  expect(optionIcons.length).toBe(2);
212
231
  expect(renderBeforeLabel).toHaveBeenCalledTimes(2);
213
232
  const _ref = renderBeforeLabel.mock.calls,
@@ -234,27 +253,29 @@ describe('<SimpleSelect />', () => {
234
253
  });
235
254
  describe('list', () => {
236
255
  (0, _vitest.it)('should set aria-disabled on options when isDisabled={true}', async () => {
237
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
238
- renderLabel: "Choose an option"
239
- }, getOptions(defaultOptions[2])));
240
- const input = _react2.screen.getByLabelText('Choose an option');
256
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
257
+ renderLabel: "Choose an option",
258
+ children: getOptions(defaultOptions[2])
259
+ }));
260
+ const input = _react.screen.getByLabelText('Choose an option');
241
261
  await _userEvent.default.click(input);
242
- await (0, _react2.waitFor)(() => {
243
- const options = _react2.screen.getAllByRole('option');
262
+ await (0, _react.waitFor)(() => {
263
+ const options = _react.screen.getAllByRole('option');
244
264
  expect(options[0]).not.toHaveAttribute('aria-disabled');
245
265
  expect(options[2]).toHaveAttribute('aria-disabled', 'true');
246
266
  });
247
267
  });
248
268
  (0, _vitest.it)('should provide a ref to the list element', async () => {
249
269
  const listRef = _vitest.vi.fn();
250
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
270
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
251
271
  renderLabel: "Choose an option",
252
- listRef: listRef
253
- }, getOptions()));
254
- const input = _react2.screen.getByLabelText('Choose an option');
272
+ listRef: listRef,
273
+ children: getOptions()
274
+ }));
275
+ const input = _react.screen.getByLabelText('Choose an option');
255
276
  await _userEvent.default.click(input);
256
- await (0, _react2.waitFor)(() => {
257
- const listbox = _react2.screen.getByRole('listbox');
277
+ await (0, _react.waitFor)(() => {
278
+ const listbox = _react.screen.getByRole('listbox');
258
279
  expect(listRef).toHaveBeenCalledWith(listbox);
259
280
  });
260
281
  });
@@ -264,7 +285,7 @@ describe('<SimpleSelect />', () => {
264
285
  _vitest.it.each(generatedComponents)('should be accessible with example: $description', async ({
265
286
  content
266
287
  }) => {
267
- const _render = (0, _react2.render)(content),
288
+ const _render = (0, _react.render)(content),
268
289
  container = _render.container;
269
290
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
270
291
  expect(axeCheck).toBe(true);
@@ -273,48 +294,51 @@ describe('<SimpleSelect />', () => {
273
294
  describe('children', () => {
274
295
  const initialOptions = ['foo', 'bar'];
275
296
  const updatedOptions = ['bar', 'baz'];
276
- const getOptions = options => options.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
297
+ const getOptions = options => options.map(opt => (0, _jsxRuntime.jsx)(_index.default.Option, {
277
298
  id: opt,
278
- key: opt,
279
- value: opt
299
+ value: opt,
300
+ children: opt
280
301
  }, opt));
281
302
  const renderSimpleSelect = options => {
282
- return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
283
- renderLabel: "Choose an option"
284
- }, getOptions(options)));
303
+ return (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
304
+ renderLabel: "Choose an option",
305
+ children: getOptions(options)
306
+ }));
285
307
  };
286
308
  (0, _vitest.it)('should clear selection if selected option does not exist in updated options', () => {
287
309
  const _renderSimpleSelect = renderSimpleSelect(initialOptions),
288
310
  rerender = _renderSimpleSelect.rerender;
289
- const input = _react2.screen.getByRole('combobox', {
311
+ const input = _react.screen.getByRole('combobox', {
290
312
  name: 'Choose an option'
291
313
  });
292
- _react2.fireEvent.click(input);
293
- const fooOption = _react2.screen.getByRole('option', {
314
+ _react.fireEvent.click(input);
315
+ const fooOption = _react.screen.getByRole('option', {
294
316
  name: 'foo'
295
317
  });
296
- _react2.fireEvent.click(fooOption);
318
+ _react.fireEvent.click(fooOption);
297
319
  expect(input).toHaveValue('foo');
298
- rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
299
- renderLabel: "Choose an option"
300
- }, getOptions(updatedOptions)));
320
+ rerender((0, _jsxRuntime.jsx)(_index.default, {
321
+ renderLabel: "Choose an option",
322
+ children: getOptions(updatedOptions)
323
+ }));
301
324
  expect(input).toHaveValue('');
302
325
  });
303
326
  (0, _vitest.it)('should persist selected option if it exists in updated options', () => {
304
327
  const _renderSimpleSelect2 = renderSimpleSelect(initialOptions),
305
328
  rerender = _renderSimpleSelect2.rerender;
306
- const input = _react2.screen.getByRole('combobox', {
329
+ const input = _react.screen.getByRole('combobox', {
307
330
  name: 'Choose an option'
308
331
  });
309
- _react2.fireEvent.click(input);
310
- const barOption = _react2.screen.getByRole('option', {
332
+ _react.fireEvent.click(input);
333
+ const barOption = _react.screen.getByRole('option', {
311
334
  name: 'bar'
312
335
  });
313
- _react2.fireEvent.click(barOption);
336
+ _react.fireEvent.click(barOption);
314
337
  expect(input).toHaveValue('bar');
315
- rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
316
- renderLabel: "Choose an option"
317
- }, getOptions(updatedOptions)));
338
+ rerender((0, _jsxRuntime.jsx)(_index.default, {
339
+ renderLabel: "Choose an option",
340
+ children: getOptions(updatedOptions)
341
+ }));
318
342
  expect(input).toHaveValue('bar');
319
343
  });
320
344
  });
package/lib/SimpleSelect/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.SimpleSelect = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireWildcard(require("react"));
9
+ var _react = require("react");
11
10
  var _testable = require("@instructure/ui-testable/lib/testable.js");
12
11
  var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
13
12
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -18,6 +17,7 @@ var _Select = require("@instructure/ui-select/lib/Select");
18
17
  var _Option = require("./Option");
19
18
  var _Group = require("./Group");
20
19
  var _props = require("./props");
20
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
21
21
  const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
22
22
  _excluded2 = ["id", "renderLabel", "children"],
23
23
  _excluded3 = ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "optionsMaxHeight", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"];
@@ -188,8 +188,8 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
188
188
  });
189
189
  }
190
190
  hasOptionsChanged(prevChildren, currentChildren) {
191
- const getValues = children => _react.default.Children.map(children, child => {
192
- if (/*#__PURE__*/_react.default.isValidElement(child)) {
191
+ const getValues = children => _react.Children.map(children, child => {
192
+ if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
193
193
  return child.props.value;
194
194
  }
195
195
  return null;
@@ -271,11 +271,12 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
271
271
  return children;
272
272
  }
273
273
  renderEmptyOption() {
274
- return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, {
274
+ return (0, _jsxRuntime.jsx)(_Select.Select.Option, {
275
275
  id: this._emptyOptionId,
276
276
  isHighlighted: false,
277
- isSelected: false
278
- }, (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption));
277
+ isSelected: false,
278
+ children: (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption)
279
+ });
279
280
  }
280
281
  renderOption(option) {
281
282
  const _option$props = option.props,
@@ -298,16 +299,17 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
298
299
  children
299
300
  }) : renderLabel;
300
301
  };
301
- return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, Object.assign({
302
+ return (0, _jsxRuntime.jsx)(_Select.Select.Option, {
302
303
  id: id,
303
304
  value: value,
304
- key: option.key || id,
305
305
  isHighlighted: id === this.state.highlightedOptionId,
306
306
  isSelected: id === this.state.selectedOptionId,
307
307
  isDisabled: option.props.isDisabled,
308
308
  renderBeforeLabel: getRenderLabel(renderBeforeLabel),
309
- renderAfterLabel: getRenderLabel(renderAfterLabel)
310
- }, (0, _passthroughProps.passthroughProps)(rest)), children);
309
+ renderAfterLabel: getRenderLabel(renderAfterLabel),
310
+ ...(0, _passthroughProps.passthroughProps)(rest),
311
+ children: children
312
+ }, option.key || id);
311
313
  }
312
314
  renderGroup(group) {
313
315
  const _group$props = group.props,
@@ -315,10 +317,11 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
315
317
  renderLabel = _group$props.renderLabel,
316
318
  children = _group$props.children,
317
319
  rest = (0, _objectWithoutProperties2.default)(_group$props, _excluded2);
318
- return /*#__PURE__*/_react.default.createElement(_Select.Select.Group, Object.assign({
320
+ return (0, _jsxRuntime.jsx)(_Select.Select.Group, {
319
321
  renderLabel: renderLabel,
320
- key: group.key || id
321
- }, (0, _passthroughProps.passthroughProps)(rest)), _react.Children.map(children, child => this.renderOption(child)));
322
+ ...(0, _passthroughProps.passthroughProps)(rest),
323
+ children: _react.Children.map(children, child => this.renderOption(child))
324
+ }, group.key || id);
322
325
  }
323
326
  render() {
324
327
  const _this$props = this.props,
@@ -351,7 +354,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
351
354
  onHideOptions = _this$props.onHideOptions,
352
355
  children = _this$props.children,
353
356
  rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
354
- return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
357
+ return (0, _jsxRuntime.jsx)(_Select.Select, {
355
358
  renderLabel: renderLabel,
356
359
  inputValue: this.state.inputValue,
357
360
  isShowingOptions: this.state.isShowingOptions,
@@ -381,8 +384,10 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
381
384
  onRequestHideOptions: this.handleHideOptions,
382
385
  onRequestHighlightOption: this.handleHighlightOption,
383
386
  onRequestSelectOption: this.handleSelectOption,
384
- isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
385
- }, (0, _passthroughProps.passthroughProps)(rest)), this.renderChildren());
387
+ isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
388
+ ...(0, _passthroughProps.passthroughProps)(rest),
389
+ children: this.renderChildren()
390
+ });
386
391
  }
387
392
  }, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.propTypes = _props.propTypes, _SimpleSelect.defaultProps = {
388
393
  size: 'medium',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-simple-select",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1",
4
4
  "description": "A component for standard select element behavior.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,23 +24,23 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.16.1-snapshot-0",
28
- "@instructure/shared-types": "10.16.1-snapshot-0",
29
- "@instructure/ui-form-field": "10.16.1-snapshot-0",
30
- "@instructure/ui-position": "10.16.1-snapshot-0",
31
- "@instructure/ui-prop-types": "10.16.1-snapshot-0",
32
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
33
- "@instructure/ui-select": "10.16.1-snapshot-0",
34
- "@instructure/ui-testable": "10.16.1-snapshot-0",
27
+ "@instructure/console": "10.16.1",
28
+ "@instructure/shared-types": "10.16.1",
29
+ "@instructure/ui-form-field": "10.16.1",
30
+ "@instructure/ui-position": "10.16.1",
31
+ "@instructure/ui-prop-types": "10.16.1",
32
+ "@instructure/ui-react-utils": "10.16.1",
33
+ "@instructure/ui-select": "10.16.1",
34
+ "@instructure/ui-testable": "10.16.1",
35
35
  "prop-types": "^15.8.1"
36
36
  },
37
37
  "devDependencies": {
38
- "@instructure/ui-axe-check": "10.16.1-snapshot-0",
39
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
40
- "@instructure/ui-color-utils": "10.16.1-snapshot-0",
41
- "@instructure/ui-icons": "10.16.1-snapshot-0",
42
- "@instructure/ui-test-utils": "10.16.1-snapshot-0",
43
- "@instructure/ui-utils": "10.16.1-snapshot-0",
38
+ "@instructure/ui-axe-check": "10.16.1",
39
+ "@instructure/ui-babel-preset": "10.16.1",
40
+ "@instructure/ui-color-utils": "10.16.1",
41
+ "@instructure/ui-icons": "10.16.1",
42
+ "@instructure/ui-test-utils": "10.16.1",
43
+ "@instructure/ui-utils": "10.16.1",
44
44
  "@testing-library/jest-dom": "^6.6.3",
45
45
  "@testing-library/react": "^16.0.1",
46
46
  "@testing-library/user-event": "^14.5.2",
package/src/SimpleSelect/__examples__/SimpleSelect.examples.tsx CHANGED
@@ -22,8 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
-
27
25
  import { SimpleSelect } from '../../SimpleSelect'
28
26
 
29
27
  import type { StoryConfig } from '@instructure/ui-test-utils'
package/src/SimpleSelect/__new-tests__/SimpleSelect.test.tsx CHANGED
@@ -21,7 +21,7 @@
21
21
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
22
  * SOFTWARE.
23
23
  */
24
- import React from 'react'
24
+
25
25
  import { fireEvent, render, screen, waitFor } from '@testing-library/react'
26
26
  import { vi, MockInstance, it } from 'vitest'
27
27
  import userEvent from '@testing-library/user-event'
package/src/SimpleSelect/index.tsx CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, { Component, Children } from 'react'
25
+ import { isValidElement, ComponentElement, Component, Children } from 'react'
26
26
 
27
27
  import { testable } from '@instructure/ui-testable'
28
28
  import {
@@ -48,8 +48,8 @@ import type { SimpleSelectGroupProps } from './Group/props'
48
48
  import type { SimpleSelectProps } from './props'
49
49
  import { allowedProps, propTypes, SimpleSelectState } from './props'
50
50
 
51
- type OptionChild = React.ComponentElement<SimpleSelectOptionProps, Option>
52
- type GroupChild = React.ComponentElement<SimpleSelectGroupProps, Group>
51
+ type OptionChild = ComponentElement<SimpleSelectOptionProps, Option>
52
+ type GroupChild = ComponentElement<SimpleSelectGroupProps, Group>
53
53
 
54
54
  type GetOption = <F extends keyof SimpleSelectOptionProps>(
55
55
  field: F,
@@ -136,8 +136,8 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
136
136
  currentChildren: SimpleSelectProps['children']
137
137
  ) {
138
138
  const getValues = (children: SimpleSelectProps['children']) =>
139
- React.Children.map(children, (child) => {
140
- if (React.isValidElement(child)) {
139
+ Children.map(children, (child) => {
140
+ if (isValidElement(child)) {
141
141
  return child.props.value
142
142
  }
143
143
  return null
package/src/SimpleSelect/props.ts CHANGED
@@ -22,7 +22,7 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React, { InputHTMLAttributes } from 'react'
25
+ import { InputHTMLAttributes } from 'react'
26
26
  import PropTypes from 'prop-types'
27
27
 
28
28
  import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'