@webstudio-is/sdk-components-react 0.0.0-588fe22 → 0.0.0-7cb4145

package/lib/webhook-form.template.js

@@ -1,42 +1,81 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { Variable as s, $ as e, expression as o, ActionValue as i, PlaceholderValue as a } from "@webstudio-is/template";
-const n = new s("formState", "initial"), w = {
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { $ as r, ActionValue as i, ws as e, PlaceholderValue as a, css as n, Variable as w, expression as l } from "@webstudio-is/template";
+const s = new w("formState", "initial"), d = {
   category: "data",
   order: 1,
   description: "Collect user data and send it to any webhook.",
-  template: /* @__PURE__ */ r(
-    e.Form,
+  template: /* @__PURE__ */ o(
+    r.Form,
     {
-      state: o`${n}`,
-      onStateChange: new i(["state"], o`${n} = state`),
+      state: l`${s}`,
+      onStateChange: new i(["state"], l`${s} = state`),
       children: [
-        /* @__PURE__ */ r(
-          e.Box,
+        /* @__PURE__ */ o(
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Form Content",
-            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            "ws:show": l`${s} === 'initial' || ${s} === 'error'`,
             children: [
-              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
-              /* @__PURE__ */ t(e.Input, { name: "name" }),
-              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
-              /* @__PURE__ */ t(e.Input, { name: "email" }),
-              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Name")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "name"
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Email")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "email"
+                }
+              ),
+              /* @__PURE__ */ t(e.element, { "ws:tag": "button", children: new a("Submit") })
             ]
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Success Message",
-            "ws:show": o`${n} === 'success'`,
+            "ws:show": l`${s} === 'success'`,
             children: new a("Thank you for getting in touch!")
           }
         ),
         /* @__PURE__ */ t(
-          e.Box,
+          e.element,
           {
+            "ws:tag": "div",
             "ws:label": "Error Message",
-            "ws:show": o`${n} === 'error'`,
+            "ws:show": l`${s} === 'error'`,
             children: new a("Sorry, something went wrong.")
           }
         )
@@ -45,5 +84,5 @@ const n = new s("formState", "initial"), w = {
   )
 };
 export {
-  w as meta
+  d as meta
 };

package/lib/webhook-form.ws.js

@@ -1,26 +1,27 @@
 import { WebhookFormIcon as o } from "@webstudio-is/icons/svg";
-import { form as t } from "@webstudio-is/sdk/normalize.css";
-import { props as e } from "./__generated__/webhook-form.props.js";
-const n = {
+import { form as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/webhook-form.props.js";
+const c = {
   label: "Webhook Form",
   icon: o,
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Form", "Button", "Link"] }
-  },
   presetStyle: {
-    form: t
+    form: e
   },
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
-  ]
-}, c = {
-  props: e,
-  initialProps: ["id", "className", "state", "action"]
+  ],
+  initialProps: ["id", "class", "state", "action"],
+  props: {
+    ...r,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: !1
+    }
+  }
 };
 export {
-  n as meta,
-  c as propsMeta
+  c as meta
 };

package/lib/xml-node.js

@@ -1,14 +1,14 @@
 import { jsxs as t, jsx as r, Fragment as u } from "react/jsx-runtime";
 import { ReactSdkContext as g, xmlNodeTagSuffix as x } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as b, useContext as N, createElement as C, Children as F } from "react";
+import { forwardRef as b, useContext as C, createElement as N, Children as F } from "react";
 const j = b(
   ({ tag: c = "", children: l, ...i }, d) => {
-    const { renderer: p } = N(g), o = Object.entries(i).filter(
+    const { renderer: p } = C(g), o = Object.entries(i).filter(
       ([e]) => e.startsWith("data-") === !1 && e.startsWith("aria-") === !1
     ).filter(([e]) => e.toLowerCase() !== "tabindex").filter(([, e]) => typeof e != "function"), s = c.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "").trim();
     if (p === void 0) {
       const e = Object.fromEntries(o);
-      return C(
+      return N(
         `${s}${x}`,
         e,
         l
@@ -24,7 +24,7 @@ const j = b(
         '"'
       ] })
     ] }, y));
