@webstudio-is/sdk-components-react 0.191.0 → 0.191.4

package/lib/vimeo.js

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

package/lib/vimeo.ws.js

@@ -1,330 +0,0 @@
-import { VimeoIcon as e, SpinnerIcon as t, PlayIcon as p } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/vimeo.props.js";
-const n = {
-  div: r
-}, s = {
-  category: "media",
-  type: "container",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: e,
-  states: o,
-  presetStyle: n,
-  invalidAncestors: ["Button", "Heading", "Link"],
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: ["Button", "Link", "Heading"] }
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoSpinner",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: t
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: p
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, i = [
-  "id",
-  "className",
-  "url",
-  "quality",
-  "showPreview",
-  "autoplay",
-  "loading",
-  "backgroundMode",
-  "doNotTrack",
-  "loop",
-  "muted",
-  "showPortrait",
-  "showByline",
-  "showTitle",
-  "showControls",
-  "controlsColor"
-], d = {
-  props: a,
-  initialProps: i
-};
-export {
-  s as meta,
-  d as propsMeta
-};

package/lib/xml-node.js

@@ -1,44 +0,0 @@
-import { jsxs as n, jsx as p } from "react/jsx-runtime";
-import { ReactSdkContext as y } from "@webstudio-is/react-sdk/runtime";
-import { forwardRef as b, useContext as h, createElement as u, Children as g } from "react";
-const x = b(
-  ({ tag: i = "", children: e, ...o }, c) => {
-    const { renderer: f } = h(y), s = Object.entries(o).filter(
-      ([t]) => t.startsWith("data-") === !1 && t.startsWith("aria-") === !1
-    ).filter(([t]) => t !== "tabIndex").filter(([, t]) => typeof t != "function");
-    if (f === void 0) {
-      const t = Object.fromEntries(s);
-      return u(i, t, e);
-    }
-    const r = g.toArray(e), l = r.length > 0 && r.every((t) => typeof t == "string"), a = i.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, ""), d = s.map(
-      ([t, m]) => `${t}=${JSON.stringify(m)}`
-    );
-    return /* @__PURE__ */ n("div", { ...o, children: [
-      /* @__PURE__ */ n("span", { style: { color: "rgb(16, 23, 233)" }, children: [
-        "<",
-        [a, ...d].join(" "),
-        ">"
-      ] }),
-      r.length > 0 && /* @__PURE__ */ p(
-        "div",
-        {
-          ref: c,
-          style: {
-            display: l ? "inline" : "block",
-            marginLeft: l ? 0 : "1rem"
-          },
-          children: e
-        }
-      ),
-      /* @__PURE__ */ n("span", { style: { color: "rgb(16, 23, 233)" }, children: [
-        "</",
-        a,
-        ">"
-      ] })
-    ] });
-  }
-);
-x.displayName = "XmlNode";
-export {
-  x as XmlNode
-};

package/lib/xml-node.ws.js

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

package/lib/xml-time.js

@@ -1,25 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as m, useContext as a } from "react";
-import { ReactSdkContext as T } from "@webstudio-is/react-sdk/runtime";
-const l = "short", u = "dateTime attribute is not set", N = "", c = (e) => {
-  if (e === "")
-    return;
-  let t = new Date(e);
-  if (Number.isNaN(t.getTime()) === !1)
-    return t;
-  if (/^\d+$/.test(e)) {
-    let o = Number(e);
-    e.length === 10 && (o *= 1e3), t = new Date(o);
-  }
-  if (Number.isNaN(t.getTime()) === !1)
-    return t;
-}, d = m(
-  ({ dateStyle: e = l, datetime: t = u }, o) => {
-    const { renderer: i } = a(T), s = t === null ? N : t.toString(), n = c(s);
-    let r = s;
-    return n && (r = n.toISOString(), e === "short" && (r = r.split("T")[0])), i === void 0 ? r : /* @__PURE__ */ f("time", { ref: o, children: r });
-  }
-);
-export {
-  d as XmlTime
-};

package/lib/xml-time.ws.js

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