@unlayer/react-elements 0.1.21 → 0.1.22

package/README.md

@@ -120,6 +120,7 @@ These props have non-obvious shapes that **must** be followed exactly:
 | `<Social>` | Social media icons with `icons` shorthand array |
 | `<Menu>` | Navigation menu with `items` shorthand array |
 | `<Table>` | Data table with `headers` / `data` shorthands |
+| `<PageBreak>` | Force subsequent document content onto a new PDF page |
 | `<Video>` | Video embed with `videoUrl` shorthand |
 | `<Html>` | Custom HTML passthrough |
 
@@ -139,7 +140,9 @@ Root wrapper for email-safe HTML. Same props as Body (without `mode`).
 Root wrapper for responsive web display. Same props as Email.
 
 ### Document
-Root wrapper for print/PDF rendering. Same props as Email.
+Root wrapper for print/PDF rendering. It accepts the shared Body props plus:
+- `documentSize?: "A3" | "A4" | "A5" | "Legal" | "Letter" | "Tabloid"` — `"A4"`
+- `documentOrientation?: "portrait" | "landscape"` — `"portrait"`
 
 ### Row
 Layout container. Must be child of Email/Page/Document/Body.
@@ -221,6 +224,24 @@ Use `html` for formatted text, children for plain text.
 - `columns?: number` — `3`
 - `rows?: number` — `3`
 - `enableHeader?: boolean` — `true`
+- `repeatHeaderOnEachPage?: boolean` — `true`
+- `enableFooter?: boolean` — `false`
+- `repeatFooterOnEachPage?: boolean` — `true`
+
+### PageBreak
+Forces the next block onto a new page in document output. It is inert in email and web output.
+
+```tsx
+<Document>
+  <Row>
+    <Column>
+      <Paragraph>Page one</Paragraph>
+      <PageBreak />
+      <Paragraph>Page two</Paragraph>
+    </Column>
+  </Row>
+</Document>
+```
 
 ### Social
 - `icons?: { name: string, url: string }[]` — shorthand

package/dist/index.cjs

@@ -803,7 +803,8 @@ function createItemComponent(config) {
     contentType: config.contentType,
     slug: config.slug,
     metaName: config.metaName,
-    head: config.head
+    head: config.head,
+    omitEmptyOutput: config.omitEmptyOutput
   };
   return ItemComponent;
 }
@@ -1015,13 +1016,45 @@ var Paragraph = createItemComponent({
   exporters: exporters.ParagraphExporters
 });
 var Paragraph_default = Paragraph;
