@adyen/adyen-platform-experience-web 1.0.1 → 1.0.3

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,10 +1,10 @@
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import p from "../../../FormFields/InputBase.js";
+import A from "../../../FormFields/InputBase.js";
 import "./AmountFilter.scss.js";
-import { useState as A, useCallback as g, useEffect as x, useMemo as b } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as g, useCallback as p, useEffect as x, useMemo as b } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import h from "../../../../../core/Context/useCoreContext.js";
 import { AMOUNT_MULTIPLIER as T } from "./constants.js";
-import { isUndefined as i } from "../../../../../utils/value/is.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { isUndefined as o } from "../../../../../utils/value/is.js";
 import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
 const R = ({
   onChange: l,
@@ -12,62 +12,71 @@ const R = ({
   onValueUpdated: s,
   selectedCurrencies: I,
   availableCurrencies: M,
-  value: y,
+  value: V,
   ...m
 }) => {
-  const { i18n: n } = h(), [e, c] = A(
-    i(m.minAmount) ? void 0 : parseFloat(m.minAmount) / T
-  ), [t, v] = A(
-    i(m.maxAmount) ? void 0 : parseFloat(m.maxAmount) / T
-  ), d = g(() => {
-    l({ minAmount: e, maxAmount: t });
-  }, [t, e, l]), f = g(() => {
-    l({ minAmount: void 0, maxAmount: void 0 }), v(void 0), c(void 0);
+  const {
+    i18n: n
+  } = h(), [e, c] = g(o(m.minAmount) ? void 0 : parseFloat(m.minAmount) / T), [t, d] = g(o(m.maxAmount) ? void 0 : parseFloat(m.maxAmount) / T), v = p(() => {
+    l({
+      minAmount: e,
+      maxAmount: t
+    });
+  }, [t, e, l]), f = p(() => {
+    l({
+      minAmount: void 0,
+      maxAmount: void 0
+    }), d(void 0), c(void 0);
   }, [l]);
   x(() => {
-    u === F.APPLY && d(), u === F.CLEAR && f();
-  }, [d, f, u]);
-  const o = b(() => ({ minAmount: e, maxAmount: t }), [t, e]);
+    u === F.APPLY && v(), u === F.CLEAR && f();
+  }, [v, f, u]);
+  const i = b(() => ({
+    minAmount: e,
+    maxAmount: t
+  }), [t, e]);
   return x(() => {
-    o.minAmount || o.maxAmount ? s(`${o.minAmount}-${o.maxAmount}`) : s(null);
-  }, [o, s]), /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter", children: [
-    /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ r("label", { htmlFor: "minValue", children: `${n.get("from")}:` }),
-      /* @__PURE__ */ r(
-        p,
-        {
-          lang: n.locale,
-          name: "minValue",
-          type: "number",
-          value: e,
-          onInput: (a) => {
-            a.currentTarget && c(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
-          },
-          min: 0,
-          isInvalid: e ? e < 0 : !1,
-          errorMessage: n.get("noNegativeNumbersAllowed")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ r("label", { htmlFor: "maxValue", children: `${n.get("to")}:` }),
-      /* @__PURE__ */ r(
-        p,
-        {
-          lang: n.locale,
-          name: "maxValue",
-          type: "number",
-          value: t,
-          onInput: (a) => {
-            a.currentTarget && v(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
-          },
-          min: e,
-          isInvalid: !i(t) && !i(e) && t < e,
-          errorMessage: n.get("toValueShouldBeGreaterThanTheFromValue")
-        }
-      )
-    ] })
-  ] });
+    i.minAmount || i.maxAmount ? s(`${i.minAmount}-${i.maxAmount}`) : s(null);
+  }, [i, s]), r("div", {
+    className: "adyen-pe-range-selection-filter",
+    children: [r("div", {
+      className: "adyen-pe-range-selection-filter__input",
+      children: [r("label", {
+        htmlFor: "minValue",
+        children: `${n.get("from")}:`
+      }), r(A, {
+        "data-testid": "minValueFilter",
+        lang: n.locale,
+        name: "minValue",
+        type: "number",
+        value: e,
+        onInput: (a) => {
+          a.currentTarget && c(a.currentTarget.value !== "" ? a.currentTarget.value : void 0);
+        },
+        min: 0,
+        isInvalid: e ? e < 0 : !1,
+        errorMessage: n.get("noNegativeNumbersAllowed")
+      })]
+    }), r("div", {
+      className: "adyen-pe-range-selection-filter__input",
+      children: [r("label", {
+        htmlFor: "maxValue",
+        children: `${n.get("to")}:`
+      }), r(A, {
+        "data-testid": "maxValueFilter",
+        lang: n.locale,
+        name: "maxValue",
+        type: "number",
+        value: t,
+        onInput: (a) => {
+          a.currentTarget && d(a.currentTarget.value !== "" ? a.currentTarget.value : void 0);
+        },
+        min: e,
+        isInvalid: !o(t) && !o(e) && t < e,
+        errorMessage: n.get("toValueShouldBeGreaterThanTheFromValue")
+      })]
+    })]
+  });
 };
 export {
   R as RangeSelection

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -1,4 +1,3 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useResponsiveViewport as g, mediaQueries as V } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
 import Y from "../../components/FilterButton/FilterButton.js";
 import q from "../../../Popover/Popover.js";
