@unlayer/react-elements 0.1.13 → 0.1.15

package/dist/index.cjs

@@ -12,6 +12,81 @@ var ReactDOMServer__default = /*#__PURE__*/_interopDefault(ReactDOMServer);
 
 // src/components/Button.tsx
 
+// src/utils/image-sizing.ts
+function toPx(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+  if (typeof value !== "string") return void 0;
+  const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(value.trim());
+  return m ? parseFloat(m[1]) : void 0;
+}
+function edges(value) {
+  if (value == null) return { left: 0, right: 0 };
+  if (typeof value === "number") return { left: value, right: value };
+  const parts = String(value).trim().split(/\s+/).map((p) => parseFloat(p) || 0);
+  if (parts.length === 1) return { left: parts[0], right: parts[0] };
+  if (parts.length === 2 || parts.length === 3)
+    return { left: parts[1], right: parts[1] };
+  return { left: parts[3] || 0, right: parts[1] || 0 };
+}
+function borderEdges(border) {
+  if (!border || typeof border !== "object") return { left: 0, right: 0 };
+  const b = border;
+  const width = (v) => parseFloat(`${v ?? ""}`) || 0;
+  return {
+    left: width(b.borderLeftWidth),
+    right: width(b.borderRightWidth)
+  };
+}
+function fixedContentWidth(contentWidth) {
+  if (typeof contentWidth === "number")
+    return Number.isFinite(contentWidth) ? contentWidth : void 0;
+  if (typeof contentWidth === "string") {
+    const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(contentWidth.trim());
+    if (m) return parseFloat(m[1]);
+  }
+  return void 0;
+}
+var FALLBACK_BODY_CONTENT_WIDTH = 500;
+var DEFAULT_CONTAINER_PADDING = "10px";
+function bodyContentWidthPx(contentWidth, fallback = FALLBACK_BODY_CONTENT_WIDTH) {
+  return fixedContentWidth(contentWidth) ?? fallback;
+}
+function contentSlotWidth(ctx) {
+  const { bodyValues = {}, rowValues = {}, columnValues = {} } = ctx;
+  const rowCells = ctx.rowCells && ctx.rowCells.length ? ctx.rowCells : [1];
+  const columnIndex = ctx.columnIndex ?? 0;
+  const bodyWidth = bodyContentWidthPx(bodyValues.contentWidth);
+  const bp = edges(bodyValues.padding);
+  const bb = borderEdges(bodyValues.border);
+  const bodyAvail = bodyWidth - bp.left - bp.right - bb.left - bb.right;
+  const rp = edges(rowValues.padding);
+  const rb = borderEdges(rowValues.border);
+  const rowAvail = bodyAvail - rp.left - rp.right - rb.left - rb.right;
+  const rowSpan = rowCells.reduce((a, b) => a + b, 0) || 1;
+  const colSpan = rowCells[columnIndex] || 1;
+  const colWidth = colSpan / rowSpan * rowAvail;
+  const cp = edges(columnValues.padding);
+  const cb = borderEdges(columnValues.border);
+  const colAvail = colWidth - cp.left - cp.right - cb.left - cb.right;
+  const ip = edges(ctx.containerPadding ?? DEFAULT_CONTAINER_PADDING);
+  return colAvail - ip.left - ip.right;
+}
+var PERCENT = /^\d+(?:\.\d+)?%$/;
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+function pinImageSrc(src, availableWidth) {
+  if (!src || typeof src !== "object") return src;
+  if (src.autoWidth !== false) return src;
+  const maxWidth = src.maxWidth;
+  if (typeof maxWidth === "string" && PERCENT.test(maxWidth.trim())) return src;
+  const pinPx = toPx(maxWidth);
+  if (pinPx == null) return src;
+  const avail = availableWidth && availableWidth > 0 ? availableWidth : void 0;
+  const pct = avail ? pinPx >= avail ? 100 : round2(pinPx / avail * 100) : 100;
+  return { ...src, autoWidth: false, maxWidth: `${pct}%` };
+}
+
 // ../shared/dist/index.js
 var DEFAULT_CONFIG = {
   cdnBaseUrl: "https://cdn.tools.unlayer.com",
@@ -271,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);
@@ -338,12 +426,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;
@@ -571,6 +661,18 @@ function createItemComponent(config) {
       valuesWithMeta,
       config.name
     );
