@instructure/ui-select 11.7.2-snapshot-47 → 11.7.2-snapshot-49

package/es/Select/v2/index.js

@@ -0,0 +1,704 @@
+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;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component, memo } from 'react';
+import * as utils from '@instructure/ui-utils';
+import { combineDataCid } from '@instructure/ui-utils';
+import { matchComponentTypes, omitProps, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
+import { getBoundingClientRect, isActiveElement } from '@instructure/ui-dom-utils';
+import { View } from '@instructure/ui-view/latest';
+import { Selectable } from '@instructure/ui-selectable';
+import { Popover } from '@instructure/ui-popover/latest';
+import { TextInput } from '@instructure/ui-text-input/latest';
+import { Options } from '@instructure/ui-options/latest';
+import { ChevronDownInstUIIcon, ChevronUpInstUIIcon, CheckInstUIIcon } from '@instructure/ui-icons';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { Group } from "./Group/index.js";
+import { Option } from "./Option/index.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+const selectSizeToIconSize = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg'
+};
+// This memoed Option component is used to prevent unnecessary re-renders of
+// Options.Item when the Select component is re-rendered. This is necessary
+// 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;
+  return (
+    // The main <Options> that renders this is always an "ul"
+    _jsx(Options.Item, {
+      as: "li",
+      ...optionsItemProps,
+      children: children
+    })
+  );
+},
+// This is a custom equality function that checks if the props of the
+// <Select.Option> have changed. If they haven't, then the Options.Item
+// doesn't need to be re-rendered.
+(prevProps, nextProps) => {
+  return prevProps.selectOption.props.isHighlighted === nextProps.selectOption.props.isHighlighted && prevProps.selectOption.props.isSelected === nextProps.selectOption.props.isSelected && prevProps.selectOption.props.isDisabled === nextProps.selectOption.props.isDisabled && prevProps.selectOption.props.children === nextProps.selectOption.props.children && prevProps.selectOption.props.id === nextProps.selectOption.props.id && prevProps.selectOption.props.renderBeforeLabel === nextProps.selectOption.props.renderBeforeLabel && prevProps.selectOption.props.renderAfterLabel === nextProps.selectOption.props.renderAfterLabel && prevProps.children === nextProps.children;
+});
+// This is needed so the propTypes in <Options> check are correct
+MemoedOption.displayName = 'Item';
+
+/**
+---
+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;
+    };
+  }
+  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);
+  }
+  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);
+    if (this.props.scrollToHighlightedOption) {
+      // scroll option into view if needed
+      requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId));
+    }
+  }
+  focus() {
+    this._input && this._input.focus();
+  }
+  blur() {
+    this._input && this._input.blur();
+  }
+  get childrenArray() {
+    return Children.toArray(this.props.children);
+  }
+  getGroupChildrenArray(group) {
+    return Children.toArray(group.props.children);
+  }
+  get focused() {
+    return this._input ? isActiveElement(this._input) : false;
+  }
+  get id() {
+    return this.props.id || this._defaultId;
+  }
+  get width() {
+    return this._inputContainer ? this._inputContainer.offsetWidth : void 0;
+  }
+  get interaction() {
+    return getInteraction({
+      props: this.props
+    });
+  }
+  get highlightedOptionId() {
+    let highlightedOptionId;
+    this.childrenArray.forEach(child => {
+      if (matchComponentTypes(child, [Group])) {
+        // group found
+        this.getGroupChildrenArray(child).forEach(option => {
+          // check options in group
+          if (option.props.isHighlighted) {
+            highlightedOptionId = option.props.id;
+          }
+        });
+      } else {
+        // ungrouped option found
+        if (child.props.isHighlighted) {
+          highlightedOptionId = child.props.id;
+        }
+      }
+    });
+    return highlightedOptionId;
+  }
+  get selectedOptionId() {
+    const selectedOptionId = [];
+    this.childrenArray.forEach(child => {
+      if (matchComponentTypes(child, [Group])) {
+        // group found
+        this.getGroupChildrenArray(child).forEach(option => {
+          // check options in group
+          if (option.props.isSelected) {
+            selectedOptionId.push(option.props.id);
+          }
+        });
+      } else {
+        // ungrouped option found
+        if (child.props.isSelected) {
+          selectedOptionId.push(child.props.id);
+        }
+      }
+    });
+    if (selectedOptionId.length === 1) {
+      return selectedOptionId[0];
+    }
+    if (selectedOptionId.length === 0) {
+      return void 0;
+    }
+    return selectedOptionId;
+  }
+  scrollToOption(id) {
+    if (!this._listView || !id) return;
+    const option = this._listView.querySelector(`[id="${CSS.escape(id)}"]`);
+    if (!option) return;
+    const listItem = option.parentNode;
+    const parentTop = getBoundingClientRect(this._listView).top;
+    const elemTop = getBoundingClientRect(listItem).top;
+    const parentBottom = parentTop + this._listView.clientHeight;
+    const elemBottom = elemTop + (listItem ? listItem.clientHeight : 0);
+    if (elemBottom > parentBottom) {
+      this._listView.scrollTop += elemBottom - parentBottom;
+    } else if (elemTop < parentTop) {
+      this._listView.scrollTop -= parentTop - elemTop;
+    }
+  }
+  highlightOption(event, id) {
+    const onRequestHighlightOption = this.props.onRequestHighlightOption;
+    if (id) {
+      onRequestHighlightOption === null || onRequestHighlightOption === void 0 ? void 0 : 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;
+    return this.interaction === 'enabled' ? {
+      onRequestShowOptions: event => {
+        onRequestShowOptions === null || onRequestShowOptions === void 0 ? void 0 : onRequestShowOptions(event);
+        const selectedOptionId = this.selectedOptionId;
+        if (selectedOptionId && !Array.isArray(selectedOptionId)) {
+          // highlight selected option on show
+          this.highlightOption(event, selectedOptionId);
+        }
+      },
+      onRequestHideOptions: event => {
+        onRequestHideOptions === null || onRequestHideOptions === void 0 ? void 0 : onRequestHideOptions(event);
+      },
+      onRequestHighlightOption: (event, {
+        id,
+        direction
+      }) => {
+        if (!isShowingOptions) return;
+        const highlightedOptionId = this.highlightedOptionId;
+        // if id exists, use that
+        let highlightId = this._optionIds.indexOf(id) > -1 ? id : void 0;
+        if (!highlightId) {
+          if (!highlightedOptionId) {
+            // nothing highlighted yet, highlight first option
+            highlightId = this._optionIds[0];
+          } else {
+            // find next id based on direction
+            const index = this._optionIds.indexOf(highlightedOptionId);
+            highlightId = index > -1 ? this._optionIds[index + direction] : void 0;
+          }
+        }
+        if (highlightId) {
+          // only highlight if id exists as a valid option
+          this.highlightOption(event, highlightId);
+        }
+      },
+      onRequestHighlightFirstOption: event => {
+        this.highlightOption(event, this._optionIds[0]);
+      },
+      onRequestHighlightLastOption: event => {
+        this.highlightOption(event, this._optionIds[this._optionIds.length - 1]);
+      },
+      onRequestSelectOption: (event, {
+        id
+      }) => {
+        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, {
+            id
+          });
+        }
+      }
+    } : {};
+  }
+  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 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, {
+        id,
+        isDisabled,
+        isSelected,
+        isHighlighted,
+        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 iconSize = selectSizeToIconSize[size];
+    const checkIcon = isSelected && !isOptionContentAppliedToInput ? _jsx(CheckInstUIIcon, {
+      inline: false,
+      size: iconSize,
+      color: "inverseColor"
+    }) : null;
+    let optionProps = {
+      // passthrough props
+      ...omitProps(option.props, [...Option.allowedProps, ...Options.Item.allowedProps]),
+      // props from selectable
+      ...getOptionProps({
+        id
+      }),
+      // Options.Item props
+      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
+      renderAfterLabel: checkIcon !== null && checkIcon !== void 0 ? checkIcon : getRenderOptionLabel(renderAfterLabel)
+    };
+    // should option be treated as highlighted or selected
+    if (isSelected && isHighlighted) {
+      optionProps.variant = 'selected-highlighted';
+      optionProps.isSelected = true;
+    } else if (isSelected) {
+      optionProps.variant = 'selected';
+      optionProps.isSelected = true;
+    } else if (isHighlighted) {
+      optionProps.variant = 'highlighted';
+    }
+    // should option be treated as disabled
+    if (isDisabled) {
+      optionProps.variant = 'disabled';
+      optionProps = {
+        ...optionProps,
+        ...getDisabledOptionProps()
+      };
+    } else {
+      // track as valid option if not disabled
+      this._optionIds.push(id);
+    }
+    return _jsx(MemoedOption, {
+      optionsItemProps: optionProps,
+      selectOption: option,
+      children: children
+    });
+  }
+  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 groupChildren = [];
+    // add a separator above
+    if (!isFirstChild && !afterGroup) {
+      groupChildren.push(_Options$Separator || (_Options$Separator = _jsx(Options.Separator, {})));
+    }
+    // create a sublist as a group
+    // a wrapping listitem will be created by Options
+    groupChildren.push(_jsx(Options, {
+      id: id,
+      as: "ul",
+      role: "group",
+      renderLabel: renderLabel,
+      ...omitProps(rest, [...Options.allowedProps, ...Group.allowedProps]),
+      children: Children.map(children, child => {
+        return this.renderOption(child, {
+          getOptionProps,
+          getDisabledOptionProps
+        });
+      })
+    }));
+    // add a separator below
+    if (!isLastChild) {
+      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = _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;
+    let lastWasGroup = false;
+    const viewProps = isShowingOptions ? {
+      display: 'block',
+      overflowY: 'auto',
+      maxHeight: optionsMaxHeight || this._optionHeight * visibleOptionsCount - (
+      // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+      utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
+      maxWidth: optionsMaxWidth || this.width,
+      background: 'primary',
+      elementRef: node => this._listView = node,
+      borderRadius: 'inherit'
+    } : {
+      maxHeight: 0
+    };
+    return _jsx(View, {
+      ...viewProps,
+      children: _jsx(Options, {
+        ...getListProps({
+          as: 'ul',
+          elementRef: this.handleListRef
+        }),
+        children: isShowingOptions ? Children.map(children, (child, index) => {
+          if (!child || !matchComponentTypes(child, [Group, Option])) {
+            return; // ignore invalid children
+          }
+          if (matchComponentTypes(child, [Option])) {
+            lastWasGroup = false;
+            return this.renderOption(child, {
+              getOptionProps,
+              getDisabledOptionProps
+            });
+          }
+          if (matchComponentTypes(child, [Group])) {
+            const afterGroup = lastWasGroup;
+            lastWasGroup = true;
+            return this.renderGroup(child, {
+              getOptionProps,
+              getDisabledOptionProps,
+              // for rendering separators appropriately
+              isFirstChild: index === 0,
+              isLastChild: index === Children.count(children) - 1,
+              afterGroup
+            });
+          }
+          return;
+        }) : null
+      })
+    });
+  }
+  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 iconSize = selectSizeToIconSize[size];
+    return _jsx("span", {
+      children: isShowingOptions ? _jsx(ChevronUpInstUIIcon, {
+        inline: false,
+        size: iconSize,
+        color: "baseColor"
+      }) : _jsx(ChevronDownInstUIIcon, {
+        inline: false,
+        size: iconSize,
+        color: "baseColor"
+      })
+    });
+  }
+  renderContentBeforeOrAfterInput(position) {
+    for (const child of this.childrenArray) {
+      if (matchComponentTypes(child, [Group])) {
+        // Group found
+        const options = this.getGroupChildrenArray(child);
+        for (const option of options) {
+          if (option.props.isSelected) {
+            return position === 'before' ? option.props.renderBeforeLabel : option.props.renderAfterLabel ? option.props.renderAfterLabel : this.renderIcon();
+          }
+        }
+      } else {
+        // Ungrouped option found
+        if (child.props.isSelected) {
+          return position === 'before' ? child.props.renderBeforeLabel : child.props.renderAfterLabel ? child.props.renderAfterLabel : this.renderIcon();
+        }
+      }
+    }
+    // if no option with isSelected is found
+    if (position === 'after') {
+      return this.renderIcon();
+    }
+    return void 0;
+  }
+  handleInputContentRender(renderLabelInput, inputValue, isOptionContentAppliedToInput, position, defaultReturn) {
+    const isInputValueEmpty = !inputValue || inputValue === '';
+    if (renderLabelInput && isOptionContentAppliedToInput) {
+      if (!isInputValueEmpty) {
+        return this.renderContentBeforeOrAfterInput(position);
+      }
+      return renderLabelInput;
+    }
+    if (isOptionContentAppliedToInput) {
+      if (isInputValueEmpty) {
+        return defaultReturn;
+      }
+      return this.renderContentBeforeOrAfterInput(position);
+    }
+    if (renderLabelInput) {
+      return renderLabelInput;
+    }
+    return defaultReturn;
+  }
+  handleRenderBeforeInput() {
+    const _this$props9 = this.props,
+      renderBeforeInput = _this$props9.renderBeforeInput,
+      inputValue = _this$props9.inputValue,
+      isOptionContentAppliedToInput = _this$props9.isOptionContentAppliedToInput;
+    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;
+    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 passthroughProps = omitProps(rest, Select.allowedProps);
+    const _getTriggerProps = getTriggerProps({
+        ...passthroughProps
+      }),
+      ref = _getTriggerProps.ref,
+      triggerProps = _objectWithoutProperties(_getTriggerProps, _excluded3);
+    const isEditable = typeof onInputChange !== 'undefined';
+
+    // props to ensure screen readers treat uneditable selects as accessible
+    // popup buttons rather than comboboxes.
+    const overrideProps = !isEditable ? {
+      // We need role="combobox" for the 'open list' button shortcut to work
+      // with desktop screenreaders.
+      // But desktop Safari with Voiceover does not support proper combobox
+      // handling, a 'button' role is set as a workaround.
+      // See https://bugs.webkit.org/show_bug.cgi?id=236881
+      // Also on iOS Chrome with role='combobox' it announces unnecessarily
+      // 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-readonly': true
+    } : interaction === 'disabled' && utils.isChromium() ? {
+      role: 'button'
+    } : {};
+
+    // backdoor to autocomplete attr to work around chrome autofill issues
+    if (passthroughProps['autoComplete']) {
+      overrideProps.autoComplete = passthroughProps['autoComplete'];
+    }
+    const inputProps = {
+      id: this.id,
+      renderLabel,
+      placeholder,
+      size,
+      width,
+      htmlSize,
+      messages,
+      value: inputValue,
+      inputRef: utils.createChainedFunction(ref, this.handleInputRef),
+      inputContainerRef: this.handleInputContainerRef,
+      interaction: interaction === 'enabled' && !isEditable ? 'readonly' // prevent keyboard cursor
+      : interaction,
+      isRequired,
+      shouldNotWrap,
+      layout,
+      display: isInline ? 'inline-block' : 'block',
+      renderBeforeInput: this.handleRenderBeforeInput(),
+      // 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", {
+        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,
+      onFocus,
+      onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
+      ...overrideProps
+    };
+    // suppressHydrationWarning is needed because `role` depends on the browser type
+    return _jsx(TextInput, {
+      ...triggerProps,
+      ...getInputProps(inputProps),
+      suppressHydrationWarning: true,
+      ...(interaction === 'enabled' && !isEditable && {
+        themeOverride: componentTheme => ({
+          backgroundReadonlyColor: componentTheme.backgroundColor
+        })
+      })
+    });
+  }
+  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;
+    // clear temporary option store
+    this._optionIds = [];
+    const highlightedOptionId = this.highlightedOptionId;
+    const selectedOptionId = this.selectedOptionId;
+    return _jsx(Selectable, {
+      highlightedOptionId: highlightedOptionId,
+      isShowingOptions: isShowingOptions,
+      selectedOptionId: selectedOptionId,
+      ...this.getEventHandlers(),
+      children: ({
+        getRootProps,
+        getInputProps,
+        getTriggerProps,
+        getListProps,
+        getOptionProps,
+        getDisabledOptionProps,
+        getDescriptionProps
+      }) => _jsxs("span", {
+        ...getRootProps(),
+        ref: el => {
+          this.ref = el;
+        },
+        "data-cid": combineDataCid('Select', this.props),
+        children: [this.renderInput({
+          getInputProps,
+          getTriggerProps
+        }), _jsx("span", {
+          ...getDescriptionProps(),
+          css: styles === null || styles === void 0 ? void 0 : styles.assistiveText,
+          children: assistiveText
+        }), _jsx(Popover, {
+          constrain: constrain,
+          placement: placement
+          // On iOS VoiceOver, the Popover is mounted right after the input
+          // 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,
+          positionTarget: this._inputContainer,
+          isShowingContent: isShowingOptions,
+          shouldReturnFocus: false,
+          withArrow: false,
+          borderWidth: styles === null || styles === void 0 ? void 0 : styles.popoverBorderWidth,
+          children: this.renderList({
+            getListProps,
+            getOptionProps,
+            getDisabledOptionProps
+          })
+        })]
+      })
+    });
+  }
+}, _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);
+export default Select;
+export { Select };