@adyen/adyen-platform-experience-web 1.7.1 → 1.8.1

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

@@ -1,56 +1,69 @@
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "classnames";
-import { forwardRef as y } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as p, useMemo as r, useCallback as O } from "../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../core/Context/useCoreContext.js";
-import D from "../../../hooks/useReflex.js";
-import I from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY as M } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import P from "../Calendar/hooks/useCalendarControlsRendering.js";
+import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
+import { useState as O, useMemo as a, useCallback as g } from "../../../external/preact/hooks/dist/hooks.module.js";
+import v from "../../../core/Context/useCoreContext.js";
+import I from "../../../hooks/useReflex.js";
+import N from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY as D } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import L from "../Calendar/hooks/useCalendarControlsRendering.js";
 /* empty css                */
-import v from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import x from "../Calendar/Calendar.js";
+import M from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import P from "../Calendar/Calendar.js";
 import u from "../Calendar/calendar/facade/index.js";
-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 Z = y((e, g) => {
-  const { i18n: i } = N(), [T, C] = P(e.renderControl), [k, a] = p(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = I({ 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 = D(A, g), R = O(() => {
-    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]);
+import { boolOrTrue as S } from "../../../utils/value/bool.js";
+import { EMPTY_OBJECT as x } from "../../../utils/value/constants.js";
+import { noop as E } from "../../../utils/common.js";
+const $ = p((e, T) => {
+  const { i18n: r } = v(), [C, k] = L(e.renderControl), [y, m] = O(performance.now()), t = a(() => S(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: l, GMTOffset: c } = N({ timezone: e.timezone, withClock: t }), z = a(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), R = a(() => t ? { values: { offset: c, time: l } } : x, [c, l, t]), o = I(E, T), w = g(
+    (i) => r.get("common.filters.types.date.calendar.label", { values: { monthOfYear: i.label } }),
+    [r]
+  ), b = g(() => {
+    var i, s, d, f, h;
+    m(performance.now()), (i = o.current) != null && i.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)));
+  }, [m, e.onHighlight]);
   return /* @__PURE__ */ n("div", { className: z, children: [
     /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
-      v,
+      M,
       {
         now: e.now,
         calendarRef: o,
         onTimeRangeSelected: e.onPresetOptionSelected,
         options: e.timeRangePresetOptions,
         selectedOption: e.selectedPresetOption,
-        timestamp: k,
-        timezone: e.timezone
+        timestamp: y,
+        timezone: e.timezone,
+        "aria-label": e.timeRangeSelectorLabel
       }
     ) }),
-    /* @__PURE__ */ n("div", { ref: C, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
     /* @__PURE__ */ n(
-      x,
+      "div",
+      {
+        ref: k,
+        role: "group",
+        className: "adyen-pe-datepicker__controls",
+        "aria-label": r.get("common.filters.types.date.calendar.navigation.label")
+      }
+    ),
+    /* @__PURE__ */ n(
+      P,
       {
         ...e,
         ref: o,
-        firstWeekDay: M,
+        firstWeekDay: D,
         dynamicBlockRows: !0,
         onlyCellsWithin: !0,
         controls: e.controls ?? u.controls.MINIMAL,
         highlight: e.highlight ?? u.highlight.MANY,
-        onHighlight: R,
-        renderControl: T,
+        getGridLabel: w,
+        onHighlight: b,
+        renderControl: C,
         trackCurrentDay: !0
       }
     ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", w) })
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: r.get("common.filters.types.date.timezoneInfo", R) })
   ] });
 });
 export {
-  Z as default
+  $ as default
 };

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

@@ -1,29 +1,31 @@
 import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as j, useCallback as w, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as j, useCallback as w, useRef as a, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { useTimeRangeSelection as x } from "./useTimeRangeSelection.js";
 import D from "../../../FormFields/Select/Select.js";
 const z = ({
+  ["aria-label"]: b,
   calendarRef: t,
   onTimeRangeSelected: o,
-  timestamp: s,
-  ...O
+  timestamp: r,
+  ...h
 }) => {
-  const { customSelection: f, from: u, onSelection: l, options: m, selectedOption: r, to: c } = x(O), b = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), C = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
+  const { customSelection: l, from: u, onSelection: f, options: m, selectedOption: s, to: c } = x(h), O = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), C = w(({ target: e }) => f(e == null ? void 0 : e.value), [f]), n = a(!0), p = a(r);
   return i(() => {
     t != null && t.current && u && c && (n.current = !0, t.current.from = new Date(u), t.current.to = new Date(c));
   }, [t, u, c]), i(() => {
-    p.current !== s && (p.current = s, n.current ? n.current = !1 : f());
-  }, [f, s]), i(() => {
-    r && (o == null || o(r));
-  }, [r, o]), /* @__PURE__ */ S(
+    p.current !== r && (p.current = r, n.current ? n.current = !1 : l());
+  }, [l, r]), i(() => {
+    s && (o == null || o(s));
+  }, [s, o]), /* @__PURE__ */ S(
     D,
     {
       setToTargetWidth: !0,
-      items: b,
+      items: O,
       filterable: !1,
       multiSelect: !1,
       onChange: C,
-      selected: r
+      selected: s,
+      "aria-label": b
     }
   );
 };

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

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

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