+    const exportSrc = valuesForExporter.src;
+    if (exportSrc && typeof exportSrc === "object" && exportSrc.autoWidth === false) {
+      const availableWidth = contentSlotWidth({
+        bodyValues: safeBodyValues,
+        rowValues,
+        rowCells: cells,
+        columnIndex: colIndex,
+        columnValues,
+        containerPadding: props.containerPadding ?? props.values?.containerPadding
+      });
+      valuesForExporter.src = pinImageSrc(exportSrc, availableWidth);
+    }
     const exporter = config.exporters[mode] || config.exporters.web;
     return renderComponent({
       type: config.name,
@@ -683,11 +785,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%"
   }
@@ -696,7 +798,7 @@ var Image = createItemComponent({
   name: "Image",
   defaultValues: DEFAULT_VALUES5,
   propMapper: (props) => {
-    const { alt, src, ...rest } = props;
+    const { alt, src, width: widthProp, maxWidth: maxWidthProp, ...rest } = props;
     const restValues = rest.values;
     const normalizedRest = restValues && typeof restValues.src === "string" ? { ...rest, values: { ...restValues, src: { url: restValues.src } } } : rest;
     const base = mapSemanticProps(
@@ -716,21 +818,39 @@ var Image = createItemComponent({
       const start = isStringUrl ? { autoWidth: true, maxWidth: "100%" } : { ...DEFAULT_VALUES5.src };
       const merged = { ...start, ...userSrc };
       const pctRe = /^\d+(?:\.\d+)?%$/;
-      if (typeof merged.width === "string") {
-        const t = merged.width.trim();
-        if (pctRe.test(t)) {
-          if (userSrc.maxWidth === void 0) merged.maxWidth = t;
-          delete merged.width;
-        } else {
-          const px = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
-          if (px) merged.width = parseFloat(px[1]);
+      const asPercent = (v) => typeof v === "string" && pctRe.test(v.trim()) ? v.trim() : void 0;
+      const asPx = (v) => {
+        if (typeof v === "number" && Number.isFinite(v)) return v;
+        if (typeof v === "string") {
+          const t = v.trim();
+          if (pctRe.test(t)) return void 0;
+          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(t);
+          if (m) return parseFloat(m[1]);
+        }
+        return void 0;
+      };
+      let displayPct;
+      let displayPx;
+      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth, userSrc.width]) {
+        if (candidate === void 0) continue;
+        const pct = asPercent(candidate);
+        if (pct) {
+          displayPct = pct;
+          break;
+        }
+        const px = asPx(candidate);
+        if (px != null) {
+          displayPx = px;
+          break;
         }
       }
-      const displayPct = typeof merged.maxWidth === "string" && pctRe.test(merged.maxWidth.trim()) ? merged.maxWidth.trim() : void 0;
       if (userSrc.autoWidth === void 0) {
         if (displayPct && displayPct !== "100%") {
           merged.autoWidth = false;
           merged.maxWidth = displayPct;
+        } else if (displayPx != null) {
+          merged.autoWidth = false;
+          merged.maxWidth = displayPx;
         } else {
           merged.autoWidth = true;
           merged.maxWidth = "100%";
@@ -802,6 +922,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,
@@ -816,7 +947,7 @@ var Social = createItemComponent({
         iconType: iconType ?? base.icons?.iconType ?? "circle",
         icons: mapped
       };
-      return base;
+      return coerceSizes(base);
     }
     if (iconType !== void 0) {
       const base = mapSemanticProps(
@@ -825,12 +956,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",
@@ -1039,13 +1168,7 @@ ${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width:
   return baseCSS + "\n" + columnCSS + "\n" + responsiveCSS;
 }
 function toContentWidthPx(bodyValues, fallback = 500) {
-  const raw = bodyValues?.contentWidth;
-  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-  if (typeof raw === "string") {
-    const n = parseInt(raw, 10);
-    if (Number.isFinite(n)) return n;
-  }
-  return fallback;
+  return bodyContentWidthPx(bodyValues?.contentWidth, fallback);
 }
 function renderRowToHtml(innerHTML, values, bodyValues, mode, cells, collection = "rows") {
   const rowExporter = exporters.RowExporters[mode] || exporters.RowExporters.web;
@@ -1152,7 +1275,7 @@ var Row = (props) => {
 };
 Row.displayName = "Row";
 var Row_default = Row;
-var DEFAULT_CONTAINER_PADDING = "10px";
+var DEFAULT_CONTAINER_PADDING2 = "10px";
 var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = exporters.ColumnExporters[mode] || exporters.ColumnExporters.web;
@@ -1214,7 +1337,7 @@ var Column = (props) => {
               const componentType = child.type;
               const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
               const childProps = child.props;
-              const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING2;
               const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
               const contentValues = {
                 containerPadding,
@@ -1669,7 +1792,7 @@ function extractTextFromTextJson(textJson) {
     return "";
   }
 }
-function processItem(element, counters) {
+function processItem(element, counters, layout = {}) {
   const componentType = element.type;
   const config = componentType[UNLAYER_CONFIG_KEY];
   if (!config) {
@@ -1703,9 +1826,17 @@ function processItem(element, counters) {
     deletable: true,
     hideable: true
   };
+  const itemSrc = values.src;
+  if (itemSrc && typeof itemSrc === "object" && itemSrc.autoWidth === false) {
+    const availableWidth = contentSlotWidth({
+      ...layout,
+      containerPadding: values.containerPadding
+    });
+    values.src = pinImageSrc(itemSrc, availableWidth);
+  }
   return { type: contentType, values };
 }
-function processColumn(element, counters) {
+function processColumn(element, counters, layout = {}) {
   const count = nextCounter2(counters, "u_column");
   const id = makeId("u_column", count);
   const semanticProps = extractSemanticProps2(element.props);
@@ -1721,12 +1852,13 @@ function processColumn(element, counters) {
   };
   const contents = [];
   const children = collectChildren2(element.props.children);
+  const itemLayout = { ...layout, columnValues: valuesWithMeta };
   for (const child of children) {
-    contents.push(processItem(child, counters));
+    contents.push(processItem(child, counters, itemLayout));
   }
   return { contents, values: valuesWithMeta };
 }
-function processRow(element, counters) {
+function processRow(element, counters, parentLayout = {}) {
   const count = nextCounter2(counters, "u_row");
   const id = makeId("u_row", count);
   const { layout, cells: propsCells } = element.props;
@@ -1738,7 +1870,9 @@ function processRow(element, counters) {
   } else {
     const columnCount = Math.max(
       1,
-      collectChildren2(element.props.children).length
+      collectChildren2(element.props.children).filter(
+        (child) => getDisplayName2(child) === "Column"
+      ).length
     );
     cells = Array(columnCount).fill(1);
   }
@@ -1762,10 +1896,19 @@ function processRow(element, counters) {
   };
   const columns = [];
   const children = collectChildren2(element.props.children);
+  const columnLayout = {
+    bodyValues: parentLayout.bodyValues,
+    rowValues: valuesWithMeta,
+    rowCells: cells
+  };
+  let columnIndex = 0;
   for (const child of children) {
     const name = getDisplayName2(child);
     if (name === "Column") {
-      columns.push(processColumn(child, counters));
+      columns.push(
+        processColumn(child, counters, { ...columnLayout, columnIndex })
+      );
+      columnIndex += 1;
     } else {
       console.warn(
         `[Unlayer] renderToJson: <${name}> is not a valid Row child. Only <Column> is allowed.`
@@ -1796,7 +1939,7 @@ function processBody(element, counters) {
   for (const child of children) {
     const name = getDisplayName2(child);
     if (name === "Row") {
-      rows.push(processRow(child, counters));
+      rows.push(processRow(child, counters, { bodyValues: valuesWithMeta }));
     } else {
       console.warn(
         `[Unlayer] renderToJson: <${name}> is not a valid Body child. Only <Row> is allowed.`