@sitecore-content-sdk/react 1.2.0-canary.22 → 1.2.0-canary.24

package/dist/cjs/components/ClientEditingChromesUpdate.js

@@ -0,0 +1,52 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientEditingChromesUpdate = void 0;
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const react_1 = __importStar(require("react"));
+/**
+ * Updates editing chromes in app router / RSC context.
+ * This ensures all the relevant Pages editing markup is applied once all client components are loaded.
+ */
+const ClientEditingChromesUpdate = () => {
+    (0, react_1.useEffect)(() => {
+        if ((0, editing_1.isEditorActive)()) {
+            (0, editing_1.resetEditorChromes)();
+        }
+    }, []);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.ClientEditingChromesUpdate = ClientEditingChromesUpdate;

package/dist/cjs/components/DesignLibrary.js

@@ -52,7 +52,7 @@ const layout_1 = require("@sitecore-content-sdk/core/layout");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
 const withSitecore_1 = require("../enhancers/withSitecore");
-const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const Placeholder_2 = require("./Placeholder");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
@@ -196,7 +196,7 @@ const DesignLibrary = ({ loadImportMap }) => {
         };
     }, [isVariantGeneration, rendering]);
     return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { rendering: rendering },
+        react_1.default.createElement(Placeholder_2.PlaceholderMetadata, { rendering: rendering },
             react_1.default.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
 exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/EditingScripts.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/Placeholder/Placeholder.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = exports.PlaceholderComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const withComponentMap_1 = require("../../enhancers/withComponentMap");
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const withSitecore_1 = require("../../enhancers/withSitecore");
+const placeholder_utils_1 = require("./placeholder-utils");
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+class PlaceholderComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+        this.state = {};
+    }
+    componentDidMount() {
+        if (this.isEmpty && editing_1.PagesEditor.isActive()) {
+            editing_1.PagesEditor.resetChromes();
+        }
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    /**
+     * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
+     * @param {React.ReactNode | React.ReactElement[]} node react node
+     * @returns react node
+     * @deprecated use renderEmptyPlaceholder from react/nextjs import instead
+     */
+    renderEmptyPlaceholder(node) {
+        return (0, placeholder_utils_1.renderEmptyPlaceholder)(node);
+    }
+    render() {
+        const childProps = Object.assign({}, this.props);
+        delete childProps.componentMap;
+        if (this.state.error) {
+            if (childProps.errorComponent) {
+                return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
+            }
+            return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
+                "A rendering error occurred: ",
+                this.state.error.message,
+                "."));
+        }
+        const renderingData = childProps.rendering;
+        const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(renderingData, this.props.name, this.props.page.mode.isEditing);
+        this.isEmpty = !placeholderRenderings.length;
+        const components = PlaceholderComponent.getRenderedComponents(this.props, placeholderRenderings);
+        if (this.isEmpty) {
+            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
+            return this.props.page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
+        }
+        else if (this.props.render) {
+            return this.props.render(components, placeholderRenderings, childProps);
+        }
+        else if (this.props.renderEach) {
+            const renderEach = this.props.renderEach;
+            return components.map((component, index) => {
+                if (component && component.props && component.props.type === 'text/sitecore') {
+                    return component;
+                }
+                return renderEach(component, index);
+            });
+        }
+        else {
+            return components;
+        }
+    }
+}
+exports.PlaceholderComponent = PlaceholderComponent;
+/**
+ * Renders the components for the placeholder based on the provided rendering data.
+ * @param {PlaceholderProps} props placeholder component props
+ * @param {ComponentRendering[]} placeholderRenderings renderings within placeholder
+ * @returns {React.ReactNode | React.ReactElement[]} rendered components
+ */
+PlaceholderComponent.getRenderedComponents = (props, placeholderRenderings) => {
+    const { name, missingComponentComponent, hiddenRenderingComponent } = props;
+    const transformedComponents = placeholderRenderings
+        .map((componentRendering, index) => {
+        const key = componentRendering.uid || `component-${index}`;
+        const renderedProps = (0, placeholder_utils_1.getRenderedComponentProps)(props, componentRendering, key);
+        const component = (0, placeholder_utils_1.getComponentForRendering)(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
+        let rendered = react_1.default.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        if (!component.isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: component.dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+        }
+        // if in edit mode then emit shallow chromes for hydration in Pages
+        if (props.page.mode.isEditing) {
+            return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element); // remove nulls
+    if (props.page.mode.isEditing) {
+        return [
+            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
+        ];
+    }
+    return transformedComponents;
+};
+const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
+exports.Placeholder = (0, withSitecore_1.withSitecore)()(PlaceholderWithComponentMap);

package/dist/cjs/components/Placeholder/ServerPlaceholder.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerPlaceholder = void 0;
+const models_1 = require("./models");
+const placeholder_utils_1 = require("./placeholder-utils");
+const react_1 = __importDefault(require("react"));
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+/**
+ * React Server Component implementation for Placeholder.
+ * 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 {PlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ */
+const ServerPlaceholder = (props) => {
+    var _a;
+    if (!props.componentMap) {
+        throw new Error('Component map is required for ServerPlaceholder');
+    }
+    // get serializable props for client rendering
+    const serializableProps = models_1.nonSerializedPlaceholderProps.reduce((finalProps, prop) => {
+        delete finalProps[prop];
+        return finalProps;
+    }, Object.assign({}, props));
+    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(props.rendering, props.name, (_a = props.page) === null || _a === void 0 ? void 0 : _a.mode.isEditing);
+    const components = placeholderRenderings
+        .map((rendering, index) => {
+        const { component, isEmpty, componentType, dynamic } = (0, placeholder_utils_1.getComponentForRendering)(rendering, props.name, props.componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const isClient = componentType === 'client';
+        const key = rendering.uid || `component-${index}`;
+        const finalPhProps = isClient ? serializableProps : props;
+        const renderedProps = (0, placeholder_utils_1.getRenderedComponentProps)(finalPhProps, rendering, key);
+        let rendered = react_1.default.createElement(component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        if (!isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "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 (props.page.mode.isEditing) {
+            const key = rendering.uid || `component-${index}`;
+            return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element);
+    const finalRendering = props.page.mode.isEditing
+        ? [
+            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: props.name, rendering: props.rendering }, components),
+        ]
+        : components;
+    const placeholderEmpty = !placeholderRenderings.length;
+    if (placeholderEmpty) {
+        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
+        return props.page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
+    }
+    if (props.render) {
+        return props.render(components, placeholderRenderings, serializableProps);
+    }
+    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;
+    }
+};
+exports.ServerPlaceholder = ServerPlaceholder;

package/dist/cjs/components/Placeholder/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderMetadata = exports.PlaceholderComponent = exports.Placeholder = exports.ServerPlaceholder = void 0;
+var ServerPlaceholder_1 = require("./ServerPlaceholder");
+Object.defineProperty(exports, "ServerPlaceholder", { enumerable: true, get: function () { return ServerPlaceholder_1.ServerPlaceholder; } });
+var Placeholder_1 = require("./Placeholder");
+Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+Object.defineProperty(exports, "PlaceholderComponent", { enumerable: true, get: function () { return Placeholder_1.PlaceholderComponent; } });
+var PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+Object.defineProperty(exports, "PlaceholderMetadata", { enumerable: true, get: function () { return PlaceholderMetadata_1.PlaceholderMetadata; } });
+__exportStar(require("./placeholder-utils"), exports);

package/dist/cjs/components/Placeholder/models.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonSerializedPlaceholderProps = void 0;
+/**
+ * Prop names from placeholder that cannot be serialized and passed from server to client side components
+ */
+exports.nonSerializedPlaceholderProps = [
+    'renderEmpty',
+    'render',
+    'renderEach',
+    'errorComponent',
+    'componentLoadingMessage',
+    'modifyComponentProps',
+    'componentMap',
+    'page',
+    'missingComponentComponent',
+    'hiddenRenderingComponent',
+    'rendering',
+];

package/dist/cjs/components/Placeholder/placeholder-utils.js

@@ -0,0 +1,187 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentForRendering = exports.getRenderedComponentProps = exports.renderEmptyPlaceholder = exports.getSXAParams = exports.getPlaceholderRenderings = void 0;
+const react_1 = __importDefault(require("react"));
+const MissingComponent_1 = require("../MissingComponent");
+const sharedTypes_1 = require("../sharedTypes");
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const core_1 = require("@sitecore-content-sdk/core");
+const HiddenRendering_1 = require("../HiddenRendering");
+const FEaaSComponent_1 = require("../FEaaSComponent");
+const FEaaSWrapper_1 = require("../FEaaSWrapper");
+const BYOCComponent_1 = require("../BYOCComponent");
+const BYOCWrapper_1 = require("../BYOCWrapper");
+/**
+ * Get the renderings for the specified placeholder from the rendering data.
+ * @param {ComponentRendering | RouteData } rendering rendering data
+ * @param {string} name placeholder name
+ * @param {boolean} isEditing whether components should be rendered in editing mode
+ * @returns {ComponentRendering[]} array of component renderings
+ */
+const getPlaceholderRenderings = (rendering, name, isEditing) => {
+    let result;
+    let phName = name.slice();
+    /**
+     * Process (SXA) dynamic placeholders
+     * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
+     * For Metadata EditMode, we need to keep the raw placeholder name in place.
+     */
+    if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
+        Object.keys(rendering.placeholders).forEach((placeholder) => {
+            const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
+                ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
+                : null;
+            if (patternPlaceholder && patternPlaceholder.test(phName)) {
+                if (isEditing) {
+                    phName = placeholder;
+                }
+                else {
+                    rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                    delete rendering.placeholders[placeholder];
+                }
+            }
+        });
+    }
+    if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+        result = rendering.placeholders[phName];
+    }
+    else {
+        result = null;
+    }
+    if (!result) {
+        console.warn(`Placeholder '${phName}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+        return [];
+    }
+    return result;
+};
+exports.getPlaceholderRenderings = getPlaceholderRenderings;
+/**
+ * Get SXA specific params from Sitecore rendering params
+ * @param {ComponentRendering} rendering rendering object
+ * @returns {object} converted SXA params
+ */
+const getSXAParams = (rendering) => {
+    if (!rendering.params)
+        return {};
+    const { GridParameters, Styles } = rendering.params;
+    return ((GridParameters || Styles) && {
+        styles: `${GridParameters || ''} ${Styles || ''}`,
+    });
+};
+exports.getSXAParams = getSXAParams;
+/**
+ * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
+ * @param {React.ReactNode | React.ReactElement[]} node react node
+ * @returns react node
+ */
+const renderEmptyPlaceholder = (node) => {
+    return react_1.default.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+};
+exports.renderEmptyPlaceholder = renderEmptyPlaceholder;
+/**
+ * Get component props to be passed to the rendered component.
+ * @param {PlaceholderProps} placeholderProps current placeholder props
+ * @param {ComponentRendering} componentRendering rendering to be rendered
+ * @param {string} renderingKey unique key to pass over to rendering props
+ * @returns {RenderedProps} props to be passed to the rendered component
+ */
+const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
+    const { fields: placeholderFields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
+    delete passThroughProps.missingComponentComponent;
+    delete passThroughProps.hiddenRenderingComponent;
+    delete passThroughProps.name;
+    const fields = Object.assign(Object.assign({}, (placeholderFields || {})), (componentRendering.fields || {}));
+    const params = Object.assign(Object.assign({}, (placeholderParams || {})), (componentRendering.params || {}));
+    return Object.assign(Object.assign({ key: renderingKey }, passThroughProps), { fields, params: Object.assign(Object.assign({}, params), (0, exports.getSXAParams)(componentRendering)), rendering: componentRendering });
+};
+exports.getRenderedComponentProps = getRenderedComponentProps;
+/**
+ * Get component implemenation from the component map based on the rendering definition.
+ * @param {ComponentRendering} renderingDefinition rendering data
+ * @param {string} placeholderName name of current placeholder
+ * @param {ComponentMap} componentMap component map for the current app
+ * @param {React.ComponentClass} [hiddenRenderingComponent] fallback implementation in to be rendered if the rendering is hidden
+ * @param {React.ComponentClass} [missingComponentComponent] fallback implementation in case no component is found in the component map
+ * @returns {ContentSDKComponet | null} component implementation or null if no component map is provided
+ */
+const getComponentForRendering = (renderingDefinition, placeholderName, componentMap, hiddenRenderingComponent, missingComponentComponent) => {
+    var _a, _b;
+    if (renderingDefinition.componentName === core_1.constants.HIDDEN_RENDERING_NAME) {
+        return {
+            component: hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering_1.HiddenRendering,
+            isEmpty: true,
+        };
+    }
+    else if (!renderingDefinition.componentName) {
+        console.error(`Placeholder ${placeholderName} contains unknown component ${renderingDefinition.componentName}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
+        return {
+            component: () => react_1.default.createElement(react_1.default.Fragment, null),
+            isEmpty: true,
+        };
+    }
+    let component = null;
+    if (!componentMap || componentMap.size === 0) {
+        console.warn(`No components were available in component map to service request for component ${renderingDefinition}`);
+    }
+    else {
+        component = componentMap.get(renderingDefinition.componentName);
+    }
+    if (!component) {
+        // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
+        if (renderingDefinition.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
+            return {
+                component: FEaaSComponent_1.FEaaSComponent,
+            };
+        }
+        else if (renderingDefinition.componentName === FEaaSWrapper_1.FEAAS_WRAPPER_RENDERING_NAME) {
+            return {
+                component: FEaaSWrapper_1.FEaaSWrapper,
+            };
+        }
+        else if (renderingDefinition.componentName === BYOCComponent_1.BYOC_COMPONENT_RENDERING_NAME) {
+            return {
+                component: BYOCComponent_1.BYOCComponent,
+            };
+        }
+        else if (renderingDefinition.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME) {
+            // 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 mark BYOC wrapper dynamic
+            return {
+                component: BYOCWrapper_1.BYOCWrapper,
+                dynamic: true,
+            };
+        }
+        return {
+            component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent,
+            isEmpty: true,
+        };
+    }
+    // Render SXA Rendering Variant if available
+    const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+    const renderedComponent = exportName && exportName !== sharedTypes_1.DEFAULT_EXPORT_NAME
+        ? component[exportName]
+        : component.default ||
+            component.Default ||
+            component;
+    // all dynamic elements will have a separate render prop
+    return {
+        component: renderedComponent,
+        dynamic: !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload),
+        componentType: component.componentType,
+    };
+};
+exports.getComponentForRendering = getComponentForRendering;

package/dist/cjs/enhancers/withPlaceholder.js

@@ -5,16 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withPlaceholder = withPlaceholder;
 const react_1 = __importDefault(require("react"));
-const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
 const withComponentMap_1 = require("./withComponentMap");
 const withSitecore_1 = require("./withSitecore");
+const Placeholder_1 = require("../components/Placeholder");
 /**
+ * HOC to provide client-side placeholder functionality to a component.
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
  */
 function withPlaceholder(placeholders, options) {
     return (WrappedComponent) => {
-        class WithPlaceholder extends PlaceholderCommon_1.PlaceholderCommon {
+        class WithPlaceholder extends Placeholder_1.PlaceholderComponent {
             constructor(props) {
                 super(props);
             }
@@ -42,16 +43,15 @@ function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
+                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
+                            childProps[placeholder.prop] = Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.page.mode.isEditing);
+                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder] =
-                                this.getComponentsForRenderingData(placeholderData);
+                            childProps[placeholder] = Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                 });

package/dist/cjs/enhancers/withServerPlaceholder.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withServerPlaceholder = void 0;
+const react_1 = __importDefault(require("react"));
+const ServerPlaceholder_1 = require("../components/Placeholder/ServerPlaceholder");
+const withServerPlaceholder = (Component) => {
+    return (props) => {
+        const placeholders = props.rendering.placeholders;
+        const phProps = {};
+        for (const placeholder of Object.keys(placeholders)) {
+            phProps[placeholder] = (react_1.default.createElement(ServerPlaceholder_1.ServerPlaceholder, { name: placeholder, rendering: props.rendering, page: props.page, componentMap: props.componentMap }));
+        }
+        const displayName = Component.displayName || Component.name || 'Component';
+        const propsCopy = Object.assign(Object.assign({}, props), { displayName });
+        return react_1.default.createElement(Component, Object.assign({}, propsCopy, { placeholders: phProps }));
+    };
+};
+exports.withServerPlaceholder = withServerPlaceholder;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SitePathService = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.ServerPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -30,6 +30,7 @@ var Form_1 = require("./components/Form");
 Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+Object.defineProperty(exports, "ServerPlaceholder", { enumerable: true, get: function () { return Placeholder_1.ServerPlaceholder; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
 var RichText_1 = require("./components/RichText");
@@ -75,5 +76,7 @@ Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: functi
 var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");
 Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText; } });
 Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage; } });
