@instructure/ui-simple-select 10.16.1-pr-snapshot-1744893671793 → 10.16.1-snapshot-0

package/lib/SimpleSelect/__new-tests__/SimpleSelect.test.js

@@ -2,7 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("@testing-library/react");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
@@ -11,7 +12,6 @@ var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _SimpleSelect7 = _interopRequireDefault(require("../__examples__/SimpleSelect.examples"));
 var _index = _interopRequireDefault(require("../index"));
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect5, _SimpleSelect6, _IconCheckSolid;
 /*
  * The MIT License (MIT)
@@ -38,11 +38,11 @@ var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect
  */
 // eslint-disable-next-line no-restricted-imports
 const defaultOptions = ['foo', 'bar', 'baz'];
-const getOptions = disabled => defaultOptions.map(opt => (0, _jsxRuntime.jsx)(_index.default.Option, {
+const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
   id: opt,
+  key: opt,
   value: opt,
-  isDisabled: opt === disabled,
-  children: opt
+  isDisabled: opt === disabled
 }, opt));
 describe('<SimpleSelect />', () => {
   let consoleErrorMock;
@@ -54,52 +54,44 @@ describe('<SimpleSelect />', () => {
     consoleErrorMock.mockRestore();
   });
   (0, _vitest.it)('should render an input and a list', async () => {
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
-      renderLabel: "Choose an option",
-      children: getOptions()
-    }));
-    const input = _react.screen.getByLabelText('Choose an option');
-    const listInitial = _react.screen.queryByRole('listbox');
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, getOptions()));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    const listInitial = _react2.screen.queryByRole('listbox');
     expect(listInitial).not.toBeInTheDocument();
     expect(input).toBeInTheDocument();
     await _userEvent.default.click(input);
-    await (0, _react.waitFor)(() => {
-      const list = _react.screen.queryByRole('listbox');
+    await (0, _react2.waitFor)(() => {
+      const list = _react2.screen.queryByRole('listbox');
       expect(list).toBeInTheDocument();
     });
   });
   (0, _vitest.it)('should render groups', async () => {
-    (0, _react.render)(_SimpleSelect || (_SimpleSelect = (0, _jsxRuntime.jsxs)(_index.default, {
-      renderLabel: "Choose an option",
-      children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
-        id: "0",
-        value: "0",
-        children: "ungrouped option one"
-      }), (0, _jsxRuntime.jsx)(_index.default.Group, {
-        renderLabel: "Group one",
-        children: (0, _jsxRuntime.jsx)(_index.default.Option, {
-          id: "1",
-          value: "1",
-          children: "grouped option one"
-        })
-      }), (0, _jsxRuntime.jsx)(_index.default.Group, {
-        renderLabel: "Group two",
-        children: (0, _jsxRuntime.jsx)(_index.default.Option, {
-          id: "2",
-          value: "2",
-          children: "grouped option two"
-        })
-      }), (0, _jsxRuntime.jsx)(_index.default.Option, {
-        id: "3",
-        value: "3",
-        children: "ungrouped option two"
-      })]
-    })));
-    const input = _react.screen.getByLabelText('Choose an option');
+    (0, _react2.render)(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0",
+      value: "0"
+    }, "ungrouped option one"), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "1",
+      value: "1"
+    }, "grouped option one")), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "2",
+      value: "2"
+    }, "grouped option two")), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "3",
+      value: "3"
+    }, "ungrouped option two"))));
+    const input = _react2.screen.getByLabelText('Choose an option');
     await _userEvent.default.click(input);
