@dotcms/react 0.0.1-alpha.42 → 0.0.1-alpha.44

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, createContext, useContext, createElement as createElement$1, forwardRef, useRef } from 'react';
+import { useState, useEffect, createContext, useRef, useContext, createElement as createElement$1, forwardRef } from 'react';
 import { isInsideEditor, initEditor, updateNavigation, destroyEditor, DotCmsClient, postMessageToEditor, CUSTOMER_ACTIONS } from '@dotcms/client';
 import { Editor } from '@tinymce/tinymce-react';
 
@@ -1757,10 +1757,14 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".row-module_row__8V7Eh {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
-var styles$1 = {"row":"row-module_row__8V7Eh"};
+var css_248z$1 = ".Row-module_row__5JPdv {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    gap: 1rem;\n}\n";
+var styles$1 = {"row":"Row-module_row__5JPdv"};
 styleInject(css_248z$1);
 
+var css_248z = ".Column-module_col-start-1__Pxl7H {\n    grid-column-start: 1;\n}\n\n.Column-module_col-start-2__jA-nF {\n    grid-column-start: 2;\n}\n\n.Column-module_col-start-3__11BXf {\n    grid-column-start: 3;\n}\n\n.Column-module_col-start-4__3XRrP {\n    grid-column-start: 4;\n}\n\n.Column-module_col-start-5__KQqeO {\n    grid-column-start: 5;\n}\n\n.Column-module_col-start-6__P0y54 {\n    grid-column-start: 6;\n}\n\n.Column-module_col-start-7__9h9qb {\n    grid-column-start: 7;\n}\n\n.Column-module_col-start-8__QwgxN {\n    grid-column-start: 8;\n}\n\n.Column-module_col-start-9__Ofunb {\n    grid-column-start: 9;\n}\n\n.Column-module_col-start-10__QWMJ3 {\n    grid-column-start: 10;\n}\n\n.Column-module_col-start-11__D-Fu9 {\n    grid-column-start: 11;\n}\n\n.Column-module_col-start-12__Hf-dO {\n    grid-column-start: 12;\n}\n\n.Column-module_col-end-1__MH5yV {\n    grid-column-end: 1;\n}\n\n.Column-module_col-end-2__5rzK5 {\n    grid-column-end: 2;\n}\n\n.Column-module_col-end-3__KrlkX {\n    grid-column-end: 3;\n}\n\n.Column-module_col-end-4__00jk1 {\n    grid-column-end: 4;\n}\n\n.Column-module_col-end-5__Y3ls6 {\n    grid-column-end: 5;\n}\n\n.Column-module_col-end-6__zmu9A {\n    grid-column-end: 6;\n}\n\n.Column-module_col-end-7__PRWOp {\n    grid-column-end: 7;\n}\n\n.Column-module_col-end-8__MylGK {\n    grid-column-end: 8;\n}\n\n.Column-module_col-end-9__2vhSX {\n    grid-column-end: 9;\n}\n\n.Column-module_col-end-10__TBtYO {\n    grid-column-end: 10;\n}\n\n.Column-module_col-end-11__Xyk8E {\n    grid-column-end: 11;\n}\n\n.Column-module_col-end-12__cOzYW {\n    grid-column-end: 12;\n}\n\n.Column-module_col-end-13__cTngu {\n    grid-column-end: 13;\n}\n";
+var styles = {"col-start-1":"Column-module_col-start-1__Pxl7H","col-start-2":"Column-module_col-start-2__jA-nF","col-start-3":"Column-module_col-start-3__11BXf","col-start-4":"Column-module_col-start-4__3XRrP","col-start-5":"Column-module_col-start-5__KQqeO","col-start-6":"Column-module_col-start-6__P0y54","col-start-7":"Column-module_col-start-7__9h9qb","col-start-8":"Column-module_col-start-8__QwgxN","col-start-9":"Column-module_col-start-9__Ofunb","col-start-10":"Column-module_col-start-10__QWMJ3","col-start-11":"Column-module_col-start-11__D-Fu9","col-start-12":"Column-module_col-start-12__Hf-dO","col-end-1":"Column-module_col-end-1__MH5yV","col-end-2":"Column-module_col-end-2__5rzK5","col-end-3":"Column-module_col-end-3__KrlkX","col-end-4":"Column-module_col-end-4__00jk1","col-end-5":"Column-module_col-end-5__Y3ls6","col-end-6":"Column-module_col-end-6__zmu9A","col-end-7":"Column-module_col-end-7__PRWOp","col-end-8":"Column-module_col-end-8__MylGK","col-end-9":"Column-module_col-end-9__2vhSX","col-end-10":"Column-module_col-end-10__TBtYO","col-end-11":"Column-module_col-end-11__Xyk8E","col-end-12":"Column-module_col-end-12__cOzYW","col-end-13":"Column-module_col-end-13__cTngu"};
+styleInject(css_248z);
+
 const endClassMap = {
   1: 'col-end-1',
   2: 'col-end-2',
@@ -1843,10 +1847,6 @@ const getPositionStyleClasses = (start, end) => {
   };
 };
 
