;
{
  try {
    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "c6a50f52-174f-48df-8b96-ce7527079678", e._sentryDebugIdIdentifier = "sentry-dbid-c6a50f52-174f-48df-8b96-ce7527079678");
  } catch (e) {
  }
}
;
import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
import cx from "classnames";
import { useState, useRef, useMemo, useCallback, useEffect } from "preact/hooks";
import { computed, signal, useSignal, useSignalEffect } from "@preact/signals";
import { K as KEYBOARD_KEYS } from "./Modal-1lLoobr9.js";
import { p as useAnalyticsContext, L as Loader, a7 as noop, z as Typography, a3 as createLogger, u as useTranslation } from "./StoreProvider-CqQrndhS.js";
import { d as debouncedInputEvent } from "./debouncedInputEvent-Cv2S512Y.js";
import { a as useId } from "./useId-BZ0PA7jP.js";
import { C as Checkbox } from "./Checkbox-CyQM2V4n.js";
const createSelectFocus = ({
  activeItems,
  filteredItems: items
}) => {
  const numberOfItems = computed(() => items.value.length - 1);
  const focused = signal();
  const getDefaultFocusedItem = () => {
    const firstActiveOption = activeItems.value.find((option) => !option.disabled);
    const firstEnabledOption = items.value.find((option) => !option.disabled);
    return firstActiveOption ?? firstEnabledOption;
  };
  const focusedItemIndex = computed(() => {
    const currFocus = focused.value;
    const toFind = focusedIsItem(currFocus) ? currFocus : getDefaultFocusedItem();
    const itemsValue = items.value;
    if (!toFind) {
      console.warn("[Select] No existing focused item, and none of the filtered items are enabled");
      return 0;
    }
    return itemsValue.findIndex((i) => i.id === toFind.id);
  });
  const findPotentialIndex = (currentIndex, direction) => {
    const potentialIndex = direction === "down" ? currentIndex + 1 : currentIndex - 1;
    const potentialItem = items.value[potentialIndex];
    if (potentialIndex < 0 || potentialIndex > numberOfItems.value) {
      return "exceedsBounds";
    }
    if (potentialItem.disabled) {
      return findPotentialIndex(potentialIndex, direction);
    }
    return potentialIndex;
  };
  const moveFocusToNextItem = () => {
    const nextIndex = findPotentialIndex(focusedItemIndex.value, "down");
    if (nextIndex !== "exceedsBounds") focused.value = items.value[nextIndex];
  };
  const moveFocusToPreviousItem = () => {
    const prevIndex = findPotentialIndex(focusedItemIndex.value, "up");
    if (prevIndex !== "exceedsBounds") focused.value = items.value[prevIndex];
  };
  const moveFocusToFirstItem = () => {
    let currIndex = focusedItemIndex.value;
    while (true) {
      const before = findPotentialIndex(currIndex, "up");
      if (before === "exceedsBounds") break;
      currIndex = before;
    }
    focused.value = items.value[currIndex];
  };
  const moveFocusToLastItem = () => {
    let currIndex = focusedItemIndex.value;
    while (true) {
      const after = findPotentialIndex(currIndex, "down");
      if (after === "exceedsBounds") break;
      currIndex = after;
    }
    focused.value = items.value[currIndex];
  };
  const focusInput = () => {
    focused.value = "input";
  };
  const focusItem = (item) => {
    focused.value = item;
  };
  const focusDefaultItem = () => {
    focused.value = getDefaultFocusedItem();
  };
  const focusNothing = () => {
    focused.value = void 0;
  };
  return {
    focused,
    moveFocusToFirstItem,
    moveFocusToLastItem,
    moveFocusToNextItem,
    moveFocusToPreviousItem,
    focusInput,
    focusItem,
    focusDefaultItem,
    focusNothing
  };
};
const useSelectFocus = (options) => {
  const [selectFocus] = useState(createSelectFocus(options));
  return selectFocus;
};
const focusedIsItem = (focused) => Boolean(focused) && typeof focused === "object";
const useWatchingSignal = (value) => {
  const signal2 = useSignal(value);
  if (signal2.peek() !== value) signal2.value = value;
  return signal2;
};
const simulateTextChangeFromKeyboardEvent = (keyDownEvent, value) => {
  const { key } = keyDownEvent;
  let newValue = value;
  if (key === KEYBOARD_KEYS.backspace) {
    newValue = newValue.slice(0, newValue.length - 1);
  } else if (key.length === 1) {
    newValue += key;
  }
  return newValue;
};
function useMirrorProp(prop, propOnChange, defaultVal) {
  const [isMirroring] = useState(propOnChange !== void 0);
  const [local, setLocal] = useState(defaultVal);
  if (isMirroring) {
    return [prop, propOnChange];
  } else {
    return [local, setLocal];
  }
}
const selectInputWrapper = "adyen-kyc-select-input-wrapper";
const selectInput = "adyen-kyc-select-input";
const selectInputActive = "adyen-kyc-select-input--active";
const selectInputReadonly = "adyen-kyc-select-input--readonly";
const selectInputInvalid = "adyen-kyc-select-input--invalid";
const selectInputMinimal = "adyen-kyc-select-input--minimal";
const selectInputSearch = "adyen-kyc-select-input-search";
const selectInputFilterable = "adyen-kyc-select-input--filterable";
const selectInputWrapperFilterable = "adyen-kyc-select-input-wrapper--filterable";
const selectInputWrapperNonFilterable = "adyen-kyc-select-input-wrapper--non-filterable";
const selectInputListOpen = "adyen-kyc-select-input--list-open";
const selectInputNonFilterable = "adyen-kyc-select-input--non-filterable";
const selectInputPlaceholder = "adyen-kyc-select-input--placeholder";
const ignorePointerEvents = "adyen-kyc-ignore-pointer-events";
const handlePointerEvents = "adyen-kyc-handle-pointer-events";
const styles = {
  selectInputWrapper,
  selectInput,
  selectInputActive,
  selectInputReadonly,
  selectInputInvalid,
  selectInputMinimal,
  selectInputSearch,
  selectInputFilterable,
  selectInputWrapperFilterable,
  selectInputWrapperNonFilterable,
  selectInputListOpen,
  selectInputNonFilterable,
  selectInputPlaceholder,
  ignorePointerEvents,
  handlePointerEvents
};
const isAppleMobile = /iPhone|iPad/.test(navigator.platform);
function SelectButton({
  id,
  name,
  active,
  readonly,
  showList,
  isInvalid,
  onClick,
  onButtonKeyDown,
  filterable,
  isFiltering,
  placeholder,
  focusProps: { focused },
  selectListId,
  onInput,
  behaviour,
  loading,
  text,
  enableTracking = false,
  onFocus,
  inputRef,
  minimal,
  "aria-describedby": ariaDescribedBy,
  "aria-labelledby": ariaLabelledBy,
  "aria-label": ariaLabel
}) {
  const userEvents = useAnalyticsContext();
  const wrapperRef = useRef(null);
  useSignalEffect(() => {
    if (focused.value === "input") {
      inputRef.current?.focus();
    }
  });
  const handleFocus = (e) => {
    if (readonly) return;
    if (enableTracking)
      userEvents.addFieldEvent("Interacted with form field", {
        actionType: "focus",
        field: name
      });
    onFocus(e);
  };
  const handleClick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (readonly) return;
    onClick();
  };
  const handleKeyDown = (e) => {
    if (!readonly) onButtonKeyDown(e);
  };
  const handleInput = (e) => {
    if (filterable && !readonly) onInput(e.currentTarget.value);
  };
  const truncatedDisplayValue = useMemo(() => {
    if (active.length === 0) return void 0;
    const activeText = active.map(({ selectedOptionName, name: name2 }) => selectedOptionName ?? name2).join(", ");
    return activeText.length > 50 ? activeText.substring(0, 50) + "..." : activeText;
  }, [active]);
  const title = active?.length ? active.map(({ name: name2 }) => name2).join(",") : placeholder;
  const isFocused = focused.value === "input";
  const value = useMemo(() => {
    if (behaviour === "textIsData" || focused.value !== void 0 && // can be focusing either the input or one of the options
    filterable && isFiltering)
      return text;
    return truncatedDisplayValue;
  }, [behaviour, text, focused.value, filterable, isFiltering, truncatedDisplayValue]);
  return (
    // In this case, the `<input>` within is fully accessible - this `onClick` is simply handling the situation
    // where there is no `<label>` around the component. In that case, we should handle click events as if they
    // occurred on the input.
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: cx({
          [styles.selectInputWrapper]: true,
          [styles.selectInputMinimal]: minimal,
          [styles.selectInputReadonly]: readonly,
          [styles.selectInputActive]: isFocused,
          [styles.selectInputListOpen]: showList,
          [styles.selectInputInvalid]: isInvalid,
          [styles.selectInputSearch]: filterable === "prefiltered",
          [styles.selectInputWrapperFilterable]: filterable,
          [styles.selectInputWrapperNonFilterable]: !filterable,
          // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
          [styles.ignorePointerEvents]: isAppleMobile
        }),
        ref: wrapperRef,
        onClick: handleClick,
        onFocusIn: handleFocus,
        children: [
          /* @__PURE__ */ jsx(
            "input",
            {
              id,
              name,
              title,
              ref: inputRef,
              type: filterable ? "text" : "button",
              role: "combobox",
              "aria-haspopup": "listbox",
              "aria-owns": selectListId,
              "aria-controls": selectListId,
              "aria-expanded": showList,
              "aria-describedby": ariaDescribedBy,
              "aria-disabled": readonly,
              "aria-label": ariaLabel,
              "aria-labelledby": ariaLabelledBy,
              "aria-autocomplete": filterable ? "list" : void 0,
              autoComplete: "off",
              className: cx({
                [styles.selectInput]: true,
                [styles.selectInputFilterable]: filterable,
                [styles.selectInputNonFilterable]: !filterable,
                [styles.selectInputMinimal]: minimal,
                [styles.selectInputReadonly]: readonly,
                // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
                [styles.handlePointerEvents]: isAppleMobile
              }),
              placeholder,
              value,
              disabled: readonly,
              onClick: handleClick,
              onInput: handleInput,
              onKeyDown: handleKeyDown
            }
          ),
          !filterable && !value ? /* @__PURE__ */ jsx("span", { className: styles.selectInputPlaceholder, children: placeholder }) : void 0,
          loading && /* @__PURE__ */ jsx(Loader, { size: "small" })
        ]
      }
    )
  );
}
const SelectListItem = ({
  id,
  item,
  selected,
  isMulti,
  isSearch,
  children,
  onSelect,
  onKeyDown,
  onFocus,
  className
}) => /* @__PURE__ */ jsx(
  "li",
  {
    "aria-disabled": !!item.disabled,
    "aria-selected": selected,
    className: cx([
      "adyen-kyc-dropdown-element",
      {
        "adyen-kyc-dropdown-element--active": selected,
        "adyen-kyc-dropdown-element--disabled": !!item.disabled,
        "adyen-kyc-dropdown-multi-element": isMulti,
        "adyen-kyc-dropdown-element-description": !isMulti && !isSearch && item.description,
        "adyen-kyc-dropdown-search-element": isSearch
      },
      className
    ]),
    "data-disabled": !!item.disabled,
    "data-value": item.id,
    onFocus: (event) => {
      if (item.disabled) return;
      onFocus?.(event);
    },
    onClick: (e) => {
      e.preventDefault();
      if (item.disabled) return;
      onSelect(!selected);
    },
    onKeyDown: (e) => {
      if (item.disabled) return;
      onKeyDown(e);
    },
    role: "option",
    tabIndex: -1,
    children: isMulti ? /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none", width: "100%" }, children: /* @__PURE__ */ jsx(
      Checkbox,
      {
        id,
        onChange: noop,
        label: item.name,
        disabled: item.disabled,
        helper: item.description,
        checked: selected,
        name: `adyen-kyc-dropdown-element__checkbox adyen-kyc-dropdown-element__checkbox--${item.id}`
      }
    ) }) : children ? [children] : /* @__PURE__ */ jsxs(Fragment, { children: [
      item.icon && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-dropdown-element__icon", children: item.icon }),
      item.description ? /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx(
          Typography,
          {
            el: "span",
            variant: "body-strongest",
            className: "adyen-kyc-dropdown-element__label",
            children: item.name
          }
        ),
        /* @__PURE__ */ jsx(
          Typography,
          {
            el: "span",
            color: "secondary",
            className: "adyen-kyc-dropdown-element-description__text",
            children: item.description
          }
        )
      ] }) : /* @__PURE__ */ jsx("span", { className: "adyen-kyc-dropdown-element__label", children: item.name })
    ] })
  }
);
const logger = createLogger();
const DEFAULT_ITEM_HEIGHT = 36;
function SelectList({
  selectListId,
  active,
  filteredItems,
  showList,
  isMulti,
  inputRef,
  isSearch,
  loading,
  getSearchItem,
  onKeyDown,
  onSelect,
  minimal,
  maxVisibleItems = 5,
  focusProps: {
    focused,
    focusItem,
    focusDefaultItem,
    moveFocusToNextItem,
    moveFocusToPreviousItem,
    moveFocusToFirstItem,
    moveFocusToLastItem
  }
}) {
  const { t } = useTranslation("ui");
  const [startIndex, setStartIndex] = useState(0);
  const [endIndex, setEndIndex] = useState(maxVisibleItems);
  const listRef = useRef(null);
  const calculatedItemHeight = (() => {
    if (listRef.current && showList) {
      const height2 = listRef.current.firstElementChild?.firstElementChild?.clientHeight;
      if (height2 !== void 0) return height2;
    }
  })();
  const itemHeight = calculatedItemHeight || DEFAULT_ITEM_HEIGHT;
  const totalItems = filteredItems.length;
  const visibleItems = useMemo(
    () => filteredItems.slice(startIndex, endIndex),
    [endIndex, filteredItems, startIndex]
  );
  const findElementForItem = useCallback(
    (item) => {
      const listContainer = listRef.current;
      if (!listContainer) return;
      return listContainer.querySelector(
        `[role="option"][data-value="${item.id}"]`
      );
    },
    [listRef]
  );
  const recalculateScrollIndexes = useCallback(() => {
    if (!listRef.current) return;
    const { scrollTop } = listRef.current;
    const maxStartIndex = totalItems < maxVisibleItems ? totalItems : totalItems - maxVisibleItems;
    const newStartIndex = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), maxStartIndex);
    const newEndIndex = Math.min(newStartIndex + maxVisibleItems, totalItems);
    setStartIndex(newStartIndex);
    setEndIndex(newEndIndex);
  }, [totalItems, maxVisibleItems, itemHeight, listRef]);
  useEffect(() => {
    recalculateScrollIndexes();
  }, [recalculateScrollIndexes]);
  const scrollItemIntoView = useCallback(
    (item) => {
      if (!listRef.current) return;
      const itemIndex = filteredItems.indexOf(item);
      if (itemIndex === -1) {
        return;
      }
      const maxScrollTop = totalItems * itemHeight;
      listRef.current.scrollTop = Math.min(itemHeight * (itemIndex + 0.5), maxScrollTop);
    },
    [filteredItems, itemHeight, totalItems, listRef]
  );
  const acquireFocusForItem = useCallback(
    (item) => {
      let itemEl = findElementForItem(item);
      if (!itemEl) {
        scrollItemIntoView(item);
      }
      setTimeout(() => {
        itemEl = itemEl ?? findElementForItem(item);
        if (itemEl) {
          itemEl.focus();
        } else {
          logger.warn("[SelectList] still cannot see the option", item.name);
        }
      }, 20);
    },
    [findElementForItem, scrollItemIntoView]
  );
  useSignalEffect(() => {
    const currFocused = focused.value;
    if (focusedIsItem(currFocused)) {
      acquireFocusForItem(currFocused);
    }
  });
  const listListeners = {
    [KEYBOARD_KEYS.arrowUp]: moveFocusToPreviousItem,
    [KEYBOARD_KEYS.arrowDown]: moveFocusToNextItem,
    [KEYBOARD_KEYS.home]: moveFocusToFirstItem,
    [KEYBOARD_KEYS.end]: moveFocusToLastItem
  };
  const onListKeydown = (event) => {
    const listener = listListeners[event.key];
    if (listener) {
      event.preventDefault();
      listener();
    }
  };
  const getItems = () => {
    if (loading) {
      return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: t(($) => $["loading"]) });
    }
    if (!filteredItems.length) {
      if (startIndex !== 0 || endIndex !== maxVisibleItems) {
        setStartIndex(0);
        setEndIndex(maxVisibleItems);
      }
      return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: t(($) => $["noOptionsFound"]) });
    }
    if (visibleItems.length) {
      return visibleItems.map((item) => /* @__PURE__ */ jsx(
        SelectListItem,
        {
          item,
          id: item.id,
          onKeyDown: (event) => {
            onKeyDown(event, item);
          },
          onFocus: (event) => {
            focusItem(item);
            event.stopPropagation();
          },
          onSelect: () => {
            onSelect(item);
          },
          selected: !!active.find((activeItem) => activeItem.id === item.id),
          isMulti,
          isSearch,
          children: getSearchItem && getSearchItem(item)
        },
        item.id
      ));
    }
    return null;
  };
  const height = useMemo(() => {
    if (loading) return "auto";
    return totalItems > maxVisibleItems && itemHeight ? `${itemHeight * maxVisibleItems}px` : "auto";
  }, [itemHeight, totalItems, loading, maxVisibleItems]);
  const allItemsVisible = totalItems <= maxVisibleItems;
  const [showAbove, setShowAbove] = useState(false);
  useEffect(() => {
    const list = listRef.current;
    const input = inputRef.current;
    const resizeObserver = new ResizeObserver(() => {
      const dropdownHeight = list.offsetHeight;
      const windowHeight = window.innerHeight;
      const position = input.getBoundingClientRect().bottom;
      const isSpaceBelow = windowHeight - position > dropdownHeight;
      const isSpaceAbove = position > dropdownHeight;
      setShowAbove(!isSpaceBelow && isSpaceAbove);
    });
    resizeObserver.observe(list);
    return () => {
      resizeObserver.disconnect();
    };
  }, [inputRef, listRef]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx({
        "adyen-kyc-dropdown-list": true,
        "adyen-kyc-dropdown-list--minimal": minimal,
        "adyen-kyc-dropdown-list--active": showList,
        "adyen-kyc-dropdown-list--above": showAbove
      }),
      id: selectListId,
      role: "listbox",
      onScroll: recalculateScrollIndexes,
      style: {
        overflowY: allItemsVisible ? "hidden" : "auto",
        position: "absolute",
        height
      },
      onKeyDown: onListKeydown,
      onFocus: focusDefaultItem,
      tabIndex: -1,
      ref: listRef,
      children: /* @__PURE__ */ jsxs(
        "ul",
        {
          className: "adyen-kyc-dropdown-list__transformer",
          style: {
            transform: `translateY(${startIndex * itemHeight}px)`
          },
          children: [
            getItems(),
            /* @__PURE__ */ jsx(
              "div",
              {
                style: {
                  // fake the height of the remaining items in the list so scroll position is correct
                  height: `${(totalItems - endIndex) * itemHeight}px`
                }
              }
            )
          ]
        }
      )
    }
  );
}
const Select = ({
  id,
  items,
  filterable = true,
  readonly = false,
  onChange,
  onSelect,
  selected,
  name,
  isInvalid = false,
  placeholder = "",
  isMulti,
  enableTracking = false,
  maxVisibleItems,
  getSearchItem,
  onBlur = noop,
  text: filterTextProp,
  setText: setFilterTextProp,
  showList: showListProp,
  setShowList: setShowListProp,
  behaviour = "textIsFilter",
  loading = false,
  minimal = false,
  "aria-describedby": ariaDescribedBy,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy,
  excludedValues
}) => {
  const userEvents = useAnalyticsContext();
  const selectContainerRef = useRef(null);
  const inputRef = useRef(null);
  const selectListId = useId("select");
  const [textFilter, setTextFilter] = useMirrorProp(filterTextProp, setFilterTextProp, "");
  const [isShowList, setIsShowList] = useMirrorProp(showListProp, setShowListProp, false);
  const [isFiltering, setIsFiltering] = useState(false);
  const active = useMemo(() => {
    if (selected === void 0) return [];
    return (Array.isArray(selected) ? selected : [selected]).map((s) => {
      if (typeof s === "object") return s;
      return items.find((i) => i.id === s);
    }).filter(Boolean);
  }, [items, selected]);
  const filtered = useMemo(() => {
    const availableItems = items.filter((item) => !excludedValues?.includes(item));
    return availableItems.filter((item) => {
      if (filterable === "prefiltered" || !isFiltering) return true;
      return item.name.toLowerCase().includes(textFilter.toLowerCase());
    });
  }, [filterable, isFiltering, items, textFilter, excludedValues]);
  const activeSignal = useWatchingSignal(active);
  const filteredSignal = useWatchingSignal(filtered);
  const focusProps = useSelectFocus({
    activeItems: activeSignal,
    filteredItems: filteredSignal
  });
  const {
    focusInput,
    focusItem,
    focusDefaultItem,
    focusNothing,
    moveFocusToNextItem,
    moveFocusToPreviousItem
  } = focusProps;
  const closeList = useCallback(
    (shiftFocusTo) => {
      if (behaviour === "textIsFilter") setTextFilter("");
      setIsShowList(false);
      switch (shiftFocusTo) {
        case "input":
          focusInput();
          break;
        case "nothing":
          focusNothing();
          break;
      }
    },
    [behaviour, focusInput, focusNothing, setIsShowList, setTextFilter]
  );
  const showList = useCallback(() => {
    if (!isShowList) setIsShowList(true);
  }, [isShowList, setIsShowList]);
  const handleSelect = useCallback(
    (selectedItem) => {
      setIsFiltering(false);
      if (readonly) return;
      if (isMulti) {
        const isAlreadySelected = active.find((item) => item.id === selectedItem.id);
        const newActiveItems = isAlreadySelected ? active.filter((i) => i.id !== selectedItem.id) : [...active, selectedItem];
        onSelect?.(newActiveItems);
        onChange?.({ target: { value: newActiveItems.map((i) => i.id), name: name ?? "" } });
        focusItem(selectedItem);
      } else {
        const handleOnSelect = onSelect;
        const handleOnChange = onChange;
        handleOnSelect?.(selectedItem);
        handleOnChange?.({ target: { value: selectedItem.id, name: name ?? "" } });
        closeList("input");
      }
      if (enableTracking) {
        userEvents.addFieldEvent("Interacted with form field", {
          actionType: "select",
          field: name,
          returnValue: selectedItem.id
        });
      }
    },
    [
      readonly,
      isMulti,
      enableTracking,
      active,
      onSelect,
      onChange,
      name,
      focusItem,
      closeList,
      userEvents
    ]
  );
  const handleBlur = (e) => {
    onBlur(e);
  };
  const handleInputKeyDown = async (e) => {
    if (e.key === KEYBOARD_KEYS.enter && isShowList) {
      if (filtered.length === 1) {
        handleSelect(filtered[0]);
      } else {
        e.preventDefault();
      }
    } else if (e.key === KEYBOARD_KEYS.escape) {
      closeList("nothing");
    } else if (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space && (!filterable || !isShowList)) {
      e.preventDefault();
      e.stopPropagation();
      showList();
      focusDefaultItem();
    } else if (e.key === KEYBOARD_KEYS.arrowUp || e.key === KEYBOARD_KEYS.arrowDown) {
      e.preventDefault();
      e.stopPropagation();
      showList();
      focusDefaultItem();
      switch (e.key) {
        case KEYBOARD_KEYS.arrowUp:
          moveFocusToPreviousItem();
          break;
        case KEYBOARD_KEYS.arrowDown:
          moveFocusToNextItem();
          break;
      }
    } else if (e.key === KEYBOARD_KEYS.tab) {
      closeList("nothing");
    }
  };
  const handleClickOutside = (e) => {
    if (!selectContainerRef.current?.contains(e.target)) {
      closeList("nothing");
    }
  };
  const handleListItemKeyDown = (e, item) => {
    switch (e.key) {
      case KEYBOARD_KEYS.escape:
        e.preventDefault();
        closeList("input");
        break;
      case KEYBOARD_KEYS.space:
      case KEYBOARD_KEYS.enter:
        handleSelect(item);
        break;
      case KEYBOARD_KEYS.tab:
        closeList("nothing");
        break;
      case KEYBOARD_KEYS.arrowUp:
      case KEYBOARD_KEYS.arrowDown:
      case KEYBOARD_KEYS.home:
      case KEYBOARD_KEYS.end:
        break;
      default: {
        e.preventDefault();
        e.stopPropagation();
        handleTextFilter(simulateTextChangeFromKeyboardEvent(e, textFilter));
        focusInput();
      }
    }
  };
  const handleTextFilter = useCallback(
    (value) => {
      showList();
      setIsFiltering(true);
      setTextFilter(value);
      if (enableTracking) {
        debouncedInputEvent(userEvents, { actionType: "input", field: name });
      }
    },
    [enableTracking, name, setTextFilter, showList]
  );
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
    return () => {
      document.removeEventListener("click", handleClickOutside, true);
    };
  }, []);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx({ "adyen-kyc-dropdown": true, "adyen-kyc-dropdown--minimal": minimal }),
      ref: selectContainerRef,
      onFocusOut: handleBlur,
      children: [
        /* @__PURE__ */ jsx(
          SelectButton,
          {
            id,
            name,
            active,
            filterable,
            isFiltering,
            isInvalid,
            onButtonKeyDown: handleInputKeyDown,
            onInput: handleTextFilter,
            placeholder,
            readonly,
            selectListId,
            showList: isShowList,
            focusProps,
            "aria-describedby": ariaDescribedBy || "",
            "aria-label": ariaLabel || "",
            "aria-labelledby": ariaLabelledBy || "",
            isMulti: Boolean(isMulti),
            loading,
            behaviour,
            text: textFilter,
            inputRef,
            enableTracking,
            minimal,
            onClick: () => {
              if (isShowList) {
                closeList("input");
              } else {
                showList();
                focusInput();
              }
            },
            onFocus: () => {
              focusInput();
            }
          }
        ),
        /* @__PURE__ */ jsx(
          SelectList,
          {
            active,
            filteredItems: filtered,
            onKeyDown: handleListItemKeyDown,
            onSelect: handleSelect,
            selectListId,
            showList: isShowList,
            textFilter,
            isMulti: Boolean(isMulti),
            isSearch: filterable === "prefiltered",
            getSearchItem,
            loading,
            maxVisibleItems,
            focusProps,
            inputRef,
            minimal
          }
        )
      ]
    }
  );
};
export {
  Select as S,
  SelectListItem as a
};
