@webstudio-is/sdk-components-react 0.200.0 → 0.202.0

package/lib/fragment.ws.js

@@ -1,11 +1,10 @@
-const t = {
+const o = {
   type: "container",
-  icon: "",
-  stylable: !1
-}, e = {
+  icon: ""
+}, t = {
   props: {}
 };
 export {
-  t as meta,
-  e as propsMeta
+  o as meta,
+  t as propsMeta
 };

package/lib/head-link.ws.js

@@ -1,20 +1,19 @@
 import { ResourceIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as e } from "./__generated__/head-link.props.js";
-const a = {
+import { props as t } from "./__generated__/head-link.props.js";
+const p = {
   category: "hidden",
   icon: o,
   type: "container",
-  stylable: !1,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
   }
-}, p = {
-  props: e,
+}, a = {
+  props: t,
   initialProps: ["rel", "hrefLang", "href", "type", "as"]
 };
 export {
-  a as meta,
-  p as propsMeta
+  p as meta,
+  a as propsMeta
 };

package/lib/head-meta.ws.js

@@ -5,16 +5,15 @@ const p = {
   category: "hidden",
   icon: o,
   type: "container",
-  stylable: !1,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
   }
-}, a = {
+}, i = {
   props: t,
   initialProps: ["name", "property", "content"]
 };
 export {
   p as meta,
-  a as propsMeta
+  i as propsMeta
 };

package/lib/head-slot.ws.js

@@ -1,10 +1,9 @@
-import { HeaderIcon as t } from "@webstudio-is/icons/svg";
+import { HeaderIcon as o } from "@webstudio-is/icons/svg";
 import "@webstudio-is/sdk";
-import { props as e } from "./__generated__/head.props.js";
+import { props as t } from "./__generated__/head.props.js";
 const r = {
-  icon: t,
+  icon: o,
   type: "container",
-  stylable: !1,
   description: "Inserts children into the head of the document",
   constraints: [
     {
@@ -17,7 +16,7 @@ const r = {
     }
   ]
 }, a = {
-  props: e,
+  props: t,
   initialProps: []
 };
 export {

package/lib/head-title.ws.js

@@ -5,15 +5,14 @@ const p = {
   category: "hidden",
   icon: o,
   type: "container",
-  stylable: !1,
   constraints: {
     relation: "parent",
     component: { $eq: "HeadSlot" }
   }
-}, a = {
+}, i = {
   props: t
 };
 export {
   p as meta,
-  a as propsMeta
+  i as propsMeta
 };

package/lib/slot.ws.js

@@ -1,15 +1,14 @@
 import { SlotComponentIcon as t } from "@webstudio-is/icons/svg";
-const o = {
+const e = {
   category: "general",
   type: "container",
   description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
   icon: t,
-  stylable: !1,
   order: 5
 }, n = {
   props: {}
 };
 export {
-  o as meta,
+  e as meta,
   n as propsMeta
 };

package/lib/xml-node.ws.js

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

package/lib/xml-time.ws.js

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

package/lib/youtube.js

@@ -1,134 +1,140 @@
-import { jsx as u, jsxs as _, Fragment as R } from "react/jsx-runtime";
-import { forwardRef as C, useState as f, useContext as I, useEffect as y } from "react";
-import { ReactSdkContext as L } from "@webstudio-is/react-sdk/runtime";
+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) => {
   if (e)
     try {
-      const a = new URL(e);
-      return a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
+      const t = new URL(e);
+      return t.pathname === "/embed" ? void 0 : t.hostname === "youtu.be" ? t.pathname.slice(1) : t.searchParams.get("v") || t.pathname.split("/").pop();
     } catch {
       return e;
     }
-}, S = (e, a) => {
-  var r, s;
-  const o = k(e.url);
-  if (!o)
-    return;
-  const c = new URL(`${a}/embed/${o}`), l = Object.keys(e), t = {};
-  for (const n of l)
-    switch (n) {
+}, S = (e, t) => {
+  var n, i;
+  const l = k(e.url), r = new URL(t);
+  if (l)
+    r.pathname = `/embed/${l}`;
+  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":
-        t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
+        a.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (a.mute = "1");
         break;
       case "muted":
-        t.mute = e.muted ? "1" : "0";
+        a.mute = e.muted ? "1" : "0";
         break;
       case "showControls":
-        t.controls = e.showControls ? "1" : "0";
+        a.controls = e.showControls ? "1" : "0";
         break;
       case "showRelatedVideos":
-        t.rel = e.showRelatedVideos ? "1" : "0";
+        a.rel = e.showRelatedVideos ? "1" : "0";
         break;
       case "keyboard":
-        t.keyboard = e.keyboard ? "1" : "0";
+        a.keyboard = e.keyboard ? "1" : "0";
         break;
       case "loop":
-        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = o);
+        a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = l);
         break;
       case "inline":
-        t.playsinline = e.inline ? "1" : "0";
+        a.playsinline = e.inline ? "1" : "0";
         break;
       case "allowFullscreen":
-        t.fs = e.allowFullscreen ? "1" : "0";
+        a.fs = e.allowFullscreen ? "1" : "0";
         break;
       case "captionLanguage":
-        t.cc_lang_pref = e.captionLanguage;
+        a.cc_lang_pref = e.captionLanguage;
         break;
       case "showCaptions":
-        t.cc_load_policy = e.showCaptions ? "1" : "0";
+        a.cc_load_policy = e.showCaptions ? "1" : "0";
         break;
       case "showAnnotations":
-        t.iv_load_policy = e.showAnnotations ? "1" : "3";
+        a.iv_load_policy = e.showAnnotations ? "1" : "3";
         break;
       case "startTime":
-        t.start = (r = e.startTime) == null ? void 0 : r.toString();
+        a.start = (n = e.startTime) == null ? void 0 : n.toString();
         break;
       case "endTime":
-        t.end = (s = e.endTime) == null ? void 0 : s.toString();
+        a.end = (i = e.endTime) == null ? void 0 : i.toString();
         break;
       case "disableKeyboard":
-        t.disablekb = e.disableKeyboard ? "1" : "0";
+        a.disablekb = e.disableKeyboard ? "1" : "0";
         break;
       case "language":
-        t.hl = e.language;
+        a.hl = e.language;
         break;
       case "listId":
-        t.list = e.listId;
+        a.list = e.listId;
         break;
       case "listType":
-        t.listType = e.listType;
+        a.listType = e.listType;
         break;
       case "color":
-        t.color = e.color;
+        a.color = e.color;
         break;
       case "origin":
-        t.origin = e.origin;
+        a.origin = e.origin;
         break;
       case "referrer":
-        t.widget_referrer = e.referrer;
+        a.widget_referrer = e.referrer;
         break;
       case "playlist":
-        t.playlist = e.playlist;
+        a.playlist = e.playlist;
         break;
     }
-  return Object.entries(t).forEach(([n, i]) => {
-    i !== void 0 && c.searchParams.append(n, i.toString());
-  }), c.toString();
-}, h = (e) => {
-  const a = document.createElement("link");
-  a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
+  return Object.entries(a).forEach(([c, s]) => {
+    s !== void 0 && r.searchParams.append(c, s.toString());
+  }), r.toString();
+}, p = (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)) {
     try {
-      const a = new URL(e);
-      h(a.origin);
+      const t = new URL(e);
+      p(t.origin);
     } catch {
     }
-    h(w), g = !0;
+    p(w), g = !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 = ({
   title: e,
-  status: a,
-  loading: o,
-  videoUrl: c,
-  previewImageUrl: l,
-  autoplay: t,
-  renderer: r,
-  showPreview: s,
-  onStatusChange: n,
-  onPreviewImageUrlChange: i
+  status: t,
+  loading: l,
+  videoUrl: r,
+  previewImageUrl: o,
+  autoplay: a,
+  renderer: n,
+  showPreview: i,
+  onStatusChange: c,
+  onPreviewImageUrlChange: s
 }) => {
-  const [m, b] = f(0);
+  const [m, b] = h(0);
   return y(() => {
-    t && r !== "canvas" && a === "initial" && n("loading");
-  }, [t, a, r, n]), y(() => {
-    r !== "canvas" && T(c);
-  }, [r, c]), y(() => {
-    const d = k(c);
-    if (!d || !s) {
-      i(void 0);
+    a && n !== "canvas" && t === "initial" && c("loading");
+  }, [a, t, n, c]), y(() => {
+    n !== "canvas" && T(r);
+  }, [n, r]), y(() => {
+    const d = k(r);
+    if (!d || !i) {
+      s(void 0);
       return;
     }
-    l || i(j(d));
-  }, [i, s, c, l]), r === "canvas" || a === "initial" ? null : /* @__PURE__ */ u(
+    o || s(j(d));
+  }, [s, i, r, o]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
     "iframe",
     {
       title: e,
-      src: c,
-      loading: o,
+      src: r,
+      loading: l,
       allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
       allowFullScreen: !0,
       style: {
@@ -140,23 +146,23 @@ const T = (e) => {
         border: "none"
       },
       onLoad: () => {
-        n("ready"), b(1);
+        c("ready"), b(1);
       }
     }
   );
-}, P = C(
+}, P = L(
   ({
     url: e,
-    loading: a = "lazy",
-    autoplay: o,
-    showPreview: c,
-    children: l,
-    privacyEnhancedMode: t,
-    ...r
-  }, s) => {
-    const [n, i] = f("initial"), [m, b] = f(), { renderer: d } = I(L), v = t ?? !0 ? O : x, p = S(
+    loading: t = "lazy",
+    autoplay: l,
+    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(
       {
-        ...r,
+        ...n,
         url: e,
         autoplay: !0
       },
@@ -166,26 +172,26 @@ const T = (e) => {
       E.Provider,
       {
         value: {
-          status: n,
+          status: c,
           previewImageUrl: m,
           onInitPlayer() {
-            d !== "canvas" && i("loading");
+            d !== "canvas" && s("loading");
           }
         },
-        children: /* @__PURE__ */ u("div", { ...r, ref: s, children: p ? /* @__PURE__ */ _(R, { children: [
-          l,
+        children: /* @__PURE__ */ u("div", { ...n, ref: i, children: f ? /* @__PURE__ */ R(_, { children: [
+          o,
           /* @__PURE__ */ u(
             N,
             {
-              title: r.title,
-              autoplay: o,
-              videoUrl: p,
+              title: n.title,
+              autoplay: l,
+              videoUrl: f,
               previewImageUrl: m,
-              loading: a,
-              showPreview: c,
+              loading: t,
+              showPreview: r,
               renderer: d,
-              status: n,
-              onStatusChange: i,
+              status: c,
+              onStatusChange: s,
               onPreviewImageUrlChange: b
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.200.0",
+  "version": "0.202.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.1",
     "micromark-extension-gfm-table": "^2.1.0",
-    "@webstudio-is/icons": "0.200.0",
-    "@webstudio-is/image": "0.200.0",
-    "@webstudio-is/sdk": "0.200.0",
-    "@webstudio-is/react-sdk": "0.200.0"
+    "@webstudio-is/image": "0.202.0",
+    "@webstudio-is/sdk": "0.202.0",
+    "@webstudio-is/icons": "0.202.0",
+    "@webstudio-is/react-sdk": "0.202.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -61,9 +61,9 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^3.0.2",
-    "@webstudio-is/sdk-cli": "0.94.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.200.0",
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.202.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {