@webstudio-is/sdk-components-react 0.151.0 → 0.167.0

package/lib/components.js

@@ -201,7 +201,7 @@ var ServerEmbed = (props) => {
 var ClientEmbedWithNonExecutableScripts = ServerEmbed;
 var HtmlEmbed = forwardRef3(
   (props, ref) => {
-    const { code, executeScriptOnCanvas, clientOnly, ...rest } = props;
+    const { code, executeScriptOnCanvas, clientOnly, children, ...rest } = props;
     const { renderer } = useContext(ReactSdkContext);
     const isServer = useIsServer();
     const [ssrRendered] = useState(isServer);
@@ -263,7 +263,7 @@ var defaultTag2 = "div";
 var Text = forwardRef6(
   ({ tag = defaultTag2, children, ...props }, ref) => {
     const Tag = tag;
-    return /* @__PURE__ */ jsx5(Tag, { ...props, ref, children: children ?? "The text you can edit" });
+    return /* @__PURE__ */ jsx5(Tag, { ...props, ref, children });
   }
 );
 Text.displayName = "Text";
@@ -275,7 +275,7 @@ var defaultTag3 = "h1";
 var Heading = forwardRef7(
   ({ tag = defaultTag3, children, ...props }, ref) => {
     const Tag = tag;
-    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children: children ?? "Heading you can edit" });
+    return /* @__PURE__ */ jsx6(Tag, { ...props, ref, children });
   }
 );
 Heading.displayName = "Heading";
@@ -283,7 +283,7 @@ Heading.displayName = "Heading";
 // src/paragraph.tsx
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Paragraph = forwardRef8(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("p", { ...props, ref, children: children ?? "Paragraph you can edit" }));
+var Paragraph = forwardRef8(({ children, ...props }, ref) => /* @__PURE__ */ jsx7("p", { ...props, ref, children }));
 Paragraph.displayName = "Paragraph";
 
 // src/link.tsx
@@ -291,7 +291,7 @@ import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var Link = forwardRef9(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8("a", { ...props, href: props.href ?? "#", ref, children: children ?? "Link text you can edit" });
+    return /* @__PURE__ */ jsx8("a", { ...props, href: props.href ?? "#", ref, children });
   }
 );
 Link.displayName = "Link";
@@ -336,7 +336,7 @@ Subscript.displayName = "Subscript";
 import { forwardRef as forwardRef16 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var Button = forwardRef16(
-  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx15("button", { type, ...props, ref, children: children ?? "Button you can edit" })
+  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx15("button", { type, ...props, ref, children })
 );
 Button.displayName = "Button";
 
@@ -385,33 +385,34 @@ var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 </svg>`)}`;
 var Image = forwardRef19(
   ({ loading = "lazy", ...props }, ref) => {
+    const src = String(props.src ?? "");
     const { imageLoader, renderer, assetBaseUrl } = useContext2(ReactSdkContext2);
     if (renderer === "canvas") {
       loading = "eager";
     }
-    if (props.src === void 0 || props.src.startsWith(assetBaseUrl) === false) {
+    if (src.startsWith(assetBaseUrl) === false) {
       return /* @__PURE__ */ jsx18(
         "img",
         {
           loading,
           ...props,
-          src: props.src || imagePlaceholderSvg,
+          src: src || imagePlaceholderSvg,
           ref
         },
-        props.src
+        src
       );
     }
-    const src = props.src.slice(assetBaseUrl.length);
+    const assetName = src.slice(assetBaseUrl.length);
     return /* @__PURE__ */ jsx18(
       WebstudioImage,
       {
         loading,
         ...props,
         loader: imageLoader,
-        src,
+        src: assetName,
         ref
       },
-      src
+      assetName
     );
   }
 );
@@ -422,7 +423,7 @@ import { forwardRef as forwardRef20 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Blockquote = forwardRef20(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx19("blockquote", { ...props, ref, children: children ?? "Blockquote you can edit" });
+    return /* @__PURE__ */ jsx19("blockquote", { ...props, ref, children });
   }
 );
 Blockquote.displayName = "Blockquote";
@@ -445,7 +446,7 @@ import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var ListItem = forwardRef22(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx20("li", { ...props, ref, children: children ?? "List Item you can edit" });
+    return /* @__PURE__ */ jsx20("li", { ...props, ref, children });
   }
 );
 ListItem.displayName = "ListItem";
@@ -852,18 +853,37 @@ var VimeoSpinner = forwardRef32(
 VimeoSpinner.displayName = "VimeoSpinner";
 
 // src/xml-node.tsx
-import { Children, forwardRef as forwardRef33 } from "react";
+import {
+  ReactSdkContext as ReactSdkContext4
+} from "@webstudio-is/react-sdk";
+import {
+  Children,
+  createElement as createElement4,
+  forwardRef as forwardRef33,
+  useContext as useContext7
+} from "react";
 import { jsx as jsx30, jsxs as jsxs2 } from "react/jsx-runtime";
 var XmlNode = forwardRef33(
   ({ tag = "", children, ...props }, ref) => {
+    const { renderer } = useContext7(ReactSdkContext4);
+    const attributeEntries = Object.entries(props).filter(
+      ([key]) => key.startsWith("data-") === false && key.startsWith("aria-") === false
+    ).filter(([key]) => key !== "tabIndex").filter(([, value]) => typeof value !== "function");
+    if (renderer === void 0) {
+      const attrProps = Object.fromEntries(attributeEntries);
+      return createElement4(tag, attrProps, children);
+    }
     const isTextChild = Children.toArray(children).every(
       (child) => typeof child === "string"
     );
     const elementName = tag.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._]+/gu, "");
+    const attributes = attributeEntries.map(
+      ([key, value]) => `${key}=${JSON.stringify(value)}`
+    );
     return /* @__PURE__ */ jsxs2("div", { style: { display: isTextChild ? "flex" : "contents" }, ...props, children: [
       /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
         "<",
-        elementName,
+        [elementName, ...attributes].join(" "),
         ">"
       ] }),
       /* @__PURE__ */ jsx30("div", { ref, style: { marginLeft: isTextChild ? 0 : "1rem" }, children }),
@@ -876,6 +896,337 @@ var XmlNode = forwardRef33(
   }
 );
 XmlNode.displayName = "XmlNode";
+
+// src/time.tsx
+import * as React from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var languages = [
+  "af",
+  "am",
+  "ar",
+  "az",
+  "be",
+  "bg",
+  "bn",
+  "bs",
+  "ca",
+  "cs",
+  "cy",
+  "da",
+  "de",
+  "el",
+  "en",
+  "es",
+  "et",
+  "eu",
+  "fa",
+  "fi",
+  "fr",
+  "ga",
+  "gl",
+  "gu",
+  "he",
+  "hi",
+  "hr",
+  "hu",
+  "hy",
+  "id",
+  "is",
+  "it",
+  "ja",
+  "ka",
+  "kk",
+  "km",
+  "kn",
+  "ko",
+  "ky",
+  "lb",
+  "lt",
+  "lv",
+  "mk",
+  "ml",
+  "mn",
+  "mr",
+  "ms",
+  "mt",
+  "nb",
+  "nl",
+  "nn",
+  "pl",
+  "pt",
+  "ro",
+  "ru",
+  "si",
+  "sk",
+  "sl",
+  "sq",
+  "sr",
+  "sv",
+  "sw",
+  "ta",
+  "te",
+  "th",
+  "tr",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  "zh"
+];
+var countries = [
+  "AF",
+  "AL",
+  "DZ",
+  "AS",
+  "AD",
+  "AO",
+  "AI",
+  "AQ",
+  "AG",
+  "AR",
+  "AM",
+  "AW",
+  "AU",
+  "AT",
+  "AZ",
+  "BS",
+  "BH",
+  "BD",
+  "BB",
+  "BY",
+  "BE",
+  "BZ",
+  "BJ",
+  "BM",
+  "BT",
+  "BO",
+  "BA",
+  "BW",
+  "BR",
+  "BN",
+  "BG",
+  "BF",
+  "BI",
+  "CV",
+  "KH",
+  "CM",
+  "CA",
+  "KY",
+  "CF",
+  "TD",
+  "CL",
+  "CN",
+  "CO",
+  "KM",
+  "CG",
+  "CD",
+  "CR",
+  "HR",
+  "CU",
+  "CY",
+  "CZ",
+  "DK",
+  "DJ",
+  "DM",
+  "DO",
+  "EC",
+  "EG",
+  "SV",
+  "GQ",
+  "ER",
+  "EE",
+  "SZ",
+  "ET",
+  "FJ",
+  "FI",
+  "FR",
+  "GA",
+  "GM",
+  "GE",
+  "DE",
+  "GH",
+  "GR",
+  "GD",
+  "GT",
+  "GN",
+  "GW",
+  "GY",
+  "HT",
+  "HN",
+  "HU",
+  "IS",
+  "IN",
+  "ID",
+  "IR",
+  "IQ",
+  "IE",
+  "IL",
+  "IT",
+  "JM",
+  "JP",
+  "JO",
+  "KZ",
+  "KE",
+  "KI",
+  "KP",
+  "KR",
+  "KW",
+  "KG",
+  "LA",
+  "LV",
+  "LB",
+  "LS",
+  "LR",
+  "LY",
+  "LI",
+  "LT",
+  "LU",
+  "MG",
+  "MW",
+  "MY",
+  "MV",
+  "ML",
+  "MT",
+  "MH",
+  "MR",
+  "MU",
+  "MX",
+  "FM",
+  "MD",
+  "MC",
+  "MN",
+  "ME",
+  "MA",
+  "MZ",
+  "MM",
+  "NA",
+  "NR",
+  "NP",
+  "NL",
+  "NZ",
+  "NI",
+  "NE",
+  "NG",
+  "NO",
+  "OM",
+  "PK",
+  "PW",
+  "PA",
+  "PG",
+  "PY",
+  "PE",
+  "PH",
+  "PL",
+  "PT",
+  "QA",
+  "RO",
+  "RU",
+  "RW",
+  "KN",
+  "LC",
+  "VC",
+  "WS",
+  "SM",
+  "ST",
+  "SA",
+  "SN",
+  "RS",
+  "SC",
+  "SL",
+  "SG",
+  "SK",
+  "SI",
+  "SB",
+  "SO",
+  "ZA",
+  "SS",
+  "ES",
+  "LK",
+  "SD",
+  "SR",
+  "SE",
+  "CH",
+  "SY",
+  "TW",
+  "TJ",
+  "TZ",
+  "TH",
+  "TL",
+  "TG",
+  "TO",
+  "TT",
+  "TN",
+  "TR",
+  "TM",
+  "TV",
+  "UG",
+  "UA",
+  "AE",
+  "GB",
+  "US",
+  "UY",
+  "UZ",
+  "VU",
+  "VA",
+  "VE",
+  "VN",
+  "YE",
+  "ZM",
+  "ZW"
+];
+var INITIAL_DATE_STRING = "dateTime attribute is not set";
+var INVALID_DATE_STRING = "";
+var DEFAULT_LANGUAGE = "en";
+var DEFAULT_COUNTRY = "GB";
+var DEFAULT_DATE_STYLE = "medium";
+var DEFAULT_TIME_STYLE = "none";
+var languageOrDefault = (language) => {
+  return languages.includes(language) ? language : DEFAULT_LANGUAGE;
+};
+var countryOrDefault = (country) => {
+  return countries.includes(country) ? country : DEFAULT_COUNTRY;
+};
+var dateStyleOrUndefined = (value) => {
+  if (["full", "long", "medium", "short"].includes(value)) {
+    return value;
+  }
+  return void 0;
+};
+var timeStyleOrUndefined = (value) => {
+  if (["full", "long", "medium", "short"].includes(value)) {
+    return value;
+  }
+  return void 0;
+};
+var Time = React.forwardRef(
+  ({
+    language = DEFAULT_LANGUAGE,
+    country = DEFAULT_COUNTRY,
+    dateStyle = DEFAULT_DATE_STYLE,
+    timeStyle = DEFAULT_TIME_STYLE,
+    datetime = INITIAL_DATE_STRING,
+    ...props
+  }, ref) => {
+    const locale = `${languageOrDefault(language)}-${countryOrDefault(
+      country
+    )}`;
+    const options = {
+      dateStyle: dateStyleOrUndefined(dateStyle),
+      timeStyle: timeStyleOrUndefined(timeStyle)
+    };
+    const datetimeString = datetime === null ? INVALID_DATE_STRING : datetime.toString();
+    const date = new Date(datetimeString);
+    const isValidDate = false === Number.isNaN(date.getTime());
+    let formattedDate = datetimeString;
+    if (isValidDate) {
+      try {
+        formattedDate = new Intl.DateTimeFormat(locale, options).format(date);
+      } catch {
+      }
+    }
+    return /* @__PURE__ */ jsx31("time", { ref, dateTime: datetimeString, ...props, children: formattedDate });
+  }
+);
 export {
   Blockquote,
   Body,
@@ -905,6 +1256,7 @@ export {
   Superscript,
   Text,
   Textarea,
+  Time,
   Vimeo,
   VimeoPlayButton,
   VimeoPreviewImage,