@unlayer/react-elements 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -346,14 +346,27 @@ function mapSemanticProps(props, defaultValues, componentType) {
     delete userProps.html;
     delete result.html;
   }
-  for (const key of ["href", "action"]) {
-    const v = userProps[key];
+  const canonicalizeLink = (v) => {
     if (typeof v === "string") {
-      userProps[key] = {
-        name: "web",
-        values: { href: v, target: "_blank" }
-      };
+      return { name: "web", values: { href: v, target: "_blank" } };
+    }
+    if (v && typeof v === "object" && "name" in v && v.attrs && typeof v.attrs === "object") {
+      const { href: attrsHref, target: attrsTarget, ...customAttrs } = v.attrs;
+      if (attrsHref !== void 0 || attrsTarget !== void 0) {
+        const linkValues = { ...v.values };
+        if (!linkValues.href && attrsHref !== void 0) linkValues.href = attrsHref;
+        if (!linkValues.target && attrsTarget !== void 0) linkValues.target = attrsTarget;
+        const next = { ...v, values: linkValues };
+        if (Object.keys(customAttrs).length) next.attrs = customAttrs;
+        else delete next.attrs;
+        return next;
+      }
     }
+    return v;
+  };
+  for (const key of ["href", "action"]) {
+    if (userProps[key] !== void 0) userProps[key] = canonicalizeLink(userProps[key]);
+    if (result[key] !== void 0) result[key] = canonicalizeLink(result[key]);
   }
   normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
@@ -402,6 +415,16 @@ function mapSemanticProps(props, defaultValues, componentType) {
     if (Object.keys(collected).length > 0) {
       final.border = { ...final.border || {}, ...collected };
     }
+    if (final.border && typeof final.border === "object") {
+      const b = { ...final.border };
+      for (const key of Object.keys(b)) {
+        if (!/Width$/.test(key)) continue;
+        const v = b[key];
+        if (typeof v === "number") b[key] = `${v}px`;
+        else if (typeof v === "string" && /^\d+(?:\.\d+)?$/.test(v.trim())) b[key] = `${v.trim()}px`;
+      }
+      final.border = b;
+    }
   }
   return final;
 }
@@ -413,12 +436,14 @@ function normalizeLinkValue(value) {
   if (typeof value !== "object") return void 0;
   const v = value;
   if ("url" in v) return v;
-  if ("name" in v && v.values && typeof v.values === "object") {
-    const inner = v.values;
+  if ("name" in v && (v.values && typeof v.values === "object" || v.attrs && typeof v.attrs === "object")) {
+    const inner = v.values && typeof v.values === "object" ? v.values : {};
+    const attrs = v.attrs && typeof v.attrs === "object" ? v.attrs : {};
+    const { href: attrsHref, target: attrsTarget, ...customAttrs } = attrs;
     return {
-      url: inner.href ?? "",
-      target: inner.target ?? "_blank",
-      ...v.attrs ?? {}
+      url: inner.href || attrsHref || "",
+      target: inner.target || attrsTarget || "_blank",
+      ...customAttrs
     };
   }
   return void 0;
@@ -770,11 +795,11 @@ var Html = createItemComponent({
   exporters: exporters.HtmlExporters
 });
 var Html_default = Html;
+var { height: _placeholderHeight, ...defaultSrc } = exporters.ImageDefaults.src;
 var DEFAULT_VALUES5 = {
   ...exporters.ImageDefaults,
-  // Override src with autoWidth/maxWidth for responsive rendering
   src: {
-    ...exporters.ImageDefaults.src,
+    ...defaultSrc,
     autoWidth: true,
     maxWidth: "100%"
   }
@@ -816,7 +841,7 @@ var Image = createItemComponent({
       };
       let displayPct;
       let displayPx;
-      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth]) {
+      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth, userSrc.width]) {
         if (candidate === void 0) continue;
         const pct = asPercent(candidate);
         if (pct) {
@@ -907,6 +932,17 @@ var Social = createItemComponent({
   defaultValues: DEFAULT_VALUES8,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
+    const coerceSizes = (base) => {
+      for (const key of ["iconSize", "spacing"]) {
+        const v = base[key];
+        if (typeof v === "string") {
+          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+          if (m) base[key] = parseFloat(m[1]);
+          else delete base[key];
+        }
+      }
+      return base;
+    };
     if (Array.isArray(icons)) {
       const mapped = icons.map((icon) => ({
         name: icon.name,
@@ -921,7 +957,7 @@ var Social = createItemComponent({
         iconType: iconType ?? base.icons?.iconType ?? "circle",
         icons: mapped
       };
-      return base;
+      return coerceSizes(base);
     }
     if (iconType !== void 0) {
       const base = mapSemanticProps(
@@ -930,12 +966,10 @@ var Social = createItemComponent({
         "Social"
       );
       base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
-      return base;
+      return coerceSizes(base);
     }
-    return mapSemanticProps(
-      props,
-      DEFAULT_VALUES8,
-      "Social"
+    return coerceSizes(
+      mapSemanticProps(props, DEFAULT_VALUES8, "Social")
     );
   },
   displayName: "Social",
@@ -1206,10 +1240,17 @@ var Row = (props) => {
     ...semanticProps
   } = props;
   const mode = modeProp ?? _config?.mode ?? "web";
-  let cells = propsCells || [1];
+  let cells;
   if (layout) {
     validateColumnLayout(layout, React__default.default.Children.count(children));
     cells = layout.cells;
+  } else if (propsCells) {
+    cells = propsCells;
+  } else {
+    const columnCount = React__default.default.Children.toArray(children).filter(
+      (c) => React__default.default.isValidElement(c) && /^Column$/.test(c.type?.displayName || c.type?.name || "")
+    ).length;
+    cells = Array(Math.max(1, columnCount)).fill(1);
   }
   const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
   const values = mapSemanticProps(