@instructure/ui-simple-select 7.14.1 → 7.15.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.15.0](https://github.com/instructure/instructure-ui/compare/v7.14.1...v7.15.0) (2022-02-03)
+
+### Features
+
+- **ui-simple-select:** add `optionsMaxHeight` prop to SimpleSelect ([6dad00d](https://github.com/instructure/instructure-ui/commit/6dad00d))
+
 ## [7.14.1](https://github.com/instructure/instructure-ui/compare/v7.14.0...v7.14.1) (2021-12-06)
 
 **Note:** Version bump only for package @instructure/ui-simple-select

package/es/SimpleSelect/index.js

@@ -346,6 +346,7 @@ var SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = /*#__PUR
           isInline = _this$props.isInline,
           width = _this$props.width,
           optionsMaxWidth = _this$props.optionsMaxWidth,
+          optionsMaxHeight = _this$props.optionsMaxHeight,
           visibleOptionsCount = _this$props.visibleOptionsCount,
           messages = _this$props.messages,
           placement = _this$props.placement,
@@ -361,7 +362,7 @@ var SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = /*#__PUR
           onShowOptions = _this$props.onShowOptions,
           onHideOptions = _this$props.onHideOptions,
           children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"]);
+          rest = _objectWithoutProperties(_this$props, ["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"]);
 
       return /*#__PURE__*/React.createElement(Select, Object.assign({
         renderLabel: renderLabel,
@@ -376,6 +377,7 @@ var SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = /*#__PUR
         isInline: isInline,
         width: width,
         optionsMaxWidth: optionsMaxWidth,
+        optionsMaxHeight: optionsMaxHeight,
         visibleOptionsCount: visibleOptionsCount,
         messages: messages,
         placement: placement,
@@ -484,15 +486,21 @@ var SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = /*#__PUR
   width: PropTypes.string,
 
   /**
-   * The max width the options list can be before option text wraps. If not
-   * set, the list will only display as wide as the text input.
+   * The number of options that should be visible before having to scroll. Works best when the options are the same height.
    */
-  optionsMaxWidth: PropTypes.string,
+  visibleOptionsCount: PropTypes.number,
 
   /**
-   * The number of options that should be visible before having to scroll.
+   * The max height the options list can be before having to scroll. If
+   * set, it will __override__ the `visibleOptionsCount` prop.
    */
-  visibleOptionsCount: PropTypes.number,
+  optionsMaxHeight: PropTypes.string,
+
+  /**
+   * The max width the options list can be before option text wraps. If not
+   * set, the list will only display as wide as the text input.
+   */
+  optionsMaxWidth: PropTypes.string,
 
   /**
    * Displays messages and validation for the input. It should be an object
@@ -591,6 +599,7 @@ var SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = /*#__PUR
   isInline: false,
   width: void 0,
   optionsMaxWidth: void 0,
+  optionsMaxHeight: void 0,
   visibleOptionsCount: 8,
   messages: void 0,
   placement: 'bottom stretch',

package/lib/SimpleSelect/index.js

@@ -356,6 +356,7 @@ var SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
           isInline = _this$props.isInline,
           width = _this$props.width,
           optionsMaxWidth = _this$props.optionsMaxWidth,
+          optionsMaxHeight = _this$props.optionsMaxHeight,
           visibleOptionsCount = _this$props.visibleOptionsCount,
           messages = _this$props.messages,
           placement = _this$props.placement,
@@ -371,7 +372,7 @@ var SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
           onShowOptions = _this$props.onShowOptions,
           onHideOptions = _this$props.onHideOptions,
           children = _this$props.children,
-          rest = (0, _objectWithoutProperties2.default)(_this$props, ["renderLabel", "value", "defaultValue", "id", "size", "assistiveText", "placeholder", "interaction", "isRequired", "isInline", "width", "optionsMaxWidth", "visibleOptionsCount", "messages", "placement", "constrain", "mountNode", "inputRef", "listRef", "renderEmptyOption", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onShowOptions", "onHideOptions", "children"]);
+          rest = (0, _objectWithoutProperties2.default)(_this$props, ["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"]);
       return /*#__PURE__*/_react.default.createElement(_Select.Select, Object.assign({
         renderLabel: renderLabel,
         inputValue: this.state.inputValue,
@@ -385,6 +386,7 @@ var SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
         isInline: isInline,
         width: width,
         optionsMaxWidth: optionsMaxWidth,
+        optionsMaxHeight: optionsMaxHeight,
         visibleOptionsCount: visibleOptionsCount,
         messages: messages,
         placement: placement,
@@ -492,15 +494,21 @@ var SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
   width: _propTypes.default.string,
 
   /**
-   * The max width the options list can be before option text wraps. If not
-   * set, the list will only display as wide as the text input.
+   * The number of options that should be visible before having to scroll. Works best when the options are the same height.
    */
-  optionsMaxWidth: _propTypes.default.string,
+  visibleOptionsCount: _propTypes.default.number,
 
   /**
-   * The number of options that should be visible before having to scroll.
+   * The max height the options list can be before having to scroll. If
+   * set, it will __override__ the `visibleOptionsCount` prop.
    */
-  visibleOptionsCount: _propTypes.default.number,
+  optionsMaxHeight: _propTypes.default.string,
+
+  /**
+   * The max width the options list can be before option text wraps. If not
+   * set, the list will only display as wide as the text input.
+   */
+  optionsMaxWidth: _propTypes.default.string,
 
   /**
    * Displays messages and validation for the input. It should be an object
@@ -599,6 +607,7 @@ var SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
   isInline: false,
   width: void 0,
   optionsMaxWidth: void 0,
+  optionsMaxHeight: void 0,
   visibleOptionsCount: 8,
   messages: void 0,
   placement: 'bottom stretch',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "7.14.1",
+  "version": "7.15.0",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.14.1",
-    "@instructure/ui-form-field": "^7.14.1",
-    "@instructure/ui-position": "^7.14.1",
-    "@instructure/ui-prop-types": "^7.14.1",
-    "@instructure/ui-react-utils": "^7.14.1",
-    "@instructure/ui-select": "^7.14.1",
-    "@instructure/ui-testable": "^7.14.1",
-    "@instructure/ui-themeable": "^7.14.1",
-    "@instructure/uid": "^7.14.1",
+    "@instructure/console": "^7.15.0",
+    "@instructure/ui-form-field": "^7.15.0",
+    "@instructure/ui-position": "^7.15.0",
+    "@instructure/ui-prop-types": "^7.15.0",
+    "@instructure/ui-react-utils": "^7.15.0",
+    "@instructure/ui-select": "^7.15.0",
+    "@instructure/ui-testable": "^7.15.0",
+    "@instructure/ui-themeable": "^7.15.0",
+    "@instructure/uid": "^7.15.0",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.14.1",
-    "@instructure/ui-color-utils": "^7.14.1",
-    "@instructure/ui-test-locator": "^7.14.1",
-    "@instructure/ui-test-utils": "^7.14.1"
+    "@instructure/ui-babel-preset": "^7.15.0",
+    "@instructure/ui-color-utils": "^7.15.0",
+    "@instructure/ui-test-locator": "^7.15.0",
+    "@instructure/ui-test-utils": "^7.15.0"
   },
   "peerDependencies": {
     "react": "^16.8"

package/src/SimpleSelect/index.js

@@ -107,15 +107,20 @@ class SimpleSelect extends Component {
      * The width of the text input.
      */
     width: PropTypes.string,
+    /**
+     * The number of options that should be visible before having to scroll. Works best when the options are the same height.
+     */
+    visibleOptionsCount: PropTypes.number,
+    /**
+     * The max height the options list can be before having to scroll. If
+     * set, it will __override__ the `visibleOptionsCount` prop.
+     */
+    optionsMaxHeight: PropTypes.string,
     /**
      * The max width the options list can be before option text wraps. If not
      * set, the list will only display as wide as the text input.
      */
     optionsMaxWidth: PropTypes.string,
-    /**
-     * The number of options that should be visible before having to scroll.
-     */
-    visibleOptionsCount: PropTypes.number,
     /**
      * Displays messages and validation for the input. It should be an object
      * with the following shape:
@@ -201,6 +206,7 @@ class SimpleSelect extends Component {
     isInline: false,
     width: undefined,
     optionsMaxWidth: undefined,
+    optionsMaxHeight: undefined,
     visibleOptionsCount: 8,
     messages: undefined,
     placement: 'bottom stretch',
@@ -477,6 +483,7 @@ class SimpleSelect extends Component {
       isInline,
       width,
       optionsMaxWidth,
+      optionsMaxHeight,
       visibleOptionsCount,
       messages,
       placement,
@@ -509,6 +516,7 @@ class SimpleSelect extends Component {
         isInline={isInline}
         width={width}
         optionsMaxWidth={optionsMaxWidth}
+        optionsMaxHeight={optionsMaxHeight}
         visibleOptionsCount={visibleOptionsCount}
         messages={messages}
         placement={placement}

package/types/index.d.ts

@@ -64,15 +64,20 @@ export interface SimpleSelectProps {
      * The width of the text input.
      */
     width?: string;
+    /**
+     * The number of options that should be visible before having to scroll. Works best when the options are the same height.
+     */
+    visibleOptionsCount?: number;
+    /**
+     * The max height the options list can be before having to scroll. If
+     * set, it will __override__ the `visibleOptionsCount` prop.
+     */
+    optionsMaxHeight?: string;
     /**
      * The max width the options list can be before option text wraps. If not
      * set, the list will only display as wide as the text input.
      */
     optionsMaxWidth?: string;
-    /**
-     * The number of options that should be visible before having to scroll.
-     */
-    visibleOptionsCount?: number;
     /**
      * Displays messages and validation for the input. It should be an object
      * with the following shape: