@sitecore-content-sdk/react 1.3.0-canary.9 → 1.4.0-canary.2

package/dist/esm/components/HiddenRendering.js

@@ -1,16 +1,16 @@
-import React from 'react';
-const baseStyles = {
-    backgroundSize: '3px 3px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '30px',
-    color: '#aaa',
-};
-const backgroundImageStyle = {
-    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
-};
-export const HiddenRendering = () => {
-    const styles = process.env.NODE_ENV === 'test' ? baseStyles : Object.assign(Object.assign({}, baseStyles), backgroundImageStyle);
-    return React.createElement("div", { style: styles }, "The component is hidden");
-};
+import React from 'react';
+const baseStyles = {
+    backgroundSize: '3px 3px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '30px',
+    color: '#aaa',
+};
+const backgroundImageStyle = {
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+};
+export const HiddenRendering = () => {
+    const styles = process.env.NODE_ENV === 'test' ? baseStyles : Object.assign(Object.assign({}, baseStyles), backgroundImageStyle);
+    return React.createElement("div", { style: styles }, "The component is hidden");
+};

package/dist/esm/components/Image.js

@@ -1,60 +1,65 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/* eslint-disable no-unused-vars */
-import { mediaApi } from '@sitecore-content-sdk/core/media';
-import React from 'react';
-import { addClassName } from '../utils';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
-    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
-    if (!src) {
-        return null;
-    }
-    addClassName(otherAttrs);
-    const newAttrs = Object.assign({}, otherAttrs);
-    // update image URL for content sdk handler and image rendering params
-    const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
-    if (srcSet) {
-        // replace with HTML-formatted srcset, including updated image URLs
-        newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
-    }
-    // always output original src as fallback for older browsers
-    newAttrs.src = resolvedSrc;
-    return newAttrs;
-};
-export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
-    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
-    const dynamicMedia = field;
-    if (isFieldValueEmpty(dynamicMedia)) {
-        return null;
-    }
-    // some wise-guy/gal is passing in a 'raw' image object value
-    const img = dynamicMedia.src
-        ? field
-        : dynamicMedia.value;
-    if (!img) {
-        return null;
-    }
-    // prevent metadata from being passed to the img tag
-    if (img.metadata) {
-        delete img.metadata;
-    }
-    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
-    if (attrs) {
-        return React.createElement("img", Object.assign({}, attrs));
-    }
-    return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
-Image.displayName = 'Image';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable no-unused-vars */
+import { mediaApi } from '@sitecore-content-sdk/core/media';
+import React from 'react';
+import { addClassName } from '../utils';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
+    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
+    if (!src) {
+        return null;
+    }
+    addClassName(otherAttrs);
+    const newAttrs = Object.assign({}, otherAttrs);
+    // update image URL for content sdk handler and image rendering params
+    const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
+    if (srcSet) {
+        // replace with HTML-formatted srcset, including updated image URLs
+        newAttrs.srcSet = mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
+    }
+    // always output original src as fallback for older browsers
+    newAttrs.src = resolvedSrc;
+    return newAttrs;
+};
+/**
+ * The Image component.
+ * @param {ImageProps} props component props
+ * @public
+ */
+export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if (isFieldValueEmpty(dynamicMedia)) {
+        return null;
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    // prevent metadata from being passed to the img tag
+    if (img.metadata) {
+        delete img.metadata;
+    }
+    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
+    if (attrs) {
+        return React.createElement("img", Object.assign({}, attrs));
+    }
+    return null; // we can't handle the truth
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
+Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -1,50 +1,55 @@
-'use client';
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from 'react';
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-export const Link = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef(
-// eslint-disable-next-line no-unused-vars
-(_a, ref) => {
-    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
-    const children = otherProps.children;
-    const dynamicField = field;
-    if (isFieldValueEmpty(dynamicField)) {
-        return null;
-    }
-    // handle link directly on field for forgetful devs
-    const link = dynamicField.href
-        ? field
-        : dynamicField.value;
-    if (!link) {
-        return null;
-    }
-    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
-    const querystring = link.querystring ? `?${link.querystring}` : '';
-    const anchorAttrs = {
-        href: `${link.href}${querystring}${anchor}`,
-        className: link.class,
-        title: link.title,
-        target: link.target,
-    };
-    if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) {
-        // information disclosure attack prevention keeps target blank site from getting ref to window.opener
-        anchorAttrs.rel = 'noopener noreferrer';
-    }
-    const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
-    const element = React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
-    return React.createElement(React.Fragment, null, element);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
-Link.displayName = 'Link';
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+/**
+ * The Link component.
+ * @param {LinkProps} props component props
+ * @public
+ */
+export const Link = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef(
+// eslint-disable-next-line no-unused-vars
+(_a, ref) => {
+    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
+    const dynamicField = field;
+    if (isFieldValueEmpty(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const link = dynamicField.href
+        ? field
+        : dynamicField.value;
+    if (!link) {
+        return null;
+    }
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+    const anchorAttrs = {
+        href: `${link.href}${querystring}${anchor}`,
+        className: link.class,
+        title: link.title,
+        target: link.target,
+    };
+    if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) {
+        // information disclosure attack prevention keeps target blank site from getting ref to window.opener
+        anchorAttrs.rel = 'noopener noreferrer';
+    }
+    const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
+    const element = React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
+    return React.createElement(React.Fragment, null, element);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+Link.displayName = 'Link';

package/dist/esm/components/MissingComponent.js

@@ -1,21 +1,21 @@
-import React from 'react';
-export const MissingComponent = (props) => {
-    const componentName = props.rendering && props.rendering.componentName
-        ? props.rendering.componentName
-        : 'Unnamed Component';
-    // error override would mean component is not unimplemented
-    !props.errorOverride &&
-        console.log(`Component props for unimplemented '${componentName}' component`, props);
-    const errorMessage = props.errorOverride ||
-        'Content SDK component is missing React implementation. See the developer console for more information.';
-    return (React.createElement("div", { style: {
-            background: 'darkorange',
-            outline: '5px solid orange',
-            padding: '10px',
-            color: 'white',
-            maxWidth: '500px',
-        } },
-        React.createElement("h2", null, componentName),
-        React.createElement("p", null, errorMessage)));
-};
-MissingComponent.displayName = 'MissingComponent';
+import React from 'react';
+export const MissingComponent = (props) => {
+    const componentName = props.rendering && props.rendering.componentName
+        ? props.rendering.componentName
+        : 'Unnamed Component';
+    // error override would mean component is not unimplemented
+    !props.errorOverride &&
+        console.log(`Component props for unimplemented '${componentName}' component`, props);
+    const errorMessage = props.errorOverride ||
+        'Content SDK component is missing React implementation. See the developer console for more information.';
+    return (React.createElement("div", { style: {
+            background: 'darkorange',
+            outline: '5px solid orange',
+            padding: '10px',
+            color: 'white',
+            maxWidth: '500px',
+        } },
+        React.createElement("h2", null, componentName),
+        React.createElement("p", null, errorMessage)));
+};
+MissingComponent.displayName = 'MissingComponent';

package/dist/esm/components/Placeholder/AppPlaceholder.js

@@ -1,69 +1,72 @@
-import { getAppComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, } from './placeholder-utils';
-import React from 'react';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
-import ErrorBoundary from '../ErrorBoundary';
-import { ClientComponentWrapper } from './ClientComponentWrapper';
-import { rsc } from '#rsc-env';
-/**
- * The implemention of placeholder compatible with React Server Components.
- * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
- * Pulls components from the provided component map.
- * @param {AppPlaceholderProps} props Placeholder props
- * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
- */
-export const AppPlaceholder = (props) => {
-    const { rendering: parentRendering, componentMap, page } = props;
-    const placeholderRenderings = getPlaceholderRenderings(parentRendering, props.name, page.mode.isEditing);
-    const components = placeholderRenderings
-        .map((rendering, index) => {
-        const { component: Component, isEmpty, componentType, dynamic, } = getComponentForRendering(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
-        const isClient = componentType === 'client';
-        const key = rendering.uid || `component-${index}`;
-        const renderedProps = getAppComponentProps(props, rendering);
-        const finalRenderedProps = props.modifyComponentProps
-            ? props.modifyComponentProps(renderedProps)
-            : renderedProps;
-        // Client wrapper is required only when component crosses boundary from server to client.
-        // It happens when component is marker as client and rendered in RSC context.
-        // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
-        const useClientWrapper = isClient && rsc && !isEmpty;
-        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (React.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
-        if (!isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
-        }
-        // if in edit mode then emit shallow chromes for hydration in Pages
-        if (page.mode.isEditing) {
-            const key = rendering.uid || `component-${index}`;
-            return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element);
-    const finalRendering = page.mode.isEditing
-        ? [
-            React.createElement(PlaceholderMetadata, { key: parentRendering.uid, placeholderName: props.name, rendering: parentRendering }, components),
-        ]
-        : components;
-    const placeholderEmpty = !placeholderRenderings.length;
-    if (placeholderEmpty) {
-        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
-        return page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
-    }
-    if (props.render) {
-        return props.render(components, placeholderRenderings, props);
-    }
-    else if (props.renderEach) {
-        const renderEach = props.renderEach;
-        return finalRendering.map((component, index) => {
-            if (component && component.props && component.props.type === 'text/sitecore') {
-                return component;
-            }
-            return renderEach(component, index);
-        });
-    }
-    else {
-        return finalRendering;
-    }
-};
+import { getAppComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, } from './placeholder-utils';
+import React from 'react';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
+import ErrorBoundary from '../ErrorBoundary';
+import { ClientComponentWrapper } from './ClientComponentWrapper';
+import { rsc } from '#rsc-env';
+/**
+ * The implemention of placeholder compatible with React Server Components.
+ * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
+ * Pulls components from the provided component map.
+ * @param {AppPlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ * @public
+ */
+export const AppPlaceholder = (props) => {
+    const { rendering: parentRendering, componentMap, page } = props;
+    const placeholderRenderings = getPlaceholderRenderings(parentRendering, props.name, page.mode.isEditing);
+    const components = placeholderRenderings
+        .map((rendering, index) => {
+        const { component: Component, isEmpty, componentType, dynamic, } = getComponentForRendering(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const isClient = componentType === 'client';
+        const key = rendering.uid || `component-${index}`;
+        // Use rsc context to determine the current runtime
+        const componentRuntime = rsc ? 'server' : 'client';
+        const renderedProps = getAppComponentProps(props, rendering);
+        const finalRenderedProps = props.modifyComponentProps
+            ? props.modifyComponentProps(renderedProps)
+            : renderedProps;
+        // Client wrapper is required only when component crosses boundary from server to client.
+        // It happens when component is marker as client and rendered in RSC context.
+        // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
+        const useClientWrapper = isClient && rsc && !isEmpty;
+        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (React.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
+        if (!isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+        }
+        // if in edit mode then emit shallow chromes for hydration in Pages
+        if (page.mode.isEditing) {
+            const key = rendering.uid || `component-${index}`;
+            return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering, componentRuntime: componentRuntime }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element);
+    const finalRendering = page.mode.isEditing
+        ? [
+            React.createElement(PlaceholderMetadata, { key: parentRendering.uid, placeholderName: props.name, rendering: parentRendering }, components),
+        ]
+        : components;
+    const placeholderEmpty = !placeholderRenderings.length;
+    if (placeholderEmpty) {
+        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
+        return page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
+    }
+    if (props.render) {
+        return props.render(components, placeholderRenderings, props);
+    }
+    else if (props.renderEach) {
+        const renderEach = props.renderEach;
+        return finalRendering.map((component, index) => {
+            if (component && component.props && component.props.type === 'text/sitecore') {
+                return component;
+            }
+            return renderEach(component, index);
+        });
+    }
+    else {
+        return finalRendering;
+    }
+};

package/dist/esm/components/Placeholder/ClientComponentWrapper.js

@@ -1,14 +1,14 @@
-'use client';
-import { ComponentMapReactContext } from '../SitecoreProvider';
-import { useContext } from 'react';
-import React from 'react';
-import { useSitecore } from '../../enhancers/withSitecore';
-import { getComponentForRendering } from './placeholder-utils';
-export const ClientComponentWrapper = (props) => {
-    const { page } = useSitecore();
-    const componentMap = useContext(ComponentMapReactContext);
-    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
-        page });
-    const { component: Component } = getComponentForRendering(props.rendering, props.placeholderName, componentMap);
-    return React.createElement(Component, Object.assign({}, componentPropsWithContext));
-};
+'use client';
+import { ComponentMapReactContext } from '../SitecoreProvider';
+import { useContext } from 'react';
+import React from 'react';
+import { useSitecore } from '../../enhancers/withSitecore';
+import { getComponentForRendering } from './placeholder-utils';
+export const ClientComponentWrapper = (props) => {
+    const { page } = useSitecore();
+    const componentMap = useContext(ComponentMapReactContext);
+    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
+        page });
+    const { component: Component } = getComponentForRendering(props.rendering, props.placeholderName, componentMap);
+    return React.createElement(Component, Object.assign({}, componentPropsWithContext));
+};