@instructure/ui-select 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/Select/v1/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Select = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
 var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
@@ -22,7 +21,7 @@ var _v11_2 = require("@instructure/ui-popover/v11_6");
 var _v11_3 = require("@instructure/ui-text-input/v11_6");
 var _v11_4 = require("@instructure/ui-options/v11_6");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
-var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
+var _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -30,10 +29,7 @@ var _Group = require("./Group");
 var _Option = require("./Option");
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-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, _IconArrowOpenUpLine, _IconArrowOpenDownLin;
+var _dec, _dec2, _class;
 /*
  * The MIT License (MIT)
  *
@@ -62,8 +58,10 @@ var _dec, _dec2, _class, _Select, _Options$Separator, _Options$Separator2, _Icon
 // 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__*/(0, _react.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"
     (0, _jsxRuntime.jsx)(_v11_4.Options.Item, {
@@ -88,58 +86,50 @@ category: components
 tags: autocomplete, typeahead, combobox, dropdown, search, form
 ---
 **/
-let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Select = class Select extends _react.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 = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Select extends _react.Component {
+  static displayName = "Select";
+  static componentId = 'Select';
+  SCROLL_TOLERANCE = 0.5;
+  static allowedProps = _props.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.Option;
+  static Group = _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();
   }
@@ -159,7 +149,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     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 (0, _getInteraction.getInteraction)({
@@ -208,10 +198,31 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       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)}"]`);
@@ -228,22 +239,25 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     }
   }
   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
@@ -251,7 +265,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         }
       },
       onRequestHideOptions: event => {
-        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
+        onRequestHideOptions?.(event);
       },
       onRequestHighlightOption: (event, {
         id,
@@ -260,7 +274,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         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
@@ -268,7 +282,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           } 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) {
@@ -287,7 +301,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       }) => {
         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
           });
         }
@@ -295,19 +309,21 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     } : {};
   }
   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,
@@ -354,20 +370,23 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   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 = (0, _objectWithoutProperties2.default)(_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 = (0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {})));
+      groupChildren.push((0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {}));
     }
     // create a sublist as a group
     // a wrapping listitem will be created by Options
@@ -386,20 +405,23 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     }));
     // add a separator below
     if (!isLastChild) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {})));
+      groupChildren.push((0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {}));
     }
     return groupChildren;
   }
   renderList(data) {
-    const getListProps = data.getListProps,
-      getOptionProps = data.getOptionProps,
-      getDisabledOptionProps = data.getDisabledOptionProps;
-    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;
+    const {
+      getListProps,
+      getOptionProps,
+      getDisabledOptionProps
+    } = data;
+    const {
+      isShowingOptions,
+      optionsMaxWidth,
+      optionsMaxHeight,
+      visibleOptionsCount,
+      children
+    } = this.props;
     let lastWasGroup = false;
     const viewProps = isShowingOptions ? {
       display: 'block',
@@ -450,16 +472,17 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   renderIcon() {
-    const _this$props7 = this.props,
-      styles = _this$props7.styles,
-      isShowingOptions = _this$props7.isShowingOptions;
+    const {
+      styles,
+      isShowingOptions
+    } = this.props;
     return (0, _jsxRuntime.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.icon,
-      children: isShowingOptions ? _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {
+      css: styles?.icon,
+      children: isShowingOptions ? (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine.IconArrowOpenUpLine, {
         inline: false
-      })) : _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {
+      }) : (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {
         inline: false
-      }))
+      })
     });
   }
   renderContentBeforeOrAfterInput(position) {
@@ -505,50 +528,58 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     return defaultReturn;
   }
   handleRenderBeforeInput() {
-    const _this$props8 = this.props,
-      renderBeforeInput = _this$props8.renderBeforeInput,
-      inputValue = _this$props8.inputValue,
-      isOptionContentAppliedToInput = _this$props8.isOptionContentAppliedToInput;
+    const {
+      renderBeforeInput,
+      inputValue,
+      isOptionContentAppliedToInput
+    } = this.props;
     return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
     );
   }
   handleRenderAfterInput() {
-    const _this$props9 = this.props,
-      renderAfterInput = _this$props9.renderAfterInput,
-      inputValue = _this$props9.inputValue,
-      isOptionContentAppliedToInput = _this$props9.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$props0 = this.props,
-      renderLabel = _this$props0.renderLabel,
-      inputValue = _this$props0.inputValue,
-      placeholder = _this$props0.placeholder,
-      isRequired = _this$props0.isRequired,
-      shouldNotWrap = _this$props0.shouldNotWrap,
-      size = _this$props0.size,
-      isInline = _this$props0.isInline,
-      width = _this$props0.width,
-      htmlSize = _this$props0.htmlSize,
-      messages = _this$props0.messages,
-      renderBeforeInput = _this$props0.renderBeforeInput,
-      renderAfterInput = _this$props0.renderAfterInput,
-      onFocus = _this$props0.onFocus,
-      onBlur = _this$props0.onBlur,
-      onInputChange = _this$props0.onInputChange,
-      onRequestHideOptions = _this$props0.onRequestHideOptions,
-      layout = _this$props0.layout,
-      rest = (0, _objectWithoutProperties2.default)(_this$props0, _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 = (0, _omitProps.omitProps)(rest, Select.allowedProps);
-    const _getTriggerProps = getTriggerProps({
-        ...passthroughProps
-      }),
-      ref = _getTriggerProps.ref,
-      triggerProps = (0, _objectWithoutProperties2.default)(_getTriggerProps, _excluded3);
+    const {
+      ref,
+      ...triggerProps
+    } = getTriggerProps({
+      ...passthroughProps
+    });
     const isEditable = typeof onInputChange !== 'undefined';
 
     // props to ensure screen readers treat uneditable selects as accessible
@@ -563,7 +594,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       // 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'
@@ -594,14 +625,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       // 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 ? (0, _jsxRuntime.jsx)("span", {
+      renderAfterInput: utils.isAndroidOrIOS() && renderAfterInput !== undefined ? (0, _jsxRuntime.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
@@ -614,13 +645,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     });
   }
   render() {
-    const _this$props1 = this.props,
-      constrain = _this$props1.constrain,
-      placement = _this$props1.placement,
-      mountNode = _this$props1.mountNode,
-      assistiveText = _this$props1.assistiveText,
-      isShowingOptions = _this$props1.isShowingOptions,
-      styles = _this$props1.styles;
+    const {
+      constrain,
+      placement,
+      mountNode,
+      assistiveText,
+      isShowingOptions,
+      styles
+    } = this.props;
     // clear temporary option store
     this._optionIds = [];
     const highlightedOptionId = this.highlightedOptionId;
@@ -640,7 +672,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
         getDescriptionProps
       }) => (0, _jsxRuntime.jsxs)("span", {
         ...getRootProps({
-          css: styles === null || styles === void 0 ? void 0 : styles.select
+          css: styles?.select
         }),
         ref: el => {
           this.ref = el;
@@ -651,7 +683,7 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           getTriggerProps
         }), (0, _jsxRuntime.jsx)("span", {
           ...getDescriptionProps(),
-          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          css: styles?.assistiveText,
           children: assistiveText
         }), (0, _jsxRuntime.jsx)(_v11_2.Popover, {
           constrain: constrain,
@@ -660,12 +692,12 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
           // 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,
@@ -675,19 +707,5 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       })
     });
   }
-}, _Select.displayName = "Select", _Select.componentId = 'Select', _Select.allowedProps = _props.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.Option, _Select.Group = _Group.Group, _Select)) || _class) || _class);
+}) || _class) || _class);
 var _default = exports.default = Select;

package/lib/Select/v1/styles.js

@@ -36,7 +36,9 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const size = props.size;
+  const {
+    size
+  } = props;
   const iconSizeVariants = {
     small: {
       fontSize: componentTheme.smallIconSize

package/lib/Select/v1/theme.js

@@ -34,18 +34,19 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2;
-  const colors = theme.colors,
-    typography = theme.typography;
+  const {
+    colors,
+    typography
+  } = theme;
   const componentVariables = {
-    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
-    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
-    smallIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
-    mediumIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
-    largeIconSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
-    color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
+    fontSize: typography?.fontSizeMedium,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    smallIconSize: typography?.fontSizeXSmall,
+    mediumIconSize: typography?.fontSizeSmall,
+    largeIconSize: typography?.fontSizeMedium,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
     popoverBorderWidth: 'small'
   };
   return {

package/lib/Select/v2/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/v2/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;