@instructure/ui-select 11.7.3-snapshot-25 → 11.7.3-snapshot-27

package/es/Select/v2/Group/index.js

@@ -32,6 +32,11 @@ id: Select.Group
 @module Group
 **/
 class Group extends Component {
+  static displayName = "Group";
+  static componentId = 'Select.Group';
+  static allowedProps = allowedProps;
+  static defaultProps = {};
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Group children
@@ -39,9 +44,5 @@ class Group extends Component {
     return null;
   }
 }
-Group.displayName = "Group";
-Group.componentId = 'Select.Group';
-Group.allowedProps = allowedProps;
-Group.defaultProps = {};
 export default Group;
 export { Group };

package/es/Select/v2/Option/index.js

@@ -32,6 +32,15 @@ id: Select.Option
 @module Option
 **/
 class Option extends Component {
+  static displayName = "Option";
+  static componentId = 'Select.Option';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  };
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Option children
@@ -39,13 +48,5 @@ class Option extends Component {
     return null;
   }
 }
-Option.displayName = "Option";
-Option.componentId = 'Select.Option';
-Option.allowedProps = allowedProps;
-Option.defaultProps = {
-  isHighlighted: false,
-  isSelected: false,
-  isDisabled: false
-};
 export default Option;
 export { Option };

package/es/Select/v2/index.js

