@adyen/adyen-platform-experience-web 1.0.0-beta.3 → 1.0.0

package/dist/es/components/internal/DatePicker/DatePicker.js

@@ -1,26 +1,27 @@
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "classnames";
 import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as y, useMemo as i, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as N, useMemo as r, useCallback as y } from "../../../external/preact/hooks/dist/hooks.module.js";
 import O from "../../../core/Context/useCoreContext.js";
-import { noop as P } from "../../../utils/common/index.js";
-import x from "../Calendar/hooks/useTimezone.js";
+import P from "../Calendar/hooks/useTimezone.js";
 import { DEFAULT_FIRST_WEEK_DAY as I } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
 import M from "../Calendar/hooks/useCalendarControlsRendering.js";
 import "./DatePicker.scss.js";
-import v from "../../../hooks/useReflex/hooks/useReflex.js";
-import D from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import E from "../Calendar/Calendar.js";
+import v from "../../../hooks/useReflex/useReflex.js";
+import x from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import D from "../Calendar/Calendar.js";
 import g from "../Calendar/calendar/facade/index.js";
-import { EMPTY_OBJECT as S } from "../../../utils/common/constants.js";
-const A = p((e, u) => {
-  const { i18n: r } = O(), [T, k] = M(e.renderControl), [C, a] = y(performance.now()), t = i(() => e.showTimezoneInfo !== !1, [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = x({ timezone: e.timezone, withClock: t }), z = i(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = i(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = v(P, u), R = N(() => {
+import { boolOrTrue as E } from "../../../utils/value/bool.js";
+import { EMPTY_OBJECT as S } from "../../../utils/value/constants.js";
+import { noop as A } from "../../../utils/common.js";
+const b = p((e, u) => {
+  const { i18n: i } = O(), [T, k] = M(e.renderControl), [C, a] = N(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = P({ timezone: e.timezone, withClock: t }), z = r(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = v(A, u), R = y(() => {
     var l, s, d, f, h;
     a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((d = o.current) == null ? void 0 : d.from), +((f = o.current) == null ? void 0 : f.to)));
   }, [a, e.onHighlight]);
   return /* @__PURE__ */ n("div", { className: z, children: [
     /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
-      D,
+      x,
       {
         now: e.now,
         calendarRef: o,
@@ -31,9 +32,9 @@ const A = p((e, u) => {
         timezone: e.timezone
       }
     ) }),
-    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": r.get("calendar.controls") }),
+    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
     /* @__PURE__ */ n(
-      E,
+      D,
       {
         ...e,
         ref: o,
@@ -46,9 +47,9 @@ const A = p((e, u) => {
         renderControl: T
       }
     ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: r.get("calendar.timezone", w) })
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", w) })
   ] });
-}), V = A;
+}), Z = b;
 export {
-  V as default
+  Z as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js

@@ -1,59 +1,60 @@
-import { useState as m, useRef as P, useMemo as i, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import z from "../../../../../core/Context/useCoreContext.js";
-import I from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import { useState as m, useRef as C, useMemo as a, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import I from "../../../../../core/Context/useCoreContext.js";
+import T from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
 import N from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
 import q from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
 import E from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
 import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
 import Z from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
 const X = () => Object.freeze({
-  "rangePreset.last7Days": I(7),
+  "rangePreset.last7Days": T(7),
+  "rangePreset.last30Days": T(30),
   "rangePreset.thisWeek": N(),
   "rangePreset.lastWeek": q(),
   "rangePreset.thisMonth": E(),
   "rangePreset.lastMonth": K(),
   "rangePreset.yearToDate": Z()
 }), Y = ({
-  now: a = Date.now(),
+  now: i = Date.now(),
   options: r,
-  selectedOption: u,
-  timezone: l
+  selectedOption: l,
+  timezone: u
 }) => {
-  const { i18n: s } = z(), [T, h] = m(), [W, D] = m(), [f, g] = m(), S = P(), d = P(), [e, b, n] = i(() => {
+  const { i18n: s } = I(), [W, h] = m(), [j, D] = m(), [f, g] = m(), S = C(), d = C(), [e, y, n] = a(() => {
     const o = s.get("rangePreset.custom"), t = Object.keys(r), c = Object.freeze(t.map((O) => s.get(O)));
-    return [o, (O, F = c) => {
-      const M = F.findIndex((v) => v === O);
-      return r[t[M]];
+    return [o, (O, M = c) => {
+      const v = M.findIndex((z) => z === O);
+      return r[t[v]];
     }, c];
-  }, [s, r]), [k, y] = m(u === e), C = i(() => Object.freeze([...n, e]), [e, n]), j = i(
-    () => k ? C : n,
-    [k, n, C]
+  }, [s, r]), [P, b] = m(l === e), k = a(() => Object.freeze([...n, e]), [e, n]), x = a(
+    () => P ? k : n,
+    [P, n, k]
   ), p = R(
     (o) => {
-      const t = b(o, n);
-      t && (h(s.fullDate(t.from)), D(s.fullDate(t.to)), y(!1), g(o));
+      const t = y(o, n);
+      t && (h(s.fullDate(t.from)), D(s.fullDate(t.to)), b(!1), g(o));
     },
-    [s, e, b, f, n]
-  ), x = R(() => {
-    h(void 0), D(void 0), y(!0), g(e);
+    [s, e, y, f, n]
+  ), F = R(() => {
+    h(void 0), D(void 0), b(!0), g(e);
   }, [e]);
-  return i(() => {
-    u === e ? g(e) : p(u);
-  }, []), i(() => {
+  return a(() => {
+    l === e ? g(e) : p(l);
+  }, []), a(() => {
     var o;
-    if (S.current !== a || d.current !== l) {
+    if (S.current !== i || d.current !== u) {
       const t = Object.values(r);
       t.forEach((c) => {
-        c.now = a, c.timezone = l;
-      }), S.current = a, d.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
+        c.now = i, c.timezone = u;
+      }), S.current = i, d.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
     }
-  }, [a, l, r]), {
-    customSelection: x,
-    from: T,
+  }, [i, u, r]), {
+    customSelection: F,
+    from: W,
     onSelection: p,
-    options: j,
+    options: x,
     selectedOption: f,
-    to: W
+    to: j
   };
 };
 export {

package/dist/es/components/internal/ErrorMessageDisplay/ErrorMessageDisplay.js

@@ -1,30 +1,29 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "../Typography/Typography.js";
-import { TypographyVariant as s } from "../Typography/types.js";
-import { useCallback as E } from "../../../external/preact/hooks/dist/hooks.module.js";
-import T from "../../../core/Context/useCoreContext.js";
+import { TypographyVariant as y } from "../Typography/types.js";
+import { useCallback as T } from "../../../external/preact/hooks/dist/hooks.module.js";
+import _ from "../../../core/Context/useCoreContext.js";
 import "./ErrorMessageDisplay.scss.js";
-import _ from "../../../images/no-results.svg.js";
-import I from "../../../core/Auth/useAuthContext.js";
+import A from "../../../images/no-results.svg.js";
+import a from "../Button/Button.js";
 import { Fragment as m } from "../../../external/preact/dist/preact.module.js";
-import y from "../Button/Button.js";
-const a = {
+const s = {
   md: 680,
   lg: 1024
-}, k = ({
+}, R = ({
   title: g,
-  message: p,
-  imageDesktop: c,
+  message: o,
+  imageDesktop: t,
   imageMobile: n,
   withImage: x,
   centered: f,
   refreshComponent: h,
-  onContactSupport: t,
+  onContactSupport: c,
   translationValues: i
 }) => {
-  const { i18n: e } = T(), { updateCore: u } = I(), v = E(
-    (o) => Array.isArray(o) ? o.map(
-      (d, A) => A === 0 ? /* @__PURE__ */ r(m, { children: [
+  const { i18n: e, updateCore: u } = _(), v = T(
+    (p) => Array.isArray(p) ? p.map(
+      (d, E) => E === 0 ? /* @__PURE__ */ r(m, { children: [
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(m, { children: i[d] })
       ] }) : /* @__PURE__ */ r(m, { children: [
@@ -32,24 +31,24 @@ const a = {
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(m, { children: i[d] })
       ] })
-    ) : e.get(o),
+    ) : e.get(p),
     [e, i]
   );
   return /* @__PURE__ */ r("div", { className: `adyen-pe-error-message-display ${f ? "adyen-pe-error-message-display--centered" : ""}`, children: [
-    (c || n || x) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${a.md}px)`, srcSet: c }),
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${a.md}px)`, srcSet: n }),
-      /* @__PURE__ */ r("img", { srcSet: c ?? _, alt: e.get("thereWasAnUnexpectedError") })
+    (t || n || x) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
+      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${s.md}px)`, srcSet: t }),
+      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${s.md}px)`, srcSet: n }),
+      /* @__PURE__ */ r("img", { srcSet: t ?? A, alt: e.get("thereWasAnUnexpectedError") })
     ] }) }),
-    /* @__PURE__ */ r(l, { variant: s.TITLE, children: e.get(g) }),
-    p && /* @__PURE__ */ r(l, { variant: s.BODY, children: v(p) }),
-    (t || h) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
-      t && /* @__PURE__ */ r(y, { onClick: t, children: e.get("reachOutToSupport") }),
-      !t && h && /* @__PURE__ */ r(y, { onClick: u, children: e.get("refresh") })
+    /* @__PURE__ */ r(l, { variant: y.TITLE, children: e.get(g) }),
+    o && /* @__PURE__ */ r(l, { variant: y.BODY, children: v(o) }),
+    (c || h) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
+      c && /* @__PURE__ */ r(a, { onClick: c, children: e.get("reachOutToSupport") }),
+      !c && h && /* @__PURE__ */ r(a, { onClick: u, children: e.get("refresh") })
     ] })
   ] });
 };
 export {
-  k as ErrorMessageDisplay,
-  a as IMAGE_BREAKPOINT_SIZES
+  R as ErrorMessageDisplay,
+  s as IMAGE_BREAKPOINT_SIZES
 };

package/dist/es/components/internal/ExpandableCard/ExpandableCard.js

@@ -4,7 +4,7 @@ import { useState as v, useCallback as h, useRef as l, useEffect as I } from "..
 import "./ExpandableCard.scss.js";
 import b from "../SVGIcons/ChevronUp.js";
 import B from "../SVGIcons/ChevronDown.js";
-import { BASE_CLASS as D, CONTAINER_CLASS as p, CONTAINER_BUTTON_CLASS as x, CONTAINER_FILLED_CLASS as m, CONTAINER_OVERLAY_ID as C, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as L, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as g, CONTAINER_HIDDEN_CLASS as k } from "./constants.js";
+import { BASE_CLASS as D, CONTAINER_CLASS as m, CONTAINER_BUTTON_CLASS as L, CONTAINER_FILLED_CLASS as p, CONTAINER_OVERLAY_ID as N, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as x, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as g, CONTAINER_HIDDEN_CLASS as k } from "./constants.js";
 import y from "../../../core/Context/useCoreContext.js";
 import { useClickOutside as F } from "../../../hooks/element/useClickOutside.js";
 import { Fragment as V } from "../../../external/preact/dist/preact.module.js";
@@ -23,10 +23,10 @@ const w = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
     /* @__PURE__ */ e(
       T,
       {
-        className: s(p, x, { [m]: o }),
+        className: s(m, L, { [p]: o }),
         disabled: a,
         fullWidth: f,
-        "aria-controls": C,
+        "aria-controls": N,
         "aria-expanded": a,
         "aria-hidden": a,
         onClick: r,
@@ -35,7 +35,7 @@ const w = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
         ...i,
         children: [
           /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.expand") }),
-          /* @__PURE__ */ e("div", { className: s(N, L), children: t }),
+          /* @__PURE__ */ e("div", { className: s(C, x), children: t }),
           /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(B, { role: "presentation" }) })
         ]
       }
@@ -43,14 +43,14 @@ const w = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
     /* @__PURE__ */ e(
       T,
       {
-        id: C,
-        className: s(p, x, g, {
-          [m]: o,
+        id: N,
+        className: s(m, L, g, {
+          [p]: o,
           [k]: !a
         }),
         disabled: !a,
         fullWidth: f,
-        "aria-controls": C,
+        "aria-controls": N,
         "aria-expanded": a,
         "aria-hidden": !a,
         onClick: r,
@@ -59,7 +59,7 @@ const w = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
         ...i,
         children: [
           /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.collapse") }),
-          /* @__PURE__ */ e("div", { className: s(N, L), children: [
+          /* @__PURE__ */ e("div", { className: s(C, x), children: [
             t,
             /* @__PURE__ */ e("div", { children: u })
           ] }),
@@ -67,7 +67,7 @@ const w = ({ renderHeader: t, children: u, filled: o, fullWidth: f, ...i }) => {
         ]
       }
     )
-  ] }) : /* @__PURE__ */ e("div", { className: s(p, { [m]: o }), ...i, children: /* @__PURE__ */ e("div", { className: N, children: t }) }) });
+  ] }) : /* @__PURE__ */ e("div", { className: s(m, { [p]: o }), ...i, children: /* @__PURE__ */ e("div", { className: C, children: t }) }) });
 }, K = w;
 export {
   K as default

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

@@ -1,42 +1,42 @@
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMediaQuery as s, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useResponsiveViewport as m, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
 import { ButtonVariant as n } from "../Button/types.js";
 import f from "../SVGIcons/Close.js";
-import d from "../SVGIcons/Filter.js";
-import { TypographyVariant as p } from "../Typography/types.js";
+import p from "../SVGIcons/Filter.js";
+import { TypographyVariant as d } from "../Typography/types.js";
 import u from "../Typography/Typography.js";
 import h from "../../../core/Context/useCoreContext.js";
 import y from "classnames";
 import { useState as F, useEffect as b } from "../../../external/preact/hooks/dist/hooks.module.js";
 import "./FilterBar.scss.js";
-import l from "../Button/Button.js";
+import s from "../Button/Button.js";
 import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
 function k(t) {
-  const { i18n: i } = h(), e = s(c.down.xs), [a, o] = F(!e);
+  const { i18n: i } = h(), r = m(c.down.xs), [o, a] = F(!r);
   return b(() => {
-    o(!e);
-  }, [e]), /* @__PURE__ */ r(_, { children: [
-    e && /* @__PURE__ */ r("div", { className: "adyen-pe-filter-bar__header", children: [
-      /* @__PURE__ */ r(u, { variant: p.SUBTITLE, children: i.get("transactions") }),
-      /* @__PURE__ */ r(
-        l,
+    a(!r);
+  }, [r]), /* @__PURE__ */ e(_, { children: [
+    r && /* @__PURE__ */ e("div", { className: "adyen-pe-filter-bar__header", children: [
+      /* @__PURE__ */ e(u, { variant: d.SUBTITLE, children: i.get("transactions") }),
+      /* @__PURE__ */ e(
+        s,
         {
           className: "adyen-pe-filter-bar__header-icon",
           variant: n.SECONDARY,
           iconButton: !0,
-          onClick: () => o((m) => !m),
-          children: a ? /* @__PURE__ */ r(f, {}) : /* @__PURE__ */ r(d, {})
+          onClick: () => a((l) => !l),
+          children: o ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(p, {})
         }
       )
     ] }),
-    a && /* @__PURE__ */ r(
+    o && /* @__PURE__ */ e(
       "div",
       {
         "aria-label": i.get("filterBar"),
-        className: y("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": e }),
+        className: y("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": r }),
         children: [
           t.children,
-          t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ r(l, { variant: n.TERTIARY, onClick: t.resetFilters, children: i.get("button.clearAll") })
+          t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ e(s, { variant: n.TERTIARY, onClick: t.resetFilters, children: i.get("button.clearAll") })
         ]
       }
     )

package/dist/es/components/internal/FilterBar/components/FilterButton/FilterButton.js

@@ -2,17 +2,17 @@ import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import c from "../../../Button/hooks/useButton.js";
 import { TypographyElement as y, TypographyVariant as T } from "../../../Typography/types.js";
 import B from "../../../Typography/Typography.js";
-import { parseClassName as N } from "../../../../../utils/class-name-utils.js";
-import { parseBoolean as d } from "../../../../../utils/common/index.js";
-import { forwardRef as g } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as e } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import "./FilterButton.scss.js";
-const h = "adyen-pe-filter-button";
-function A({ className: o, classNameModifiers: a = [], children: s, disabled: r, onClick: m, ...n }, p) {
-  const i = e(() => N("", o) || "", [o]), l = e(() => d(r), [r]), { classes: u, click: f } = c(i, a, h, l, m);
-  return /* @__PURE__ */ t("button", { className: u, ref: p, onClick: f, ...n, children: /* @__PURE__ */ t(B, { el: y.SPAN, variant: T.BODY, stronger: !0, children: s }) });
+import { fixedForwardRef as d } from "../../../../../utils/preact/fixedForwardRef.js";
+import { parseClassName as F } from "../../../../../utils/preact/className.js";
+import { parseBooleanProp as N } from "../../../../../utils/preact/props.js";
+const g = "adyen-pe-filter-button";
+function h({ className: o, classNameModifiers: a = [], children: m, disabled: r, onClick: n, ...s }, p) {
+  const i = e(() => F("", o) || "", [o]), l = e(() => N(r), [r]), { classes: u, click: f } = c(i, a, g, l, n);
+  return /* @__PURE__ */ t("button", { className: u, ref: p, onClick: f, ...s, children: /* @__PURE__ */ t(B, { el: y.SPAN, variant: T.BODY, stronger: !0, children: m }) });
 }
-const x = g(A);
+const k = d(h);
 export {
-  x as default
+  k as default
 };

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

@@ -1,56 +1,57 @@
 import { jsx as P } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { RangeSelection as U } from "./RangeSelection.js";
-import { useState as M, useMemo as v, useCallback as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { PopoverContainerSize as w } from "../../../Popover/types.js";
-import z from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as L } from "./constants.js";
-import B from "../BaseFilter/BaseFilter.js";
-import { EMPTY_OBJECT as D } from "../../../../../utils/common/constants.js";
-const u = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...x }) => {
-  const { i18n: A } = z(), [y, T] = M(), [p, g] = M(), S = v(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), h = E(
+import { RangeSelection as w } from "./RangeSelection.js";
+import { useState as E, useMemo as z, useCallback as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerSize as B } from "../../../Popover/types.js";
+import D from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as T } from "./constants.js";
+import F from "../BaseFilter/BaseFilter.js";
+import { isUndefined as f } from "../../../../../utils/value/is.js";
+import { EMPTY_OBJECT as O } from "../../../../../utils/value/constants.js";
+const H = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...y }) => {
+  const { i18n: g } = D(), [S, U] = E(), [M, x] = E(), h = z(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), p = L(
     (n, o) => {
-      const f = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), I = o && f ? {
+      const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), I = o && A ? {
         style: "currency",
-        currency: f,
+        currency: A,
         currencyDisplay: "symbol"
       } : void 0;
-      return n.toLocaleString(A.locale, I);
+      return n.toLocaleString(g.locale, I);
     },
-    [m, A, t]
-  ), V = E(
+    [m, g, t]
+  ), V = L(
     (n) => {
-      const { minAmount: o, maxAmount: f } = n ?? D;
-      T({ minAmount: o, maxAmount: f }), o === void 0 && f === void 0 && g(void 0), $({
-        minAmount: o !== void 0 ? String(o * L) : void 0,
-        maxAmount: f !== void 0 ? String(f * L) : void 0
+      const { minAmount: o, maxAmount: A } = n ?? O;
+      U({ minAmount: o, maxAmount: A }), f(o) && f(A) && x(void 0), $({
+        minAmount: f(o) ? void 0 : String(o * T),
+        maxAmount: f(A) ? void 0 : String(A * T)
       });
     },
     [$]
   );
-  if (y && (y.minAmount || y.maxAmount)) {
-    const { minAmount: n, maxAmount: o } = y ?? {};
-    n !== void 0 && o !== void 0 && n <= o ? g(
-      `${h(n, S)} ${A.get("to").toLowerCase()} ${h(o, S)}`
-    ) : n !== void 0 && o === void 0 && n >= 0 ? g(`${A.get("from")} ${h(n, S)}`) : g(n === void 0 && o !== void 0 ? `${A.get("to")} ${h(o, S)}` : void 0);
+  if (S && (S.minAmount || S.maxAmount)) {
+    const { minAmount: n, maxAmount: o } = S ?? {};
+    !f(n) && !f(o) && n <= o ? x(
+      `${p(n, h)} ${g.get("to").toLowerCase()} ${p(o, h)}`
+    ) : !f(n) && f(o) && n >= 0 ? x(`${g.get("from")} ${p(n, h)}`) : f(n) && !f(o) ? x(`${g.get("to")} ${p(o, h)}`) : x(void 0);
   }
   return /* @__PURE__ */ P(
-    B,
+    F,
     {
-      ...x,
+      ...y,
       updateFilters: $,
-      minAmount: x.minAmount,
-      maxAmount: x.maxAmount,
+      minAmount: y.minAmount,
+      maxAmount: y.maxAmount,
       onChange: V,
-      value: p,
-      label: p || x.label,
+      value: M,
+      label: M || y.label,
       type: "text",
-      containerSize: w.MEDIUM,
+      containerSize: B.MEDIUM,
       selectedCurrencies: t,
       availableCurrencies: m,
-      render: U
+      render: w
     }
   );
 };
 export {
-  u as AmountFilter
+  H as AmountFilter
 };

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

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