@dotcms/react 0.0.1-beta.3 → 0.0.1-beta.30

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.30",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.3",
-    "@dotcms/uve": "0.0.1-beta.3",
-    "@tinymce/tinymce-react": "^5.1.1"
+    "@dotcms/client": "0.0.1-beta.30",
+    "@dotcms/uve": "0.0.1-beta.30",
+    "@tinymce/tinymce-react": "^6.0.0"
+  },
+  "devDependencies": {
+    "@dotcms/types": "next"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DotEditableTextProps } from './utils';
 /**
  * Allows inline edit content pulled from dotCMS API using TinyMCE editor

package/src/lib/deprecated/components/DotcmsLayout/DotcmsLayout.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DotCMSPageEditorConfig } from '@dotcms/client';
 import { DotCMSPageContext } from '../../models';
 /**

package/src/lib/deprecated/mocks/mockPageContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DotCMSPageContext, DotCMSContentlet } from '../models';
 export declare const dotcmsContentletMock: DotCMSContentlet;
 export declare const mockPageContext: DotCMSPageContext;

package/src/lib/next/__test__/mock.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '../types';
+import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn, DotCMSBasicContentlet } from '@dotcms/types';
 export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
 export declare const MOCK_CONTAINER: DotCMSColumnContainer;
 export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;
@@ -9,3 +9,4 @@ export declare const MOCK_CONTAINER_DATA: {
     acceptTypes: string;
     maxContentlets: number;
 };
+export declare const MOCK_CONTENTLET: DotCMSBasicContentlet;

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

@@ -1,4 +1,4 @@
-import { DotPageAssetLayoutColumn } from '../../types';
+import { DotPageAssetLayoutColumn } from '@dotcms/types';
 /**
  * @internal
  *

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

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer } from '../../types';
+import { DotCMSColumnContainer } from '@dotcms/types';
 /**
  * @internal
  *

package/src/lib/next/components/Container/{ContainerFallbakcs.d.ts → ContainerFallbacks.d.ts}

@@ -1,4 +1,4 @@
-import { DotContainerAttributes } from '../../utils';
+import { DotContainerAttributes } from '@dotcms/types/internal';
 /**
  * @internal
  *
@@ -10,7 +10,7 @@ import { DotContainerAttributes } from '../../utils';
  * @param {string} props.identifier - Container identifier
  * @returns {JSX.Element | null} Message about missing container or null in production
  */