-var DEFAULT_ICONS = exporters.SocialDefaults.icons ?? { iconType: "circle", icons: [] };
+
+// src/components/PageBreak.tsx
 var DEFAULT_VALUES8 = {
+  color: "#6b7280"
+};
+var pageBreakExporters = {
+  // Page breaks are a document-only concept. Keep the unsupported renderers
+  // inert so a component rendered outside <Document> does not throw.
+  web: () => "",
+  email: () => "",
+  document: () => '<div class="u-content-page-break" aria-hidden="true"></div>'
+};
+var pageBreakHead = {
+  css: (_values, _bodyValues, meta) => meta.displayMode === "document" ? `
+      .u-content-page-break {
+        break-after: page;
+        page-break-after: always;
+      }
+    ` : void 0
+};
+var PageBreak = createItemComponent({
+  name: "PageBreak",
+  contentType: "page_break",
+  metaName: "page_break",
+  defaultValues: DEFAULT_VALUES8,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES8, "PageBreak"),
+  displayName: "PageBreak",
+  exporters: pageBreakExporters,
+  head: pageBreakHead,
+  omitEmptyOutput: true
+});
+var PageBreak_default = PageBreak;
+var DEFAULT_ICONS = exporters.SocialDefaults.icons ?? { iconType: "circle", icons: [] };
+var DEFAULT_VALUES9 = {
   ...exporters.SocialDefaults
 };
 var Social = createItemComponent({
   name: "Social",
-  defaultValues: DEFAULT_VALUES8,
+  defaultValues: DEFAULT_VALUES9,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
     const coerceSizes = (base) => {
@@ -1042,7 +1075,7 @@ var Social = createItemComponent({
       }));
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES8,
+        DEFAULT_VALUES9,
         "Social"
       );
       base.icons = {
@@ -1054,14 +1087,14 @@ var Social = createItemComponent({
     if (iconType !== void 0) {
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES8,
+        DEFAULT_VALUES9,
         "Social"
       );
       base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
       return coerceSizes(base);
     }
     return coerceSizes(
-      mapSemanticProps(props, DEFAULT_VALUES8, "Social")
+      mapSemanticProps(props, DEFAULT_VALUES9, "Social")
     );
   },
   displayName: "Social",
@@ -1069,20 +1102,20 @@ var Social = createItemComponent({
 });
 var Social_default = Social;
 var DEFAULT_TABLE = { headers: [], rows: [], footers: [] };
-var DEFAULT_VALUES9 = {
+var DEFAULT_VALUES10 = {
   ...exporters.TableDefaults,
   table: DEFAULT_TABLE
   // Schema doesn't include table data structure
 };
 var Table = createItemComponent({
   name: "Table",
-  defaultValues: DEFAULT_VALUES9,
+  defaultValues: DEFAULT_VALUES10,
   propMapper: (props) => {
     const { headers, data, columns, rows, ...rest } = props;
     if (headers || data || typeof columns === "number" || typeof rows === "number") {
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES9,
+        DEFAULT_VALUES10,
         "Table"
       );
       const colCount = headers ? headers.length : typeof columns === "number" ? columns : data?.[0]?.length ?? 0;
@@ -1114,7 +1147,7 @@ var Table = createItemComponent({
     }
     return mapSemanticProps(
       props,
-      DEFAULT_VALUES9,
+      DEFAULT_VALUES10,
       "Table"
     );
   },
@@ -1129,7 +1162,7 @@ var DEFAULT_VIDEO = {
   loading: false,
   ...exporters.VideoDefaults.video
 };
-var DEFAULT_VALUES10 = {
+var DEFAULT_VALUES11 = {
   ...exporters.VideoDefaults,
   video: DEFAULT_VIDEO
 };
@@ -1157,14 +1190,14 @@ function parseVideoUrl(url) {
 }
 var Video = createItemComponent({
   name: "Video",
-  defaultValues: DEFAULT_VALUES10,
+  defaultValues: DEFAULT_VALUES11,
   propMapper: (props) => {
     const { videoUrl, ...rest } = props;
     if (typeof videoUrl === "string") {
       const parsed = parseVideoUrl(videoUrl);
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES10,
+        DEFAULT_VALUES11,
         "Video"
       );
       if (parsed) {
@@ -1174,7 +1207,7 @@ var Video = createItemComponent({
     }
     return mapSemanticProps(
       props,
-      DEFAULT_VALUES10,
+      DEFAULT_VALUES11,
       "Video"
     );
   },
@@ -1202,7 +1235,7 @@ var {
 var BODY_DEFAULTS = bodyRest;
 var ROW_DEFAULTS = { ...exporters.RowDefaults };
 var COLUMN_DEFAULTS = { ...exporters.ColumnDefaults };
-var DEFAULT_VALUES11 = ROW_DEFAULTS;
+var DEFAULT_VALUES12 = ROW_DEFAULTS;
 var DEFAULT_BODY_VALUES = BODY_DEFAULTS;
 function getWidthPercentages(cells) {
   if (cells.length === 0) return [];
@@ -1340,7 +1373,7 @@ var Row = (props) => {
   const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
   const values = mapSemanticProps(
     semanticProps,
-    DEFAULT_VALUES11,
+    DEFAULT_VALUES12,
     "Row"
   );
   const valuesWithMeta = {
@@ -1378,7 +1411,7 @@ var Row = (props) => {
 Row.displayName = "Row";
 var Row_default = Row;
 var DEFAULT_CONTAINER_PADDING2 = "10px";
-var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
+var DEFAULT_VALUES13 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = exporters.ColumnExporters[mode] || exporters.ColumnExporters.web;
   return columnExporter(innerHTML, values, index, cells, bodyValues, rowValues);
@@ -1403,7 +1436,7 @@ var Column = (props) => {
   const mode = modeProp ?? _config?.mode ?? "web";
   const values = mapSemanticProps(
     semanticProps,
-    DEFAULT_VALUES12,
+    DEFAULT_VALUES13,
     "Column"
   );
   const valuesWithMeta = {
@@ -1439,6 +1472,7 @@ var Column = (props) => {
             });
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
+              if (!componentHTML && ComponentType?.[UNLAYER_CONFIG_KEY]?.omitEmptyOutput) return;
               const childProps = child.props;
               const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING2;
               const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
@@ -1486,7 +1520,7 @@ var Column = (props) => {
 };
 Column.displayName = "Column";
 var Column_default = Column;
-var DEFAULT_VALUES13 = BODY_DEFAULTS;
+var DEFAULT_VALUES14 = BODY_DEFAULTS;
 var MAX_PREVIEW_LENGTH = 150;
 var PADDING_CHARS = [
   "\xA0",
@@ -1532,8 +1566,8 @@ var Body = (props) => {
   const _config = { ...resolvedConfig, mode };
   _config.__ids = {};
   const values = mergeValues(
-    DEFAULT_VALUES13,
-    mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
+    DEFAULT_VALUES14,
+    mapSemanticProps(semanticProps, DEFAULT_VALUES14, "Body")
   );
   const valuesWithMeta = {
     ...values,
@@ -2292,6 +2326,7 @@ exports.Html = Html_default;
 exports.Image = Image_default;
 exports.Menu = Menu_default;
 exports.Page = Page;
+exports.PageBreak = PageBreak_default;
 exports.Paragraph = Paragraph_default;
 exports.Row = Row_default;
 exports.Social = Social_default;