@adyen/adyen-platform-experience-web 0.1.1 → 1.0.0-beta

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

@@ -1,63 +1,92 @@
-import { useState as m, useRef as C, useMemo as i, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import z from "../../../../../core/Context/useCoreContext.js";
-import I from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import N from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
-import E from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import K from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import Z from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
-import _ from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
-const V = () => Object.freeze({
-  "rangePreset.last7Days": N(7),
-  "rangePreset.thisWeek": Z(),
-  "rangePreset.lastWeek": E(),
-  "rangePreset.thisMonth": K(),
-  "rangePreset.lastMonth": I(),
-  "rangePreset.yearToDate": _()
-}), X = ({
-  now: a = Date.now(),
-  options: r,
-  selectedOption: u,
-  timezone: l
+import { h, _, F, T } from "../../../../../../hooks.module-8565d716.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import lastMonth from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import lastNDays from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import lastWeek from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
+import thisMonth from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import thisWeek from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
+import yearToDate from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+const getTimeRangeSelectionDefaultPresetOptions = () => Object.freeze({
+  "rangePreset.last7Days": lastNDays(7),
+  "rangePreset.thisWeek": thisWeek(),
+  "rangePreset.lastWeek": lastWeek(),
+  "rangePreset.thisMonth": thisMonth(),
+  "rangePreset.lastMonth": lastMonth(),
+  "rangePreset.yearToDate": yearToDate()
+});
+const useTimeRangeSelection = ({
+  now = Date.now(),
+  options: presetOptions,
+  selectedOption: selectedPresetOption,
+  timezone
 }) => {
-  const { i18n: s } = z(), [R, h] = m(), [W, D] = m(), [f, g] = m(), S = C(), d = C(), [e, T, n] = i(() => {
-    const o = s.get("rangePreset.custom"), t = Object.keys(r), c = Object.freeze(t.map((O) => s.get(O)));
-    return [o, (O, M = c) => {
-      const x = M.findIndex((v) => v === O);
-      return r[t[x]];
-    }, c];
-  }, [s, r]), [b, k] = m(u === e), y = i(() => Object.freeze([...n, e]), [e, n]), j = i(
-    () => b ? y : n,
-    [b, n, y]
-  ), p = P(
-    (o) => {
-      const t = T(o, n);
-      t && (h(s.fullDate(t.from)), D(s.fullDate(t.to)), k(!1), g(o));
+  const { i18n } = useCoreContext();
+  const [from, setFrom] = h();
+  const [to, setTo] = h();
+  const [selectedOption, setSelectedOption] = h();
+  const NOW = _();
+  const TZ = _();
+  const [customOption, getRangesForOption, selectionOptions] = F(() => {
+    const customOption2 = i18n.get("rangePreset.custom");
+    const optionKeys = Object.keys(presetOptions);
+    const selectionOptions2 = Object.freeze(optionKeys.map((key) => i18n.get(key)));
+    const getRangesForOption2 = (option, options2 = selectionOptions2) => {
+      const optionIndex = options2.findIndex((currentOption) => currentOption === option);
+      return presetOptions[optionKeys[optionIndex]];
+    };
+    return [customOption2, getRangesForOption2, selectionOptions2];
+  }, [i18n, presetOptions]);
+  const [isCustomSelection, setIsCustomSelection] = h(selectedPresetOption === customOption);
+  const selectionOptionsWithCustomOption = F(() => Object.freeze([...selectionOptions, customOption]), [customOption, selectionOptions]);
+  const options = F(
+    () => isCustomSelection ? selectionOptionsWithCustomOption : selectionOptions,
+    [isCustomSelection, selectionOptions, selectionOptionsWithCustomOption]
+  );
+  const onSelection = T(
+    (option) => {
+      const ranges = getRangesForOption(option, selectionOptions);
+      if (!ranges)
+        return;
+      setFrom(i18n.fullDate(ranges.from));
+      setTo(i18n.fullDate(ranges.to));
+      setIsCustomSelection(false);
+      setSelectedOption(option);
     },
-    [s, e, T, f, n]
-  ), F = P(() => {
-    h(void 0), D(void 0), k(!0), g(e);
-  }, [e]);
-  return i(() => {
-    u === e ? g(e) : p(u);
-  }, []), i(() => {
-    var o;
-    if (S.current !== a || d.current !== l) {
-      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);
+    [i18n, customOption, getRangesForOption, selectedOption, selectionOptions]
+  );
+  const customSelection = T(() => {
+    setFrom(void 0);
+    setTo(void 0);
+    setIsCustomSelection(true);
+    setSelectedOption(customOption);
+  }, [customOption]);
+  F(() => {
+    selectedPresetOption === customOption ? setSelectedOption(customOption) : onSelection(selectedPresetOption);
+  }, []);
+  F(() => {
+    var _a;
+    if (NOW.current !== now || TZ.current !== timezone) {
+      const options2 = Object.values(presetOptions);
+      options2.forEach((ranges) => {
+        ranges.now = now;
+        ranges.timezone = timezone;
+      });
+      NOW.current = now;
+      TZ.current = (_a = options2[0]) == null ? void 0 : _a.timezone;
+      onSelection(selectedOption);
     }
-  }, [a, l, r]), {
-    customSelection: F,
-    from: R,
-    onSelection: p,
-    options: j,
-    selectedOption: f,
-    to: W
+  }, [now, timezone, presetOptions]);
+  return {
+    customSelection,
+    from,
+    onSelection,
+    options,
+    selectedOption,
+    to
   };
 };
 export {
-  X as default,
-  V as getTimeRangeSelectionDefaultPresetOptions,
-  X as useTimeRangeSelection
+  useTimeRangeSelection as default,
+  getTimeRangeSelectionDefaultPresetOptions,
+  useTimeRangeSelection
 };

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./DatePicker.js";
+export {
+  default2 as default
+};

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

@@ -1,50 +1,63 @@
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import l from "../Typography/Typography.js";
-import { TypographyVariant as c } from "../Typography/types.js";
-import { useCallback as T } from "../../../external/preact/hooks/dist/hooks.module.js";
-import v from "../../../core/Context/useCoreContext.js";
-import "./ErrorMessageDisplay.scss.js";
-import A from "../../../images/no-results.svg.js";
-import p from "../Button/Button.js";
-import E from "../../../core/Auth/useAuthContext.js";
-import { Fragment as _ } from "preact";
-const h = {
+import '../../../../ErrorMessageDisplay.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { T as Typography, b as TypographyVariant } from "../../../../Typography-11b95870.mjs";
+import { T } from "../../../../hooks.module-8565d716.mjs";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import Button from "../Button/Button.js";
+import useAuthContext from "../../../core/Auth/useAuthContext.js";
+import { k } from "../../../../preact.module-38e5a571.mjs";
+const ErrorMessageDisplay$1 = "";
+const noResults = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMjMiIGhlaWdodD0iMTY5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjIzIDE2OSI+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMzYuNiAxMTIuMmMuNi0uMSAxLS43IDEtMS4zbC0uOS04LjcgMi4xIDYuNmMuMi42LjguOCAxLjQuNy42LS4xIDEtLjcuOC0xLjJsLTEuMy02LjggMi45LTQuOC01LjktNS41LTcuNiA5IDUgNC43IDEgNi4yYzAgLjcuNyAxLjIgMS41IDFaIi8+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBkPSJNMzEuNyAxMDMuNmMuMy40IDEuMiA2LjYgMS41IDkgMCAuNS42IDEgMS4xIDFoLjNjLjcgMCAxLjItLjYgMS4xLTEuM2wtLjctOS4xIi8+CiAgICA8cGF0aCBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMzEuNyAxMDMuNmMuMy40IDEuMiA2LjYgMS41IDkgMCAuNS42IDEgMS4xIDFoLjNjLjcgMCAxLjItLjYgMS4xLTEuM2wtLjctOS4xIi8+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBkPSJNMzAuNCA5OS4zdjEzLjFjMCAuNi41IDEuMSAxLjIgMS4xLjUgMCAxLS40IDEtMWwxLjItOS4zIi8+CiAgICA8cGF0aCBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMzAuNCA5OS4zdjEzLjFjMCAuNi41IDEuMSAxLjIgMS4xLjUgMCAxLS40IDEtMWwxLjItOS4zIi8+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBkPSJNMzUuOCA5MnMtNi41IDQuOC02LjYgNi4yYTk5NSA5OTUgMCAwIDAtLjkgMTAuM2MxLjUgMCAyLjgtMSAzLjItMi4zLjYtMi4xIDEuMi00LjkgMS01LjEtLjEtLjMgNS0uNyA1LjgtMy44Ii8+CiAgICA8cGF0aCBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMzUuOCA5MnMtNi41IDQuOC02LjYgNi4yYTk5NSA5OTUgMCAwIDAtLjkgMTAuM2MxLjUgMCAyLjgtMSAzLjItMi4zLjYtMi4xIDEuMi00LjkgMS01LjEtLjEtLjMgNS0uNyA1LjgtMy44Ii8+CiAgICA8cGF0aCBmaWxsPSIjMzMwMEMyIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNOTUuMyA0Ni43Uzc4IDUzIDcwLjUgNTkuNGMtNy42IDYuNC0zNi4xIDMxLjItMzYuMSAzMS4ybDExLjIgMTEgMzgtMjcuM2MzLjUtMi42IDExLjctMjcuNiAxMS43LTI3LjZaIi8+CiAgICA8cGF0aCBmaWxsPSIjMDAxMTJDIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJtNDUuNiAxMDEuNy0xMS4yLTExIDI5LjgtMi41LTE4LjYgMTMuNVpNMTg2LjQgOTAuNGgtNy4xdjI1LjNoNy4xVjkwLjRaTTIxNS42IDY2LjdoLTcuMlY5Mmg3LjJWNjYuN1pNMTczLjcgMTY3LjhoLTdsOC4zLTQ0aDdsLTguMyA0NFpNMjYuMyAxNjcuOGgtN2w4LjMtNDRoN2wtOC4zIDQ0Wk0yMDkuMiAxNjcuOGgtN2wtOC4zLTQ0aDdsOC4zIDQ0Wk02OCA5MS4xaC03djI1aDdWOTFaIi8+CiAgICA8cGF0aCBmaWxsPSIjRjNGNkY5IiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMjA4LjQgNjYuN0gzOVY5MmgxNjkuM1Y2Ni43WiIvPgogICAgPHBhdGggZmlsbD0iIzAwMTEyQyIgc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTIwOC40IDEyMy40di03LjZIMzl2Ny42aDE2OS41WiIvPgogICAgPHBhdGggZmlsbD0iI0YzRjZGOSIgc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTE5My43IDEyMy40VjExNkgxNS4zdjcuNWgxNzguNFoiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDExMkMiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik03Ny40IDE2Ny44aC03bC04LjMtNDRoN2w4LjMgNDRaTTQyLjIgMTUwLjRsLS44IDNoMTYuMmwuNy0zLjFoLTE2Wk04MC4xIDE1MC4zbDEuNCAzaDE1LjFsLTEtM0g4MFoiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDExMkMiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Im05Ny44IDExNS45LTI4LjQuMS03LjcgMzQuN2gtMjNsOS41LTQwLjZhMTggMTggMCAwIDEgMTYuNy0xMmw1NC0uNS0uNSAyLjZjLTIgOS4xLTEwLjYgMTUuNi0yMC42IDE1LjdaIi8+CiAgICA8cGF0aCBmaWxsPSIjMDAxMTJDIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNMTEwLjcgMTE1LjlIODUuNUw5OSAxNTAuM2gtMjVMNjIuOSAxMTdjLTMtOSAzLjYtMTguNiAxMy42LTE5LjRoLjhsNTQuNS0xLjMtLjYgMy45YTIwLjcgMjAuNyAwIDAgMS0yMC40IDE1LjdaIi8+CiAgICA8cGF0aCBmaWxsPSIjRjNGNkY5IiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNNTcuNiAxNTMuNEg0MS40bC0uOCAyLjctMTYuOCA0LjJjLTIgLjctMy43IDIuMS00LjcgMy45SDU1bDIuNi0xMC44Wk05Ni42IDE1My40SDgxLjVsMS4zIDIuOS0xNS4yIDRjLTIgLjctMy42IDIuMS00LjYgMy44aDM3LjNsLTMuNy0xMC43WiIvPgogICAgPHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0ibTU0IDE2OCAxLTMuOEgxOWE4IDggMCAwIDAtMSAzLjhoMzZaTTEwMS43IDE2OGwtMS4zLTMuOEg2M2E4IDggMCAwIDAtMSAzLjhoMzkuNloiLz4KICAgIDxwYXRoIGZpbGw9IiMzMzAwQzIiIGQ9Ik04Ni45IDU5LjZjLjMgMjAtNS40IDM3LjctNS40IDM3LjdsNTAuMy0uMXM0LjctMTguNyAyLTMxYy0yLjYtMTIuMy0xNi4yLTIxLjgtMjIuNS0yMi4zLTYuMi0uNi0yMC42IDQuNi0yMC42IDQuNiIvPgogICAgPHBhdGggc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTg2LjkgNTkuNmMuMyAyMC01LjQgMzcuNy01LjQgMzcuN2w1MC4zLS4xczQuNy0xOC43IDItMzFjLTIuNi0xMi4zLTE2LjItMjEuOC0yMi41LTIyLjMtNi4yLS42LTIwLjYgNC42LTIwLjYgNC42Ii8+CiAgICA8cGF0aCBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNOTYuNyA0Ny4xcy42IDUuNSAyIDljMS4yIDMuNiAyIDcuMyAyIDcuM3M2LjgtMTcuNSA4LjMtMTkuNmMwIDAtOCA2LjUtMTIuMyAzLjNaIi8+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJtMTA1LjggMzguMyAzLjEgNS41cy00IDYuOC04LjYgNi43Yy00LjcgMC0zLjUtNS42LTMuNS01LjZsOS02LjZaIi8+CiAgICA8cGF0aCBmaWxsPSIjMDAxMTJDIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJtMTAxLjggNDQuNy00IDQuOS0xLTIuNSA1LTIuNFpNOTcgODMuMUg4NS42bC0zLjMtMTcuOWgxMS4xbDMuNCAxNy45WiIvPgogICAgPHBhdGggZmlsbD0iI0VBQjFBMCIgc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTEwMS42IDgyLjZjLTEtMS42LTIuMy0zLTMuMi00LjUtMS4yLTItMS43LTQuNS0yLjMtNi44LTIuNS0uNy0yLjYgNC0yLjQgNiAuMyAxLjggMSAzLjcgMSAzLjctMi0uNC0xMC40LTQuNy0xMC40LTQuNy4zIDAtMS40IDIuMy0uNyAzLjNsMSAxLjNzLS43IDEuMy0uNyAyYy0uMSAxLjIgMS4xIDIuMiAxLjEgMi4ybC4xIDIuM2MuMi44IDEuNSAxLjUgMS41IDEuNXMwIDEuNC43IDEuOGMuNy4zIDExLjIgMS4yIDE1LjggMS40IDAtMS42LjUtMy40LjMtNSAwLTEuNS0xLTMuMi0xLjgtNC41WiIvPgogICAgPHBhdGggZmlsbD0iIzAwMTEyQyIgc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTExMS43IDIxLjljLjQuOC0uMiAxLjgtMSAyLjQtLjcuNS0xLjcuNy0yLjYgMSAxLjItLjQgMi42LS4yIDMuOC4yLjQuMi44LjQgMSAuNy4zLjUuMSAxLjItLjIgMS42LS4zLjQtLjguOC0xLjMgMS0xLjQuNy0zIDEuMi00LjUgMS4zIDEgMCAxLjUgMS4xIDEuMSAxLjktLjQuOC0xLjMgMS4yLTIuMiAxLjQtMS41LjQtMy4zLjQtNC41LS40LS43LS40LTEuMS0xLTEuNS0xLjVhNyA3IDAgMCAxLS4yLTcuNCA5IDkgMCAwIDEgNS43LTMuOGMxLjctLjMgNS42LS4zIDYuNCAxLjZaIi8+CiAgICA8cGF0aCBmaWxsPSIjMDAxMTJDIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNNjguNyAyNWMuNSAxLjcgMyAyIDQuNiAxLjMtMS4yLjItMi40LjQtMy4zIDEuMi0xIC45LTEuMSAyLjQtLjEgMyAuMy4zLjguNCAxLjMuNGE5IDkgMCAwIDAgNC42LTFjLTEgLjYtMiAxLjktMS4zIDMgLjYuOSAyLjIuOCAzLjIuMiAxLS42IDItMS41IDMtMS44LS42LjQtMS4zLjgtMS41IDEuNS0uMy42IDAgMS42LjYgMS43LjUuMSAxIDAgMS40LS4yIDEuMS0uNiAyLjItMS4zIDMtMi4zLTEgLjMtLjggMS45LjEgMi4zIDEgLjQgMiAwIDMtLjZhOC41IDguNSAwIDAgMCAyLjgtM2MtLjMuNCAwIDEuMS42IDEuNSAxIC42IDIuNC43IDMuNS4zYTkgOSAwIDAgMCAzLTIgNyA3IDAgMCAwIDItMi40Yy42LTEuNC4yLTMtLjctNC4yQTEwIDEwIDAgMCAwIDk1IDIxYy00LjMtMi4zLTkuOC0zLTE0LjYtMS43YTYuNiA2LjYgMCAwIDAtNi44LTJjLS43LjMtMS41LjctMS44IDEuNC0uNSAxLjIuNSAyLjMgMS42IDIuOC0yIDAtNS40IDEtNC42IDMuNVoiLz4KICAgIDxwYXRoIGZpbGw9IiNFQUIxQTAiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik04MC42IDI3LjdjLjctLjcgMTAuNi02LjggMTAuNi02LjhsMTAuMiAzLjggNC44IDkuMXYuMmMuOSA3LjQtMy4xIDEwLjUtOC44IDEzLjItNSAyLjQtMTYtMS42LTE2LjktMTkuNCAwIDAgMCAwIDAgMFoiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDExMkMiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik03MC4zIDE3LjNjLS4zLS45LS4zLTEuOC4yLTIuNC41LS41IDEuMi0uNyAxLjktLjYuNyAwIDEuMy40IDEuOS43LS45LS44LS4zLTIuMy44LTIuNyAxLjEtLjMgMi40LjEgMy4yIDEgLjUuNCAxIDQuMyAxLjUgNC40LjYuMSAxIDAgMS41LS4yIDIuNC0uOSA1LTEuNSA3LjQtMS44IDEuOS0uMyAzLjgtLjQgNS42LS4yIDIuMS4zIDQuMiAxIDYuMiAxLjl2MGMzLjQuMiA3LjQgMTAuNSA2LjQgMTAuOC0uOS4yLjIgMC0uMS4xLTIuMS43LTYuNC0uNy03LjYtMS4xYTEyIDEyIDAgMCAxLTMuMS0yLjFjLTEuOC0xLjQtNC0yLjItNi4yLTIuNmwtMS40LS4yYy0xLjguNy0zLjggMS01LjguNy0uNyAwLTEuNS0uMy0yLS44LS4zLS40LS4zLTEuMi4yLTEuNS0xIC41LTIuMS43LTMuMy43LS43IDAtMS42IDAtMi4yLS43LS42LS41LS41LTEuNi4zLTEuOC0xLjMuMy0yLjguNy00IDAtLjctLjUtMS4yLS43LTEuNC0xLjZaIi8+CiAgICA8cGF0aCBmaWxsPSIjRUFCMUEwIiBkPSJNMTAwIDI3LjhjLS42LTEuNy43LTQuMyAyLjQtNC42IDIuNi0uNSA0IDIgNC41IDQgLjUgMS44LjYgMy44LS4yIDUuNi0uMy41LS42IDEtMS4yIDEuNCIvPgogICAgPHBhdGggc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTEwMCAyNy44Yy0uNi0xLjcuNy00LjMgMi40LTQuNiAyLjYtLjUgNCAyIDQuNSA0IC41IDEuOC42IDMuOC0uMiA1LjYtLjMuNS0uNiAxLTEuMiAxLjQiLz4KICAgIDxwYXRoIGZpbGw9IiNGM0Y2RjkiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik05Ni44IDcuN2MyIDAgMy42LTEuNSAzLjYtMy40IDAtMS44LTEuNi0zLjMtMy42LTMuM3MtMy42IDEuNS0zLjYgMy4zYzAgMS45IDEuNiAzLjQgMy42IDMuNFoiLz4KICAgIDxwYXRoIGZpbGw9IiNGM0Y2RjkiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik0xMDcuNCAyMi4xYzAtLjEgMC0zLjMtMS41LTcuNS0xLjYtNC00LjktOS4xLTExLjYtMTAuNC04LjItMS4yLTEzLjIgNC0xNS40IDcuMy0yLjMgMy4yLTIuNCA1LjMtMi40IDUuM2E2NyA2NyAwIDAgMSAzMC45IDUuM1oiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDExMkMiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik05My4zIDE3LjljLjctLjkuNC0yLjItLjYtMi43LTEtLjQtMi40LjItMi43IDEuMi43LS45LjQtMi4yLS41LTIuOS0uOS0uNy0yLjMtLjctMy4yIDAtMSAuNi0xLjMgMS45LTEgMi45IDAtLjcgMC0xLjUtLjItMi4xLS4zLS43LTEtMS4zLTEuNy0xLjMtLjUgMC0xIC4yLTEuNC41YTMgMyAwIDAgMC0xIDNjLS4zLTEtLjUtMi4xLTEuMi0zLS43LTEtMS44LTEuNi0zLTEuNC0xIC4yLTIgMS4zLTIgMi4zIDAgMSAuNyAyIDEuNSAyLjcuMSAwIDE0LjYgNCAxNyAuOFoiLz4KICAgIDxwYXRoIGZpbGw9IiMzMzAwQzIiIGQ9Ik0xMjggNTQuOHMyMiAyNi41IDE4LjkgMzcuOGMtMiA2LjctNDcgNC45LTQ3IDQuOWwyLjUtMTQuMyAyMy43LTEuNS05LjctMTIuNSIvPgogICAgPHBhdGggc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTEyOCA1NC44czIyIDI2LjUgMTguOSAzNy44Yy0yIDYuNy00NyA0LjktNDcgNC45bDIuNS0xNC4zIDIzLjctMS41LTkuNy0xMi41Ii8+CiAgICA8cGF0aCBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDExMkMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9Ii42IiBkPSJNNTcuNCAxLjRIMXYyOS40aDMzLjJMNDguOSA0NWwtLjItMTQuMmg4LjdWMS40WiIvPgogICAgPHBhdGggc3Ryb2tlPSIjMDAxMTJDIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0iTTIuMyAxNjhoMjE5LjQiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDExMkMiIHN0cm9rZT0iIzAwMTEyQyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iLjYiIGQ9Ik0yOS4yIDI2LjNjNi4yIDAgMTEuMy00LjcgMTEuMy0xMC41UzM1LjQgNS4yIDI5LjIgNS4yQzIzIDUuMiAxNy45IDEwIDE3LjkgMTUuOHM1IDEwLjUgMTEuMyAxMC41WiIvPgogICAgPHBhdGggc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIuNiIgZD0ibTI1LjIgMTIgOCA3LjVNMzMuMiAxMmwtOCA3LjUiLz4KPC9zdmc+";
+const IMAGE_BREAKPOINT_SIZES = {
   md: 680,
   lg: 1024
-}, j = ({
-  title: y,
-  message: m,
-  imageDesktop: i,
-  imageMobile: n,
-  withImage: g,
-  centered: f,
-  refreshComponent: o,
-  onContactSupport: t
+};
+const ErrorMessageDisplay = ({
+  title,
+  message,
+  imageDesktop,
+  imageMobile,
+  withImage,
+  centered,
+  refreshComponent,
+  onContactSupport,
+  translationValues
 }) => {
-  const { i18n: e } = v(), { updateCore: a } = E(), u = T(
-    (s) => Array.isArray(s) ? s.map(
-      (d, x) => x === 0 ? e.get(d) : /* @__PURE__ */ r(_, { children: [
-        /* @__PURE__ */ r("br", {}),
-        e.get(d)
-      ] })
-    ) : e.get(s),
-    [e]
+  const { i18n } = useCoreContext();
+  const { updateCore } = useAuthContext();
+  const renderMessage = T(
+    (errorMessage) => {
+      if (Array.isArray(errorMessage)) {
+        return errorMessage.map(
+          (message2, i) => i === 0 ? /* @__PURE__ */ o(k, { children: [
+            i18n.get(message2),
+            translationValues && translationValues[message2] && /* @__PURE__ */ o(k, { children: translationValues[message2] })
+          ] }) : /* @__PURE__ */ o(k, { children: [
+            /* @__PURE__ */ o("br", {}),
+            i18n.get(message2),
+            translationValues && translationValues[message2] && /* @__PURE__ */ o(k, { children: translationValues[message2] })
+          ] })
+        );
+      }
+      return i18n.get(errorMessage);
+    },
+    [i18n, translationValues]
   );
-  return /* @__PURE__ */ r("div", { className: `adyen-fp-error-message-display ${f ? "adyen-fp-error-message-display--centered" : ""}`, children: [
-    (i || n || g) && /* @__PURE__ */ r("div", { className: "adyen-fp-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${h.md}px)`, srcSet: i }),
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${h.md}px)`, srcSet: n }),
-      /* @__PURE__ */ r("img", { srcSet: i ?? A, alt: e.get("thereWasAnUnexpectedError") })
+  return /* @__PURE__ */ o("div", { className: `adyen-pe-error-message-display ${centered ? "adyen-pe-error-message-display--centered" : ""}`, children: [
+    (imageDesktop || imageMobile || withImage) && /* @__PURE__ */ o("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ o("picture", { children: [
+      /* @__PURE__ */ o("source", { type: "image/svg+xml", media: `(min-width: ${IMAGE_BREAKPOINT_SIZES.md}px)`, srcSet: imageDesktop }),
+      /* @__PURE__ */ o("source", { type: "image/svg+xml", media: `(max-width: ${IMAGE_BREAKPOINT_SIZES.md}px)`, srcSet: imageMobile }),
+      /* @__PURE__ */ o("img", { srcSet: imageDesktop ?? noResults, alt: i18n.get("thereWasAnUnexpectedError") })
     ] }) }),
-    /* @__PURE__ */ r(l, { variant: c.TITLE, children: e.get(y) }),
-    m && /* @__PURE__ */ r(l, { variant: c.BODY, children: u(m) }),
-    (t || o) && /* @__PURE__ */ r("div", { className: "adyen-fp-error-message-display__button", children: [
-      t && /* @__PURE__ */ r(p, { onClick: t, children: e.get("reachOutToSupport") }),
-      !t && o && /* @__PURE__ */ r(p, { onClick: () => a == null ? void 0 : a(), children: e.get("refreshThePage") })
+    /* @__PURE__ */ o(Typography, { variant: TypographyVariant.TITLE, children: i18n.get(title) }),
+    message && /* @__PURE__ */ o(Typography, { variant: TypographyVariant.BODY, children: renderMessage(message) }),
+    (onContactSupport || refreshComponent) && /* @__PURE__ */ o("div", { className: "adyen-pe-error-message-display__button", children: [
+      onContactSupport && /* @__PURE__ */ o(Button, { onClick: onContactSupport, children: i18n.get("reachOutToSupport") }),
+      !onContactSupport && refreshComponent && /* @__PURE__ */ o(Button, { onClick: updateCore, children: i18n.get("refresh") })
     ] })
   ] });
 };
 export {
-  j as ErrorMessageDisplay,
-  h as IMAGE_BREAKPOINT_SIZES
+  ErrorMessageDisplay,
+  IMAGE_BREAKPOINT_SIZES
 };

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

@@ -1,70 +1,93 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "classnames";
-import { useState as R, useCallback as E, useRef as l, useEffect as T } from "../../../external/preact/hooks/dist/hooks.module.js";
-import "./ExpandableCard.scss.js";
-import x from "../SVGIcons/ChevronUp.js";
-import v from "../SVGIcons/ChevronDown.js";
-import { BASE_CLASS as I, CONTAINER_CLASS as d, CONTAINER_BUTTON_CLASS as b, CONTAINER_FILLED_CLASS as m, CONTAINER_OVERLAY_ID as p, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as _, CHEVRON_CLASS as h, CONTAINER_OVERLAY_CLASS as B, CONTAINER_HIDDEN_CLASS as D } from "./constants.js";
-import g from "../../../core/Context/useCoreContext.js";
-import { useClickOutside as k } from "../../../hooks/element/useClickOutside.js";
-import L from "../BaseButton/BaseButton.js";
-import { Fragment as y } from "preact";
-const H = ({ renderHeader: t, children: C, filled: o }) => {
-  const { i18n: f } = g(), [a, u] = R(!1), r = E(() => u((n) => !n), [u]), A = l(null), i = l(!1), S = l(a), c = k(
+import '../../../../ExpandableCard.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import cx from "classnames";
+import { h, T, _, p } from "../../../../hooks.module-8565d716.mjs";
+import ChevronUp from "../SVGIcons/ChevronUp.js";
+import ChevronDown from "../SVGIcons/ChevronDown.js";
+import { BASE_CLASS, CONTAINER_CLASS, CONTAINER_BUTTON_CLASS, CONTAINER_FILLED_CLASS, CONTAINER_OVERLAY_ID, CONTENT_CLASS, CONTENT_EXPANDABLE_CLASS, CHEVRON_CLASS, CONTAINER_OVERLAY_CLASS, CONTAINER_HIDDEN_CLASS } from "./constants.js";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import { useClickOutside } from "../../../hooks/element/useClickOutside.js";
+import BaseButton from "../BaseButton/BaseButton.js";
+import { k } from "../../../../preact.module-38e5a571.mjs";
+const ExpandableCard$1 = "";
+const ExpandableCard = ({ renderHeader, children, filled, fullWidth, ...listeners }) => {
+  const { i18n } = useCoreContext();
+  const [isOpen, setIsOpen] = h(false);
+  const toggleIsOpen = T(() => setIsOpen((isOpen2) => !isOpen2), [setIsOpen]);
+  const expandButtonRef = _(null);
+  const isClosedFromOutside = _(false);
+  const isOpenRef = _(isOpen);
+  const clickOutsideRef = useClickOutside(
     void 0,
-    E(() => {
-      a && (r(), i.current = !0);
-    }, [a, r])
+    T(() => {
+      if (isOpen) {
+        toggleIsOpen();
+        isClosedFromOutside.current = true;
+      }
+    }, [isOpen, toggleIsOpen])
   );
-  return T(() => {
-    var n, O;
-    a ? (n = c.current) == null || n.focus() : (S.current !== a && !i.current && ((O = A.current) == null || O.focus()), i.current = !1), S.current = a;
-  }, [a, c]), /* @__PURE__ */ e("div", { className: I, children: C ? /* @__PURE__ */ e(y, { children: [
-    /* @__PURE__ */ e(
-      L,
+  p(() => {
+    var _a, _b;
+    if (isOpen) {
+      (_a = clickOutsideRef.current) == null ? void 0 : _a.focus();
+    } else {
+      if (isOpenRef.current !== isOpen && !isClosedFromOutside.current) {
+        (_b = expandButtonRef.current) == null ? void 0 : _b.focus();
+      }
+      isClosedFromOutside.current = false;
+    }
+    isOpenRef.current = isOpen;
+  }, [isOpen, clickOutsideRef]);
+  return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: children ? /* @__PURE__ */ o(k, { children: [
+    /* @__PURE__ */ o(
+      BaseButton,
       {
-        className: s(d, b, { [m]: o }),
-        disabled: a,
-        "aria-controls": p,
-        "aria-expanded": a,
-        "aria-hidden": a,
-        onClick: r,
-        ref: A,
+        className: cx(CONTAINER_CLASS, CONTAINER_BUTTON_CLASS, { [CONTAINER_FILLED_CLASS]: filled }),
+        disabled: isOpen,
+        fullWidth,
+        "aria-controls": CONTAINER_OVERLAY_ID,
+        "aria-expanded": isOpen,
+        "aria-hidden": isOpen,
+        onClick: toggleIsOpen,
+        ref: expandButtonRef,
         "data-testid": "expand-button",
+        ...listeners,
         children: [
-          /* @__PURE__ */ e("span", { className: "adyen-fp-sr-only", children: f.get("expandableCard.expand") }),
-          /* @__PURE__ */ e("div", { className: s(N, _), children: t }),
-          /* @__PURE__ */ e("div", { className: h, children: /* @__PURE__ */ e(v, { role: "presentation" }) })
+          /* @__PURE__ */ o("span", { className: "adyen-pe-sr-only", children: i18n.get("expandableCard.expand") }),
+          /* @__PURE__ */ o("div", { className: cx(CONTENT_CLASS, CONTENT_EXPANDABLE_CLASS), children: renderHeader }),
+          /* @__PURE__ */ o("div", { className: CHEVRON_CLASS, children: /* @__PURE__ */ o(ChevronDown, { role: "presentation" }) })
         ]
       }
     ),
-    /* @__PURE__ */ e(
-      L,
+    /* @__PURE__ */ o(
+      BaseButton,
       {
-        id: p,
-        className: s(d, B, {
-          [m]: o,
-          [D]: !a
+        id: CONTAINER_OVERLAY_ID,
+        className: cx(CONTAINER_CLASS, CONTAINER_BUTTON_CLASS, CONTAINER_OVERLAY_CLASS, {
+          [CONTAINER_FILLED_CLASS]: filled,
+          [CONTAINER_HIDDEN_CLASS]: !isOpen
         }),
-        disabled: !a,
-        "aria-controls": p,
-        "aria-expanded": a,
-        "aria-hidden": !a,
-        onClick: r,
-        ref: c,
+        disabled: !isOpen,
+        fullWidth,
+        "aria-controls": CONTAINER_OVERLAY_ID,
+        "aria-expanded": isOpen,
+        "aria-hidden": !isOpen,
+        onClick: toggleIsOpen,
+        ref: clickOutsideRef,
         "data-testid": "collapse-button",
+        ...listeners,
         children: [
-          /* @__PURE__ */ e("span", { className: "adyen-fp-sr-only", children: f.get("expandableCard.collapse") }),
-          /* @__PURE__ */ e("div", { className: s(N, _), children: [
-            t,
-            /* @__PURE__ */ e("div", { children: C })
+          /* @__PURE__ */ o("span", { className: "adyen-pe-sr-only", children: i18n.get("expandableCard.collapse") }),
+          /* @__PURE__ */ o("div", { className: cx(CONTENT_CLASS, CONTENT_EXPANDABLE_CLASS), children: [
+            renderHeader,
+            /* @__PURE__ */ o("div", { children })
           ] }),
-          /* @__PURE__ */ e("div", { className: h, children: /* @__PURE__ */ e(x, { role: "presentation" }) })
+          /* @__PURE__ */ o("div", { className: CHEVRON_CLASS, children: /* @__PURE__ */ o(ChevronUp, { role: "presentation" }) })
         ]
       }
     )
-  ] }) : /* @__PURE__ */ e("div", { className: s(d, { [m]: o }), children: /* @__PURE__ */ e("div", { className: N, children: t }) }) });
+  ] }) : /* @__PURE__ */ o("div", { className: cx(CONTAINER_CLASS, { [CONTAINER_FILLED_CLASS]: filled }), ...listeners, children: /* @__PURE__ */ o("div", { className: CONTENT_CLASS, children: renderHeader }) }) });
 };
 export {
-  H as default
+  ExpandableCard as default
 };

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

@@ -0,0 +1,45 @@
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { w as waitForWrapper, s as screen, r as render } from "../../../../index-2c0f6175.mjs";
+import ExpandableCard from "./ExpandableCard.js";
+import { CONTAINER_HIDDEN_CLASS } from "./constants.js";
+import { d as describe, b as beforeEach, t as test, g as globalExpect } from "../../../../vendor-vi.a3ff54b1-5e924357.mjs";
+describe("ExpandableCard component", () => {
+  const testExpandBehaviour = async () => {
+    const expandButton = screen.getByTestId("expand-button");
+    const collapseButton = screen.getByTestId("collapse-button");
+    expandButton.click();
+    await waitForWrapper(() => {
+      globalExpect(collapseButton).not.toHaveClass(CONTAINER_HIDDEN_CLASS);
+      globalExpect(collapseButton).toHaveFocus();
+    });
+    return { expandButton, collapseButton };
+  };
+  beforeEach(() => {
+    render(
+      /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ o("button", { "data-testid": "outside-element", children: "Click" }),
+        /* @__PURE__ */ o(ExpandableCard, { renderHeader: "Header", children: "Body" })
+      ] })
+    );
+  });
+  test("should show and focus collapse button when expand button is clicked", async () => {
+    await testExpandBehaviour();
+  });
+  test("should hide collapse button and focus expand button when collapse button is clicked", async () => {
+    const { collapseButton, expandButton } = await testExpandBehaviour();
+    collapseButton.click();
+    await waitForWrapper(() => {
+      globalExpect(collapseButton).toHaveClass(CONTAINER_HIDDEN_CLASS);
+      globalExpect(expandButton).toHaveFocus();
+    });
+  });
+  test("should hide collapse button and not focus expand button when clicking outside of the collapse button", async () => {
+    const outsideElement = screen.getByTestId("outside-element");
+    const { collapseButton, expandButton } = await testExpandBehaviour();
+    outsideElement.click();
+    await waitForWrapper(() => {
+      globalExpect(collapseButton).toHaveClass(CONTAINER_HIDDEN_CLASS);
+      globalExpect(expandButton).not.toHaveFocus();
+    });
+  });
+});

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

@@ -1,13 +1,22 @@
-const n = "adyen-fp-expandable-card", _ = n + "__container", S = _ + "--button", C = _ + "--filled", o = _ + "--hidden", A = _ + "--overlay", t = A, N = n + "__content", E = N + "--expandable", c = n + "__chevron";
+const BASE_CLASS = "adyen-pe-expandable-card";
+const CONTAINER_CLASS = BASE_CLASS + "__container";
+const CONTAINER_BUTTON_CLASS = CONTAINER_CLASS + "--button";
+const CONTAINER_FILLED_CLASS = CONTAINER_CLASS + "--filled";
+const CONTAINER_HIDDEN_CLASS = CONTAINER_CLASS + "--hidden";
+const CONTAINER_OVERLAY_CLASS = CONTAINER_CLASS + "--overlay";
+const CONTAINER_OVERLAY_ID = CONTAINER_OVERLAY_CLASS;
+const CONTENT_CLASS = BASE_CLASS + "__content";
+const CONTENT_EXPANDABLE_CLASS = CONTENT_CLASS + "--expandable";
+const CHEVRON_CLASS = BASE_CLASS + "__chevron";
 export {
-  n as BASE_CLASS,
-  c as CHEVRON_CLASS,
-  S as CONTAINER_BUTTON_CLASS,
-  _ as CONTAINER_CLASS,
-  C as CONTAINER_FILLED_CLASS,
-  o as CONTAINER_HIDDEN_CLASS,
-  A as CONTAINER_OVERLAY_CLASS,
-  t as CONTAINER_OVERLAY_ID,
-  N as CONTENT_CLASS,
-  E as CONTENT_EXPANDABLE_CLASS
+  BASE_CLASS,
+  CHEVRON_CLASS,
+  CONTAINER_BUTTON_CLASS,
+  CONTAINER_CLASS,
+  CONTAINER_FILLED_CLASS,
+  CONTAINER_HIDDEN_CLASS,
+  CONTAINER_OVERLAY_CLASS,
+  CONTAINER_OVERLAY_ID,
+  CONTENT_CLASS,
+  CONTENT_EXPANDABLE_CLASS
 };

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

@@ -1,15 +1,50 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as i } from "../Button/types.js";
-import a from "../../../core/Context/useCoreContext.js";
-import l from "../Button/Button.js";
-import "./FilterBar.scss.js";
-function f(t) {
-  const { i18n: r } = a();
-  return /* @__PURE__ */ e("div", { "aria-label": r.get("filterBar"), className: "adyen-fp-filter-bar", children: [
-    t.children,
-    t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ e(l, { variant: i.TERTIARY, onClick: t.resetFilters, children: r.get("button.clearAll") })
+import '../../../../FilterBar.css';
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { useMediaQuery, mediaQueries } from "../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import { B as ButtonVariant } from "../../../../types-7ad6576a.mjs";
+import Close from "../SVGIcons/Close.js";
+import Filter from "../SVGIcons/Filter.js";
+import { T as Typography, b as TypographyVariant } from "../../../../Typography-11b95870.mjs";
+import useCoreContext from "../../../core/Context/useCoreContext.js";
+import cx from "classnames";
+import { h, p } from "../../../../hooks.module-8565d716.mjs";
+import Button from "../Button/Button.js";
+import { k } from "../../../../preact.module-38e5a571.mjs";
+const FilterBar$1 = "";
+function FilterBar(props) {
+  const { i18n } = useCoreContext();
+  const isSmViewport = useMediaQuery(mediaQueries.down.xs);
+  const [showFilters, setShowFilters] = h(!isSmViewport);
+  p(() => {
+    setShowFilters(!isSmViewport);
+  }, [isSmViewport]);
+  return /* @__PURE__ */ o(k, { children: [
+    isSmViewport && /* @__PURE__ */ o("div", { className: "adyen-pe-filter-bar__header", children: [
+      /* @__PURE__ */ o(Typography, { variant: TypographyVariant.SUBTITLE, children: i18n.get("transactions") }),
+      /* @__PURE__ */ o(
+        Button,
+        {
+          className: "adyen-pe-filter-bar__header-icon",
+          variant: ButtonVariant.SECONDARY,
+          iconButton: true,
+          onClick: () => setShowFilters((prevState) => !prevState),
+          children: showFilters ? /* @__PURE__ */ o(Close, {}) : /* @__PURE__ */ o(Filter, {})
+        }
+      )
+    ] }),
+    showFilters && /* @__PURE__ */ o(
+      "div",
+      {
+        "aria-label": i18n.get("filterBar"),
+        className: cx("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": isSmViewport }),
+        children: [
+          props.children,
+          props.canResetFilters && !!props.resetFilters && /* @__PURE__ */ o(Button, { variant: ButtonVariant.TERTIARY, onClick: props.resetFilters, children: i18n.get("button.clearAll") })
+        ]
+      }
+    )
   ] });
 }
 export {
-  f as default
+  FilterBar as default
 };

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

@@ -1,18 +1,20 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-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 F } from "../../../../../utils/class-name-utils.js";
-import { parseBoolean as N } from "../../../../../utils/common/index.js";
-import { forwardRef as d } 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 g = "adyen-fp-filter-button";
-function h({ className: o, classNameModifiers: a = [], children: s, disabled: r, onClick: m, ...n }, p) {
-  const i = e(() => F("", o) || "", [o]), l = e(() => N(r), [r]), { classes: f, click: u } = c(i, a, g, l, m);
-  return /* @__PURE__ */ t("button", { className: f, ref: p, onClick: u, ...n, children: /* @__PURE__ */ t(B, { el: y.SPAN, variant: T.BODY, stronger: !0, children: s }) });
+import '../../../../../../FilterButton.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import useButton from "../../../Button/hooks/useButton.js";
+import { T as Typography, a as TypographyElement, b as TypographyVariant } from "../../../../../../Typography-11b95870.mjs";
+import { parseClassName } from "../../../../../utils/class-name-utils.js";
+import { parseBoolean } from "../../../../../utils/common/index.js";
+import { k } from "../../../../../../compat.module-a4d537ff.mjs";
+import { F } from "../../../../../../hooks.module-8565d716.mjs";
+const FilterButton$2 = "";
+const DEFAULT_FILTER_BUTTON_CLASSNAME = "adyen-pe-filter-button";
+function FilterButton({ className, classNameModifiers = [], children, disabled, onClick, ...restAttributes }, ref) {
+  const classNameValue = F(() => parseClassName("", className) || "", [className]);
+  const disabledValue = F(() => parseBoolean(disabled), [disabled]);
+  const { classes, click } = useButton(classNameValue, classNameModifiers, DEFAULT_FILTER_BUTTON_CLASSNAME, disabledValue, onClick);
+  return /* @__PURE__ */ o("button", { className: classes, ref, onClick: click, ...restAttributes, children: /* @__PURE__ */ o(Typography, { el: TypographyElement.SPAN, variant: TypographyVariant.BODY, stronger: true, children }) });
 }
-const x = d(h);
+const FilterButton$1 = k(FilterButton);
 export {
-  x as default
+  FilterButton$1 as default
 };