@unlayer/react-elements 0.1.11 → 0.1.13

package/dist/index.d.cts

@@ -308,11 +308,16 @@ interface BaseItemComponentProps {
     className?: string;
     style?: React__default.CSSProperties;
     mode?: RenderMode;
+    /** Padding of the content wrapper around this item — a number (→ px) or a CSS
+     *  string ("10px", "16px 24px"). Applied by the containing Column. */
+    containerPadding?: SizeInput;
     index?: number;
     colIndex?: number;
     cells?: any[];
     bodyValues?: any;
     rowValues?: any;
+    /** @internal - this column's values, threaded by Column for width-aware exporters */
+    columnValues?: any;
     /** @internal - Unlayer config threaded from UnlayerProvider */
     _config?: UnlayerConfig;
 }
@@ -508,7 +513,7 @@ interface ImageProps extends ItemComponentProps<ImageSemanticProps> {
  */
 declare const Image: React$1.FC<ItemComponentProps<ImageSemanticProps>>;
 
-type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding"> & {
+type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding" | "fontFamily" | "fontWeight" | "fontSize" | "letterSpacing"> & Omit<TextStyleProps, "color" | "lineHeight"> & {
     /** Menu items shorthand */
     items?: MenuItem[];
     /** Inner padding — a number (→ px) or CSS string. */

package/dist/index.d.ts

@@ -308,11 +308,16 @@ interface BaseItemComponentProps {
     className?: string;
     style?: React__default.CSSProperties;
     mode?: RenderMode;
+    /** Padding of the content wrapper around this item — a number (→ px) or a CSS
+     *  string ("10px", "16px 24px"). Applied by the containing Column. */
+    containerPadding?: SizeInput;
     index?: number;
     colIndex?: number;
     cells?: any[];
     bodyValues?: any;
     rowValues?: any;
+    /** @internal - this column's values, threaded by Column for width-aware exporters */
+    columnValues?: any;
     /** @internal - Unlayer config threaded from UnlayerProvider */
     _config?: UnlayerConfig;
 }
@@ -508,7 +513,7 @@ interface ImageProps extends ItemComponentProps<ImageSemanticProps> {
  */
 declare const Image: React$1.FC<ItemComponentProps<ImageSemanticProps>>;
 
-type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding"> & {
+type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding" | "fontFamily" | "fontWeight" | "fontSize" | "letterSpacing"> & Omit<TextStyleProps, "color" | "lineHeight"> & {
     /** Menu items shorthand */
     items?: MenuItem[];
     /** Inner padding — a number (→ px) or CSS string. */

package/dist/index.js

@@ -466,6 +466,12 @@ var ErrorFallback = ({
     ]
   }
 ) });