@@ -1,8 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "renderLabel", "children"],
-  _excluded2 = ["renderLabel", "inputValue", "placeholder", "isRequired", "shouldNotWrap", "size", "isInline", "width", "htmlSize", "messages", "renderBeforeInput", "renderAfterInput", "onFocus", "onBlur", "onInputChange", "onRequestHideOptions", "layout"],
-  _excluded3 = ["ref"];
-var _dec, _dec2, _class, _Select, _Options$Separator, _Options$Separator2;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -54,8 +50,10 @@ const selectSizeToIconSize = {
 // because the Select component is re-rendered on every prop change of the <Select.Option>
 // and with a large amount of options, this can cause a lot of unnecessary re-renders.
 const MemoedOption = /*#__PURE__*/memo(function Opt(props) {
-  const optionsItemProps = props.optionsItemProps,
-    children = props.children;
+  const {
+    optionsItemProps,
+    children
+  } = props;
   return (
     // The main <Options> that renders this is always an "ul"
     _jsx(Options.Item, {
@@ -80,58 +78,50 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = (_Select = class Select extends Component {
-  constructor(...args) {
-    super(...args);
-    this.SCROLL_TOLERANCE = 0.5;
-    this.state = {
-      hasInputRef: false
-    };
-    this.ref = null;
-    this._input = null;
-    this._defaultId = this.props.deterministicId();
-    this._inputContainer = null;
-    this._listView = null;
-    // temporarily stores actionable options
-    this._optionIds = [];
-    // best guess for first calculation of list height
-    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({
-          hasInputRef: true
-        });
-      }
-      this._input = 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 => {
-      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;
-      }
-    };
-    this.handleInputContainerRef = node => {
-      this._inputContainer = node;
-    };
-  }
+let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _dec(_class = _dec2(_class = class Select extends Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  SCROLL_TOLERANCE = 0.5;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    inputValue: '',
+    isShowingOptions: false,
+    size: 'medium',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    isRequired: false,
+    isInline: false,
+    visibleOptionsCount: 8,
+    placement: 'bottom stretch',
+    constrain: 'window',
+    shouldNotWrap: false,
+    scrollToHighlightedOption: true,
+    isOptionContentAppliedToInput: false
+  };
+  static Option = Option;
+  static Group = Group;
   componentDidMount() {
-    var _this$props$makeStyle, _this$props3;
-    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
+    this.props.makeStyles?.();
   }
   componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props4;
-    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
+    this.props.makeStyles?.();
     if (this.props.scrollToHighlightedOption) {
       // scroll option into view if needed
       requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
     }
   }
+  state = {
+    hasInputRef: false
+  };
+  ref = null;
+  _input = null;
+  _defaultId = this.props.deterministicId();
+  _inputContainer = null;
+  _listView = null;
+  // temporarily stores actionable options
+  _optionIds = [];
+  // best guess for first calculation of list height
+  _optionHeight = 36;
   focus() {
     this._input && this._input.focus();
   }
@@ -151,7 +141,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     return this.props.id || this._defaultId;
   }
   get width() {
-    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
+    return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
   }
   get interaction() {
     return getInteraction({
@@ -200,10 +190,31 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       return selectedOptionId[0];
     }
     if (selectedOptionId.length === 0) {
-      return void 0;
+      return undefined;
     }
     return selectedOptionId;
   }
+  handleInputRef = node => {
+    // ensures list is positioned with respect to input if list is open on mount
+    if (!this.state.hasInputRef) {
+      this.setState({
+        hasInputRef: true
+      });
+    }
+    this._input = node;
+    this.props.inputRef?.(node);
+  };
+  handleListRef = node => {
+    this.props.listRef?.(node);
+
+    // store option height to calculate list maxHeight
+    if (node && node.querySelector('[role="option"]')) {
+      this._optionHeight = node.querySelector('[role="option"]').offsetHeight;
+    }
+  };
+  handleInputContainerRef = node => {
+    this._inputContainer = node;
+  };
   scrollToOption(id) {
     if (!this._listView || !id) return;
     const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
@@ -220,22 +231,25 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     }
   }
   highlightOption(event, id) {
-    const onRequestHighlightOption = this.props.onRequestHighlightOption;
+    const {
+      onRequestHighlightOption
+    } = this.props;
     if (id) {
-      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : onRequestHighlightOption(event, {
+      onRequestHighlightOption?.(event, {
         id
       });
     }
   }
   getEventHandlers() {
-    const _this$props5 = this.props,
-      isShowingOptions = _this$props5.isShowingOptions,
-      onRequestShowOptions = _this$props5.onRequestShowOptions,
-      onRequestHideOptions = _this$props5.onRequestHideOptions,
-      onRequestSelectOption = _this$props5.onRequestSelectOption;
+    const {
+      isShowingOptions,
+      onRequestShowOptions,
+      onRequestHideOptions,
+      onRequestSelectOption
+    } = this.props;
     return this.interaction === 'enabled' ? {
       onRequestShowOptions: event => {
-        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        onRequestShowOptions?.(event);
         const selectedOptionId = this.selectedOptionId;
         if (selectedOptionId && !Array.isArray(selectedOptionId)) {
           // highlight selected option on show
@@ -243,7 +257,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
+        onRequestHideOptions?.(event);
       },
       onRequestHighlightOption: (event, {
         id,
@@ -252,7 +266,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
         if (!isShowingOptions) return;
         const highlightedOptionId = this.highlightedOptionId;
         // if id exists, use that
-        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : undefined;
         if (!highlightId) {
           if (!highlightedOptionId) {
             // nothing highlighted yet, highlight first option
@@ -260,7 +274,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
           } else {
             // find next id based on direction
             const index = this._optionIds.indexOf(highlightedOptionId);
-            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
+            highlightId = index > -1 ? this._optionIds[index + direction] : undefined;
           }
         }
         if (highlightId) {
@@ -279,7 +293,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       }) => {
         if (id && this._optionIds.indexOf(id) !== -1) {
           // only select if id exists as a valid option
-          onRequestSelectOption === null || onRequestSelectOption === void 0 ? void 0 : onRequestSelectOption(event, {
+          onRequestSelectOption?.(event, {
             id
           });
         }
@@ -287,19 +301,21 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     } : {};
   }
   renderOption(option, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _option$props = option.props,
-      id = _option$props.id,
-      isDisabled = _option$props.isDisabled,
-      isHighlighted = _option$props.isHighlighted,
-      isSelected = _option$props.isSelected,
-      renderBeforeLabel = _option$props.renderBeforeLabel,
-      renderAfterLabel = _option$props.renderAfterLabel,
-      children = _option$props.children;
+    const {
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      id,
+      isDisabled,
+      isHighlighted,
+      isSelected,
+      renderBeforeLabel,
+      renderAfterLabel,
+      children
+    } = option.props;
     const getRenderOptionLabel = renderOptionLabel => {
-      var _renderOptionLabel$pr;
-      return typeof renderOptionLabel === 'function' && !(renderOptionLabel !== null && renderOptionLabel !== void 0 && (_renderOptionLabel$pr = renderOptionLabel.prototype) !== null && _renderOptionLabel$pr !== void 0 && _renderOptionLabel$pr.isReactComponent) ? renderOptionLabel.bind(null, {
+      return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
         id,
         isDisabled,
         isSelected,
@@ -307,10 +323,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
         children
       }) : renderOptionLabel;
     };
-    const _this$props6 = this.props,
-      isOptionContentAppliedToInput = _this$props6.isOptionContentAppliedToInput,
-      _this$props6$size = _this$props6.size,
-      size = _this$props6$size === void 0 ? 'medium' : _this$props6$size;
+    const {
+      isOptionContentAppliedToInput,
+      size = 'medium'
+    } = this.props;
     const iconSize = selectSizeToIconSize[size];
     const checkIcon = isSelected && !isOptionContentAppliedToInput ? _jsx(CheckInstUIIcon, {
       inline: false,
@@ -326,7 +342,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       }),
       // Options.Item props
       renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
-      renderAfterLabel: checkIcon !== null && checkIcon !== void 0 ? checkIcon : getRenderOptionLabel(renderAfterLabel)
+      renderAfterLabel: checkIcon ?? getRenderOptionLabel(renderAfterLabel)
     };
     // should option be treated as highlighted or selected
     if (isSelected && isHighlighted) {
@@ -356,20 +372,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     });
   }
   renderGroup(group, data) {
-    const getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps,
-      isFirstChild = data.isFirstChild,
-      isLastChild = data.isLastChild,
-      afterGroup = data.afterGroup;
-    const _group$props = group.props,
-      id = _group$props.id,
-      renderLabel = _group$props.renderLabel,
-      children = _group$props.children,
-      rest = _objectWithoutProperties(_group$props, _excluded);
+    const {
+      getOptionProps,
+      getDisabledOptionProps,
+      isFirstChild,
+      isLastChild,
+      afterGroup
+    } = data;
+    const {
+      id,
+      renderLabel,
+      children,
+      ...rest
+    } = group.props;
     const groupChildren = [];
     // add a separator above
     if (!isFirstChild && !afterGroup) {
-      groupChildren.push(_Options$Separator || (_Options$Separator = _jsx(Options.Separator, {})));
+      groupChildren.push(_jsx(Options.Separator, {}));
     }
     // create a sublist as a group
     // a wrapping listitem will be created by Options
@@ -388,20 +407,23 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     }));
     // add a separator below
     if (!isLastChild) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = _jsx(Options.Separator, {})));
+      groupChildren.push(_jsx(Options.Separator, {}));
     }
     return groupChildren;
   }
   renderList(data) {
-    const getListProps = data.getListProps,
-      getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    const _this$props7 = this.props,
-      isShowingOptions = _this$props7.isShowingOptions,
-      optionsMaxWidth = _this$props7.optionsMaxWidth,
-      optionsMaxHeight = _this$props7.optionsMaxHeight,
-      visibleOptionsCount = _this$props7.visibleOptionsCount,
-      children = _this$props7.children;
+    const {
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      isShowingOptions,
+      optionsMaxWidth,
+      optionsMaxHeight,
+      visibleOptionsCount,
+      children
+    } = this.props;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -452,10 +474,10 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     });
   }
   renderIcon() {
-    const _this$props8 = this.props,
-      isShowingOptions = _this$props8.isShowingOptions,
-      _this$props8$size = _this$props8.size,
-      size = _this$props8$size === void 0 ? 'medium' : _this$props8$size;
+    const {
+      isShowingOptions,
+      size = 'medium'
+    } = this.props;
     const iconSize = selectSizeToIconSize[size];
     return _jsx("span", {
       children: isShowingOptions ? _jsx(ChevronUpInstUIIcon, {
@@ -512,50 +534,58 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     return defaultReturn;
   }
   handleRenderBeforeInput() {
-    const _this$props9 = this.props,
-      renderBeforeInput = _this$props9.renderBeforeInput,
-      inputValue = _this$props9.inputValue,
-      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    const {
+      renderBeforeInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
     );
   }
   handleRenderAfterInput() {
-    const _this$props0 = this.props,
-      renderAfterInput = _this$props0.renderAfterInput,
-      inputValue = _this$props0.inputValue,
-      isOptionContentAppliedToInput = _this$props0.isOptionContentAppliedToInput;
+    const {
+      renderAfterInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
     );
   }
   renderInput(data) {
-    const getInputProps = data.getInputProps,
-      getTriggerProps = data.getTriggerProps;
-    const _this$props1 = this.props,
-      renderLabel = _this$props1.renderLabel,
-      inputValue = _this$props1.inputValue,
-      placeholder = _this$props1.placeholder,
-      isRequired = _this$props1.isRequired,
-      shouldNotWrap = _this$props1.shouldNotWrap,
-      size = _this$props1.size,
-      isInline = _this$props1.isInline,
-      width = _this$props1.width,
-      htmlSize = _this$props1.htmlSize,
-      messages = _this$props1.messages,
-      renderBeforeInput = _this$props1.renderBeforeInput,
-      renderAfterInput = _this$props1.renderAfterInput,
-      onFocus = _this$props1.onFocus,
-      onBlur = _this$props1.onBlur,
-      onInputChange = _this$props1.onInputChange,
-      onRequestHideOptions = _this$props1.onRequestHideOptions,
-      layout = _this$props1.layout,
-      rest = _objectWithoutProperties(_this$props1, _excluded2);
-    const interaction = this.interaction;
+    const {
+      getInputProps,
+      getTriggerProps
+    } = data;
+    const {
+      renderLabel,
+      inputValue,
+      placeholder,
+      isRequired,
+      shouldNotWrap,
+      size,
+      isInline,
+      width,
+      htmlSize,
+      messages,
+      renderBeforeInput,
+      renderAfterInput,
+      onFocus,
+      onBlur,
+      onInputChange,
+      onRequestHideOptions,
+      layout,
+      ...rest
+    } = this.props;
+    const {
+      interaction
+    } = this;
     const passthroughProps = omitProps(rest, Select.allowedProps);
-    const _getTriggerProps = getTriggerProps({
-        ...passthroughProps
-      }),
-      ref = _getTriggerProps.ref,
-      triggerProps = _objectWithoutProperties(_getTriggerProps, _excluded3);
+    const {
+      ref,
+      ...triggerProps
+    } = getTriggerProps({
+      ...passthroughProps
+    });
     const isEditable = typeof onInputChange !== 'undefined';
 
     // props to ensure screen readers treat uneditable selects as accessible
@@ -570,7 +600,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
       role: utils.isSafari() || utils.isAndroidOrIOS() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
       title: inputValue,
-      'aria-autocomplete': void 0,
+      'aria-autocomplete': undefined,
       'aria-readonly': true
     } : interaction === 'disabled' && utils.isChromium() ? {
       role: 'button'
@@ -601,14 +631,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       // On iOS VoiceOver, if there is a custom element instead of the changing up and down arrow button
       // the listbox closes on a swipe, so a DOM change is enforced by the key change
       // that seems to inform VoiceOver to behave the correct way
-      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== void 0 ? _jsx("span", {
+      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== undefined ? _jsx("span", {
         children: this.handleRenderAfterInput()
       }, this.props.isShowingOptions ? 'open' : 'closed') : this.handleRenderAfterInput(),
       // 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,
+      onChange: typeof onInputChange === 'function' ? onInputChange : inputValue ? () => {} : undefined,
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
       ...overrideProps
@@ -626,13 +656,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
     });
   }
   render() {
-    const _this$props10 = this.props,
-      constrain = _this$props10.constrain,
-      placement = _this$props10.placement,
-      mountNode = _this$props10.mountNode,
-      assistiveText = _this$props10.assistiveText,
-      isShowingOptions = _this$props10.isShowingOptions,
-      styles = _this$props10.styles;
+    const {
+      constrain,
+      placement,
+      mountNode,
+      assistiveText,
+      isShowingOptions,
+      styles
+    } = this.props;
     // clear temporary option store
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -661,7 +692,7 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
           getTriggerProps
         }), _jsx("span", {
           ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          css: styles?.assistiveText,
           children: assistiveText
         }), _jsx(Popover, {
           constrain: constrain,
@@ -670,12 +701,12 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
           // in order to be able to navigate through the list items with a swipe.
           // The swipe would result in closing the listbox if mounted elsewhere.
           ,
-          mountNode: mountNode !== void 0 ? mountNode : utils.isAndroidOrIOS() ? this.ref : void 0,
+          mountNode: mountNode !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
           positionTarget: this._inputContainer,
           isShowingContent: isShowingOptions,
           shouldReturnFocus: false,
           withArrow: false,
-          borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth,
+          borderWidth: styles?.popoverBorderWidth,
           children: this.renderList({
             getListProps,
             getOptionProps,
@@ -685,20 +716,6 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle), _d
       })
     });
   }
-}, _Select.displayName = "Select", _Select.componentId = 'Select', _Select.allowedProps = allowedProps, _Select.defaultProps = {
-  inputValue: '',
-  isShowingOptions: false,
-  size: 'medium',
-  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-  interaction: void 0,
-  isRequired: false,
-  isInline: false,
-  visibleOptionsCount: 8,
-  placement: 'bottom stretch',
-  constrain: 'window',
-  shouldNotWrap: false,
-  scrollToHighlightedOption: true,
-  isOptionContentAppliedToInput: false
-}, _Select.Option = Option, _Select.Group = Group, _Select)) || _class) || _class);
+}) || _class) || _class);
 export default Select;
 export { Select };

