@instructure/ui-simple-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-simple-select:** add `optionsMaxHeight` prop to SimpleSelect ([c205f80](https://github.com/instructure/instructure-ui/commit/c205f80a35a46812abacb6cdfaadbc0de76beea4))
+
 # [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-simple-select

package/es/SimpleSelect/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
       _excluded2 = ["id", "renderLabel", "children"],
-      _excluded3 = ["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"];
+      _excluded3 = ["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"];
 
 var _dec, _class, _class2, _temp;
 
@@ -356,6 +356,7 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
           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,
@@ -386,6 +387,7 @@ let SimpleSelect = (_dec = testable(), _dec(_class = (_temp = _class2 = class Si
       isInline: isInline,
       width: width,
       optionsMaxWidth: optionsMaxWidth,
+      optionsMaxHeight: optionsMaxHeight,
       visibleOptionsCount: visibleOptionsCount,
       messages: messages,
       placement: placement,

package/es/SimpleSelect/props.js

@@ -40,8 +40,9 @@ const propTypes = {
   isRequired: PropTypes.bool,
   isInline: PropTypes.bool,
   width: PropTypes.string,
-  optionsMaxWidth: PropTypes.string,
   visibleOptionsCount: PropTypes.number,
+  optionsMaxHeight: PropTypes.string,
+  optionsMaxWidth: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
   placement: PositionPropTypes.placement,
   constrain: PositionPropTypes.constrain,
@@ -58,5 +59,5 @@ const propTypes = {
   renderAfterInput: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: ChildrenPropTypes.oneOf([Group, Option])
 };
-const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
+const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
 export { propTypes, allowedProps };

package/lib/SimpleSelect/index.js

@@ -35,7 +35,7 @@ var _props = require("./props");
 
 const _excluded = ["id", "value", "children", "renderBeforeLabel", "renderAfterLabel"],
       _excluded2 = ["id", "renderLabel", "children"],
-      _excluded3 = ["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"];
+      _excluded3 = ["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"];
 
 var _dec, _class, _class2, _temp;
 
@@ -356,6 +356,7 @@ let 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,
@@ -385,6 +386,7 @@ let SimpleSelect = (_dec = (0, _testable.testable)(), _dec(_class = (_temp = _cl
       isInline: isInline,
       width: width,
       optionsMaxWidth: optionsMaxWidth,
+      optionsMaxHeight: optionsMaxHeight,
       visibleOptionsCount: visibleOptionsCount,
       messages: messages,
       placement: placement,

package/lib/SimpleSelect/props.js

@@ -55,8 +55,9 @@ const propTypes = {
   isRequired: _propTypes.default.bool,
   isInline: _propTypes.default.bool,
   width: _propTypes.default.string,
-  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,
@@ -74,5 +75,5 @@ const propTypes = {
   children: _Children.Children.oneOf([_Group.Group, _Option.Option])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'optionsMaxWidth', 'visibleOptionsCount', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
+const allowedProps = ['renderLabel', 'value', 'defaultValue', 'id', 'size', 'assistiveText', 'placeholder', 'interaction', 'isRequired', 'isInline', 'width', 'visibleOptionsCount', 'optionsMaxHeight', 'optionsMaxWidth', 'messages', 'placement', 'constrain', 'mountNode', 'onChange', 'onFocus', 'onBlur', 'onShowOptions', 'onHideOptions', 'inputRef', 'listRef', 'renderEmptyOption', 'renderBeforeInput', 'renderAfterInput', 'children'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "8.15.1-snapshot.3+7badd52b7",
+  "version": "8.16.1-snapshot.2+25359e770",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
-  "type": "commonjs",
   "module": "./es/index.js",
   "main": "./lib/index.js",
   "types": "./types/index.d.ts",
@@ -25,22 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-form-field": "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-select": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-testable": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/uid": "8.15.1-snapshot.3+7badd52b7",
+    "@instructure/console": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-form-field": "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-select": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-testable": "8.16.1-snapshot.2+25359e770",
+    "@instructure/uid": "8.16.1-snapshot.2+25359e770",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-color-utils": "8.15.1-snapshot.3+7badd52b7",
-    "@instructure/ui-icons": "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-babel-preset": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-color-utils": "8.16.1-snapshot.2+25359e770",
+    "@instructure/ui-icons": "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"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -49,5 +48,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "7badd52b7e444a81741ef17ff6dadf5866438a3b"
+  "gitHead": "25359e77043270cf26e92b14f396b498f1540c62"
 }

package/src/SimpleSelect/index.tsx

@@ -393,6 +393,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
       isInline,
       width,
       optionsMaxWidth,
+      optionsMaxHeight,
       visibleOptionsCount,
       messages,
       placement,
@@ -425,6 +426,7 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
         isInline={isInline}
         width={width}
         optionsMaxWidth={optionsMaxWidth}
+        optionsMaxHeight={optionsMaxHeight}
         visibleOptionsCount={visibleOptionsCount}
         messages={messages}
         placement={placement}

package/src/SimpleSelect/props.ts

@@ -144,15 +144,21 @@ type PropsPassedToSelect = {
   width?: 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?: 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
 
   /**
    * Displays messages and validation for the input. It should be an array of
@@ -253,8 +259,9 @@ const propTypes: PropValidators<PropKeys> = {
   isRequired: PropTypes.bool,
   isInline: PropTypes.bool,
   width: PropTypes.string,
-  optionsMaxWidth: PropTypes.string,
   visibleOptionsCount: PropTypes.number,
+  optionsMaxHeight: PropTypes.string,
+  optionsMaxWidth: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
   placement: PositionPropTypes.placement,
   constrain: PositionPropTypes.constrain,
@@ -284,8 +291,9 @@ const allowedProps: AllowedPropKeys = [
   'isRequired',
   'isInline',
   'width',
-  'optionsMaxWidth',
   'visibleOptionsCount',
+  'optionsMaxHeight',
+  'optionsMaxWidth',
   'messages',
   'placement',
   'constrain',