+var ClientEditingChromesUpdate_1 = require("./components/ClientEditingChromesUpdate");
+Object.defineProperty(exports, "ClientEditingChromesUpdate", { enumerable: true, get: function () { return ClientEditingChromesUpdate_1.ClientEditingChromesUpdate; } });
 var site_1 = require("@sitecore-content-sdk/core/site");
 Object.defineProperty(exports, "SitePathService", { enumerable: true, get: function () { return site_1.SitePathService; } });

package/dist/esm/components/ClientEditingChromesUpdate.js

@@ -0,0 +1,15 @@
+'use client';
+import { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
+import React, { useEffect } from 'react';
+/**
+ * Updates editing chromes in app router / RSC context.
+ * This ensures all the relevant Pages editing markup is applied once all client components are loaded.
+ */
+export const ClientEditingChromesUpdate = () => {
+    useEffect(() => {
+        if (isEditorActive()) {
+            resetEditorChromes();
+        }
+    }, []);
+    return React.createElement(React.Fragment, null);
+};

package/dist/esm/components/DesignLibrary.js

@@ -16,7 +16,7 @@ import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-
 import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
 import * as codegen from '@sitecore-content-sdk/core/codegen';
 import { useSitecore } from '../enhancers/withSitecore';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
+import { PlaceholderMetadata } from './Placeholder';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 export const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;

package/dist/esm/components/EditingScripts.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { useSitecore } from '../enhancers/withSitecore';
 import { getContentSdkPagesClientData } from '@sitecore-content-sdk/core/editing';

package/dist/esm/components/ErrorBoundary.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { Suspense } from 'react';
 import { withSitecore } from '../enhancers/withSitecore';
 class ErrorBoundary extends React.Component {