@adyen/adyen-platform-experience-web 1.12.1 → 1.12.2-beta.1

package/dist/es/external/@adyen/kyc-components/dist/Select-seF9rM5K.js

@@ -0,0 +1,647 @@
+import { jsx as i } from "../../../preact/jsx-runtime/dist/jsxRuntime.module.js";
+import ee from "../../../../_virtual/index.js";
+import { useRef as oe, useState as U, useMemo as X, useCallback as M, useEffect as le } from "../../../preact/hooks/dist/hooks.module.js";
+import { useSignal as xe, useSignalEffect as Ie } from "../../../@preact/signals/dist/signals.module.js";
+import { K as l } from "./Modal-BMdWqd0Y.js";
+import { m as Se, z as we, ai as me, V as De, u as Ee, O as ue } from "./StoreProvider-CBB99upB.js";
+import { d as Te } from "./debouncedInputEvent-Cv2S512Y.js";
+import { a as Le } from "./useId-BZ0PA7jP.js";
+import { C as Ne } from "./Checkbox-DmYVTVOD.js";
+import { computed as pe, signal as Pe } from "../../../@preact/signals-core/dist/signals-core.module.js";
+import { Fragment as fe } from "../../../preact/dist/preact.module.js";
+try {
+  let c = typeof window < "u" ? window : typeof global < "u" ? global : typeof globalThis < "u" ? globalThis : typeof self < "u" ? self : {}, e = new c.Error().stack;
+  e && (c._sentryDebugIds = c._sentryDebugIds || {}, c._sentryDebugIds[e] = "c84c571e-2a36-45da-806d-2330ac24a8eb", c._sentryDebugIdIdentifier = "sentry-dbid-c84c571e-2a36-45da-806d-2330ac24a8eb");
+} catch {
+}
+const _e = ({
+  activeItems: c,
+  filteredItems: e
+}) => {
+  const s = pe(() => e.value.length - 1), o = Pe(), b = () => {
+    const a = c.value.find((w) => !w.disabled), d = e.value.find((w) => !w.disabled);
+    return a ?? d;
+  }, f = pe(() => {
+    const a = o.value, d = be(a) ? a : b(), w = e.value;
+    return d ? w.findIndex((A) => A.id === d.id) : (console.warn("[Select] No existing focused item, and none of the filtered items are enabled"), 0);
+  }), v = (a, d) => {
+    const w = d === "down" ? a + 1 : a - 1, A = e.value[w];
+    return w < 0 || w > s.value ? "exceedsBounds" : A.disabled ? v(w, d) : w;
+  };
+  return {
+    focused: o,
+    moveFocusToFirstItem: () => {
+      let a = f.value;
+      for (; ; ) {
+        const d = v(a, "up");
+        if (d === "exceedsBounds") break;
+        a = d;
+      }
+      o.value = e.value[a];
+    },
+    moveFocusToLastItem: () => {
+      let a = f.value;
+      for (; ; ) {
+        const d = v(a, "down");
+        if (d === "exceedsBounds") break;
+        a = d;
+      }
+      o.value = e.value[a];
+    },
+    moveFocusToNextItem: () => {
+      const a = v(f.value, "down");
+      a !== "exceedsBounds" && (o.value = e.value[a]);
+    },
+    moveFocusToPreviousItem: () => {
+      const a = v(f.value, "up");
+      a !== "exceedsBounds" && (o.value = e.value[a]);
+    },
+    focusInput: () => {
+      o.value = "input";
+    },
+    focusItem: (a) => {
+      o.value = a;
+    },
+    focusDefaultItem: () => {
+      o.value = b();
+    },
+    focusNothing: () => {
+      o.value = void 0;
+    }
+  };
+}, Ce = (c) => {
+  const [e] = U(_e(c));
+  return e;
+}, be = (c) => !!c && typeof c == "object", ye = (c) => {
+  const e = xe(c);
+  return e.peek() !== c && (e.value = c), e;
+}, Ae = (c, e) => {
+  const { key: s } = c;
+  let o = e;
+  return s === l.backspace ? o = o.slice(0, o.length - 1) : s.length === 1 && (o += s), o;
+};
+function ve(c, e, s) {
+  const [o] = U(e !== void 0), [b, f] = U(s);
+  return o ? [c, e] : [b, f];
+}
+const Be = "adyen-kyc-select-input-wrapper", Ke = "adyen-kyc-select-input", Oe = "adyen-kyc-select-input--active", He = "adyen-kyc-select-input--readonly", Me = "adyen-kyc-select-input--invalid", Re = "adyen-kyc-select-input--minimal", We = "adyen-kyc-select-input-search", $e = "adyen-kyc-select-input--filterable", je = "adyen-kyc-select-input-wrapper--filterable", Ue = "adyen-kyc-select-input-wrapper--non-filterable", ze = "adyen-kyc-select-input--list-open", Ye = "adyen-kyc-select-input--non-filterable", qe = "adyen-kyc-select-input--placeholder", Ge = "adyen-kyc-ignore-pointer-events", Je = "adyen-kyc-handle-pointer-events", m = {
+  selectInputWrapper: Be,
+  selectInput: Ke,
+  selectInputActive: Oe,
+  selectInputReadonly: He,
+  selectInputInvalid: Me,
+  selectInputMinimal: Re,
+  selectInputSearch: We,
+  selectInputFilterable: $e,
+  selectInputWrapperFilterable: je,
+  selectInputWrapperNonFilterable: Ue,
+  selectInputListOpen: ze,
+  selectInputNonFilterable: Ye,
+  selectInputPlaceholder: qe,
+  ignorePointerEvents: Ge,
+  handlePointerEvents: Je
+}, he = /iPhone|iPad/.test(navigator.platform);
+function Qe({
+  id: c,
+  name: e,
+  active: s,
+  readonly: o,
+  showList: b,
+  isInvalid: f,
+  onClick: v,
+  onButtonKeyDown: k,
+  filterable: p,
+  isFiltering: C,
+  placeholder: h,
+  focusProps: { focused: x },
+  selectListId: I,
+  onInput: z,
+  behaviour: R,
+  loading: a,
+  text: d,
+  enableTracking: w = !1,
+  onFocus: A,
+  inputRef: K,
+  minimal: O,
+  "aria-describedby": T,
+  "aria-labelledby": Y,
+  "aria-label": H
+}) {
+  const q = we(), y = oe(null);
+  Ie(() => {
+    x.value === "input" && K.current?.focus();
+  });
+  const G = (u) => {
+    o || (w && q.addFieldEvent("Interacted with form field", {
+      actionType: "focus",
+      field: e
+    }), A(u));
+  }, g = (u) => {
+    u.preventDefault(), u.stopPropagation(), !o && v();
+  }, F = (u) => {
+    o || k(u);
+  }, W = (u) => {
+    p && !o && z(u.currentTarget.value);
+  }, S = X(() => {
+    if (s.length === 0) return;
+    const u = s.map(({ selectedOptionName: J, name: E }) => J ?? E).join(", ");
+    return u.length > 50 ? u.substring(0, 50) + "..." : u;
+  }, [s]), L = s?.length ? s.map(({ name: u }) => u).join(",") : h, D = x.value === "input", B = X(() => R === "textIsData" || x.value !== void 0 && // can be focusing either the input or one of the options
+  p && C ? d : S, [R, d, x.value, p, C, S]);
+  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__ */ i(
+      "div",
+      {
+        className: ee({
+          [m.selectInputWrapper]: !0,
+          [m.selectInputMinimal]: O,
+          [m.selectInputReadonly]: o,
+          [m.selectInputActive]: D,
+          [m.selectInputListOpen]: b,
+          [m.selectInputInvalid]: f,
+          [m.selectInputSearch]: p === "prefiltered",
+          [m.selectInputWrapperFilterable]: p,
+          [m.selectInputWrapperNonFilterable]: !p,
+          // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
+          [m.ignorePointerEvents]: he
+        }),
+        ref: y,
+        onClick: g,
+        onFocusIn: G,
+        children: [
+          /* @__PURE__ */ i(
+            "input",
+            {
+              id: c,
+              name: e,
+              title: L,
+              ref: K,
+              type: p ? "text" : "button",
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-owns": I,
+              "aria-controls": I,
+              "aria-expanded": b,
+              "aria-describedby": T,
+              "aria-disabled": o,
+              "aria-label": H,
+              "aria-labelledby": Y,
+              "aria-autocomplete": p ? "list" : void 0,
+              autoComplete: "off",
+              className: ee({
+                [m.selectInput]: !0,
+                [m.selectInputFilterable]: p,
+                [m.selectInputNonFilterable]: !p,
+                [m.selectInputMinimal]: O,
+                [m.selectInputReadonly]: o,
+                // To resolve a bug where filterable select `<input>`s weren't focusable on iOS
+                [m.handlePointerEvents]: he
+              }),
+              placeholder: h,
+              value: B,
+              disabled: o,
+              onClick: g,
+              onInput: W,
+              onKeyDown: F
+            }
+          ),
+          !p && !B ? /* @__PURE__ */ i("span", { className: m.selectInputPlaceholder, children: h }) : void 0,
+          a && /* @__PURE__ */ i(De, { size: "small" })
+        ]
+      }
+    )
+  );
+}
+const Xe = ({
+  id: c,
+  item: e,
+  selected: s,
+  isMulti: o,
+  isSearch: b,
+  children: f,
+  onSelect: v,
+  onKeyDown: k,
+  onFocus: p,
+  className: C
+}) => /* @__PURE__ */ i(
+  "li",
+  {
+    "aria-disabled": !!e.disabled,
+    "aria-selected": s,
+    className: ee([
+      "adyen-kyc-dropdown-element",
+      {
+        "adyen-kyc-dropdown-element--active": s,
+        "adyen-kyc-dropdown-element--disabled": !!e.disabled,
+        "adyen-kyc-dropdown-multi-element": o,
+        "adyen-kyc-dropdown-element-description": !o && !b && e.description,
+        "adyen-kyc-dropdown-search-element": b
+      },
+      C
+    ]),
+    "data-disabled": !!e.disabled,
+    "data-value": e.id,
+    onFocus: (h) => {
+      e.disabled || p?.(h);
+    },
+    onClick: (h) => {
+      h.preventDefault(), !e.disabled && v(!s);
+    },
+    onKeyDown: (h) => {
+      e.disabled || k(h);
+    },
+    role: "option",
+    tabIndex: -1,
+    children: o ? /* @__PURE__ */ i("span", { style: { pointerEvents: "none", width: "100%" }, children: /* @__PURE__ */ i(
+      Ne,
+      {
+        id: c,
+        onChange: me,
+        label: e.name,
+        disabled: e.disabled,
+        helper: e.description,
+        checked: s,
+        name: `adyen-kyc-dropdown-element__checkbox adyen-kyc-dropdown-element__checkbox--${e.id}`
+      }
+    ) }) : f ? [f] : /* @__PURE__ */ i(fe, { children: [
+      e.icon && /* @__PURE__ */ i("span", { className: "adyen-kyc-dropdown-element__icon", children: e.icon }),
+      e.description ? /* @__PURE__ */ i(fe, { children: [
+        /* @__PURE__ */ i(
+          ue,
+          {
+            el: "span",
+            variant: "body-strongest",
+            className: "adyen-kyc-dropdown-element__label",
+            children: e.name
+          }
+        ),
+        /* @__PURE__ */ i(
+          ue,
+          {
+            el: "span",
+            color: "secondary",
+            className: "adyen-kyc-dropdown-element-description__text",
+            children: e.description
+          }
+        )
+      ] }) : /* @__PURE__ */ i("span", { className: "adyen-kyc-dropdown-element__label", children: e.name })
+    ] })
+  }
+), Ze = Se(), Ve = 36;
+function et({
+  selectListId: c,
+  active: e,
+  filteredItems: s,
+  showList: o,
+  isMulti: b,
+  inputRef: f,
+  isSearch: v,
+  loading: k,
+  getSearchItem: p,
+  onKeyDown: C,
+  onSelect: h,
+  minimal: x,
+  maxVisibleItems: I = 5,
+  focusProps: {
+    focused: z,
+    focusItem: R,
+    focusDefaultItem: a,
+    moveFocusToNextItem: d,
+    moveFocusToPreviousItem: w,
+    moveFocusToFirstItem: A,
+    moveFocusToLastItem: K
+  }
+}) {
+  const { t: O } = Ee("ui"), [T, Y] = U(0), [H, q] = U(I), y = oe(null), g = (() => {
+    if (y.current && o) {
+      const t = y.current.firstElementChild?.firstElementChild?.clientHeight;
+      if (t !== void 0) return t;
+    }
+  })() || Ve, F = s.length, W = X(
+    () => s.slice(T, H),
+    [H, s, T]
+  ), S = M(
+    (t) => {
+      const r = y.current;
+      if (r)
+        return r.querySelector(
+          `[role="option"][data-value="${t.id}"]`
+        );
+    },
+    [y]
+  ), L = M(() => {
+    if (!y.current) return;
+    const { scrollTop: t } = y.current, r = F < I ? F : F - I, N = Math.min(Math.max(0, Math.floor(t / g)), r), $ = Math.min(N + I, F);
+    Y(N), q($);
+  }, [F, I, g, y]);
+  le(() => {
+    L();
+  }, [L]);
+  const D = M(
+    (t) => {
+      if (!y.current) return;
+      const r = s.indexOf(t);
+      if (r === -1)
+        return;
+      const N = F * g;
+      y.current.scrollTop = Math.min(g * (r + 0.5), N);
+    },
+    [s, g, F, y]
+  ), B = M(
+    (t) => {
+      let r = S(t);
+      r || D(t), setTimeout(() => {
+        r = r ?? S(t), r ? r.focus() : Ze.warn("[SelectList] still cannot see the option", t.name);
+      }, 20);
+    },
+    [S, D]
+  );
+  Ie(() => {
+    const t = z.value;
+    be(t) && B(t);
+  });
+  const u = {
+    [l.arrowUp]: w,
+    [l.arrowDown]: d,
+    [l.home]: A,
+    [l.end]: K
+  }, J = (t) => {
+    const r = u[t.key];
+    r && (t.preventDefault(), r());
+  }, E = () => k ? /* @__PURE__ */ i("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: O((t) => t.loading) }) : s.length ? W.length ? W.map((t) => /* @__PURE__ */ i(
+    Xe,
+    {
+      item: t,
+      id: t.id,
+      onKeyDown: (r) => {
+        C(r, t);
+      },
+      onFocus: (r) => {
+        R(t), r.stopPropagation();
+      },
+      onSelect: () => {
+        h(t);
+      },
+      selected: !!e.find((r) => r.id === t.id),
+      isMulti: b,
+      isSearch: v,
+      children: p && p(t)
+    },
+    t.id
+  )) : null : ((T !== 0 || H !== I) && (Y(0), q(I)), /* @__PURE__ */ i("div", { className: "adyen-kyc-dropdown-element adyen-kyc-dropdown-element--no-options", children: O((t) => t.noOptionsFound) })), Q = X(() => k ? "auto" : F > I && g ? `${g * I}px` : "auto", [g, F, k, I]), se = F <= I, [ce, Z] = U(!1);
+  return le(() => {
+    const t = y.current, r = f.current, N = new ResizeObserver(() => {
+      const $ = t.offsetHeight, ae = window.innerHeight, te = r.getBoundingClientRect().bottom, P = ae - te > $, j = te > $;
+      Z(!P && j);
+    });
+    return N.observe(t), () => {
+      N.disconnect();
+    };
+  }, [f, y]), /* @__PURE__ */ i(
+    "div",
+    {
+      className: ee({
+        "adyen-kyc-dropdown-list": !0,
+        "adyen-kyc-dropdown-list--minimal": x,
+        "adyen-kyc-dropdown-list--active": o,
+        "adyen-kyc-dropdown-list--above": ce
+      }),
+      id: c,
+      role: "listbox",
+      onScroll: L,
+      style: {
+        overflowY: se ? "hidden" : "auto",
+        position: "absolute",
+        height: Q
+      },
+      onKeyDown: J,
+      onFocus: a,
+      tabIndex: -1,
+      ref: y,
+      children: /* @__PURE__ */ i(
+        "ul",
+        {
+          className: "adyen-kyc-dropdown-list__transformer",
+          style: {
+            transform: `translateY(${T * g}px)`
+          },
+          children: [
+            E(),
+            /* @__PURE__ */ i(
+              "div",
+              {
+                style: {
+                  // fake the height of the remaining items in the list so scroll position is correct
+                  height: `${(F - H) * g}px`
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+const pt = ({
+  id: c,
+  items: e,
+  filterable: s = !0,
+  readonly: o = !1,
+  onChange: b,
+  onSelect: f,
+  selected: v,
+  name: k,
+  isInvalid: p = !1,
+  placeholder: C = "",
+  isMulti: h,
+  enableTracking: x = !1,
+  maxVisibleItems: I,
+  getSearchItem: z,
+  onBlur: R = me,
+  text: a,
+  setText: d,
+  showList: w,
+  setShowList: A,
+  behaviour: K = "textIsFilter",
+  loading: O = !1,
+  minimal: T = !1,
+  "aria-describedby": Y,
+  "aria-label": H,
+  "aria-labelledby": q,
+  excludedValues: y
+}) => {
+  const G = we(), g = oe(null), F = oe(null), W = Le("select"), [S, L] = ve(a, d, ""), [D, B] = ve(w, A, !1), [u, J] = U(!1), E = X(() => v === void 0 ? [] : (Array.isArray(v) ? v : [v]).map((n) => typeof n == "object" ? n : e.find((_) => _.id === n)).filter(Boolean), [e, v]), Q = X(() => e.filter((_) => !y?.includes(_)).filter((_) => s === "prefiltered" || !u ? !0 : _.name.toLowerCase().includes(S.toLowerCase())), [s, u, e, S, y]), se = ye(E), ce = ye(Q), Z = Ce({
+    activeItems: se,
+    filteredItems: ce
+  }), {
+    focusInput: t,
+    focusItem: r,
+    focusDefaultItem: N,
+    focusNothing: $,
+    moveFocusToNextItem: ae,
+    moveFocusToPreviousItem: te
+  } = Z, P = M(
+    (n) => {
+      switch (K === "textIsFilter" && L(""), B(!1), n) {
+        case "input":
+          t();
+          break;
+        case "nothing":
+          $();
+          break;
+      }
+    },
+    [K, t, $, B, L]
+  ), j = M(() => {
+    D || B(!0);
+  }, [D, B]), re = M(
+    (n) => {
+      if (J(!1), !o) {
+        if (h) {
+          const ne = E.find((V) => V.id === n.id) ? E.filter((V) => V.id !== n.id) : [...E, n];
+          f?.(ne), b?.({ target: { value: ne.map((V) => V.id), name: k ?? "" } }), r(n);
+        } else {
+          const _ = f, ne = b;
+          _?.(n), ne?.({ target: { value: n.id, name: k ?? "" } }), P("input");
+        }
+        x && G.addFieldEvent("Interacted with form field", {
+          actionType: "select",
+          field: k,
+          returnValue: n.id
+        });
+      }
+    },
+    [
+      o,
+      h,
+      x,
+      E,
+      f,
+      b,
+      k,
+      r,
+      P,
+      G
+    ]
+  ), ke = (n) => {
+    R(n);
+  }, ge = async (n) => {
+    if (n.key === l.enter && D)
+      Q.length === 1 ? re(Q[0]) : n.preventDefault();
+    else if (n.key === l.escape)
+      P("nothing");
+    else if (n.key === l.enter || n.key === l.space && (!s || !D))
+      n.preventDefault(), n.stopPropagation(), j(), N();
+    else if (n.key === l.arrowUp || n.key === l.arrowDown)
+      switch (n.preventDefault(), n.stopPropagation(), j(), N(), n.key) {
+        case l.arrowUp:
+          te();
+          break;
+        case l.arrowDown:
+          ae();
+          break;
+      }
+    else n.key === l.tab && P("nothing");
+  }, ie = (n) => {
+    g.current?.contains(n.target) || P("nothing");
+  }, Fe = (n, _) => {
+    switch (n.key) {
+      case l.escape:
+        n.preventDefault(), P("input");
+        break;
+      case l.space:
+      case l.enter:
+        re(_);
+        break;
+      case l.tab:
+        P("nothing");
+        break;
+      case l.arrowUp:
+      case l.arrowDown:
+      case l.home:
+      case l.end:
+        break;
+      default:
+        n.preventDefault(), n.stopPropagation(), de(Ae(n, S)), t();
+    }
+  }, de = M(
+    (n) => {
+      j(), J(!0), L(n), x && Te(G, { actionType: "input", field: k });
+    },
+    [x, k, L, j]
+  );
+  return le(() => (document.addEventListener("click", ie, !0), () => {
+    document.removeEventListener("click", ie, !0);
+  }), []), /* @__PURE__ */ i(
+    "div",
+    {
+      className: ee({ "adyen-kyc-dropdown": !0, "adyen-kyc-dropdown--minimal": T }),
+      ref: g,
+      onFocusOut: ke,
+      children: [
+        /* @__PURE__ */ i(
+          Qe,
+          {
+            id: c,
+            name: k,
+            active: E,
+            filterable: s,
+            isFiltering: u,
+            isInvalid: p,
+            onButtonKeyDown: ge,
+            onInput: de,
+            placeholder: C,
+            readonly: o,
+            selectListId: W,
+            showList: D,
+            focusProps: Z,
+            "aria-describedby": Y || "",
+            "aria-label": H || "",
+            "aria-labelledby": q || "",
+            isMulti: !!h,
+            loading: O,
+            behaviour: K,
+            text: S,
+            inputRef: F,
+            enableTracking: x,
+            minimal: T,
+            onClick: () => {
+              D ? P("input") : (j(), t());
+            },
+            onFocus: () => {
+              t();
+            }
+          }
+        ),
+        /* @__PURE__ */ i(
+          et,
+          {
+            active: E,
+            filteredItems: Q,
+            onKeyDown: Fe,
+            onSelect: re,
+            selectListId: W,
+            showList: D,
+            textFilter: S,
+            isMulti: !!h,
+            isSearch: s === "prefiltered",
+            getSearchItem: z,
+            loading: O,
+            maxVisibleItems: I,
+            focusProps: Z,
+            inputRef: F,
+            minimal: T
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  pt as S,
+  Xe as a
+};