@instructure/ui-select 8.15.1-snapshot.3 → 8.16.1-snapshot.2

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.
 
+# [8.16.0](https://github.com/instructure/instructure-ui/compare/v8.15.0...v8.16.0) (2022-02-03)
+
+### Features
+
+- **ui-select:** add `optionsMaxHeight` prop to Select ([cf361bf](https://github.com/instructure/instructure-ui/commit/cf361bf41dcef00548cd7a9053f44bec32c58f6a))
+
 # [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
 
 **Note:** Version bump only for package @instructure/ui-select

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,9 +1,8 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.15.1-snapshot.3+7badd52b7",
+  "version": "8.16.1-snapshot.2+25359e770",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
-  "type": "commonjs",
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",
@@ -24,30 +23,30 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-color-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-test-locator": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-test-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-themes": "8.15.1-snapshot.3+7badd52b7"
+    "@instructure/ui-babel-preset": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-color-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-test-locator": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-test-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-themes": "8.16.1-snapshot.2+25359e770"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/shared-types": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-dom-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-form-field": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-icons": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-options": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-popover": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-position": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-prop-types": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-react-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-selectable": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-testable": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-text-input": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-view": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/uid": "8.15.1-snapshot.3+7badd52b7",
+    "@instructure/emotion": "8.16.1-snapshot.2+25359e770",
+    "@instructure/shared-types": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-dom-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-form-field": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-icons": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-options": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-popover": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-position": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-prop-types": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-react-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-selectable": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-testable": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-text-input": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-view": "8.16.1-snapshot.2+25359e770",
+    "@instructure/uid": "8.16.1-snapshot.2+25359e770",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -57,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "7badd52b7e444a81741ef17ff6dadf5866438a3b"
+  "gitHead": "25359e77043270cf26e92b14f396b498f1540c62"
 }

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',