@@ -1,70 +1,74 @@
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import h from "../Typography/Typography.js";
-import { TypographyVariant as n } from "../Typography/types.js";
-import { useCallback as I } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import I from "classnames";
+import u from "../Typography/Typography.js";
 import N from "../../../core/Context/useCoreContext.js";
+import { TypographyVariant as _, TypographyElement as P } from "../Typography/types.js";
+import { useCallback as C } from "../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css                         */
-import k from "../../../images/no-results.svg.js";
-import w from "classnames";
-import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
+import { Fragment as f } from "../../../external/preact/dist/preact.module.js";
 import g from "../Button/Button.js";
-const f = {
-  md: 680
-}, L = ({
+const r = "adyen-pe-error-message-display", y = 680, t = {
+  base: r,
+  base_absolutePosition: r + "--absolute-position",
+  base_centered: r + "--centered",
+  base_outlined: r + "--outlined",
+  base_withBackground: r + "--with-background",
+  button: r + "__button",
+  illustration: r + "__illustration"
+}, M = () => /* @__PURE__ */ e(f, { children: [
+  " ",
+  /* @__PURE__ */ e("br", {}),
+  " "
+] }), K = ({
   title: x,
-  message: a,
-  imageDesktop: t,
-  imageMobile: o,
-  withImage: u,
+  message: n,
+  imageDesktop: a,
+  imageMobile: d,
+  withImage: E,
   centered: v,
-  refreshComponent: l,
-  onContactSupport: m,
-  translationValues: i,
-  absolutePosition: E = !0,
-  outlined: y = !0,
+  refreshComponent: p,
+  onContactSupport: o,
+  translationValues: s,
+  absolutePosition: T = !0,
+  outlined: b = !0,
   renderSecondaryButton: c,
-  withBackground: T
+  withBackground: k
 }) => {
-  const { i18n: e, updateCore: _ } = N(), A = I(
-    (s) => Array.isArray(s) ? s.map(
-      (d, b) => b === 0 ? /* @__PURE__ */ r(p, { children: [
-        e.get(d),
-        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
-      ] }) : /* @__PURE__ */ r(p, { children: [
-        /* @__PURE__ */ r("br", {}),
-        e.get(d),
-        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
-      ] })
-    ) : e.get(s),
-    [e, i]
+  const { i18n: i, updateCore: w, getImageAsset: l } = N(), A = C(
+    (m) => Array.isArray(m) ? m.map((h, B) => /* @__PURE__ */ e(f, { children: [
+      B > 0 && /* @__PURE__ */ e(M, {}),
+      i.get(h),
+      s == null ? void 0 : s[h]
+    ] })) : i.get(m),
+    [i, s]
   );
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: w(["adyen-pe-error-message-display"], {
-        "adyen-pe-error-message-display--absolute-position": E,
-        "adyen-pe-error-message-display--outlined": y,
-        "adyen-pe-error-message-display--with-background": T !== !1 && !y,
-        "adyen-pe-error-message-display--centered": v
+      className: I(t.base, {
+        [t.base_absolutePosition]: T,
+        [t.base_centered]: v,
+        [t.base_outlined]: b,
+        [t.base_withBackground]: k !== !1 && !b
       }),
       children: [
-        (t || o || u) && /* @__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: ${f.md}px)`, srcSet: t }),
-          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: o }),
-          /* @__PURE__ */ r("img", { srcSet: t ?? k, alt: e.get("thereWasAnUnexpectedError") })
+        (a || d || E) && /* @__PURE__ */ e("div", { className: t.illustration, children: /* @__PURE__ */ e("picture", { children: [
+          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(min-width: ${y}px)`, srcSet: a }),
+          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(max-width: ${y}px)`, srcSet: d }),
+          /* @__PURE__ */ e("img", { srcSet: a ?? (l == null ? void 0 : l({ name: "no-results" })), alt: "" })
         ] }) }),
-        /* @__PURE__ */ r(h, { variant: n.TITLE, children: e.get(x) }),
-        a && /* @__PURE__ */ r(h, { variant: n.BODY, children: A(a) }),
-        (m || l || c) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
+        /* @__PURE__ */ e(u, { el: P.DIV, variant: _.TITLE, children: i.get(x) }),
+        n && /* @__PURE__ */ e(u, { variant: _.BODY, children: A(n) }),
+        (o || p || c) && /* @__PURE__ */ e("div", { className: t.button, children: [
           c && c(),
-          m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("reachOutToSupport") }),
-          !m && l && /* @__PURE__ */ r(g, { onClick: _, children: e.get("refresh") })
+          o && /* @__PURE__ */ e(g, { onClick: o, children: i.get("common.actions.contactSupport.labels.reachOut") }),
+          !o && p && /* @__PURE__ */ e(g, { onClick: w, children: i.get("common.actions.refresh.labels.default") })
         ] })
       ]
     }
   );
 };
 export {
-  L as ErrorMessageDisplay,
-  f as IMAGE_BREAKPOINT_SIZES
+  K as ErrorMessageDisplay,
+  y as IMAGE_BREAKPOINT_MEDIUM_PX
 };

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

