@ebay/ui-core-react 7.4.0-alpha.9 → 7.4.0

package/listbox-DfOw_fJc.js

@@ -1,662 +0,0 @@
-"use strict";
-const React = require("react");
-const index = require("./index-BXizW4ue.js");
-const classNames = require("classnames");
-const common_componentUtils_utils = require("./common/component-utils/utils/index.js");
-const icon = require("./icon-B17Di3YL.js");
-function uncapitalizeFirstLetter(str) {
-  return str.charAt(0).toLowerCase() + str.slice(1);
-}
-function onKeyDownOrUp(evt, el, keyEventType) {
-  if (!evt.shiftKey) {
-    const key = evt.key;
-    switch (key) {
-      case "Enter":
-      case "Escape":
-      case "PageUp":
-      case "PageDown":
-      case "End":
-      case "Home":
-      case "ArrowLeft":
-      case "ArrowUp":
-      case "ArrowRight":
-      case "ArrowDown":
-        el.dispatchEvent(
-          new CustomEvent(uncapitalizeFirstLetter(`${key}Key${keyEventType}`), {
-            detail: evt,
-            bubbles: true
-          })
-        );
-        break;
-      case " ":
-        el.dispatchEvent(
-          new CustomEvent(`spacebarKey${keyEventType}`, {
-            detail: evt,
-            bubbles: true
-          })
-        );
-        break;
-      default:
-        return;
-    }
-  }
-}
-function onKeyDown(e) {
-  onKeyDownOrUp(e, this, "Down");
-}
-function addKeyDown(el) {
-  el.addEventListener("keydown", onKeyDown);
-}
-function removeKeyDown(el) {
-  el.removeEventListener("keydown", onKeyDown);
-}
-const defaultOptions$1 = {
-  axis: "both",
-  autoInit: "interactive",
-  autoReset: "current",
-  ignoreByDelegateSelector: null,
-  wrap: false
-};
-function isItemNavigable(el) {
-  return !el.hidden && el.getAttribute("aria-disabled") !== "true";
-}
-function isIndexNavigable(items, index2) {
-  return index2 >= 0 && index2 < items.length ? isItemNavigable(items[index2]) : false;
-}
-function findNavigableItems(items) {
-  return items.filter(isItemNavigable);
-}
-function findFirstNavigableIndex(items) {
-  return items.findIndex((item) => isItemNavigable(item));
-}
-function findLastNavigableIndex(items) {
-  return items.indexOf(findNavigableItems(items).reverse()[0]);
-}
-function findIndexByAttribute(items, attribute, value) {
-  return items.findIndex((item) => isItemNavigable(item) && item.getAttribute(attribute) === value);
-}
-function findFirstNavigableAriaCheckedIndex(items) {
-  return findIndexByAttribute(items, "aria-checked", "true");
-}
-function findFirstNavigableAriaSelectedIndex(items) {
-  return findIndexByAttribute(items, "aria-selected", "true");
-}
-function findIgnoredByDelegateItems(el, options) {
-  return options.ignoreByDelegateSelector !== null ? [...el.querySelectorAll(options.ignoreByDelegateSelector)] : [];
-}
-function findPreviousNavigableIndex(items, index2, wrap) {
-  let previousNavigableIndex = -1;
-  if (index2 === null || atStart(items, index2)) {
-    if (wrap === true) {
-      previousNavigableIndex = findLastNavigableIndex(items);
-    }
-  } else {
-    let i = index2;
-    while (--i >= 0) {
-      if (isItemNavigable(items[i])) {
-        previousNavigableIndex = i;
-        break;
-      }
-    }
-  }
-  return previousNavigableIndex;
-}
-function findNextNavigableIndex(items, index2, wrap) {
-  let nextNavigableIndex = -1;
-  if (index2 === null) {
-    nextNavigableIndex = findFirstNavigableIndex(items);
-  } else if (atEnd(items, index2)) {
-    if (wrap === true) {
-      nextNavigableIndex = findFirstNavigableIndex(items);
-    }
-  } else {
-    let i = index2;
-    while (++i < items.length) {
-      if (isItemNavigable(items[i])) {
-        nextNavigableIndex = i;
-        break;
-      }
-    }
-  }
-  return nextNavigableIndex;
-}
-function findIndexPositionByType(typeOrNum, items, currentIndex) {
-  let index2 = -1;
-  switch (typeOrNum) {
-    case "none":
-      index2 = null;
-      break;
-    case "current":
-      index2 = currentIndex;
-      break;
-    case "interactive":
-      index2 = findFirstNavigableIndex(items);
-      break;
-    case "ariaChecked":
-      index2 = findFirstNavigableAriaCheckedIndex(items);
-      break;
-    case "ariaSelected":
-      index2 = findFirstNavigableAriaSelectedIndex(items);
-      break;
-    case "ariaSelectedOrInteractive":
-      index2 = findFirstNavigableAriaSelectedIndex(items);
-      index2 = index2 === -1 ? findFirstNavigableIndex(items) : index2;
-      break;
-    default:
-      index2 = typeof typeOrNum === "number" || typeOrNum === null ? typeOrNum : -1;
-  }
-  return index2;
-}
-function atStart(items, index2) {
-  return index2 === findFirstNavigableIndex(items);
-}
-function atEnd(items, index2) {
-  return index2 === findLastNavigableIndex(items);
-}
-function onKeyPrev(e) {
-  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);
-  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {
-    this.index = findPreviousNavigableIndex(this.items, this.index, this.options.wrap);
-  }
-}
-function onKeyNext(e) {
-  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);
-  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {
-    this.index = findNextNavigableIndex(this.items, this.index, this.options.wrap);
-  }
-}
-function onClick(e) {
-  const itemIndex = this.indexOf(e.target.closest(this._itemSelector));
-  if (isIndexNavigable(this.items, itemIndex)) {
-    this.index = itemIndex;
-  }
-}
-function onKeyHome(e) {
-  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);
-  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {
-    this.index = findFirstNavigableIndex(this.items);
-  }
-}
-function onKeyEnd(e) {
-  const ignoredByDelegateItems = findIgnoredByDelegateItems(this._el, this.options);
-  if (ignoredByDelegateItems.length === 0 || !ignoredByDelegateItems.includes(e.detail.target)) {
-    this.index = findLastNavigableIndex(this.items);
-  }
-}
-function onFocusExit() {
-  if (this.options.autoReset !== null) {
-    this.reset();
-  }
-}
-function onMutation(e) {
-  const fromIndex = this.index;
-  let toIndex = this.index;
-  const { addedNodes, attributeName, removedNodes, target, type } = e[0];
-  if (type === "attributes") {
-    if (target === this.currentItem) {
-      if (attributeName === "aria-disabled") {
-        toIndex = this.index;
-      } else if (attributeName === "hidden") {
-        toIndex = findFirstNavigableIndex(this.items);
-      }
-    } else {
-      toIndex = this.index;
-    }
-  } else if (type === "childList") {
-    if (removedNodes.length > 0 && [...removedNodes].includes(this._cachedElement)) {
-      toIndex = findFirstNavigableIndex(this.items);
-    } else if (removedNodes.length > 0 || addedNodes.length > 0) {
-      toIndex = this.indexOf(this._cachedElement);
-    }
-  }
-  this._index = toIndex;
-  this._el.dispatchEvent(
-    new CustomEvent("navigationModelMutation", {
-      bubbles: false,
-      detail: { fromIndex, toIndex }
-    })
-  );
-}
-class NavigationModel {
-  /**
-   * @param {HTMLElement} el
-   * @param {string} itemSelector
-   * @param {typeof defaultOptions} selectedOptions
-   */
-  constructor(el, itemSelector, selectedOptions) {
-    this.options = Object.assign({}, defaultOptions$1, selectedOptions);
-    this._el = el;
-    this._itemSelector = itemSelector;
-  }
-}
-class LinearNavigationModel extends NavigationModel {
-  /**
-   * @param {HTMLElement} el
-   * @param {string} itemSelector
-   * @param {typeof defaultOptions} selectedOptions
-   */
-  constructor(el, itemSelector, selectedOptions) {
-    super(el, itemSelector, selectedOptions);
-    const fromIndex = this._index;
-    const toIndex = findIndexPositionByType(this.options.autoInit, this.items, this.index);
-    this._index = toIndex;
-    this._cachedElement = this.items[toIndex];
-    this._el.dispatchEvent(
-      new CustomEvent("navigationModelInit", {
-        bubbles: false,
-        detail: {
-          firstInteractiveIndex: this.firstNavigableIndex,
-          fromIndex,
-          items: this.items,
-          toIndex
-        }
-      })
-    );
-  }
-  get currentItem() {
-    return this.items[this.index];
-  }
-  // todo: code smell as getter abstracts that the query selector re-runs every time getter is accessed
-  get items() {
-    return [...this._el.querySelectorAll(`${this._itemSelector}`)];
-  }
-  get index() {
-    return this._index;
-  }
-  /**
-   * @param {number} toIndex - update index position in this.items (non-interactive indexes fail silently)
-   */
-  set index(toIndex) {
-    if (toIndex === this.index) {
-      return;
-    } else if (!isIndexNavigable(this.items, toIndex)) ;
-    else {
-      const fromIndex = this.index;
-      this._cachedElement = this.items[toIndex];
-      this._index = toIndex;
-      this._el.dispatchEvent(
-        new CustomEvent("navigationModelChange", {
-          bubbles: false,
-          detail: { fromIndex, toIndex }
-        })
-      );
-    }
-  }
-  indexOf(element) {
-    return this.items.indexOf(element);
-  }
-  reset() {
-    const fromIndex = this.index;
-    const toIndex = findIndexPositionByType(this.options.autoReset, this.items, this.index);
-    if (toIndex !== fromIndex) {
-      this._index = toIndex;
-      this._el.dispatchEvent(
-        new CustomEvent("navigationModelReset", {
-          bubbles: false,
-          detail: { fromIndex, toIndex }
-        })
-      );
-    }
-  }
-}
-class NavigationEmitter {
-  /**
-   * @param {HTMLElement} el
-   * @param {LinearNavigationModel} model
-   */
-  constructor(el, model) {
-    this.model = model;
-    this.el = el;
-    this._keyPrevListener = onKeyPrev.bind(model);
-    this._keyNextListener = onKeyNext.bind(model);
-    this._keyHomeListener = onKeyHome.bind(model);
-    this._keyEndListener = onKeyEnd.bind(model);
-    this._clickListener = onClick.bind(model);
-    this._focusExitListener = onFocusExit.bind(model);
-    this._observer = new MutationObserver(onMutation.bind(model));
-    addKeyDown(this.el);
-    index.addFocusExit(this.el);
-    const axis = model.options.axis;
-    if (axis === "both" || axis === "x") {
-      this.el.addEventListener("arrowLeftKeyDown", this._keyPrevListener);
-      this.el.addEventListener("arrowRightKeyDown", this._keyNextListener);
-    }
-    if (axis === "both" || axis === "y") {
-      this.el.addEventListener("arrowUpKeyDown", this._keyPrevListener);
-      this.el.addEventListener("arrowDownKeyDown", this._keyNextListener);
-    }
-    this.el.addEventListener("homeKeyDown", this._keyHomeListener);
-    this.el.addEventListener("endKeyDown", this._keyEndListener);
-    this.el.addEventListener("click", this._clickListener);
-    this.el.addEventListener("focusExit", this._focusExitListener);
-    this._observer.observe(this.el, {
-      childList: true,
-      subtree: true,
-      attributeFilter: ["aria-disabled", "hidden"],
-      attributes: true,
-      attributeOldValue: true
-    });
-  }
-  destroy() {
-    removeKeyDown(this.el);
-    index.removeFocusExit(this.el);
-    this.el.removeEventListener("arrowLeftKeyDown", this._keyPrevListener);
-    this.el.removeEventListener("arrowRightKeyDown", this._keyNextListener);
-    this.el.removeEventListener("arrowUpKeyDown", this._keyPrevListener);
-    this.el.removeEventListener("arrowDownKeyDown", this._keyNextListener);
-    this.el.removeEventListener("homeKeyDown", this._keyHomeListener);
-    this.el.removeEventListener("endKeyDown", this._keyEndListener);
-    this.el.removeEventListener("click", this._clickListener);
-    this.el.removeEventListener("focusExit", this._focusExitListener);
-    this._observer.disconnect();
-  }
-}
-function createLinear$1(el, itemSelector, selectedOptions) {
-  const model = new LinearNavigationModel(el, itemSelector, selectedOptions);
-  return new NavigationEmitter(el, model);
-}
-const defaultOptions = {
-  activeDescendantClassName: "active-descendant",
-  autoInit: "none",
-  autoReset: "none",
-  autoScroll: false,
-  axis: "both",
-  wrap: false
-};
-function onModelInit(e) {
-  const { items, toIndex } = e.detail;
-  const itemEl = items[toIndex];
-  if (itemEl) {
-    itemEl.classList.add(this._options.activeDescendantClassName);
-    this._focusEl.setAttribute("aria-activedescendant", itemEl.id);
-  }
-  this._el.dispatchEvent(new CustomEvent("activeDescendantInit", { detail: e.detail }));
-}
-function onModelChange(e) {
-  const { fromIndex, toIndex } = e.detail;
-  const fromItem = this.items[fromIndex];
-  const toItem = this.items[toIndex];
-  if (fromItem) {
-    fromItem.classList.remove(this._options.activeDescendantClassName);
-  }
-  if (toItem) {
-    toItem.classList.add(this._options.activeDescendantClassName);
-    this._focusEl.setAttribute("aria-activedescendant", toItem.id);
-    if (this._options.autoScroll && this._itemContainerEl) {
-      toItem.scrollIntoView({ block: "center" });
-    }
-  }
-  this._el.dispatchEvent(new CustomEvent("activeDescendantChange", { detail: e.detail }));
-}
-function onModelReset(e) {
-  const toIndex = e.detail.toIndex;
-  const activeClassName = this._options.activeDescendantClassName;
-  this.items.forEach(function(el) {
-    el.classList.remove(activeClassName);
-  });
-  if (toIndex !== null && toIndex !== -1) {
-    const itemEl = this.items[toIndex];
-    itemEl.classList.add(activeClassName);
-    this._focusEl.setAttribute("aria-activedescendant", itemEl.id);
-  } else {
-    this._focusEl.removeAttribute("aria-activedescendant");
-  }
-  this._el.dispatchEvent(new CustomEvent("activeDescendantReset", { detail: e.detail }));
-}
-function onModelMutation(e) {
-  const { toIndex } = e.detail;
-  const activeDescendantClassName = this._options.activeDescendantClassName;
-  this.items.forEach(function(item, index$1) {
-    index.src_default(item);
-    if (index$1 !== toIndex) {
-      item.classList.remove(activeDescendantClassName);
-    } else {
-      item.classList.add(activeDescendantClassName);
-    }
-  });
-  this._el.dispatchEvent(new CustomEvent("activeDescendantMutation", { detail: e.detail }));
-}
-class ActiveDescendant {
-  constructor(el) {
-    this._el = el;
-    this._onMutationListener = onModelMutation.bind(this);
-    this._onChangeListener = onModelChange.bind(this);
-    this._onResetListener = onModelReset.bind(this);
-    this._onInitListener = onModelInit.bind(this);
-    this._el.addEventListener("navigationModelMutation", this._onMutationListener);
-    this._el.addEventListener("navigationModelChange", this._onChangeListener);
-    this._el.addEventListener("navigationModelReset", this._onResetListener);
-    this._el.addEventListener("navigationModelInit", this._onInitListener);
-  }
-  destroy() {
-    this._el.removeEventListener("navigationModelMutation", this._onMutationListener);
-    this._el.removeEventListener("navigationModelChange", this._onChangeListener);
-    this._el.removeEventListener("navigationModelReset", this._onResetListener);
-    this._el.removeEventListener("navigationModelInit", this._onInitListener);
-  }
-}
-class LinearActiveDescendant extends ActiveDescendant {
-  constructor(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {
-    super(el);
-    this._options = Object.assign({}, defaultOptions, selectedOptions);
-    this._focusEl = focusEl;
-    this._itemContainerEl = itemContainerEl;
-    this._itemSelector = itemSelector;
-    index.src_default(this._itemContainerEl);
-    if (this._itemContainerEl !== this._focusEl) {
-      focusEl.setAttribute("aria-owns", this._itemContainerEl.id);
-    }
-    this._navigationEmitter = createLinear$1(el, itemSelector, {
-      autoInit: this._options.autoInit,
-      autoReset: this._options.autoReset,
-      axis: this._options.axis,
-      ignoreByDelegateSelector: this._options.ignoreByDelegateSelector,
-      wrap: this._options.wrap
-    });
-    this.items.forEach(function(itemEl) {
-      index.src_default(itemEl);
-    });
-  }
-  get index() {
-    return this._navigationEmitter.model.index;
-  }
-  set index(newIndex) {
-    this._navigationEmitter.model.index = newIndex;
-  }
-  reset() {
-    this._navigationEmitter.model.reset();
-  }
-  get currentItem() {
-    return this._navigationEmitter.model.currentItem;
-  }
-  get items() {
-    return this._navigationEmitter.model.items;
-  }
-  set wrap(newWrap) {
-    this._navigationEmitter.model.options.wrap = newWrap;
-  }
-  destroy() {
-    super.destroy();
-    this._navigationEmitter.destroy();
-  }
-}
-function createLinear(el, focusEl, itemContainerEl, itemSelector, selectedOptions) {
-  return new LinearActiveDescendant(el, focusEl, itemContainerEl, itemSelector, selectedOptions);
-}
-function src_default() {
-  let timeout;
-  let typeStr = "";
-  return {
-    getIndex: function(nodeList, char, timeoutLength) {
-      typeStr = typeStr.concat(char);
-      let index2;
-      if (nodeList == null) return -1;
-      const lowerTypeStr = typeStr.toLocaleLowerCase();
-      index2 = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().startsWith(lowerTypeStr));
-      if (index2 === -1) {
-        index2 = [...nodeList].findIndex((el) => el.textContent.toLocaleLowerCase().includes(lowerTypeStr));
-      }
-      setTimeout(() => {
-        clearTimeout(timeout);
-        typeStr = "";
-      }, timeoutLength);
-      return index2;
-    },
-    destroy: function() {
-    }
-  };
-}
-function scroll(el) {
-  if (!el) {
-    return;
-  }
-  const parentEl = el.parentElement;
-  const offsetBottom = el.offsetTop + el.offsetHeight;
-  const scrollBottom = parentEl.scrollTop + parentEl.offsetHeight;
-  if (el.offsetTop < parentEl.scrollTop) {
-    parentEl.scrollTop = el.offsetTop;
-  } else if (offsetBottom > scrollBottom) {
-    parentEl.scrollTop = offsetBottom - parentEl.offsetHeight;
-  }
-}
-const EbayListboxOptionDescription = ({ children, className, ...rest }) => React.createElement("div", { className: classNames("listbox__description", className), ...rest }, children);
-const EbayListboxOption = ({ className, icon: icon$1, text, children, disabled, tabIndex, selected, ...rest }) => {
-  const description = common_componentUtils_utils.filterByType(children, EbayListboxOptionDescription);
-  const displayText = text || (!(description == null ? void 0 : description.length) ? children : "");
-  return React.createElement(
-    "div",
-    { ...rest, tabIndex: disabled ? -1 : tabIndex, className: classNames("listbox__option", className), "aria-disabled": disabled, "aria-selected": selected, role: "option" },
-    icon$1 ? React.createElement(
-      "span",
-      { className: "listbox__value" },
-      icon$1,
-      displayText ? React.createElement("span", null, displayText) : null,
-      (description == null ? void 0 : description.length) ? description : null
-    ) : React.createElement(
-      React.Fragment,
-      null,
-      React.createElement("span", { className: "listbox__value" }, displayText),
-      (description == null ? void 0 : description.length) ? description : null
-    ),
-    React.createElement(icon.EbayIcon, { name: "tick16" })
-  );
-};
-const TYPEAHEAD_TIMEOUT_LENGTH = 1300;
-const EbayListbox = ({ name, className, disabled, children, tabIndex = 0, listSelection, maxHeight, typeaheadTimeoutLength, selectClassName, activeClassName, onChange = () => {
-}, onEscape = () => {
-}, ...rest }) => {
-  var _a;
-  const options = common_componentUtils_utils.filterByType(children, EbayListboxOption);
-  const selectedOptionComponentIndex = options.findIndex((option) => option.props.selected);
-  const [selectedIndex, setSelectedIndex] = React.useState(options.findIndex((option) => option.props.selected));
-  React.useEffect(() => {
-    if (selectedOptionComponentIndex !== selectedIndex) {
-      setSelectedIndex(selectedOptionComponentIndex);
-    }
-  }, [selectedOptionComponentIndex]);
-  const containerRef = React.useRef();
-  const activeDescendantRef = React.useRef();
-  const typeaheadRef = React.useRef();
-  const wasClickedRef = React.useRef(false);
-  function handleChange(event, nextSelectedIndex, wasClicked) {
-    if (nextSelectedIndex === selectedIndex) {
-      return;
-    }
-    const option = options[nextSelectedIndex];
-    if (option.props.disabled) {
-      return;
-    }
-    setSelectedIndex(nextSelectedIndex);
-    onChange(event, {
-      index: nextSelectedIndex,
-      selected: [options[nextSelectedIndex].props.value],
-      wasClicked
-    });
-  }
-  function handleKeyDown(event) {
-    switch (event.code) {
-      case "Esc":
-      case "Escape":
-        onEscape();
-        break;
-      case "Space":
-      case "Enter":
-        handleChange(event, activeDescendantRef.current.index, false);
-        break;
-      default:
-        return;
-    }
-    const itemIndex = typeaheadRef.current.getIndex(containerRef.current.children, event.key, typeaheadTimeoutLength || TYPEAHEAD_TIMEOUT_LENGTH);
-    if (itemIndex !== -1) {
-      activeDescendantRef.current.index = itemIndex;
-      const selectedOption = containerRef.current.querySelectorAll("[role=option]")[itemIndex];
-      containerRef.current.scrollTop = selectedOption.offsetTop - containerRef.current.offsetHeight / 2;
-    }
-  }
-  function handleMouseDown() {
-    wasClickedRef.current = true;
-  }
-  React.useEffect(() => {
-    const handleListboxChange = (event) => {
-      const nextSelectedIndex = parseInt(event.detail.toIndex, 10);
-      const el = containerRef.current ? containerRef.current.querySelectorAll("[role=option]")[selectedIndex] : null;
-      const wasClicked = wasClickedRef.current;
-      scroll(el);
-      if (wasClickedRef.current) {
-        wasClickedRef.current = false;
-      }
-      handleChange(event, nextSelectedIndex, wasClicked);
-    };
-    if (options.length && !disabled) {
-      const container = containerRef.current;
-      const optionsContainer = containerRef.current;
-      activeDescendantRef.current = createLinear(container, optionsContainer, optionsContainer, ".listbox__option[role=option]", {
-        activeDescendantClassName: activeClassName || "listbox__option--active",
-        autoInit: selectedIndex,
-        autoReset: null,
-        autoScroll: listSelection !== "auto"
-      });
-      typeaheadRef.current = src_default();
-    }
-    if (listSelection === "auto") {
-      containerRef.current.addEventListener("activeDescendantChange", handleListboxChange);
-    }
-    return () => {
-      if (activeDescendantRef.current) {
-        activeDescendantRef.current.reset();
-        activeDescendantRef.current.destroy();
-        activeDescendantRef.current = void 0;
-      }
-      if (typeaheadRef.current) {
-        typeaheadRef.current.destroy();
-        typeaheadRef.current = void 0;
-      }
-      if (containerRef.current) {
-        containerRef.current.removeEventListener("activeDescendantChange", handleListboxChange);
-      }
-    };
-  }, [selectedIndex, disabled, listSelection]);
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement("div", { ...rest, tabIndex, ref: containerRef, role: "listbox", onKeyDown: listSelection !== "auto" ? handleKeyDown : void 0, className: classNames("listbox__options", className), style: { maxHeight } }, options.map((option, index2) => React.cloneElement(option, {
-      key: option.props.value || index2,
-      ...option.props,
-      onMouseDown: listSelection === "auto" ? handleMouseDown : void 0,
-      onClick: (event) => {
-        if (listSelection !== "auto") {
-          handleChange(event, index2, true);
-        }
-      },
-      selected: index2 === selectedIndex
-    }))),
-    React.createElement("select", { hidden: true, className: classNames("listbox__native", selectClassName), name, value: (_a = options[selectedIndex]) == null ? void 0 : _a.props.value, onChange: (
-      /* NO-OP, this is to hide React warnings */
-      () => {
-      }
-    ) }, options.map((option, index2) => React.createElement("option", { key: index2, value: option.props.value, disabled: option.props.disabled })))
-  );
-};
-exports.EbayListbox = EbayListbox;
-exports.EbayListboxOption = EbayListboxOption;
-exports.EbayListboxOptionDescription = EbayListboxOptionDescription;