@adyen/adyen-platform-experience-web 1.0.0 → 1.0.2

package/dist/es/components/internal/FormFields/Select/Select.js

@@ -1,6 +1,5 @@
-import { jsx as T } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import fe from "classnames";
-import { useState as w, useRef as a, useCallback as l, useMemo as de, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as T, useRef as a, useCallback as l, useMemo as de, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as s } from "../../../types.js";
 import { ARIA_ERROR_SUFFIX as pe } from "../../../../core/Errors/constants.js";
 import Ae from "./components/SelectButton.js";
@@ -8,6 +7,7 @@ import be from "./components/SelectList.js";
 import ge from "./hooks/useSelect.js";
 import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as Ee } from "./constants.js";
 import "./Select.scss.js";
+import { jsx as w } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import Se from "../../../../hooks/useCommitAction/useCommitAction.js";
 import { CommitAction as U } from "../../../../hooks/useCommitAction/types.js";
 import { uuid as Re } from "../../../../utils/random/uuid.js";
@@ -36,25 +36,39 @@ const ke = ({
   showOverlay: Z = !1,
   fitPosition: ee
 }) => {
-  const { resetSelection: f, select: I, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [h, d] = w(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, B] = w(0), N = a(), S = a(!0), C = a(!1), L = a(n), x = a(n), re = l(() => {
+  const {
+    resetSelection: f,
+    select: I,
+    selection: n
+  } = ge({
+    items: g,
+    multiSelect: m,
+    selected: H
+  }), [o, i] = T(!1), [h, d] = T(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, B] = T(0), N = a(), S = a(!0), C = a(!1), L = a(n), x = a(n), re = l(() => {
     d(""), i(!1), o && (f(L.current), S.current = !0);
-  }, [f, i, d, o]), se = de(
-    () => fe([
-      K,
-      { [Ee]: De(m) },
-      ...O.map((e) => `${K}--${e}`),
-      F
-    ]),
-    [F, O, m]
-  ), { commitAction: y, commitActionButtons: ne, committing: W, resetCommitAction: $ } = Se({
+  }, [f, i, d, o]), se = de(() => fe([K, {
+    [Ee]: De(m)
+  }, ...O.map((e) => `${K}--${e}`), F]), [F, O, m]), {
+    commitAction: y,
+    commitActionButtons: ne,
+    committing: W,
+    resetCommitAction: $
+  } = Se({
     resetDisabled: !n.length
   }), c = l(() => {
     var e;
     d(""), i(!1), $(), S.current ? S.current = !1 : (e = k.current) == null || e.focus();
   }, [$, i, d]), R = l(() => {
     L.current = n;
-    const e = `${n.map(({ id: t }) => t)}`;
-    P({ target: { value: e, name: _ } });
+    const e = `${n.map(({
+      id: t
+    }) => t)}`;
+    P({
+      target: {
+        value: e,
+        name: _
+      }
+    });
   }, [_, P, n]);
   b(() => {
     switch (y) {
@@ -66,51 +80,45 @@ const ke = ({
         break;
     }
   }, [y, R, f]);
-  const A = l(
-    (e) => {
-      var r;
-      e.preventDefault();
-      const t = e.currentTarget && ((r = p == null ? void 0 : p.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
-      if (t && !t.getAttribute("data-disabled")) {
-        const le = t.getAttribute("data-value"), ue = g.find((me) => me.id === le);
-        I(ue);
-      }
-    },
-    [g, I]
-  );
+  const A = l((e) => {
+    var r;
+    e.preventDefault();
+    const t = e.currentTarget && ((r = p == null ? void 0 : p.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
+    if (t && !t.getAttribute("data-disabled")) {
+      const le = t.getAttribute("data-value"), ue = g.find((me) => me.id === le);
+      I(ue);
+    }
+  }, [g, I]);
   b(() => {
     x.current !== n && (x.current = n, (!m || C.current) && (R(), c())), C.current = !1;
   }, [c, R, m, n]), b(() => {
     W && (B(n.length), c());
   }, [W, c, B, n.length]);
-  const oe = l(
-    (e) => {
-      switch (e.code) {
-        case s.ESCAPE:
-        case s.TAB:
-          o && c(), S.current = e.key === s.TAB;
-          return;
-        case s.ENTER:
-        case s.SPACE:
-          if (u && o) {
-            if (e.key === s.ENTER)
-              if (h)
-                A(e);
-              else
-                break;
-            return;
-          }
-          break;
-        case s.ARROW_DOWN:
-        case s.ARROW_UP:
-          break;
-        default:
+  const oe = l((e) => {
+    switch (e.code) {
+      case s.ESCAPE:
+      case s.TAB:
+        o && c(), S.current = e.key === s.TAB;
+        return;
+      case s.ENTER:
+      case s.SPACE:
+        if (u && o) {
+          if (e.key === s.ENTER)
+            if (h)
+              A(e);
+            else
+              break;
           return;
-      }
-      e.preventDefault(), i(!0);
-    },
-    [c, u, A, o, i, h]
-  );
+        }
+        break;
+      case s.ARROW_DOWN:
+      case s.ARROW_UP:
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), i(!0);
+  }, [c, u, A, o, i, h]);
   b(() => {
     o && (cancelAnimationFrame(N.current), N.current = requestAnimationFrame(() => {
       var e;
@@ -130,112 +138,97 @@ const ke = ({
       }
     }));
   }, [o]);
-  const ce = l(
-    (e) => {
-      const t = e.target;
-      switch (e.code) {
-        case s.ESCAPE:
-          e.preventDefault(), c();
-          break;
-        case s.ENTER:
-        case s.SPACE:
-          A(e);
-          break;
-        case s.ARROW_DOWN: {
-          e.preventDefault();
-          let r = t.nextElementSibling;
+  const ce = l((e) => {
+    const t = e.target;
+    switch (e.code) {
+      case s.ESCAPE:
+        e.preventDefault(), c();
+        break;
+      case s.ENTER:
+      case s.SPACE:
+        A(e);
+        break;
+      case s.ARROW_DOWN: {
+        e.preventDefault();
+        let r = t.nextElementSibling;
+        for (; r; ) {
+          if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
+            r.focus();
+            break;
+          }
+          r = r.nextElementSibling;
+        }
+        break;
+      }
+      case s.ARROW_UP: {
+        e.preventDefault();
+        e: {
+          let r = t.previousElementSibling;
           for (; r; ) {
             if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
               r.focus();
-              break;
-            }
-            r = r.nextElementSibling;
-          }
-          break;
-        }
-        case s.ARROW_UP: {
-          e.preventDefault();
-          e: {
-            let r = t.previousElementSibling;
-            for (; r; ) {
-              if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
-                r.focus();
-                break e;
-              }
-              r = r.previousElementSibling;
+              break e;
             }
-            u && E.current && E.current.focus();
+            r = r.previousElementSibling;
           }
-          break;
+          u && E.current && E.current.focus();
         }
-        case s.TAB:
-          c();
-          break;
+        break;
       }
-    },
-    [c, u, A]
-  ), ae = l(
-    (e) => {
-      const t = e.target.value;
-      d(t.toLowerCase());
-    },
-    [d]
-  ), ie = l(
-    (e) => {
-      e.preventDefault(), i((t) => !t), o && f(L.current);
-    },
-    [i, o, f]
-  );
+      case s.TAB:
+        c();
+        break;
+    }
+  }, [c, u, A]), ae = l((e) => {
+    const t = e.target.value;
+    d(t.toLowerCase());
+  }, [d]), ie = l((e) => {
+    e.preventDefault(), i((t) => !t), o && f(L.current);
+  }, [i, o, f]);
   return b(() => {
     var e;
     o && u && ((e = E.current) == null || e.focus());
-  }, [u, o]), /* @__PURE__ */ T("div", { className: se, children: [
-    /* @__PURE__ */ T(
-      Ae,
-      {
-        id: D ?? void 0,
-        appliedFilterNumber: te,
-        active: n,
-        filterInputRef: E,
-        filterable: u,
-        isInvalid: X,
-        isValid: q,
-        onButtonKeyDown: oe,
-        onInput: ae,
-        multiSelect: m,
-        placeholder: z,
-        readonly: j,
-        selectListId: v.current,
-        showList: o,
-        toggleButtonRef: k,
-        toggleList: ie,
-        withoutCollapseIndicator: V,
-        ariaDescribedBy: !J && D ? `${D}${pe}` : ""
-      }
-    ),
-    /* @__PURE__ */ T(
-      be,
-      {
-        popoverClassNameModifiers: M,
-        setToTargetWidth: Q,
-        dismissPopover: re,
-        active: n,
-        commitActions: ne,
-        items: g,
-        multiSelect: m,
-        onKeyDown: ce,
-        onSelect: A,
-        selectListId: v.current,
-        ref: p,
-        toggleButtonRef: k,
-        renderListItem: G,
-        showList: o,
-        showOverlay: Z,
-        textFilter: h,
-        fitPosition: ee
-      }
-    )
-  ] });
+  }, [u, o]), w("div", {
+    className: se,
+    children: [w(Ae, {
+      id: D ?? void 0,
+      appliedFilterNumber: te,
+      active: n,
+      filterInputRef: E,
+      filterable: u,
+      isInvalid: X,
+      isValid: q,
+      onButtonKeyDown: oe,
+      onInput: ae,
+      multiSelect: m,
+      placeholder: z,
+      readonly: j,
+      selectListId: v.current,
+      showList: o,
+      toggleButtonRef: k,
+      toggleList: ie,
+      withoutCollapseIndicator: V,
+      ariaDescribedBy: !J && D ? `${D}${pe}` : ""
+    }), w(be, {
+      popoverClassNameModifiers: M,
+      setToTargetWidth: Q,
+      dismissPopover: re,
+      active: n,
+      commitActions: ne,
+      items: g,
+      multiSelect: m,
+      onKeyDown: ce,
+      onSelect: A,
+      selectListId: v.current,
+      ref: p,
+      toggleButtonRef: k,
+      renderListItem: G,
+      showList: o,
+      showOverlay: Z,
+      textFilter: h,
+      fitPosition: ee
+    })]
+  });
 }, Ke = ke;
 export {
   Ke as default

package/dist/es/components/internal/FormFields/Select/components/SelectButton.js

@@ -1,4 +1,3 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import T from "classnames";
 import { useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import S from "../../../../../core/Context/useCoreContext.js";
@@ -7,6 +6,7 @@ import f from "../../../Typography/Typography.js";
 import L from "../../../SVGIcons/ChevronDown.js";
 import { TypographyElement as u, TypographyVariant as B } from "../../../Typography/types.js";
 import { DROPDOWN_BUTTON_CLASS as p, DROPDOWN_BUTTON_ACTIVE_CLASS as R, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as h, DROPDOWN_BUTTON_READONLY_CLASS as y, DROPDOWN_BUTTON_INVALID_CLASS as A, DROPDOWN_BUTTON_VALID_CLASS as E, DROPDOWN_BUTTON_ICON_CLASS as P, DROPDOWN_BUTTON_TEXT_CLASS as U, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as g, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as x, DROPDOWN_BUTTON_CLASSNAME as I } from "../constants.js";
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
 import b from "../../../Img/Img.js";
 import w from "../../../Button/Button.js";
@@ -20,72 +20,92 @@ const v = ({
   ...n
 }) => {
   const r = N(() => i ? T(I, o) : o, [o, i]);
-  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
-    w,
-    {
-      ...n,
-      className: r,
-      disabled: m,
-      variant: C.SECONDARY,
-      ref: l
-    }
-  );
+  return i ? a("div", {
+    ...n,
+    className: r,
+    ref: l
+  }) : a(w, {
+    ...n,
+    className: r,
+    disabled: m,
+    variant: C.SECONDARY,
+    ref: l
+  });
 }, F = (e) => {
   var d;
-  const { i18n: m } = S(), { active: o, filterable: i, multiSelect: l, placeholder: n, readonly: r, showList: s, withoutCollapseIndicator: _ } = e, O = N(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = N(() => V(l) ? void 0 : o[0], [o, l]), D = N(() => {
+  const {
+    i18n: m
+  } = S(), {
+    active: o,
+    filterable: i,
+    multiSelect: l,
+    placeholder: n,
+    readonly: r,
+    showList: s,
+    withoutCollapseIndicator: _
+  } = e, O = N(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = N(() => V(l) ? void 0 : o[0], [o, l]), D = N(() => {
     var c;
     return ((c = t == null ? void 0 : t.name) == null ? void 0 : c.trim()) || O;
   }, [t, O]);
-  return /* @__PURE__ */ a(
-    v,
-    {
-      active: o,
-      disabled: r,
-      "aria-disabled": r,
+  return a(v, {
+    active: o,
+    disabled: r,
+    "aria-disabled": r,
+    "aria-expanded": s,
+    "aria-haspopup": "listbox",
+    className: T(p, {
+      [R]: s,
+      [h]: !!o.length,
+      [y]: r,
+      [A]: e.isInvalid,
+      [E]: e.isValid
+    }),
+    filterable: i,
+    onClick: r ? void 0 : e.toggleList,
+    onKeyDown: r ? void 0 : e.onButtonKeyDown,
+    role: i ? "button" : void 0,
+    tabIndex: 0,
+    title: D,
+    toggleButtonRef: e.toggleButtonRef,
+    type: i ? "" : "button",
+    "aria-describedby": e.ariaDescribedBy,
+    id: e.id ?? "",
+    children: [s && i ? a("input", {
+      "aria-autocomplete": "list",
+      "aria-controls": e.selectListId,
       "aria-expanded": s,
-      "aria-haspopup": "listbox",
-      className: T(p, {
-        [R]: s,
-        [h]: !!o.length,
-        [y]: r,
-        [A]: e.isInvalid,
-        [E]: e.isValid
-      }),
-      filterable: i,
-      onClick: r ? void 0 : e.toggleList,
-      onKeyDown: r ? void 0 : e.onButtonKeyDown,
-      role: i ? "button" : void 0,
-      tabIndex: 0,
-      title: D,
-      toggleButtonRef: e.toggleButtonRef,
-      type: i ? "" : "button",
-      "aria-describedby": e.ariaDescribedBy,
-      id: e.id ?? "",
-      children: [
-        s && i ? /* @__PURE__ */ a(
-          "input",
-          {
-            "aria-autocomplete": "list",
-            "aria-controls": e.selectListId,
-            "aria-expanded": s,
-            "aria-owns": e.selectListId,
-            autoComplete: "off",
-            className: "adyen-pe-filter-input",
-            onInput: e.onInput,
-            placeholder: O,
-            ref: e.filterInputRef,
-            role: "combobox",
-            type: "text"
-          }
-        ) : /* @__PURE__ */ a(W, { children: [
-          (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(b, { className: P, src: t.icon, alt: t.name.trim() }),
-          /* @__PURE__ */ a("span", { className: U, children: ((d = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : d.trim()) || (t == null ? void 0 : t.name.trim()) || O }),
-          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: g, children: /* @__PURE__ */ a(f, { el: u.SPAN, variant: B.BODY, stronger: !0, children: e.appliedFilterNumber }) })
-        ] }),
-        !_ && /* @__PURE__ */ a("span", { className: x, children: /* @__PURE__ */ a(L, { role: "presentation" }) })
-      ]
-    }
-  );
+      "aria-owns": e.selectListId,
+      autoComplete: "off",
+      className: "adyen-pe-filter-input",
+      onInput: e.onInput,
+      placeholder: O,
+      ref: e.filterInputRef,
+      role: "combobox",
+      type: "text"
+    }) : a(W, {
+      children: [(t == null ? void 0 : t.icon) && a(b, {
+        className: P,
+        src: t.icon,
+        alt: t.name.trim()
+      }), a("span", {
+        className: U,
+        children: ((d = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : d.trim()) || (t == null ? void 0 : t.name.trim()) || O
+      }), l && e.appliedFilterNumber > 0 && a("div", {
+        className: g,
+        children: a(f, {
+          el: u.SPAN,
+          variant: B.BODY,
+          stronger: !0,
+          children: e.appliedFilterNumber
+        })
+      })]
+    }), !_ && a("span", {
+      className: x,
+      children: a(L, {
+        role: "presentation"
+      })
+    })]
+  });
 }, Z = F;
 export {
   Z as default

package/dist/es/components/internal/FormFields/Select/components/SelectList.js

@@ -1,4 +1,3 @@
-import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useResponsiveViewport as R, mediaQueries as w } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
 import b from "../../../Popover/Popover.js";
 import { PopoverContainerSize as x, PopoverContainerVariant as A, PopoverContainerPosition as V } from "../../../Popover/types.js";
@@ -8,63 +7,69 @@ import { memo as h } from "../../../../../external/preact/compat/dist/compat.mod
 import { useMemo as l } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { DROPDOWN_LIST_CLASS as F, DROPDOWN_LIST_ACTIVE_CLASS as W, DROPDOWN_ELEMENT_CLASS as z, DROPDOWN_ELEMENT_NO_OPTION_CLASS as j } from "../constants.js";
 import q, { renderListItemDefault as y } from "./SelectListItem.js";
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { fixedForwardRef as B } from "../../../../../utils/preact/fixedForwardRef.js";
 import { isFunction as Q } from "../../../../../utils/value/is.js";
 import { boolOrFalse as U } from "../../../../../utils/value/bool.js";
-const $ = B(
-  ({
-    active: c,
-    commitActions: p,
-    items: d,
-    multiSelect: s,
-    onKeyDown: f,
-    onSelect: u,
-    renderListItem: t,
-    selectListId: O,
-    showList: i,
-    textFilter: n,
-    toggleButtonRef: S,
-    dismissPopover: C,
+const $ = B(({
+  active: c,
+  commitActions: p,
+  items: d,
+  multiSelect: s,
+  onKeyDown: f,
+  onSelect: u,
+  renderListItem: t,
+  selectListId: O,
+  showList: i,
+  textFilter: n,
+  toggleButtonRef: S,
+  dismissPopover: C,
+  setToTargetWidth: N,
+  popoverClassNameModifiers: P,
+  showOverlay: _,
+  fitPosition: v
+}, D) => {
+  const {
+    i18n: E
+  } = g(), L = R(w.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), T = a(F, {
+    [W]: i
+  }), I = a(z, j), M = l(() => Q(t) ? t : y, [t]), r = l(() => U(s), [s]);
+  return i ? o(b, {
+    classNameModifiers: P,
+    actions: r ? p : void 0,
+    disableFocusTrap: !0,
+    divider: !0,
+    dismiss: C,
+    dismissible: !1,
+    open: i,
     setToTargetWidth: N,
-    popoverClassNameModifiers: P,
-    showOverlay: _,
-    fitPosition: v
-  }, D) => {
-    const { i18n: E } = g(), L = R(w.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), T = a(F, { [W]: i }), I = a(z, j), M = l(() => Q(t) ? t : y, [t]), r = l(() => U(s), [s]);
-    return i ? /* @__PURE__ */ o(
-      b,
-      {
-        classNameModifiers: P,
-        actions: r ? p : void 0,
-        disableFocusTrap: !0,
-        divider: !0,
-        dismiss: C,
-        dismissible: !1,
-        open: i,
-        setToTargetWidth: N,
-        containerSize: x.MEDIUM,
-        variant: A.POPOVER,
-        targetElement: S,
-        withContentPadding: !1,
-        position: V.BOTTOM,
-        showOverlay: _ && L,
-        fitPosition: v,
-        children: /* @__PURE__ */ o("ul", { className: T, id: O, ref: D, role: "listbox", "aria-multiselectable": r, children: m.length ? m.map((e) => /* @__PURE__ */ o(
-          q,
-          {
-            item: e,
-            multiSelect: r,
-            onKeyDown: f,
-            onSelect: u,
-            renderListItem: M,
-            selected: c.includes(e)
-          },
-          e.id
-        )) : /* @__PURE__ */ o("div", { className: I, children: E.get("select.noOptionsFound") }) })
-      }
-    ) : null;
-  }
-), se = h($);
+    containerSize: x.MEDIUM,
+    variant: A.POPOVER,
+    targetElement: S,
+    withContentPadding: !1,
+    position: V.BOTTOM,
+    showOverlay: _ && L,
+    fitPosition: v,
+    children: o("ul", {
+      className: T,
+      id: O,
+      ref: D,
+      role: "listbox",
+      "aria-multiselectable": r,
+      children: m.length ? m.map((e) => o(q, {
+        item: e,
+        multiSelect: r,
+        onKeyDown: f,
+        onSelect: u,
+        renderListItem: M,
+        selected: c.includes(e)
+      }, e.id)) : o("div", {
+        className: I,
+        children: E.get("select.noOptionsFound")
+      })
+    })
+  }) : null;
+}), se = h($);
 export {
   se as default
 };