@dotcms/react 0.0.1-beta.9 → 1.0.0

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.9",
+  "version": "1.0.0",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.9",
-    "@dotcms/uve": "0.0.1-beta.9",
-    "@tinymce/tinymce-react": "^5.1.1"
+    "@dotcms/uve": "^1.0.0",
+    "@dotcms/client": "^1.0.0"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-react": "6.2.1"
+  },
+  "devDependencies": {
+    "@dotcms/types": "latest"
   },
   "description": "Official React Components library to render a dotCMS page.",
   "repository": {
@@ -27,19 +32,12 @@
     ".": {
       "import": "./index.esm.js",
       "types": "./index.esm.d.ts"
-    },
-    "./next": {
-      "import": "./next.esm.js",
-      "types": "./next.esm.d.ts"
     }
   },
   "typesVersions": {
     "*": {
       ".": [
         "./src/index.d.ts"
-      ],
-      "next": [
-        "./src/next.d.ts"
       ]
     }
   },

package/src/index.d.ts

@@ -1 +1,7 @@
-export * from './lib/deprecated/deprecated_api';
+export { DotCMSLayoutBody } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
+export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
+export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';
+export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage';
+export { DotCMSEditableText } from './lib/next/components/DotCMSEditableText/DotCMSEditableText';
+export { DotCMSBlockEditorRenderer, BlockEditorRendererProps } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';
+export { DotCMSLayoutBodyProps } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';

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/{deprecated/components/BlockEditorRenderer/item → next/components/DotCMSBlockEditorRenderer/components}/BlockEditorBlock.d.ts

@@ -1,4 +1,9 @@
-import { ContentNode, CustomRenderer } from '../../../models/content-node.interface';
+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.
  *
@@ -6,7 +11,5 @@ import { ContentNode, CustomRenderer } from '../../../models/content-node.interf
  * @param customRenderers - Optional custom renderers for specific node types.
  * @returns The rendered block editor item.
  */
-export declare const BlockEditorBlock: ({ content, customRenderers }: {
-    content: ContentNode[];
-    customRenderers?: CustomRenderer;
-}) => import("react/jsx-runtime").JSX.Element[];
+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/DotContent.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/{deprecated/components/BlockEditorRenderer → next/components/DotCMSBlockEditorRenderer/components}/blocks/Lists.d.ts

@@ -1,22 +1,26 @@
-import { BlockProps } from '../../../models/blocks.interface';
+/// <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 }: BlockProps) => import("react/jsx-runtime").JSX.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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BulletList: ({ children }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+export declare const NoComponentProvided: ({ contentType }: {
+    contentType: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/lib/{deprecated/components/BlockEditorRenderer → next/components/DotCMSBlockEditorRenderer/components}/blocks/Table.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ContentNode } from '../../../models/content-node.interface';
+import { BlockEditorNode } from '@dotcms/types';
 interface TableRendererProps {
-    content: ContentNode[];
+    content: BlockEditorNode[];
     blockEditorItem: React.FC<{
-        content: ContentNode[];
+        content: BlockEditorNode[];
     }>;
 }
 /**

package/src/lib/{deprecated/components/BlockEditorRenderer → next/components/DotCMSBlockEditorRenderer/components}/blocks/Texts.d.ts

@@ -1,29 +1,40 @@
-import { BlockProps } from '../../../models/blocks.interface';
-import { ContentNode, HeadingProps, LinkProps, ParagraphProps } from '../../../models/content-node.interface';
+/// <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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+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 }: BlockProps) => import("react/jsx-runtime").JSX.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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Underline: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders a paragraph element.
  *
@@ -31,7 +42,7 @@ export declare const Underline: ({ children }: BlockProps) => import("react/jsx-
  * @param attrs - The style attributes for the paragraph.
  * @returns The rendered paragraph element.
  */