-    await (0, _react.waitFor)(() => {
-      const groups = _react.screen.getAllByRole('group');
-      const labelOne = _react.screen.getByText('Group one');
+    await (0, _react2.waitFor)(() => {
+      const groups = _react2.screen.getAllByRole('group');
+      const labelOne = _react2.screen.getByText('Group one');
       const labelOneID = labelOne.getAttribute('id');
       expect(groups.length).toBe(2);
       expect(groups[0]).toHaveAttribute('aria-labelledby', labelOneID);
@@ -107,126 +99,115 @@ describe('<SimpleSelect />', () => {
     });
   });
   (0, _vitest.it)('should ignore invalid children', async () => {
-    (0, _react.render)(_SimpleSelect2 || (_SimpleSelect2 = (0, _jsxRuntime.jsxs)(_index.default, {
-      renderLabel: "Choose an option",
-      children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
-        id: "0",
-        value: 0,
-        children: "valid"
-      }), (0, _jsxRuntime.jsx)("div", {
-        children: "invalid"
-      })]
-    })));
-    const input = _react.screen.getByLabelText('Choose an option');
+    (0, _react2.render)(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0",
+      value: 0
+    }, "valid"), /*#__PURE__*/_react.default.createElement("div", null, "invalid"))));
+    const input = _react2.screen.getByLabelText('Choose an option');
     await _userEvent.default.click(input);
-    await (0, _react.waitFor)(() => {
-      const invalidChild = _react.screen.queryByText('invalid');
+    await (0, _react2.waitFor)(() => {
+      const invalidChild = _react2.screen.queryByText('invalid');
       expect(invalidChild).not.toBeInTheDocument();
       expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining('Expected one of Group, Option'), expect.any(String));
     });
   });
   (0, _vitest.it)('should fire onFocus when input gains focus', async () => {
     const onFocus = _vitest.vi.fn();
-    (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
       renderLabel: "Choose an option",
-      onFocus: onFocus,
-      children: getOptions()
-    }));
-    const input = _react.screen.getByLabelText('Choose an option');
+      onFocus: onFocus
+    }, getOptions()));
+    const input = _react2.screen.getByLabelText('Choose an option');
     input.focus();
-    await (0, _react.waitFor)(() => {
+    await (0, _react2.waitFor)(() => {
       expect(onFocus).toHaveBeenCalled();
     });
   });
   describe('input', () => {
     (0, _vitest.it)('should render with a custom id if given', async () => {
-      (0, _react.render)(_SimpleSelect3 || (_SimpleSelect3 = (0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         id: "customSelect"
       })));
-      const input = _react.screen.getByLabelText('Choose an option');
+      const input = _react2.screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('id', 'customSelect');
     });
     (0, _vitest.it)('should always render readonly', async () => {
-      (0, _react.render)(_SimpleSelect4 || (_SimpleSelect4 = (0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         interaction: "enabled"
       })));
-      const input = _react.screen.getByLabelText('Choose an option');
+      const input = _react2.screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('readonly');
       expect(input).not.toHaveAttribute('disabled');
     });
     (0, _vitest.it)('should render disabled when interaction="disabled"', async () => {
-      (0, _react.render)(_SimpleSelect5 || (_SimpleSelect5 = (0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         interaction: "disabled"
       })));
-      const input = _react.screen.getByLabelText('Choose an option');
+      const input = _react2.screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('disabled');
       expect(input).not.toHaveAttribute('readonly');
     });
     (0, _vitest.it)('should render required when isRequired={true}', async () => {
-      (0, _react.render)(_SimpleSelect6 || (_SimpleSelect6 = (0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         isRequired: true
       })));
-      const input = _react.screen.getByLabelText('Choose an option *');
+      const input = _react2.screen.getByLabelText('Choose an option *');
       expect(input).toHaveAttribute('required');
     });
     (0, _vitest.it)('should allow assistive text', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
-        assistiveText: "hello world",
-        children: getOptions()
-      }));
-      const input = _react.screen.getByLabelText('Choose an option');
-      const assistiveText = _react.screen.getByText('hello world');
+        assistiveText: "hello world"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      const assistiveText = _react2.screen.getByText('hello world');
       const assistiveTextID = assistiveText.getAttribute('id');
       expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
     });
     (0, _vitest.it)('should allow custom props to pass through', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
-        "data-custom-attr": "true",
-        children: getOptions()
-      }));
-      const input = _react.screen.getByLabelText('Choose an option');
+        "data-custom-attr": "true"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('data-custom-attr', 'true');
     });
     (0, _vitest.it)('should provide a ref to the input element', async () => {
       const inputRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
-        inputRef: inputRef,
-        children: getOptions()
-      }));
-      const input = _react.screen.getByLabelText('Choose an option');
+        inputRef: inputRef
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
       expect(inputRef).toHaveBeenCalledWith(input);
     });
   });
   (0, _vitest.it)('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
-    const renderBeforeLabel = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = (0, _jsxRuntime.jsx)(_IconCheckSolid2.IconCheckSolid, {
+    const renderBeforeLabel = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/_react.default.createElement(_IconCheckSolid2.IconCheckSolid, {
       "data-testid": "option-icon"
     })));
-    (0, _react.render)((0, _jsxRuntime.jsxs)(_index.default, {
-      renderLabel: "Choose an option",
-      children: [(0, _jsxRuntime.jsx)(_index.default.Option, {
-        id: "option-1",
-        value: "1",
-        isDisabled: true,
-        renderBeforeLabel: renderBeforeLabel,
-        children: "option one"
-      }), (0, _jsxRuntime.jsx)(_index.default.Option, {
-        id: "option-2",
-        value: "2",
-        renderBeforeLabel: renderBeforeLabel,
-        children: "option two"
-      })]
-    }));
-    const input = _react.screen.getByLabelText('Choose an option');
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "option-1",
+      value: "1",
+      isDisabled: true,
+      renderBeforeLabel: renderBeforeLabel
+    }, "option one"), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "option-2",
+      value: "2",
+      renderBeforeLabel: renderBeforeLabel
+    }, "option two")));
+    const input = _react2.screen.getByLabelText('Choose an option');
     await _userEvent.default.click(input);