@@ -1,87 +1,85 @@
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import n from "classnames";
-import { useState as I, useMemo as V, useCallback as x, useRef as i, useLayoutEffect as Y, useEffect as b } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
-import z from "../../../core/Context/useCoreContext.js";
+import a from "classnames";
+import { useState as T, useMemo as x, useCallback as b, useRef as c, useLayoutEffect as z, useEffect as g } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useClickOutside as U } from "../../../hooks/element/useClickOutside.js";
+import { useUniqueId as V } from "../../../hooks/useUniqueId.js";
 /* empty css                    */
-import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as j, CONTAINER_OVERLAY_ID as p, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as g, CHEVRON_CLASS as k, CONTAINER_CLASS as N, CONTAINER_BUTTON_CLASS as B, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as q, CONTAINER_IN_FLOW_CLASS as G, CONTAINER_HIDDEN_CLASS as M } from "./constants.js";
-import { Fragment as U } from "../../../external/preact/dist/preact.module.js";
-import D from "../BaseButton/BaseButton.js";
-import { Icon as H } from "../Icon/Icon.js";
-const ae = ({ renderHeader: c, children: O, filled: d, fullWidth: E, inFlow: S, ...l }) => {
-  const { i18n: _ } = z(), [e, h] = I(!1), [v, R] = I(0), t = V(() => S === !0, [S]), o = x(() => h((r) => !r), [h]), u = i(null), L = i(null), m = i(!1), T = i(e), f = w(
+import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as Y, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as H, CHEVRON_CLASS as k, CONTAINER_CLASS as E, CONTAINER_BUTTON_CLASS as B, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as $, CONTAINER_IN_FLOW_CLASS as j, CONTAINER_HIDDEN_CLASS as G } from "./constants.js";
+import { Fragment as D } from "../../../external/preact/dist/preact.module.js";
+import F from "../BaseButton/BaseButton.js";
+import { Icon as P } from "../Icon/Icon.js";
+import { isFunction as M } from "../../../utils/value/is.js";
+const ae = ({ renderContent: o, children: O, filled: d, fullWidth: S, inFlow: _, ...l }) => {
+  const [r, v] = T(!1), [R, h] = T(0), n = x(() => _ === !0, [_]), i = b(() => v((e) => !e), [v]), L = c(null), u = c(null), f = `elem-${V()}`, m = c(!1), I = c(r), p = U(
     void 0,
-    x(() => {
-      e && (o(), m.current = !0);
-    }, [e, o])
+    b(() => {
+      r && (i(), m.current = !0);
+    }, [r, i])
+  ), N = x(
+    () => M(o) ? o : ({ collapsibleContent: e }) => /* @__PURE__ */ s(D, { children: [
+      o,
+      e && /* @__PURE__ */ s("div", { children: e })
+    ] }),
+    [o]
   );
-  return Y(() => {
-    const r = L.current;
-    r && (t ? r.style.setProperty(y, `${v}px`) : e || r.style.removeProperty(y));
-  }, [v, t, e]), b(() => {
-    if (!t) return void R(0);
-    const r = u.current;
-    if (!r) return;
-    const a = new ResizeObserver((P) => {
-      for (const F of P)
-        F.target === r && R(r.offsetHeight || 0);
+  return z(() => {
+    const e = L.current;
+    e && (n ? e.style.setProperty(y, `${R}px`) : r || e.style.removeProperty(y));
+  }, [R, n, r]), g(() => {
+    if (!n) return void h(0);
+    const e = u.current;
+    if (!e) return;
+    const t = new ResizeObserver((q) => {
+      for (const w of q)
+        w.target === e && h(e.offsetHeight || 0);
     });
-    return a.observe(r), () => {
-      a.unobserve(r), a.disconnect();
+    return t.observe(e), () => {
+      t.unobserve(e), t.disconnect();
     };
-  }, [t]), b(() => {
-    var r, a;
-    e ? (r = f.current) == null || r.focus() : (T.current !== e && !m.current && ((a = u.current) == null || a.focus()), m.current = !1), T.current = e;
-  }, [e, f]), /* @__PURE__ */ s("div", { ref: L, className: j, children: O ? /* @__PURE__ */ s(U, { children: [
+  }, [n]), g(() => {
+    var e, t;
+    r ? (e = p.current) == null || e.focus() : (I.current !== r && !m.current && ((t = u.current) == null || t.focus()), m.current = !1), I.current = r;
+  }, [r, p]), /* @__PURE__ */ s("div", { ref: L, className: Y, children: O ? /* @__PURE__ */ s(D, { children: [
     /* @__PURE__ */ s(
-      D,
+      F,
       {
-        className: n(N, B, { [A]: d }),
-        disabled: e,
-        fullWidth: E,
-        "aria-controls": p,
-        "aria-expanded": e,
-        "aria-hidden": e,
-        onClick: o,
+        className: a(E, B, { [A]: d }),
+        disabled: r,
+        fullWidth: S,
+        onClick: i,
         ref: u,
         "data-testid": "expand-button",
+        ...r ? { "aria-hidden": !0 } : { "aria-controls": f, "aria-expanded": !1 },
         ...l,
         children: [
-          /* @__PURE__ */ s("span", { className: "adyen-pe-visually-hidden", children: _.get("expandableCard.expand") }),
-          /* @__PURE__ */ s("div", { className: n(C, g), children: c }),
-          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(H, { name: "chevron-down" }) })
+          /* @__PURE__ */ s("div", { className: a(C, H), children: N({ isExpanded: r }) }),
+          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-down" }) })
         ]
       }
     ),
     /* @__PURE__ */ s(
-      D,
+      F,
       {
-        id: p,
-        className: n(N, B, q, {
+        id: f,
+        className: a(E, B, $, {
           [A]: d,
-          [M]: !e,
-          [G]: t
+          [G]: !r,
+          [j]: n
         }),
-        disabled: !e,
-        fullWidth: E,
-        "aria-controls": p,
-        "aria-expanded": e,
-        "aria-hidden": !e,
-        onClick: o,
-        ref: f,
+        disabled: !r,
+        fullWidth: S,
+        onClick: i,
+        ref: p,
         "data-testid": "collapse-button",
+        ...r ? { "aria-controls": f, "aria-expanded": !0 } : { role: "presentation" },
         ...l,
         children: [
-          /* @__PURE__ */ s("span", { className: "adyen-pe-visually-hidden", children: _.get("expandableCard.collapse") }),
-          /* @__PURE__ */ s("div", { className: n(C, g), children: [
-            c,
-            /* @__PURE__ */ s("div", { children: O })
-          ] }),
-          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(H, { name: "chevron-up" }) })
+          /* @__PURE__ */ s("div", { className: a(C, H), children: N({ isExpanded: r, collapsibleContent: O }) }),
+          /* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-up" }) })
         ]
       }
     )
-  ] }) : /* @__PURE__ */ s("div", { className: n(N, { [A]: d }), ...l, children: /* @__PURE__ */ s("div", { className: C, children: c }) }) });
+  ] }) : /* @__PURE__ */ s("div", { className: a(E, { [A]: d }), ...l, children: /* @__PURE__ */ s("div", { className: C, children: N({ isExpanded: !1 }) }) }) });
 };
 export {
   ae as default

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

@@ -1,15 +1,14 @@
-const n = "adyen-pe-expandable-card", A = n, _ = A + "__container", N = A + "__content", S = A + "__chevron", E = _ + "--button", o = _ + "--filled", t = _ + "--hidden", c = _ + "--in-flow", C = _ + "--overlay", L = N + "--expandable", O = `--${n}-height`, T = C;
+const A = "adyen-pe-expandable-card", n = A, _ = n + "__container", N = n + "__content", S = n + "__chevron", C = _ + "--button", o = _ + "--filled", t = _ + "--hidden", E = _ + "--in-flow", c = _ + "--overlay", L = N + "--expandable", e = `--${A}-height`;
 export {
-  A as BASE_CLASS,
-  O as CARD_HEIGHT_PROPERTY,
+  n as BASE_CLASS,
+  e as CARD_HEIGHT_PROPERTY,
   S as CHEVRON_CLASS,
-  E as CONTAINER_BUTTON_CLASS,
+  C as CONTAINER_BUTTON_CLASS,
   _ as CONTAINER_CLASS,
   o as CONTAINER_FILLED_CLASS,
   t as CONTAINER_HIDDEN_CLASS,
-  c as CONTAINER_IN_FLOW_CLASS,
-  C as CONTAINER_OVERLAY_CLASS,
-  T as CONTAINER_OVERLAY_ID,
+  E as CONTAINER_IN_FLOW_CLASS,
+  c as CONTAINER_OVERLAY_CLASS,
   N as CONTENT_CLASS,
   L as CONTENT_EXPANDABLE_CLASS
 };