@webstudio-is/sdk-components-react 0.192.0 → 0.194.0

package/lib/body.ws.js

@@ -1,8 +1,8 @@
 import { BodyIcon as o } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { body as e } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/body.props.js";
-const r = {
+import { props as r } from "./__generated__/body.props.js";
+const a = {
   body: [
     ...e,
     {
@@ -14,17 +14,16 @@ const r = {
       value: { type: "keyword", value: "grayscale" }
     }
   ]
-}, l = {
+}, m = {
   type: "container",
   icon: o,
   states: t,
-  presetStyle: r,
-  detachable: !1
-}, m = {
-  props: a,
+  presetStyle: a
+}, y = {
+  props: r,
   initialProps: ["id", "className"]
 };
 export {
-  l as meta,
-  m as propsMeta
+  m as meta,
+  y as propsMeta
 };

package/lib/image.js

@@ -1,40 +1,38 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as v, useContext as x } from "react";
-import { Image as y } from "@webstudio-is/image";
-import { ReactSdkContext as I } from "@webstudio-is/react-sdk/runtime";
-const p = v(
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as l, useContext as u } from "react";
+import { Image as v } from "@webstudio-is/image";
+import { ReactSdkContext as x } from "@webstudio-is/react-sdk/runtime";
+const y = l(
   ({
-    loading: s = "lazy",
-    width: r,
-    height: a,
-    optimize: o = !0,
-    decoding: d,
+    loading: a = "lazy",
+    width: e,
+    height: r,
+    optimize: m = !0,
+    decoding: c,
     // @todo: it's a hack made for the builder and should't be in the runtime at all.
-    $webstudio$canvasOnly$assetId: f,
-    ...t
-  }, l) => {
-    const e = String(t.src ?? ""), { imageLoader: N, renderer: g, assetBaseUrl: m } = x(I);
-    let c = d, n = e;
-    g === "canvas" && (s = "eager", c = "sync", n = f ?? e, r !== void 0 && a !== void 0 && Number.isNaN(r) && Number.isNaN(a) && (o = !1, r = void 0, a = void 0));
-    let i = e;
-    return e.startsWith(m) && (i = e.slice(m.length)), /* @__PURE__ */ u(
-      y,
+    $webstudio$canvasOnly$assetId: d,
+    ...s
+  }, f) => {
+    const o = String(s.src ?? ""), { imageLoader: i, renderer: N } = u(x);
+    let n = c, t = o;
+    return N === "canvas" && (a = "eager", n = "sync", t = d ?? o, e !== void 0 && r !== void 0 && Number.isNaN(e) && Number.isNaN(r) && (m = !1, e = void 0, r = void 0)), /* @__PURE__ */ g(
+      v,
       {
-        loading: s,
-        decoding: c,
-        optimize: o,
-        width: r,
-        height: a,
-        ...t,
-        loader: N,
-        src: i,
-        ref: l
+        loading: a,
+        decoding: n,
+        optimize: m,
+        width: e,
+        height: r,
+        ...s,
+        loader: i,
+        src: o,
+        ref: f
       },
-      n
+      t
     );
   }
 );
-p.displayName = "Image";
+y.displayName = "Image";
 export {
-  p as Image
+  y as Image
 };

package/lib/list-item.ws.js

@@ -4,11 +4,14 @@ import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/list-item.props.js";
 const n = {
   li: o
-}, m = {
+}, c = {
   category: "general",
   type: "container",
   constraints: {
-    relation: "parent",
+    // cannot use parent relation here
+    // because list item can be put inside of collection or slot
+    // perhaps can be eventually fixed with tag matchers
+    relation: "ancestor",
     component: { $eq: "List" }
   },
   description: "Adds a new item to an existing list.",
@@ -29,11 +32,11 @@ const n = {
       ]
     }
   ]
-}, c = {
+}, m = {
   props: i,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
-  c as propsMeta
+  c as meta,
+  m as propsMeta
 };

package/lib/vimeo-play-button.js

@@ -1,12 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as e, useContext as n } from "react";
-import { VimeoContext as m } from "./vimeo.js";
-import { Button as a } from "./button.js";
-const f = e(
-  (o, r) => {
-    const t = n(m);
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r, useContext as a, useCallback as m } from "react";
+import { VimeoContext as s } from "./vimeo.js";
+import { Button as l } from "./button.js";
+import c from "await-interaction-response";
+const f = r(
+  (o, i) => {
+    const t = a(s), n = m(async () => {
+      await c(), t.onInitPlayer();
+    }, [t]);
     if (t.status === "initial")
-      return /* @__PURE__ */ i(a, { ...o, onClick: t.onInitPlayer, ref: r });
+      return /* @__PURE__ */ e(l, { ...o, onClick: n, ref: i });
   }
 );
 f.displayName = "VimeoPlayButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.192.0",
+  "version": "0.194.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -42,10 +42,11 @@
     "@react-aria/utils": "^3.25.3",
     "colord": "^2.9.3",
     "micromark": "^4.0.0",
-    "@webstudio-is/icons": "0.192.0",
-    "@webstudio-is/react-sdk": "0.192.0",
-    "@webstudio-is/sdk": "0.192.0",
-    "@webstudio-is/image": "0.192.0"
+    "await-interaction-response": "^0.0.2",
+    "@webstudio-is/icons": "0.194.0",
+    "@webstudio-is/image": "0.194.0",
+    "@webstudio-is/sdk": "0.194.0",
+    "@webstudio-is/react-sdk": "0.194.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -54,8 +55,8 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/generate-arg-types": "0.0.0"
+    "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",