@instructure/ui-select 7.14.1 → 7.17.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.17.0](https://github.com/instructure/instructure-ui/compare/v7.16.0...v7.17.0) (2022-03-22)
+
+**Note:** Version bump only for package @instructure/ui-select
+
+# [7.16.0](https://github.com/instructure/instructure-ui/compare/v7.15.0...v7.16.0) (2022-02-08)
+
+**Note:** Version bump only for package @instructure/ui-select
+
+# [7.15.0](https://github.com/instructure/instructure-ui/compare/v7.14.1...v7.15.0) (2022-02-03)
+
+### Features
+
+- **ui-select:** add `optionsMaxHeight` prop to Select ([41f9016](https://github.com/instructure/instructure-ui/commit/41f9016))
+
 ## [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-select

package/es/Select/index.js

@@ -342,13 +342,14 @@ var Select = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_class =
       var _this$props2 = this.props,
           isShowingOptions = _this$props2.isShowingOptions,
           optionsMaxWidth = _this$props2.optionsMaxWidth,
+          optionsMaxHeight = _this$props2.optionsMaxHeight,
           visibleOptionsCount = _this$props2.visibleOptionsCount,
           children = _this$props2.children;
       var lastWasGroup = false;
       var viewProps = isShowingOptions ? {
         display: 'block',
         overflowY: 'auto',
-        maxHeight: this._optionHeight * visibleOptionsCount,
+        maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
         maxWidth: optionsMaxWidth || this.width,
         background: 'primary',
         elementRef: function elementRef(node) {
@@ -654,15 +655,21 @@ var Select = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_class =
   htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
   /**
-   * 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
@@ -770,8 +777,9 @@ var Select = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_class =
   isInline: false,
   width: void 0,
   htmlSize: void 0,
-  optionsMaxWidth: void 0,
   visibleOptionsCount: 8,
+  optionsMaxHeight: void 0,
+  optionsMaxWidth: void 0,
   messages: void 0,
   placement: 'bottom stretch',
   constrain: 'window',

package/lib/Select/index.js

@@ -361,13 +361,14 @@ var Select = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable
       var _this$props2 = this.props,
           isShowingOptions = _this$props2.isShowingOptions,
           optionsMaxWidth = _this$props2.optionsMaxWidth,
+          optionsMaxHeight = _this$props2.optionsMaxHeight,
           visibleOptionsCount = _this$props2.visibleOptionsCount,
           children = _this$props2.children;
       var lastWasGroup = false;
       var viewProps = isShowingOptions ? {
         display: 'block',
         overflowY: 'auto',
-        maxHeight: this._optionHeight * visibleOptionsCount,
+        maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount,
         maxWidth: optionsMaxWidth || this.width,
         background: 'primary',
         elementRef: function elementRef(node) {
@@ -674,15 +675,21 @@ var Select = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable
   htmlSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
   /**
-   * 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
@@ -790,8 +797,9 @@ var Select = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themeable
   isInline: false,
   width: void 0,
   htmlSize: void 0,
-  optionsMaxWidth: void 0,
   visibleOptionsCount: 8,
+  optionsMaxHeight: void 0,
+  optionsMaxWidth: void 0,
   messages: void 0,
   placement: 'bottom stretch',
   constrain: 'window',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "7.14.1",
+  "version": "7.17.0",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "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.17.0",
+    "@instructure/ui-color-utils": "^7.17.0",
+    "@instructure/ui-test-locator": "^7.17.0",
+    "@instructure/ui-test-utils": "^7.17.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/ui-dom-utils": "^7.14.1",
-    "@instructure/ui-form-field": "^7.14.1",
-    "@instructure/ui-icons": "^7.14.1",
-    "@instructure/ui-options": "^7.14.1",
-    "@instructure/ui-popover": "^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-selectable": "^7.14.1",
-    "@instructure/ui-testable": "^7.14.1",
-    "@instructure/ui-text-input": "^7.14.1",
-    "@instructure/ui-themeable": "^7.14.1",
-    "@instructure/ui-utils": "^7.14.1",
-    "@instructure/ui-view": "^7.14.1",
-    "@instructure/uid": "^7.14.1",
+    "@instructure/ui-dom-utils": "^7.17.0",
+    "@instructure/ui-form-field": "^7.17.0",
+    "@instructure/ui-icons": "^7.17.0",
+    "@instructure/ui-options": "^7.17.0",
+    "@instructure/ui-popover": "^7.17.0",
+    "@instructure/ui-position": "^7.17.0",
+    "@instructure/ui-prop-types": "^7.17.0",
+    "@instructure/ui-react-utils": "^7.17.0",
+    "@instructure/ui-selectable": "^7.17.0",
+    "@instructure/ui-testable": "^7.17.0",
+    "@instructure/ui-text-input": "^7.17.0",
+    "@instructure/ui-themeable": "^7.17.0",
+    "@instructure/ui-utils": "^7.17.0",
+    "@instructure/ui-view": "^7.17.0",
+    "@instructure/uid": "^7.17.0",
     "classnames": "^2",
     "prop-types": "^15"
   },

package/src/Select/index.js

@@ -127,15 +127,20 @@ class Select extends Component {
      * provided via the `width` prop. Only applicable if `isInline={true}`.
      */
     htmlSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /**
+     * 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:
@@ -228,8 +233,9 @@ class Select extends Component {
     isInline: false,
     width: undefined,
     htmlSize: undefined,
-    optionsMaxWidth: undefined,
     visibleOptionsCount: 8,
+    optionsMaxHeight: undefined,
+    optionsMaxWidth: undefined,
     messages: undefined,
     placement: 'bottom stretch',
     constrain: 'window',
@@ -535,6 +541,7 @@ class Select extends Component {
     const {
       isShowingOptions,
       optionsMaxWidth,
+      optionsMaxHeight,
       visibleOptionsCount,
       children
     } = this.props
@@ -544,7 +551,8 @@ class Select extends Component {
       ? {
           display: 'block',
           overflowY: 'auto',
-          maxHeight: this._optionHeight * visibleOptionsCount,
+          maxHeight:
+            optionsMaxHeight || this._optionHeight * visibleOptionsCount,
           maxWidth: optionsMaxWidth || this.width,
           background: 'primary',
           elementRef: (node) => (this._listView = node)

package/types/index.d.ts

@@ -68,15 +68,20 @@ export interface SelectProps {
      * provided via the `width` prop. Only applicable if `isInline={true}`.
      */
     htmlSize?: SelectHtmlSize;
+    /**
+     * 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: