@adyen/adyen-platform-experience-web 1.1.1 → 1.2.0

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

@@ -1,3 +1,4 @@
+import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { toChildArray as b, Fragment as v } from "../../../external/preact/dist/preact.module.js";
 import c from "classnames";
 import "./DataGrid.scss.js";
@@ -10,120 +11,83 @@ import N from "../../../images/no-data-female.svg.js";
 import { DataGridProvider as k } from "./utils/DataGridProvider.js";
 import { useDataGridContext as x } from "./hooks/useDataGridContext.js";
 import { TableHeaderCell as B } from "./components/TableHeaderCell.js";
-import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const z = Object.freeze({
+const K = Object.freeze({
   activeIndex: -1,
   index: -1
 });
-function s({
-  errorDisplay: e,
-  ...a
-}) {
-  return d("div", {
-    style: {
-      width: "100%"
-    },
-    children: d(k, {
-      children: d(R, {
-        ...a,
-        errorDisplay: e
-      })
-    })
-  });
+function s({ errorDisplay: e, ...a }) {
+  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(R, { ...a, errorDisplay: e }) }) });
 }
-function R({
-  errorDisplay: e,
-  ...a
-}) {
+function R({ errorDisplay: e, ...a }) {
   var r, m;
   const i = n(() => b(a.children), [a.children]), g = n(() => i.find((t) => (t == null ? void 0 : t.type) === y), [i]), l = n(() => {
     var t;
     return ((t = a.data) == null ? void 0 : t.length) === 0;
-  }, [a.data]), u = n(() => !a.loading && (l || a.error), [l, a.error, a.loading]), {
-    getMinWidthByColumn: f
-  } = x(), o = a.columns.filter((t) => t.visible !== !1).map((t) => ({
-    ...t,
-    minWidth: f(t.key)
-  })), h = o.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
-  return d("div", {
-    className: c("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": l || a.error
-    }),
-    style: `--adyen-pe-data-grid-cols: ${o.length}; --adyen-pe-data-grid-cells: ${h};`,
-    children: d(v, {
-      children: [d("div", {
-        className: "adyen-pe-data-grid__table-wrapper",
-        children: [d("div", {
-          role: "table",
-          className: "adyen-pe-data-grid__table",
-          children: [d("div", {
-            className: "adyen-pe-data-grid__head",
-            role: "rowgroup",
-            children: d("div", {
-              role: "rowheader",
-              className: "adyen-pe-data-grid__header",
-              style: a.loading ? {
-                width: "100%"
-              } : {},
-              children: o.map((t) => d(B, {
-                label: t.label,
-                position: t.position,
-                cellKey: t.key
-              }, t.key))
-            })
-          }), d(D, {
-            ...a,
-            columns: o,
-            emptyBody: l
-          })]
-        }), u && (l && !a.error ? d(T, {
-          title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
-          message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
-          imageDesktop: N,
-          centered: !0
-        }) : a.error && e ? e() : null)]
-      }), g]
-    })
-  });
+  }, [a.data]), u = n(() => !a.loading && (l || a.error), [l, a.error, a.loading]), { getMinWidthByColumn: f } = x(), o = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: f(t.key) })), h = o.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: c("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": l || a.error
+      }),
+      style: `--adyen-pe-data-grid-cols: ${o.length}; --adyen-pe-data-grid-cells: ${h};`,
+      children: /* @__PURE__ */ d(v, { children: [
+        /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
+          /* @__PURE__ */ d("div", { role: "table", className: "adyen-pe-data-grid__table", children: [
+            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: o.map((t) => /* @__PURE__ */ d(B, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
+            /* @__PURE__ */ d(D, { ...a, columns: o, emptyBody: l })
+          ] }),
+          u && (l && !a.error ? /* @__PURE__ */ d(
+            T,
+            {
+              title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
+              message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
+              imageDesktop: N,
+              centered: !0
+            }
+          ) : a.error && e ? e() : null)
+        ] }),
+        g
+      ] })
+    }
+  );
 }
 function D(e) {
   const a = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
-  return d("div", {
-    role: "rowgroup",
-    className: c("adyen-pe-data-grid__body"),
-    style: a && {
-      display: "grid",
-      gridTemplateColumns: "1fr"
-    },
-    children: a ? d(_, {
-      columnsNumber: e.columns.length,
-      loading: e.loading
-    }) : e.onRowClick ? d(C, {
-      onRowHover: e.onRowHover,
-      data: e.data,
-      columns: e.columns,
-      onRowClick: e.onRowClick,
-      customCells: e.customCells
-    }) : d(w, {
-      onRowHover: e.onRowHover,
-      data: e.data,
-      customCells: e.customCells,
-      columns: e.columns
-    })
-  });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      role: "rowgroup",
+      className: c("adyen-pe-data-grid__body"),
+      style: a && { display: "grid", gridTemplateColumns: "1fr" },
+      children: a ? /* @__PURE__ */ d(_, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
+        C,
+        {
+          onRowHover: e.onRowHover,
+          data: e.data,
+          columns: e.columns,
+          onRowClick: e.onRowClick,
+          customCells: e.customCells
+        }
+      ) : /* @__PURE__ */ d(
+        w,
+        {
+          onRowHover: e.onRowHover,
+          data: e.data,
+          customCells: e.customCells,
+          columns: e.columns
+        }
+      )
+    }
+  );
 }
 s.Footer = y;
