@dotcms/react 1.4.0 → 1.5.0

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

@@ -34,6 +34,7 @@ const DotCMSLayoutBody = ({
     mode: _mode,
     slots: _slots,
     children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
+      index: index + 1,
       row: row
     }, index)) : jsx(ErrorMessage, {})
   });

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { combineClasses } from '@dotcms/uve/internal';
+import { combineClasses, DOT_SECTION_ID_PREFIX } from '@dotcms/uve/internal';
 import styles from './Row.module.css.esm.js';
 import { Column } from '../Column/Column.esm.js';
 
@@ -12,10 +12,12 @@ import { Column } from '../Column/Column.esm.js';
  * @return {JSX.Element} Rendered rows with columns
  */
 const Row = ({
-  row
+  row,
+  index
 }) => {
   const customRowClass = combineClasses(['dot-row-container', row.styleClass || '']);
   return jsx("div", {
+    id: `${DOT_SECTION_ID_PREFIX}${index}`,
     className: customRowClass,
     children: jsx("div", {
       className: styles.row,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/lib/next/components/Row/Row.d.ts

@@ -8,6 +8,8 @@ import { DotPageAssetLayoutRow } from '@dotcms/types';
  */
 type DotCMSRowRendererProps = {
     row: DotPageAssetLayoutRow;
+    /** 1-based section index used as the `id` anchor for editor scroll-to-section. */
+    index: number;
 };
 /**
  * This component renders a row with all it's content using the layout provided by dotCMS Page API.
@@ -17,5 +19,5 @@ type DotCMSRowRendererProps = {
  * @param {React.ForwardedRef<HTMLDivElement, DotCMS>} ref
  * @return {JSX.Element} Rendered rows with columns
  */
-export declare const Row: ({ row }: DotCMSRowRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: ({ row, index }: DotCMSRowRendererProps) => import("react/jsx-runtime").JSX.Element;
 export {};