@instructure/ui-select 10.20.2-snapshot-7 → 10.20.2-snapshot-10

package/CHANGELOG.md

@@ -3,9 +3,17 @@
 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-7](https://github.com/instructure/instructure-ui/compare/v10.20.1...v10.20.2-snapshot-7) (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-select
+
+### Bug Fixes
+
+* **ui-select:** prevent scrolling when last item is hovered in Chrome ([51cd81a](https://github.com/instructure/instructure-ui/commit/51cd81a5360bbbc78d30e7e2489bb0c02b67a470))
+
+
+### Features
+
+* **ui-simple-select,ui-select:** add layout prop to Select and SimpleSelect ([94f0a6f](https://github.com/instructure/instructure-ui/commit/94f0a6f99f9e813fe44e6c3111fdb4e5f3708b76))
 
 
 

package/es/Select/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["id", "renderLabel", "children"],
-  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
+  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions", "layout"],
   _excluded3 = ["ref"];
 var _dec, _dec2, _dec3, _class, _Select, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 /*
@@ -79,6 +79,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Select = class Select extends Component {
   constructor(...args) {
     super(...args);
+    this.SCROLL_TOLERANCE = 0.5;
     this.state = {
       hasInputRef: false
     };
@@ -391,7 +392,9 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     const viewProps = isShowingOptions ? {
       display: 'block',
       overflowY: 'auto',
-      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
+      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
+      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
       maxWidth: optionsMaxWidth || this.width,
       background: 'primary',
       elementRef: node => this._listView = node,
@@ -525,6 +528,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       onBlur = _this$props0.onBlur,
       onInputChange = _this$props0.onInputChange,
       onRequestHideOptions = _this$props0.onRequestHideOptions,
+      layout = _this$props0.layout,
       rest = _objectWithoutProperties(_this$props0, _excluded2);
     const interaction = this.interaction;
     const passthroughProps = omitProps(rest, Select.allowedProps);
@@ -572,6 +576,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       : interaction,
       isRequired,
       shouldNotWrap,
+      layout,
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput: this.handleRenderBeforeInput(),
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button

package/es/Select/props.js

@@ -72,7 +72,8 @@ const propTypes = {
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
   shouldNotWrap: PropTypes.bool,
-  scrollToHighlightedOption: PropTypes.bool
+  scrollToHighlightedOption: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 };
-const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
+const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption', 'layout'];
 export { propTypes, allowedProps };

package/lib/Select/index.js

@@ -31,7 +31,7 @@ var _Option = require("./Option");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["id", "renderLabel", "children"],
-  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions"],
+  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions", "layout"],
   _excluded3 = ["ref"];
 var _dec, _dec2, _dec3, _class, _Select, _Options$Separator, _Options$Separator2, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
 /*
@@ -91,6 +91,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Select = class Select extends _react.Component {
   constructor(...args) {
     super(...args);
+    this.SCROLL_TOLERANCE = 0.5;
     this.state = {
       hasInputRef: false
     };
@@ -403,7 +404,9 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     const viewProps = isShowingOptions ? {
       display: 'block',
       overflowY: 'auto',
-      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
+      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
+      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
       maxWidth: optionsMaxWidth || this.width,
       background: 'primary',
       elementRef: node => this._listView = node,
@@ -537,6 +540,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       onBlur = _this$props0.onBlur,
       onInputChange = _this$props0.onInputChange,
       onRequestHideOptions = _this$props0.onRequestHideOptions,
+      layout = _this$props0.layout,
       rest = (0, _objectWithoutProperties2.default)(_this$props0, _excluded2);
     const interaction = this.interaction;
     const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
@@ -584,6 +588,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       : interaction,
       isRequired,
       shouldNotWrap,
+      layout,
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput: this.handleRenderBeforeInput(),
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button

package/lib/Select/props.js

@@ -78,6 +78,7 @@ const propTypes = exports.propTypes = {
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
   shouldNotWrap: _propTypes.default.bool,
-  scrollToHighlightedOption: _propTypes.default.bool
+  scrollToHighlightedOption: _propTypes.default.bool,
+  layout: _propTypes.default.oneOf(['stacked', 'inline'])
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'isOptionContentAppliedToInput', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption', 'layout'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "10.20.2-snapshot-7",
+  "version": "10.20.2-snapshot-10",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.20.2-snapshot-7",
-    "@instructure/ui-color-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-scripts": "10.20.2-snapshot-7",
-    "@instructure/ui-test-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-themes": "10.20.2-snapshot-7",
+    "@instructure/ui-babel-preset": "10.20.2-snapshot-10",
+    "@instructure/ui-color-utils": "10.20.2-snapshot-10",
+    "@instructure/ui-scripts": "10.20.2-snapshot-10",
+    "@instructure/ui-test-utils": "10.20.2-snapshot-10",
+    "@instructure/ui-themes": "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",
@@ -35,22 +35,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/emotion": "10.20.2-snapshot-7",
-    "@instructure/shared-types": "10.20.2-snapshot-7",
-    "@instructure/ui-dom-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-form-field": "10.20.2-snapshot-7",
-    "@instructure/ui-icons": "10.20.2-snapshot-7",
-    "@instructure/ui-options": "10.20.2-snapshot-7",
-    "@instructure/ui-popover": "10.20.2-snapshot-7",
-    "@instructure/ui-position": "10.20.2-snapshot-7",
-    "@instructure/ui-prop-types": "10.20.2-snapshot-7",
-    "@instructure/ui-react-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-selectable": "10.20.2-snapshot-7",
-    "@instructure/ui-testable": "10.20.2-snapshot-7",
-    "@instructure/ui-text-input": "10.20.2-snapshot-7",
-    "@instructure/ui-utils": "10.20.2-snapshot-7",
-    "@instructure/ui-view": "10.20.2-snapshot-7",
-    "@instructure/uid": "10.20.2-snapshot-7",
+    "@instructure/emotion": "10.20.2-snapshot-10",
+    "@instructure/shared-types": "10.20.2-snapshot-10",
+    "@instructure/ui-dom-utils": "10.20.2-snapshot-10",
+    "@instructure/ui-form-field": "10.20.2-snapshot-10",
+    "@instructure/ui-icons": "10.20.2-snapshot-10",
+    "@instructure/ui-options": "10.20.2-snapshot-10",
+    "@instructure/ui-popover": "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-selectable": "10.20.2-snapshot-10",
+    "@instructure/ui-testable": "10.20.2-snapshot-10",
+    "@instructure/ui-text-input": "10.20.2-snapshot-10",
+    "@instructure/ui-utils": "10.20.2-snapshot-10",
+    "@instructure/ui-view": "10.20.2-snapshot-10",
+    "@instructure/uid": "10.20.2-snapshot-10",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -133,6 +133,7 @@ tags: autocomplete, typeahead, combobox, dropdown, search, form
 @testable()
 class Select extends Component<SelectProps> {
   static readonly componentId = 'Select'
+  private readonly SCROLL_TOLERANCE = 0.5
 
   static allowedProps = allowedProps
   static propTypes = propTypes
@@ -527,7 +528,10 @@ class Select extends Component<SelectProps> {
           display: 'block',
           overflowY: 'auto',
           maxHeight:
-            optionsMaxHeight || this._optionHeight * visibleOptionsCount!,
+            optionsMaxHeight ||
+            this._optionHeight * visibleOptionsCount! -
+              // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+              (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
           maxWidth: optionsMaxWidth || this.width,
           background: 'primary',
           elementRef: (node: Element | null) => (this._listView = node),
@@ -690,6 +694,7 @@ class Select extends Component<SelectProps> {
       onBlur,
       onInputChange,
       onRequestHideOptions,
+      layout,
       ...rest
     } = this.props
 
@@ -745,6 +750,7 @@ class Select extends Component<SelectProps> {
           : interaction,
       isRequired,
       shouldNotWrap,
+      layout,
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput: this.handleRenderBeforeInput(),
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button

package/src/Select/props.ts

@@ -256,6 +256,14 @@ type PropsFromTextInput = {
    * when available space is exceeded.
    */
   shouldNotWrap?: 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'
 }
 
 // These props are directly passed to Popover
@@ -328,7 +336,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
   shouldNotWrap: PropTypes.bool,
-  scrollToHighlightedOption: PropTypes.bool
+  scrollToHighlightedOption: PropTypes.bool,
+  layout: PropTypes.oneOf(['stacked', 'inline'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -365,7 +374,8 @@ const allowedProps: AllowedPropKeys = [
   'renderAfterInput',
   'children',
   'shouldNotWrap',
-  'scrollToHighlightedOption'
+  'scrollToHighlightedOption',
+  'layout'
 ]
 
 export type { SelectProps, SelectOwnProps, SelectStyle }