@ebay/ui-core-react 7.4.0-alpha.7 → 7.4.0-alpha.8

package/listbox-DGbY99kq.js

@@ -0,0 +1,674 @@
+"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, 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;
+      scrollOptions(itemIndex);
+    }
+  }
+  function scrollOptions(index2) {
+    const listboxOptionsContainerNode = containerRef.current;
+    const currentTarget = listboxOptionsContainerNode.querySelectorAll("[role=option]")[index2];
+    if (listboxOptionsContainerNode.scrollHeight > listboxOptionsContainerNode.clientHeight) {
+      const scrollBottom = listboxOptionsContainerNode.clientHeight + listboxOptionsContainerNode.scrollTop;
+      const elementBottom = currentTarget.offsetTop + currentTarget.offsetHeight;
+      if (elementBottom > scrollBottom) {
+        listboxOptionsContainerNode.scrollTop = elementBottom - listboxOptionsContainerNode.clientHeight;
+      } else if (currentTarget.offsetTop < listboxOptionsContainerNode.scrollTop) {
+        listboxOptionsContainerNode.scrollTop = currentTarget.offsetTop;
+      }
+    }
+  }
+  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: "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;