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

package/lib/home_wsKvRSqvkajPPBeycZ-C8.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.6559 0.907089C7.88124 0.846075 8.11876 0.846075 8.34411 0.907089C8.60553 0.97787 8.82581 1.15075 9.00433 1.29086C9.02124 1.30414 9.03777 1.31712 9.05393 1.32968L13.5755 4.84644C13.5927 4.85983 13.6098 4.87308 13.6267 4.88623C13.8784 5.08159 14.0978 5.25187 14.2612 5.47281C14.4047 5.66677 14.5116 5.88528 14.5766 6.11759C14.6507 6.38223 14.6504 6.65995 14.65 6.9786C14.65 7.00004 14.65 7.02165 14.65 7.04347V11.8919C14.65 12.2438 14.65 12.5464 14.6297 12.7954C14.6082 13.0579 14.561 13.3177 14.4338 13.5672C14.2437 13.9404 13.9403 14.2438 13.5671 14.4339C13.3176 14.561 13.0579 14.6083 12.7953 14.6298C12.5463 14.6501 12.2437 14.6501 11.8918 14.6501H4.10816C3.75628 14.6501 3.4537 14.6501 3.20467 14.6298C2.94214 14.6083 2.68243 14.561 2.43292 14.4339C2.05973 14.2438 1.75632 13.9404 1.56617 13.5672C1.43904 13.3177 1.39178 13.0579 1.37033 12.7954C1.34998 12.5464 1.34999 12.2438 1.35 11.8919L1.35 7.04347C1.35 7.02165 1.34998 7.00003 1.34996 6.9786C1.34963 6.65995 1.34934 6.38222 1.42341 6.11759C1.48844 5.88527 1.59531 5.66677 1.73876 5.47281C1.90218 5.25187 2.12158 5.08159 2.3733 4.88623C2.39024 4.87308 2.40732 4.85983 2.42453 4.84644L6.94607 1.32968C6.96223 1.31711 6.97877 1.30414 6.99568 1.29086C7.1742 1.15075 7.39448 0.97787 7.6559 0.907089ZM6.65 13.3501H9.35V9.06675C9.35 8.86934 9.3495 8.76038 9.34308 8.68182C9.34236 8.67303 9.34162 8.66552 9.34091 8.65918C9.33457 8.65847 9.32706 8.65773 9.31827 8.65701C9.23971 8.65059 9.13075 8.65009 8.93334 8.65009H7.06667C6.86926 8.65009 6.76029 8.65059 6.68174 8.65701C6.67294 8.65773 6.66544 8.65847 6.6591 8.65918C6.65839 8.66552 6.65765 8.67303 6.65693 8.68182C6.65051 8.76038 6.65 8.86934 6.65 9.06675V13.3501ZM10.65 13.3501L10.65 9.04584C10.65 8.87727 10.65 8.71403 10.6388 8.57596C10.6264 8.42459 10.5973 8.24721 10.5065 8.069C10.3803 7.82125 10.1788 7.61983 9.93109 7.49359C9.75288 7.40279 9.5755 7.37369 9.42413 7.36133C9.28606 7.35005 9.12282 7.35007 8.95425 7.35008H7.04575C6.87718 7.35007 6.71395 7.35005 6.57587 7.36133C6.42451 7.37369 6.24712 7.40279 6.06892 7.49359C5.82117 7.61983 5.61974 7.82125 5.49351 8.069C5.40271 8.24721 5.37361 8.42459 5.36124 8.57596C5.34996 8.71403 5.34998 8.87727 5.35 9.04584L5.35 13.3501H4.13334C3.74924 13.3501 3.50026 13.3496 3.31054 13.3341C3.1284 13.3192 3.05881 13.2938 3.02311 13.2756C2.89453 13.2101 2.79 13.1056 2.72448 12.977C2.70629 12.9413 2.68089 12.8717 2.66601 12.6896C2.65051 12.4998 2.65 12.2508 2.65 11.8668V7.04347C2.65 6.62375 2.65565 6.53819 2.6753 6.46801C2.6977 6.38796 2.73452 6.31268 2.78395 6.24586C2.82729 6.18726 2.89135 6.13027 3.22266 5.87259L7.74419 2.35584C7.86861 2.25907 7.93516 2.20781 7.98588 2.17392C7.99132 2.17029 7.99601 2.16725 8 2.16473C8.00399 2.16725 8.00869 2.17029 8.01413 2.17392C8.06485 2.20781 8.13139 2.25907 8.25581 2.35584L12.7773 5.87259C13.1087 6.13027 13.1727 6.18726 13.2161 6.24586C13.2655 6.31268 13.3023 6.38796 13.3247 6.46801C13.3444 6.53819 13.35 6.62375 13.35 7.04347V11.8668C13.35 12.2508 13.3495 12.4998 13.334 12.6896C13.3191 12.8717 13.2937 12.9413 13.2755 12.977C13.21 13.1056 13.1055 13.2101 12.9769 13.2756C12.9412 13.2938 12.8716 13.3192 12.6895 13.3341C12.4997 13.3496 12.2508 13.3501 11.8667 13.3501H10.65Z" fill="#11181C"/>
+</svg>

