@instructure/ui-select 8.53.3-snapshot-13 → 8.53.3-snapshot-15

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.
 
-## [8.53.3-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-13) (2024-02-29)
+## [8.53.3-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-15) (2024-03-01)
 
-**Note:** Version bump only for package @instructure/ui-select
+
+### Features
+
+* **ui-select:** expose prop to control auto-scrolling in select component ([7cd4c22](https://github.com/instructure/instructure-ui/commit/7cd4c22c83bff1a55481e359199865b176dd26df))
 
 
 

package/es/Select/index.js

@@ -120,9 +120,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props4;
     (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
-
-    // scroll option into view if needed
-    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
+    if (this.props.scrollToHighlightedOption) {
+      // scroll option into view if needed
+      requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
+    }
   }
   focus() {
     this._input && this._input.focus();
@@ -561,7 +562,8 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  shouldNotWrap: false
+  shouldNotWrap: false,
+  scrollToHighlightedOption: false
 }, _class2.Option = Option, _class2.Group = Group, _class2)) || _class) || _class) || _class);
 export default Select;
 export { Select };

package/es/Select/props.js

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

package/lib/Select/index.js

@@ -132,9 +132,10 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props4;
     (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
-
-    // scroll option into view if needed
-    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
+    if (this.props.scrollToHighlightedOption) {
+      // scroll option into view if needed
+      requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
+    }
   }
   focus() {
     this._input && this._input.focus();
@@ -573,6 +574,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  shouldNotWrap: false
+  shouldNotWrap: false,
+  scrollToHighlightedOption: false
 }, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _class2)) || _class) || _class) || _class);
 var _default = exports.default = Select;

package/lib/Select/props.js

@@ -73,6 +73,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]),
-  shouldNotWrap: _propTypes.default.bool
+  shouldNotWrap: _propTypes.default.bool,
+  scrollToHighlightedOption: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onFocus', 'onBlur', 'onInputChange', 'onRequestShowOptions', 'onRequestHideOptions', 'onRequestHighlightOption', 'onRequestSelectOption', 'inputRef', 'listRef', 'renderBeforeInput', 'renderAfterInput', 'children', 'shouldNotWrap', 'scrollToHighlightedOption'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.53.3-snapshot-13",
+  "version": "8.53.3-snapshot-15",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-13",
-    "@instructure/ui-color-utils": "8.53.3-snapshot-13",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-13",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-13",
-    "@instructure/ui-themes": "8.53.3-snapshot-13",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-15",
+    "@instructure/ui-color-utils": "8.53.3-snapshot-15",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-15",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-15",
+    "@instructure/ui-themes": "8.53.3-snapshot-15",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/emotion": "8.53.3-snapshot-13",
-    "@instructure/shared-types": "8.53.3-snapshot-13",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-13",
-    "@instructure/ui-form-field": "8.53.3-snapshot-13",
-    "@instructure/ui-icons": "8.53.3-snapshot-13",
-    "@instructure/ui-options": "8.53.3-snapshot-13",
-    "@instructure/ui-popover": "8.53.3-snapshot-13",
-    "@instructure/ui-position": "8.53.3-snapshot-13",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-13",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-13",
-    "@instructure/ui-selectable": "8.53.3-snapshot-13",
-    "@instructure/ui-testable": "8.53.3-snapshot-13",
-    "@instructure/ui-text-input": "8.53.3-snapshot-13",
-    "@instructure/ui-utils": "8.53.3-snapshot-13",
-    "@instructure/ui-view": "8.53.3-snapshot-13",
-    "@instructure/uid": "8.53.3-snapshot-13",
+    "@instructure/emotion": "8.53.3-snapshot-15",
+    "@instructure/shared-types": "8.53.3-snapshot-15",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-15",
+    "@instructure/ui-form-field": "8.53.3-snapshot-15",
+    "@instructure/ui-icons": "8.53.3-snapshot-15",
+    "@instructure/ui-options": "8.53.3-snapshot-15",
+    "@instructure/ui-popover": "8.53.3-snapshot-15",
+    "@instructure/ui-position": "8.53.3-snapshot-15",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-15",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-15",
+    "@instructure/ui-selectable": "8.53.3-snapshot-15",
+    "@instructure/ui-testable": "8.53.3-snapshot-15",
+    "@instructure/ui-text-input": "8.53.3-snapshot-15",
+    "@instructure/ui-utils": "8.53.3-snapshot-15",
+    "@instructure/ui-view": "8.53.3-snapshot-15",
+    "@instructure/uid": "8.53.3-snapshot-15",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -148,7 +148,8 @@ class Select extends Component<SelectProps> {
     visibleOptionsCount: 8,
     placement: 'bottom stretch',
     constrain: 'window',
-    shouldNotWrap: false
+    shouldNotWrap: false,
+    scrollToHighlightedOption: false
   }
 
   static Option = Option
@@ -161,8 +162,10 @@ class Select extends Component<SelectProps> {
   componentDidUpdate() {
     this.props.makeStyles?.()
 
-    // scroll option into view if needed
-    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId))
+    if (this.props.scrollToHighlightedOption) {
+      // scroll option into view if needed
+      requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId))
+    }
   }
 
   state = {

package/src/Select/props.ts

@@ -110,6 +110,11 @@ type SelectOwnProps = {
    */
   listRef?: (listElement: HTMLUListElement | null) => void
 
+  /**
+   * Enable/disable auto scroll to the highlighted option on every re-render
+   */
+  scrollToHighlightedOption?: boolean
+
   /**
    * Children of type `<Select.Option />` or `<Select.Group />`.
    */
@@ -302,7 +307,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderBeforeInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option]),
-  shouldNotWrap: PropTypes.bool
+  shouldNotWrap: PropTypes.bool,
+  scrollToHighlightedOption: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -337,7 +343,8 @@ const allowedProps: AllowedPropKeys = [
   'renderBeforeInput',
   'renderAfterInput',
   'children',
-  'shouldNotWrap'
+  'shouldNotWrap',
+  'scrollToHighlightedOption'
 ]
 
 export type { SelectProps, SelectOwnProps, SelectStyle }