@contentful/experiences-components-react 1.39.0-alpha-20250528T1549-bd210e1.0 → 1.39.0-dev-20250528T1423-593ccdb.0

package/dist/index.d.ts

@@ -1,8 +1,9 @@
-import { ComponentDefinition, OptimizedImageAsset, StructureComponentProps, StyleProps } from '@contentful/experiences-core/types';
-import React, { HTMLAttributes } from 'react';
+import { ComponentDefinition, OptimizedImageAsset, ExperienceTreeNode, ExperienceDataSource, ExperienceUnboundValues, StyleProps, DragWrapperProps, ResolveDesignValueType } from '@contentful/experiences-core/types';
+import React$1, { RefObject, CSSProperties, SyntheticEvent } from 'react';
 import { Document } from '@contentful/rich-text-types';
+import { EntityStore } from '@contentful/experiences-core';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * The URL to navigate to when the button is clicked. When provided, the button will be wrapped in an anchor tag.
      * @default undefined
@@ -59,13 +60,13 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      * <Button>Go</Button>
      * ```
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const Button: React.FC<ButtonProps>;
+declare const Button: React$1.FC<ButtonProps>;
 
 declare const ButtonComponentDefinition: ComponentDefinition;
 
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
     /**
      * The text to display in the heading. If not provided, children will be used instead.
      * @default undefined
@@ -85,7 +86,7 @@ interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
      * <Heading>My Heading</Heading>
      * ```
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * The type of heading to render
      * @default h1
@@ -97,11 +98,11 @@ interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
      */
     type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
-declare const Heading: React.FC<HeadingProps>;
+declare const Heading: React$1.FC<HeadingProps>;
 
 declare const HeadingComponentDefinition: ComponentDefinition;
 
