@telia-ace/widget-components-area 1.1.1-rc.0 → 1.1.1-rc.2

package/area-f1877ce1.mjs

@@ -0,0 +1,718 @@
+import { jsx as u, jsxs as fe } from "react/jsx-runtime";
+import { css as O, ThemeProvider as he } from "@emotion/react";
+import y from "@emotion/styled";
+import { E as ge, C as re, u as _, a as Y, b as z, c as ye, d as I, e as K, f as oe, W as R, g as se, G, h as H, i as J, j as V, p as ie, k as ae, T as be, l as ce, A as W, D as $e, m as xe, n as Ce, L as ve, B as we, o as Se, S as Te } from "./index-23726922.mjs";
+import le, { useContext as Q, useState as T, useCallback as ue, useEffect as C, forwardRef as Z, useMemo as De, Suspense as Pe } from "react";
+import "react-dom";
+import { Transition as de, TransitionGroup as Ee } from "react-transition-group";
+import { Switch as Re, Route as F } from "react-router";
+const Ne = (e) => e === "entering" || e === "entered", Ae = (e) => e === "exiting" || e === "exited", A = {
+  fade: {
+    in: "opacity: 1;",
+    out: "opacity: 0;"
+  },
+  "slide-left": {
+    in: "transform: translateX(0);",
+    out: "transform: translateX(-100%);"
+  },
+  "slide-right": {
+    in: "transform: translateX(0);",
+    out: "transform: translateX(100%);"
+  },
+  "slide-up": {
+    in: "transform: translateY(0);",
+    out: "transform: translateY(100%);"
+  },
+  "slide-down": {
+    in: "transform: translateY(0);",
+    out: "transform: translateY(-100%);"
+  },
+  scale: {
+    in: "transform: scale(1);",
+    out: "transform: scale(0);"
+  }
+}, Oe = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], k = {
+  compose: (e = "exited", t) => {
+    const { enter: r, exit: o } = t, n = r.transitionKeys.split(" "), i = Oe.indexOf(n[0]) > -1 ? "transform" : "opacity";
+    if (Ne(e))
+      return n && n.length > 0 ? O`
+                    ${n && n.length > 0 && n.map((a) => A[a] ? A[a].in : "")}
+                    transition: ${i} ${r.duration}ms ${r.easing};
+                ` : "";
+    const s = n && n.length > 0 && O`
+                ${n.map((a) => A[a] ? A[a].out : "")}
+            `;
+    if (Ae(e)) {
+      const a = o.transitionKeys.split(" ");
+      return a && a.length > 0 && e === "exiting" ? O`
+                    ${s};
+                    ${a.map((c) => A[c] ? A[c].out : "")}
+                    transition: ${i} ${o.duration}ms ${o.easing};
+                ` : s;
+    }
+  },
+  composeViewTransition: (e, t, r) => {
+    if (t === "slide")
+      return k.compose(e, {
+        enter: {
+          transitionKeys: r === "forth" ? "slide-right" : "slide-left",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: r === "forth" ? "slide-left" : "slide-right",
+          duration: 500
+        }
+      });
+    if (t === "fade")
+      return k.compose(e, {
+        enter: {
+          transitionKeys: "fade",
+          duration: 500
+        },
+        exit: {
+          transitionKeys: "fade",
+          duration: 500
+        }
+      });
+  },
+  get: (e) => A[e]
+}, ne = (e = {}) => (Object.keys(e).forEach((t) => {
+  (e[t] === null || typeof e[t] > "u") && delete e[t];
+}), e), Ve = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ u(ge, { ...t }) : null, ee = () => Q(re), U = (e, t) => ({
+  id: e.id,
+  type: e.type,
+  name: e.name,
+  branch: t || "default"
+}), Ke = () => {
+  const e = _(), t = Y(), [r, o] = T([]), n = z(), i = ue(
+    (s) => {
+      if (t && n.current && s) {
+        const a = t.getBranch(s), c = s.getChildren(a).map((l) => U(l));
+        o(c);
+      }
+    },
+    [n, t, o, e]
+  );
+  return C(() => {
+    e && i(e);
+  }, [e, t]), C(() => {
+    if (t) {
+      const [s, a] = ye(t.events);
+      return s("components:set-layout", (c, l) => {
+        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
+      }), s("components:node-appended", (c, l) => {
+        (e === l.node.parent || l.node.parent === t.nodes.root) && i(l.node.parent);
+      }), s("components:node-removed", (c, { parentNode: l }) => {
+        (l === e || l === t.nodes.root) && i(l);
+      }), () => {
+        a();
+      };
+    }
+  }, [e, t, i]), r;
+}, Me = () => Q(I), ze = (e, t) => {
+  const r = ee(), o = K(), [n, i] = T(void 0), s = z(), a = e || r.type || "";
+  return C(() => {
+    if (a) {
+      let c;
+      return (t || o).getAsync("componentResolver").then((l) => {
+        if (s.current) {
+          const m = l.getComponent(a);
+          i(m);
+        }
+        c = l.registerResolver(a, (m) => {
+          s.current && i(m);
+        });
+      }), () => {
+        c && c();
+      };
+    }
+  }, [s, a, t, o]), n;
+}, je = (e) => {
+  const t = _(e), r = Y(), [o, n] = T({}), i = z();
+  return C(() => {
+    t && i.current && n(t.attributes.layout);
+  }, [t, i]), C(() => {
+    if (r) {
+      const s = r.events.subscribe(
+        "components:layout-changed",
+        (a, c) => {
+          t === c.node && i.current && n(c.node.attributes.layout);
+        }
+      );
+      return () => {
+        s();
+      };
+    }
+  }, [r, i, t]), o;
+}, te = () => Q(oe), Be = (e) => {
+  const [t, r] = T(), o = K(), n = z();
+  return C(() => {
+    let i;
+    const s = (e || o).get("$widget");
+    if (!s)
+      return;
+    const { name: a, invoke: c } = s;
+    return c("renderState").then((l) => {
+      n.current && r(l);
+    }), (e || o).getAsync("actionResolver").then((l) => {
+      i = l.subscribe(a, (m, d) => {
+        switch (d) {
+          case "close":
+          case "open":
+            n.current && r(
+              d === "open" ? R.open : R.closed
+            );
+            break;
+          case "hide":
+            n.current && r(R.hidden);
+        }
+      });
+    }), () => {
+      i && i();
+    };
+  }, [n]), t;
+}, Le = (e) => {
+  const t = K(), r = se(), [o, n] = T({ name: "", params: {} }), i = z();
+  return C(() => {
+    const s = (e || t).get("$widget");
+    if (!s)
+      return;
+    const { events: a } = s;
+    return a.subscribe("router:change", (l, { next: { routeData: m } }) => {
+      if (i.current) {
+        const { name: d, params: p } = m;
+        ne(p), n({ name: d, params: p });
+      }
+    });
+  }, [i, e, t]), C(() => {
+    if (r && r.history && i.current) {
+      const s = r.getRouteData(), { name: a, params: c } = s;
+      ne(c), n({ name: a, params: c });
+    }
+  }, [r, i]), o;
+}, We = (e) => {
+  const {
+    in: t,
+    mountOnEnter: r = !0,
+    unmountOnExit: o = !0,
+    timeout: n,
+    children: i,
+    transitions: s
+  } = e, c = (() => {
+    var l, m;
+    if (!(!s || s === "none")) {
+      if (typeof s == "string")
+        return {
+          enter: {
+            transitionKeys: s,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: "ease-in"
+          },
+          exit: {
+            transitionKeys: s,
+            duration: n ? typeof n == "number" ? n : n.exit : 200,
+            easing: "ease-out"
+          }
+        };
+      if (typeof s == "object") {
+        const { enter: d, exit: p } = s;
+        return {
+          enter: {
+            transitionKeys: (l = s.enter) == null ? void 0 : l.type,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: d.easing ? d.easing : "ease-in"
+          },
+          exit: {
+            transitionKeys: (m = s.enter) == null ? void 0 : m.type,
+            duration: n ? typeof n == "number" ? n : n.enter : 200,
+            easing: p.easing ? p.easing : "ease-out"
+          }
+        };
+      }
+    }
+  })();
+  return /* @__PURE__ */ u(
+    de,
+    {
+      timeout: {
+        enter: c && c.enter.duration || 0,
+        exit: c && c.exit.duration || 0
+      },
+      in: t,
+      appear: !0,
+      mountOnEnter: r,
+      unmountOnExit: o,
+      onEnter: (l) => l.clientHeight,
+      children: (l) => i && i(l, c && k.compose(l, c))
+    }
+  );
+};
+var q = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(q || {});
+const _e = (e, t, r) => typeof r[e] == "number" && typeof r[t] == "number" && r[e] > r[t] ? "back" : "forth", me = ({ views: e, location: t, render: r }) => /* @__PURE__ */ u(
+  Re,
+  {
+    location: t && {
+      ...t,
+      pathname: t.pathname.split("?")[0]
+    },
+    children: [
+      ...Object.keys(e).filter((o) => !!e[o].path),
+      ...Object.keys(e).filter((o) => !e[o].path)
+    ].map((o) => {
+      const { path: n } = e[o];
+      return n ? Array.isArray(n) ? n.map((i) => /* @__PURE__ */ u(F, { exact: !0, path: i, render: () => r(o) }, o)) : /* @__PURE__ */ u(F, { exact: !0, path: n, render: () => r(o) }, o) : /* @__PURE__ */ u(F, { render: () => r(o) }, o);
+    })
+  }
+), ke = y.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`, Xe = y(G)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Ye = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+}, Ge = ({ className: e = "", ...t }) => {
+  const [r, o] = T("index"), [n, i] = T(
+    q.forth
+  ), s = Le(), a = se(), c = te(), l = H(), m = K(), d = _(), { gap: p = "0" } = l, {
+    columns: D = 1,
+    animation: v = "none",
+    scrollable: g = !1,
+    ...N
+  } = c, [B, P] = J(g);
+  if (!d || !a)
+    return null;
+  const { location: M } = a;
+  s.name !== r && s.name !== "" && v && (i(
+    _e(r, s.name, Ye)
+  ), o(s.name));
+  const { views: b } = m.get("$settings");
+  if (!Object.keys(b).length)
+    return null;
+  const $ = (f, w, S) => {
+    const h = L(w, S), E = d.getChildren(f)[0];
+    return /* @__PURE__ */ u(
+      Xe,
+      {
+        ...t,
+        ...N,
+        scrollableCss: B,
+        ref: P,
+        columns: D,
+        gap: p,
+        ...h,
+        className: V(e, "humany-view"),
+        children: /* @__PURE__ */ u(X, { id: E.id, branch: "default" })
+      }
+    );
+  }, L = (f, w) => {
+    if (v === "slide" || v === "fade")
+      return {
+        animationCss: k.composeViewTransition(
+          f,
+          v,
+          w
+        ),
+        "data-state": f
+      };
+  };
+  return /* @__PURE__ */ u(ke, { className: "humany-animated-view", children: /* @__PURE__ */ u(
+    Ee,
+    {
+      component: null,
+      childFactory: (f) => le.cloneElement(f, { direction: n }),
+      children: /* @__PURE__ */ u(
+        de,
+        {
+          timeout: { enter: 500, exit: 500 },
+          onEnter: (f) => f == null ? void 0 : f.clientHeight,
+          unmountOnExit: !0,
+          direction: q.forth,
+          children: (f, { direction: w }) => /* @__PURE__ */ u(
+            me,
+            {
+              views: b,
+              location: M,
+              render: (S) => $(S, f, w)
+            }
+          )
+        },
+        r
+      )
+    }
+  ) });
+}, He = y(G)`
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Fe = ({ className: e = "", ...t }) => {
+  const r = te(), o = H(), n = K(), i = _(), { views: s } = n.get("$settings"), { gap: a = "0" } = o, { columns: c = 1, animation: l = "none", scrollable: m = !1, ...d } = r, [p, D] = J(m);
+  return i ? /* @__PURE__ */ u(
+    He,
+    {
+      ...t,
+      ...d,
+      scrollableCss: p,
+      ref: D,
+      columns: c,
+      gap: a,
+      className: V(e, "humany-view"),
+      children: /* @__PURE__ */ u(
+        me,
+        {
+          views: s,
+          render: (v) => {
+            const g = i.getChildren(v)[0];
+            return /* @__PURE__ */ u(X, { id: g.id, node: g, branch: "default" });
+          }
+        }
+      )
+    }
+  ) : null;
+}, j = (e) => {
+  var t, r;
+  return O`
+    outline: none;
+    box-sizing: border-box;
+    * {
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    grid-column: ${e["data-indent"] ? `${e["data-indent"] + 1} / ${e["data-indent"] + (e["data-width"] || 0) + 1}` : `span ${e["data-width"]}`};
+
+    ${((t = e.theme.fonts) == null ? void 0 : t.type) && `
+    font-family: ${e.theme.fonts.type};
+
+    input, textarea {
+      font-family: ${e.theme.fonts.type};
+    }
+  `}
+
+    ${((r = e.theme.fonts) == null ? void 0 : r.base) && `
+    font-size: ${e.theme.fonts.base};
+  `}
+
+  &:focus-visible {
+        ${ie(e)};
+    }
+`;
+}, Ie = y(Fe)`
+    ${(e) => j(e)}
+`, Ue = y(Ge)`
+    ${(e) => j(e)}
+`, qe = y.div`
+    text-align: center;
+    ${(e) => {
+  var t, r, o;
+  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && O`
+            color: ${(r = e.theme.colors) == null ? void 0 : r.warning};
+            border: 2px dashed ${(o = e.theme.colors) == null ? void 0 : o.warning};
+        `;
+}}
+    ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => j(e)}
+`, Je = Z(
+  ({ className: e = "", children: t, ...r }, o) => {
+    const n = ze(), { name: i, type: s, id: a } = ee(), c = De(() => n ? y(n)`
+                    ${j}
+                    ${ae}
+                ` : null, [n]);
+    return typeof n > "u" ? null : n === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ u(
+      qe,
+      {
+        ...r,
+        title: `type: ${s}, definition-id: ${i}, instance-id: ${a}`,
+        className: V(e, "humany-non-resolved-component"),
+        children: /* @__PURE__ */ u(be, { variant: "h5", children: "Non Resolved Component Type" })
+      }
+    ) : null : /* @__PURE__ */ u(Pe, { fallback: null, children: /* @__PURE__ */ u(
+      c,
+      {
+        ref: o,
+        ...r,
+        className: V(
+          e,
+          "humany-component",
+          `humany-component-${i}`
+        ),
+        children: t
+      }
+    ) });
+  }
+), Qe = (e) => {
+  const t = _(e), r = Y(), [o, n] = T({}), i = z();
+  return C(() => {
+    t && i.current && n(t.attributes.properties);
+  }, [t, e, i]), C(() => {
+    if (r) {
+      const s = r.events.subscribe(
+        "components:properties-changed",
+        (a, c) => {
+          t === c.node && i.current && n(c.node.attributes.properties);
+        }
+      );
+      return () => {
+        s();
+      };
+    }
+  }, [r, i, e, t]), o;
+}, Ze = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, X = Z(
+  ({
+    className: e = "",
+    id: t,
+    branch: r,
+    node: o,
+    ariaLabel: n,
+    tabIndex: i,
+    context: s,
+    ...a
+  }, c) => {
+    const l = Y(), m = K(), [d, p] = T(), D = Me(), v = H(t), g = Qe(t), { size: N = "none", indent: B = 0 } = je(t), P = Ze(N, o);
+    if (C(() => {
+      if (l) {
+        if (t && !o) {
+          const h = l.nodes.get(t);
+          if (h && (p(U(h, r)), P)) {
+            const E = h.mount(m);
+            return () => {
+              E();
+            };
+          }
+        } else if (o) {
+          p(U(o, r));
+          const h = o.mount(m);
+          return () => {
+            h();
+          };
+        }
+      }
+    }, [l, t, o, P]), !d || !P)
+      return null;
+    const M = { ...v, ...s || {} }, {
+      cardinal: b,
+      fonts: $ = {},
+      accessibility: L = {},
+      ...f
+    } = M, w = {
+      type: $.type,
+      base: $.base || "16px",
+      small: $.small || "0.8em",
+      normal: $.normal || "1em",
+      medium: $.medium || "1.2em",
+      large: $.large || "1.6em",
+      huge: $.huge || "2.5em"
+    }, S = {
+      ...f,
+      fonts: w,
+      accessibility: {
+        ...L
+      }
+    };
+    return typeof b == "number" && (S.sizes = {
+      cardinal: b,
+      small: `${b}px`,
+      normal: `${b * 3}px`,
+      medium: `${b * 5}px`,
+      large: `${b * 8}px`
+    }), /* @__PURE__ */ u(he, { theme: S, children: /* @__PURE__ */ u(re.Provider, { value: d, children: /* @__PURE__ */ u(oe.Provider, { value: g, children: (() => {
+      const h = {
+        "data-width": N === "full" ? D : Math.min(N, D),
+        "data-indent": B,
+        "data-name": d.name,
+        "data-node-id": d.id,
+        "data-component-type": d.type,
+        "aria-label": n,
+        tabIndex: i,
+        id: d.id,
+        role: g && g.role,
+        ...a
+      };
+      switch (d.type) {
+        case "view":
+          return typeof g.animation == "string" && g.animation !== "none" ? /* @__PURE__ */ u(Ue, { ...h, className: e }) : /* @__PURE__ */ u(Ie, { ...h, className: e });
+        default: {
+          const E = ce(g);
+          return /* @__PURE__ */ u(
+            Je,
+            {
+              ref: c,
+              ...h,
+              ...E,
+              className: e
+            }
+          );
+        }
+      }
+    })() }) }) });
+  }
+);
+le.lazy(() => import("./detached-component-cc07075e.mjs"));
+const et = Z(
+  ({ children: e, className: t, renderState: r, animation: o, ...n }, i) => r ? /* @__PURE__ */ u(
+    We,
+    {
+      mountOnEnter: r !== R.hidden,
+      timeout: 200,
+      in: r === R.open,
+      transitions: o,
+      unmountOnExit: r === R.closed,
+      children: (s, a) => /* @__PURE__ */ u(
+        tt,
+        {
+          ...n,
+          animationCss: a,
+          "data-state": s,
+          ref: i,
+          className: V("humany-animated-area", t),
+          children: e
+        }
+      )
+    }
+  ) : null
+), tt = y(G)`
+    ${j}
+    ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+    input::-ms-clear {
+        display: none;
+    }
+    ${(e) => e.hidden && e["data-state"] === "exited" && O`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`, nt = ({ className: e, ...t }) => {
+  const { name: r } = ee(), o = Be(), n = H(), i = te(), s = Ke(), a = K(), { gap: c = "0" } = n, {
+    columns: l = 1,
+    animation: m = "none",
+    scrollable: d = !1,
+    mode: p = W.Static,
+    trigger: D = {},
+    fullScreen: v,
+    header: g,
+    ...N
+  } = i, { size: B = 24, symbol: P, label: M, ariaLabel: b, ...$ } = D, [L, f] = J(d), w = ue(
+    (x) => {
+      const { events: pe } = a.get("$widget");
+      return pe.dispatch("widget:area-rendered", {
+        name: r,
+        properties: i,
+        element: x
+      }), f.current = x, x;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, o]
+  );
+  if (!s.length)
+    return Ve(a, {
+      ...t,
+      className: V(e, "humany-area")
+    });
+  const S = {
+    ...t,
+    className: V(
+      e,
+      "humany-area",
+      `humany-area-${r}`
+    ),
+    scrollableCss: L,
+    ...N,
+    columns: l,
+    gap: c,
+    renderState: o,
+    animation: m,
+    hidden: o === R.hidden,
+    ref: w
+  }, h = (() => m !== "none" ? /* @__PURE__ */ u(I.Provider, { value: l, children: /* @__PURE__ */ u(et, { ...S, children: s.map((x) => /* @__PURE__ */ u(X, { id: x.id, branch: "default" }, x.id)) }) }) : o === R.closed ? null : /* @__PURE__ */ u(I.Provider, { value: l, children: /* @__PURE__ */ u(it, { ...S, children: s.map((x) => /* @__PURE__ */ u(X, { id: x.id, branch: "default" }, x.id)) }) }))();
+  if (p === W.Static)
+    return h;
+  const E = /* @__PURE__ */ fe(
+    rt,
+    {
+      className: "humany-area-trigger",
+      title: b,
+      ...ce($),
+      children: [
+        M && /* @__PURE__ */ u(ot, { children: M }),
+        P && /* @__PURE__ */ u(st, { symbol: P, size: B })
+      ]
+    }
+  );
+  if (p === W.Dropdown)
+    return /* @__PURE__ */ u($e, { trigger: E, children: h });
+  if (p === W.Drawer) {
+    const x = Object.values(xe).includes(m) && {
+      type: m
+    } || void 0;
+    return /* @__PURE__ */ u(
+      Ce,
+      {
+        header: g,
+        animation: x,
+        fullScreen: v,
+        trigger: E,
+        children: h
+      }
+    );
+  }
+  return p === W.Modal && ve.warn("modal area not implemented"), null;
+}, rt = y(we)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${ae}
+
+  ${(e) => e.theme.fonts && `
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${ie};
+  }
+`, ot = y(Se)`
+  margin: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} 0 0;
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+`, st = y(Te)`
+  path {
+    fill: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+`, it = y(G)`
+  ${j}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${(e) => e.hidden && O`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`, ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: nt
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  X as C,
+  ht as a
+};

package/detached-component-c01ac861.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime");require("@emotion/react");const c=require("./index-ca09668e.js"),n=require("react");require("react-dom");require("react-transition-group");const d=require("./area-c682aa47.js");require("@emotion/styled");require("react-router-dom");require("react-router");const a=({builder:i})=>{const u=c.useContainer(),[e,o]=n.useState(null);return n.useEffect(()=>{u.getAsync("components").then(t=>i(t).then(r=>{o(r)}))},[]),n.useEffect(()=>()=>{e&&u.getAsync("components").then(t=>{t.nodes.detached=t.nodes.detached.filter(r=>r.id!==e.id)})},[e]),e?s.jsx(d.Component,{id:e.id,node:e,branch:"default"}):null};exports.default=a;