@dotcms/react 0.0.1-alpha.3 → 0.0.1-alpha.4

package/index.esm.js

@@ -2527,7 +2527,37 @@ function useEventMessageHandler({
   reload = window.location.reload
 }) {
   const rows = useRef([]);
+  const observer = useRef(null);
   const [isInsideEditor, setIsInsideEditor] = useState(false);
+  useEffect(() => {
+    var _observer$current;
+    observer.current = new MutationObserver(mutationsList => {
+      for (const {
+        addedNodes,
+        removedNodes,
+        type
+      } of mutationsList) {
+        if (type === 'childList') {
+          const didNodesChanged = [...Array.from(addedNodes), ...Array.from(removedNodes)].filter(node => {
+            var _node$dataset;
+            return ((_node$dataset = node.dataset) == null ? void 0 : _node$dataset.dot) === 'contentlet';
+          }).length;
+          if (didNodesChanged) {
+            postMessageToEditor({
+              action: CUSTOMER_ACTIONS.CONTENT_CHANGE
+            });
+          }
+        }
+      }
+    });
+    (_observer$current = observer.current) == null || _observer$current.observe(document, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      if (observer.current) observer.current.disconnect();
+    };
+  }, []);
   useEffect(() => {
     // If the page is not inside an iframe we do nothing.
     if (window.parent === window) return;
@@ -2653,6 +2683,28 @@ var css_248z = ".column-module_col-start-1__GK-q- {\n    grid-column-start: 1;\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-span-1":"column-module_col-span-1__vOPKg","col-span-2":"column-module_col-span-2__qVdyn","col-span-3":"column-module_col-span-3__brcdA","col-span-4":"column-module_col-span-4__1-c-f","col-span-5":"column-module_col-span-5__nAGLD","col-span-6":"column-module_col-span-6__emtw7","col-span-7":"column-module_col-span-7__Ad5-V","col-span-8":"column-module_col-span-8__gEnsA","col-span-9":"column-module_col-span-9__jWemC","col-span-10":"column-module_col-span-10__Dzuph","col-span-11":"column-module_col-span-11__Xgct2","col-span-12":"column-module_col-span-12__LvJrY"};
 styleInject(css_248z);
 
+const FAKE_CONTENLET = {
+  identifier: 'TEMP_EMPTY_CONTENTLET',
+  title: 'TEMP_EMPTY_CONTENTLET',
+  contentType: 'TEMP_EMPTY_CONTENTLET_TYPE',
+  inode: 'TEMPY_EMPTY_CONTENTLET_INODE',
+  widgetTitle: 'TEMP_EMPTY_CONTENTLET'
+};
+function EmptyContainer() {
+  return jsx("div", {
+    "data-testid": "empty-container",
+    style: {
+      width: '100%',
+      backgroundColor: '#ECF0FD',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      color: '#030E32',
+      height: '10rem'
+    },
+    children: "This container is empty."
+  });
+}
 function NoContent({
   contentType
 }) {
@@ -2684,7 +2736,8 @@ function Container({
     pageContainers,
     path
   } = getContainersData(containers, containerRef);
-  const contentletsId = contentlets.map(contentlet => contentlet.identifier);
+  const updatedContentlets = contentlets.length > 0 ? contentlets : [FAKE_CONTENLET];
+  const contentletsId = updatedContentlets.map(contentlet => contentlet.identifier);
   const container = {
     acceptTypes,
     contentletsId,
@@ -2726,9 +2779,10 @@ function Container({
       }
     });
   }
-  const renderContentlets = contentlets.map(contentlet => {
+  const renderContentlets = updatedContentlets.map(contentlet => {
     var _viewAs$persona2;
-    const Component = components[contentlet.contentType] || NoContent;
+    const ContentTypeComponent = components[contentlet.contentType] || NoContent;
+    const Component = contentlet.identifier === 'TEMP_EMPTY_CONTENTLET' ? EmptyContainer : ContentTypeComponent;
     const contentletPayload = {
       container,
       contentlet: {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18",
-    "@dotcms/client": "latest"
+    "@dotcms/client": "0.0.1-alpha.4"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {