@adyen/kyc-components 4.0.0-compact.3 → 4.0.0-compact.7

package/dist/Select-DaCJsYNl.js

@@ -0,0 +1,868 @@
+;
+{
+  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] = "d042ce73-ccf9-40b2-b16e-a154284d8fc1", e._sentryDebugIdIdentifier = "sentry-dbid-d042ce73-ccf9-40b2-b16e-a154284d8fc1");
+  } 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-CZ-HuGUO.js";
+import { p as useAnalyticsContext, L as Loader, a7 as noop, z as Typography, a3 as createLogger, u as useTranslation } from "./StoreProvider-99-ewU62.js";
+import { d as debouncedInputEvent } from "./debouncedInputEvent-Cv2S512Y.js";
+import { a as useId } from "./useId-BZ0PA7jP.js";
+import { C as Checkbox } from "./Checkbox-5Sc5pzsh.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
+};