@sitecore-content-sdk/react 0.3.0-canary.3 → 0.3.0-canary.31

package/README.md

@@ -6,6 +6,6 @@ This module is provided as a part of Sitecore Content SDK. It contains React com
 @TODO: Update link with appropriate page when avaiable
 -->
 
-[Documentation](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+[Documentation](https://doc.sitecore.com/xmc/en/developers/content-sdk/creating-a-content-sdk-app.html)
 
 [API reference documentation](/ref-docs/react/)

package/dist/cjs/components/EditingScripts.js

@@ -12,12 +12,11 @@ const editing_2 = require("@sitecore-content-sdk/core/editing");
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-const EditingScripts = (props) => {
-    const { pageContext: { pageState, clientData, clientScripts, renderingType }, } = (0, withSitecore_1.useSitecore)();
+const EditingScripts = () => {
+    var _a;
+    const { pageContext: { pageState, clientData, clientScripts, renderingType }, api, } = (0, withSitecore_1.useSitecore)();
     // Don't render anything if not in editing/preview mode and rendering type is not component
     if (renderingType !== layout_1.RenderingType.Component &&
         (pageState === layout_1.LayoutServicePageState.Normal ||
@@ -28,13 +27,13 @@ const EditingScripts = (props) => {
     // In case of RenderingType.Component - render only the script for Design Libnrary
     if (renderingType === layout_1.RenderingType.Component) {
         // Add cache buster to the script URL
-        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }
-    const jssClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getJssPagesClientData)());
+    const contentSdkClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getContentSdkPagesClientData)());
     return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
         clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
-        Object.keys(jssClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
+        Object.keys(contentSdkClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
 };
 exports.EditingScripts = EditingScripts;

package/dist/cjs/components/ErrorBoundary.js

@@ -71,7 +71,7 @@ class ErrorBoundary extends react_1.default.Component {
             else {
                 if (this.showErrorDetails()) {
                     return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                             "A rendering error occurred in component",
                             ' ',
                             react_1.default.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
@@ -81,12 +81,12 @@ class ErrorBoundary extends react_1.default.Component {
                 }
                 else {
                     return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, this.defaultErrorMessage)));
                 }
             }
         }
-        // do not apply suspense on already dynamic components
-        if (this.props.isDynamic) {
+        // do not apply suspense when suspense is disabled or when on already dynamic components
+        if (this.props.disableSuspense || this.props.isDynamic) {
             return this.props.children;
         }
         return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));

package/dist/cjs/components/FEaaSComponent.js

@@ -71,9 +71,9 @@ const FEaaSComponent = (props) => {
     // combine fetchedData from server with datasource data (if present)
     const data = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
     // FEaaS control would still be hydrated by client
-    // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
+    // we pass all the props as a workaround to avoid hydration error, until we convert all Content SDK components to server side
     // this also allows component to fall back to full client-side rendering when template or src is empty
-    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    // FEAAS should not fetch anything, since Content SDK does the fetching - so we pass empty array into fetch param
     return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
 };
 exports.FEaaSComponent = FEaaSComponent;

package/dist/cjs/components/Form.js

@@ -63,7 +63,7 @@ const Form = ({ params, rendering }) => {
                 .then(setContent)
                 .catch(() => {
                 if (isEditing) {
-                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details.`);
                 }
                 setError(true);
             });
@@ -78,7 +78,7 @@ const Form = ({ params, rendering }) => {
     }, [content]);
     if (isEditing) {
         if (error) {
-            return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
+            return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, "There was a problem loading this section"));
         }
     }
     return (react_1.default.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));

package/dist/cjs/components/HiddenRendering.js

@@ -5,8 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HiddenRendering = void 0;
 const react_1 = __importDefault(require("react"));
-const styles = {
-    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+const baseStyles = {
     backgroundSize: '3px 3px',
     display: 'flex',
     justifyContent: 'center',
@@ -14,5 +13,11 @@ const styles = {
     padding: '30px',
     color: '#aaa',
 };
-const HiddenRendering = () => react_1.default.createElement("div", { style: styles }, "The component is hidden");
+const backgroundImageStyle = {
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+};
+const HiddenRendering = () => {
+    const styles = process.env.NODE_ENV === 'test' ? baseStyles : Object.assign(Object.assign({}, baseStyles), backgroundImageStyle);
+    return react_1.default.createElement("div", { style: styles }, "The component is hidden");
+};
 exports.HiddenRendering = HiddenRendering;

package/dist/cjs/components/Image.js

@@ -29,7 +29,7 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     }
     (0, utils_1.addClassName)(otherAttrs);
     const newAttrs = Object.assign({}, otherAttrs);
-    // update image URL for jss handler and image rendering params
+    // update image URL for content sdk handler and image rendering params
     const resolvedSrc = media_1.mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
     if (srcSet) {
         // replace with HTML-formatted srcset, including updated image URLs

package/dist/cjs/components/MissingComponent.js

@@ -13,7 +13,7 @@ const MissingComponent = (props) => {
     !props.errorOverride &&
         console.log(`Component props for unimplemented '${componentName}' component`, props);
     const errorMessage = props.errorOverride ||
-        'JSS component is missing React implementation. See the developer console for more information.';
+        'Content SDK component is missing React implementation. See the developer console for more information.';
     return (react_1.default.createElement("div", { style: {
             background: 'darkorange',
             outline: '5px solid orange',

package/dist/cjs/components/Placeholder.js

@@ -35,7 +35,7 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
             if (childProps.errorComponent) {
                 return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
             }
-            return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+            return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                 "A rendering error occurred: ",
                 this.state.error.message,
                 "."));

package/dist/cjs/components/PlaceholderCommon.js

@@ -74,8 +74,9 @@ class PlaceholderCommon extends react_1.default.Component {
     getSXAParams(rendering) {
         if (!rendering.params)
             return {};
-        return (rendering.params.FieldNames && {
-            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        const { GridParameters, Styles } = rendering.params;
+        return ((GridParameters || Styles) && {
+            styles: `${GridParameters || ''} ${Styles || ''}`,
         });
     }
     getComponentsForRenderingData(placeholderData) {
@@ -131,9 +132,13 @@ class PlaceholderCommon extends react_1.default.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                const disableSuspense = this.props.disableSuspense || false;
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                const isByocWrapper = componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME;
+                // all dynamic elements will have a separate render prop
+                const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ "data-testid": "error-boundary", key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if in edit mode then emit shallow chromes for hydration in Pages
             if ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {

package/dist/cjs/enhancers/withPlaceholder.js

@@ -28,7 +28,7 @@ function withPlaceholder(placeholders, options) {
                     if (childProps.errorComponent) {
                         return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
                     }
-                    return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+                    return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                         "A rendering error occurred: ",
                         this.state.error.message,
                         "."));

package/dist/cjs/enhancers/withSitecore.js

@@ -19,7 +19,7 @@ function withSitecore(options) {
 }
 /**
  * This hook grants acсess to the current Sitecore page context and api.
- * by default JSS includes the following properties in this context:
+ * by default Content SDK includes the following properties in this context:
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Sitecore Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.

package/dist/esm/components/EditingScripts.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { LayoutServicePageState, RenderingType } from '@sitecore-content-sdk/core/layout';
 import { useSitecore } from '../enhancers/withSitecore';
-import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
+import { getContentSdkPagesClientData } from '@sitecore-content-sdk/core/editing';
 import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-export const EditingScripts = (props) => {
-    const { pageContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecore();
+export const EditingScripts = () => {
+    var _a;
+    const { pageContext: { pageState, clientData, clientScripts, renderingType }, api, } = useSitecore();
     // Don't render anything if not in editing/preview mode and rendering type is not component
     if (renderingType !== RenderingType.Component &&
         (pageState === LayoutServicePageState.Normal ||
@@ -22,12 +21,12 @@ export const EditingScripts = (props) => {
     // In case of RenderingType.Component - render only the script for Design Libnrary
     if (renderingType === RenderingType.Component) {
         // Add cache buster to the script URL
-        const scriptUrl = `${getDesignLibraryScriptLink(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
         return (React.createElement(React.Fragment, null,
             React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }
-    const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
+    const contentSdkClientData = Object.assign(Object.assign({}, clientData), getContentSdkPagesClientData());
     return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
         clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
-        Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
+        Object.keys(contentSdkClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
 };

package/dist/esm/components/ErrorBoundary.js

@@ -36,7 +36,7 @@ class ErrorBoundary extends React.Component {
             else {
                 if (this.showErrorDetails()) {
                     return (React.createElement("div", null,
-                        React.createElement("div", { className: "sc-jss-placeholder-error" },
+                        React.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                             "A rendering error occurred in component",
                             ' ',
                             React.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
@@ -46,12 +46,12 @@ class ErrorBoundary extends React.Component {
                 }
                 else {
                     return (React.createElement("div", null,
-                        React.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                        React.createElement("div", { className: "sc-content-sdk-placeholder-error" }, this.defaultErrorMessage)));
                 }
             }
         }
-        // do not apply suspense on already dynamic components
-        if (this.props.isDynamic) {
+        // do not apply suspense when suspense is disabled or when on already dynamic components
+        if (this.props.disableSuspense || this.props.isDynamic) {
             return this.props.children;
         }
         return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));

package/dist/esm/components/FEaaSComponent.js

@@ -31,9 +31,9 @@ export const FEaaSComponent = (props) => {
     // combine fetchedData from server with datasource data (if present)
     const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
     // FEaaS control would still be hydrated by client
-    // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
+    // we pass all the props as a workaround to avoid hydration error, until we convert all Content SDK components to server side
     // this also allows component to fall back to full client-side rendering when template or src is empty
-    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    // FEAAS should not fetch anything, since Content SDK does the fetching - so we pass empty array into fetch param
     return (React.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
 };
 /**

package/dist/esm/components/Form.js

@@ -26,7 +26,7 @@ export const Form = ({ params, rendering }) => {
                 .then(setContent)
                 .catch(() => {
                 if (isEditing) {
-                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details.`);
                 }
                 setError(true);
             });
@@ -41,7 +41,7 @@ export const Form = ({ params, rendering }) => {
     }, [content]);
     if (isEditing) {
         if (error) {
-            return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
+            return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" }, "There was a problem loading this section"));
         }
     }
     return (React.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));

package/dist/esm/components/HiddenRendering.js

@@ -1,6 +1,5 @@
 import React from 'react';
-const styles = {
-    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+const baseStyles = {
     backgroundSize: '3px 3px',
     display: 'flex',
     justifyContent: 'center',
@@ -8,4 +7,10 @@ const styles = {
     padding: '30px',
     color: '#aaa',
 };
-export const HiddenRendering = () => React.createElement("div", { style: styles }, "The component is hidden");
+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

@@ -23,7 +23,7 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     }
     addClassName(otherAttrs);
     const newAttrs = Object.assign({}, otherAttrs);
-    // update image URL for jss handler and image rendering params
+    // 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

package/dist/esm/components/MissingComponent.js

@@ -7,7 +7,7 @@ export const MissingComponent = (props) => {
     !props.errorOverride &&
         console.log(`Component props for unimplemented '${componentName}' component`, props);
     const errorMessage = props.errorOverride ||
-        'JSS component is missing React implementation. See the developer console for more information.';
+        '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',

package/dist/esm/components/Placeholder.js

@@ -29,7 +29,7 @@ class PlaceholderComponent extends PlaceholderCommon {
             if (childProps.errorComponent) {
                 return React.createElement(childProps.errorComponent, { error: this.state.error });
             }
-            return (React.createElement("div", { className: "sc-jss-placeholder-error" },
+            return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                 "A rendering error occurred: ",
                 this.state.error.message,
                 "."));

package/dist/esm/components/PlaceholderCommon.js

@@ -68,8 +68,9 @@ export class PlaceholderCommon extends React.Component {
     getSXAParams(rendering) {
         if (!rendering.params)
             return {};
-        return (rendering.params.FieldNames && {
-            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        const { GridParameters, Styles } = rendering.params;
+        return ((GridParameters || Styles) && {
+            styles: `${GridParameters || ''} ${Styles || ''}`,
         });
     }
     getComponentsForRenderingData(placeholderData) {
@@ -125,9 +126,13 @@ export class PlaceholderCommon extends React.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                const disableSuspense = this.props.disableSuspense || false;
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                const isByocWrapper = componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME;
+                // all dynamic elements will have a separate render prop
+                const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ "data-testid": "error-boundary", key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if in edit mode then emit shallow chromes for hydration in Pages
             if ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {

package/dist/esm/enhancers/withPlaceholder.js

@@ -22,7 +22,7 @@ export function withPlaceholder(placeholders, options) {
                     if (childProps.errorComponent) {
                         return React.createElement(childProps.errorComponent, { error: this.state.error });
                     }
-                    return (React.createElement("div", { className: "sc-jss-placeholder-error" },
+                    return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" },
                         "A rendering error occurred: ",
                         this.state.error.message,
                         "."));

package/dist/esm/enhancers/withSitecore.js

@@ -12,7 +12,7 @@ export function withSitecore(options) {
 }
 /**
  * This hook grants acсess to the current Sitecore page context and api.
- * by default JSS includes the following properties in this context:
+ * by default Content SDK includes the following properties in this context:
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Sitecore Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "0.3.0-canary.3",
+  "version": "0.3.0-canary.31",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -30,7 +30,7 @@
     "url": "https://github.com/sitecore/content-sdk/issues"
   },
   "devDependencies": {
-    "@sitecore-feaas/clientside": "^0.5.19",
+    "@sitecore-feaas/clientside": "0.5.20-alpha.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/chai": "^5.2.2",
@@ -58,17 +58,17 @@
   },
   "peerDependencies": {
     "@sitecore-cloudsdk/events": "^0.5.1",
-    "@sitecore-feaas/clientside": "^0.5.19",
+    "@sitecore-feaas/clientside": "0.5.20-alpha.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "0.3.0-canary.3",
+    "@sitecore-content-sdk/core": "0.3.0-canary.31",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "73dc7a362f27a612b3fd6acc3ab2e65ce55eb75e",
+  "gitHead": "b6874d2a0be0e7b42a8cf33b43565e924e5901ec",
   "files": [
     "dist",
     "types"

package/types/components/EditingScripts.d.ts

@@ -1,18 +1,7 @@
 import { JSX } from 'react';
-/**
- * Props for the EditingScripts component.
- */
-export type EditingScriptsProps = {
-    /**
-     * Sitecore Edge Platform URL.
-     */
-    sitecoreEdgeUrl?: string;
-};
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-export declare const EditingScripts: (props: EditingScriptsProps) => JSX.Element;
+export declare const EditingScripts: () => JSX.Element;

package/types/components/ErrorBoundary.d.ts

@@ -12,6 +12,7 @@ export type ErrorBoundaryProps = {
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     rendering?: ComponentRendering;
     componentLoadingMessage?: string;
+    disableSuspense?: boolean;
 };
 declare const _default: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecore").WithSitecoreProps>) => React.JSX.Element;
 export default _default;

package/types/components/PlaceholderCommon.d.ts

@@ -65,6 +65,11 @@ export interface PlaceholderProps {
      * The message that gets displayed while component is loading
      */
     componentLoadingMessage?: string;
+    /**
+     * If true, disables Suspense in ErrorBoundary for the placeholder.
+     * @default false
+     */
+    disableSuspense?: boolean;
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     state: Readonly<{

package/types/components/sharedTypes/components.d.ts

@@ -6,7 +6,7 @@ export declare const DEFAULT_EXPORT_NAME = "Default";
 /**
  * React component import with account for custom exports
  */
-export type ReactJssComponent = ComponentType | ReactModule;
+export type ReactContentSdkComponent = ComponentType | ReactModule;
 export type ReactModule = {
     /**
      * Custom exports
@@ -29,4 +29,4 @@ export type LazyComponentType = ComponentType & {
         [key: string]: unknown;
     };
 };
-export type ComponentMap<TComponent extends ReactJssComponent = ReactJssComponent> = Map<string, TComponent>;
+export type ComponentMap<TComponent extends ReactContentSdkComponent = ReactContentSdkComponent> = Map<string, TComponent>;

package/types/enhancers/withPlaceholder.d.ts

@@ -4,7 +4,7 @@ import { PlaceholderProps } from '../components/PlaceholderCommon';
 export interface WithPlaceholderOptions {
     /**
      * Function to map incoming placeholder props into rendering data to use for the placeholder data.
-     * Normally in a JSS component, props.rendering is passed the component data, and that is the default.
+     * Normally in a Content SDK component, props.rendering is passed the component data, and that is the default.
      * However, if your component data is in a different prop, like say 'route' in a sample app,
      * this lets you map that.
      */

package/types/enhancers/withSitecore.d.ts

@@ -30,7 +30,7 @@ export type WithSitecoreHocProps<ComponentProps> = EnhancedOmit<ComponentProps,
 export declare function withSitecore(options?: WithSitecoreOptions): <ComponentProps extends WithSitecoreProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreHocProps<ComponentProps>) => React.JSX.Element;
 /**
  * This hook grants acсess to the current Sitecore page context and api.
- * by default JSS includes the following properties in this context:
+ * by default Content SDK includes the following properties in this context:
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Sitecore Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.

package/types/index.d.ts

@@ -6,7 +6,7 @@ export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, } from
 export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
 export { mediaApi } from '@sitecore-content-sdk/core/media';
 export { Form } from './components/Form';
-export { ReactJssComponent, ComponentMap, ReactModule } from './components/sharedTypes';
+export { ReactContentSdkComponent, ComponentMap, ReactModule } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextField } from './components/RichText';