@instructure/ui-select 8.13.1-snapshot.3 → 8.13.1-snapshot.35

package/lib/Select/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,12 +11,14 @@ exports.default = exports.Select = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
 
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
+var _uid = require("@instructure/uid");
+
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
@@ -39,8 +43,6 @@ var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDow
 
 var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
 
-var _uid = require("@instructure/uid");
-
 var _emotion = require("@instructure/emotion");
 
 var _styles = _interopRequireDefault(require("./styles"));
@@ -64,22 +66,24 @@ var _dec, _dec2, _class, _class2, _temp, _Options$Separator, _Options$Separator2
 category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
+@tsProps
 **/
 let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Select extends _react.Component {
   constructor() {
     super(...arguments);
-    this.ref = null;
     this.state = {
       hasInputRef: false
     };
+    this.ref = null;
     this._defaultId = (0, _uid.uid)('Select');
-    this._assistId = (0, _uid.uid)('Select-assistiveText');
-    this._inputContainer = void 0;
-    this._list = null;
+    this._inputContainer = null;
+    this._listView = null;
     this._optionIds = [];
     this._optionHeight = 36;
 
     this.handleInputRef = node => {
+      var _this$props$inputRef, _this$props;
+
       // ensures list is positioned with respect to input if list is open on mount
       if (!this.state.hasInputRef) {
         this.setState({
@@ -88,12 +92,13 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       }
 
       this.ref = node;
-      this.props.inputRef(node);
+      (_this$props$inputRef = (_this$props = this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, node);
     };
 
     this.handleListRef = node => {
-      this._list = node;
-      this.props.listRef(node); // store option height to calculate list maxHeight
+      var _this$props$listRef, _this$props2;
+
+      (_this$props$listRef = (_this$props2 = this.props).listRef) === null || _this$props$listRef === void 0 ? void 0 : _this$props$listRef.call(_this$props2, node); // store option height to calculate list maxHeight
 
       if (node && node.querySelector('[role="option"]')) {
         this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
@@ -106,15 +111,15 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props;
+    var _this$props$makeStyle, _this$props3;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
 
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props2;
+    var _this$props$makeStyle2, _this$props4;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2); // scroll option into view if needed
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4); // scroll option into view if needed
 
     this.scrollToOption(this.highlightedOptionId);
   }
@@ -136,7 +141,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   get width() {
-    return this._inputContainer && this._inputContainer.offsetWidth;
+    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
   }
 
   get interaction() {
@@ -146,11 +151,13 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   }
 
   get highlightedOptionId() {
-    let highlightedOptionId = null;
+    let highlightedOptionId;
 
     _react.Children.toArray(this.props.children).forEach(child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
         // group found
+        ;
+
         _react.Children.toArray(child.props.children).forEach(option => {
           // check options in group
           if (option.props.isHighlighted) {
@@ -174,6 +181,8 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     _react.Children.toArray(this.props.children).forEach(child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
         // group found
+        ;
+
         _react.Children.toArray(child.props.children).forEach(option => {
           // check options in group
           if (option.props.isSelected) {
@@ -188,8 +197,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       }
     });
 
-    if (selectedOptionId.length === 1) return selectedOptionId[0];
-    if (selectedOptionId.length === 0) return null;
+    if (selectedOptionId.length === 1) {
+      return selectedOptionId[0];
+    }
+
+    if (selectedOptionId.length === 0) {
+      return void 0;
+    }
+
     return selectedOptionId;
   }
 
@@ -202,7 +217,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       const parentTop = (0, _getBoundingClientRect.getBoundingClientRect)(this._listView).top;
       const elemTop = (0, _getBoundingClientRect.getBoundingClientRect)(listItem).top;
       const parentBottom = parentTop + this._listView.clientHeight;
-      const elemBottom = elemTop + listItem.clientHeight;
+      const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
 
       if (elemBottom > parentBottom) {
         this._listView.scrollTop += elemBottom - parentBottom;
@@ -216,23 +231,23 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     const onRequestHighlightOption = this.props.onRequestHighlightOption;
 
     if (id) {
-      onRequestHighlightOption(event, {
+      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
         id
       });
     }
   }
 
   getEventHandlers() {
-    const _this$props3 = this.props,
-          isShowingOptions = _this$props3.isShowingOptions,
-          onRequestShowOptions = _this$props3.onRequestShowOptions,
-          onRequestHideOptions = _this$props3.onRequestHideOptions,
-          onRequestSelectOption = _this$props3.onRequestSelectOption;
+    const _this$props5 = this.props,
+          isShowingOptions = _this$props5.isShowingOptions,
+          onRequestShowOptions = _this$props5.onRequestShowOptions,
+          onRequestHideOptions = _this$props5.onRequestHideOptions,
+          onRequestSelectOption = _this$props5.onRequestSelectOption;
     const highlightedOptionId = this.highlightedOptionId;
     const selectedOptionId = this.selectedOptionId;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
-        onRequestShowOptions(event);
+        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
 
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
@@ -240,14 +255,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions(event);
+        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
       },
       onRequestHighlightOption: (event, _ref) => {
         let id = _ref.id,
             direction = _ref.direction;
         if (!isShowingOptions) return; // if id exists, use that
 
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : null;
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
 
         if (!highlightId) {
           if (!highlightedOptionId) {
@@ -257,7 +272,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
             // find next id based on direction
             const index = this._optionIds.indexOf(highlightedOptionId);
 
-            highlightId = index > -1 ? this._optionIds[index + direction] : null;
+            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
           }
         }
 
@@ -277,7 +292,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
 
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
-          onRequestSelectOption(event, {
+          onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
             id
           });
         }
@@ -297,14 +312,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
           renderAfterLabel = _option$props.renderAfterLabel,
           children = _option$props.children;
 
-    const getRenderLabel = renderLabel => {
-      return typeof renderLabel === 'function' ? renderLabel.bind(null, {
+    const getRenderOptionLabel = renderOptionLabel => {
+      return typeof renderOptionLabel === 'function' ? renderOptionLabel.bind(null, {
         id,
         isDisabled,
         isSelected,
         isHighlighted,
         children
-      }) : renderLabel;
+      }) : renderOptionLabel;
     };
 
     let optionProps = { // passthrough props
@@ -314,8 +329,8 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
         id
       }),
       // Options.Item props
-      renderBeforeLabel: getRenderLabel(renderBeforeLabel),
-      renderAfterLabel: getRenderLabel(renderAfterLabel)
+      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
+      renderAfterLabel: getRenderOptionLabel(renderAfterLabel)
     }; // should option be treated as highlighted or selected
 
     if (isSelected) {
@@ -380,11 +395,11 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     const getListProps = data.getListProps,
           getOptionProps = data.getOptionProps,
           getDisabledOptionProps = data.getDisabledOptionProps;
-    const _this$props4 = this.props,
-          isShowingOptions = _this$props4.isShowingOptions,
-          optionsMaxWidth = _this$props4.optionsMaxWidth,
-          visibleOptionsCount = _this$props4.visibleOptionsCount,
-          children = _this$props4.children;
+    const _this$props6 = this.props,
+          isShowingOptions = _this$props6.isShowingOptions,
+          optionsMaxWidth = _this$props6.optionsMaxWidth,
+          visibleOptionsCount = _this$props6.visibleOptionsCount,
+          children = _this$props6.children;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -413,7 +428,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       }
 
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
-        const afterGroup = lastWasGroup ? true : false;
+        const afterGroup = lastWasGroup;
         lastWasGroup = true;
         return this.renderGroup(child, {
           getOptionProps,
@@ -424,13 +439,15 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
           afterGroup
         });
       }
+
+      return;
     }) : null));
   }
 
   renderIcon() {
-    const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          isShowingOptions = _this$props5.isShowingOptions;
+    const _this$props7 = this.props,
+          styles = _this$props7.styles,
+          isShowingOptions = _this$props7.isShowingOptions;
     return (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.icon
     }, isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _emotion.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {
@@ -443,24 +460,24 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   renderInput(data) {
     const getInputProps = data.getInputProps,
           getTriggerProps = data.getTriggerProps;
-    const _this$props6 = this.props,
-          renderLabel = _this$props6.renderLabel,
-          inputValue = _this$props6.inputValue,
-          placeholder = _this$props6.placeholder,
-          isRequired = _this$props6.isRequired,
-          shouldNotWrap = _this$props6.shouldNotWrap,
-          size = _this$props6.size,
-          isInline = _this$props6.isInline,
-          width = _this$props6.width,
-          htmlSize = _this$props6.htmlSize,
-          messages = _this$props6.messages,
-          renderBeforeInput = _this$props6.renderBeforeInput,
-          renderAfterInput = _this$props6.renderAfterInput,
-          onFocus = _this$props6.onFocus,
-          onBlur = _this$props6.onBlur,
-          onInputChange = _this$props6.onInputChange,
-          onRequestHideOptions = _this$props6.onRequestHideOptions,
-          rest = (0, _objectWithoutProperties2.default)(_this$props6, _excluded2);
+    const _this$props8 = this.props,
+          renderLabel = _this$props8.renderLabel,
+          inputValue = _this$props8.inputValue,
+          placeholder = _this$props8.placeholder,
+          isRequired = _this$props8.isRequired,
+          shouldNotWrap = _this$props8.shouldNotWrap,
+          size = _this$props8.size,
+          isInline = _this$props8.isInline,
+          width = _this$props8.width,
+          htmlSize = _this$props8.htmlSize,
+          messages = _this$props8.messages,
+          renderBeforeInput = _this$props8.renderBeforeInput,
+          renderAfterInput = _this$props8.renderAfterInput,
+          onFocus = _this$props8.onFocus,
+          onBlur = _this$props8.onBlur,
+          onInputChange = _this$props8.onInputChange,
+          onRequestHideOptions = _this$props8.onRequestHideOptions,
+          rest = (0, _objectWithoutProperties2.default)(_this$props8, _excluded2);
     const interaction = this.interaction;
     const passthroughProps = (0, _omitProps.omitProps)(rest, Select.allowedProps);
 
@@ -475,14 +492,14 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     const overrideProps = !isEditable ? {
       role: 'button',
       title: inputValue,
-      'aria-autocomplete': null
+      'aria-autocomplete': void 0
     } : {}; // backdoor to autocomplete attr to work around chrome autofill issues
 
     if (passthroughProps['autoComplete']) {
       overrideProps.autoComplete = passthroughProps['autoComplete'];
     }
 
-    return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, getInputProps({
+    const inputProps = {
       id: this.id,
       renderLabel,
       placeholder,
@@ -500,21 +517,26 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       display: isInline ? 'inline-block' : 'block',
       renderBeforeInput,
       renderAfterInput: renderAfterInput || this.renderIcon(),
-      onChange: onInputChange,
+      // If `inputValue` is provided, we need to pass a default onChange handler,
+      // because TextInput `value` is a controlled prop,
+      // and onChange is not required for Select
+      // (before it was handled by TextInput's defaultProp)
+      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : void 0,
       onFocus,
       onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, onRequestHideOptions),
       ...overrideProps
-    })));
+    };
+    return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, triggerProps, getInputProps(inputProps)));
   }
 
   render() {
-    const _this$props7 = this.props,
-          constrain = _this$props7.constrain,
-          placement = _this$props7.placement,
-          mountNode = _this$props7.mountNode,
-          assistiveText = _this$props7.assistiveText,
-          isShowingOptions = _this$props7.isShowingOptions,
-          styles = _this$props7.styles; // clear temporary option store
+    const _this$props9 = this.props,
+          constrain = _this$props9.constrain,
+          placement = _this$props9.placement,
+          mountNode = _this$props9.mountNode,
+          assistiveText = _this$props9.assistiveText,
+          isShowingOptions = _this$props9.isShowingOptions,
+          styles = _this$props9.styles; // clear temporary option store
 
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -522,7 +544,7 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     return (0, _emotion.jsx)(_Selectable.Selectable, Object.assign({
       highlightedOptionId: highlightedOptionId,
       isShowingOptions: isShowingOptions,
-      selectedOptionId: selectedOptionId ? selectedOptionId : null
+      selectedOptionId: selectedOptionId
     }, this.getEventHandlers()), _ref3 => {
       let getRootProps = _ref3.getRootProps,
           getInputProps = _ref3.getInputProps,
@@ -558,7 +580,6 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   inputValue: '',
   isShowingOptions: false,
   size: 'medium',
-  placeholder: null,
   // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
   interaction: void 0,
   isRequired: false,
@@ -566,17 +587,6 @@ let Select = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
   visibleOptionsCount: 8,
   placement: 'bottom stretch',
   constrain: 'window',
-  onFocus: event => {},
-  onBlur: event => {},
-  onRequestShowOptions: event => {},
-  onRequestHideOptions: event => {},
-  onRequestHighlightOption: (event, data) => {},
-  onRequestSelectOption: (event, data) => {},
-  inputRef: node => {},
-  listRef: node => {},
-  renderBeforeInput: null,
-  renderAfterInput: null,
-  children: null,
   shouldNotWrap: false
 }, _class2.Option = _Option.Option, _class2.Group = _Group.Group, _temp)) || _class) || _class);
 exports.Select = Select;

