@builder.io/sdk-react 2.0.3 → 2.0.8

package/lib/edge/blocks-90fd2fd8.js

@@ -0,0 +1,808 @@
+import { jsx as i, Fragment as y, jsxs as B } from "react/jsx-runtime";
+import { createContext as F, useState as j, useEffect as V, useContext as W } from "react";
+import { BuilderContext as D } from "./blocks-exports.mjs";
+import { checkIsDefined as v, TARGET as P, isEditing as N } from "./server-entry-29a170e3.js";
+import { evaluate as w, set as K } from "./evaluate-384a03ed.js";
+import { getClassPropName as Z } from "./get-class-prop-name-767dbeb0.js";
+import { DynamicRenderer as J } from "./dynamic-renderer-8b343325.js";
+const M = (e) => JSON.parse(JSON.stringify(e)), Q = F({ registeredComponents: {} });
+function q(e) {
+  var t;
+  return {
+    ...(t = e.component) == null ? void 0 : t.options,
+    ...e.options
+  };
+}
+const G = ({
+  block: e,
+  context: t,
+  localState: n,
+  rootState: o,
+  rootSetState: r
+}) => {
+  if (!e.bindings)
+    return e;
+  const l = M(e), s = {
+    ...l,
+    properties: {
+      ...l.properties
+    },
+    actions: {
+      ...l.actions
+    }
+  };
+  for (const c in e.bindings) {
+    const u = e.bindings[c], f = w({
+      code: u,
+      localState: n,
+      rootState: o,
+      rootSetState: r,
+      context: t,
+      enableCache: !0
+    });
+    K(s, c, f);
+  }
+  return s;
+};
+function k({
+  block: e,
+  context: t,
+  shouldEvaluateBindings: n,
+  localState: o,
+  rootState: r,
+  rootSetState: l
+}) {
+  const s = e;
+  return n ? G({
+    block: s,
+    localState: o,
+    rootState: r,
+    rootSetState: l,
+    context: t
+  }) : s;
+}
+const C = (e) => e ? e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase() : "";
+function X(e, t, n = {}) {
+  let o, r, l, s = null, c = 0;
+  const u = function() {
+    c = n.leading === !1 ? 0 : Date.now(), s = null, l = e.apply(o, r), s || (o = r = null);
+  };
+  return function() {
+    const f = Date.now();
+    !c && n.leading === !1 && (c = f);
+    const h = t - (f - c);
+    return o = this, r = arguments, h <= 0 || h > t ? (s && (clearTimeout(s), s = null), c = f, l = e.apply(o, r), s || (o = r = null)) : !s && n.trailing !== !1 && (s = setTimeout(u, h)), l;
+  };
+}
+function g(e, ...t) {
+  const n = Object(e);
+  for (let o = 1; o < arguments.length; o++) {
+    const r = arguments[o];
+    if (r != null)
+      for (const l in r)
+        Object.prototype.hasOwnProperty.call(r, l) && (n[l] = r[l]);
+  }
+  return n;
+}
+function Y(e) {
+  for (const t of e)
+    switch (t.trigger) {
+      case "pageLoad":
+        te(t);
+        break;
+      case "scrollInView":
+        ne(t);
+        break;
+    }
+}
+function L(e) {
+  console.warn(`Cannot animate element: element with ID ${e} not found!`);
+}
+function z(e, t) {
+  const n = ee(e), o = getComputedStyle(t), r = e.steps[0].styles, l = e.steps[e.steps.length - 1].styles, s = [r, l];
+  for (const c of s)
+    for (const u of n)
+      u in c || (c[u] = o[u]);
+}
+function ee(e) {
+  const t = [];
+  for (const n of e.steps)
+    for (const o in n.styles)
+      t.indexOf(o) === -1 && t.push(o);
+  return t;
+}
+function te(e) {
+  const t = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
+  if (!t.length) {
+    L(e.elementId || e.id || "");
+    return;
+  }
+  Array.from(t).forEach((n) => {
+    z(e, n), n.style.transition = "none", n.style.transitionDelay = "0", g(n.style, e.steps[0].styles), setTimeout(() => {
+      n.style.transition = `all ${e.duration}s ${C(e.easing)}`, e.delay && (n.style.transitionDelay = e.delay + "s"), g(n.style, e.steps[1].styles), setTimeout(() => {
+        n.style.transition = "", n.style.transitionDelay = "";
+      }, (e.delay || 0) * 1e3 + e.duration * 1e3 + 100);
+    });
+  });
+}
+function ne(e) {
+  const t = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
+  if (!t.length) {
+    L(e.elementId || e.id || "");
+    return;
+  }
+  Array.from(t).forEach((n) => {
+    z(e, n);
+    let o = !1, r = !1;
+    function l() {
+      !o && c(n) ? (o = !0, r = !0, setTimeout(() => {
+        g(n.style, e.steps[1].styles), e.repeat || document.removeEventListener("scroll", s), setTimeout(() => {
+          r = !1, e.repeat || (n.style.transition = "", n.style.transitionDelay = "");
+        }, (e.duration + (e.delay || 0)) * 1e3 + 100);
+      })) : e.repeat && o && !r && !c(n) && (o = !1, g(n.style, e.steps[0].styles));
+    }
+    const s = X(l, 200, {
+      leading: !1
+    });
+    function c(h) {
+      const a = h.getBoundingClientRect(), d = window.innerHeight, m = (e.thresholdPercent || 0) / 100 * d;
+      return a.bottom > m && a.top < d - m;
+    }
+    const u = e.steps[0].styles;
+    function f() {
+      g(n.style, u);
+    }
+    f(), setTimeout(() => {
+      n.style.transition = `all ${e.duration}s ${C(e.easing)}`, e.delay && (n.style.transitionDelay = e.delay + "s");
+    }), document.addEventListener("scroll", s, {
+      capture: !0,
+      passive: !0
+    }), l();
+  });
+}
+const H = (e) => Object.entries(e).map(([n, o]) => {
+  if (typeof o == "string")
+    return `${C(n)}: ${o};`;
+}).filter(v), oe = (e) => H(e).join(`
+`), x = ({
+  mediaQuery: e,
+  className: t,
+  styles: n
+}) => {
+  const o = `.${t} {
+    ${oe(n)}
+  }`;
+  return e ? `${e} {
+      ${o}
+    }` : o;
+};
+function re({
+  style: e
+}) {
+  return e;
+}
+const le = ({
+  block: e,
+  context: t
+}) => ce(re({
+  style: e.style || {},
+  context: t,
+  block: e
+}));
+function ce(e) {
+  switch (P) {
+    case "svelte":
+    case "vue":
+    case "solid":
+    case "angular":
+      return H(e).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return e;
+  }
+}
+const se = ({
+  block: e,
+  context: t,
+  registeredComponents: n
+}) => {
+  var l;
+  const o = (l = k({
+    block: e,
+    localState: t.localState,
+    rootState: t.rootState,
+    rootSetState: t.rootSetState,
+    context: t.context,
+    shouldEvaluateBindings: !1
+  }).component) == null ? void 0 : l.name;
+  if (!o)
+    return null;
+  const r = n[o];
+  if (r)
+    return r;
+  console.warn(`
+      Could not find a registered component named "${o}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+}, ie = ({
+  block: e,
+  context: t
+}) => {
+  const {
+    repeat: n,
+    ...o
+  } = e;
+  if (!(n != null && n.collection))
+    return;
+  const r = w({
+    code: n.collection,
+    localState: t.localState,
+    rootState: t.rootState,
+    rootSetState: t.rootSetState,
+    context: t.context,
+    enableCache: !0
+  });
+  if (!Array.isArray(r))
+    return;
+  const l = n.collection.split(".").pop(), s = n.itemName || (l ? l + "Item" : "item");
+  return r.map((u, f) => ({
+    context: {
+      ...t,
+      localState: {
+        ...t.localState,
+        $index: f,
+        $item: u,
+        [s]: u,
+        [`$${s}Index`]: f
+      }
+    },
+    block: o
+  }));
+}, ae = (e, t) => {
+  var n;
+  return (n = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && n.builderLinkComponent ? {
+    builderLinkComponent: t
+  } : {};
+}, ue = (e, t) => {
+  var n;
+  return (n = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && n.builderComponents ? {
+    builderComponents: t
+  } : {};
+}, de = (e, t) => {
+  var n;
+  return (n = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && n.builderBlock ? {
+    builderBlock: t
+  } : {};
+}, fe = (e, t) => {
+  var n;
+  return (n = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && n.builderContext ? {
+    builderContext: t
+  } : {};
+}, U = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+}, O = (e, t = U) => `@media (max-width: ${t[e].max}px)`, me = ({
+  small: e,
+  medium: t
+}) => {
+  const n = M(U);
+  if (!e || !t)
+    return n;
+  const o = Math.floor(e / 2);
+  n.small = {
+    max: e,
+    min: o,
+    default: o + 1
+  };
+  const r = n.small.max + 1;
+  n.medium = {
+    max: t,
+    min: r,
+    default: r + 1
+  };
+  const l = n.medium.max + 1;
+  return n.large = {
+    max: 2e3,
+    // TODO: decide upper limit
+    min: l,
+    default: l + 1
+  }, n;
+};
+function he(e) {
+  return /* @__PURE__ */ i(
+    "style",
+    {
+      dangerouslySetInnerHTML: { __html: e.styles },
+      "data-id": e.id,
+      nonce: e.nonce
+    }
+  );
+}
+function Se(e) {
+  function t() {
+    const o = k({
+      block: e.block,
+      localState: e.context.localState,
+      rootState: e.context.rootState,
+      rootSetState: e.context.rootSetState,
+      context: e.context.context,
+      shouldEvaluateBindings: !0
+    });
+    return v(o.hide) ? !o.hide : v(o.show) ? o.show : !0;
+  }
+  function n() {
+    var E, A, $;
+    const o = k({
+      block: e.block,
+      localState: e.context.localState,
+      rootState: e.context.rootState,
+      rootSetState: e.context.rootSetState,
+      context: e.context.context,
+      shouldEvaluateBindings: !0
+    }), r = o.responsiveStyles, l = e.context.content, s = me(
+      ((E = l == null ? void 0 : l.meta) == null ? void 0 : E.breakpoints) || {}
+    ), c = r == null ? void 0 : r.large, u = r == null ? void 0 : r.medium, f = r == null ? void 0 : r.small, h = o.id;
+    if (!h)
+      return "";
+    const a = c ? x({
+      className: h,
+      styles: c
+    }) : "", d = u ? x({
+      className: h,
+      styles: u,
+      mediaQuery: O(
+        "medium",
+        s
+      )
+    }) : "", S = f ? x({
+      className: h,
+      styles: f,
+      mediaQuery: O(
+        "small",
+        s
+      )
+    }) : "", m = o.animations && o.animations.find((b) => b.trigger === "hover");
+    let R = "";
+    if (m) {
+      const b = (($ = (A = m.steps) == null ? void 0 : A[1]) == null ? void 0 : $.styles) || {};
+      R = x({
+        className: `${h}:hover`,
+        styles: {
+          ...b,
+          transition: `all ${m.duration}s ${C(
+            m.easing
+          )}`,
+          transitionDelay: m.delay ? `${m.delay}s` : "0s"
+        }
+      }) || "";
+    }
+    return [
+      a,
+      d,
+      S,
+      R
+    ].join(" ");
+  }
+  return /* @__PURE__ */ i(y, { children: n() && t() ? /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
+    he,
+    {
+      id: "builderio-block",
+      styles: n(),
+      nonce: e.context.nonce
+    }
+  ) }) : null });
+}
+function ye(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+const ge = (e) => `on${ye(e)}`, xe = (e, t) => (n) => w({
+  code: e,
+  context: t.context,
+  localState: t.localState,
+  rootState: t.rootState,
+  rootSetState: t.rootSetState,
+  event: n,
+  isExpression: !1,
+  enableCache: !0
+});
+function _(e) {
+  var o;
+  const t = {}, n = (o = e.block.actions) != null ? o : {};
+  for (const r in n) {
+    if (!n.hasOwnProperty(r))
+      continue;
+    const l = n[r];
+    let s = ge(r);
+    if (e.stripPrefix)
+      switch (P) {
+        case "vue":
+          s = s.replace("v-on:", "");
+          break;
+        case "svelte":
+          s = s.replace("on:", "");
+          break;
+      }
+    t[s] = xe(l, e);
+  }
+  return t;
+}
+function ke({
+  properties: e
+}) {
+  return e;
+}
+const Ce = (e) => ({
+  href: e.href
+});
+function I({
+  block: e,
+  context: t
+}) {
+  var o;
+  const n = {
+    ...Ce(e),
+    ...e.properties,
+    "builder-id": e.id,
+    style: le({
+      block: e,
+      context: t
+    }),
+    [Z()]: [e.id, "builder-block", e.class, (o = e.properties) == null ? void 0 : o.class].filter(Boolean).join(" ")
+  };
+  return ke({
+    properties: n,
+    context: t,
+    block: e
+  });
+}
+function pe(e) {
+  return /* @__PURE__ */ i(
+    J,
+    {
+      TagName: e.Wrapper,
+      attributes: I({
+        block: e.block,
+        context: e.context
+      }),
+      actionAttributes: _({
+        block: e.block,
+        rootState: e.context.rootState,
+        rootSetState: e.context.rootSetState,
+        localState: e.context.localState,
+        context: e.context.context,
+        stripPrefix: !0
+      }),
+      children: e.children
+    }
+  );
+}
+function be(e) {
+  function t() {
+    return e.includeBlockProps ? {
+      ...I({
+        block: e.block,
+        context: e.context
+      }),
+      ..._({
+        block: e.block,
+        rootState: e.context.rootState,
+        rootSetState: e.context.rootSetState,
+        localState: e.context.localState,
+        context: e.context.context
+      })
+    } : {};
+  }
+  return /* @__PURE__ */ i(e.Wrapper, { ...e.wrapperProps, attributes: t(), children: e.children });
+}
+const Be = ({
+  componentOptions: e,
+  builderBlock: t,
+  context: n,
+  componentRef: o,
+  includeBlockProps: r,
+  isInteractive: l,
+  contextValue: s
+}) => {
+  const c = {
+    ...e,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...r ? {
+      attributes: I({
+        block: t,
+        context: s
+      })
+    } : {}
+  };
+  return l ? {
+    Wrapper: o,
+    block: t,
+    context: n,
+    wrapperProps: e,
+    includeBlockProps: r
+  } : c;
+};
+function T(e) {
+  var o;
+  const [t, n] = j(
+    () => e.isInteractive ? be : e.componentRef
+  );
+  return /* @__PURE__ */ i(y, { children: e.componentRef ? /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
+    t,
+    {
+      ...Be({
+        componentOptions: e.componentOptions,
+        builderBlock: e.builderBlock,
+        context: e.context,
+        componentRef: e.componentRef,
+        linkComponent: e.linkComponent,
+        includeBlockProps: e.includeBlockProps,
+        isInteractive: e.isInteractive,
+        contextValue: e.context
+      }),
+      children: (o = e.blockChildren) == null ? void 0 : o.map((r) => /* @__PURE__ */ i(
+        p,
+        {
+          block: r,
+          context: e.context,
+          registeredComponents: e.registeredComponents,
+          linkComponent: e.linkComponent
+        },
+        r.id
+      ))
+    }
+  ) }) : null });
+}
+function ve(e) {
+  const [t, n] = j(() => e.repeatContext);
+  return /* @__PURE__ */ i(D.Provider, { value: t, children: /* @__PURE__ */ i(
+    p,
+    {
+      block: e.block,
+      context: t,
+      registeredComponents: e.registeredComponents,
+      linkComponent: e.linkComponent
+    }
+  ) });
+}
+function p(e) {
+  var u, f, h;
+  function t() {
+    return se({
+      block: e.block,
+      context: e.context,
+      registeredComponents: e.registeredComponents
+    });
+  }
+  function n() {
+    return ie({
+      block: e.block,
+      context: e.context
+    });
+  }
+  function o() {
+    var a;
+    return (a = e.block.repeat) != null && a.collection ? e.block : k({
+      block: e.block,
+      localState: e.context.localState,
+      rootState: e.context.rootState,
+      rootSetState: e.context.rootSetState,
+      context: e.context.context,
+      shouldEvaluateBindings: !0
+    });
+  }
+  function r() {
+    var d;
+    return e.block.tagName === "a" || ((d = o().properties) == null ? void 0 : d.href) || o().href ? e.linkComponent || "a" : e.block.tagName || "div";
+  }
+  function l() {
+    var S, m;
+    if ((S = e.block.repeat) != null && S.collection)
+      return !!((m = n == null ? void 0 : n()) != null && m.length);
+    const a = "hide" in o() ? o().hide : !1;
+    return ("show" in o() ? o().show : !0) && !a;
+  }
+  function s() {
+    var d, S;
+    return !((d = t == null ? void 0 : t()) != null && d.component) && !n() ? (S = o().children) != null ? S : [] : [];
+  }
+  function c() {
+    var a, d, S, m;
+    return {
+      blockChildren: (a = o().children) != null ? a : [],
+      componentRef: (d = t == null ? void 0 : t()) == null ? void 0 : d.component,
+      componentOptions: {
+        ...q(o()),
+        ...de(t(), o()),
+        ...fe(t(), e.context),
+        ...ae(t(), e.linkComponent),
+        ...ue(
+          t(),
+          e.registeredComponents
+        )
+      },
+      context: e.context,
+      linkComponent: e.linkComponent,
+      registeredComponents: e.registeredComponents,
+      builderBlock: o(),
+      includeBlockProps: ((S = t == null ? void 0 : t()) == null ? void 0 : S.noWrap) === !0,
+      isInteractive: !((m = t == null ? void 0 : t()) != null && m.isRSC && P === "rsc")
+    };
+  }
+  return V(() => {
+    const a = o().id, d = o().animations;
+    d && a && Y(
+      d.map((S) => ({
+        ...S,
+        elementId: a
+      }))
+    );
+  }, []), /* @__PURE__ */ i(y, { children: l() ? /* @__PURE__ */ B(y, { children: [
+    /* @__PURE__ */ i(Se, { block: e.block, context: e.context }),
+    (u = t == null ? void 0 : t()) != null && u.noWrap ? /* @__PURE__ */ i(y, { children: /* @__PURE__ */ i(
+      T,
+      {
+        componentRef: c().componentRef,
+        componentOptions: c().componentOptions,
+        blockChildren: c().blockChildren,
+        context: c().context,
+        registeredComponents: c().registeredComponents,
+        linkComponent: c().linkComponent,
+        builderBlock: c().builderBlock,
+        includeBlockProps: c().includeBlockProps,
+        isInteractive: c().isInteractive
+      }
+    ) }) : /* @__PURE__ */ i(y, { children: n() ? /* @__PURE__ */ i(y, { children: (h = n()) == null ? void 0 : h.map((a, d) => /* @__PURE__ */ i(
+      ve,
+      {
+        repeatContext: a.context,
+        block: a.block,
+        registeredComponents: e.registeredComponents,
+        linkComponent: e.linkComponent
+      },
+      d
+    )) }) : /* @__PURE__ */ B(
+      pe,
+      {
+        Wrapper: r(),
+        block: o(),
+        context: e.context,
+        children: [
+          /* @__PURE__ */ i(
+            T,
+            {
+              componentRef: c().componentRef,
+              componentOptions: c().componentOptions,
+              blockChildren: c().blockChildren,
+              context: c().context,
+              registeredComponents: c().registeredComponents,
+              linkComponent: c().linkComponent,
+              builderBlock: c().builderBlock,
+              includeBlockProps: c().includeBlockProps,
+              isInteractive: c().isInteractive
+            }
+          ),
+          (f = s()) == null ? void 0 : f.map((a) => /* @__PURE__ */ i(
+            p,
+            {
+              block: a,
+              registeredComponents: e.registeredComponents,
+              linkComponent: e.linkComponent,
+              context: e.context
+            },
+            a.id
+          ))
+        ]
+      }
+    ) })
+  ] }) : null });
+}
+function Pe(e) {
+  function t() {
+    var r;
+    return "builder-blocks" + ((r = e.blocks) != null && r.length ? "" : " no-blocks");
+  }
+  function n() {
+    var r, l;
+    N() && !((r = e.blocks) != null && r.length) && ((l = window.parent) == null || l.postMessage(
+      {
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: e.parent,
+          dataPath: e.path
+        }
+      },
+      "*"
+    ));
+  }
+  function o() {
+    var r, l;
+    N() && !((r = e.blocks) != null && r.length) && ((l = window.parent) == null || l.postMessage(
+      {
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: e.parent,
+          dataPath: e.path
+        }
+      },
+      "*"
+    ));
+  }
+  return /* @__PURE__ */ B(y, { children: [
+    /* @__PURE__ */ i(
+      e.BlocksWrapper,
+      {
+        className: t() + " props-blocks-wrapper-7cd1560e",
+        "builder-path": e.path,
+        "builder-parent-id": e.parent,
+        style: e.styleProp,
+        onClick: (r) => n(),
+        onMouseEnter: (r) => o(),
+        onKeyPress: (r) => n(),
+        ...e.BlocksWrapperProps,
+        children: e.children
+      }
+    ),
+    /* @__PURE__ */ i("style", { children: `.props-blocks-wrapper-7cd1560e {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}` })
+  ] });
+}
+function we(e) {
+  var o, r, l;
+  const t = W(D), n = W(Q);
+  return /* @__PURE__ */ i(
+    Pe,
+    {
+      blocks: e.blocks,
+      parent: e.parent,
+      path: e.path,
+      styleProp: e.styleProp,
+      BlocksWrapper: ((o = e.context) == null ? void 0 : o.BlocksWrapper) || t.BlocksWrapper,
+      BlocksWrapperProps: ((r = e.context) == null ? void 0 : r.BlocksWrapperProps) || t.BlocksWrapperProps,
+      children: e.blocks ? /* @__PURE__ */ i(y, { children: (l = e.blocks) == null ? void 0 : l.map((s) => /* @__PURE__ */ i(
+        p,
+        {
+          block: s,
+          linkComponent: e.linkComponent,
+          context: e.context || t,
+          registeredComponents: e.registeredComponents || n.registeredComponents
+        },
+        s.id
+      )) }) : null
+    }
+  );
+}
+const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: we
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  p as Block,
+  we as Blocks,
+  Q as ComponentsContext,
+  he as InlinedStyles,
+  Oe as blocks,
+  M as fastClone,
+  me as getSizesForBreakpoints,
+  ce as mapStyleObjToStrIfNeeded,
+  te as triggerAnimation
+};