-var css_248z = ".column-module_col-start-1__GK-q- {\n    grid-column-start: 1;\n}\n\n.column-module_col-start-2__1DmkY {\n    grid-column-start: 2;\n}\n\n.column-module_col-start-3__HNEPh {\n    grid-column-start: 3;\n}\n\n.column-module_col-start-4__oCAwh {\n    grid-column-start: 4;\n}\n\n.column-module_col-start-5__re1rB {\n    grid-column-start: 5;\n}\n\n.column-module_col-start-6__dkB4w {\n    grid-column-start: 6;\n}\n\n.column-module_col-start-7__kEfJb {\n    grid-column-start: 7;\n}\n\n.column-module_col-start-8__Yx31z {\n    grid-column-start: 8;\n}\n\n.column-module_col-start-9__9YiVY {\n    grid-column-start: 9;\n}\n\n.column-module_col-start-10__6AFbk {\n    grid-column-start: 10;\n}\n\n.column-module_col-start-11__LP24D {\n    grid-column-start: 11;\n}\n\n.column-module_col-start-12__8p0QS {\n    grid-column-start: 12;\n}\n\n.column-module_col-end-1__G9axv {\n    grid-column-end: 1;\n}\n\n.column-module_col-end-2__pYjHG {\n    grid-column-end: 2;\n}\n\n.column-module_col-end-3__4woe6 {\n    grid-column-end: 3;\n}\n\n.column-module_col-end-4__zlBaT {\n    grid-column-end: 4;\n}\n\n.column-module_col-end-5__aC-y8 {\n    grid-column-end: 5;\n}\n\n.column-module_col-end-6__YljAP {\n    grid-column-end: 6;\n}\n\n.column-module_col-end-7__lpQrW {\n    grid-column-end: 7;\n}\n\n.column-module_col-end-8__F6UVd {\n    grid-column-end: 8;\n}\n\n.column-module_col-end-9__kvQ3T {\n    grid-column-end: 9;\n}\n\n.column-module_col-end-10__XJhrd {\n    grid-column-end: 10;\n}\n\n.column-module_col-end-11__nx-lF {\n    grid-column-end: 11;\n}\n\n.column-module_col-end-12__LIRnk {\n    grid-column-end: 12;\n}\n\n.column-module_col-end-13__0p7YI {\n    grid-column-end: 13;\n}\n";
-var styles = {"col-start-1":"column-module_col-start-1__GK-q-","col-start-2":"column-module_col-start-2__1DmkY","col-start-3":"column-module_col-start-3__HNEPh","col-start-4":"column-module_col-start-4__oCAwh","col-start-5":"column-module_col-start-5__re1rB","col-start-6":"column-module_col-start-6__dkB4w","col-start-7":"column-module_col-start-7__kEfJb","col-start-8":"column-module_col-start-8__Yx31z","col-start-9":"column-module_col-start-9__9YiVY","col-start-10":"column-module_col-start-10__6AFbk","col-start-11":"column-module_col-start-11__LP24D","col-start-12":"column-module_col-start-12__8p0QS","col-end-1":"column-module_col-end-1__G9axv","col-end-2":"column-module_col-end-2__pYjHG","col-end-3":"column-module_col-end-3__4woe6","col-end-4":"column-module_col-end-4__zlBaT","col-end-5":"column-module_col-end-5__aC-y8","col-end-6":"column-module_col-end-6__YljAP","col-end-7":"column-module_col-end-7__lpQrW","col-end-8":"column-module_col-end-8__F6UVd","col-end-9":"column-module_col-end-9__kvQ3T","col-end-10":"column-module_col-end-10__XJhrd","col-end-11":"column-module_col-end-11__nx-lF","col-end-12":"column-module_col-end-12__LIRnk","col-end-13":"column-module_col-end-13__0p7YI"};
-styleInject(css_248z);
-
 var NATIVE_BIND$1 = functionBindNative;
 
 var FunctionPrototype = Function.prototype;
