@adyen/adyen-platform-experience-web 1.0.1 → 1.0.2

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

@@ -1,4 +1,3 @@
-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";
@@ -6,88 +5,125 @@ import { TableBody as w } from "./components/TableBody.js";
 import { InteractiveBody as C } from "./components/InteractiveBody.js";
 import _ from "./components/SkeletonBody.js";
 import { ErrorMessageDisplay as N } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { useMemo as o } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
 import T 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({
   activeIndex: -1,
   index: -1
 });
-function s({ errorDisplay: e, ...a }) {
-  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(D, { ...a }) }) });
+function s({
+  errorDisplay: e,
+  ...a
+}) {
+  return d("div", {
+    style: {
+      width: "100%"
+    },
+    children: d(k, {
+      children: d(R, {
+        ...a,
+        errorDisplay: e
+      })
+    })
+  });
 }
-function D({ errorDisplay: e, ...a }) {
+function R({
+  errorDisplay: e,
+  ...a
+}) {
   var r, m;
-  const i = o(() => b(a.children), [a.children]), g = o(() => i.find((t) => (t == null ? void 0 : t.type) === y), [i]), l = o(() => {
+  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 = o(() => !a.loading && (l || a.error), [l, a.error, a.loading]), { getMinWidthByColumn: f } = x(), n = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: f(t.key) })), h = n.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: ${n.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: n.map((t) => /* @__PURE__ */ d(B, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
-            /* @__PURE__ */ d(R, { ...a, columns: n, emptyBody: l })
-          ] }),
-          u && (l ? /* @__PURE__ */ d(
-            N,
-            {
-              title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
-              message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
-              imageDesktop: T,
-              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 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(N, {
+          title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
+          message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
+          imageDesktop: T,
+          centered: !0
+        }) : a.error && e ? e() : null)]
+      }), g]
+    })
+  });
 }
-function R(e) {
-  const a = o(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
-  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
-        }
-      )
-    }
-  );
+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
+    })
+  });
 }
 s.Footer = y;