-export declare const ContainerNoFound: ({ identifier }: {
+export declare const ContainerNotFound: ({ identifier }: {
     identifier: string;
 }) => import("react/jsx-runtime").JSX.Element | null;
 /**

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

@@ -1,4 +1,4 @@
-import { DotCMSContentlet } from '../../types';
+import { DotCMSBasicContentlet } from '@dotcms/types';
 /**
  * @internal
  *
@@ -8,7 +8,7 @@ import { DotCMSContentlet } from '../../types';
  * @property {string} container - The container identifier where the contentlet is placed
  */
 interface DotCMSContentletRendererProps {
-    contentlet: DotCMSContentlet;
+    contentlet: DotCMSBasicContentlet;
     container: string;
 }
 /**

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { BlockEditorContent } from '@dotcms/types';
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
+export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+export interface BlockEditorRendererProps {
+    blocks: BlockEditorContent;
+    style?: React.CSSProperties;
+    className?: string;
+    customRenderers?: CustomRenderer;
+}
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {BlockEditorContent} props.blocks - The blocks of content to render.
+ * @param {CustomRenderer} [props.customRenderers] - Optional custom renderers for specific block types.
+ * @param {string} [props.className] - Optional CSS class name for the container div.
+ * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.
+ * @returns {JSX.Element} A div containing the rendered blocks of content.
+ */
+export declare const DotCMSBlockEditorRenderer: ({ blocks, style, className, customRenderers }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.d.ts

@@ -0,0 +1,15 @@
+import { BlockEditorNode } from '@dotcms/types';
+import { CustomRenderer } from '../DotCMSBlockEditorRenderer';
+interface BlockEditorBlockProps {
+    content: BlockEditorNode[] | undefined;
+    customRenderers?: CustomRenderer;
+}
+/**
+ * Renders a block editor item based on the provided content and custom renderers.
+ *
+ * @param content - The content nodes to render.
+ * @param customRenderers - Optional custom renderers for specific node types.
+ * @returns The rendered block editor item.
+ */
+export declare const BlockEditorBlock: ({ content, customRenderers }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Code.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { BlockEditorNode } from '@dotcms/types';
+interface CodeBlockProps {
+    node: BlockEditorNode;
+    children: React.ReactNode;
+}
+/**
+ * Renders a code block component.
+ *
+ * @param attrs - The attributes of the code block.
+ * @param children - The content of the code block.
+ * @returns The rendered code block component.
+ */
+export declare const CodeBlock: ({ node, children }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+export declare const BlockQuote: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Contentlet.d.ts

@@ -0,0 +1,14 @@
+import { BlockEditorNode } from '@dotcms/types';
+import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
+interface DotContentProps {
+    customRenderers: CustomRenderer;
+    node: BlockEditorNode;
+}
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+export declare const DotContent: ({ customRenderers, node }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Image.d.ts

@@ -0,0 +1,10 @@
+import { BlockEditorNode } from '@dotcms/types';
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param node - The node for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+export declare const DotCMSImage: ({ node }: {
+    node: BlockEditorNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Lists.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+interface ListItemProps {
+    children: React.ReactNode;
+}
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+export declare const ListItem: ({ children }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+export declare const OrderedList: ({ children }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+export declare const BulletList: ({ children }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BlockEditorNode } from '@dotcms/types';
+interface TableRendererProps {
+    content: BlockEditorNode[];
+    blockEditorItem: React.FC<{
+        content: BlockEditorNode[];
+    }>;
+}
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+export declare const TableRenderer: React.FC<TableRendererProps>;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Texts.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import { BlockEditorMark, BlockEditorNode } from '@dotcms/types';
+interface MarkProps extends BlockEditorMark {
+    children: React.ReactNode;
+}
+interface TextComponentProp {
+    children: React.ReactNode;
+    node: BlockEditorNode;
+}
+interface TextNodeProps {
+    marks?: BlockEditorMark[];
+    text?: string;
+}
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+export declare const Bold: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+export declare const Italic: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+export declare const Strike: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+export declare const Underline: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+export declare const Paragraph: ({ children, node }: TextComponentProp) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+export declare const Link: ({ children, attrs }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+export declare const Heading: ({ children, node }: TextComponentProp) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+export declare const Superscript: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+export declare const Subscript: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+export declare const TextBlock: (props?: TextNodeProps) => string | import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Video.d.ts

@@ -0,0 +1,10 @@
+import { BlockEditorNode } from '@dotcms/types';
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+export declare const DotCMSVideo: ({ node }: {
+    node: BlockEditorNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

package/src/lib/next/components/DotCMSEditableText/utils.d.ts

@@ -0,0 +1,36 @@
+import { IAllProps } from '@tinymce/tinymce-react';
+import { DotCMSBasicContentlet } from '@dotcms/types';
+export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
+export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
+export interface DotCMSEditableTextProps {
+    /**
+     * Represents the field name of the `contentlet` that can be edited
+     *
+     * @memberof DotCMSEditableTextProps
+     */
+    fieldName: string;
+    /**
+     * Represents the format of the editor which can be `text` or `html`
+     *
+     * @type {DOT_EDITABLE_TEXT_FORMAT}
+     * @memberof DotCMSEditableTextProps
+     */
+    format?: DOT_EDITABLE_TEXT_FORMAT;
+    /**
+     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+     *
+     * @type {DOT_EDITABLE_TEXT_MODE}
+     * @memberof DotCMSEditableTextProps
+     */
+    mode?: DOT_EDITABLE_TEXT_MODE;
+    /**
+     * Represents the `contentlet` that can be inline edited
+     *
+     * @type {DotCMSBasicContentlet}
+     * @memberof DotCMSEditableTextProps
+     */
+    contentlet: DotCMSBasicContentlet;
+}
+export declare const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];
+};

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

@@ -1,36 +1,27 @@
 /// <reference types="react" />
-import { DotCMSPageRendererMode } from '../../contexts/DotCMSPageContext';
-import { DotCMSContentlet, DotCMSPageAsset } from '../../types';
-interface DotCMSLayoutBodyProps {
+import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
+interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet = DotCMSBasicContentlet> {
     page: DotCMSPageAsset;
-    components: Record<string, React.ComponentType<DotCMSContentlet>>;
+    components: {
+        [key: string]: React.ComponentType<TContentlet> | React.ComponentType<any>;
+    };
     mode?: DotCMSPageRendererMode;
 }
 /**
  * DotCMSLayoutBody component renders the layout body for a DotCMS page.
  *
- * It utilizes the page asset's layout body to render rows using the Row component.
- * If the layout body does not exist, it renders an error message.
- * It also provides context (DotCMSPageContext) with the page asset, optional user components,
- * and the renderer mode to its children.
+ * It utilizes the dotCMS page asset's layout body to render the page body.
+ * If the layout body does not exist, it renders an error message in the mode is `development`.
  *
  * @public
  * @component
  * @param {Object} props - Component properties.
  * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
- * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - Optional mapping of custom components for content rendering.
+ * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - mapping of custom components for content rendering.
  * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
  *
  * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
  *
- * -------------------------------------------------------------------
- *
- * El componente DotCMSLayoutBody renderiza el cuerpo del layout para una página de DotCMS.
- *
- * Utiliza el "body" del layout del asset de la página para renderizar las filas mediante el componente Row.
- * Si el "body" del layout no está presente, renderiza un mensaje de error.
- * También provee un contexto (DotCMSPageContext) con el asset de la página, componentes de usuario opcionales,
- * y el modo del renderizado para sus componentes hijos.
  */
 export declare const DotCMSLayoutBody: ({ page, components, mode }: DotCMSLayoutBodyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/next/components/DotCMSLayoutBody/components/ErrorMessage.d.ts

@@ -1,9 +1,6 @@
-import { DotCMSPageRendererMode } from '../../../contexts/DotCMSPageContext';
 /**
  * Error message component for when the page body is missing
  *
  * @return {JSX.Element} Error message component
  */
-export declare const ErrorMessage: ({ mode }: {
-    mode: DotCMSPageRendererMode;
-}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ErrorMessage: () => false | import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { UVE_MODE } from '@dotcms/types';
+/**
+ * Props for the DotCMSShow component.
+ *
+ * @typedef {Object} DotCMSShowProps
+ * @property {React.ReactNode} children - The children to be rendered when the condition is met.
+ * @property {UVE_MODE} [when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ */
+type DotCMSShowProps = {
+    children: React.ReactNode;
+    when?: UVE_MODE;
+};
+/**
+ * DotCMSShow component is used to conditionally render its children
+ * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
+ * is in a specified mode and only renders its children in that case.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
+ * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
+ *
+ * @example
+ * // Basic usage: Render content only in edit mode
+ * <DotCMSShow when={UVE_MODE.EDIT}>
+ *     <div>Edit Mode Content</div>
+ * </DotCMSShow>
+ *
+ * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
+ *
+ * @example
+ * // Render content in preview mode
+ * <DotCMSShow when={UVE_MODE.PREVIEW}>
+ *     <MyCustomPreviewComponent />
+ * </DotCMSShow>
+ *
+ * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
+ *
+ * @example
+ * // Render content in live mode
+ * <DotCMSShow when={UVE_MODE.LIVE}>
+ *     <LiveContentComponent />
+ * </DotCMSShow>
+ *
+ * // LiveContentComponent will only be rendered if the UVE is in live mode.
+ */
+export declare const DotCMSShow: ({ children, when }: DotCMSShowProps) => React.ReactNode | null;
+export {};

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

@@ -1,22 +1,22 @@
 /// <reference types="react" />
-import { DotCMSContentlet } from '../../types';
+import { DotCMSBasicContentlet } from '@dotcms/types';
 /**
  * @internal
  *
  * Type definition for components that can be used as fallback when no matching component is found
  */
-export type NoComponentType = React.ComponentType<DotCMSContentlet>;
+export type NoComponentType = React.ComponentType<DotCMSBasicContentlet>;
 /**
  * @internal
  *
  * Props for the FallbackComponent
  * @interface DotCMSFallbackComponentProps
- * @property {React.ComponentType<DotCMSContentlet>} [UserNoComponent] - Optional custom component to render when no matching component is found
- * @property {DotCMSContentlet} [contentlet] - The contentlet that couldn't be rendered
+ * @property {React.ComponentType<DotCMSBasicContentlet>} [UserNoComponent] - Optional custom component to render when no matching component is found
+ * @property {DotCMSBasicContentlet} [contentlet] - The contentlet that couldn't be rendered
  */
 interface DotCMSFallbackComponentProps {
-    contentlet: DotCMSContentlet;
-    UserNoComponent?: React.ComponentType<DotCMSContentlet>;
+    contentlet: DotCMSBasicContentlet;
+    UserNoComponent?: React.ComponentType<DotCMSBasicContentlet>;
 }
 /**
  * @internal

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

@@ -1,4 +1,4 @@
-import { DotPageAssetLayoutRow } from '../../types';
+import { DotPageAssetLayoutRow } from '@dotcms/types';
 /**
  * @internal
  *

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { DotCMSContentlet, DotCMSPageAsset } from '../types';
-export type DotCMSPageRendererMode = 'production' | 'development';
+import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
 /**
  * @internal
  *
@@ -13,7 +12,7 @@ export type DotCMSPageRendererMode = 'production' | 'development';
 export interface DotCMSPageContextProps {
     pageAsset: DotCMSPageAsset;
     mode: DotCMSPageRendererMode;
-    userComponents: Record<string, React.ComponentType<DotCMSContentlet>>;
+    userComponents: Record<string, React.ComponentType<DotCMSBasicContentlet>>;
 }
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.

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

@@ -0,0 +1,31 @@
+import { UVE_MODE } from '@dotcms/types';
+/**
+ * Custom hook to determine if the current UVE (Universal Visual Editor) mode
+ * matches the specified mode. This hook is useful for conditionally rendering
+ * components based on the UVE mode.
+ *
+ * @param {UVE_MODE} when - The UVE mode to check against.
+ * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
+ *
+ * @example
+ * // Basic usage: Check if the UVE is in edit mode
+ * const showInEditMode = useDotCMSShowWhen(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useDotCMSShowWhen(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useDotCMSShowWhen(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+export declare const useDotCMSShowWhen: (when: UVE_MODE) => boolean;