@webstudio-is/sdk-components-react 0.218.0 → 0.220.0

package/lib/vimeo.js

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

package/lib/vimeo.ws.js

@@ -2,18 +2,7 @@ import { VimeoIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/sdk";
 import { div as e } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/vimeo.props.js";
-const m = {
-  icon: o,
-  states: t,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
-  },
-  presetStyle: {
-    div: e
-  }
-}, r = [
+const r = [
   "id",
   "className",
   "url",
@@ -31,11 +20,18 @@ const m = {
   "showControls",
   "controlsColor",
   "playsinline"
-], p = {
-  props: i,
-  initialProps: r
+], m = {
+  icon: o,
+  states: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: e },
+  initialProps: r,
+  props: i
 };
 export {
-  m as meta,
-  p as propsMeta
+  m as meta
 };

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

@@ -10,8 +10,8 @@ const c = {
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
-  ]
-}, i = {
+  ],
+  initialProps: ["id", "class", "state", "action"],
   props: {
     ...r,
     action: {
@@ -20,10 +20,8 @@ const c = {
       description: "The URI of a program that processes the information submitted via the form.",
       required: !1
     }
-  },
-  initialProps: ["id", "className", "state", "action"]
+  }
 };
 export {
-  c as meta,
-  i 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,15 +1,13 @@
 import { XmlIcon as o } from "@webstudio-is/icons/svg";
 import { props as r } from "./__generated__/xml-node.props.js";
-const i = {
+const m = {
   category: "xml",
   order: 6,
   icon: o,
-  description: "XML Node"
-}, e = {
-  props: r,
-  initialProps: ["tag"]
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: r
 };
 export {
-  i as meta,
-  e as propsMeta
+  m as meta
 };

package/lib/xml-time.ws.js

@@ -1,15 +1,13 @@
 import { CalendarIcon as t } from "@webstudio-is/icons/svg";
-import { props as o } from "./__generated__/xml-time.props.js";
+import { props as e } from "./__generated__/xml-time.props.js";
 const a = {
   category: "xml",
   description: "Converts machine-readable date and time to ISO format.",
   icon: t,
-  order: 7
-}, i = {
-  props: o,
-  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,7 +1,7 @@
 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 { VimeoContext as N, requestFullscreen as P } from "./vimeo.js";
+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 {

package/lib/youtube.ws.js

@@ -2,18 +2,7 @@ import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as o } from "@webstudio-is/sdk";
 import { div as t } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/youtube.props.js";
-const p = {
-  icon: e,
-  states: o,
-  contentModel: {
-    category: "instance",
-    children: ["instance"],
-    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
-  },
-  presetStyle: {
-    div: t
-  }
-}, n = [
+const n = [
   "id",
   "className",
   "url",
@@ -41,11 +30,18 @@ const p = {
   "language",
   "color",
   "playlist"
-], c = {
-  props: i,
-  initialProps: n
+], d = {
+  icon: e,
+  states: o,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: t },
+  initialProps: n,
+  props: i
 };
 export {
-  p as meta,
-  c as propsMeta
+  d as meta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.218.0",
+  "version": "0.220.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -23,11 +23,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
@@ -49,10 +44,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1",
-    "@webstudio-is/icons": "0.218.0",
-    "@webstudio-is/image": "0.218.0",
-    "@webstudio-is/react-sdk": "0.218.0",
-    "@webstudio-is/sdk": "0.218.0"
+    "@webstudio-is/icons": "0.220.0",
+    "@webstudio-is/image": "0.220.0",
+    "@webstudio-is/react-sdk": "0.220.0",
+    "@webstudio-is/sdk": "0.220.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -62,11 +57,11 @@
     "nanostores": "^0.11.3",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^3.0.8",
-    "@webstudio-is/template": "0.218.0",
-    "@webstudio-is/tsconfig": "1.0.7",
+    "vitest": "^3.1.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-cli": "0.94.0"
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.220.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",