@adyen/adyen-platform-experience-web 1.1.1 → 1.2.0

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

@@ -1,5 +1,6 @@
+import { jsx as T } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import fe from "classnames";
-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 { useState as w, 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";
@@ -7,28 +8,27 @@ 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";
-import { boolOrFalse as De } from "../../../../utils/value/bool.js";
+import { boolOrFalse as he } from "../../../../utils/value/bool.js";
 import { EMPTY_ARRAY as Y } from "../../../../utils/value/constants.js";
-import { noop as he } from "../../../../utils/common.js";
+import { noop as De } from "../../../../utils/common.js";
 const ke = ({
-  className: F,
-  classNameModifiers: O = Y,
+  className: O,
+  classNameModifiers: P = Y,
   popoverClassNameModifiers: M,
   items: g = Y,
   filterable: u = !1,
   multiSelect: m = !1,
   readonly: j = !1,
-  onChange: P = he,
+  onChange: F = De,
   selected: H,
   name: _,
   isInvalid: X,
   isValid: q,
   placeholder: z,
-  uniqueId: D,
+  uniqueId: h,
   renderListItem: G,
   isCollatingErrors: J,
   setToTargetWidth: Q,
@@ -36,42 +36,28 @@ const ke = ({
   showOverlay: Z = !1,
   fitPosition: ee
 }) => {
-  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, x] = T(0), B = a(), S = a(!0), C = a(!1), L = a(n), N = a(n), re = l(() => {
+  const { resetSelection: f, select: I, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [D, d] = w(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, B] = w(0), x = a(), S = a(!0), C = a(!1), L = a(n), y = 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]: he(m) },
+      ...P.map((e) => `${K}--${e}`),
+      O
+    ]),
+    [O, P, m]
+  ), { commitAction: N, 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: _
-      }
-    });
-  }, [_, P, n]);
+    const e = `${n.map(({ id: t }) => t)}`;
+    F({ target: { value: e, name: _ } });
+  }, [_, F, n]);
   b(() => {
-    switch (y) {
+    switch (N) {
       case U.APPLY:
         R();
         break;
@@ -79,48 +65,54 @@ const ke = ({
         f(), C.current = !0;
         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]);
+  }, [N, 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]
+  );
   b(() => {
-    N.current !== n && (N.current = n, (!m || C.current) && (R(), c())), C.current = !1;
+    y.current !== n && (y.current = n, (!m || C.current) && (R(), c())), C.current = !1;
   }, [c, R, m, n]), b(() => {
-    W && (x(n.length), c());
-  }, [W, c, x, 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;
+    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;
-        }
-        break;
-      case s.ARROW_DOWN:
-      case s.ARROW_UP:
-        break;
-      default:
-        return;
-    }
-    e.preventDefault(), i(!0);
-  }, [c, u, A, o, i, h]);
+        case s.ENTER:
+        case s.SPACE:
+          if (u && o) {
+            if (e.key === s.ENTER)
+              if (D)
+                A(e);
+              else
+                break;
+            return;
+          }
+          break;
+        case s.ARROW_DOWN:
+        case s.ARROW_UP:
+          break;
+        default:
+          return;
+      }
+      e.preventDefault(), i(!0);
+    },
+    [c, u, A, o, i, D]
+  );
   b(() => {
-    o && (cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
+    o && (cancelAnimationFrame(x.current), x.current = requestAnimationFrame(() => {
       var e;
       e: {
         let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
@@ -138,97 +130,112 @@ 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;
-        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;
+  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 e;
+              break;
             }
-            r = r.previousElementSibling;
+            r = r.nextElementSibling;
           }
-          u && E.current && E.current.focus();
+          break;
         }
-        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;
+            }
+            u && E.current && E.current.focus();
+          }
+          break;
+        }
+        case s.TAB:
+          c();
+          break;
       }
-      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]);
+    },
+    [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]), 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
-    })]
-  });
+  }, [u, o]), /* @__PURE__ */ T("div", { className: se, children: [
+    /* @__PURE__ */ T(
+      Ae,
+      {
+        id: h ?? 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 && h ? `${h}${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: D,
+        fitPosition: ee
+      }
+    )
+  ] });
 }, Ke = ke;
 export {
   Ke as default

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

@@ -1,3 +1,4 @@
+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";
@@ -6,7 +7,6 @@ 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,92 +20,72 @@ const v = ({
   ...n
 }) => {
   const r = N(() => i ? T(I, o) : o, [o, i]);
-  return i ? a("div", {
-    ...n,
-    className: r,
-    ref: l
-  }) : a(w, {
-    ...n,
-    className: r,
-    disabled: m,
-    variant: C.SECONDARY,
-    ref: l
-  });
+  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ 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 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,
+  return /* @__PURE__ */ a(
+    v,
+    {
+      active: o,
+      disabled: r,
+      "aria-disabled": r,
       "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"
-    }) : 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"
-      })
-    })]
-  });
+      "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" }) })
+      ]
+    }
+  );
 }, Z = F;
 export {
   Z as default