@dotcms/react 1.5.5-next.2245 → 1.5.5-next.2260

package/lib/next/components/Container/Container.esm.js

@@ -4,6 +4,7 @@ import { useContext, useMemo } from 'react';
 import { getContainersData, getContentletsInContainer, getDotContainerAttributes } from '@dotcms/uve/internal';
 import { ContainerNotFound, EmptyContainer } from './ContainerFallbacks.esm.js';
 import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
+import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
 import { Contentlet } from '../Contentlet/Contentlet.esm.js';
 
 /**
@@ -31,6 +32,7 @@ function Container({
   const {
     pageAsset
   } = useContext(DotCMSPageContext);
+  const isDevMode = useIsDevMode();
   const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
   const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
   if (!containerData) {
@@ -39,7 +41,8 @@ function Container({
     });
   }
   const isEmpty = contentlets.length === 0;
-  const dotAttributes = getDotContainerAttributes(containerData);
+  // Container metadata is editor-only — strip it from live output.
+  const dotAttributes = isDevMode ? getDotContainerAttributes(containerData) : {};
   if (isEmpty) {
     return jsx(EmptyContainer, Object.assign({}, dotAttributes));
   }

package/lib/next/components/Container/ContainerFallbacks.esm.js

@@ -39,7 +39,7 @@ const ContainerNotFound = ({
  *
  * Component to display when a container is empty.
  *
- * @param {DotContainerAttributes} dotAttributes
+ * @param {Partial<DotContainerAttributes>} dotAttributes
  * @return {*}
  */
 const EmptyContainer = dotAttributes => {

package/lib/next/components/Contentlet/Contentlet.esm.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useMemo, useContext } from 'react';
-import { getDotContentletAttributes, CUSTOM_NO_COMPONENT } from '@dotcms/uve/internal';
+import { getDotContentletAttributes, getAnalyticsContentletAttributes, CUSTOM_NO_COMPONENT } from '@dotcms/uve/internal';
 import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
 import { useCheckVisibleContent } from '../../hooks/useCheckVisibleContent.esm.js';
+import { useIsAnalyticsActive } from '../../hooks/useIsAnalyticsActive.esm.js';
 import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
 import { FallbackComponent } from '../FallbackComponent/FallbackComponent.esm.js';
 
@@ -34,14 +35,26 @@ function Contentlet({
 }) {
   const ref = useRef(null);
   const isDevMode = useIsDevMode();
+  const isAnalyticsActive = useIsAnalyticsActive();
   const haveContent = useCheckVisibleContent(ref);
   const style = useMemo(() => isDevMode ? {
     minHeight: haveContent ? undefined : '4rem'
   } : {}, [isDevMode, haveContent]);
-  // UVE attributes - always applied
-  const dotAttributes = useMemo(() => getDotContentletAttributes(contentlet, container), [contentlet, container]);
+  // In edit mode we emit the full set of editor metadata. In live mode we
+  // strip it to avoid leaking internal identifiers, keeping only the minimal
+  // set Analytics needs (and only while Analytics is active).
+  const dotAttributes = useMemo(() => {
+    if (isDevMode) {
+      return Object.assign({}, getDotContentletAttributes(contentlet, container), {
+        'data-dot-object': 'contentlet'
+      });
+    }
+    if (isAnalyticsActive) {
+      return getAnalyticsContentletAttributes(contentlet);
+    }
+    return {};
+  }, [isDevMode, isAnalyticsActive, contentlet, container]);
   return jsx("div", Object.assign({}, dotAttributes, {
-    "data-dot-object": "contentlet",
     className: CONTENTLET_CLASS,
     ref: ref,
     style: style,

package/lib/next/hooks/useIsAnalyticsActive.esm.js

@@ -0,0 +1,26 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { ANALYTICS_READY_EVENT, isDotAnalyticsActive } from '@dotcms/uve/internal';
+
+/**
+ * @internal
+ * A React hook that determines whether DotCMS Analytics is active on the page.
+ *
+ * It reads the analytics active flag on mount and subscribes to the
+ * `dotcms:analytics:ready` event so contentlets re-render with the attributes
+ * Analytics needs, regardless of initialization order.
+ *
+ * @returns {boolean} - `true` when analytics is active; otherwise, `false`.
+ */
+const useIsAnalyticsActive = () => {
+  const [isAnalyticsActive, setIsAnalyticsActive] = useState(false);
+  useEffect(() => {
+    const updateState = () => setIsAnalyticsActive(isDotAnalyticsActive());
+    updateState();
+    window.addEventListener(ANALYTICS_READY_EVENT, updateState);
+    return () => window.removeEventListener(ANALYTICS_READY_EVENT, updateState);
+  }, []);
+  return isAnalyticsActive;
+};
+
+export { useIsAnalyticsActive };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.5.5-next.2245",
+  "version": "1.5.5-next.2260",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/lib/next/components/Container/ContainerFallbacks.d.ts

@@ -18,7 +18,7 @@ export declare const ContainerNotFound: ({ identifier }: {
  *
  * Component to display when a container is empty.
  *
- * @param {DotContainerAttributes} dotAttributes
+ * @param {Partial<DotContainerAttributes>} dotAttributes
  * @return {*}
  */
-export declare const EmptyContainer: (dotAttributes: DotContainerAttributes) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EmptyContainer: (dotAttributes: Partial<DotContainerAttributes>) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/hooks/useIsAnalyticsActive.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @internal
+ * A React hook that determines whether DotCMS Analytics is active on the page.
+ *
+ * It reads the analytics active flag on mount and subscribes to the
+ * `dotcms:analytics:ready` event so contentlets re-render with the attributes
+ * Analytics needs, regardless of initialization order.
+ *
+ * @returns {boolean} - `true` when analytics is active; otherwise, `false`.
+ */
+export declare const useIsAnalyticsActive: () => boolean;