package/lib/Select/props.js

@@ -43,176 +43,36 @@ var _Option = require("./Option");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The form field label.
-   */
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * The value to display in the text input.
-   */
   inputValue: _propTypes.default.string,
-
-  /**
-   * Whether or not to show the options list.
-   */
-  isShowingOptions: _propTypes.default.bool,
-
-  /**
-   * The id of the text input. One is generated if not supplied.
-   */
   id: _propTypes.default.string,
-
-  /**
-   * The size of the text input.
-   */
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * Additional helpful text to provide to screen readers about the operation
-   * of the component.
-   */
   assistiveText: _propTypes.default.string,
-
-  /**
-   * Html placeholder text to display when the input has no value. This should
-   * be hint text, not a label replacement.
-   */
   placeholder: _propTypes.default.string,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
-   */
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * Whether or not the text input is required.
-   */
   isRequired: _propTypes.default.bool,
-
-  /**
-   * Whether the input is rendered inline with other elements or if it
-   * is rendered as a block level element.
-   */
   isInline: _propTypes.default.bool,
-
-  /**
-   * The width of the text input.
-   */
   width: _propTypes.default.string,
-
-  /**
-   * The width of the text input, in characters, if a width is not explicitly
-   * provided via the `width` prop. Only applicable if `isInline={true}`.
-   */
-  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.
-   */
+  htmlSize: _propTypes.default.number,
   optionsMaxWidth: _propTypes.default.string,
-
-  /**
-   * The number of options that should be visible before having to scroll.
-   */
   visibleOptionsCount: _propTypes.default.number,
-
-  /**
-   * Displays messages and validation for the input. It should be an object
-   * with the following shape:
-   * `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   * }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * The placement of the options list.
-   */
   placement: _PositionPropTypes.PositionPropTypes.placement,
-
-  /**
-   * The parent in which to constrain the placement.
-   */
   constrain: _PositionPropTypes.PositionPropTypes.constrain,
-
-  /**
-   * An element or a function returning an element to use mount the options
-   * list to in the DOM (defaults to `document.body`)
-   */
   mountNode: _PositionPropTypes.PositionPropTypes.mountNode,
-
-  /**
-   * Callback fired when text input receives focus.
-   */
   onFocus: _propTypes.default.func,
-
-  /**
-   * Callback fired when text input loses focus.
-   */
   onBlur: _propTypes.default.func,
-
-  /**
-   * Callback fired when text input value changes.
-   */
   onInputChange: _propTypes.default.func,
-
-  /**
-   * Callback fired requesting that the options list be shown.
-   */
+  isShowingOptions: _propTypes.default.bool,
   onRequestShowOptions: _propTypes.default.func,
-
-  /**
-   * Callback fired requesting that the options list be hidden.
-   */
   onRequestHideOptions: _propTypes.default.func,
