@webstudio-is/sdk-components-react 0.193.0 → 0.195.0

package/lib/components.js

@@ -4,24 +4,24 @@ import { HtmlEmbed as x } from "./html-embed.js";
 import { MarkdownEmbed as i } from "./markdown-embed.js";
 import { Body as n } from "./body.js";
 import { Box as d } from "./box.js";
-import { Text as u } from "./text.js";
-import { Heading as S } from "./heading.js";
-import { Paragraph as b } from "./paragraph.js";
-import { Link as k } from "./link.js";
-import { RichTextLink as I } from "./rich-text-link.js";
+import { Text as k } from "./text.js";
+import { Heading as u } from "./heading.js";
+import { Paragraph as S } from "./paragraph.js";
+import { Link as L, Link as T } from "./link.js";
 import { Span as F } from "./span.js";
 import { Bold as h } from "./bold.js";
-import { Italic as R } from "./italic.js";
-import { Superscript as y } from "./superscript.js";
-import { Subscript as E } from "./subscript.js";
-import { Button as X } from "./button.js";
-import { Input as v } from "./input.js";
-import { Form as N, Form as O } from "./form.js";
-import { Image as z } from "./image.js";
-import { Blockquote as D } from "./blockquote.js";
-import { List as J } from "./list.js";
-import { ListItem as Q } from "./list-item.js";
-import { Separator as W } from "./separator.js";
+import { Italic as P } from "./italic.js";
+import { Superscript as w } from "./superscript.js";
+import { Subscript as C } from "./subscript.js";
+import { Button as H } from "./button.js";
+import { Input as q } from "./input.js";
+import { WebhookForm as M } from "./webhook-form.js";
+import { Form as O } from "./form.js";
+import { Image as j } from "./image.js";
+import { Blockquote as A } from "./blockquote.js";
+import { List as G } from "./list.js";
+import { ListItem as K } from "./list-item.js";
+import { Separator as U } from "./separator.js";
 import { CodeText as Z } from "./code-text.js";
 import { Label as $ } from "./label.js";
 import { Textarea as ro } from "./textarea.js";
@@ -30,50 +30,50 @@ import { Checkbox as po } from "./checkbox.js";
 import { Vimeo as fo } from "./vimeo.js";
 import { VimeoPreviewImage as ao } from "./vimeo-preview-image.js";
 import { VimeoPlayButton as lo } from "./vimeo-play-button.js";
-import { VimeoSpinner as uo } from "./vimeo-spinner.js";
-import { XmlNode as So } from "./xml-node.js";
-import { XmlTime as bo } from "./xml-time.js";
-import { Time as ko } from "./time.js";
-import { Select as Io } from "./select.js";
-import { Option as Fo } from "./option.js";
+import { VimeoSpinner as ko } from "./vimeo-spinner.js";
+import { XmlNode as uo } from "./xml-node.js";
+import { XmlTime as So } from "./xml-time.js";
+import { Time as Lo } from "./time.js";
+import { Select as go } from "./select.js";
+import { Option as Io } from "./option.js";
 export {
-  D as Blockquote,
+  A as Blockquote,
   n as Body,
   h as Bold,
   d as Box,
-  X as Button,
+  H as Button,
   po as Checkbox,
   Z as CodeText,
-  N as Form,
+  M as Form,
   m as Fragment,
-  S as Heading,
+  u as Heading,
   x as HtmlEmbed,
-  z as Image,
-  v as Input,
-  R as Italic,
+  j as Image,
+  q as Input,
+  P as Italic,
   $ as Label,
-  k as Link,
-  J as List,
-  Q as ListItem,
+  L as Link,
+  G as List,
+  K as ListItem,
   i as MarkdownEmbed,
-  Fo as Option,
-  b as Paragraph,
+  Io as Option,
+  S as Paragraph,
   to as RadioButton,
   O as RemixForm,
-  I as RichTextLink,
-  Io as Select,
-  W as Separator,
+  T as RichTextLink,
+  go as Select,
+  U as Separator,
   e as Slot,
   F as Span,
-  E as Subscript,
-  y as Superscript,
-  u as Text,
+  C as Subscript,
+  w as Superscript,
+  k as Text,
   ro as Textarea,
-  ko as Time,
+  Lo as Time,
   fo as Vimeo,
   lo as VimeoPlayButton,
   ao as VimeoPreviewImage,
-  uo as VimeoSpinner,
-  So as XmlNode,
-  bo as XmlTime
+  ko as VimeoSpinner,
+  uo as XmlNode,
+  So as XmlTime
 };

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/link.ws.js

@@ -59,7 +59,7 @@ const n = {
       required: !1
     }
   },
-  initialProps: ["id", "className", "href", "target", "download"]
+  initialProps: ["id", "className", "href", "target", "prefetch", "download"]
 };
 export {
   l as meta,

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/metas.js

@@ -17,65 +17,66 @@ import { meta as y } from "./superscript.ws.js";
 import { meta as X } from "./subscript.ws.js";
 import { meta as v } from "./button.ws.js";
 import { meta as N } from "./input.ws.js";
-import { meta as j, meta as z } from "./form.ws.js";
-import { meta as D } from "./image.ws.js";
-import { meta as J } from "./blockquote.ws.js";
-import { meta as Q } from "./list.ws.js";
-import { meta as W } from "./list-item.ws.js";
-import { meta as Z } from "./separator.ws.js";
-import { meta as $ } from "./code-text.ws.js";
-import { meta as te } from "./label.ws.js";
-import { meta as me } from "./textarea.ws.js";
-import { meta as re } from "./radio-button.ws.js";
-import { meta as xe } from "./checkbox.ws.js";
-import { meta as fe } from "./vimeo.ws.js";
-import { meta as ne } from "./vimeo-preview-image.ws.js";
-import { meta as le } from "./vimeo-play-button.ws.js";
-import { meta as ue } from "./vimeo-spinner.ws.js";
-import { meta as Se } from "./xml-node.ws.js";
-import { meta as Te } from "./xml-time.ws.js";
-import { meta as ke } from "./time.ws.js";
-import { meta as Le } from "./select.ws.js";
-import { meta as he } from "./option.ws.js";
+import { meta as j } from "./webhook-form.ws.js";
+import { meta as A } from "./form.ws.js";
+import { meta as G } from "./image.ws.js";
+import { meta as K } from "./blockquote.ws.js";
+import { meta as U } from "./list.ws.js";
+import { meta as Y } from "./list-item.ws.js";
+import { meta as _ } from "./separator.ws.js";
+import { meta as ee } from "./code-text.ws.js";
+import { meta as oe } from "./label.ws.js";
+import { meta as ae } from "./textarea.ws.js";
+import { meta as pe } from "./radio-button.ws.js";
+import { meta as se } from "./checkbox.ws.js";
+import { meta as ie } from "./vimeo.ws.js";
+import { meta as de } from "./vimeo-preview-image.ws.js";
+import { meta as ce } from "./vimeo-play-button.ws.js";
+import { meta as Be } from "./vimeo-spinner.ws.js";
+import { meta as be } from "./xml-node.ws.js";
+import { meta as ge } from "./xml-time.ws.js";
+import { meta as Ie } from "./time.ws.js";
+import { meta as Ve } from "./select.ws.js";
+import { meta as Ce } from "./option.ws.js";
 export {
-  J as Blockquote,
+  K as Blockquote,
   d as Body,
   F as Bold,
   c as Box,
   v as Button,
-  xe as Checkbox,
-  $ as CodeText,
+  se as Checkbox,
+  ee as CodeText,
   i as ContentEmbed,
   j as Form,
   a as Fragment,
   b as Heading,
   p as HtmlEmbed,
-  D as Image,
+  G as Image,
   N as Input,
   R as Italic,
-  te as Label,
+  oe as Label,
   I as Link,
-  Q as List,
-  W as ListItem,
+  U as List,
+  Y as ListItem,
   s as MarkdownEmbed,
-  he as Option,
+  Ce as Option,
   g as Paragraph,
-  re as RadioButton,
-  z as RemixForm,
+  pe as RadioButton,
+  A as RemixForm,
   V as RichTextLink,
-  Le as Select,
-  Z as Separator,
+  Ve as Select,
+  _ as Separator,
   o as Slot,
   C as Span,
   X as Subscript,
   y as Superscript,
   B as Text,
-  me as Textarea,
-  ke as Time,
-  fe as Vimeo,
-  le as VimeoPlayButton,
-  ne as VimeoPreviewImage,
-  ue as VimeoSpinner,
-  Se as XmlNode,
-  Te as XmlTime
+  ae as Textarea,
+  Ie as Time,
+  ie as Vimeo,
+  ce as VimeoPlayButton,
+  de as VimeoPreviewImage,
+  Be as VimeoSpinner,
+  be as XmlNode,
+  ge as XmlTime
 };

package/lib/props.js

@@ -16,64 +16,65 @@ import { propsMeta as w } from "./superscript.ws.js";
 import { propsMeta as C } from "./subscript.ws.js";
 import { propsMeta as H } from "./button.ws.js";
 import { propsMeta as q } from "./input.ws.js";
-import { propsMeta as N, propsMeta as O } from "./form.ws.js";
-import { propsMeta as z } from "./image.ws.js";
-import { propsMeta as D } from "./blockquote.ws.js";
-import { propsMeta as J } from "./list.ws.js";
-import { propsMeta as Q } from "./list-item.ws.js";
-import { propsMeta as W } from "./separator.ws.js";
-import { propsMeta as Z } from "./code-text.ws.js";
-import { propsMeta as $ } from "./label.ws.js";
-import { propsMeta as ro } from "./textarea.ws.js";
-import { propsMeta as eo } from "./radio-button.ws.js";
-import { propsMeta as ao } from "./checkbox.ws.js";
-import { propsMeta as mo } from "./vimeo.ws.js";
-import { propsMeta as Mo } from "./vimeo-preview-image.ws.js";
-import { propsMeta as io } from "./vimeo-play-button.ws.js";
-import { propsMeta as lo } from "./vimeo-spinner.ws.js";
-import { propsMeta as uo } from "./xml-node.ws.js";
-import { propsMeta as So } from "./xml-time.ws.js";
-import { propsMeta as bo } from "./time.ws.js";
-import { propsMeta as ko } from "./select.ws.js";
-import { propsMeta as Lo } from "./option.ws.js";
+import { propsMeta as N } from "./webhook-form.ws.js";
+import { propsMeta as j } from "./form.ws.js";
+import { propsMeta as A } from "./image.ws.js";
+import { propsMeta as G } from "./blockquote.ws.js";
+import { propsMeta as K } from "./list.ws.js";
+import { propsMeta as U } from "./list-item.ws.js";
+import { propsMeta as Y } from "./separator.ws.js";
+import { propsMeta as _ } from "./code-text.ws.js";
+import { propsMeta as oo } from "./label.ws.js";
+import { propsMeta as po } from "./textarea.ws.js";
+import { propsMeta as to } from "./radio-button.ws.js";
+import { propsMeta as so } from "./checkbox.ws.js";
+import { propsMeta as xo } from "./vimeo.ws.js";
+import { propsMeta as fo } from "./vimeo-preview-image.ws.js";
+import { propsMeta as no } from "./vimeo-play-button.ws.js";
+import { propsMeta as co } from "./vimeo-spinner.ws.js";
+import { propsMeta as Bo } from "./xml-node.ws.js";
+import { propsMeta as To } from "./xml-time.ws.js";
+import { propsMeta as go } from "./time.ws.js";
+import { propsMeta as Io } from "./select.ws.js";
+import { propsMeta as Vo } from "./option.ws.js";
 export {
-  D as Blockquote,
+  G as Blockquote,
   f as Body,
   h as Bold,
   n as Box,
   H as Button,
-  ao as Checkbox,
-  Z as CodeText,
+  so as Checkbox,
+  _ as CodeText,
   N as Form,
   t as Fragment,
   u as Heading,
   s as HtmlEmbed,
-  z as Image,
+  A as Image,
   q as Input,
   P as Italic,
-  $ as Label,
+  oo as Label,
   b as Link,
-  J as List,
-  Q as ListItem,
+  K as List,
+  U as ListItem,
   x as MarkdownEmbed,
-  Lo as Option,
+  Vo as Option,
   S as Paragraph,
-  eo as RadioButton,
-  O as RemixForm,
+  to as RadioButton,
+  j as RemixForm,
   k as RichTextLink,
-  ko as Select,
-  W as Separator,
+  Io as Select,
+  Y as Separator,
   p as Slot,
   L as Span,
   C as Subscript,
   w as Superscript,
   d as Text,
-  ro as Textarea,
-  bo as Time,
-  mo as Vimeo,
-  io as VimeoPlayButton,
-  Mo as VimeoPreviewImage,
-  lo as VimeoSpinner,
-  uo as XmlNode,
-  So as XmlTime
+  po as Textarea,
+  go as Time,
+  xo as Vimeo,
+  no as VimeoPlayButton,
+  fo as VimeoPreviewImage,
+  co as VimeoSpinner,
+  Bo as XmlNode,
+  To as XmlTime
 };

package/lib/types/__generated__/webhook-form.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/react-sdk";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components.d.ts

@@ -16,7 +16,7 @@ export { Superscript } from "./superscript";
 export { Subscript } from "./subscript";
 export { Button } from "./button";
 export { Input } from "./input";
-export { Form } from "./form";
+export { WebhookForm as Form } from "./webhook-form";
 export { Form as RemixForm } from "./form";
 export { Image } from "./image";
 export { Blockquote } from "./blockquote";

package/lib/types/link.d.ts

@@ -2,6 +2,10 @@ export declare const defaultTag = "a";
 export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
     target?: "_self" | "_blank" | "_parent" | "_top";
     download?: boolean;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    preventScrollReset?: boolean;
+    reloadDocument?: boolean;
+    replace?: boolean;
 } & {
     $webstudio$canvasOnly$assetId?: string | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/metas.d.ts

@@ -17,7 +17,7 @@ export { meta as Superscript } from "./superscript.ws";
 export { meta as Subscript } from "./subscript.ws";
 export { meta as Button } from "./button.ws";
 export { meta as Input } from "./input.ws";
-export { meta as Form } from "./form.ws";
+export { meta as Form } from "./webhook-form.ws";
 export { meta as RemixForm } from "./form.ws";
 export { meta as Image } from "./image.ws";
 export { meta as Blockquote } from "./blockquote.ws";

package/lib/types/props.d.ts

@@ -16,7 +16,7 @@ export { propsMeta as Superscript } from "./superscript.ws";
 export { propsMeta as Subscript } from "./subscript.ws";
 export { propsMeta as Button } from "./button.ws";
 export { propsMeta as Input } from "./input.ws";
-export { propsMeta as Form } from "./form.ws";
+export { propsMeta as Form } from "./webhook-form.ws";
 export { propsMeta as RemixForm } from "./form.ws";
 export { propsMeta as Image } from "./image.ws";
 export { propsMeta as Blockquote } from "./blockquote.ws";

package/lib/types/rich-text-link.d.ts

@@ -1,2 +1 @@
-import { Link } from "./link";
-export declare const RichTextLink: typeof Link;
+export { Link as RichTextLink } from "./link";

package/lib/types/webhook-form.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentProps } from "react";
+type Props = ComponentProps<"form"> & {
+    encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+    /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
+    state?: "initial" | "success" | "error";
+};
+export declare const WebhookForm: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+export {};

package/lib/types/webhook-form.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

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/lib/vimeo.ws.js

@@ -307,10 +307,9 @@ const n = {
   "className",
   "url",
   "quality",
+  "loading",
   "showPreview",
   "autoplay",
-  "loading",
-  "backgroundMode",
   "doNotTrack",
   "loop",
   "muted",

package/lib/webhook-form.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const i = e(
+  ({ children: o, state: a = "initial", ...r }, m) => /* @__PURE__ */ t("form", { ...r, ref: m, children: o })
+);
+i.displayName = "WebhookForm";
+export {
+  i as WebhookForm
+};