@@ -2022,6 +2022,30 @@ if ($stringify) {
   });
 }
 
+const useCheckHaveContent = () => {
+  const contentletDivRef = useRef(null);
+  const [haveContent, setHaveContent] = useState(false);
+  useEffect(() => {
+    if (!contentletDivRef.current) {
+      return;
+    }
+    const childElement = contentletDivRef.current.firstElementChild;
+    if (!childElement) {
+      return;
+    }
+    const height = childElement.getBoundingClientRect().height;
+    if (height > 0) {
+      setHaveContent(true);
+      return;
+    }
+    setHaveContent(false);
+  }, [contentletDivRef]);
+  return {
+    contentletDivRef,
+    haveContent
+  };
+};
+
 /**
  * Component to render when there is no component for the content type.
  *
@@ -2062,6 +2086,10 @@ function Container({
     identifier,
     uuid
   } = containerRef;
+  const {
+    haveContent,
+    contentletDivRef
+  } = useCheckHaveContent();
   // Get the containers from the global context
   const {
     pageAsset: {
@@ -2106,6 +2134,10 @@ function Container({
       "data-dot-type": contentlet.contentType,
       "data-dot-container": JSON.stringify(container),
       "data-dot-on-number-of-pages": contentlet.onNumberOfPages,
+      ref: contentletDivRef,
+      style: {
+        minHeight: haveContent ? undefined : '4rem'
+      },
       children: jsx(Component, Object.assign({}, contentlet))
     }, contentlet.identifier) : ( /*#__PURE__*/createElement$1(Component, Object.assign({}, contentlet, {
       key: contentlet.identifier
@@ -2145,16 +2177,19 @@ function Column({
     startClass,
     endClass
   } = getPositionStyleClasses(column.leftOffset, column.width + column.leftOffset);
-  const combinedClasses = combineClasses([styles[endClass], styles[startClass], column.styleClass]);
+  const combinedClasses = combineClasses([styles[endClass], styles[startClass]]);
   const columnProps = isInsideEditor ? {
     'data-dot': 'column',
     'data-testid': 'column'
   } : {};
   return jsx("div", Object.assign({}, columnProps, {
     className: combinedClasses,
-    children: column.containers.map(container => jsx(Container, {
-      containerRef: container
-    }, `${container.identifier}-${container.uuid}`))
+    children: jsx("div", {
+      className: column.styleClass,
+      children: column.containers.map(container => jsx(Container, {
+        containerRef: container
+      }, `${container.identifier}-${container.uuid}`))
+    })
   }));
 }
 
@@ -2173,18 +2208,23 @@ const Row = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     row
   } = props;
-  const combinedClasses = combineClasses([styles$1.row, row.styleClass]);
   const rowProps = isInsideEditor ? {
     'data-dot': 'row',
     'data-testid': 'row',
     ref
   } : {};
-  return jsx("div", Object.assign({}, rowProps, {
-    className: combinedClasses,
-    children: row.columns.map((column, index) => jsx(Column, {
-      column: column
-    }, index))
-  }));
+  return jsx("div", {
+    className: row.styleClass,
+    children: jsx("div", {
+      className: "container",
+      children: jsx("div", Object.assign({}, rowProps, {
+        className: styles$1.row,
+        children: row.columns.map((column, index) => jsx(Column, {
+          column: column
+        }, index))
+      }))
+    })
+  });
 });
 
 /**

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.42",
+  "version": "0.0.1-alpha.44",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.42",
+    "@dotcms/client": "0.0.1-alpha.44",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dotCMS/core.git#master"
+    "url": "git+https://github.com/dotCMS/core.git#main"
   },
   "keywords": [
     "dotCMS",
@@ -26,7 +26,7 @@
   "bugs": {
     "url": "https://github.com/dotCMS/core/issues"
   },
-  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md",
+  "homepage": "https://github.com/dotCMS/core/tree/main/core-web/libs/sdk/react/README.md",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/lib/hooks/useCheckHaveContent.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useCheckHaveContent: () => {
+    contentletDivRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    haveContent: boolean;
+};