package/lib/hooks.js

@@ -0,0 +1,5 @@
+import { hooksSelect as o } from "./select.js";
+const e = [o];
+export {
+  e as hooks
+};

package/lib/html-embed-patchers.js

@@ -0,0 +1,29 @@
+const l = () => document.readyState === "complete" || document.readyState === "interactive", t = [];
+let s = !1;
+const r = () => {
+  if (l() === !1) {
+    console.error("DOMContentLoaded event has not been fired yet");
+    return;
+  }
+  if (s)
+    return;
+  s = !0;
+  const d = document.addEventListener, a = window.addEventListener, c = new Event("DOMContentLoaded"), i = new Event("load");
+  window.addEventListener = (e, n, o) => {
+    e === "DOMContentLoaded" ? t.push(
+      () => n.call(window, c)
+    ) : (e === "load" && t.push(() => n.call(window, i)), a.call(window, e, n, o));
+  }, document.addEventListener = (e, n, o) => {
+    e === "DOMContentLoaded" ? t.push(
+      () => n.call(document, c)
+    ) : d.call(document, e, n, o);
+  };
+}, w = () => {
+  for (const d of t)
+    d();
+  t.length = 0;
+};
+export {
+  w as executeDomEvents,
+  r as patchDomEvents
+};

package/lib/html-embed.js

@@ -0,0 +1,112 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as R, useContext as S, useState as b, useSyncExternalStore as x, useRef as f, useMemo as E, useEffect as k } from "react";
+import { mergeRefs as T } from "@react-aria/utils";
+import { ReactSdkContext as g } from "@webstudio-is/react-sdk/runtime";
+import { patchDomEvents as L, executeDomEvents as _ } from "./html-embed-patchers.js";
+const C = {
+  scriptTestIdPrefix: "client-"
+}, w = (e) => new Promise((t, n) => {
+  const r = document.createElement("script"), s = e.hasAttribute("src"), a = e.type === "module";
+  for (const { name: c, value: o } of e.attributes)
+    r.setAttribute(c, o);
+  if (r.dataset.testid !== void 0 && (r.dataset.testid = `${C.scriptTestIdPrefix}${r.dataset.testid}`), s)
+    r.addEventListener("load", () => {
+      t();
+    }), r.addEventListener("error", n);
+  else {
+    if (a) {
+      const c = new Blob([e.innerText], {
+        type: "text/javascript"
+      }), o = URL.createObjectURL(c);
+      import(
+        /* @vite-ignore */
+        o
+      ).then(t).catch(n).finally(() => {
+        URL.revokeObjectURL(o);
+      });
+      return;
+    }
+    r.textContent = e.innerText;
+  }
+  e.replaceWith(r), s === !1 && t();
+}), l = [];
+let d = !1;
+const O = async (e) => {
+  if (l.push(...e), await Promise.resolve(), !d) {
+    for (L(), d = !0; l.length > 0; )
+      await l.shift()();
+    _(), d = !1;
+  }
+}, H = (e) => {
+  const t = e.querySelectorAll("script"), n = [], r = [];
+  t.forEach((s) => {
+    (s.hasAttribute("async") ? r : n).push(() => w(s));
+  });
+  for (const s of r)
+    s();
+  O(n);
+}, I = (e) => {
+  const { code: t, innerRef: n, ...r } = e;
+  return /* @__PURE__ */ i("div", { ref: n, ...r, style: { display: "block", padding: 20 }, children: 'Open the "Settings" panel to insert HTML code.' });
+}, h = () => x(
+  () => () => {
+  },
+  () => !1,
+  () => !0
+), u = (e) => {
+  if (!h())
+    return e.children;
+}, m = (e) => {
+  const { code: t, innerRef: n, ...r } = e, s = f(null), a = f(!0), c = E(
+    () => ({
+      __html: t ?? ""
+    }),
+    [t]
+  );
+  return k(() => {
+    const o = s.current;
+    o && a.current && (a.current = !1, H(o));
+  }, []), /* @__PURE__ */ i(
+    "div",
+    {
+      ...r,
+      ref: T(n, s),
+      dangerouslySetInnerHTML: c
+    }
+  );
+}, p = (e) => {
+  const { code: t, innerRef: n, ...r } = e;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ...r,
+      ref: n,
+      dangerouslySetInnerHTML: { __html: t ?? "" }
+    }
+  );
+}, M = p, P = R(
+  (e, t) => {
+    const { code: n, executeScriptOnCanvas: r, clientOnly: s, children: a, ...c } = e, { renderer: o } = S(g), v = h(), [y] = b(v);
+    return n === void 0 || String(n).trim().length === 0 ? /* @__PURE__ */ i(I, { innerRef: t, ...c }) : y ? s !== !0 ? /* @__PURE__ */ i(p, { innerRef: t, code: n, ...c }) : /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(m, { innerRef: t, code: n, ...c }) }) : o === "canvas" && r !== !0 ? /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+      M,
+      {
+        innerRef: t,
+        code: n,
+        ...c
+      }
+    ) }) : /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+      m,
+      {
+        innerRef: t,
+        code: n,
+        ...c
+      },
+      n
+    ) });
+  }
+);
+P.displayName = "HtmlEmbed";
+export {
+  P as HtmlEmbed,
+  C as __testing__
+};

package/lib/html-embed.ws.js

@@ -0,0 +1,46 @@
+import { EmbedIcon as t } from "@webstudio-is/icons/svg";
+import { props as e } from "./__generated__/html-embed.props.js";
+const i = {
+  div: [
+    {
+      property: "display",
+      value: { type: "keyword", value: "contents" }
+    },
+    {
+      property: "whiteSpaceCollapse",
+      value: { type: "keyword", value: "collapse" }
+    }
+  ]
+}, a = {
+  category: "general",
+  type: "embed",
+  label: "HTML Embed",
+  description: "Used to add HTML code to the page, such as an SVG or script.",
+  icon: t,
+  presetStyle: i,
+  order: 8
+}, r = {
+  props: {
+    ...e,
+    clientOnly: {
+      ...e.clientOnly,
+      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+    },
+    executeScriptOnCanvas: {
+      ...e.executeScriptOnCanvas,
+      label: "Run scripts on canvas",
+      description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
+    },
+    code: {
+      required: !0,
+      control: "code",
+      language: "html",
+      type: "string"
+    }
+  },
+  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
+};
+export {
+  a as meta,
+  r as propsMeta
+};

package/lib/image.js

@@ -0,0 +1,40 @@
+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(
+  ({
+    loading: s = "lazy",
+    width: r,
+    height: a,
+    optimize: o = !0,
+    decoding: d,
+    // @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,
+      {
+        loading: s,
+        decoding: c,
+        optimize: o,
+        width: r,
+        height: a,
+        ...t,
+        loader: N,
+        src: i,
+        ref: l
+      },
+      n
+    );
+  }
+);
+p.displayName = "Image";
+export {
+  p as Image
+};

package/lib/image.ws.js

@@ -0,0 +1,65 @@
+import { ImageIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as r } from "@webstudio-is/react-sdk";
+import { img as i } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/image.props.js";
+const a = {
+  img: [
+    ...i,
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    {
+      property: "maxWidth",
+      value: { type: "unit", unit: "%", value: 100 }
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    // Set image height to "auto" to reduce layout shift, improving compatibility across browsers like Safari.
+    // Unlike "fit-content," "auto" preserves the aspect ratio when the width exceeds max-width. (in Safari)
+    // See https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
+    {
+      property: "height",
+      value: { type: "keyword", value: "auto" }
+    }
+  ]
+}, l = {
+  category: "media",
+  type: "embed",
+  description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
+  icon: o,
+  states: r,
+  presetStyle: a,
+  order: 0
+}, p = {
+  src: {
+    type: "string",
+    control: "file",
+    label: "Source",
+    required: !1
+  }
+}, t = e.optimize;
+t.description = "Optimize the image for enhanced performance.";
+const d = {
+  props: {
+    ...e,
+    ...p,
+    optimize: t
+  },
+  initialProps: [
+    "id",
+    "className",
+    "src",
+    "width",
+    "height",
+    "alt",
+    "loading",
+    "optimize"
+  ]
+};
+export {
+  l as meta,
+  d as propsMeta,
+  p as propsOverrides
+};

package/lib/input.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n(
+  ({ children: d, type: t = "text", value: r, defaultValue: e, ...o }, p) => /* @__PURE__ */ i(
+    "input",
+    {
+      ...o,
+      defaultValue: r ?? e,
+      type: t,
+      ref: p
+    }
+  )
+);
+a.displayName = "Input";
+export {
+  a as Input
+};

package/lib/input.ws.js

@@ -0,0 +1,54 @@
+import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { input as o } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/input.props.js";
+const r = {
+  input: [
+    ...o,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, p = {
+  category: "forms",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "control",
+  label: "Text Input",
+  description: "A single-line text input for collecting string data from your users.",
+  icon: e,
+  presetStyle: r,
+  order: 3,
+  states: [
+    ...t,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" }
+    // Additional states will go into submenu
+    //{ selector: ":disabled", label: "Disabled" },
+    //{ selector: ":enabled", label: "Enabled" },
+    //{ selector: ":read-only", label: "Read Only" },
+    //{ selector: ":read-write", label: "Read Write" },
+  ]
+}, c = {
+  props: l,
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "autoFocus"
+  ]
+};
+export {
+  p as meta,
+  c as propsMeta
+};

package/lib/italic.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+const a = t((o, r) => /* @__PURE__ */ i("i", { ...o, ref: r }));
+a.displayName = "Italic";
+export {
+  a as Italic
+};

package/lib/italic.ws.js

@@ -0,0 +1,26 @@
+import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { i as o } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/italic.props.js";
+const r = {
+  i: [
+    ...o,
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" }
+    }
+  ]
+}, c = {
+  type: "rich-text-child",
+  label: "Italic Text",
+  icon: t,
+  states: e,
+  presetStyle: r
+}, m = {
+  props: i,
+  initialProps: ["id", "className"]
+};
+export {
+  c as meta,
+  m as propsMeta
+};

package/lib/label.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const l = e((o, r) => /* @__PURE__ */ a("label", { ...o, ref: r }));
+l.displayName = "Label";
+export {
+  l as Label
+};

package/lib/label.ws.js

@@ -0,0 +1,42 @@
+import { LabelIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { label as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/label.props.js";
+const l = {
+  label: [
+    ...r,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+}, m = {
+  category: "forms",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "container",
+  label: "Input Label",
+  icon: e,
+  states: o,
+  presetStyle: l,
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Form Label", placeholder: !0 }]
+    }
+  ]
+}, i = {
+  props: {
+    ...t,
+    htmlFor: {
+      ...t.htmlFor,
+      label: "For"
+    }
+  },
+  initialProps: ["id", "className", "htmlFor"]
+};
+export {
+  m as meta,
+  i as propsMeta
+};

package/lib/link.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n((e, o) => {
+  const {
+    children: s,
+    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: i,
+    ...r
+  } = e;
+  return /* @__PURE__ */ t("a", { ...r, href: r.href ?? "#", ref: o, children: s });
+});
+a.displayName = "Link";
+export {
+  a as Link
+};

package/lib/link.ws.js

@@ -0,0 +1,67 @@
+import { LinkIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { a as r } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/link.props.js";
+const n = {
+  a: [
+    ...r,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    },
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
+    }
+  ]
+}, l = {
+  category: "general",
+  type: "container",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
+  icon: e,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  presetStyle: n,
+  order: 1,
+  states: [
+    ...t,
+    {
+      selector: ":visited",
+      label: "Visited"
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page"
+    }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [
+        {
+          type: "text",
+          value: "Link text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: {
+    ...o,
+    href: {
+      type: "string",
+      control: "url",
+      required: !1
+    }
+  },
+  initialProps: ["id", "className", "href", "target", "download"]
+};
+export {
+  l as meta,
+  c as propsMeta
+};

package/lib/list-item.js

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

package/lib/list-item.ws.js

@@ -0,0 +1,39 @@
+import { ListItemIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+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 = {
+  category: "general",
+  type: "container",
+  constraints: {
+    relation: "parent",
+    component: { $eq: "List" }
+  },
+  description: "Adds a new item to an existing list.",
+  icon: t,
+  states: e,
+  presetStyle: n,
+  order: 4,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [
+        {
+          type: "text",
+          value: "List Item text you can edit",
+          placeholder: !0
+        }
+      ]
+    }
+  ]
+}, c = {
+  props: i,
+  initialProps: ["id", "className"]
+};
+export {
+  m as meta,
+  c as propsMeta
+};

package/lib/list.js

@@ -0,0 +1,6 @@
+import { forwardRef as o, createElement as a } from "react";
+const s = "ul", n = "ol", d = o(({ ordered: e = !1, ...t }, r) => a(e ? n : s, { ...t, ref: r }));
+d.displayName = "List";
+export {
+  d as List
+};