-function y({ children: e }) {
-  return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
+function y({
+  children: e
+}) {
+  return d("div", {
+    className: "adyen-pe-data-grid__footer",
+    children: e
+  });
 }
 s.defaultProps = {
   condensed: !1,

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

@@ -1,38 +1,39 @@
-import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useDataGridContext as n } 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 { useDataGridContext as m } from "./hooks/useDataGridContext.js";
+import { useRef as n, 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 { CellTextPosition as o } from "./types.js";
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 function G({
   children: t,
   column: a,
   position: r,
   ...i
 }) {
-  const { registerCells: s } = n(), e = f(null);
-  return d(() => {
+  const {
+    registerCells: s
+  } = m(), e = n(null);
+  return f(() => {
     var l;
     e.current && s({
       column: a,
       width: (l = e.current) == null ? void 0 : l.getBoundingClientRect().width
     });
-  }, [a, s]), /* @__PURE__ */ m(
-    "div",
-    {
-      role: "cell",
-      className: c("adyen-pe-data-grid__cell", {
-        "adyen-pe-data-grid__cell--right": r === o.RIGHT,
-        "adyen-pe-data-grid__cell--center": r === o.CENTER
-      }),
-      ...i,
-      children: t && p(t) ? u(t, {
-        ...t == null ? void 0 : t.props,
-        ref: e,
-        style: { width: "min-content" }
-      }) : null
-    }
-  );
+  }, [a, s]), c("div", {
+    role: "cell",
+    className: u("adyen-pe-data-grid__cell", {
+      "adyen-pe-data-grid__cell--right": r === o.RIGHT,
+      "adyen-pe-data-grid__cell--center": r === o.CENTER
+    }),
+    ...i,
+    children: t && d(t) ? p(t, {
+      ...t == null ? void 0 : t.props,
+      ref: e,
+      style: {
+        width: "min-content"
+      }
+    }) : null
+  });
 }
 export {
   G 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 { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
 import { noop as l } from "../../../../utils/common.js";
 const j = ({
@@ -12,13 +12,17 @@ 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 /* @__PURE__ */ o(I, { children: e == null ? void 0 : e.map((r, p) => /* @__PURE__ */ o(
-    "div",
-    {
+  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", {
       role: "row",
       tabIndex: 0,
       onMouseEnter: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a(p) : l,
@@ -32,10 +36,14 @@ const j = ({
       onClick: y(r),
       onFocusCapture: u.onFocusCapture(p),
       onKeyDownCapture: u.onKeyDownCapture,
-      children: /* @__PURE__ */ o(d, { columns: c, customCells: n, item: r, rowIndex: p })
-    },
-    r
-  )) });
+      children: 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,21 +1,31 @@
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c 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 l = Array.from({ length: 10 }, (n, e) => e), o = Array.from({ length: r }, (n, e) => e);
-  return /* @__PURE__ */ a(m, { children: [
-    l.map((n, e) => /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__row", children: o.map((i, s) => /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell", children: /* @__PURE__ */ a(
-      "span",
-      {
-        className: c({
-          "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 l = Array.from({
+    length: 10
+  }, (n, e) => e), o = Array.from({
+    length: r
+  }, (n, e) => e);
+  return a(m, {
+    children: [l.map((n, e) => a("div", {
+      className: "adyen-pe-data-grid__row",
+      children: o.map((i, s) => a("div", {
+        className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell",
+        children: a("span", {
+          className: c({
+            "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-${s}`)) }, `adyen-pe-data-grid-skeleton-row-${e}`)),
-    !t && d && d
-  ] });
+      }, `adyen-pe-data-grid-skeleton-cell-${s}`))
+    }, `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,10 +9,11 @@ const C = ({
   customCells: u,
   onRowHover: o
 }) => {
-  const { i18n: s } = g();
-  return /* @__PURE__ */ c(y, { children: l == null ? void 0 : l.map((r, p) => /* @__PURE__ */ c(
-    "div",
-    {
+  const {
+    i18n: s
+  } = g();
+  return c(y, {
+    children: l == null ? void 0 : l.map((r, p) => c("div", {
       role: "row",
       tabIndex: 0,
       className: "adyen-pe-data-grid__row",
@@ -20,10 +21,14 @@ 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: /* @__PURE__ */ c(h, { columns: n, customCells: u, item: r, rowIndex: p })
-    },
-    r
-  )) });
+      children: 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,21 +1,42 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "../DataGridCell.js";
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as b } from "../../../../external/preact/dist/preact.module.js";
 const o = ({
   columns: t,
   customCells: a,
   item: i,
   rowIndex: h
-}) => /* @__PURE__ */ n(b, { children: t.map(({ key: r, position: d }) => a != null && a[r] ? /* @__PURE__ */ n(l, { "aria-labelledby": String(r), column: r, position: d, children: /* @__PURE__ */ n("div", {
-  style: { width: "min-content" },
-  // TODO create safeguard to remove "as any" assertion
-  children: a[r]({
+}) => n(b, {
+  children: t.map(({
     key: r,
-    value: i[r],
-    item: i,
-    rowIndex: h
-  })
-}) }, r) : /* @__PURE__ */ n(l, { "aria-labelledby": String(r), column: r, position: d, children: /* @__PURE__ */ n("div", { children: i[r] }) }, r)) });
+    position: d
+  }) => a != null && a[r] ? n(l, {
+    "aria-labelledby": String(r),
+    column: r,
+    position: d,
+    children: n("div", {
+      style: {
+        width: "min-content"
+      },
+      children: (
+        // TODO create safeguard to remove "as any" assertion
+        a[r]({
+          key: r,
+          value: i[r],
+          item: i,
+          rowIndex: h
+        })
+      )
+    })
+  }, r) : n(l, {
+    "aria-labelledby": String(r),
+    column: r,
+    position: d,
+    children: n("div", {
+      children: i[r]
+    })
+  }, r))
+});
 export {
   o as TableCells
 };

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

@@ -1,28 +1,35 @@
-import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import o from "classnames";
-import { CellTextPosition as n } from "../types.js";
+import { CellTextPosition as i } 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";
-const h = ({ cellKey: e, position: t, label: l }) => {
-  const { registerCells: a } = c(), r = s(null);
+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);
   return m(() => {
     var d;
     r.current && a({
       column: e,
       width: (d = r.current) == null ? void 0 : d.getBoundingClientRect().width
     });
-  }, [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 })
-    }
-  );
+  }, [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
+    })
+  });
 };
 export {
   h as TableHeaderCell