@instructure/ui-select 8.15.0 → 8.15.1-snapshot.5

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Select/index.js

@@ -389,13 +389,14 @@ let Select = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     const _this$props6 = this.props,
           isShowingOptions = _this$props6.isShowingOptions,
           optionsMaxWidth = _this$props6.optionsMaxWidth,
+          optionsMaxHeight = _this$props6.optionsMaxHeight,
           visibleOptionsCount = _this$props6.visibleOptionsCount,
           children = _this$props6.children;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       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/es/Select/props.js

@@ -39,8 +39,9 @@ const propTypes = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   htmlSize: PropTypes.number,
-  optionsMaxWidth: PropTypes.string,
   visibleOptionsCount: PropTypes.number,
+  optionsMaxHeight: PropTypes.string,
+  optionsMaxWidth: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
   placement: PositionPropTypes.placement,
   constrain: PositionPropTypes.constrain,
@@ -60,5 +61,5 @@ const propTypes = {
   children: ChildrenPropTypes.oneOf([Group, Option]),
   shouldNotWrap: PropTypes.bool
 };
-const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'optionsMaxWidth', 'visibleOptionsCount', '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'];
 export { propTypes, allowedProps };

package/lib/Select/index.js

@@ -399,13 +399,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     const _this$props6 = this.props,
           isShowingOptions = _this$props6.isShowingOptions,
           optionsMaxWidth = _this$props6.optionsMaxWidth,
+          optionsMaxHeight = _this$props6.optionsMaxHeight,
           visibleOptionsCount = _this$props6.visibleOptionsCount,
           children = _this$props6.children;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       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/lib/Select/props.js

@@ -54,8 +54,9 @@ const propTypes = {
   isInline: _propTypes.default.bool,
   width: _propTypes.default.string,
   htmlSize: _propTypes.default.number,
-  optionsMaxWidth: _propTypes.default.string,
   visibleOptionsCount: _propTypes.default.number,
+  optionsMaxHeight: _propTypes.default.string,
+  optionsMaxWidth: _propTypes.default.string,
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
   placement: _PositionPropTypes.PositionPropTypes.placement,
   constrain: _PositionPropTypes.PositionPropTypes.constrain,
@@ -76,5 +77,5 @@ const propTypes = {
   shouldNotWrap: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderLabel', 'inputValue', 'isShowingOptions', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'htmlSize', 'optionsMaxWidth', 'visibleOptionsCount', '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'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.15.0",
+  "version": "8.15.1-snapshot.5+c205f80a3",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,30 +24,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.15.0",
-    "@instructure/ui-color-utils": "8.15.0",
-    "@instructure/ui-test-locator": "8.15.0",
-    "@instructure/ui-test-utils": "8.15.0",
-    "@instructure/ui-themes": "8.15.0"
+    "@instructure/ui-babel-preset": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-color-utils": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-test-locator": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-test-utils": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-themes": "8.15.1-snapshot.5+c205f80a3"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.15.0",
-    "@instructure/shared-types": "8.15.0",
-    "@instructure/ui-dom-utils": "8.15.0",
-    "@instructure/ui-form-field": "8.15.0",
-    "@instructure/ui-icons": "8.15.0",
-    "@instructure/ui-options": "8.15.0",
-    "@instructure/ui-popover": "8.15.0",
-    "@instructure/ui-position": "8.15.0",
-    "@instructure/ui-prop-types": "8.15.0",
-    "@instructure/ui-react-utils": "8.15.0",
-    "@instructure/ui-selectable": "8.15.0",
-    "@instructure/ui-testable": "8.15.0",
-    "@instructure/ui-text-input": "8.15.0",
-    "@instructure/ui-utils": "8.15.0",
-    "@instructure/ui-view": "8.15.0",
-    "@instructure/uid": "8.15.0",
+    "@instructure/emotion": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/shared-types": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-dom-utils": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-form-field": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-icons": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-options": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-popover": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-position": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-prop-types": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-react-utils": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-selectable": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-testable": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-text-input": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-utils": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/ui-view": "8.15.1-snapshot.5+c205f80a3",
+    "@instructure/uid": "8.15.1-snapshot.5+c205f80a3",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -56,5 +56,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "c205f80a35a46812abacb6cdfaadbc0de76beea4"
 }

package/src/Select/index.tsx

@@ -459,8 +459,13 @@ class Select extends Component<SelectProps> {
     >
   ) {
     const { getListProps, getOptionProps, getDisabledOptionProps } = data
-    const { isShowingOptions, optionsMaxWidth, visibleOptionsCount, children } =
-      this.props
+    const {
+      isShowingOptions,
+      optionsMaxWidth,
+      optionsMaxHeight,
+      visibleOptionsCount,
+      children
+    } = this.props
 
     let lastWasGroup = false
 
@@ -468,7 +473,8 @@ class Select extends Component<SelectProps> {
       ? {
           display: 'block',
           overflowY: 'auto',
-          maxHeight: this._optionHeight * visibleOptionsCount!,
+          maxHeight:
+            optionsMaxHeight || this._optionHeight * visibleOptionsCount!,
           maxWidth: optionsMaxWidth || this.width,
           background: 'primary',
           elementRef: (node: Element | null) => (this._listView = node)

package/src/Select/props.ts

@@ -72,15 +72,21 @@ type SelectOwnProps = {
   isInline?: boolean
 
   /**
-   * 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?: string
+  visibleOptionsCount?: 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?: number
+  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
 
   // Passed directly to TextInput as `value`
   /**
@@ -270,8 +276,9 @@ const propTypes: PropValidators<PropKeys> = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   htmlSize: PropTypes.number,
-  optionsMaxWidth: PropTypes.string,
   visibleOptionsCount: PropTypes.number,
+  optionsMaxHeight: PropTypes.string,
+  optionsMaxWidth: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
   placement: PositionPropTypes.placement,
   constrain: PositionPropTypes.constrain,
@@ -305,8 +312,9 @@ const allowedProps: AllowedPropKeys = [
   'isInline',
   'width',
   'htmlSize',
-  'optionsMaxWidth',
   'visibleOptionsCount',
+  'optionsMaxHeight',
+  'optionsMaxWidth',
   'messages',
   'placement',
   'constrain',