-interface RichTextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'value'> {
+interface RichTextProps extends Omit<React$1.HTMLAttributes<HTMLElement>, 'value'> {
     /**
      * Renders the text in a specific HTML tag.
      * @default p
@@ -131,11 +132,11 @@ interface RichTextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'value'>
      */
     value: Document;
 }
-declare const RichText: React.FC<RichTextProps>;
+declare const RichText: React$1.FC<RichTextProps>;
 
 declare const RichTextComponentDefinition: ComponentDefinition;
 
-interface TextProps extends React.HTMLAttributes<HTMLElement> {
+interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * The URL to navigate to when the text is clicked. When provided, the text will be wrapped in an anchor tag.
      * @default undefined
@@ -193,7 +194,7 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
      * <Text>My Text</Text>
      * ```
      */
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     /**
      * Renders the text in a specific HTML tag.
      * @default p
@@ -205,24 +206,38 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
      */
     as?: 'p' | 'span' | 'div' | 'label' | 'caption' | 'small' | 'strong' | 'em';
 }
-declare const Text: React.FC<TextProps>;
+declare const Text: React$1.FC<TextProps>;
 
 declare const TextComponentDefinition: ComponentDefinition;
 
-interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+interface ImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
     cfImageAsset?: OptimizedImageAsset | string;
 }
-declare const Image: React.FC<ImageProps>;
+declare const Image: React$1.FC<ImageProps>;
 
 declare const ImageComponentDefinition: ComponentDefinition;
 
-type ContentfulContainerAsHyperlinkProps = StructureComponentProps<{
+type ContentfulContainerAsHyperlinkProps<EditorMode = boolean> = (EditorMode extends true ? {
+    editorMode?: EditorMode;
+    node: ExperienceTreeNode;
+    dataSource?: ExperienceDataSource;
+    unboundValues?: ExperienceUnboundValues;
+    resolveDesignValue?: any;
+    entityStore?: RefObject<EntityStore>;
+    areEntitiesFetched?: boolean;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, any>) => React$1.ReactNode;
+} : {
+    editorMode: EditorMode;
+}) & {
+    children?: React$1.ReactNode;
     className?: string;
     cfHyperlink?: StyleProps['cfHyperlink'];
     cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
-}>;
+    WrapperComponent?: React$1.ElementType;
+    dragProps?: DragWrapperProps;
+};
 
-declare const ContentfulContainer: React.FC<ContentfulContainerAsHyperlinkProps>;
+declare const ContentfulContainer: React$1.FC<ContentfulContainerAsHyperlinkProps>;
 
 declare const containerDefinition: ComponentDefinition;
 declare const sectionDefinition: ComponentDefinition;
@@ -231,31 +246,71 @@ type ContentfulDividerProps = {
     className?: string;
     dragProps?: unknown;
 };
-declare const ContentfulDivider: ({ className, dragProps: _, ...props }: ContentfulDividerProps) => React.JSX.Element;
+declare const ContentfulDivider: ({ className, dragProps: _, ...props }: ContentfulDividerProps) => React$1.JSX.Element;
 
 declare const dividerDefinition: ComponentDefinition;
 
-type ColumnsProps = StructureComponentProps<{
+interface ColumnsBaseProps {
+    editorMode: boolean;
     className?: string;
-}>;
-declare const Columns: ({ className, children, ...otherProps }: ColumnsProps) => React.JSX.Element;
+    children?: React.ReactNode;
+}
+interface ColumnsEditorModeProps extends ColumnsBaseProps {
+    editorMode: true;
+    cfColumns: string;
+    node: ExperienceTreeNode;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
+    dragProps?: unknown;
+}
+interface ColumnsDeliveryModeProps extends ColumnsBaseProps {
+    editorMode: false;
+}
+interface SingleColumnEditorModeProps extends ColumnsBaseProps {
+    editorMode: true;
+    node: ExperienceTreeNode;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, unknown>) => React.ReactNode;
+    cfColumnSpan: string;
+    dragProps?: unknown;
+    ['data-ctfl-draggable-id']: string;
+    style?: CSSProperties;
+    className: string;
+    onMouseOver: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseOut: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseDown: (e: SyntheticEvent<Element, Event>) => void;
+    onMouseUp: (e: SyntheticEvent<Element, Event>) => void;
+    onClick: (e: SyntheticEvent<Element, Event>) => void;
+}
+interface SingleColumnDeliveryModeProps extends ColumnsBaseProps {
+    editorMode: false;
+}
+type ColumnsProps = ColumnsEditorModeProps | ColumnsDeliveryModeProps;
+type SingleColumnProps = SingleColumnEditorModeProps | SingleColumnDeliveryModeProps;
 
-type SingleColumnProps = StructureComponentProps<{
-    className?: string;
-}>;
-declare const SingleColumn: React.FC<SingleColumnProps>;
+declare const Columns: React$1.FC<ColumnsProps>;
+
+declare const SingleColumn: React$1.FC<SingleColumnProps>;
 
 declare const columnsDefinition: ComponentDefinition;
 declare const singleColumnDefinition: ComponentDefinition;
 
-type AssemblyProps = StructureComponentProps<HTMLAttributes<HTMLDivElement>>;
-declare const Assembly: React.FC<AssemblyProps>;
+type AssemblyProps<EditorMode = boolean> = EditorMode extends true ? {
+    children?: React$1.ReactNode;
+    className?: string;
+    cfHyperlink?: StyleProps['cfHyperlink'];
+    cfOpenInNewTab?: StyleProps['cfOpenInNewTab'];
+    editorMode?: EditorMode;
+    node: ExperienceTreeNode;
+    resolveDesignValue?: ResolveDesignValueType;
+    dragProps?: Record<string, any>;
+    renderDropzone: (node: ExperienceTreeNode, props?: Record<string, any>) => React$1.ReactNode;
+} : Record<string, any>;
+declare const Assembly: React$1.FC<AssemblyProps>;
 
 interface CarouselProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const Carousel: React.FC<CarouselProps>;
+declare const Carousel: React$1.FC<CarouselProps>;
 
 declare const carouselDefinition: ComponentDefinition;
 

package/dist/index.js

@@ -9,7 +9,6 @@ import 'md5';
 var css_248z$8 = "/* Initially added with PR #253 for each component, this is now a global setting\n * It is recommended on MDN to use this as a default for layouting.\n*/\n* {\n  box-sizing: border-box;\n}\n";
 styleInject(css_248z$8);
 
-/** @deprecated will be removed when dropping backward compatibility for old DND */
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -1586,7 +1585,7 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
+var css_248z$2 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
 styleInject(css_248z$2);
 
 const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
@@ -1611,29 +1610,31 @@ const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave,
 });
 Flex.displayName = 'Flex';
 
-function extractRenderProps(props) {
-    if (props.editorMode) {
-        const { editorMode, node, children, ...renderProps } = props;
-        return renderProps;
-    }
-    const { editorMode, children, ...renderProps } = props;
-    return renderProps;
-}
-
+/* eslint-disable */ /* TODO: fix eslint errors */
 const ContentfulContainerAsHyperlink = (props) => {
-    const { cfHyperlink, cfOpenInNewTab, editorMode, className, children, ...otherProps } = props;
-    const eventHandlingProps = editorMode === true ? { onClick: stopEventPropagation } : {};
-    const anchorTagProps = cfOpenInNewTab
-        ? {
-            target: '_blank',
-            rel: 'noopener noreferrer',
+    const { cfHyperlink, cfOpenInNewTab, editorMode, className, children } = props;
+    if (editorMode === false) {
+        let anchorTagProps = {};
+        if (cfOpenInNewTab) {
+            anchorTagProps = {
+                target: '_blank',
+                rel: 'noopener noreferrer',
+            };
         }
-        : {};
-    return (React.createElement("a", { className: combineClasses(className, 'contentful-container', 'contentful-container-link'), href: cfHyperlink, ...anchorTagProps, ...eventHandlingProps, ...extractRenderProps(otherProps) }, children));
-};
-const stopEventPropagation = (event) => {
-    event.stopPropagation();
-    event.preventDefault();
+        return (React.createElement("a", { className: combineClasses(className, 'contentful-container', 'contentful-container-link'), href: cfHyperlink, ...anchorTagProps }, children));
+    }
+    const { renderDropzone, node } = props;
+    const stopPropagationInEditorMode = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    };
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-container',
+        className: combineClasses(className, 'contentful-container', 'contentful-container-link'),
+        zoneId: node.data.id,
+        WrapperComponent: 'a',
+        onClick: stopPropagationInEditorMode,
+    });
 };
 
 /* eslint-disable */
@@ -1642,14 +1643,21 @@ const ContentfulContainer = (props) => {
     if (cfHyperlink) {
         return React.createElement(ContentfulContainerAsHyperlink, { ...props }, children);
     }
-    if (!editorMode) {
+    if (editorMode === false) {
         return (React.createElement(Flex, { "data-test-id": "contentful-container", className: combineClasses(className, 'contentful-container') }, children));
     }
     // Extract properties that are only available in editor mode
-    const { node } = props;
+    const { renderDropzone, node, dragProps = {}, ...editorModeProps } = props;
     const isEmpty = !node.children.length;
     const isSection = node.data.blockId === CONTENTFUL_COMPONENTS$1.section.id;
-    return (React.createElement(Flex, { "data-test-id": "contentful-container", ...extractRenderProps(props), className: combineClasses(className, 'contentful-container', isEmpty ? (isSection ? 'contentful-section-label' : 'contentful-container-label') : '') }, children));
+    return renderDropzone(node, {
+        ...editorModeProps,
+        ['data-test-id']: 'contentful-container',
+        id: 'ContentfulContainer',
+        className: combineClasses('contentful-container', className, isEmpty ? (isSection ? 'contentful-section-label' : 'contentful-container-label') : ''),
+        WrapperComponent: Flex,
+        dragProps,
+    });
 };
 
 const containerDefinition = {
@@ -1673,7 +1681,7 @@ const sectionDefinition = {
     },
 };
 
-var css_248z$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n";
+var css_248z$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n\n/* For the editor mode add this 10px tolerance to make it easier picking up the divider component.\n * Using the DND zone as precondition makes sure that we don't render this pseudo element in delivery. */\n\n[data-ctfl-zone-id='root'] .cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
 styleInject(css_248z$1);
 
 const ContentfulDivider = ({ className = '', 
@@ -1694,25 +1702,48 @@ const dividerDefinition = {
     },
 };
 
-var css_248z = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
+var css_248z = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
 styleInject(css_248z);
 
-const Columns = ({ className, children, ...otherProps }) => {
-    return (React.createElement("div", { className: combineClasses(className, 'cf-columns'), style: {
+const ColumnWrapper = forwardRef((props, ref) => {
+    return (React.createElement("div", { ref: ref, ...props, style: {
+            ...(props.style || {}),
             display: 'grid',
             gridTemplateColumns: 'repeat(12, [col-start] 1fr)',
-        }, ...extractRenderProps(otherProps) }, children));
+        } }, props.children));
+});
+ColumnWrapper.displayName = 'ColumnWrapper';
+const Columns = (props) => {
+    const { editorMode, className, children } = props;
+    if (!editorMode) {
+        return (React.createElement(ColumnWrapper, { className: combineClasses(className, 'cf-columns') }, children));
+    }
+    const { node, renderDropzone, dragProps = {}, ...rest } = props;
+    return renderDropzone(node, {
+        ...rest,
+        ['data-test-id']: 'contentful-columns',
+        id: 'ContentfulContainer',
+        className: combineClasses('cf-columns', className),
+        WrapperComponent: ColumnWrapper,
+        dragProps,
+    });
 };
 
 const SingleColumn = (props) => {
-    const { className, editorMode } = props;
-    if (!editorMode) {
-        return React.createElement(Flex, { className: className }, props.children);
+    const { className, editorMode, children } = props;
+    if (editorMode === false) {
+        return React.createElement(Flex, { className: className }, children);
     }
-    const { node, children } = props;
+    const { renderDropzone, node, className: _className, dragProps = {}, cfColumnSpan, editorMode: edit, ...editorProps } = props;
     const isEmpty = !node.children.length;
-    const mixedClassName = combineClasses('cf-single-column-wrapper', className, isEmpty ? 'cf-single-column-label' : '');
-    return (React.createElement(Flex, { ...extractRenderProps(props), className: mixedClassName }, children));
+    return renderDropzone(node, {
+        ['data-test-id']: 'contentful-single-column',
+        id: 'ContentfulSingleColumn',
+        className: combineClasses('cf-single-column-wrapper', className, isEmpty ? 'cf-single-column-label' : ''),
+        WrapperComponent: Flex,
+        dragProps,
+        ...editorProps,
+    });
 };
 
 const columnsDefinition = {
@@ -1734,7 +1765,18 @@ const singleColumnDefinition = {
 };
 
 const assemblyStyle = { display: 'contents' };
+// Feel free to do any magic as regards variable definitions for assemblies
+// Or if this isn't necessary by the time we figure that part out, we can bid this part farewell
 const Assembly = (props) => {
+    if (props.editorMode) {
+        const { node, dragProps, ...editorModeProps } = props;
+        return props.renderDropzone(node, {
+            ...editorModeProps,
+            ['data-test-id']: 'contentful-assembly',
+            className: props.className,
+            dragProps,
+        });
+    }
     // Using a display contents so assembly content/children
     // can appear as if they are direct children of the div wrapper's parent
     return React.createElement("div", { "data-test-id": "assembly", ...props, style: assemblyStyle });