@@ -9,6 +8,7 @@ import L from "../../../../../hooks/element/useUniqueIdentifier.js";
 import { memo as j } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as E, useCallback as O, useEffect as A, useState as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import G from "../../../FormFields/InputText.js";
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "../../../../../hooks/useBooleanState/useBooleanState.js";
 import J from "../../../../../hooks/useCommitAction/useCommitAction.js";
 import { Fragment as K } from "../../../../../external/preact/dist/preact.module.js";
@@ -17,31 +17,44 @@ import { isNull as X } from "../../../../../utils/value/is.js";
 import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
 const Z = (s) => !s || W(s), ee = (() => {
   const s = (e) => {
-    const { editAction: f, name: a, onChange: u, onValueUpdated: r } = e, [l, n] = Q(e.value), m = O(
-      (t) => {
-        const p = t.target.value.trim();
-        n(p), r(p);
-      },
-      [r]
-    );
+    const {
+      editAction: f,
+      name: a,
+      onChange: u,
+      onValueUpdated: r
+    } = e, [l, n] = Q(e.value), m = O((t) => {
+      const p = t.target.value.trim();
+      n(p), r(p);
+    }, [r]);
     return A(() => {
       if (f === _.CLEAR) {
         const t = "";
         n(t), r(t), u(t);
       }
       f === _.APPLY && u(l ?? "");
-    }, [l, f, u, r]), /* @__PURE__ */ i(G, { name: a, value: l, onInput: m });
+    }, [l, f, u, r]), i(G, {
+      name: a,
+      value: l,
+      onInput: m
+    });
   };
