@instructure/ui-simple-select 10.11.1-snapshot-17 → 10.12.0

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.11.1-snapshot-17](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.11.1-snapshot-17) (2025-02-21)
+# [10.12.0](https://github.com/instructure/instructure-ui/compare/v10.11.0...v10.12.0) (2025-02-24)
 
-**Note:** Version bump only for package @instructure/ui-simple-select
+
+### Features
+
+* **ui-select,ui-simple-select:** add support for rendering selected option's before and after content in Select and SimpleSelect input ([87dc52d](https://github.com/instructure/instructure-ui/commit/87dc52dcd2a23acfe50856c05b8ff28c1046f85a))
 
 
 

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

@@ -71,6 +71,7 @@ export default {
       key: "5"
     }, "Item not in a group two")]]
   },
+  excludeProps: ['isOptionContentAppliedToInput'],
   getComponentProps: () => {
     return {
       inputValue: 'Option one',

package/es/SimpleSelect/index.js

@@ -369,7 +369,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       onRequestShowOptions: this.handleShowOptions,
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
-      onRequestSelectOption: this.handleSelectOption
+      onRequestSelectOption: this.handleSelectOption,
+      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 = {
@@ -379,7 +380,8 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  renderEmptyOption: '---'
+  renderEmptyOption: '---',
+  isOptionContentAppliedToInput: false
 }, _SimpleSelect)) || _class) || _class);
 export { SimpleSelect };
 export default SimpleSelect;

package/es/SimpleSelect/props.js

@@ -58,7 +58,8 @@ const propTypes = {
   renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  children: ChildrenPropTypes.oneOf([Group, Option])
+  children: ChildrenPropTypes.oneOf([Group, Option]),
+  isOptionContentAppliedToInput: PropTypes.bool
 };
 const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
 export { propTypes, allowedProps };

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

@@ -77,6 +77,7 @@ var _default = exports.default = {
       key: "5"
     }, "Item not in a group two")]]
   },
+  excludeProps: ['isOptionContentAppliedToInput'],
   getComponentProps: () => {
     return {
       inputValue: 'Option one',

package/lib/SimpleSelect/index.js

@@ -380,7 +380,8 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       onRequestShowOptions: this.handleShowOptions,
       onRequestHideOptions: this.handleHideOptions,
       onRequestHighlightOption: this.handleHighlightOption,
-      onRequestSelectOption: this.handleSelectOption
+      onRequestSelectOption: this.handleSelectOption,
+      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 = {
@@ -390,6 +391,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  renderEmptyOption: '---'
+  renderEmptyOption: '---',
+  isOptionContentAppliedToInput: false
 }, _SimpleSelect)) || _class) || _class);
 var _default = exports.default = SimpleSelect;

package/lib/SimpleSelect/props.js

@@ -65,6 +65,7 @@ const propTypes = exports.propTypes = {
   renderEmptyOption: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  children: _Children.Children.oneOf([_Group.Group, _Option.Option])
+  children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
+  isOptionContentAppliedToInput: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.11.1-snapshot-17",
+  "version": "10.12.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.11.1-snapshot-17",
-    "@instructure/shared-types": "10.11.1-snapshot-17",
-    "@instructure/ui-form-field": "10.11.1-snapshot-17",
-    "@instructure/ui-position": "10.11.1-snapshot-17",
-    "@instructure/ui-prop-types": "10.11.1-snapshot-17",
-    "@instructure/ui-react-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-select": "10.11.1-snapshot-17",
-    "@instructure/ui-testable": "10.11.1-snapshot-17",
+    "@instructure/console": "10.12.0",
+    "@instructure/shared-types": "10.12.0",
+    "@instructure/ui-form-field": "10.12.0",
+    "@instructure/ui-position": "10.12.0",
+    "@instructure/ui-prop-types": "10.12.0",
+    "@instructure/ui-react-utils": "10.12.0",
+    "@instructure/ui-select": "10.12.0",
+    "@instructure/ui-testable": "10.12.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.11.1-snapshot-17",
-    "@instructure/ui-babel-preset": "10.11.1-snapshot-17",
-    "@instructure/ui-color-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-icons": "10.11.1-snapshot-17",
-    "@instructure/ui-test-utils": "10.11.1-snapshot-17",
-    "@instructure/ui-utils": "10.11.1-snapshot-17",
+    "@instructure/ui-axe-check": "10.12.0",
+    "@instructure/ui-babel-preset": "10.12.0",
+    "@instructure/ui-color-utils": "10.12.0",
+    "@instructure/ui-icons": "10.12.0",
+    "@instructure/ui-test-utils": "10.12.0",
+    "@instructure/ui-utils": "10.12.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

@@ -68,6 +68,7 @@ export default {
       ]
     ]
   },
+  excludeProps: ['isOptionContentAppliedToInput'],
   getComponentProps: () => {
     return {
       inputValue: 'Option one',

package/src/SimpleSelect/index.tsx

@@ -80,7 +80,8 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     visibleOptionsCount: 8,
     placement: 'bottom stretch',
     constrain: 'window',
-    renderEmptyOption: '---'
+    renderEmptyOption: '---',
+    isOptionContentAppliedToInput: false
   }
 
   ref: Select | null = null
@@ -479,6 +480,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         onRequestHideOptions={this.handleHideOptions}
         onRequestHighlightOption={this.handleHighlightOption}
         onRequestSelectOption={this.handleSelectOption}
+        isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
         {...passthroughProps(rest)}
       >
         {this.renderChildren()}

package/src/SimpleSelect/props.ts

@@ -218,6 +218,20 @@ type PropsPassedToSelect = {
    * Callback fired when text input loses focus.
    */
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+  /**
+   * Whether or not the content of the selected `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` appear in the input field.
+   *
+   * If the selected `SimpleSelect.Option` has both `renderBeforeLabel` and `renderAfterLabel` content, both will be displayed in the input field.
+   *
+   * `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` content will not be displayed, if `SimpleSelect`'s `inputValue` is an empty value, null or undefined.
+   *
+   * If `true` and the selected `SimpleSelect.Option` has a `renderAfterLabel` value, it will replace the default arrow icon.
+   *
+   * If `true` and `SimpleSelect`'s `renderBeforeInput` or `renderAfterInput` prop is set, it will display the selected `SimpleSelect.Option`'s `renderBeforeLabel` and `renderAfterLabel` instead of `SimpleSelect`'s `renderBeforeInput` or `renderAfterInput` value.
+   *
+   * If the selected `SimpleSelect.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
+   */
+  isOptionContentAppliedToInput?: boolean
 }
 
 type PropKeys = keyof SimpleSelectOwnProps
@@ -279,7 +293,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderEmptyOption: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  children: ChildrenPropTypes.oneOf([Group, Option])
+  children: ChildrenPropTypes.oneOf([Group, Option]),
+  isOptionContentAppliedToInput: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [