@webstudio-is/sdk-components-react 0.142.0 → 0.143.0

package/lib/components.js

@@ -26,37 +26,102 @@ import {
   forwardRef as forwardRef3,
   useContext,
   useEffect,
-  useRef
+  useRef,
+  useSyncExternalStore,
+  useState
 } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var ExecutableHtml = (props) => {
+var __testing__ = {
+  scriptTestIdPrefix: "client-"
+};
+var insertScript = (sourceScript) => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    const hasSrc = sourceScript.hasAttribute("src");
+    for (const { name, value } of sourceScript.attributes) {
+      script.setAttribute(name, value);
+    }
+    if (script.dataset.testid !== void 0) {
+      script.dataset.testid = `${__testing__.scriptTestIdPrefix}${script.dataset.testid}`;
+    }
+    if (hasSrc) {
+      script.addEventListener("load", () => {
+        resolve(script);
+      });
+      script.addEventListener("error", reject);
+    } else {
+      script.textContent = sourceScript.innerText;
+    }
+    sourceScript.replaceWith(script);
+    if (hasSrc === false) {
+      resolve(script);
+    }
+  });
+};
+var execute = async (container) => {
+  const scripts = container.querySelectorAll("script");
+  const syncTasks = [];
+  const asyncTasks = [];
+  scripts.forEach((script) => {
+    const type = script.getAttribute("type");
+    if (type == null || type === "" || type === "text/javascript") {
+      const tasks = script.hasAttribute("async") ? asyncTasks : syncTasks;
+      tasks.push(() => {
+        return insertScript(script);
+      });
+    }
+  });
+  for (const task of asyncTasks) {
+    task();
+  }
+  for (const task of syncTasks) {
+    await task();
+  }
+};
+var Placeholder = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open the "Settings" panel to insert HTML code' });
+};
+var useIsServer = () => {
+  const isServer = useSyncExternalStore(
+    () => () => {
+    },
+    () => false,
+    () => true
+  );
+  return isServer;
+};
+var ClientOnly = (props) => {
+  const isServer = useIsServer();
+  if (isServer) {
+    return;
+  }
+  return props.children;
+};
+var ClientEmbed = (props) => {
   const { code, innerRef, ...rest } = props;
   const containerRef = useRef(null);
+  const executeScripts = useRef(true);
   useEffect(() => {
     const container = containerRef.current;
-    if (container === null || code === void 0) {
-      return;
+    if (container && executeScripts.current) {
+      executeScripts.current = false;
+      execute(container);
     }
-    const range = document.createRange();
-    range.setStart(container, 0);
-    const fragment = range.createContextualFragment(code);
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
-    container.append(fragment);
-  }, [code]);
+  }, []);
   return /* @__PURE__ */ jsx3(
     "div",
     {
       ...rest,
       ref: mergeRefs(innerRef, containerRef),
-      style: { display: "contents" }
+      style: { display: "contents" },
+      dangerouslySetInnerHTML: { __html: code ?? "" }
     }
   );
 };
-var InnerHtml = (props) => {
+var ServerEmbed = (props) => {
   const { code, innerRef, ...rest } = props;
   return /* @__PURE__ */ jsx3(
     "div",
@@ -64,25 +129,47 @@ var InnerHtml = (props) => {
       ...rest,
       ref: innerRef,
       style: { display: "contents" },
-      dangerouslySetInnerHTML: { __html: props.code ?? "" }
+      dangerouslySetInnerHTML: { __html: code ?? "" }
     }
   );
 };
-var Placeholder = (props) => {
-  const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open the "Settings" panel to insert HTML code' });
-};
-var HtmlEmbed = forwardRef3((props, ref) => {
-  const { renderer } = useContext(ReactSdkContext);
-  const { code, executeScriptOnCanvas, clientOnly, ...rest } = props;
-  if (code === void 0 || String(code).trim().length === 0) {
-    return /* @__PURE__ */ jsx3(Placeholder, { innerRef: ref, ...rest });
-  }
-  if (renderer === "canvas" && executeScriptOnCanvas === true || renderer === "preview" || clientOnly) {
-    return /* @__PURE__ */ jsx3(ExecutableHtml, { innerRef: ref, code, ...rest });
+var ClientEmbedWithNonExecutableScripts = ServerEmbed;
+var HtmlEmbed = forwardRef3(
+  (props, ref) => {
+    const { code, executeScriptOnCanvas, clientOnly, ...rest } = props;
+    const { renderer } = useContext(ReactSdkContext);
+    const isServer = useIsServer();
+    const [ssrRendered] = useState(isServer);
+    if (code === void 0 || String(code).trim().length === 0) {
+      return /* @__PURE__ */ jsx3(Placeholder, { innerRef: ref, ...rest });
+    }
+    if (ssrRendered) {
+      if (clientOnly !== true) {
+        return /* @__PURE__ */ jsx3(ServerEmbed, { innerRef: ref, code, ...rest });
+      }
+      return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(ClientEmbed, { innerRef: ref, code, ...rest }) });
+    }
+    if (renderer === "canvas" && executeScriptOnCanvas !== true) {
+      return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(
+        ClientEmbedWithNonExecutableScripts,
+        {
+          innerRef: ref,
+          code,
+          ...rest
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx3(ClientOnly, { children: /* @__PURE__ */ jsx3(
+      ClientEmbed,
+      {
+        innerRef: ref,
+        code,
+        ...rest
+      },
+      code
+    ) });
   }
-  return /* @__PURE__ */ jsx3(InnerHtml, { innerRef: ref, code, ...rest });
-});
+);
 HtmlEmbed.displayName = "HtmlEmbed";
 
 // src/body.tsx
@@ -340,19 +427,22 @@ RadioButton.displayName = "RadioButton";
 // src/checkbox.tsx
 import { forwardRef as forwardRef28 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx25("input", { ...props, type: "checkbox", ref }));
+var Checkbox = forwardRef28(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx25("input", { ...props, type: "checkbox", ref });
+});
 Checkbox.displayName = "Checkbox";
 
 // src/vimeo.tsx
 import { colord } from "colord";
 import {
   forwardRef as forwardRef29,
-  useState,
+  useState as useState2,
   useRef as useRef2,
   useEffect as useEffect2,
   useContext as useContext3,
   createContext,
-  useMemo
+  useMemo,
+  useCallback
 } from "react";
 import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk";
 import { shallowEqual } from "shallow-equal";
@@ -408,6 +498,9 @@ var warmConnections = () => {
   if (warmed) {
     return;
   }
+  if (window.matchMedia("(hover: none)").matches) {
+    return;
+  }
   preconnect(PLAYER_CDN);
   preconnect(IFRAME_CDN);
   preconnect(IMAGE_CDN);
@@ -476,9 +569,11 @@ var useVimeo = ({
   showPreview,
   loading
 }) => {
-  const [playerStatus, setPlayerStatus] = useState("initial");
+  const [playerStatus, setPlayerStatus] = useState2("initial");
   const elementRef = useRef2(null);
-  const [previewImageUrl, setPreviewImageUrl] = useState();
+  const [previewImageUrl, setPreviewImageUrl] = useState2();
+  const [isPending, setIsPending] = useState2(false);
+  const loadPreviewOnceRef = useRef2(false);
   useEffect2(() => {
     setPlayerStatus(
       options.autoplay && renderer !== "canvas" ? "initialized" : "initial"
@@ -489,9 +584,12 @@ var useVimeo = ({
       return;
     }
     if (showPreview) {
-      loadPreviewImage(elementRef.current, options.url).then(
-        setPreviewImageUrl
-      );
+      if (loadPreviewOnceRef.current) {
+        return;
+      }
+      loadPreviewOnceRef.current = true;
+      loadPreviewImage(elementRef.current, options.url).then(setPreviewImageUrl).catch(() => {
+      });
       return;
     }
     setPreviewImageUrl(void 0);
@@ -504,14 +602,29 @@ var useVimeo = ({
     return optionsRef.current;
   }, [options]);
   useEffect2(() => {
-    if (elementRef.current === null || playerStatus === "initial") {
+    if (isPending) {
+      setPlayerStatus(
+        (status2) => status2 === "initial" ? "initialized" : status2
+      );
+    }
+  }, [isPending]);
+  const toggleCreatePlayer = playerStatus !== "initial";
+  useEffect2(() => {
+    if (elementRef.current === null) {
+      return;
+    }
+    if (toggleCreatePlayer === false) {
       return;
     }
     return createPlayer(elementRef.current, stableOptions, { loading }, () => {
       setPlayerStatus("ready");
     });
-  }, [stableOptions, playerStatus, loading]);
-  return { previewImageUrl, playerStatus, setPlayerStatus, elementRef };
+  }, [stableOptions, toggleCreatePlayer, loading]);
+  const start = useCallback(() => {
+    setIsPending(true);
+  }, []);
+  const status = isPending ? "initialized" : playerStatus;
+  return { previewImageUrl, status, start, elementRef };
 };
 var Vimeo = forwardRef29(
   ({
@@ -543,7 +656,7 @@ var Vimeo = forwardRef29(
     ...rest
   }, ref) => {
     const { renderer } = useContext3(ReactSdkContext3);
-    const { previewImageUrl, playerStatus, setPlayerStatus, elementRef } = useVimeo({
+    const { previewImageUrl, status, start, elementRef } = useVimeo({
       renderer,
       showPreview,
       loading,
@@ -574,11 +687,11 @@ var Vimeo = forwardRef29(
       VimeoContext.Provider,
       {
         value: {
-          status: playerStatus,
+          status,
           previewImageUrl,
           onInitPlayer() {
             if (renderer !== "canvas") {
-              setPlayerStatus("initialized");
+              start();
             }
           }
         },

package/lib/metas.js

@@ -45,9 +45,14 @@ var meta3 = {
 var propsMeta = {
   props: {
     ...props,
+    clientOnly: {
+      ...props.clientOnly,
+      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+    },
     executeScriptOnCanvas: {
       ...props.executeScriptOnCanvas,
-      label: "Run script on canvas"
+      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: true,
@@ -1642,6 +1647,13 @@ var presetStyle15 = {
     {
       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" }
     }
   ]
 };
@@ -2723,7 +2735,7 @@ var meta29 = {
         },
         {
           type: "instance",
-          component: "Box",
+          component: "VimeoSpinner",
           label: "Spinner",
           styles: [
             {

package/lib/props.js

@@ -27,9 +27,14 @@ var props = {
 var propsMeta3 = {
   props: {
     ...props,
+    clientOnly: {
+      ...props.clientOnly,
+      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+    },
     executeScriptOnCanvas: {
       ...props.executeScriptOnCanvas,
-      label: "Run script on canvas"
+      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: true,
@@ -8484,6 +8489,13 @@ var presetStyle8 = {
     {
       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" }
     }
   ]
 };
@@ -13081,6 +13093,12 @@ var props24 = {
     type: "string",
     options: ["on", "off"]
   },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines a default value which will be displayed in the element on pageload."
+  },
   vocab: { required: false, control: "text", type: "string" },
   width: {
     required: false,
@@ -13140,7 +13158,15 @@ var meta7 = {
 };
 var propsMeta27 = {
   props: props24,
-  initialProps: ["id", "className", "name"]
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "required",
+    "checked",
+    "defaultChecked"
+  ]
 };
 
 // src/checkbox.ws.ts
@@ -13808,6 +13834,12 @@ var props25 = {
     type: "string",
     options: ["on", "off"]
   },
+  value: {
+    required: false,
+    control: "text",
+    type: "string",
+    description: "Defines a default value which will be displayed in the element on pageload."
+  },
   vocab: { required: false, control: "text", type: "string" },
   width: {
     required: false,
@@ -13866,7 +13898,15 @@ var meta8 = {
 };
 var propsMeta28 = {
   props: props25,
-  initialProps: ["id", "className", "name"]
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "required",
+    "checked",
+    "defaultChecked"
+  ]
 };
 
 // src/vimeo.ws.ts

package/lib/types/checkbox.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 export declare const defaultTag = "input";
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
+    value?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/html-embed.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-type Props = {
+export declare const __testing__: {
+    scriptTestIdPrefix: string;
+};
+type HtmlEmbedProps = {
     code: string;
     executeScriptOnCanvas?: boolean;
     clientOnly?: boolean;
 };
-export declare const HtmlEmbed: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HtmlEmbed: import("react").ForwardRefExoticComponent<HtmlEmbedProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/html-embed.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/jest-globals";

package/lib/types/radio-button.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 export declare const defaultTag = "input";
-export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
+    value?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/test-utils/cartesian.d.ts

@@ -0,0 +1,2 @@
+export declare function cartesian<A, B>(a: A[], b: B[]): [A, B][];
+export declare function cartesian<A, B, C>(a: A[], b: B[], c: C[]): [A, B, C][];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.142.0",
+  "version": "0.143.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,29 +40,35 @@
     "@react-aria/utils": "^3.21.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/image": "0.142.0",
-    "@webstudio-is/react-sdk": "0.142.0",
-    "@webstudio-is/icons": "0.142.0"
+    "@webstudio-is/icons": "0.143.0",
+    "@webstudio-is/react-sdk": "0.143.0",
+    "@webstudio-is/image": "0.143.0"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@storybook/react": "^7.4.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.142.0",
-    "@webstudio-is/storybook-config": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/generate-arg-types": "0.143.0",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/storybook-config": "0.0.0"
   },
   "scripts": {
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "typecheck": "tsc",
     "checks": "pnpm typecheck",
-    "storybook:dev": "storybook dev -p 6006",
+    "storybook:dev": "storybook dev -p 6006 --static-dir=./public",
     "storybook:build": "storybook build"
   }
 }