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

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

@@ -1,12 +1,95 @@
-import "../../../../jsxRuntime.module-69493d81.mjs";
-import "../../../../preact.module-38e5a571.mjs";
-import "classnames";
-import "./components/SkeletonBody.js";
-import "./components/TableBody.js";
-import { a, D } from "../../../../index-6e47f755.mjs";
-import "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import "../../../../hooks.module-8565d716.mjs";
+import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { toChildArray as _, Fragment as f } from "../../../external/preact/dist/preact.module.js";
+import o from "classnames";
+import "./DataGrid.scss.js";
+import { TableBody as h } from "./components/TableBody.js";
+import { InteractiveBody as b } from "./components/InteractiveBody.js";
+import { CellTextPosition as c } from "./types.js";
+import w from "./components/SkeletonBody.js";
+import { ErrorMessageDisplay as N } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { useMemo as m } from "../../../external/preact/hooks/dist/hooks.module.js";
+import C from "../../../images/no-data-female.svg.js";
+const G = Object.freeze({
+  activeIndex: -1,
+  index: -1
+});
+function g({ errorDisplay: e, ...a }) {
+  var l, r, i;
+  const y = _(a.children).find((t) => (t == null ? void 0 : t.type) === s), n = !a.loading && ((l = a.data) == null ? void 0 : l.length) === 0 && !a.error, u = m(() => !a.loading && n || a.error, [n, a.error, a.loading]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: o("adyen-pe-data-grid", {
+        "adyen-pe-data-grid--condensed": a.condensed,
+        "adyen-pe-data-grid--outline": a.outline,
+        "adyen-pe-data-grid--scrollable": a.scrollable,
+        "adyen-pe-data-grid--loading": a.loading,
+        "adyen-pe-data-grid--empty": n || a.error
+      }),
+      children: /* @__PURE__ */ d(f, { children: [
+        /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
+          /* @__PURE__ */ d("table", { className: "adyen-pe-data-grid__table", children: [
+            /* @__PURE__ */ d("thead", { className: "adyen-pe-data-grid__head", children: /* @__PURE__ */ d("tr", { role: "rowheader", className: "adyen-pe-data-grid__row", children: a.columns.map((t) => /* @__PURE__ */ d(
+              "th",
+              {
+                role: "columnheader",
+                id: String(t.key),
+                className: o("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
+                  "adyen-pe-data-grid__cell--right": t.position === c.RIGHT,
+                  "adyen-pe-data-grid__cell--center": t.position === c.CENTER
+                }),
+                children: t.label
+              },
+              t.key
+            )) }) }),
+            /* @__PURE__ */ d(R, { ...a, emptyBody: n })
+          ] }),
+          u && (a.error && e ? e() : /* @__PURE__ */ d(
+            N,
+            {
+              title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
+              message: (i = a.emptyTableMessage) == null ? void 0 : i.message,
+              imageDesktop: C,
+              centered: !0
+            }
+          ))
+        ] }),
+        y
+      ] })
+    }
+  );
+}
+function R(e) {
+  const a = m(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
+  return /* @__PURE__ */ d("tbody", { className: o("adyen-pe-data-grid__body"), children: a ? /* @__PURE__ */ d(w, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
+    b,
+    {
+      onRowHover: e.onRowHover,
+      data: e.data,
+      columns: e.columns,
+      onRowClick: e.onRowClick,
+      customCells: e.customCells
+    }
+  ) : /* @__PURE__ */ d(
+    h,
+    {
+      onRowHover: e.onRowHover,
+      data: e.data,
+      customCells: e.customCells,
+      columns: e.columns
+    }
+  ) });
+}
+g.Footer = s;
+function s({ children: e }) {
+  return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
+}
+g.defaultProps = {
+  condensed: !1,
+  outline: !0,
+  scrollable: !0
+};
 export {
-  a as INITIAL_STATE,
-  D as default
+  G as INITIAL_STATE,
+  g as default
 };

package/dist/es/components/internal/DataGrid/DataGrid.scss.js

@@ -0,0 +1,4 @@
+const a = "";
+export {
+  a as default
+};

package/dist/es/components/internal/DataGrid/DataGridCell.js

@@ -1,7 +1,7 @@
-import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
-function DataGridCell({ children, ...props }) {
-  return /* @__PURE__ */ o("td", { role: "cell", className: "adyen-pe-data-grid__cell", ...props, children });
+import { jsx as l } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+function t({ children: a, ...e }) {
+  return /* @__PURE__ */ l("td", { role: "cell", className: "adyen-pe-data-grid__cell", ...e, children: a });
 }
 export {
-  DataGridCell as default
+  t as default
 };

package/dist/es/components/internal/DataGrid/components/InteractiveBody.js

@@ -1,10 +1,40 @@
-import "../../../../../jsxRuntime.module-69493d81.mjs";
-import "./TableCells.js";
-import "../../../../core/Context/useCoreContext.js";
-import "../../../../utils/common/index.js";
-import "../../../../../hooks.module-8565d716.mjs";
-import { I } from "../../../../../index-6e47f755.mjs";
-import "../../../../../preact.module-38e5a571.mjs";
+import { jsx as l } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TableCells as h } from "./TableCells.js";
+import F from "../../../../core/Context/useCoreContext.js";
+import { noop as t } from "../../../../utils/common/index.js";
+import { useCallback as d } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useInteractiveDataGrid as b } from "../hooks/useInteractiveDataGrid.js";
+import { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
+const T = ({
+  data: s,
+  columns: n,
+  onRowClick: o,
+  customCells: u,
+  onRowHover: e
+}) => {
+  const y = d(
+    (r) => () => o == null ? void 0 : o.callback(o != null && o.retrievedField ? r[o.retrievedField] : r),
+    [o]
+  ), { i18n: p } = F(), { currentIndex: f, listeners: c, ref: g } = b({ totalRows: (s == null ? void 0 : s.length) ?? 0 });
+  return /* @__PURE__ */ l(I, { children: s == null ? void 0 : s.map((r, a) => /* @__PURE__ */ l(
+    "tr",
+    {
+      onMouseEnter: p.has(`tooltip.${r == null ? void 0 : r.category}`) ? () => e(a) : t,
+      onFocus: p.has(`tooltip.${r == null ? void 0 : r.category}`) ? () => e(a) : t,
+      onMouseLeave: p.has(`tooltip.${r == null ? void 0 : r.category}`) ? () => e() : t,
+      onBlur: p.has(`tooltip.${r == null ? void 0 : r.category}`) ? () => e() : t,
+      ref: g,
+      "aria-selected": a === f,
+      "data-index": a,
+      className: "adyen-pe-data-grid__row adyen-pe-data-grid__row--clickable",
+      onClick: y(r),
+      onFocusCapture: c.onFocusCapture(a),
+      onKeyDownCapture: c.onKeyDownCapture,
+      children: /* @__PURE__ */ l(h, { columns: n, customCells: u, item: r, rowIndex: a })
+    },
+    r
+  )) });
+};
 export {
-  I as InteractiveBody
+  T as InteractiveBody
 };

package/dist/es/components/internal/DataGrid/components/SkeletonBody.js

@@ -1,24 +1,22 @@
-import '../../../../../SkeletonBody.css';
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { k } from "../../../../../preact.module-38e5a571.mjs";
-const DataGrid = "";
-const SkeletonBody = ({ columnsNumber, loading, emptyMessageDisplay }) => {
-  const rows = Array.from({ length: 10 }, (_, index) => index);
-  const columns = Array.from({ length: columnsNumber }, (_, index) => index);
-  return /* @__PURE__ */ o(k, { children: [
-    rows.map((_, i) => /* @__PURE__ */ o("tr", { className: "adyen-pe-data-grid__row", children: columns.map((_2, index) => /* @__PURE__ */ o("td", { className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell", children: /* @__PURE__ */ o(
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import s from "classnames";
+import "../DataGrid.scss.js";
+import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
+const _ = ({ columnsNumber: d, loading: t, emptyMessageDisplay: r }) => {
+  const o = Array.from({ length: 10 }, (n, e) => e), l = Array.from({ length: d }, (n, e) => e);
+  return /* @__PURE__ */ a(m, { children: [
+    o.map((n, e) => /* @__PURE__ */ a("tr", { className: "adyen-pe-data-grid__row", children: l.map((p, c) => /* @__PURE__ */ a("td", { className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell", children: /* @__PURE__ */ a(
       "span",
       {
-        className: cx({
-          "adyen-pe-data-grid__skeleton-cell-content adyen-pe-data-grid__skeleton-cell-content--loading": loading,
-          "adyen-pe-data-grid__empty-cell": !loading
+        className: s({
+          "adyen-pe-data-grid__skeleton-cell-content adyen-pe-data-grid__skeleton-cell-content--loading": t,
+          "adyen-pe-data-grid__empty-cell": !t
         })
       }
-    ) }, `adyen-pe-data-grid-skeleton-cell-${index}`)) }, `adyen-pe-data-grid-skeleton-row-${i}`)),
-    !loading && emptyMessageDisplay && emptyMessageDisplay
+    ) }, `adyen-pe-data-grid-skeleton-cell-${c}`)) }, `adyen-pe-data-grid-skeleton-row-${e}`)),
+    !t && r && r
   ] });
-};
+}, f = _;
 export {
-  SkeletonBody as default
+  f as default
 };

package/dist/es/components/internal/DataGrid/components/TableBody.js

@@ -1,28 +1,28 @@
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import useCoreContext from "../../../../core/Context/useCoreContext.js";
-import { noop } from "../../../../utils/common/index.js";
-import { TableCells } from "./TableCells.js";
-import { k } from "../../../../../preact.module-38e5a571.mjs";
-const TableBody = ({
-  data,
-  columns,
-  customCells,
-  onRowHover
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import h from "../../../../core/Context/useCoreContext.js";
+import { noop as p } from "../../../../utils/common/index.js";
+import { TableCells as u } from "./TableCells.js";
+import { Fragment as y } from "../../../../external/preact/dist/preact.module.js";
+const x = ({
+  data: a,
+  columns: c,
+  customCells: g,
+  onRowHover: r
 }) => {
-  const { i18n } = useCoreContext();
-  return /* @__PURE__ */ o(k, { children: data == null ? void 0 : data.map((item, index) => /* @__PURE__ */ o(
+  const { i18n: s } = h();
+  return /* @__PURE__ */ n(y, { children: a == null ? void 0 : a.map((o, l) => /* @__PURE__ */ n(
     "tr",
     {
       className: "adyen-pe-data-grid__row",
-      onMouseEnter: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover(index) : noop,
-      onFocus: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover(index) : noop,
-      onMouseLeave: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover() : noop,
-      onBlur: i18n.has(`tooltip.${item == null ? void 0 : item.category}`) ? () => onRowHover() : noop,
-      children: /* @__PURE__ */ o(TableCells, { columns, customCells, item, rowIndex: index })
+      onMouseEnter: s.has(`tooltip.${o == null ? void 0 : o.category}`) ? () => r(l) : p,
+      onFocus: s.has(`tooltip.${o == null ? void 0 : o.category}`) ? () => r(l) : p,
+      onMouseLeave: s.has(`tooltip.${o == null ? void 0 : o.category}`) ? () => r() : p,
+      onBlur: s.has(`tooltip.${o == null ? void 0 : o.category}`) ? () => r() : p,
+      children: /* @__PURE__ */ n(u, { columns: c, customCells: g, item: o, rowIndex: l })
     },
-    item
+    o
   )) });
 };
 export {
-  TableBody
+  x as TableBody
 };

package/dist/es/components/internal/DataGrid/components/TableCells.js

@@ -1,27 +1,21 @@
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import DataGridCell from "../DataGridCell.js";
-import { k } from "../../../../../preact.module-38e5a571.mjs";
-const TableCells = ({
-  columns,
-  customCells,
-  item,
-  rowIndex
-}) => {
-  return /* @__PURE__ */ o(k, { children: columns.map(({ key }) => {
-    if (customCells == null ? void 0 : customCells[key])
-      return /* @__PURE__ */ o(DataGridCell, {
-        "aria-labelledby": String(key),
-        // TODO create safeguard to remove "as any" assertion
-        children: customCells[key]({
-          key,
-          value: item[key],
-          item,
-          rowIndex
-        })
-      }, key);
-    return /* @__PURE__ */ o(DataGridCell, { "aria-labelledby": String(key), children: item[key] }, key);
-  }) });
-};
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import d from "../DataGridCell.js";
+import { Fragment as p } from "../../../../external/preact/dist/preact.module.js";
+const g = ({
+  columns: b,
+  customCells: a,
+  item: i,
+  rowIndex: l
+}) => /* @__PURE__ */ n(p, { children: b.map(({ key: r }) => a != null && a[r] ? /* @__PURE__ */ n(d, {
+  "aria-labelledby": String(r),
+  // TODO create safeguard to remove "as any" assertion
+  children: a[r]({
+    key: r,
+    value: i[r],
+    item: i,
+    rowIndex: l
+  })
+}, r) : /* @__PURE__ */ n(d, { "aria-labelledby": String(r), children: i[r] }, r)) });
 export {
-  TableCells
+  g as TableCells
 };

package/dist/es/components/internal/DataGrid/hooks/useInteractiveDataGrid.js

@@ -1,7 +1,78 @@
-import "../../../../../hooks.module-8565d716.mjs";
-import "../../../../hooks/useReflex/hooks/useReflex.js";
-import "../../../../../types-0aaff3aa.mjs";
-import { u } from "../../../../../index-6e47f755.mjs";
+import { useReducer as I, useCallback as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { InteractionKeyCode as s } from "../../../types.js";
+import { INITIAL_STATE as p } from "../DataGrid.js";
+import R from "../../../../hooks/useReflex/hooks/useReflex.js";
+const l = ({ totalRows: x }) => {
+  const [i, a] = I(
+    (e, t) => {
+      const n = x;
+      if (n > 1) {
+        const d = t.index;
+        if (d < n && d >= 0)
+          return t.type === "ACTIVE" ? Object.freeze({ ...e, index: t.index ?? 0, activeIndex: t.index }) : Object.freeze({ ...e, index: t.index ?? 0, activeIndex: -1 });
+      }
+      return e;
+    },
+    p
+  ), r = R(
+    o(
+      (e) => {
+        var n;
+        if (!(e instanceof Element))
+          return;
+        const t = Number((n = e.dataset) == null ? void 0 : n.index);
+        i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
+      },
+      [i.activeIndex, i.index]
+    )
+  ), c = o(
+    (e) => {
+      var n, d;
+      if (!(((n = e.target) == null ? void 0 : n.localName) === "tr")) {
+        e.code === s.ARROW_LEFT && a({
+          type: "ACTIVE",
+          index: i.index
+        });
+        return;
+      }
+      switch (e.code) {
+        case s.ARROW_DOWN:
+        case s.ARROW_UP:
+          a({
+            type: "ACTIVE",
+            index: e.code === s.ARROW_DOWN ? i.index + 1 : i.index - 1
+          });
+          break;
+        case s.HOME:
+          a({
+            type: "ACTIVE",
+            index: 0
+          });
+          break;
+        case s.END:
+          a({
+            type: "ACTIVE",
+            index: x - 1
+          });
+          break;
+        case s.ENTER:
+          (d = e.currentTarget) == null || d.click();
+          break;
+        default:
+          return;
+      }
+      e.stopPropagation();
+    },
+    [x, i.index]
+  ), f = o(
+    (e) => (t) => {
+      var d;
+      (!(((d = t.target) == null ? void 0 : d.localName) === "tr") || i.index === -1) && a({ type: "CURRENT", index: e });
+    },
+    [i.index]
+  );
+  return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: r, activeIndex: i.activeIndex, currentIndex: i.index };
+};
 export {
-  u as useInteractiveDataGrid
+  l as useInteractiveDataGrid
 };

package/dist/es/components/internal/DataGrid/types.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.CENTER = "center", r.RIGHT = "right", r))(e || {});
+export {
+  e as CellTextPosition
+};

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

@@ -1,71 +1,54 @@
-import '../../../../DatePicker.css';
-import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { k } from "../../../../compat.module-a4d537ff.mjs";
-import { h, F, T } from "../../../../hooks.module-8565d716.mjs";
-import useCoreContext from "../../../core/Context/useCoreContext.js";
-import { noop } from "../../../utils/common/index.js";
-import useReflex from "../../../hooks/useReflex/hooks/useReflex.js";
-import useTimezone from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import TimeRangeSelector from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import "../Calendar/calendar/timerange/presets/lastMonth.js";
-import "../../../core/Localization/datetime/restamper/restamper.js";
-import "../../../core/Localization/datetime/restamper/constants.js";
-import "../Calendar/calendar/timerange/presets/thisMonth.js";
-import "../Calendar/calendar/timerange/presets/yearToDate.js";
-import Calendar from "../Calendar/Calendar.js";
-import calendar from "../Calendar/calendar/facade/index.js";
-import useCalendarControlsRendering from "../Calendar/hooks/useCalendarControlsRendering.js";
-import { EMPTY_OBJECT } from "../../../utils/common/constants.js";
-const DatePicker$1 = "";
-const DatePicker = k((props, ref) => {
-  const { i18n } = useCoreContext();
-  const [controlsRenderer, controlsContainerRef] = useCalendarControlsRendering(props.renderControl);
-  const [lastUpdatedTimestamp, setLastUpdatedTimestamp] = h(performance.now());
-  const withTimezone = F(() => props.showTimezoneInfo !== false, [props.showTimezoneInfo]);
-  const { clockTime: time, GMTOffset: offset } = useTimezone({ timezone: props.timezone, withClock: withTimezone });
-  const datePickerClassName = F(() => cx([{ "adyen-pe-datepicker--with-timezone": withTimezone }, "adyen-pe-datepicker"]), [withTimezone]);
-  const timezoneI18nOptions = F(() => withTimezone ? { values: { offset, time } } : EMPTY_OBJECT, [offset, time, withTimezone]);
-  const calendarRef = useReflex(noop, ref);
-  const onHighlight = T(() => {
-    var _a, _b, _c, _d, _e;
-    setLastUpdatedTimestamp(performance.now());
-    if (((_a = calendarRef.current) == null ? void 0 : _a.from) && ((_b = calendarRef.current) == null ? void 0 : _b.to)) {
-      (_e = props.onHighlight) == null ? void 0 : _e.call(props, +((_c = calendarRef.current) == null ? void 0 : _c.from), +((_d = calendarRef.current) == null ? void 0 : _d.to));
-    }
-  }, [setLastUpdatedTimestamp, props.onHighlight]);
-  return /* @__PURE__ */ o("div", { className: datePickerClassName, children: [
-    /* @__PURE__ */ o("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ o(
-      TimeRangeSelector,
+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 i, useCallback as N } 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 I from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY as M } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import v from "../Calendar/hooks/useCalendarControlsRendering.js";
+import "./DatePicker.scss.js";
+import x from "../../../hooks/useReflex/hooks/useReflex.js";
+import D from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import E from "../Calendar/Calendar.js";
+import g from "../Calendar/calendar/facade/index.js";
+import { EMPTY_OBJECT as S } from "../../../utils/common/constants.js";
+const A = y((e, u) => {
+  const { i18n: r } = O(), [T, k] = v(e.renderControl), [C, a] = p(performance.now()), t = i(() => e.showTimezoneInfo !== !1, [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = I({ 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 = x(P, u), R = N(() => {
+    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,
       {
-        now: props.now,
-        calendarRef,
-        onTimeRangeSelected: props.onPresetOptionSelected,
-        options: props.timeRangePresetOptions,
-        selectedOption: props.selectedPresetOption,
-        timestamp: lastUpdatedTimestamp,
-        timezone: props.timezone
+        now: e.now,
+        calendarRef: o,
+        onTimeRangeSelected: e.onPresetOptionSelected,
+        options: e.timeRangePresetOptions,
+        selectedOption: e.selectedPresetOption,
+        timestamp: C,
+        timezone: e.timezone
       }
     ) }),
-    /* @__PURE__ */ o("div", { ref: controlsContainerRef, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i18n.get("calendar.controls") }),
-    /* @__PURE__ */ o(
-      Calendar,
+    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": r.get("calendar.controls") }),
+    /* @__PURE__ */ n(
+      E,
       {
-        ...props,
-        ref: calendarRef,
-        firstWeekDay: DEFAULT_FIRST_WEEK_DAY,
-        dynamicBlockRows: true,
-        onlyCellsWithin: true,
-        controls: props.controls ?? calendar.controls.MINIMAL,
-        highlight: props.highlight ?? calendar.highlight.MANY,
-        onHighlight,
-        renderControl: controlsRenderer
+        ...e,
+        ref: o,
+        firstWeekDay: M,
+        dynamicBlockRows: !0,
+        onlyCellsWithin: !0,
+        controls: e.controls ?? g.controls.MINIMAL,
+        highlight: e.highlight ?? g.highlight.MANY,
+        onHighlight: R,
+        renderControl: T
       }
     ),
-    withTimezone && /* @__PURE__ */ o("div", { className: "adyen-pe-datepicker__timezone", children: i18n.get("calendar.timezone", timezoneI18nOptions) })
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: r.get("calendar.timezone", w) })
   ] });
-});
+}), V = A;
 export {
-  DatePicker as default
+  V as default
 };

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

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -1,49 +1,32 @@
-import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
-import { F, T, _, p } from "../../../../../../hooks.module-8565d716.mjs";
-import Select from "../../../FormFields/Select/Select.js";
-import { useTimeRangeSelection } from "./useTimeRangeSelection.js";
-const TimeRangeSelector = ({
-  calendarRef,
-  onTimeRangeSelected,
-  timestamp,
-  ...useTimeRangeSelectionConfig
+import { jsx as C } 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 { useTimeRangeSelection as x } from "./useTimeRangeSelection.js";
+import D from "../../../FormFields/Select/Select.js";
+const T = ({
+  calendarRef: t,
+  onTimeRangeSelected: o,
+  timestamp: s,
+  ...O
 }) => {
-  const { customSelection, from, onSelection, options, selectedOption, to } = useTimeRangeSelection(useTimeRangeSelectionConfig);
-  const selectOptions = F(() => Object.freeze(options.map((id) => ({ id, name: id }))), [options]);
-  const onSelectedOptionChanged = T(({ target }) => onSelection(target == null ? void 0 : target.value), [onSelection]);
-  const rangeSelectionInProgress = _(true);
-  const cachedTimestamp = _(timestamp);
-  p(() => {
-    if ((calendarRef == null ? void 0 : calendarRef.current) && from && to) {
-      rangeSelectionInProgress.current = true;
-      calendarRef.current.from = new Date(from);
-      calendarRef.current.to = new Date(to);
-    }
-  }, [calendarRef, from, to]);
-  p(() => {
-    if (cachedTimestamp.current !== timestamp) {
-      cachedTimestamp.current = timestamp;
-      if (rangeSelectionInProgress.current) {
-        rangeSelectionInProgress.current = false;
-      } else
-        customSelection();
-    }
-  }, [customSelection, timestamp]);
-  p(() => {
-    selectedOption && (onTimeRangeSelected == null ? void 0 : onTimeRangeSelected(selectedOption));
-  }, [selectedOption, onTimeRangeSelected]);
-  return /* @__PURE__ */ o(
-    Select,
+  const { customSelection: f, from: c, onSelection: l, options: m, selectedOption: r, to: u } = x(O), S = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), b = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
+  return i(() => {
+    t != null && t.current && c && u && (n.current = !0, t.current.from = new Date(c), t.current.to = new Date(u));
+  }, [t, c, u]), i(() => {
+    p.current !== s && (p.current = s, n.current ? n.current = !1 : f());
+  }, [f, s]), i(() => {
+    r && (o == null || o(r));
+  }, [r, o]), /* @__PURE__ */ C(
+    D,
     {
-      setToTargetWidth: true,
-      items: selectOptions,
-      filterable: false,
-      multiSelect: false,
-      onChange: onSelectedOptionChanged,
-      selected: selectedOption
+      setToTargetWidth: !0,
+      items: S,
+      filterable: !1,
+      multiSelect: !1,
+      onChange: b,
+      selected: r
     }
   );
-};
+}, E = T;
 export {
-  TimeRangeSelector as default
+  E as default
 };