-
-  /**
-   * Callback fired requesting a particular option be highlighted.
-   */
   onRequestHighlightOption: _propTypes.default.func,
-
-  /**
-   * Callback fired requesting a particular option be selected.
-   */
   onRequestSelectOption: _propTypes.default.func,
-
-  /**
-   * A ref to the html `input` element.
-   */
   inputRef: _propTypes.default.func,
-
-  /**
-   * A ref to the html `ul` element.
-   */
   listRef: _propTypes.default.func,
-
-  /**
-   * Content to display before the text input. This will commonly be an icon or
-   * tags to show multiple selections.
-   */
   renderBeforeInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Content to display after the text input. This content will replace the
-   * default arrow icons.
-   */
   renderAfterInput: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
-  /**
-   * Children of type `<Select.Option />` or `<Select.Group />`.
-   */
   children: _Children.Children.oneOf([_Group.Group, _Option.Option]),
-
-  /**
-   * Prevents the default behavior of wrapping the input and rendered content
-   * when available space is exceeded.
-   */
   shouldNotWrap: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "8.13.1-snapshot.3+0f8012d6b",
+  "version": "8.13.1-snapshot.35+2cd107eb7",
   "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.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-themes": "8.13.1-snapshot.3+0f8012d6b"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-test-locator": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-themes": "8.13.1-snapshot.35+2cd107eb7"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/shared-types": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-form-field": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-icons": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-options": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-popover": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-position": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-selectable": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-testable": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-text-input": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-utils": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/ui-view": "8.13.1-snapshot.3+0f8012d6b",
-    "@instructure/uid": "8.13.1-snapshot.3+0f8012d6b",
+    "@instructure/emotion": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/shared-types": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-dom-utils": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-form-field": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-icons": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-options": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-popover": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-position": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-prop-types": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-selectable": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-testable": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-text-input": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-utils": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/ui-view": "8.13.1-snapshot.35+2cd107eb7",
+    "@instructure/uid": "8.13.1-snapshot.35+2cd107eb7",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -57,5 +57,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "0f8012d6b551666164bda8144c3e8358fc57c7c7"
+  "gitHead": "2cd107eb767bbf3092d6282b57d3354eb413676a"
 }