@dotcms/react 0.0.1-alpha.37 → 0.0.1-alpha.38

package/index.esm.js

@@ -1623,6 +1623,16 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
+/**
+ * Custom Hook to handle the DotCMS editor interaction with the page.
+ *
+ * @category Hooks
+ * @param {DotcmsPageProps} props {
+ *     pageContext,
+ *     config,
+ * }
+ * @returns {DotCMSPageContext} The context for a DotCMS page provided by the editor.
+ */
 const useDotcmsEditor = ({
   pageContext,
   config
@@ -1637,7 +1647,6 @@ const useDotcmsEditor = ({
   }));
   /**
    * Initializes the DotCMS editor.
-   *
    */
   useEffect(() => {
     if (!isInsideEditor()) {
@@ -1654,7 +1663,6 @@ const useDotcmsEditor = ({
   }, [pathname]);
   /**
    * Reloads the page when changes are made in the editor.
-   *
    */
   useEffect(() => {
     const insideEditor = isInsideEditor();
@@ -1676,7 +1684,7 @@ const useDotcmsEditor = ({
       action: CUSTOMER_ACTIONS.CLIENT_READY,
       payload: editor
     });
-  }, [pathname]);
+  }, [pathname, editor]);
   /**
    * Updates the page asset when changes are made in the editor.
    */
@@ -1696,6 +1704,11 @@ const useDotcmsEditor = ({
   return state;
 };
 
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
 const PageContext = /*#__PURE__*/createContext(null);
 
 /**
@@ -1748,6 +1761,10 @@ var css_248z$1 = ".row-module_row__8V7Eh {\n    display: grid;\n    grid-templat
 var styles$1 = {"row":"row-module_row__8V7Eh"};
 styleInject(css_248z$1);
 
+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);
+
 const endClassMap = {
   1: 'col-end-1',
   2: 'col-end-2',
@@ -1777,6 +1794,13 @@ const startClassMap = {
   11: 'col-start-11',
   12: 'col-start-12'
 };
+/**
+ * Get the container data from the containers object using the current container reference obtained from the layout.
+ *
+ * @param {ContainerData} containers
+ * @param {DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]} containerRef
+ * @returns {Object} Container with all the data it has.
+ */
 const getContainersData = (containers, containerRef) => {
   const {
     identifier,
@@ -1800,7 +1824,20 @@ const getContainersData = (containers, containerRef) => {
     variantId
   });
 };
+/**
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
 const combineClasses = classes => classes.filter(Boolean).join(' ');
+/**
+ * Get the start and end classes for the column based on the left offset and width.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @returns {Object} Start and end classes
+ */
 const getPositionStyleClasses = (start, end) => {
   const startClass = startClassMap[start];
   const endClass = endClassMap[end];
@@ -1810,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;
@@ -1989,6 +2022,12 @@ if ($stringify) {
   });
 }
 
+/**
+ * Component to render when there is no component for the content type.
+ *
+ * @param {{ readonly contentType: string }} { contentType }
+ * @return {*}
+ */
 function NoComponent({
   contentType
 }) {
@@ -1997,9 +2036,22 @@ function NoComponent({
     children: ["No Component for ", contentType]
   });
 }
+/**
+ * Component to render when there is no content in the container.
+ *
+ * @return {*}
+ */
 function EmptyContent() {
   return null;
 }
+/**
+ * Renders a Container with its content using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ContainerProps} { containerRef }
+ * @return {JSX.Element} Rendered container with content
+ */
 function Container({
   containerRef
 }) {
@@ -2075,6 +2127,14 @@ function Container({
   });
 }
 
+/**
+ * Renders a Column with its containers using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column }
+ * @return {JSX.Element} Rendered column with containers
+ */
 function Column({
   column
 }) {
@@ -2085,25 +2145,29 @@ 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}`))
+    })
   }));
 }
 
 /**
- * Renders a row
+ * This component renders a row with all it's content using the layout provided by dotCMS Page API.
  *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
  * @category Components
  * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
- * @return {*}
+ * @return {JSX.Element} Rendered rows with columns
  */
 const Row = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -2112,18 +2176,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))
+      }))
+    })
+  });
 });
 
 /**
@@ -4414,6 +4483,33 @@ const TINYMCE_CONFIG = {
 };
 
 const MCE_URL = '/ext/tinymcev7/tinymce.min.js';
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
 function DotEditableText({
   mode = 'plain',
   format = 'text',
@@ -4442,7 +4538,7 @@ function DotEditableText({
       format
     });
     setContent(content);
-  }, [format, fieldName, contentlet == null ? void 0 : contentlet[fieldName]]);
+  }, [format, fieldName, contentlet]);
   useEffect(() => {
     if (!isInsideEditor()) {
       return;
@@ -4555,6 +4651,12 @@ function useDotcmsPageContext() {
   return useContext(PageContext);
 }
 
+/**
+ * Represents the different types of Blocks that can be used in the Block Editor
+ *
+ * @export
+ * @enum {number}
+ */
 var Blocks;
 (function (Blocks) {
   Blocks["PARAGRAPH"] = "paragraph";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.37",
+  "version": "0.0.1-alpha.38",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.37",
+    "@dotcms/client": "0.0.1-alpha.38",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",

package/src/lib/components/Column/Column.d.ts

@@ -1,5 +1,19 @@
 import { DotCMSPageContext } from '../../models';
+/**
+ * Props for Column component to render a column with its containers.
+ *
+ * @export
+ * @interface ColumnProps
+ */
 export interface ColumnProps {
     readonly column: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0];
 }
+/**
+ * Renders a Column with its containers using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column }
+ * @return {JSX.Element} Rendered column with containers
+ */
 export declare function Column({ column }: ColumnProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,19 @@
 import { DotCMSPageContext } from '../../models';
+/**
+ * Props for the Container component.
+ *
+ * @export
+ * @interface ContainerProps
+ */
 export interface ContainerProps {
     readonly containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0];
 }
+/**
+ * Renders a Container with its content using information provided by dotCMS Page API.
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ContainerProps} { containerRef }
+ * @return {JSX.Element} Rendered container with content
+ */
 export declare function Container({ containerRef }: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/DotEditableText/DotEditableText.d.ts

@@ -1,3 +1,31 @@
+/// <reference types="react" />
 import { DotEditableTextProps } from './utils';
-export declare function DotEditableText({ mode, format, contentlet, fieldName }: Readonly<DotEditableTextProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+export declare function DotEditableText({ mode, format, contentlet, fieldName }: Readonly<DotEditableTextProps>): JSX.Element;
 export default DotEditableText;

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

@@ -16,10 +16,11 @@ export interface RowProps {
     row: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0];
 }
 /**
- * Renders a row
+ * This component renders a row with all it's content using the layout provided by dotCMS Page API.
  *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
  * @category Components
  * @param {React.ForwardedRef<HTMLDivElement, RowProps>} ref
- * @return {*}
+ * @return {JSX.Element} Rendered rows with columns
  */
 export declare const Row: import("react").ForwardRefExoticComponent<RowProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/contexts/PageContext.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
 import { DotCMSPageContext } from '../models';
+/**
+ * The `PageContext` is a React context that provides access to the DotCMS page context.
+ *
+ * @category Contexts
+ */
 export declare const PageContext: import("react").Context<DotCMSPageContext | null>;

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

@@ -1,3 +1,13 @@
 import { DotcmsPageProps } from '../components/DotcmsLayout/DotcmsLayout';
 import { DotCMSPageContext } from '../models';
+/**
+ * Custom Hook to handle the DotCMS editor interaction with the page.
+ *
+ * @category Hooks
+ * @param {DotcmsPageProps} props {
+ *     pageContext,
+ *     config,
+ * }
+ * @returns {DotCMSPageContext} The context for a DotCMS page provided by the editor.
+ */
 export declare const useDotcmsEditor: ({ pageContext, config }: DotcmsPageProps) => DotCMSPageContext;

package/src/lib/models/blocks.interface.d.ts

@@ -1,8 +1,20 @@
 /// <reference types="react" />
 import { ContentNode } from './content-node.interface';
+/**
+ * Represents a Block of content provided by the Block Editor
+ *
+ * @export
+ * @interface Block
+ */
 export interface Block {
     content: ContentNode[];
 }
+/**
+ * Props for a contentlet inside the Block Editor
+ *
+ * @export
+ * @interface DotContentletProps
+ */
 export interface DotContentletProps {
     title: string;
     baseType: string;
@@ -33,9 +45,21 @@ export interface DotContentletProps {
     mimeType: string;
     thumbnail?: string;
 }
+/**
+ * Props for a block inside the Block Editor Component
+ *
+ * @export
+ * @interface BlockProps
+ */
 export interface BlockProps {
     children: React.ReactNode;
 }
+/**
+ * Represents the different types of Blocks that can be used in the Block Editor
+ *
+ * @export
+ * @enum {number}
+ */
 export declare enum Blocks {
     PARAGRAPH = "paragraph",
     HEADING = "heading",

package/src/lib/models/content-node.interface.d.ts

@@ -1,9 +1,21 @@
 /// <reference types="react" />
 import { BlockProps } from './blocks.interface';
+/**
+ * Represents a Mark used by text content in the Block Editor
+ *
+ * @export
+ * @interface Mark
+ */
 export interface Mark {
     type: string;
     attrs: Record<string, string>;
 }
+/**
+ * Represents a Content Node used by the Block Editor
+ *
+ * @export
+ * @interface ContentNode
+ */
 export interface ContentNode {
     type: string;
     content: ContentNode[];
@@ -11,19 +23,60 @@ export interface ContentNode {
     marks?: Mark[];
     text?: string;
 }
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
 export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+/**
+ * Represents a CodeBlock used by the Block Editor Component
+ * @export
+ * @interface CodeBlockProps
+ */
 export type CodeBlockProps = BlockProps & ContentNode;
+/**
+ * Represents a Heading used by the Block Editor Component
+ * @export
+ * @interface HeadingProps
+ */
 export type HeadingProps = BlockProps & ContentNode;
+/**
+ * Represents a Link used by the Block Editor Component
+ * @export
+ * @interface LinkProps
+ */
 export type LinkProps = BlockProps & {
     attrs?: Mark['attrs'];
 };
+/**
+ * Represents a Paragraph used by the Block Editor Component
+ * @export
+ * @interface ParagraphProps
+ */
 export type ParagraphProps = BlockProps & ContentNode;
+/**
+ * Represents a DotCMSVideo used by the Block Editor Component
+ * @export
+ * @interface DotCMSVideoProps
+ */
 export type DotCMSVideoProps = ContentNode['attrs'] & {
     data?: Record<string, string>;
 };
+/**
+ * Represents a DotCMSImage used by the Block Editor Component
+ * @export
+ * @interface DotCMSImageProps
+ */
 export type DotCMSImageProps = ContentNode['attrs'] & {
     data?: Record<string, unknown>;
 };
+/**
+ * Represents a DotContent used by the Block Editor Component
+ * @export
+ * @interface DotContentProps
+ */
 export type DotContentProps = ContentNode & {
     customRenderers?: CustomRenderer;
 };

package/src/lib/utils/utils.d.ts

@@ -1,4 +1,11 @@
 import { ContainerData, DotCMSPageContext } from '../models';
+/**
+ * Get the container data from the containers object using the current container reference obtained from the layout.
+ *
+ * @param {ContainerData} containers
+ * @param {DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]} containerRef
+ * @returns {Object} Container with all the data it has.
+ */
 export declare const getContainersData: (containers: ContainerData, containerRef: DotCMSPageContext['pageAsset']['layout']['body']['rows'][0]['columns'][0]['containers'][0]) => {
     acceptTypes: string;
     contentlets: {
@@ -16,7 +23,20 @@ export declare const getContainersData: (containers: ContainerData, containerRef
     maxContentlets: number;
     parentPermissionable: Record<string, string>;
 };
+/**
+ * Combine classes into a single string.
+ *
+ * @param {string[]} classes
+ * @returns {string} Combined classes
+ */
 export declare const combineClasses: (classes: string[]) => string;
+/**
+ * Get the start and end classes for the column based on the left offset and width.
+ *
+ * @param {number} start
+ * @param {number} end
+ * @returns {Object} Start and end classes
+ */
 export declare const getPositionStyleClasses: (start: number, end: number) => {
     startClass: string;
     endClass: string;