@instructure/ui-select 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/Select/v1/index.js

@@ -1,711 +0,0 @@
-"use strict";
-
-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 _react = require("react");
-var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
-var _combineDataCid = require("@instructure/ui-utils/lib/combineDataCid.js");
-var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-var _v11_ = require("@instructure/ui-view/v11_6");
-var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
-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 _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
-var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles"));
-var _theme = _interopRequireDefault(require("./theme"));
-var _Group = require("./Group");
-var _Option = require("./Option");
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _class;
-/*
- * 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.
- */
-// 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__*/(0, _react.memo)(function Opt(props) {
-  const {
-    optionsItemProps,
-    children
-  } = props;
-  return (
-    // The main <Options> that renders this is always an "ul"
-    (0, _jsxRuntime.jsx)(_v11_4.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 = exports.Select = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_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() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    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();
-  }
-  blur() {
-    this._input && this._input.blur();
-  }
-  get childrenArray() {
-    return _react.Children.toArray(this.props.children);
-  }
-  getGroupChildrenArray(group) {
-    return _react.Children.toArray(group.props.children);
-  }
-  get focused() {
-    return this._input ? (0, _isActiveElement.isActiveElement)(this._input) : false;
-  }
-  get id() {
-    return this.props.id || this._defaultId;
-  }
-  get width() {
-    return this._inputContainer ? this._inputContainer.offsetWidth : undefined;
-  }
-  get interaction() {
-    return (0, _getInteraction.getInteraction)({
-      props: this.props
-    });
-  }
-  get highlightedOptionId() {
-    let highlightedOptionId;
-    this.childrenArray.forEach(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.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 ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.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 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)}"]`);
-    if (!option) return;
-    const listItem = option.parentNode;
-    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 ? 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;
-    if (id) {
-      onRequestHighlightOption?.(event, {
-        id
-      });
-    }
-  }
-  getEventHandlers() {
-    const {
-      isShowingOptions,
-      onRequestShowOptions,
-      onRequestHideOptions,
-      onRequestSelectOption
-    } = this.props;
-    return this.interaction === 'enabled' ? {
-      onRequestShowOptions: event => {
-        onRequestShowOptions?.(event);
-        const selectedOptionId = this.selectedOptionId;
-        if (selectedOptionId && !Array.isArray(selectedOptionId)) {
-          // highlight selected option on show
-          this.highlightOption(event, selectedOptionId);
-        }
-      },
-      onRequestHideOptions: event => {
-        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 : undefined;
-        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] : undefined;
-          }
-        }
-        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?.(event, {
-            id
-          });
-        }
-      }
-    } : {};
-  }
-  renderOption(option, data) {
-    const {
-      getOptionProps,
-      getDisabledOptionProps
-    } = data;
-    const {
-      id,
-      isDisabled,
-      isHighlighted,
-      isSelected,
-      renderBeforeLabel,
-      renderAfterLabel,
-      children
-    } = option.props;
-    const getRenderOptionLabel = renderOptionLabel => {
-      return typeof renderOptionLabel === 'function' && !renderOptionLabel?.prototype?.isReactComponent ? renderOptionLabel.bind(null, {
-        id,
-        isDisabled,
-        isSelected,
-        isHighlighted,
-        children
-      }) : renderOptionLabel;
-    };
-    let optionProps = {
-      // passthrough props
-      ...(0, _omitProps.omitProps)(option.props, [..._Option.Option.allowedProps, ..._v11_4.Options.Item.allowedProps]),
-      // props from selectable
-      ...getOptionProps({
-        id
-      }),
-      // Options.Item props
-      renderBeforeLabel: getRenderOptionLabel(renderBeforeLabel),
-      renderAfterLabel: 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 (0, _jsxRuntime.jsx)(MemoedOption, {
-      optionsItemProps: optionProps,
-      selectOption: option,
-      children: children
-    });
-  }
-  renderGroup(group, data) {
-    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((0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {}));
-    }
-    // create a sublist as a group
-    // a wrapping listitem will be created by Options
-    groupChildren.push((0, _jsxRuntime.jsx)(_v11_4.Options, {
-      id: id,
-      as: "ul",
-      role: "group",
-      renderLabel: renderLabel,
-      ...(0, _omitProps.omitProps)(rest, [..._v11_4.Options.allowedProps, ..._Group.Group.allowedProps]),
-      children: _react.Children.map(children, child => {
-        return this.renderOption(child, {
-          getOptionProps,
-          getDisabledOptionProps
-        });
-      })
-    }));
-    // add a separator below
-    if (!isLastChild) {
-      groupChildren.push((0, _jsxRuntime.jsx)(_v11_4.Options.Separator, {}));
-    }
-    return groupChildren;
-  }
-  renderList(data) {
-    const {
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    } = data;
-    const {
-      isShowingOptions,
-      optionsMaxWidth,
-      optionsMaxHeight,
-      visibleOptionsCount,
-      children
-    } = this.props;
-    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: 'medium'
-    } : {
-      maxHeight: 0
-    };
-    return (0, _jsxRuntime.jsx)(_v11_.View, {
-      ...viewProps,
-      children: (0, _jsxRuntime.jsx)(_v11_4.Options, {
-        ...getListProps({
-          as: 'ul',
-          elementRef: this.handleListRef
-        }),
-        children: isShowingOptions ? _react.Children.map(children, (child, index) => {
-          if (!child || !(0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group, _Option.Option])) {
-            return; // ignore invalid children
-          }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Option.Option])) {
-            lastWasGroup = false;
-            return this.renderOption(child, {
-              getOptionProps,
-              getDisabledOptionProps
-            });
-          }
-          if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.Group])) {
-            const afterGroup = lastWasGroup;
-            lastWasGroup = true;
-            return this.renderGroup(child, {
-              getOptionProps,
-              getDisabledOptionProps,
-              // for rendering separators appropriately
-              isFirstChild: index === 0,
-              isLastChild: index === _react.Children.count(children) - 1,
-              afterGroup
-            });
-          }
-          return;
-        }) : null
-      })
-    });
-  }
-  renderIcon() {
-    const {
-      styles,
-      isShowingOptions
-    } = this.props;
-    return (0, _jsxRuntime.jsx)("span", {
-      css: styles?.icon,
-      children: isShowingOptions ? (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine.IconArrowOpenUpLine, {
-        inline: false
-      }) : (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {
-        inline: false
-      })
-    });
-  }
-  renderContentBeforeOrAfterInput(position) {
-    for (const child of this.childrenArray) {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Group.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 {
-      renderBeforeInput,
-      inputValue,
-      isOptionContentAppliedToInput
-    } = this.props;
-    return this.handleInputContentRender(renderBeforeInput, inputValue, isOptionContentAppliedToInput, 'before', null // default for before
-    );
-  }
-  handleRenderAfterInput() {
-    const {
-      renderAfterInput,
-      inputValue,
-      isOptionContentAppliedToInput
-    } = this.props;
-    return this.handleInputContentRender(renderAfterInput, inputValue, isOptionContentAppliedToInput, 'after', this.renderIcon() // default for after
-    );
-  }
-  renderInput(data) {
-    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 {
-      ref,
-      ...triggerProps
-    } = getTriggerProps({
-      ...passthroughProps
-    });
-    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': undefined,
-      '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 !== 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 ? () => {} : undefined,
-      onFocus,
-      onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
-      ...overrideProps
-    };
-    // suppressHydrationWarning is needed because `role` depends on the browser type
-    return (0, _jsxRuntime.jsx)(_v11_3.TextInput, {
-      ...triggerProps,
-      ...getInputProps(inputProps),
-      suppressHydrationWarning: true
-    });
-  }
-  render() {
-    const {
-      constrain,
-      placement,
-      mountNode,
-      assistiveText,
-      isShowingOptions,
-      styles
-    } = this.props;
-    // clear temporary option store
-    this._optionIds = [];
-    const highlightedOptionId = this.highlightedOptionId;
-    const selectedOptionId = this.selectedOptionId;
-    return (0, _jsxRuntime.jsx)(_Selectable.Selectable, {
-      highlightedOptionId: highlightedOptionId,
-      isShowingOptions: isShowingOptions,
-      selectedOptionId: selectedOptionId,
-      ...this.getEventHandlers(),
-      children: ({
-        getRootProps,
-        getInputProps,
-        getTriggerProps,
-        getListProps,
-        getOptionProps,
-        getDisabledOptionProps,
-        getDescriptionProps
-      }) => (0, _jsxRuntime.jsxs)("span", {
-        ...getRootProps({
-          css: styles?.select
-        }),
-        ref: el => {
-          this.ref = el;
-        },
-        "data-cid": (0, _combineDataCid.combineDataCid)('Select', this.props),
-        children: [this.renderInput({
-          getInputProps,
-          getTriggerProps
-        }), (0, _jsxRuntime.jsx)("span", {
-          ...getDescriptionProps(),
-          css: styles?.assistiveText,
-          children: assistiveText
-        }), (0, _jsxRuntime.jsx)(_v11_2.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 !== undefined ? mountNode : utils.isAndroidOrIOS() ? this.ref : undefined,
-          positionTarget: this._inputContainer,
-          isShowingContent: isShowingOptions,
-          shouldReturnFocus: false,
-          withArrow: false,
-          borderWidth: styles?.popoverBorderWidth,
-          children: this.renderList({
-            getListProps,
-            getOptionProps,
-            getDisabledOptionProps
-          })
-        })]
-      })
-    });
-  }
-}) || _class) || _class);
-var _default = exports.default = Select;