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

package/dist/es/core/core.js

@@ -1,13 +1,13 @@
-var r = Object.defineProperty;
-var h = (n, t, i) => t in n ? r(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
-var s = (n, t, i) => h(n, typeof t != "symbol" ? t + "" : t, i);
-import { FALLBACK_ENV as c, resolveEnvironment as m, getConfigFromCdn as d } from "./utils.js";
-import { AuthSession as u } from "./ConfigContext/session/AuthSession.js";
-import { Assets as p } from "./Assets/Assets.js";
-import { getCustomTranslationsAnalyticsPayload as y } from "./Analytics/analytics/customTranslations.js";
-import g from "./Localization/Localization.js";
-import { EMPTY_OBJECT as C } from "../utils/value/constants.js";
-class f {
+var h = Object.defineProperty;
+var c = (n, t, i) => t in n ? h(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
+var s = (n, t, i) => c(n, typeof t != "symbol" ? t + "" : t, i);
+import { FALLBACK_ENV as d, resolveEnvironment as m, getConfigFromCdn as g, getDatasetFromCdn as u } from "./utils.js";
+import { AuthSession as C } from "./ConfigContext/session/AuthSession.js";
+import { Assets as l } from "./Assets/Assets.js";
+import { getCustomTranslationsAnalyticsPayload as p } from "./Analytics/analytics/customTranslations.js";
+import y from "./Localization/Localization.js";
+import { EMPTY_OBJECT as f } from "../utils/value/constants.js";
+class A {
   // [TODO]: Change the error handling strategy.
   constructor(t) {
     s(this, "components", []);
@@ -15,17 +15,19 @@ class f {
     s(this, "localization");
     s(this, "loadingContext");
     s(this, "analyticsEnabled");
-    s(this, "session", new u());
+    s(this, "session", new C());
     s(this, "onError");
     s(this, "getImageAsset");
+    s(this, "getDatasetAsset");
     s(this, "getCdnConfig");
+    s(this, "getCdnDataset");
     s(this, "readyCustomTranslationsAnalytics");
     /**
      * Updates global configurations, resets the internal state and remounts each element.
      * @param options - props to update
      * @returns this - the element instance
      */
-    s(this, "update", async (t = C) => (this.setOptions(t), await this.initialize(), this.components.forEach((i) => {
+    s(this, "update", async (t = f) => (this.setOptions(t), await this.initialize(), this.components.forEach((i) => {
       i.props.core === this && i.update(this.getPropsForComponent(this.options));
     }), this));
     /**
@@ -49,13 +51,13 @@ class f {
      * @returns this
      */
     s(this, "setOptions", (t) => {
-      var i, o;
-      return this.options = { ...this.options, ...t }, this.localization.locale = (i = this.options) == null ? void 0 : i.locale, this.localization.customTranslations = (o = this.options) == null ? void 0 : o.translations, this.session.loadingContext = this.loadingContext, this.session.onSessionCreate = this.options.onSessionCreate, this;
+      var i, a;
+      return this.options = { ...this.options, ...t }, this.localization.locale = (i = this.options) == null ? void 0 : i.locale, this.localization.customTranslations = (a = this.options) == null ? void 0 : a.translations, this.session.loadingContext = this.loadingContext, this.session.onSessionCreate = this.options.onSessionCreate, this;
     });
     var e;
-    this.options = { environment: c, ...t };
-    const { cdnTranslationsUrl: i, cdnAssetsUrl: o, cdnConfigUrl: a, apiUrl: l } = m(this.options.environment);
-    this.localization = new g(t.locale, t.availableTranslations, i, a), this.loadingContext = t.loadingContext || null || l, this.getImageAsset = new p(o).getAsset({ extension: "svg", subFolder: "images" }), this.getCdnConfig = d({ url: a }), this.readyCustomTranslationsAnalytics = !1, this.analyticsEnabled = ((e = t == null ? void 0 : t.analytics) == null ? void 0 : e.enabled) ?? !0, this.session.analyticsEnabled = this.analyticsEnabled, this.setOptions(t);
+    this.options = { environment: d, ...t };
+    const { cdnTranslationsUrl: i, cdnAssetsUrl: a, cdnConfigUrl: o, apiUrl: r } = m(this.options.environment);
+    this.localization = new y(t.locale, t.availableTranslations, i, o), this.loadingContext = t.loadingContext || null || r, this.getImageAsset = new l(a).getAsset({ extension: "svg", subFolder: "images" }), this.getDatasetAsset = new l(a).getAsset({ extension: "json", mainFolder: "datasets" }), this.getCdnConfig = g({ url: o }), this.getCdnDataset = u({ url: `${a}/datasets` }), this.readyCustomTranslationsAnalytics = !1, this.analyticsEnabled = ((e = t == null ? void 0 : t.analytics) == null ? void 0 : e.enabled) ?? !0, this.session.analyticsEnabled = this.analyticsEnabled, this.setOptions(t);
   }
   async initialize() {
     return Promise.all([this.localization.ready]).then(() => {
@@ -67,7 +69,7 @@ class f {
     });
   }
   setTranslationsPayload() {
-    return this.localization ? y(this.localization.i18n.customTranslations) : [];
+    return this.localization ? p(this.localization.i18n.customTranslations) : [];
   }
   /**
    * @internal
@@ -78,7 +80,7 @@ class f {
     return { ...t };
   }
 }
-s(f, "version", "1.8.1");
+s(A, "version", "1.10.0");
 export {
-  f as default
+  A as default
 };

package/dist/es/core/utils.js

@@ -1,42 +1,66 @@
-import { CDN_ENVIRONMENTS as i, API_ENVIRONMENTS as p } from "./constants.js";
-import { httpGet as $ } from "./Http/http.js";
-const o = "test", a = "live", m = (r) => {
+import { CDN_ENVIRONMENTS as l, API_ENVIRONMENTS as E } from "./constants.js";
+import { httpGet as p } from "./Http/http.js";
+const $ = "test", i = "live", N = (r) => {
   var s;
   return (s = r == null ? void 0 : r.replace) == null ? void 0 : s.call(r, /([^/])$/, "$1/");
-}, v = (r) => r == null ? void 0 : r.replace(/^([^/])/, "/$1"), l = /* @__PURE__ */ (() => {
-  const r = p, s = i;
-  return (t) => {
-    const n = s[(t === "test" ? "live" : t) ?? a] || s[a];
+}, h = (r) => r == null ? void 0 : r.replace(/^([^/])/, "/$1"), u = /* @__PURE__ */ (() => {
+  const r = E, s = l;
+  return (n) => {
+    const t = s[(n === "test" ? "live" : n) ?? i] || s[i];
     return {
-      apiUrl: r[t ?? o] || r[o],
-      cdnTranslationsUrl: `${n}/assets/translations`,
-      cdnAssetsUrl: `${n}/assets`,
-      cdnConfigUrl: `${n}/config`
+      apiUrl: r[n ?? $] || r[$],
+      cdnTranslationsUrl: `${t}/assets/translations`,
+      cdnAssetsUrl: `${t}/assets`,
+      cdnConfigUrl: `${t}/config`
     };
   };
-})(), U = ({ url: r }) => async ({
+})(), y = ({ url: r }) => async ({
   name: s,
-  extension: t = "json",
+  extension: n = "json",
   fallback: e,
-  subFolder: n = ""
+  subFolder: t = ""
 }) => {
   try {
-    return await $({
-      loadingContext: `${r}${n ? `/${n}` : ""}`,
-      path: `/${s}.${t}`,
+    return await p({
+      loadingContext: `${r}${t ? `/${t}` : ""}`,
+      path: `/${s}.${n}`,
       versionless: !0,
       skipContentType: !0,
       errorLevel: "error"
     });
-  } catch (c) {
-    return console.warn(c), e;
+  } catch (o) {
+    return console.warn(o), e;
+  }
+}, L = ({ url: r }) => async ({
+  name: s,
+  extension: n = "json",
+  fallback: e,
+  subFolder: t = ""
+}) => {
+  try {
+    return await p({
+      loadingContext: `${r}${t ? `/${t}` : ""}`,
+      path: `/${s}.${n}`,
+      versionless: !0,
+      skipContentType: !0,
+      errorLevel: "error"
+    });
+  } catch (o) {
+    console.warn(o);
+    try {
+      const a = await import(`../assets/datasets${t ? `/${t}` : ""}/${s}.${n}`);
+      return a.default || a;
+    } catch (c) {
+      return console.warn(c), e;
+    }
   }
 };
 export {
-  a as FALLBACK_CDN_ENV,
-  o as FALLBACK_ENV,
-  U as getConfigFromCdn,
-  m as normalizeLoadingContext,
-  v as normalizeUrl,
-  l as resolveEnvironment
+  i as FALLBACK_CDN_ENV,
+  $ as FALLBACK_ENV,
+  y as getConfigFromCdn,
+  L as getDatasetFromCdn,
+  N as normalizeLoadingContext,
+  h as normalizeUrl,
+  u as resolveEnvironment
 };

package/dist/es/hooks/element/useClickOutside.js

@@ -1,41 +1,55 @@
-import { useRef as p, useCallback as P, useEffect as d } from "../../external/preact/hooks/dist/hooks.module.js";
-import { popoverUtil as i } from "../../components/internal/Popover/utils/popoverUtil.js";
+import { useRef as O, useCallback as c, useEffect as L } from "../../external/preact/hooks/dist/hooks.module.js";
+import { popoverUtil as d } from "../../components/internal/Popover/utils/popoverUtil.js";
 import R from "../useReflex.js";
-const l = Symbol("__control.Elem.");
-var a = /* @__PURE__ */ ((o) => (o.POPOVER = "POPOVER", o.DEFAULT = "DEFAULT", o))(a || {});
-const O = (o) => o.stopImmediatePropagation(), T = (o, r, u, s) => {
-  const t = p(null), m = P(
-    (f) => {
-      if (!(t && t.current)) return;
-      const n = f.composedPath();
-      if (s === "POPOVER")
-        i.closePopoversOutsideOfClick(n);
+const p = Symbol("__control.Elem.");
+var h = /* @__PURE__ */ ((o) => (o.POPOVER = "POPOVER", o.DEFAULT = "DEFAULT", o))(h || {});
+const v = (o) => o.stopImmediatePropagation(), _ = (o, s, f, u) => {
+  const e = O(null), m = O(!1), l = c(
+    (n) => {
+      if (!(e && e.current)) return;
+      const r = n.composedPath();
+      if (u === "POPOVER")
+        d.closePopoversOutsideOfClick(r);
       else {
-        let E = 0, c = !1, e = n[E];
-        for (; e instanceof Element && !(c || (c = e == null ? void 0 : e.isSameNode(t.current))); )
-          e = n[++E] ?? e.parentElement, (e == null ? void 0 : e[l]) instanceof Element && (e = e[l], n.length = 0);
-        r && !c && r(!0);
+        let P = 0, a = !1, t = r[P];
+        for (; t instanceof Element && !(a || (a = t == null ? void 0 : t.isSameNode(e.current))); )
+          t = r[++P] ?? t.parentElement, (t == null ? void 0 : t[p]) instanceof Element && (t = t[p], r.length = 0);
+        s && !a && s(!0);
       }
     },
-    [t, r, s]
+    [e, s, u]
+  ), i = c(
+    (n) => {
+      e && e.current && (m.current = e.current.contains(n.target));
+    },
+    [e]
+  ), E = c(
+    (n) => {
+      if (m.current) {
+        m.current = !1;
+        return;
+      }
+      l(n);
+    },
+    [l]
   );
-  return d(() => {
-    if (!u)
-      return document.addEventListener("click", m, !0), s === "POPOVER" && t.current instanceof Element && i.add(t.current, r), () => {
-        document.removeEventListener("click", m, !0), t.current && i.remove(t.current);
+  return L(() => {
+    if (!f)
+      return document.addEventListener("mousedown", i, !0), document.addEventListener("click", E, !0), u === "POPOVER" && e.current instanceof Element && d.add(e.current, s), () => {
+        document.removeEventListener("mousedown", i, !0), document.removeEventListener("click", E, !0), e.current && d.remove(e.current);
       };
-  }, [u, m, r, s, t]), R(
-    P(
-      (f, n) => {
-        n instanceof Element && n.removeEventListener("focusout", O, !1), f instanceof Element && (u || (f.addEventListener("focusout", O, !1), t.current = f));
+  }, [f, i, E, s, u, e]), R(
+    c(
+      (n, r) => {
+        r instanceof Element && r.removeEventListener("focusout", v, !1), n instanceof Element && (f || (n.addEventListener("focusout", v, !1), e.current = n));
       },
-      [u, s]
+      [f, u]
     ),
     o
   );
 };
 export {
-  l as CONTROL_ELEMENT_PROPERTY,
-  a as ClickOutsideVariant,
-  T as useClickOutside
+  p as CONTROL_ELEMENT_PROPERTY,
+  h as ClickOutsideVariant,
+  _ as useClickOutside
 };

package/dist/es/hooks/element/useFocusTrap.js

@@ -1,64 +1,84 @@
-import { useRef as i, useMemo as u, useCallback as l } from "../../external/preact/hooks/dist/hooks.module.js";
-import { InteractionKeyCode as r } from "../../components/types.js";
-import { withTabbableRoot as T, isFocusable as L, focusIsWithin as p } from "../../primitives/dom/tabbableRoot/tabbable.js";
-import C from "../useReflex.js";
+import { useRef as o, useMemo as E, useCallback as c } from "../../external/preact/hooks/dist/hooks.module.js";
+import { InteractionKeyCode as n } from "../../components/types.js";
+import { withTabbableRoot as H, focusIsWithin as i, isFocusable as I } from "../../primitives/dom/tabbableRoot/tabbable.js";
+import M from "../useReflex.js";
 import { isUndefined as O } from "../../utils/value/is.js";
-const w = (R, f) => {
-  const s = i(!1), o = i(null), c = i(!1), a = u(T, []), m = u(() => {
+const q = (k, A) => {
+  const u = o(!1), l = o(null), f = o(!1), T = o(null), d = o(1), b = o(!1), r = E(H, []), F = c((e) => {
+    const t = l.current;
+    if (t instanceof HTMLElement && i(e, t)) {
+      t.focus();
+      return;
+    }
+    e instanceof HTMLElement && e.focus();
+  }, []), L = E(() => {
     let e = null, t;
-    return (F) => {
+    return (m) => {
       O(t) || cancelAnimationFrame(t);
-      let n = F.target;
-      for (; n && n !== F.currentTarget; ) {
-        if (L(n)) {
-          e = n, t = requestAnimationFrame(() => {
+      let s = m.target;
+      for (; s && s !== m.currentTarget; ) {
+        if (I(s)) {
+          e = s, t = requestAnimationFrame(() => {
             t = requestAnimationFrame(() => {
-              var b;
-              o.current !== e && e instanceof HTMLElement && ((b = o.current = e) == null || b.focus()), e = null, t = void 0;
+              var a;
+              l.current !== e && e instanceof HTMLElement && ((a = l.current = e) == null || a.focus()), e = null, t = void 0;
             });
           });
           return;
         }
-        n = n.parentNode;
+        s = s.parentNode;
       }
     };
-  }, []), d = l((e) => {
-    a.current = o.current = e.target;
-  }, []), E = l((e) => {
-    a.tabbables.includes(e.relatedTarget) || p(e.currentTarget, e.relatedTarget) || c.current || (s.current = !0, requestAnimationFrame(() => {
-      s.current && f(s.current = !1);
+  }, []), R = c((e) => {
+    r.current = l.current = e.target;
+  }, []), g = c((e) => {
+    var s;
+    const t = r.root;
+    if (!(t instanceof Element)) return;
+    const m = e.target;
+    if (!i(t, m) && i(t, e.relatedTarget) && f.current && T.current === n.TAB) {
+      const a = r.tabbables;
+      if (a.length) {
+        const x = d.current === -1 ? a.length - 1 : 0;
+        (s = a[x]) == null || s.focus();
+      } else
+        F(t);
+    }
+  }, []), h = c((e) => {
+    r.tabbables.includes(e.relatedTarget) || i(e.currentTarget, e.relatedTarget) || f.current || (u.current = !0, requestAnimationFrame(() => {
+      u.current && A(u.current = !1);
     }));
-  }, []), A = u(() => {
+  }, []), C = E(() => {
     let e;
     return (t) => {
-      switch (t.code) {
-        case r.ARROW_DOWN:
-        case r.ARROW_LEFT:
-        case r.ARROW_RIGHT:
-        case r.ARROW_UP:
-        case r.END:
-        case r.ESCAPE:
-        case r.HOME:
-        case r.PAGE_DOWN:
-        case r.PAGE_UP:
-        case r.TAB:
+      switch (T.current = t.code, t.code) {
+        case n.ARROW_DOWN:
+        case n.ARROW_LEFT:
+        case n.ARROW_RIGHT:
+        case n.ARROW_UP:
+        case n.END:
+        case n.ESCAPE:
+        case n.HOME:
+        case n.PAGE_DOWN:
+        case n.PAGE_UP:
+        case n.TAB:
           cancelAnimationFrame(e), e = requestAnimationFrame(() => {
             e = requestAnimationFrame(() => {
-              c.current = !1, e = void 0;
+              f.current = !1, e = void 0;
             });
-          }), c.current = !0;
+          }), f.current = !0;
           break;
       }
-      t.code === r.TAB ? (t.preventDefault(), a.current = t.shiftKey ? -1 : 1) : t.code === r.ESCAPE && f(!0);
+      t.code === n.TAB ? (t.preventDefault(), d.current = t.shiftKey ? -1 : 1, r.tabbables.length ? r.current = d.current : r.root instanceof Element && F(r.root)) : t.code === n.ESCAPE && A(!0);
     };
   }, []);
-  return C(
-    l((e, t) => {
-      t instanceof Element && (t.removeEventListener("keydown", A, !0), t.removeEventListener("focusin", d, !0), t.removeEventListener("focusout", E, !1), e.removeEventListener("click", m, !0)), e instanceof Element ? (e.addEventListener("keydown", A, !0), e.addEventListener("focusin", d, !0), e.addEventListener("focusout", E, !1), e.addEventListener("click", m, !0), s.current = !1, a.root = e) : a.root = null;
+  return M(
+    c((e, t) => {
+      t instanceof Element && (t.removeEventListener("keydown", C, !0), t.removeEventListener("focusin", R, !0), t.removeEventListener("focusout", h, !1), t.removeEventListener("click", L, !0), document.removeEventListener("focusin", g, !0), b.current && t instanceof HTMLElement && (t.removeAttribute("tabindex"), b.current = !1)), e instanceof Element ? (e.addEventListener("keydown", C, !0), e.addEventListener("focusin", R, !0), e.addEventListener("focusout", h, !1), e.addEventListener("click", L, !0), document.addEventListener("focusin", g, !0), u.current = !1, r.root = e, e instanceof HTMLElement && !e.hasAttribute("tabindex") && (e.setAttribute("tabindex", "-1"), b.current = !0), i(e, document.activeElement) || e instanceof HTMLElement && e.focus()) : r.root = null;
     }, []),
-    R
+    k
   );
 };
 export {
-  w as default
+  q as default
 };

package/dist/es/hooks/element/usePopoverPositioner.js

@@ -1,9 +1,9 @@
-import { useState as P, useCallback as Y, useRef as y, useEffect as D } from "../../external/preact/hooks/dist/hooks.module.js";
-import d from "../../components/internal/Popover/utils/utils.js";
+import { useState as k, useCallback as Y, useRef as y, useEffect as D } from "../../external/preact/hooks/dist/hooks.module.js";
+import P from "../../components/internal/Popover/utils/utils.js";
 import { PopoverContainerPosition as t, PopoverContainerVariant as v } from "../../components/internal/Popover/types.js";
-import { isRefObject as W } from "../../primitives/reactive/reflex/helpers.js";
+import { isRefObject as w } from "../../primitives/reactive/reflex/helpers.js";
 import V from "../useReflex.js";
-const w = [
+const W = [
   t.BOTTOM_RIGHT,
   t.BOTTOM_LEFT,
   t.TOP_RIGHT,
@@ -19,13 +19,13 @@ const w = [
   targetElement: r
 }) => {
   let n = 0, c = 0;
-  const B = _ === v.TOOLTIP, u = a.clientHeight, C = a.clientWidth, p = a.firstChild, k = p.offsetHeight, E = p.offsetWidth, h = document.body.getBoundingClientRect(), e = r.getBoundingClientRect(), L = h.x + (h.width - E) / 2, l = e.x + (e.width - E) / 2, m = e.y + (e.height - k) / 2, b = window.scrollX, s = window.scrollY;
+  const B = _ === v.TOOLTIP, l = a.clientHeight, C = a.clientWidth, g = a.firstChild, d = g.offsetHeight, E = g.offsetWidth, h = document.body.getBoundingClientRect(), e = r.getBoundingClientRect(), p = h.x + (h.width - E) / 2, u = e.x + (e.width - E) / 2, m = e.y + (e.height - d) / 2, b = window.scrollX, s = window.scrollY;
   switch (M) {
     case t.BOTTOM:
-      n = F ? L : B ? l : e.x, c = e.y + e.height + O[1], T || (F || (n += b), c += s);
+      n = F ? p : B ? u : e.x, c = e.y + e.height + O[1], T || (F || (n += b), c += s);
       break;
     case t.TOP:
-      n = B ? l : e.x, c = e.y - (u + O[0]), T || (n += b, c += s - p.clientHeight + u);
+      n = B ? u : e.x, c = e.y - (l + O[0]), T || (n += b, c += s - g.clientHeight + l);
       break;
     case t.RIGHT:
       n = e.x + e.width + O[2], c = B ? m : e.y - e.height / 2, T || (n += b, c += s);
@@ -37,89 +37,87 @@ const w = [
       n = 5, c = e.y + e.height + O[1], T || (n += b, c += s);
       break;
     case t.BOTTOM_RIGHT:
-      n = -5, c = e.y + e.height + O[1], T || (n += b, c += s);
+      n = -5, c = e.y + e.height + O[1], T || (n = b - (h.width - e.right), c += s);
       break;
     case t.TOP_LEFT:
-      n = q, c = e.y - u, T || (n += b, c += s - p.clientHeight + u);
+      n = q, c = e.y - l, T || (n += b, c += s - g.clientHeight + l);
       break;
     case t.TOP_RIGHT:
-      n = -5, c = e.y - u, T || (n += b, c += s - p.clientHeight + u);
+      n = -5, c = e.y - l, T || (n += b, c += s - g.clientHeight + l);
       break;
   }
   const R = {};
   if (i) {
     const G = !!i.maxY && c + (a == null ? void 0 : a.clientHeight) > i.maxY, o = !!i.minY && c < i.minY;
     if (G && i.maxY) {
-      const g = e.y + e.height + 8, H = Math.max(0, i.maxY - g);
+      const I = e.y + e.height + 8, H = Math.max(0, i.maxY - I);
       H > 20 && (R.height = `${H}px`), R["overflow-y"] = "scroll";
     }
     if (o && i.minY && c) {
-      const g = a.offsetHeight ?? a.clientHeight, H = Math.max(0, g - (i.minY - c));
+      const I = a.offsetHeight ?? a.clientHeight, H = Math.max(0, I - (i.minY - c));
       R.height = `${H}px`, H && (R["overflow-y"] = "scroll");
     }
     o && (c = i.minY ?? 0);
   }
-  const I = M === t.TOP_RIGHT || M === t.BOTTOM_RIGHT;
   return {
-    inset: I ? "0 0 auto auto" : "0 auto auto 0",
+    inset: M === t.TOP_RIGHT || M === t.BOTTOM_RIGHT ? "0 0 auto auto" : "0 auto auto 0",
     margin: "0",
     position: T ? "fixed" : "absolute",
     transform: `translate3d(${n}px, ${c}px, 0)`,
     visibility: "hidden",
-    right: I ? 0 : "auto",
     ...R
   };
-}, tt = (M, _, O, i, T, F, a, r, n, c, B, u) => {
-  const [C, p] = P(!0), [k, E] = P(r ? !r : !!i), [h, e] = P(i || t.TOP), [L, l] = P([]), m = Y(
+}, tt = (M, _, O, i, T, F, a, r, n, c, B, l) => {
+  const [C, g] = k(!0), [d, E] = k(r ? !r : !!i), [h, e] = k(i || t.TOP), [p, u] = k([]), m = Y(
     (s) => {
       var G;
-      const R = document.documentElement.clientWidth, I = (G = _.current) == null ? void 0 : G.getBoundingClientRect();
+      const R = document.documentElement.clientWidth, L = (G = _.current) == null ? void 0 : G.getBoundingClientRect();
       if (s.intersectionRatio === 1) return E(!0);
       if (!C && s.intersectionRatio !== 1) {
-        if (L && L.length === (r ? 8 : 4)) {
-          const o = L.reduce((g, H) => H[1] > g[1] ? H : g, L[0]);
+        if (p && p.length === (r ? 8 : 4)) {
+          const o = p.reduce((I, H) => H[1] > I[1] ? H : I, p[0]);
           return e(o[0]), E(!0);
         }
         switch (E(!1), h) {
           case t.TOP:
-            l((o) => [...o, [t.TOP, s.intersectionRatio]]), e(t.BOTTOM);
+            u((o) => [...o, [t.TOP, s.intersectionRatio]]), e(t.BOTTOM);
             break;
           case t.BOTTOM:
-            l((o) => [...o, [t.BOTTOM, s.intersectionRatio]]), e(
-              r ? ((I == null ? void 0 : I.x) || 0) > R / 2 ? t.BOTTOM_RIGHT : t.BOTTOM_LEFT : t.RIGHT
+            u((o) => [...o, [t.BOTTOM, s.intersectionRatio]]), e(
+              r ? ((L == null ? void 0 : L.x) || 0) > R / 2 ? t.BOTTOM_RIGHT : t.BOTTOM_LEFT : t.RIGHT
             );
             break;
           case t.BOTTOM_LEFT:
-            l((o) => [...o, [t.BOTTOM_LEFT, s.intersectionRatio]]), e(r ? t.TOP_LEFT : t.RIGHT);
+            u((o) => [...o, [t.BOTTOM_LEFT, s.intersectionRatio]]), e(r ? t.TOP_LEFT : t.RIGHT);
             break;
           case t.BOTTOM_RIGHT:
-            l((o) => [...o, [t.BOTTOM_RIGHT, s.intersectionRatio]]), e(r ? t.TOP_RIGHT : t.RIGHT);
+            u((o) => [...o, [t.BOTTOM_RIGHT, s.intersectionRatio]]), e(r ? t.TOP_RIGHT : t.RIGHT);
             break;
           case t.TOP_LEFT:
-            l((o) => [...o, [t.TOP_LEFT, s.intersectionRatio]]), e(r ? t.BOTTOM_LEFT : t.RIGHT);
+            u((o) => [...o, [t.TOP_LEFT, s.intersectionRatio]]), e(r ? t.BOTTOM_LEFT : t.RIGHT);
             break;
           case t.TOP_RIGHT:
-            l((o) => [...o, [t.TOP_RIGHT, s.intersectionRatio]]), e(r ? t.BOTTOM_RIGHT : t.RIGHT);
+            u((o) => [...o, [t.TOP_RIGHT, s.intersectionRatio]]), e(r ? t.BOTTOM_RIGHT : t.RIGHT);
             break;
           case t.RIGHT:
-            l((o) => [...o, [t.RIGHT, s.intersectionRatio]]), e(t.LEFT);
+            u((o) => [...o, [t.RIGHT, s.intersectionRatio]]), e(t.LEFT);
             break;
           case t.LEFT:
-            l((o) => [...o, [t.LEFT, s.intersectionRatio]]), e(t.TOP);
+            u((o) => [...o, [t.LEFT, s.intersectionRatio]]), e(t.TOP);
             break;
         }
       }
     },
-    [_, C, L, r, h]
+    [_, C, p, r, h]
   ), b = y(m);
   return D(() => {
-    d(b.current).remove(), b.current = m;
+    P(b.current).remove(), b.current = m;
   }, [m]), V(
     Y(
       (s, R) => {
-        var I, G, o;
-        if (R && (!i || r) && d(m).observer.unobserve(R), s && _.current) {
-          if ((!i || r) && d(m).observer.observe(s), !(s instanceof Element)) return;
+        var L, G, o;
+        if (R && (!i || r) && P(m).observer.unobserve(R), s && _.current) {
+          if ((!i || r) && P(m).observer.observe(s), !(s instanceof Element)) return;
           const H = {
             ...Z({
               variant: O,
@@ -131,7 +129,7 @@ const w = [
               position: h,
               targetElement: _.current
             }),
-            ...k && { visibility: "visible" },
+            ...d && { visibility: "visible" },
             ...F && {
               "min-width": "fit-content",
               width: `${_.current.clientWidth}px`
@@ -140,16 +138,16 @@ const w = [
           if (s.setAttribute(
             "style",
             Object.entries(H).map((f) => f.join(":")).join(";")
-          ), C && p(!1), O && O === v.TOOLTIP && T && W(T) && ((I = T.current) == null || I.setAttribute("data-popover-placement", h), w.includes(h))) {
+          ), C && g(!1), O && O === v.TOOLTIP && T && w(T) && ((L = T.current) == null || L.setAttribute("data-popover-placement", h), W.includes(h))) {
             const f = _.current.getBoundingClientRect(), x = s.firstChild, $ = x.offsetWidth, N = f.x + (f.width - $) / 2, X = x.offsetHeight, j = h === t.BOTTOM_RIGHT || h === t.BOTTOM_LEFT ? X + A : A;
             (G = T.current) == null || G.setAttribute(
               "style",
               `transform: translate3d(${N}px, -${j}px, 0) rotate(45deg); inset: 0 0 auto auto`
             );
           }
-          if (O && O === v.TOOLTIP && u && W(u) && w.includes(h)) {
+          if (O && O === v.TOOLTIP && l && w(l) && W.includes(h)) {
             const f = document.documentElement.clientWidth;
-            (o = u.current) == null || o.setAttribute("style", `max-width: ${f - U}px`);
+            (o = l.current) == null || o.setAttribute("style", `max-width: ${f - U}px`);
           }
         }
       },
@@ -164,11 +162,11 @@ const w = [
         n,
         a,
         h,
-        k,
+        d,
         F,
         C,
         T,
-        u
+        l
       ]
     ),
     B

package/dist/es/hooks/form/Controller.js

@@ -0,0 +1,60 @@
+import { useReducer as S, useRef as y, useEffect as R, useCallback as d } from "../../external/preact/hooks/dist/hooks.module.js";
+function C({ name: t, control: e, rules: u, render: g }) {
+  const [, a] = S((r) => r + 1, 0), { required: c } = u ?? {}, f = y(c);
+  R(() => {
+    const r = e.subscribe(() => {
+      a();
+    });
+    let s = () => {
+    };
+    if (u && (s = e.register(t, u)), f.current !== c) {
+      f.current = c;
+      const i = e.getFieldState(t);
+      i.isTouched && i.error && e.trigger(t);
+    }
+    return () => {
+      r(), s();
+    };
+  }, [e, t, u, c]);
+  const b = e.getValue(t), h = e.getFieldState(t), l = e.getFormState(), p = d(
+    (r) => {
+      let s = r;
+      if (r && typeof r == "object" && "target" in r) {
+        const i = r.target;
+        switch (i.type) {
+          case "checkbox":
+            s = i.checked;
+            break;
+          case "file":
+            s = i.files;
+            break;
+          case "select-multiple":
+            s = Array.from(i.selectedOptions, (o) => o.value);
+            break;
+          default:
+            s = i.value;
+        }
+      }
+      e.setValue(t, s);
+    },
+    [e, t]
+  ), k = d(() => {
+    e.setTouched(t, !0), e.trigger(t);
+  }, [e, t]), n = d(() => {
+    e.trigger(t);
+  }, [e, t]);
+  return g({
+    field: {
+      name: t,
+      value: b,
+      onInput: p,
+      onBlur: k,
+      triggerValidation: n
+    },
+    fieldState: h,
+    formState: l
+  });
+}
+export {
+  C as Controller
+};