package/lib/Select/v1/Group/index.js

@@ -38,6 +38,11 @@ id: Select.Group
 @module Group
 **/
 class Group extends _react.Component {
+  static displayName = "Group";
+  static componentId = 'Select.Group';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {};
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Group children
@@ -46,8 +51,4 @@ class Group extends _react.Component {
   }
 }
 exports.Group = Group;
-Group.displayName = "Group";
-Group.componentId = 'Select.Group';
-Group.allowedProps = _props.allowedProps;
-Group.defaultProps = {};
 var _default = exports.default = Group;

package/lib/Select/v1/Option/index.js

@@ -38,6 +38,15 @@ id: Select.Option
 @module Option
 **/
 class Option extends _react.Component {
+  static displayName = "Option";
+  static componentId = 'Select.Option';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    isHighlighted: false,
+    isSelected: false,
+    isDisabled: false
+  };
+
   /* istanbul ignore next */
   render() {
     // this component is only used for prop validation. Select.Option children
@@ -46,12 +55,4 @@ class Option extends _react.Component {
   }
 }
 exports.Option = Option;
-Option.displayName = "Option";
-Option.componentId = 'Select.Option';
-Option.allowedProps = _props.allowedProps;
-Option.defaultProps = {
-  isHighlighted: false,
-  isSelected: false,
-  isDisabled: false
-};
 var _default = exports.default = Option;