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

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
+## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
 
 **Note:** Version bump only for package @instructure/ui-simple-select
 

package/es/SimpleSelect/__examples__/SimpleSelect.examples.js

@@ -22,54 +22,54 @@
  * SOFTWARE.
  */
 
+import React from 'react';
 import { SimpleSelect } from '../../SimpleSelect';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 export default {
   sectionProp: 'size',
   maxExamplesPerPage: 50,
   propValues: {
-    children: [[_jsx(SimpleSelect.Option, {
+    children: [[/*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "0",
       value: "0",
-      children: "Option one"
-    }, "0"), _jsx(SimpleSelect.Option, {
+      key: "0"
+    }, "Option one"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "1",
       value: "1",
-      children: "Option two"
-    }, "1"), _jsx(SimpleSelect.Option, {
+      key: "1"
+    }, "Option two"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "2",
       value: "2",
-      children: "Option three"
-    }, "2"), _jsx(SimpleSelect.Option, {
+      key: "2"
+    }, "Option three"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "3",
       value: "3",
-      isDisabled: true,
-      children: "Option four"
-    }, "3")], [_jsx(SimpleSelect.Option, {
+      key: "3",
+      isDisabled: true
+    }, "Option four")], [/*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "0",
       value: "0",
-      children: "Item not in a group"
-    }, "0"), _jsx(SimpleSelect.Group, {
+      key: "0"
+    }, "Item not in a group"), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
       id: "1",
       renderLabel: "Group one",
-      children: _jsx(SimpleSelect.Option, {
-        id: "2",
-        value: "2",
-        children: "Grouped item one"
-      }, "2")
-    }, "1"), _jsx(SimpleSelect.Group, {
+      key: "1"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "2",
+      value: "2",
+      key: "2"
+    }, "Grouped item one")), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
       id: "3",
       renderLabel: "Group two",
-      children: _jsx(SimpleSelect.Option, {
-        id: "4",
-        value: "4",
-        children: "Grouped item two"
-      }, "4")
-    }, "3"), _jsx(SimpleSelect.Option, {
+      key: "3"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "4",
+      value: "4",
+      key: "4"
+    }, "Grouped item two")), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: "5",
       value: "5",
-      children: "Item not in a group two"
-    }, "5")]]
+      key: "5"
+    }, "Item not in a group two")]]
   },
   excludeProps: ['isOptionContentAppliedToInput'],
   getComponentProps: () => {

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

@@ -23,7 +23,7 @@ var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect
  * 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, it } from 'vitest';
 import userEvent from '@testing-library/user-event';
@@ -35,13 +35,12 @@ import { IconCheckSolid } from '@instructure/ui-icons';
 import { runAxeCheck } from '@instructure/ui-axe-check';
 import SimpleSelectExamples from '../__examples__/SimpleSelect.examples';
 import SimpleSelect from '../index';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const defaultOptions = ['foo', 'bar', 'baz'];
-const getOptions = disabled => defaultOptions.map(opt => _jsx(SimpleSelect.Option, {
+const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
   id: opt,
+  key: opt,
   value: opt,
-  isDisabled: opt === disabled,
-  children: opt
+  isDisabled: opt === disabled
 }, opt));
 describe('<SimpleSelect />', () => {
   let consoleErrorMock;
@@ -53,10 +52,9 @@ describe('<SimpleSelect />', () => {
     consoleErrorMock.mockRestore();
   });
   it('should render an input and a list', async () => {
-    render(_jsx(SimpleSelect, {
-      renderLabel: "Choose an option",
-      children: getOptions()
-    }));
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, getOptions()));
     const input = screen.getByLabelText('Choose an option');
     const listInitial = screen.queryByRole('listbox');
     expect(listInitial).not.toBeInTheDocument();
@@ -68,32 +66,25 @@ describe('<SimpleSelect />', () => {
     });
   });
   it('should render groups', async () => {
-    render(_SimpleSelect || (_SimpleSelect = _jsxs(SimpleSelect, {
-      renderLabel: "Choose an option",
-      children: [_jsx(SimpleSelect.Option, {
-        id: "0",
-        value: "0",
-        children: "ungrouped option one"
-      }), _jsx(SimpleSelect.Group, {
-        renderLabel: "Group one",
-        children: _jsx(SimpleSelect.Option, {
-          id: "1",
-          value: "1",
-          children: "grouped option one"
-        })
-      }), _jsx(SimpleSelect.Group, {
-        renderLabel: "Group two",
-        children: _jsx(SimpleSelect.Option, {
-          id: "2",
-          value: "2",
-          children: "grouped option two"
-        })
-      }), _jsx(SimpleSelect.Option, {
-        id: "3",
-        value: "3",
-        children: "ungrouped option two"
-      })]
-    })));
+    render(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "0",
+      value: "0"
+    }, "ungrouped option one"), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "1",
+      value: "1"
+    }, "grouped option one")), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "2",
+      value: "2"
+    }, "grouped option two")), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "3",
+      value: "3"
+    }, "ungrouped option two"))));
     const input = screen.getByLabelText('Choose an option');
     await userEvent.click(input);
     await waitFor(() => {
@@ -106,16 +97,12 @@ describe('<SimpleSelect />', () => {
     });
   });
   it('should ignore invalid children', async () => {
-    render(_SimpleSelect2 || (_SimpleSelect2 = _jsxs(SimpleSelect, {
-      renderLabel: "Choose an option",
-      children: [_jsx(SimpleSelect.Option, {
-        id: "0",
-        value: 0,
-        children: "valid"
-      }), _jsx("div", {
-        children: "invalid"
-      })]
-    })));
+    render(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "0",
+      value: 0
+    }, "valid"), /*#__PURE__*/React.createElement("div", null, "invalid"))));
     const input = screen.getByLabelText('Choose an option');
     await userEvent.click(input);
     await waitFor(() => {
@@ -126,11 +113,10 @@ describe('<SimpleSelect />', () => {
   });
   it('should fire onFocus when input gains focus', async () => {
     const onFocus = vi.fn();
-    render(_jsx(SimpleSelect, {
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
       renderLabel: "Choose an option",
-      onFocus: onFocus,
-      children: getOptions()
-    }));
+      onFocus: onFocus
+    }, getOptions()));
     const input = screen.getByLabelText('Choose an option');
     input.focus();
     await waitFor(() => {
@@ -139,7 +125,7 @@ describe('<SimpleSelect />', () => {
   });
   describe('input', () => {
     it('should render with a custom id if given', async () => {
-      render(_SimpleSelect3 || (_SimpleSelect3 = _jsx(SimpleSelect, {
+      render(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
         id: "customSelect"
       })));
@@ -147,7 +133,7 @@ describe('<SimpleSelect />', () => {
       expect(input).toHaveAttribute('id', 'customSelect');
     });
     it('should always render readonly', async () => {
-      render(_SimpleSelect4 || (_SimpleSelect4 = _jsx(SimpleSelect, {
+      render(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
         interaction: "enabled"
       })));
@@ -156,7 +142,7 @@ describe('<SimpleSelect />', () => {
       expect(input).not.toHaveAttribute('disabled');
     });
     it('should render disabled when interaction="disabled"', async () => {
-      render(_SimpleSelect5 || (_SimpleSelect5 = _jsx(SimpleSelect, {
+      render(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
         interaction: "disabled"
       })));
@@ -165,7 +151,7 @@ describe('<SimpleSelect />', () => {
       expect(input).not.toHaveAttribute('readonly');
     });
     it('should render required when isRequired={true}', async () => {
-      render(_SimpleSelect6 || (_SimpleSelect6 = _jsx(SimpleSelect, {
+      render(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
         isRequired: true
       })));
@@ -173,55 +159,49 @@ describe('<SimpleSelect />', () => {
       expect(input).toHaveAttribute('required');
     });
     it('should allow assistive text', async () => {
-      render(_jsx(SimpleSelect, {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
-        assistiveText: "hello world",
-        children: getOptions()
-      }));
+        assistiveText: "hello world"
+      }, getOptions()));
       const input = screen.getByLabelText('Choose an option');
       const assistiveText = screen.getByText('hello world');
       const assistiveTextID = assistiveText.getAttribute('id');
       expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
     });
     it('should allow custom props to pass through', async () => {
-      render(_jsx(SimpleSelect, {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
-        "data-custom-attr": "true",
-        children: getOptions()
-      }));
+        "data-custom-attr": "true"
+      }, getOptions()));
       const input = screen.getByLabelText('Choose an option');
       expect(input).toHaveAttribute('data-custom-attr', 'true');
     });
     it('should provide a ref to the input element', async () => {
       const inputRef = vi.fn();
-      render(_jsx(SimpleSelect, {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
-        inputRef: inputRef,
-        children: getOptions()
-      }));
+        inputRef: inputRef
+      }, getOptions()));
       const input = screen.getByLabelText('Choose an option');
       expect(inputRef).toHaveBeenCalledWith(input);
     });
   });
   it('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
-    const renderBeforeLabel = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = _jsx(IconCheckSolid, {
+    const renderBeforeLabel = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/React.createElement(IconCheckSolid, {
       "data-testid": "option-icon"
     })));
-    render(_jsxs(SimpleSelect, {
-      renderLabel: "Choose an option",
-      children: [_jsx(SimpleSelect.Option, {
-        id: "option-1",
-        value: "1",
-        isDisabled: true,
-        renderBeforeLabel: renderBeforeLabel,
-        children: "option one"
-      }), _jsx(SimpleSelect.Option, {
-        id: "option-2",
-        value: "2",
-        renderBeforeLabel: renderBeforeLabel,
-        children: "option two"
-      })]
-    }));
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "option-1",
+      value: "1",
+      isDisabled: true,
+      renderBeforeLabel: renderBeforeLabel
+    }, "option one"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "option-2",
+      value: "2",
+      renderBeforeLabel: renderBeforeLabel
+    }, "option two")));
     const input = screen.getByLabelText('Choose an option');
     await userEvent.click(input);
     await waitFor(() => {
@@ -252,10 +232,9 @@ describe('<SimpleSelect />', () => {
   });
   describe('list', () => {
     it('should set aria-disabled on options when isDisabled={true}', async () => {
-      render(_jsx(SimpleSelect, {
-        renderLabel: "Choose an option",
-        children: getOptions(defaultOptions[2])
-      }));
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(defaultOptions[2])));
       const input = screen.getByLabelText('Choose an option');
       await userEvent.click(input);
       await waitFor(() => {
@@ -266,11 +245,10 @@ describe('<SimpleSelect />', () => {
     });
     it('should provide a ref to the list element', async () => {
       const listRef = vi.fn();
-      render(_jsx(SimpleSelect, {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option",
-        listRef: listRef,
-        children: getOptions()
-      }));
+        listRef: listRef
+      }, getOptions()));
       const input = screen.getByLabelText('Choose an option');
       await userEvent.click(input);
       await waitFor(() => {
@@ -293,16 +271,15 @@ describe('<SimpleSelect />', () => {
   describe('children', () => {
     const initialOptions = ['foo', 'bar'];
     const updatedOptions = ['bar', 'baz'];
-    const getOptions = options => options.map(opt => _jsx(SimpleSelect.Option, {
+    const getOptions = options => options.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
       id: opt,
-      value: opt,
-      children: opt
+      key: opt,
+      value: opt
     }, opt));
     const renderSimpleSelect = options => {
-      return render(_jsx(SimpleSelect, {
-        renderLabel: "Choose an option",
-        children: getOptions(options)
-      }));
+      return render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(options)));
     };
     it('should clear selection if selected option does not exist in updated options', () => {
       const _renderSimpleSelect = renderSimpleSelect(initialOptions),
@@ -316,10 +293,9 @@ describe('<SimpleSelect />', () => {
       });
       fireEvent.click(fooOption);
       expect(input).toHaveValue('foo');
-      rerender(_jsx(SimpleSelect, {
-        renderLabel: "Choose an option",
-        children: getOptions(updatedOptions)
-      }));
+      rerender(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
       expect(input).toHaveValue('');
     });
     it('should persist selected option if it exists in updated options', () => {
@@ -334,10 +310,9 @@ describe('<SimpleSelect />', () => {
       });
       fireEvent.click(barOption);
       expect(input).toHaveValue('bar');
-      rerender(_jsx(SimpleSelect, {
-        renderLabel: "Choose an option",
-        children: getOptions(updatedOptions)
-      }));
+      rerender(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option"
+      }, getOptions(updatedOptions)));
       expect(input).toHaveValue('bar');
     });
   });

package/es/SimpleSelect/index.js

@@ -27,14 +27,13 @@ var _dec, _dec2, _class, _SimpleSelect;
  * SOFTWARE.
  */
 
-import { isValidElement, Component, Children } from 'react';
+import React, { Component, Children } from 'react';
 import { testable } from '@instructure/ui-testable';
 import { matchComponentTypes, passthroughProps, callRenderProp, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
 import { Select } from '@instructure/ui-select';
 import { Option } from './Option';
 import { Group } from './Group';
 import { allowedProps, propTypes } from './props';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
 category: components
@@ -178,8 +177,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
     });
   }
   hasOptionsChanged(prevChildren, currentChildren) {
-    const getValues = children => Children.map(children, child => {
-      if (/*#__PURE__*/isValidElement(child)) {
+    const getValues = children => React.Children.map(children, child => {
+      if (/*#__PURE__*/React.isValidElement(child)) {
         return child.props.value;
       }
       return null;
@@ -261,12 +260,11 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
     return children;
   }
   renderEmptyOption() {
-    return _jsx(Select.Option, {
+    return /*#__PURE__*/React.createElement(Select.Option, {
       id: this._emptyOptionId,
       isHighlighted: false,
-      isSelected: false,
-      children: callRenderProp(this.props.renderEmptyOption)
-    });
+      isSelected: false
+    }, callRenderProp(this.props.renderEmptyOption));
   }
   renderOption(option) {
     const _option$props = option.props,
@@ -289,17 +287,16 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
         children
       }) : renderLabel;
     };
-    return _jsx(Select.Option, {
+    return /*#__PURE__*/React.createElement(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),
-      ...passthroughProps(rest),
-      children: children
-    }, option.key || id);
+      renderAfterLabel: getRenderLabel(renderAfterLabel)
+    }, passthroughProps(rest)), children);
   }
   renderGroup(group) {
     const _group$props = group.props,
@@ -307,11 +304,10 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       renderLabel = _group$props.renderLabel,
       children = _group$props.children,
       rest = _objectWithoutProperties(_group$props, _excluded2);
-    return _jsx(Select.Group, {
+    return /*#__PURE__*/React.createElement(Select.Group, Object.assign({
       renderLabel: renderLabel,
-      ...passthroughProps(rest),
-      children: Children.map(children, child => this.renderOption(child))
-    }, group.key || id);
+      key: group.key || id
+    }, passthroughProps(rest)), Children.map(children, child => this.renderOption(child)));
   }
   render() {
     const _this$props = this.props,
@@ -344,7 +340,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       onHideOptions = _this$props.onHideOptions,
       children = _this$props.children,
       rest = _objectWithoutProperties(_this$props, _excluded3);
-    return _jsx(Select, {
+    return /*#__PURE__*/React.createElement(Select, Object.assign({
       renderLabel: renderLabel,
       inputValue: this.state.inputValue,
       isShowingOptions: this.state.isShowingOptions,
@@ -374,10 +370,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
-      isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
-      ...passthroughProps(rest),
-      children: this.renderChildren()
-    });
+      isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput
+    }, passthroughProps(rest)), this.renderChildren());
   }
 }, _SimpleSelect.displayName = "SimpleSelect", _SimpleSelect.componentId = 'SimpleSelect', _SimpleSelect.Option = Option, _SimpleSelect.Group = Group, _SimpleSelect.allowedProps = allowedProps, _SimpleSelect.propTypes = propTypes, _SimpleSelect.defaultProps = {
   size: 'medium',

package/lib/SimpleSelect/__examples__/SimpleSelect.examples.js

@@ -1,11 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _SimpleSelect = require("../../SimpleSelect");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
  *
@@ -33,48 +34,48 @@ var _default = exports.default = {
   sectionProp: 'size',
   maxExamplesPerPage: 50,
   propValues: {
-    children: [[(0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+    children: [[/*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "0",
       value: "0",
-      children: "Option one"
-    }, "0"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: "0"
+    }, "Option one"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "1",
       value: "1",
-      children: "Option two"
-    }, "1"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: "1"
+    }, "Option two"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "2",
       value: "2",
-      children: "Option three"
-    }, "2"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: "2"
+    }, "Option three"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "3",
       value: "3",
-      isDisabled: true,
-      children: "Option four"
-    }, "3")], [(0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: "3",
+      isDisabled: true
+    }, "Option four")], [/*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "0",
       value: "0",
-      children: "Item not in a group"
-    }, "0"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Group, {
+      key: "0"
+    }, "Item not in a group"), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Group, {
       id: "1",
       renderLabel: "Group one",
-      children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
-        id: "2",
-        value: "2",
-        children: "Grouped item one"
-      }, "2")
-    }, "1"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Group, {
+      key: "1"
+    }, /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
+      id: "2",
+      value: "2",
+      key: "2"
+    }, "Grouped item one")), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Group, {
       id: "3",
       renderLabel: "Group two",
-      children: (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
-        id: "4",
-        value: "4",
-        children: "Grouped item two"
-      }, "4")
-    }, "3"), (0, _jsxRuntime.jsx)(_SimpleSelect.SimpleSelect.Option, {
+      key: "3"
+    }, /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
+      id: "4",
+      value: "4",
+      key: "4"
+    }, "Grouped item two")), /*#__PURE__*/_react.default.createElement(_SimpleSelect.SimpleSelect.Option, {
       id: "5",
       value: "5",
-      children: "Item not in a group two"
-    }, "5")]]
+      key: "5"
+    }, "Item not in a group two")]]
   },
   excludeProps: ['isOptionContentAppliedToInput'],
   getComponentProps: () => {