+function nextHtmlId(config, prefix) {
+  if (!config) return `${prefix}_1`;
+  const ids = config.__ids ?? (config.__ids = {});
+  ids[prefix] = (ids[prefix] || 0) + 1;
+  return `${prefix}_${ids[prefix]}`;
+}
 function ensureMeta(values, type, index = 0) {
   return {
     ...values,
@@ -477,7 +483,7 @@ function ensureMeta(values, type, index = 0) {
   };
 }
 function renderComponent(config) {
-  const { type, values, className, style, args = [], innerHTML, _config, exporter } = config;
+  const { type, values, className, style, args = [], innerHTML, _config, exporter, metaContext } = config;
   try {
     const cfg = _config ?? DEFAULT_CONFIG;
     const exporterConfig = {
@@ -492,7 +498,8 @@ function renderComponent(config) {
     } else {
       const meta = {
         exporterConfig,
-        mergeTagState: cfg.mergeTagState
+        mergeTagState: cfg.mergeTagState,
+        ...metaContext ?? {}
       };
       html = exporter(values, ...args, void 0, meta);
     }
@@ -531,6 +538,7 @@ function createItemComponent(config) {
       cells = [],
       bodyValues = {},
       rowValues = {},
+      columnValues = {},
       _config,
       // Children
       children,
@@ -549,7 +557,7 @@ function createItemComponent(config) {
       index
     );
     const safeBodyValues = {
-      contentWidth: 600,
+      contentWidth: "500px",
       ...bodyValues
     };
     const valuesForExporter = normalizeValuesForExporter(
@@ -563,6 +571,15 @@ function createItemComponent(config) {
       className,
       style,
       args: [index, colIndex, cells, safeBodyValues, rowValues],
+      // The 8th arg the exporters actually read: column/body context for
+      // width-aware rendering (Image's available-width calc), mirroring the editor.
+      metaContext: {
+        columnIndex: colIndex,
+        columnValues,
+        rowCells: cells,
+        rowValues,
+        bodyValues: safeBodyValues
+      },
       _config,
       exporter
     });
@@ -1098,7 +1115,7 @@ var Row = (props) => {
     ...values,
     cells,
     _meta: {
-      htmlID: `u_row_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_row"),
       htmlClassNames: "u_row",
       ...values._meta || {}
     }
@@ -1160,7 +1177,7 @@ var Column = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_column_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_column"),
       htmlClassNames: "u_column",
       ...values._meta || {}
     }
@@ -1176,17 +1193,26 @@ var Column = (props) => {
           if (typeof child.type === "function") {
             const ComponentType = child.type;
             const renderFn = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
-            const rendered = renderFn({ ...child.props, _config });
+            const rendered = renderFn({
+              ...child.props,
+              _config,
+              colIndex: index,
+              cells,
+              bodyValues,
+              rowValues,
+              columnValues: valuesWithMeta
+            });
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
               const componentType = child.type;
               const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
               const childProps = child.props;
-              const containerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING;
+              const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
               const contentValues = {
                 containerPadding,
                 _meta: {
-                  htmlID: `u_content_${componentName}_${childIndex + 1}`,
+                  htmlID: nextHtmlId(_config, `u_content_${componentName}`),
                   htmlClassNames: `u_content_${componentName}`
                 }
               };
@@ -1271,6 +1297,7 @@ var Body = (props) => {
   const resolvedConfig = { ...DEFAULT_CONFIG, ...configProp };
   const mode = modeProp ?? resolvedConfig.mode ?? "web";
   const _config = { ...resolvedConfig, mode };
+  _config.__ids = {};
   const values = mergeValues(
     DEFAULT_VALUES13,
     mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
@@ -1278,7 +1305,7 @@ var Body = (props) => {
   const valuesWithMeta = {
     ...values,
     _meta: {
-      htmlID: `u_body_${index + 1}`,
+      htmlID: nextHtmlId(_config, "u_body"),
       htmlClassNames: "u_body",
       ...values._meta || {}
     }
@@ -1546,6 +1573,29 @@ function getDisplayName2(element) {
   const type = element.type;
   return type?.displayName || type?.name;
 }
+var VALID_ROOTS = /* @__PURE__ */ new Set(["Body", "Email", "Page", "Document"]);
+function unwrapRoot(element) {
+  let current = element;
+  for (let depth = 0; depth < 10; depth++) {
+    const name = getDisplayName2(current);
+    if (name && VALID_ROOTS.has(name)) break;
+    const type = current.type;
+    const isPlainFunctionComponent = typeof type === "function" && !type.prototype?.isReactComponent;
+    if (!isPlainFunctionComponent) break;
+    let produced;
+    try {
+      produced = type({ ...current.props });
+    } catch (cause) {
+      const detail = cause instanceof Error ? cause.message : String(cause);
+      throw new Error(
+        `[Unlayer] renderToJson: could not unwrap <${name || "wrapper"}>. A wrapper must be a plain component that synchronously returns a root (<Email>, <Page>, <Document>, or <Body>) and uses no React hooks. Pass the root element directly \u2014 e.g. renderToJson(<Email>\u2026</Email>). (${detail})`
+      );
+    }
+    if (!React.isValidElement(produced)) break;
+    current = produced;
+  }
+  return current;
+}
 function collectChildren2(node) {
   const result = [];
   React.Children.forEach(node, (child) => {
@@ -1762,9 +1812,9 @@ function renderRowToJson(element) {
   return processRow(element, counters);
 }
 function renderToJson(element) {
+  element = unwrapRoot(element);
   const displayName = getDisplayName2(element);
-  const validRoots = /* @__PURE__ */ new Set(["Body", "Email", "Page", "Document"]);
-  if (!displayName || !validRoots.has(displayName)) {
+  if (!displayName || !VALID_ROOTS.has(displayName)) {
     throw new Error(
       `[Unlayer] renderToJson: Root element must be <Body>, <Email>, <Page>, or <Document>, but got <${displayName || "unknown"}>. Wrap your content: <Body><Row><Column>...</Column></Row></Body>`
     );