-export declare const Paragraph: ({ children, attrs }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Paragraph: ({ children, node }: TextComponentProp) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders a link component.
  *
@@ -39,7 +50,7 @@ export declare const Paragraph: ({ children, attrs }: ParagraphProps) => import(
  * @param attrs - The attributes to be applied to the link.
  * @returns The rendered link component.
  */
-export declare const Link: ({ children, attrs }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ children, attrs }: MarkProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders a heading element with the specified level.
  *
@@ -47,25 +58,24 @@ export declare const Link: ({ children, attrs }: LinkProps) => import("react/jsx
  * @param attrs - The attributes for the heading.
  * @returns The rendered heading element.
  */
-export declare const Heading: ({ children, attrs }: HeadingProps) => import("react/jsx-runtime").JSX.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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+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 }: BlockProps) => import("react/jsx-runtime").JSX.Element;
-type TextBlockProps = Omit<ContentNode, 'content' | 'attrs'>;
+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: TextBlockProps) => string | import("react/jsx-runtime").JSX.Element | undefined;
+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/{deprecated/components/DotEditableText/DotEditableText.d.ts → next/components/DotCMSEditableText/DotCMSEditableText.d.ts}

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

package/src/lib/{deprecated/components/DotEditableText → next/components/DotCMSEditableText}/utils.d.ts

@@ -1,35 +1,35 @@
 import { IAllProps } from '@tinymce/tinymce-react';
-import { DotCMSContentlet } from '../../models';
+import { DotCMSBasicContentlet } from '@dotcms/types';
 export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
 export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
-export interface DotEditableTextProps {
+export interface DotCMSEditableTextProps<T extends DotCMSBasicContentlet> {
     /**
      * Represents the field name of the `contentlet` that can be edited
      *
-     * @memberof DotEditableTextProps
+     * @memberof DotCMSEditableTextProps
      */
-    fieldName: string;
+    fieldName: keyof T;
     /**
      * Represents the format of the editor which can be `text` or `html`
      *
      * @type {DOT_EDITABLE_TEXT_FORMAT}
-     * @memberof DotEditableTextProps
+     * @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 DotEditableTextProps
+     * @memberof DotCMSEditableTextProps
      */
     mode?: DOT_EDITABLE_TEXT_MODE;
     /**
      * Represents the `contentlet` that can be inline edited
      *
-     * @type {DotCMSContentlet}
-     * @memberof DotEditableTextProps
+     * @type {DotCMSBasicContentlet}
+     * @memberof DotCMSEditableTextProps
      */
-    contentlet: DotCMSContentlet;
+    contentlet: T;
 }
 export declare const TINYMCE_CONFIG: {
     [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { DotCMSPageRendererMode } from '../../contexts/DotCMSPageContext';
-import { DotCMSContentlet, DotCMSPageAsset } from '../../types';
-interface DotCMSLayoutBodyProps {
+import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
+export 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;
 }
 /**
@@ -23,4 +24,3 @@ interface DotCMSLayoutBodyProps {
  *
  */
 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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UVE_MODE } from '@dotcms/uve/types';
+import { UVE_MODE } from '@dotcms/types';
 /**
  * Props for the DotCMSShow component.
  *
@@ -45,5 +45,5 @@ type DotCMSShowProps = {
  *
  * // LiveContentComponent will only be rendered if the UVE is in live mode.
  */
-export declare const DotCMSShow: ({ children, when }: DotCMSShowProps) => import("react").ReactNode;
+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/{useShowInUVE.d.ts → useDotCMSShowWhen.d.ts}

@@ -1,4 +1,4 @@
-import { UVE_MODE } from '@dotcms/uve/types';
+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
@@ -9,23 +9,23 @@ import { UVE_MODE } from '@dotcms/uve/types';
  *
  * @example
  * // Basic usage: Check if the UVE is in edit mode
- * const showInEditMode = useShowInUVE(UVE_MODE.EDIT);
+ * const showInEditMode = useDotCMSShowWhen(UVE_MODE.EDIT);
  * if (showInEditMode) {
  *     // Render edit-specific components
  * }
  *
  * @example
  * // Check if the UVE is in preview mode
- * const showInPreviewMode = useShowInUVE(UVE_MODE.PREVIEW);
+ * const showInPreviewMode = useDotCMSShowWhen(UVE_MODE.PREVIEW);
  * if (showInPreviewMode) {
  *     // Render preview-specific components
  * }
  *
  * @example
  * // Check if the UVE is in live mode
- * const showInLiveMode = useShowInUVE(UVE_MODE.LIVE);
+ * const showInLiveMode = useDotCMSShowWhen(UVE_MODE.LIVE);
  * if (showInLiveMode) {
  *     // Render live-specific components
  * }
  */
-export declare const useShowInUVE: (when: UVE_MODE) => boolean;
+export declare const useDotCMSShowWhen: (when: UVE_MODE) => boolean;