-    return /* @__PURE__ */ t("div", { ...i, children: [
+    return /* @__PURE__ */ t("div", { ...i, style: { backgroundColor: "rgba(255,255,255,1)" }, children: [
       /* @__PURE__ */ t("span", { children: [
         /* @__PURE__ */ t("span", { style: { color: "#800000" }, children: [
           "<",

package/lib/xml-node.ws.js

@@ -1,16 +1,13 @@
 import { XmlIcon as o } from "@webstudio-is/icons/svg";
 import { props as r } from "./__generated__/xml-node.props.js";
-const e = {
+const m = {
   category: "xml",
   order: 6,
-  type: "container",
   icon: o,
-  description: "XML Node"
-}, i = {
-  props: r,
-  initialProps: ["tag"]
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: r
 };
 export {
-  e as meta,
-  i as propsMeta
+  m as meta
 };

package/lib/xml-time.ws.js

@@ -2,15 +2,12 @@ import { CalendarIcon as t } from "@webstudio-is/icons/svg";
 import { props as e } from "./__generated__/xml-time.props.js";
 const a = {
   category: "xml",
-  type: "container",
   description: "Converts machine-readable date and time to ISO format.",
   icon: t,
-  order: 7
-}, i = {
-  props: e,
-  initialProps: ["datetime", "dateStyle"]
+  order: 7,
+  initialProps: ["datetime", "dateStyle"],
+  props: e
 };
 export {
-  a as meta,
-  i as propsMeta
+  a as meta
 };

package/lib/youtube.js

@@ -1,8 +1,8 @@
-import { jsx as u, jsxs as R, Fragment as _ } from "react/jsx-runtime";
-import { forwardRef as L, useState as h, useContext as C, useEffect as y } from "react";
-import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
-import { VimeoContext as E } from "./vimeo.js";
-const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
+import { jsx as u, jsxs as E, Fragment as O } from "react/jsx-runtime";
+import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as y } from "react";
+import { ReactSdkContext as A } from "@webstudio-is/react-sdk/runtime";
+import { VideoContext as N, requestFullscreen as P } from "./shared/video.js";
+const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j = "https://img.youtube.com", L = (e) => {
   if (e)
     try {
       const t = new URL(e);
@@ -10,197 +10,218 @@ const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w =
     } catch {
       return e;
     }
-}, S = (e, t) => {
-  var n, i;
-  const l = k(e.url), r = new URL(t);
-  if (l)
-    r.pathname = `/embed/${l}`;
+}, D = (e, t) => {
+  var o, n;
+  const s = L(e.url), r = new URL(t);
+  if (s)
+    r.pathname = `/embed/${s}`;
   else if (e.url)
     try {
       const c = new URL(e.url);
       r.pathname = c.pathname, r.search = c.search;
     } catch {
     }
-  const o = Object.keys(e), a = {};
-  for (const c of o)
-    switch (c) {
-      case "autoplay":
-        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
-        break;
-      case "muted":
-        a.mute = e.muted ? "1" : "0";
-        break;
-      case "showControls":
-        a.controls = e.showControls ? "1" : "0";
-        break;
-      case "showRelatedVideos":
-        a.rel = e.showRelatedVideos ? "1" : "0";
-        break;
-      case "keyboard":
-        a.keyboard = e.keyboard ? "1" : "0";
-        break;
-      case "loop":
-        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
-        break;
-      case "inline":
-        a.playsinline = e.inline ? "1" : "0";
-        break;
-      case "allowFullscreen":
-        a.fs = e.allowFullscreen ? "1" : "0";
-        break;
-      case "captionLanguage":
-        a.cc_lang_pref = e.captionLanguage;
-        break;
-      case "showCaptions":
-        a.cc_load_policy = e.showCaptions ? "1" : "0";
-        break;
-      case "showAnnotations":
-        a.iv_load_policy = e.showAnnotations ? "1" : "3";
-        break;
-      case "startTime":
-        a.start = (n = e.startTime) == null ? void 0 : n.toString();
-        break;
-      case "endTime":
-        a.end = (i = e.endTime) == null ? void 0 : i.toString();
-        break;
-      case "disableKeyboard":
-        a.disablekb = e.disableKeyboard ? "1" : "0";
-        break;
-      case "language":
-        a.hl = e.language;
-        break;
-      case "listId":
-        a.list = e.listId;
-        break;
-      case "listType":
-        a.listType = e.listType;
-        break;
-      case "color":
-        a.color = e.color;
-        break;
-      case "origin":
-        a.origin = e.origin;
-        break;
-      case "referrer":
-        a.widget_referrer = e.referrer;
-        break;
-      case "playlist":
-        a.playlist = e.playlist;
-        break;
-    }
-  return Object.entries(a).forEach(([c, s]) => {
-    s !== void 0 && r.searchParams.append(c, s.toString());
+  const i = Object.keys(e), a = {};
+  a.autoplay = "1";
+  for (const c of i)
+    if (e[c] !== void 0)
+      switch (c) {
+        case "autoplay":
+          e.autoplay && e.muted === void 0 && (a.mute = "1");
+          break;
+        case "muted":
+          a.mute = e.muted ? "1" : "0";
+          break;
+        case "showControls":
+          a.controls = e.showControls ? "1" : "0";
+          break;
+        case "showRelatedVideos":
+          a.rel = e.showRelatedVideos ? "1" : "0";
+          break;
+        case "keyboard":
+          a.keyboard = e.keyboard ? "1" : "0";
+          break;
+        case "loop":
+          a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = s);
+          break;
+        case "inline":
+          a.playsinline = e.inline ? "1" : "0";
+          break;
+        case "allowFullscreen":
+          a.fs = e.allowFullscreen ? "1" : "0";
+          break;
+        case "captionLanguage":
+          a.cc_lang_pref = e.captionLanguage;
+          break;
+        case "showCaptions":
+          a.cc_load_policy = e.showCaptions ? "1" : "0";
+          break;
+        case "showAnnotations":
+          a.iv_load_policy = e.showAnnotations ? "1" : "3";
+          break;
+        case "startTime":
+          a.start = (o = e.startTime) == null ? void 0 : o.toString();
+          break;
+        case "endTime":
+          a.end = (n = e.endTime) == null ? void 0 : n.toString();
+          break;
+        case "disableKeyboard":
+          a.disablekb = e.disableKeyboard ? "1" : "0";
+          break;
+        case "language":
+          a.hl = e.language;
+          break;
+        case "listId":
+          a.list = e.listId;
+          break;
+        case "listType":
+          a.listType = e.listType;
+          break;
+        case "color":
+          a.color = e.color;
+          break;
+        case "origin":
+          a.origin = e.origin;
+          break;
+        case "referrer":
+          a.widget_referrer = e.referrer;
+          break;
+        case "playlist":
+          a.playlist = e.playlist;
+          break;
+        case "enablejsapi":
+          a.enablejsapi = e.enablejsapi ? "1" : "0";
+          break;
+      }
+  return Object.entries(a).forEach(([c, l]) => {
+    l !== void 0 && r.searchParams.append(c, l.toString());
   }), r.toString();
-}, p = (e) => {
+}, R = (e) => {
   const t = document.createElement("link");
   t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
 };
-let g = !1;
-const T = (e) => {
-  if (!(g || window.matchMedia("(hover: none)").matches)) {
+let _ = !1;
+const F = (e) => {
+  if (!(_ || window.matchMedia("(hover: none)").matches)) {
     try {
       const t = new URL(e);
-      p(t.origin);
+      R(t.origin);
     } catch {
     }
-    p(w), g = !0;
+    R(j), _ = !0;
   }
-}, j = (e) => new URL(`${w}/vi/${e}/maxresdefault.jpg`), A = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), N = ({
+}, Y = (e) => new URL(`${j}/vi/${e}/maxresdefault.jpg`), K = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), M = ({
   title: e,
   status: t,
-  loading: l,
+  loading: s,
   videoUrl: r,
-  previewImageUrl: o,
+  previewImageUrl: i,
   autoplay: a,
+  inline: o,
   renderer: n,
-  showPreview: i,
-  onStatusChange: c,
-  onPreviewImageUrlChange: s
+  showPreview: c,
+  onStatusChange: l,
+  onPreviewImageUrlChange: d
 }) => {
-  const [m, b] = h(0);
+  const [h, m] = p(0), b = T(null);
   return y(() => {
-    a && n !== "canvas" && t === "initial" && c("loading");
-  }, [a, t, n, c]), y(() => {
-    n !== "canvas" && T(r);
+    a && n !== "canvas" && t === "initial" && l("loading");
+  }, [a, t, n, l]), y(() => {
+    n !== "canvas" && F(r);
   }, [n, r]), y(() => {
-    const d = k(r);
-    if (!d || !i) {
-      s(void 0);
+    const f = L(r);
+    if (!f || !c) {
+      d(void 0);
       return;
     }
-    o || s(j(d));
-  }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
+    i || d(Y(f));
+  }, [d, c, r, i]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
     "iframe",
     {
+      ref: b,
       title: e,
       src: r,
-      loading: l,
+      loading: s,
       allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
       allowFullScreen: !0,
       style: {
         position: "absolute",
         width: "100%",
         height: "100%",
-        opacity: m,
+        opacity: h,
         transition: "opacity 1s",
         border: "none"
       },
       onLoad: () => {
-        c("ready"), b(1);
+        l("ready"), m(1), !o && !a && b.current && P(b.current);
       }
     }
   );
-}, P = L(
+}, $ = x(
   ({
     url: e,
     loading: t = "lazy",
-    autoplay: l,
+    autoplay: s,
     showPreview: r,
-    children: o,
-    privacyEnhancedMode: a,
-    ...n
-  }, i) => {
-    const [c, s] = h("initial"), [m, b] = h(), { renderer: d } = C(I), v = a ?? !0 ? O : x, f = S(
+    showAnnotations: i,
+    showCaptions: a,
+    showControls: o,
+    allowFullscreen: n,
+    keyboard: c,
+    children: l,
+    privacyEnhancedMode: d,
+    inline: h = !1,
+    ...m
+  }, b) => {
+    const [f, g] = p("initial"), [w, C] = p(), { renderer: k } = S(A), I = d ?? !0 ? U : V, v = D(
       {
-        ...n,
+        ...m,
+        inline: h,
         url: e,
-        autoplay: !0
+        keyboard: c,
+        showAnnotations: i,
+        showCaptions: a,
+        allowFullscreen: n,
+        showControls: o,
+        autoplay: s,
+        enablejsapi: !1
       },
-      v
+      I
     );
     return /* @__PURE__ */ u(
-      E.Provider,
+      N.Provider,
       {
         value: {
-          status: c,
-          previewImageUrl: m,
+          status: f,
+          previewImageUrl: w,
           onInitPlayer() {
-            d !== "canvas" && s("loading");
+            k !== "canvas" && g("loading");
           }
         },
-        children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
-          o,
+        children: /* @__PURE__ */ u("div", { ...m, ref: b, children: v ? /* @__PURE__ */ E(O, { children: [
+          l,
           /* @__PURE__ */ u(
-            N,
+            M,
             {
-              title: n.title,
-              autoplay: l,
-              videoUrl: f,
-              previewImageUrl: m,
+              title: m.title,
+              autoplay: s,
+              videoUrl: v,
+              previewImageUrl: w,
               loading: t,
+              inline: h,
               showPreview: r,
-              renderer: d,
-              status: c,
-              onStatusChange: s,
-              onPreviewImageUrlChange: b
+              renderer: k,
+              status: f,
+              onStatusChange: g,
+              onPreviewImageUrlChange: C
             }
           )
-        ] }) : /* @__PURE__ */ u(A, {}) })
+        ] }) : /* @__PURE__ */ u(K, {}) })
       }
     );
   }
 );
-P.displayName = "YouTube";
+$.displayName = "YouTube";
 export {
-  P as YouTube
+  $ as YouTube
 };

package/lib/youtube.template.js

@@ -1,13 +1,13 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
-import { $ as e, css as o } from "@webstudio-is/template";
-const p = {
+import { $ as t, css as o, ws as a } from "@webstudio-is/template";
+const d = {
   label: "YouTube",
   category: "media",
   order: 1,
   description: "Add a video to your page that is hosted on YouTube. Paste a YouTube URL and configure the video in the Settings tab.",
   template: /* @__PURE__ */ i(
-    e.YouTube,
+    t.YouTube,
     {
       "ws:label": "YouTube",
       "ws:style": o`
@@ -16,8 +16,8 @@ const p = {
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ t(
-          e.VimeoPreviewImage,
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
           {
             "ws:label": "Preview Image",
             "ws:style": o`
@@ -33,8 +33,8 @@ const p = {
             optimize: !0
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoSpinner,
+        /* @__PURE__ */ e(
+          t.VimeoSpinner,
           {
             "ws:label": "Spinner",
             "ws:style": o`
@@ -46,11 +46,11 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ t(
-          e.VimeoPlayButton,
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
           {
             "ws:label": "Play Button",
             "ws:style": o`
@@ -74,16 +74,17 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ t(
-              e.Box,
+            children: /* @__PURE__ */ e(
+              a.element,
               {
+                "ws:tag": "div",
                 "ws:label": "Play Icon",
                 "ws:style": o`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: l })
               }
             )
           }
@@ -93,5 +94,5 @@ const p = {
   )
 };
 export {
-  p as meta
+  d as meta
 };