@instructure/ui-simple-select 10.20.2-snapshot-8 → 10.20.2-snapshot-10

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.20.2-snapshot-8](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-8) (2025-06-24)
+## [10.20.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-10) (2025-06-24)
 
-**Note:** Version bump only for package @instructure/ui-simple-select
+
+### Features
+
+* **ui-simple-select,ui-select:** add layout prop to Select and SimpleSelect ([94f0a6f](https://github.com/instructure/instructure-ui/commit/94f0a6f99f9e813fe44e6c3111fdb4e5f3708b76))
 
 
 

package/es/SimpleSelect/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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"];
+  _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", "layout"];
 var _dec, _dec2, _class, _SimpleSelect;
 /*
  * The MIT License (MIT)
@@ -388,6 +388,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       onShowOptions = _this$props.onShowOptions,
       onHideOptions = _this$props.onHideOptions,
       children = _this$props.children,
+      layout = _this$props.layout,
       rest = _objectWithoutProperties(_this$props, _excluded3);
     return _jsx(Select, {
       renderLabel: renderLabel,
@@ -420,6 +421,7 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
       isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
+      layout: layout,
       ...passthroughProps(rest),
       children: this.renderChildren()
     });

package/es/SimpleSelect/props.js

@@ -59,7 +59,8 @@ const propTypes = {
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
-  isOptionContentAppliedToInput: PropTypes.bool
+  isOptionContentAppliedToInput: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 };
-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'];
+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', 'layout'];
 export { propTypes, allowedProps };

package/lib/SimpleSelect/index.js

@@ -22,7 +22,7 @@ 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"];
+  _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", "layout"];
 var _dec, _dec2, _class, _SimpleSelect;
 /*
  * The MIT License (MIT)
@@ -399,6 +399,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       onShowOptions = _this$props.onShowOptions,
       onHideOptions = _this$props.onHideOptions,
       children = _this$props.children,
+      layout = _this$props.layout,
       rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
     return (0, _jsxRuntime.jsx)(_Select.Select, {
       renderLabel: renderLabel,
@@ -431,6 +432,7 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       onRequestHighlightOption: this.handleHighlightOption,
       onRequestSelectOption: this.handleSelectOption,
       isOptionContentAppliedToInput: this.props.isOptionContentAppliedToInput,
+      layout: layout,
       ...(0, _passthroughProps.passthroughProps)(rest),
       children: this.renderChildren()
     });

package/lib/SimpleSelect/props.js

@@ -66,6 +66,7 @@ const propTypes = exports.propTypes = {
   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]),
-  isOptionContentAppliedToInput: _propTypes.default.bool
+  isOptionContentAppliedToInput: _propTypes.default.bool,
+  layout: _propTypes.default.oneOf(['stacked', 'inline'])
 };
-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'];
+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', 'layout'];

package/package.json

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

package/src/SimpleSelect/index.tsx

@@ -503,6 +503,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
       onShowOptions,
       onHideOptions,
       children,
+      layout,
       ...rest
     } = this.props
 
@@ -538,6 +539,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         onRequestHighlightOption={this.handleHighlightOption}
         onRequestSelectOption={this.handleSelectOption}
         isOptionContentAppliedToInput={this.props.isOptionContentAppliedToInput}
+        layout={layout}
         {...passthroughProps(rest)}
       >
         {this.renderChildren()}

package/src/SimpleSelect/props.ts

@@ -232,6 +232,14 @@ type PropsPassedToSelect = {
    * If the selected `SimpleSelect.Option`'s `renderAfterLabel` value is empty, default arrow icon will be rendered.
    */
   isOptionContentAppliedToInput?: boolean
+
+  /**
+   * In `stacked` mode the input is below the label.
+   *
+   * In `inline` mode the input is to the right/left (depending on text direction) of the label,
+   * and the layout will look like `stacked` for small screens.
+   */
+  layout?: 'stacked' | 'inline'
 }
 
 type PropKeys = keyof SimpleSelectOwnProps
@@ -248,6 +256,7 @@ type SimpleSelectProps = PickPropsWithExceptions<
   | 'onRequestSelectOption'
   | 'inputValue'
   | 'isShowingOptions'
+  | 'layout'
 > &
   SimpleSelectOwnProps &
   OtherHTMLAttributes<
@@ -294,7 +303,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
-  isOptionContentAppliedToInput: PropTypes.bool
+  isOptionContentAppliedToInput: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -326,7 +336,8 @@ const allowedProps: AllowedPropKeys = [
   'renderEmptyOption',
   'renderBeforeInput',
   'renderAfterInput',
-  'children'
+  'children',
+  'layout'
 ]
 
 export type { SimpleSelectProps, SimpleSelectState }