-function y({
-  children: e
-}) {
-  return d("div", {
-    className: "adyen-pe-data-grid__footer",
-    children: e
-  });
+function y({ children: e }) {
+  return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
 }
 s.defaultProps = {
   condensed: !1,
@@ -131,6 +95,6 @@ s.defaultProps = {
   scrollable: !0
 };
 export {
-  z as INITIAL_STATE,
+  K as INITIAL_STATE,
   s as default
 };

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

@@ -1,40 +1,39 @@
-import { useDataGridContext as n } from "./hooks/useDataGridContext.js";
-import { useRef as m, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { isValidElement as d, cloneElement as p } from "../../../external/preact/dist/preact.module.js";
-import u from "classnames";
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useDataGridContext as m } from "./hooks/useDataGridContext.js";
+import { useRef as f, useEffect as d } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { isValidElement as p, cloneElement as u } from "../../../external/preact/dist/preact.module.js";
+import c from "classnames";
 import { CellTextPosition as s } from "./types.js";
-import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-function G({
+function R({
   children: t,
   column: r,
   position: a,
   ...i
 }) {
-  const {
-    registerCells: o
-  } = n(), e = m(null);
-  return f(() => {
+  const { registerCells: o } = m(), e = f(null);
+  return d(() => {
     var l;
     e.current && o({
       column: r,
       width: (l = e.current) == null ? void 0 : l.getBoundingClientRect().width
     });
-  }, [r, o]), c("div", {
-    role: "cell",
-    className: u("adyen-pe-data-grid__cell", {
-      "adyen-pe-data-grid__cell--right": a === s.RIGHT,
-      "adyen-pe-data-grid__cell--center": a === s.CENTER
-    }),
-    ...i,
-    children: t && d(t) ? p(t, {
-      ...t == null ? void 0 : t.props,
-      ref: e,
-      style: {
-        width: "min-content"
-      }
-    }) : null
-  });
+  }, [r, o]), /* @__PURE__ */ n(
+    "div",
+    {
+      role: "cell",
+      className: c("adyen-pe-data-grid__cell", {
+        "adyen-pe-data-grid__cell--right": a === s.RIGHT,
+        "adyen-pe-data-grid__cell--center": a === s.CENTER
+      }),
+      ...i,
+      children: t && p(t) ? u(t, {
+        ...t == null ? void 0 : t.props,
+        ref: e,
+        style: { width: "min-content" }
+      }) : null
+    }
+  );
 }
 export {
-  G as default
+  R as default
 };

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

@@ -1,17 +1,6 @@
-import r from "classnames";
 import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const e = ({
-  className: c,
-  alt: n,
-  url: o
-}) => a("div", {
-  className: "adyen-pe-data-grid__icon-container",
-  children: a("img", {
-    className: r("adyen-pe-data-grid__icon", c),
-    alt: n,
-    src: o
-  })
-}), t = e;
+import r from "classnames";
+const e = ({ className: c, alt: n, url: o }) => /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__icon-container", children: /* @__PURE__ */ a("img", { className: r("adyen-pe-data-grid__icon", c), alt: n, src: o }) }), t = e;
 export {
   t as default
 };

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

@@ -1,8 +1,8 @@
+import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { TableCells as d } from "./TableCells.js";
 import h from "../../../../core/Context/useCoreContext.js";
-import { useCallback as F } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { useInteractiveDataGrid as b } from "../hooks/useInteractiveDataGrid.js";
-import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useInteractiveDataGrid as F } from "../hooks/useInteractiveDataGrid.js";
 import { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
 import { noop as l } from "../../../../utils/common.js";
 const j = ({
@@ -12,17 +12,13 @@ const j = ({
   customCells: n,
   onRowHover: a
 }) => {
-  const y = F((r) => () => s == null ? void 0 : s.callback(s != null && s.retrievedField ? r[s.retrievedField] : r), [s]), {
-    i18n: t
-  } = h(), {
-    currentIndex: f,
-    listeners: u,
-    ref: g
-  } = b({
-    totalRows: (e == null ? void 0 : e.length) ?? 0
-  });
-  return o(I, {
-    children: e == null ? void 0 : e.map((r, p) => o("div", {
+  const y = b(
+    (r) => () => s == null ? void 0 : s.callback(s != null && s.retrievedField ? r[s.retrievedField] : r),
+    [s]
+  ), { i18n: t } = h(), { currentIndex: f, listeners: u, ref: g } = F({ totalRows: (e == null ? void 0 : e.length) ?? 0 });
+  return /* @__PURE__ */ o(I, { children: e == null ? void 0 : e.map((r, p) => /* @__PURE__ */ o(
+    "div",
+    {
       role: "row",
       tabIndex: 0,
       onMouseEnter: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a(p) : l,
@@ -36,14 +32,10 @@ const j = ({
       onClick: y(r),
       onFocusCapture: u.onFocusCapture(p),
       onKeyDownCapture: u.onKeyDownCapture,
-      children: o(d, {
-        columns: c,
-        customCells: n,
-        item: r,
-        rowIndex: p
-      })
-    }, r))
-  });
+      children: /* @__PURE__ */ o(d, { columns: c, customCells: n, item: r, rowIndex: p })
+    },
+    r
+  )) });
 };
 export {
   j as InteractiveBody

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

@@ -1,31 +1,21 @@
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import s from "classnames";
 import "../DataGrid.scss.js";
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
-const _ = ({
-  columnsNumber: r,
-  loading: t,
-  emptyMessageDisplay: d
-}) => {
-  const o = Array.from({
-    length: 10
-  }, (n, e) => e), l = Array.from({
-    length: r
-  }, (n, e) => e);
-  return a(m, {
-    children: [o.map((n, e) => a("div", {
-      className: "adyen-pe-data-grid__row",
-      children: l.map((i, c) => a("div", {
-        className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell",
-        children: a("span", {
-          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
-          })
+const _ = ({ columnsNumber: r, loading: t, emptyMessageDisplay: d }) => {
+  const o = Array.from({ length: 10 }, (n, e) => e), l = Array.from({ length: r }, (n, e) => e);
+  return /* @__PURE__ */ a(m, { children: [
+    o.map((n, e) => /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__row", children: l.map((i, c) => /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell", children: /* @__PURE__ */ a(
+      "span",
+      {
+        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-${c}`))
-    }, `adyen-pe-data-grid-skeleton-row-${e}`)), !t && d && d]
-  });
+      }
+    ) }, `adyen-pe-data-grid-skeleton-cell-${c}`)) }, `adyen-pe-data-grid-skeleton-row-${e}`)),
+    !t && d && d
+  ] });
 }, f = _;
 export {
   f as default

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

@@ -1,6 +1,6 @@
+import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import g from "../../../../core/Context/useCoreContext.js";
 import { TableCells as h } from "./TableCells.js";
-import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as y } from "../../../../external/preact/dist/preact.module.js";
 import { noop as a } from "../../../../utils/common.js";
 const C = ({
@@ -9,11 +9,10 @@ const C = ({
   customCells: u,
   onRowHover: o
 }) => {
-  const {
-    i18n: s
-  } = g();
-  return c(y, {
-    children: l == null ? void 0 : l.map((r, p) => c("div", {
+  const { i18n: s } = g();
+  return /* @__PURE__ */ c(y, { children: l == null ? void 0 : l.map((r, p) => /* @__PURE__ */ c(
+    "div",
+    {
       role: "row",
       tabIndex: 0,
       className: "adyen-pe-data-grid__row",
@@ -21,14 +20,10 @@ const C = ({
       onFocus: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o(p) : a,
       onMouseLeave: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o() : a,
       onBlur: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o() : a,
-      children: c(h, {
-        columns: n,
-        customCells: u,
-        item: r,
-        rowIndex: p
-      })
-    }, r))
-  });
+      children: /* @__PURE__ */ c(h, { columns: n, customCells: u, item: r, rowIndex: p })
+    },
+    r
+  )) });
 };
 export {
   C as TableBody

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

@@ -1,59 +1,31 @@
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import o from "../DataGridCell.js";
 import u from "./Icon.js";
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as v } from "../../../../external/preact/dist/preact.module.js";
 const b = (n) => !!n && typeof n == "object" && "value" in n, m = ({
   columns: n,
   customCells: d,
   item: l,
   rowIndex: c
-}) => a(v, {
-  children: n.map(({
-    key: r,
-    position: t
-  }) => {
-    if (d != null && d[r])
-      return a(o, {
-        "aria-labelledby": String(r),
-        column: r,
-        position: t,
-        children: a("div", {
-          style: {
-            width: "min-content"
-          },
-          children: (
-            // TODO create safeguard to remove "as any" assertion
-            d[r]({
-              key: r,
-              value: l[r],
-              item: l,
-              rowIndex: c
-            })
-          )
-        })
-      }, r);
-    const {
-      icon: i,
-      value: e
-    } = b(l[r]) ? l[r] : {
-      value: l[r],
-      icon: void 0
-    };
-    return a(o, {
-      "aria-labelledby": String(r),
-      column: r,
-      position: t,
-      children: a("div", {
-        className: "adyen-pe-data-grid__cell-value",
-        children: [(i == null ? void 0 : i.url) && a(u, {
-          ...i
-        }), a("div", {
-          children: e
-        })]
+}) => /* @__PURE__ */ a(v, { children: n.map(({ key: r, position: t }) => {
+  if (d != null && d[r])
+    return /* @__PURE__ */ a(o, { "aria-labelledby": String(r), column: r, position: t, children: /* @__PURE__ */ a("div", {
+      style: { width: "min-content" },
+      // TODO create safeguard to remove "as any" assertion
+      children: d[r]({
+        key: r,
+        value: l[r],
+        item: l,
+        rowIndex: c
       })
-    }, r);
-  })
-});
+    }) }, r);
+  const { icon: i, value: e } = b(l[r]) ? l[r] : { value: l[r], icon: void 0 };
+  return /* @__PURE__ */ a(o, { "aria-labelledby": String(r), column: r, position: t, children: /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__cell-value", children: [
+    (i == null ? void 0 : i.url) && /* @__PURE__ */ a(u, { ...i }),
+    /* @__PURE__ */ a("div", { children: e })
+  ] }) }, r);
+}) });
 export {
-  m as TableCells
+  m as TableCells,
+  b as _isCustomDataObject
 };

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

@@ -1,35 +1,28 @@
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import o from "classnames";
-import { CellTextPosition as i } from "../types.js";
+import { CellTextPosition as n } from "../types.js";
 import { useDataGridContext as c } from "../hooks/useDataGridContext.js";
 import { useRef as s, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const h = ({
-  cellKey: e,
-  position: t,
-  label: l
-}) => {
-  const {
-    registerCells: a
-  } = c(), r = s(null);
+const h = ({ cellKey: e, position: t, label: l }) => {
+  const { registerCells: a } = c(), r = s(null);
   return m(() => {
     var d;
     r.current && a({
       column: e,
       width: (d = r.current) == null ? void 0 : d.getBoundingClientRect().width
     });
-  }, [e, a]), n("div", {
-    role: "columnheader",
-    id: String(e),
-    className: o("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
-      "adyen-pe-data-grid__cell--right": t === i.RIGHT,
-      "adyen-pe-data-grid__cell--center": t === i.CENTER
-    }),
-    children: n("div", {
-      ref: r,
-      className: "adyen-pe-data-grid__cell--heading-content",
-      children: l
-    })
-  });
+  }, [e, a]), /* @__PURE__ */ i(
+    "div",
+    {
+      role: "columnheader",
+      id: String(e),
+      className: o("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
+        "adyen-pe-data-grid__cell--right": t === n.RIGHT,
+        "adyen-pe-data-grid__cell--center": t === n.CENTER
+      }),
+      children: /* @__PURE__ */ i("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: l })
+    }
+  );
 };
 export {
   h as TableHeaderCell