@webstudio-is/sdk-components-react 0.0.0-c1d6247 → 0.0.0-ca00e2a

package/lib/vimeo.js

@@ -1,17 +1,18 @@
-import { jsx as s, jsxs as D, Fragment as F } from "react/jsx-runtime";
-import { colord as z } from "colord";
-import { createContext as T, forwardRef as q, useState as v, useContext as G, useEffect as f } from "react";
+import { jsx as i, jsxs as B, Fragment as D } from "react/jsx-runtime";
+import { colord as q } from "colord";
+import { forwardRef as z, useState as y, useContext as T, useRef as G, useEffect as v } from "react";
 import { ReactSdkContext as H } from "@webstudio-is/react-sdk/runtime";
-const Y = (e) => {
-  if (e.url === void 0)
+import { VideoContext as Y, requestFullscreen as J } from "./shared/video.js";
+const K = (t) => {
+  if (t.url === void 0)
     return;
-  let t;
+  let e;
   try {
-    const o = new URL(e.url);
-    t = new URL(R), t.pathname = `/video${o.pathname}`;
+    const o = new URL(t.url);
+    e = new URL(S), e.pathname = `/video${o.pathname}`;
   } catch {
   }
-  if (t === void 0)
+  if (e === void 0)
     return;
   const a = {
     showPortrait: "portrait",
@@ -24,35 +25,35 @@ const Y = (e) => {
     doNotTrack: "dnt"
   };
   let r;
-  for (r in e) {
-    const o = e[r];
+  for (r in t) {
+    const o = t[r];
     if (r === "url" || o === void 0)
       continue;
-    const i = a[r] ?? r;
-    t.searchParams.append(i, o.toString());
+    const s = a[r] ?? r;
+    e.searchParams.append(s, o.toString());
   }
-  if (t.searchParams.set("autoplay", "true"), typeof e.controlsColor == "string") {
-    const o = z(e.controlsColor).toHex().replace("#", "");
-    t.searchParams.set("color", o);
+  if (e.searchParams.set("autoplay", "true"), typeof t.controlsColor == "string") {
+    const o = q(t.controlsColor).toHex().replace("#", "");
+    e.searchParams.set("color", o);
   }
-  return e.showPortrait && t.searchParams.set("title", "true"), e.showByline && (t.searchParams.set("portrait", "true"), t.searchParams.set("title", "true")), t.toString();
-}, h = (e) => {
-  const t = document.createElement("link");
-  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+  return t.showPortrait && e.searchParams.set("title", "true"), t.showByline && (e.searchParams.set("portrait", "true"), e.searchParams.set("title", "true")), e.toString();
+}, w = (t) => {
+  const e = document.createElement("link");
+  e.rel = "preconnect", e.href = t, e.crossOrigin = "true", document.head.appendChild(e);
 };
-let b = !1;
-const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https://i.vimeocdn.com", K = () => {
-  b || window.matchMedia("(hover: none)").matches || (h(J), h(R), h(U), b = !0);
-}, Q = (e) => {
+let U = !1;
+const Q = "https://f.vimeocdn.com", S = "https://player.vimeo.com", L = "https://i.vimeocdn.com", W = () => {
+  U || window.matchMedia("(hover: none)").matches || (w(Q), w(S), w(L), U = !0);
+}, X = (t) => {
   try {
-    const a = new URL(e).pathname.split("/")[2];
+    const a = new URL(t).pathname.split("/")[2];
     return a === "" || a == null ? void 0 : a;
   } catch {
   }
-}, W = async (e) => {
-  const a = `https://vimeo.com/api/v2/video/${Q(e)}.json`, o = (await (await fetch(a)).json())[0].thumbnail_large, i = o.substr(o.lastIndexOf("/") + 1).split("_")[0], n = new URL(U);
-  return n.pathname = `/video/${i}.webp`, n.searchParams.append("mw", "1100"), n.searchParams.append("mh", "619"), n.searchParams.append("q", "70"), n;
-}, X = () => /* @__PURE__ */ s(
+}, Z = async (t) => {
+  const a = `https://vimeo.com/api/v2/video/${X(t)}.json`, o = (await (await fetch(a)).json())[0].thumbnail_large, s = o.substr(o.lastIndexOf("/") + 1).split("_")[0], n = new URL(L);
+  return n.pathname = `/video/${s}.webp`, n.searchParams.append("mw", "1100"), n.searchParams.append("mh", "619"), n.searchParams.append("q", "70"), n;
+}, ee = () => /* @__PURE__ */ i(
   "div",
   {
     style: {
@@ -65,38 +66,40 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     },
     children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
   }
-), Z = ({
-  title: e,
-  status: t,
+), te = ({
+  title: t,
+  status: e,
   loading: a,
   videoUrl: r,
   previewImageUrl: o,
-  autoplay: i,
+  autoplay: s,
   renderer: n,
-  showPreview: d,
+  showPreview: m,
+  playsinline: f,
   onStatusChange: c,
   onPreviewImageUrlChange: l
 }) => {
-  const [p, u] = v(0);
-  if (f(() => {
-    i && n !== "canvas" && t === "initial" && c("loading");
-  }, [i, t, n, c]), f(() => {
-    n !== "canvas" && K();
-  }, [n]), f(() => {
+  const [u, h] = y(0), d = G(null);
+  if (v(() => {
+    s && n !== "canvas" && e === "initial" && c("loading");
+  }, [s, e, n, c]), v(() => {
+    n !== "canvas" && W();
+  }, [n]), v(() => {
     if (r !== void 0) {
-      if (d === !1) {
+      if (m === !1) {
         l(void 0);
         return;
       }
-      o === void 0 && W(r).then(l).catch(() => {
+      o === void 0 && Z(r).then(l).catch(() => {
         console.error(`Could not load preview image for ${r}`);
       });
     }
-  }, [l, d, r, o]), !(n === "canvas" || t === "initial"))
-    return /* @__PURE__ */ s(
+  }, [l, m, r, o]), !(n === "canvas" || e === "initial"))
+    return /* @__PURE__ */ i(
       "iframe",
       {
-        title: e,
+        ref: d,
+        title: t,
         src: r,
         loading: a,
         allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
@@ -105,35 +108,31 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
           position: "absolute",
           width: "100%",
           height: "100%",
-          opacity: p,
+          opacity: u,
           transition: "opacity 1s",
           border: "none"
         },
         onLoad: () => {
-          c("ready"), u(1);
+          c("ready"), h(1), d.current && !f && !s && J(d.current);
         }
       }
     );
-}, tt = T({
-  onInitPlayer: () => {
-  },
-  status: "initial"
-}), et = q(
+}, re = z(
   ({
-    url: e,
-    loading: t = "lazy",
+    url: t,
+    loading: e = "lazy",
     autoplay: a = !1,
     autopause: r = !0,
     showByline: o = !1,
-    showControls: i = !0,
+    showControls: s = !0,
     doNotTrack: n = !1,
-    keyboard: d = !0,
-    loop: c = !1,
-    muted: l = !1,
-    pip: p = !1,
-    playsinline: u = !0,
-    showPortrait: S = !0,
-    quality: L = "auto",
+    keyboard: m = !0,
+    loop: f = !1,
+    muted: c = !1,
+    pip: l = !1,
+    playsinline: u = !1,
+    showPortrait: h = !0,
+    quality: d = "auto",
     responsive: k = !0,
     speed: E = !1,
     showTitle: _ = !1,
@@ -142,64 +141,65 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     autopip: N,
     controlsColor: O,
     interactiveParams: V,
-    texttrack: $,
-    children: A,
-    ...y
-  }, m) => {
-    const [w, g] = v("initial"), [P, B] = v(), { renderer: C } = G(H), I = Y({
-      url: e,
+    texttrack: F,
+    children: $,
+    ...g
+  }, p) => {
+    const [P, C] = y("initial"), [I, A] = y(), { renderer: R } = T(H), b = K({
+      url: t,
       autoplay: a,
       autopause: r,
-      showControls: i,
+      showControls: s,
       controlsColor: O,
       doNotTrack: n,
       interactiveParams: V,
-      keyboard: d,
-      loop: c,
-      muted: l,
-      pip: p,
+      keyboard: m,
+      loop: f,
+      muted: c,
+      pip: l,
       playsinline: u,
-      quality: L,
+      quality: d,
       responsive: k,
       speed: E,
-      texttrack: $,
+      texttrack: F,
       showTitle: _,
       transparent: j,
-      showPortrait: S,
+      showPortrait: h,
       autopip: N
     });
-    return /* @__PURE__ */ s(
-      tt.Provider,
+    return /* @__PURE__ */ i(
+      Y.Provider,
       {
         value: {
-          status: w,
-          previewImageUrl: P,
+          status: P,
+          previewImageUrl: I,
           onInitPlayer() {
-            C !== "canvas" && g("loading");
+            R !== "canvas" && C("loading");
           }
         },
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ i(
           "div",
           {
-            ...y,
+            ...g,
             ref: (x) => {
-              m !== null && (typeof m == "function" ? m(x) : m.current = x);
+              p !== null && (typeof p == "function" ? p(x) : p.current = x);
             },
-            children: I === void 0 ? /* @__PURE__ */ s(X, {}) : /* @__PURE__ */ D(F, { children: [
-              A,
-              /* @__PURE__ */ s(
-                Z,
+            children: b === void 0 ? /* @__PURE__ */ i(ee, {}) : /* @__PURE__ */ B(D, { children: [
+              $,
+              /* @__PURE__ */ i(
+                te,
                 {
-                  title: y.title,
+                  title: g.title,
                   autoplay: a,
-                  videoUrl: I,
-                  previewImageUrl: P,
-                  loading: t,
+                  playsinline: u,
+                  videoUrl: b,
+                  previewImageUrl: I,
+                  loading: e,
                   showPreview: M,
-                  renderer: C,
-                  status: w,
-                  onStatusChange: g,
-                  onPreviewImageUrlChange: B
+                  renderer: R,
+                  status: P,
+                  onStatusChange: C,
+                  onPreviewImageUrlChange: A
                 }
               )
             ] })
@@ -209,8 +209,7 @@ const J = "https://f.vimeocdn.com", R = "https://player.vimeo.com", U = "https:/
     );
   }
 );
-et.displayName = "Vimeo";
+re.displayName = "Vimeo";
 export {
-  et as Vimeo,
-  tt as VimeoContext
+  re as Vimeo
 };

package/lib/vimeo.ws.js

@@ -1,19 +1,19 @@
 import { VimeoIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
-import { div as r } from "@webstudio-is/sdk/normalize.css";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/vimeo.props.js";
-const n = {
-  div: r
-}, c = {
-  type: "container",
+const m = {
   icon: o,
   states: t,
-  presetStyle: n,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: {
+    div: e
   }
-}, e = [
+}, r = [
   "id",
   "className",
   "url",
@@ -29,12 +29,13 @@ const n = {
   "showByline",
   "showTitle",
   "showControls",
-  "controlsColor"
-], m = {
+  "controlsColor",
+  "playsinline"
+], p = {
   props: i,
-  initialProps: e
+  initialProps: r
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  p as propsMeta
 };

package/lib/webhook-form.template.js

@@ -1,26 +1,26 @@
 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 { $ as e, ActionValue as s, PlaceholderValue as o, Variable as i, expression as a } from "@webstudio-is/template";
+const n = new i("formState", "initial"), w = {
   category: "data",
   order: 1,
   description: "Collect user data and send it to any webhook.",
   template: /* @__PURE__ */ r(
     e.Form,
     {
-      state: o`${n}`,
-      onStateChange: new i(["state"], o`${n} = state`),
+      state: a`${n}`,
+      onStateChange: new s(["state"], a`${n} = state`),
       children: [
         /* @__PURE__ */ r(
           e.Box,
           {
             "ws:label": "Form Content",
-            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            "ws:show": a`${n} === 'initial' || ${n} === 'error'`,
             children: [
-              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
+              /* @__PURE__ */ t(e.Label, { children: new o("Name") }),
               /* @__PURE__ */ t(e.Input, { name: "name" }),
-              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
+              /* @__PURE__ */ t(e.Label, { children: new o("Email") }),
               /* @__PURE__ */ t(e.Input, { name: "email" }),
-              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+              /* @__PURE__ */ t(e.Button, { children: new o("Submit") })
             ]
           }
         ),
@@ -28,16 +28,16 @@ const n = new s("formState", "initial"), w = {
           e.Box,
           {
             "ws:label": "Success Message",
-            "ws:show": o`${n} === 'success'`,
-            children: new a("Thank you for getting in touch!")
+            "ws:show": a`${n} === 'success'`,
+            children: new o("Thank you for getting in touch!")
           }
         ),
         /* @__PURE__ */ t(
           e.Box,
           {
             "ws:label": "Error Message",
-            "ws:show": o`${n} === 'error'`,
-            children: new a("Sorry, something went wrong.")
+            "ws:show": a`${n} === 'error'`,
+            children: new o("Sorry, something went wrong.")
           }
         )
       ]

package/lib/webhook-form.ws.js

@@ -1,26 +1,29 @@
 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,
+}, i = {
+  props: {
+    ...r,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: !1
+    }
+  },
   initialProps: ["id", "className", "state", "action"]
 };
 export {
-  n as meta,
-  c as propsMeta
+  c as meta,
+  i as propsMeta
 };

package/lib/xml-node.ws.js

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

package/lib/xml-time.ws.js

@@ -1,13 +1,12 @@
 import { CalendarIcon as t } from "@webstudio-is/icons/svg";
-import { props as e } from "./__generated__/xml-time.props.js";
+import { props as o } 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,
+  props: o,
   initialProps: ["datetime", "dateStyle"]
 };
 export {