-  return (e) => /* @__PURE__ */ i(s, { ...e });
-})(), te = ({ render: s, ...e }) => {
+  return (e) => i(s, {
+    ...e
+  });
+})(), te = ({
+  render: s,
+  ...e
+}) => {
   var N;
-  const f = g(V.down.xs), [a, u] = c(!1), [r, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [p, v] = c(!1), [S, h] = c(!1), [I, M] = c(n(e.value)), b = L(), T = E(() => s ?? ee, [s]), x = O(
-    (o) => {
-      const d = n(o ?? void 0);
-      t(d), M(X(o)), h(p ? o !== e.value : !d);
-    },
-    [n, t, M, h, p, e.value]
-  ), { commitAction: k, commitActionButtons: $, committing: C, resetCommitAction: P } = J({
+  const f = g(V.down.xs), [a, u] = c(!1), [r, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [p, v] = c(!1), [S, h] = c(!1), [I, M] = c(n(e.value)), b = L(), T = E(() => s ?? ee, [s]), x = O((o) => {
+    const d = n(o ?? void 0);
+    t(d), M(X(o)), h(p ? o !== e.value : !d);
+  }, [n, t, M, h, p, e.value]), {
+    commitAction: k,
+    commitActionButtons: $,
+    committing: C,
+    resetCommitAction: P
+  } = J({
     applyDisabled: I || !S,
     resetDisabled: m
   }), [y, F] = E(() => {
@@ -59,78 +72,58 @@ const Z = (s) => !s || W(s), ee = (() => {
     C && y(), t(m);
   }, [C, y, t, m]);
   const R = g(V.only.sm), U = g(V.only.md);
-  return /* @__PURE__ */ i(K, { children: [
-    /* @__PURE__ */ i("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
-      () => /* @__PURE__ */ i(
-        Y,
-        {
-          classNameModifiers: [
-            ...e.appliedFilterAmount ? ["with-counter"] : [],
-            ...e.classNameModifiers ?? [],
-            ...a ? ["active"] : [],
-            ...m ? [] : ["has-selection"]
-          ],
-          onClick: a ? y : F,
-          tabIndex: 0,
-          ref: b,
-          children: /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__default-container", children: [
-            /* @__PURE__ */ i(
-              D,
-              {
-                el: w.SPAN,
-                variant: B.BODY,
-                stronger: !0,
-                className: "adyen-pe-filter-button__label",
-                children: e.label
-              }
-            ),
-            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
-              D,
-              {
-                el: w.SPAN,
-                variant: B.BODY,
-                stronger: !0,
-                className: "adyen-pe-filter-button__counter",
-                children: e.appliedFilterAmount
-              }
-            ) })
-          ] })
-        }
-      ),
-      [
-        e.appliedFilterAmount,
-        e.classNameModifiers,
-        e.label,
-        a,
-        m,
-        y,
-        F,
-        b
-      ]
-    ) }),
-    a && /* @__PURE__ */ i(
-      q,
-      {
-        actions: $,
-        title: (N = e.title) == null ? void 0 : N.trim(),
-        variant: z.POPOVER,
-        modifiers: ["filter"],
-        open: a,
-        "aria-label": `${e.label}`,
-        dismiss: y,
-        dismissible: !1,
-        withContentPadding: e.withContentPadding ?? !0,
-        divider: !0,
-        targetElement: b,
-        disableFocusTrap: !1,
-        position: H.BOTTOM,
-        containerSize: e.containerSize,
-        showOverlay: f,
-        fitPosition: R || U,
-        children: T({ ...e, editAction: k, onValueUpdated: x })
-      }
-    )
-  ] });
+  return i(K, {
+    children: [i("div", {
+      className: `adyen-pe-filter adyen-pe-filter--${e.type}`,
+      children: E(() => i(Y, {
+        classNameModifiers: [...e.appliedFilterAmount ? ["with-counter"] : [], ...e.classNameModifiers ?? [], ...a ? ["active"] : [], ...m ? [] : ["has-selection"]],
+        onClick: a ? y : F,
+        tabIndex: 0,
+        ref: b,
+        children: i("div", {
+          className: "adyen-pe-filter-button__default-container",
+          children: [i(D, {
+            el: w.SPAN,
+            variant: B.BODY,
+            stronger: !0,
+            className: "adyen-pe-filter-button__label",
+            children: e.label
+          }), !!e.appliedFilterAmount && i("div", {
+            className: "adyen-pe-filter-button__counter-wrapper",
+            children: i(D, {
+              el: w.SPAN,
+              variant: B.BODY,
+              stronger: !0,
+              className: "adyen-pe-filter-button__counter",
+              children: e.appliedFilterAmount
+            })
+          })]
+        })
+      }), [e.appliedFilterAmount, e.classNameModifiers, e.label, a, m, y, F, b])
+    }), a && i(q, {
+      actions: $,
+      title: (N = e.title) == null ? void 0 : N.trim(),
+      variant: z.POPOVER,
+      modifiers: ["filter"],
+      open: a,
+      "aria-label": `${e.label}`,
+      dismiss: y,
+      dismissible: !1,
+      withContentPadding: e.withContentPadding ?? !0,
+      divider: !0,
+      targetElement: b,
+      disableFocusTrap: !1,
+      position: H.BOTTOM,
+      containerSize: e.containerSize,
+      showOverlay: f,
+      fitPosition: R || U,
+      children: T({
+        ...e,
+        editAction: k,
+        onValueUpdated: x
+      })
+    })]
+  });
 }, be = j(te);
 export {
   be as default

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilter.js

@@ -1,9 +1,9 @@
-import { jsx as d } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import I from "./DateFilterCore.js";
+import d from "./DateFilterCore.js";
 import { FilterParam as e } from "../../../../types.js";
-import { useMemo as C, useState as O, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import _ from "../../../../../core/Context/useCoreContext.js";
+import { useMemo as C, useState as I, useCallback as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import P from "../../../../../core/Context/useCoreContext.js";
 import { DateRangeFilterParam as l } from "./types.js";
+import { jsx as _ } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { EMPTY_OBJECT as A } from "../../../../../utils/value/constants.js";
 const S = ({
   timezone: u,
@@ -16,48 +16,44 @@ const S = ({
   untilDate: R,
   updateFilters: a
 }) => {
-  const { i18n: o } = _(), t = C(() => o.get(r.current.defaultTimeRange), [o]), [D, E] = O(t), f = P(
-    (g = A) => {
-      for (const [p, n] of Object.entries(g)) {
-        switch (p) {
-          case "selectedPresetOption":
-            E(n || t);
-            break;
-          case l.FROM:
-            a({
-              [e.CREATED_SINCE]: n || r.current.defaultFilterParams[e.CREATED_SINCE]
-            });
-            break;
-          case l.TO:
-            a({
-              [e.CREATED_UNTIL]: n || r.current.defaultFilterParams[e.CREATED_UNTIL]
-            });
-            break;
-          default:
-            return;
-        }
-        c();
+  const {
+    i18n: o
+  } = P(), t = C(() => o.get(r.current.defaultTimeRange), [o]), [D, E] = I(t), f = O((g = A) => {
+    for (const [p, n] of Object.entries(g)) {
+      switch (p) {
+        case "selectedPresetOption":
+          E(n || t);
+          break;
+        case l.FROM:
+          a({
+            [e.CREATED_SINCE]: n || r.current.defaultFilterParams[e.CREATED_SINCE]
+          });
+          break;
+        case l.TO:
+          a({
+            [e.CREATED_UNTIL]: n || r.current.defaultFilterParams[e.CREATED_UNTIL]
+          });
+          break;
+        default:
+          return;
       }
-    },
-    [t, c, a]
-  );
-  return C(() => !s && E(t), [s, t]), /* @__PURE__ */ d(
-    I,
-    {
-      label: o.get("dateRange"),
-      name: e.CREATED_SINCE,
-      sinceDate: T,
-      untilDate: R ?? new Date(m).toString(),
-      from: i[e.CREATED_SINCE],
-      to: i[e.CREATED_UNTIL],
-      selectedPresetOption: D,
-      timeRangePresetOptions: r.current.timeRangeOptions,
-      timezone: u,
-      onChange: f,
-      showTimezoneInfo: !0,
-      now: m
+      c();
     }
-  );
+  }, [t, c, a]);
+  return C(() => !s && E(t), [s, t]), _(d, {
+    label: o.get("dateRange"),
+    name: e.CREATED_SINCE,
+    sinceDate: T,
+    untilDate: R ?? new Date(m).toString(),
+    from: i[e.CREATED_SINCE],
+    to: i[e.CREATED_UNTIL],
+    selectedPresetOption: D,
+    timeRangePresetOptions: r.current.timeRangeOptions,
+    timezone: u,
+    onChange: f,
+    showTimezoneInfo: !0,
+    now: m
+  });
 }, U = S;
 export {
   U as default