-    await (0, _react.waitFor)(() => {
-      const optionIcons = _react.screen.getAllByTestId('option-icon');
+    await (0, _react2.waitFor)(() => {
+      const optionIcons = _react2.screen.getAllByTestId('option-icon');
       expect(optionIcons.length).toBe(2);
       expect(renderBeforeLabel).toHaveBeenCalledTimes(2);
       const _ref = renderBeforeLabel.mock.calls,
@@ -253,29 +234,27 @@ describe('<SimpleSelect />', () => {
   });
   describe('list', () => {
     (0, _vitest.it)('should set aria-disabled on options when isDisabled={true}', async () => {
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
-        renderLabel: "Choose an option",
-        children: getOptions(defaultOptions[2])
-      }));
-      const input = _react.screen.getByLabelText('Choose an option');
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(defaultOptions[2])));
+      const input = _react2.screen.getByLabelText('Choose an option');
       await _userEvent.default.click(input);
-      await (0, _react.waitFor)(() => {
-        const options = _react.screen.getAllByRole('option');
+      await (0, _react2.waitFor)(() => {
+        const options = _react2.screen.getAllByRole('option');
         expect(options[0]).not.toHaveAttribute('aria-disabled');
         expect(options[2]).toHaveAttribute('aria-disabled', 'true');
       });
     });
     (0, _vitest.it)('should provide a ref to the list element', async () => {
       const listRef = _vitest.vi.fn();
-      (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
-        listRef: listRef,
-        children: getOptions()
-      }));
-      const input = _react.screen.getByLabelText('Choose an option');
+        listRef: listRef
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
       await _userEvent.default.click(input);
-      await (0, _react.waitFor)(() => {
-        const listbox = _react.screen.getByRole('listbox');
+      await (0, _react2.waitFor)(() => {
+        const listbox = _react2.screen.getByRole('listbox');
         expect(listRef).toHaveBeenCalledWith(listbox);
       });
     });
@@ -285,7 +264,7 @@ describe('<SimpleSelect />', () => {
     _vitest.it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
-      const _render = (0, _react.render)(content),
+      const _render = (0, _react2.render)(content),
         container = _render.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
@@ -294,51 +273,48 @@ describe('<SimpleSelect />', () => {
   describe('children', () => {
     const initialOptions = ['foo', 'bar'];
     const updatedOptions = ['bar', 'baz'];
-    const getOptions = options => options.map(opt => (0, _jsxRuntime.jsx)(_index.default.Option, {
+    const getOptions = options => options.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
       id: opt,
-      value: opt,
-      children: opt
+      key: opt,
+      value: opt
     }, opt));
     const renderSimpleSelect = options => {
-      return (0, _react.render)((0, _jsxRuntime.jsx)(_index.default, {
-        renderLabel: "Choose an option",
-        children: getOptions(options)
-      }));
+      return (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(options)));
     };
     (0, _vitest.it)('should clear selection if selected option does not exist in updated options', () => {
       const _renderSimpleSelect = renderSimpleSelect(initialOptions),
         rerender = _renderSimpleSelect.rerender;
-      const input = _react.screen.getByRole('combobox', {
+      const input = _react2.screen.getByRole('combobox', {
         name: 'Choose an option'
       });
-      _react.fireEvent.click(input);
-      const fooOption = _react.screen.getByRole('option', {
+      _react2.fireEvent.click(input);
+      const fooOption = _react2.screen.getByRole('option', {
         name: 'foo'
       });
-      _react.fireEvent.click(fooOption);
+      _react2.fireEvent.click(fooOption);
       expect(input).toHaveValue('foo');
-      rerender((0, _jsxRuntime.jsx)(_index.default, {
-        renderLabel: "Choose an option",
-        children: getOptions(updatedOptions)
-      }));
+      rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
       expect(input).toHaveValue('');
     });
     (0, _vitest.it)('should persist selected option if it exists in updated options', () => {
       const _renderSimpleSelect2 = renderSimpleSelect(initialOptions),
         rerender = _renderSimpleSelect2.rerender;
-      const input = _react.screen.getByRole('combobox', {
+      const input = _react2.screen.getByRole('combobox', {
         name: 'Choose an option'
       });
-      _react.fireEvent.click(input);
-      const barOption = _react.screen.getByRole('option', {
+      _react2.fireEvent.click(input);
+      const barOption = _react2.screen.getByRole('option', {
         name: 'bar'
       });
-      _react.fireEvent.click(barOption);
+      _react2.fireEvent.click(barOption);
       expect(input).toHaveValue('bar');
-      rerender((0, _jsxRuntime.jsx)(_index.default, {
-        renderLabel: "Choose an option",
-        children: getOptions(updatedOptions)
-      }));
+      rerender(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
       expect(input).toHaveValue('bar');
     });
   });

package/lib/SimpleSelect/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SimpleSelect = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -17,7 +18,6 @@ var _Select = require("@instructure/ui-select/lib/Select");
 var _Option = require("./Option");
 var _Group = require("./Group");
 var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
   _excluded2 = ["id", "renderLabel", "children"],
   _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
     });
   }
   hasOptionsChanged(prevChildren, currentChildren) {
-    const getValues = children => _react.Children.map(children, child => {
-      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
+    const getValues = children => _react.default.Children.map(children, child => {
+      if (/*#__PURE__*/_react.default.isValidElement(child)) {
         return child.props.value;
       }
       return null;
@@ -271,12 +271,11 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
     return children;
   }
   renderEmptyOption() {
-    return (0, _jsxRuntime.jsx)(_Select.Select.Option, {
+    return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, {
       id: this._emptyOptionId,
       isHighlighted: false,
-      isSelected: false,
-      children: (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption)
-    });
+      isSelected: false
+    }, (0, _callRenderProp.callRenderProp)(this.props.renderEmptyOption));
   }
   renderOption(option) {
     const _option$props = option.props,
@@ -299,17 +298,16 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
         children
       }) : renderLabel;
     };
-    return (0, _jsxRuntime.jsx)(_Select.Select.Option, {
+    return /*#__PURE__*/_react.default.createElement(_Select.Select.Option, Object.assign({
       id: id,
       value: value,
+      key: option.key || id,
       isHighlighted: id === this.state.highlightedOptionId,
       isSelected: id === this.state.selectedOptionId,
       isDisabled: option.props.isDisabled,
       renderBeforeLabel: getRenderLabel(renderBeforeLabel),
-      renderAfterLabel: getRenderLabel(renderAfterLabel),
-      ...(0, _passthroughProps.passthroughProps)(rest),
-      children: children
-    }, option.key || id);
+      renderAfterLabel: getRenderLabel(renderAfterLabel)
+    }, (0, _passthroughProps.passthroughProps)(rest)), children);
   }
   renderGroup(group) {
     const _group$props = group.props,
@@ -317,11 +315,10 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       renderLabel = _group$props.renderLabel,
       children = _group$props.children,
       rest = (0, _objectWithoutProperties2.default)(_group$props, _excluded2);
-    return (0, _jsxRuntime.jsx)(_Select.Select.Group, {
+    return /*#__PURE__*/_react.default.createElement(_Select.Select.Group, Object.assign({
       renderLabel: renderLabel,
-      ...(0, _passthroughProps.passthroughProps)(rest),
-      children: _react.Children.map(children, child => this.renderOption(child))
-    }, group.key || id);
+      key: group.key || id
+    }, (0, _passthroughProps.passthroughProps)(rest)), _react.Children.map(children, child => this.renderOption(child)));
   }
   render() {
     const _this$props = this.props,
@@ -354,7 +351,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       onHideOptions = _this$props.onHideOptions,
       children = _this$props.children,
       rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
-    return (0, _jsxRuntime.jsx)(_Select.Select, {
+    return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: this.state.inputValue,
       isShowingOptions: this.state.isShowingOptions,
@@ -384,10 +381,8 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
-      isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
-      ...(0, _passthroughProps.passthroughProps)(rest),
-      children: this.renderChildren()
-    });
+      isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
+    }, (0, _passthroughProps.passthroughProps)(rest)), this.renderChildren());
   }
 }, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = _Option.Option, _SimpleSelect.Group = _Group.Group, _SimpleSelect.allowedProps = _props.allowedProps, _SimpleSelect.propTypes = _props.propTypes, _SimpleSelect.defaultProps = {
   size: 'medium',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.16.1-pr-snapshot-1744893671793",
+  "version": "10.16.1-snapshot-0",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/shared-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-form-field": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-position": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-prop-types": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-react-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-select": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-testable": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/console": "10.16.1-snapshot-0",
+    "@instructure/shared-types": "10.16.1-snapshot-0",
+    "@instructure/ui-form-field": "10.16.1-snapshot-0",
+    "@instructure/ui-position": "10.16.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-select": "10.16.1-snapshot-0",
+    "@instructure/ui-testable": "10.16.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-babel-preset": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-color-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-icons": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-test-utils": "10.16.1-pr-snapshot-1744893671793",
-    "@instructure/ui-utils": "10.16.1-pr-snapshot-1744893671793",
+    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-icons": "10.16.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-utils": "10.16.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/SimpleSelect/__examples__/SimpleSelect.examples.tsx

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import React from 'react'
+
 import { SimpleSelect } from '../../SimpleSelect'
 
 import type { StoryConfig } from '@instructure/ui-test-utils'

package/src/SimpleSelect/__new-tests__/SimpleSelect.test.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import React from 'react'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi, MockInstance, it } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/SimpleSelect/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { isValidElement, ComponentElement, Component, Children } from 'react'
+import React, { Component, Children } from 'react'
 
 import { testable } from '@instructure/ui-testable'
 import {
@@ -48,8 +48,8 @@ import type { SimpleSelectGroupProps } from './Group/props'
 import type { SimpleSelectProps } from './props'
 import { allowedProps, propTypes, SimpleSelectState } from './props'
 
-type OptionChild = ComponentElement<SimpleSelectOptionProps, Option>
-type GroupChild = ComponentElement<SimpleSelectGroupProps, Group>
+type OptionChild = React.ComponentElement<SimpleSelectOptionProps, Option>
+type GroupChild = React.ComponentElement<SimpleSelectGroupProps, Group>
 
 type GetOption = <F extends keyof SimpleSelectOptionProps>(
   field: F,
@@ -136,8 +136,8 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     currentChildren: SimpleSelectProps['children']
   ) {
     const getValues = (children: SimpleSelectProps['children']) =>
-      Children.map(children, (child) => {
-        if (isValidElement(child)) {
+      React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
           return child.props.value
         }
         return null

package/src/SimpleSelect/props.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { InputHTMLAttributes } from 'react'
+import React, { InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import { Children as ChildrenPropTypes } from '@instructure/ui-prop-types'