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

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

@@ -1,214 +1,214 @@
-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 from 'react';
-import { MissingComponent } from '../MissingComponent';
-import { DEFAULT_EXPORT_NAME } from '../sharedTypes';
-import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-content-sdk/core/layout';
-import { constants } from '@sitecore-content-sdk/core';
-import { HiddenRendering } from '../HiddenRendering';
-import { FEaaSComponent, FEaaSWrapper, BYOCComponent, BYOCWrapper, BYOC_COMPONENT_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, FEAAS_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, } from '../FEaaS';
-/**
- * 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
- */
-export 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 = isDynamicPlaceholder(placeholder)
-                ? 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;
-};
-/**
- * Get SXA specific params from Sitecore rendering params
- * @param {ComponentRendering} rendering rendering object
- * @returns {object} converted SXA params
- */
-export const getSXAParams = (rendering) => {
-    if (!rendering.params)
-        return {};
-    const { GridParameters, Styles } = rendering.params;
-    return ((GridParameters || Styles) && {
-        styles: `${GridParameters || ''} ${Styles || ''}`,
-    });
-};
-/**
- * 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
- */
-export const renderEmptyPlaceholder = (node) => {
-    return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
-};
-/**
- * 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
- */
-export const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
-    // eslint-disable-next-line no-unused-vars
-    const { fields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
-    delete passThroughProps.missingComponentComponent;
-    delete passThroughProps.hiddenRenderingComponent;
-    delete passThroughProps.name;
-    const mergedContentProps = getAppComponentProps(placeholderProps, componentRendering);
-    return Object.assign(Object.assign(Object.assign({ key: renderingKey }, passThroughProps), mergedContentProps), { rendering: componentRendering });
-};
-/**
- * Merge placeholder and component field and params content props.
- * @param {BasePlaceholderProps} placeholderProps placeholder props
- * @param {ComponentRendering} componentRendering component rendering
- * @returns {ComponentProps} merged props
- */
-export function getAppComponentProps(placeholderProps, componentRendering) {
-    const fields = Object.assign(Object.assign({}, (placeholderProps.fields || {})), (componentRendering.fields || {}));
-    const params = Object.assign(Object.assign({}, (placeholderProps.params || {})), (componentRendering.params || {}));
-    return {
-        fields,
-        params: Object.assign(Object.assign({}, params), getSXAParams(componentRendering)),
-        rendering: componentRendering,
-    };
-}
-/**
- * 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
- */
-export const getComponentForRendering = (renderingDefinition, placeholderName, componentMap, hiddenRenderingComponent, missingComponentComponent) => {
-    var _a, _b;
-    const logUnknownComponentError = (variant) => {
-        console.error(`Placeholder ${placeholderName} contains unknown component ${renderingDefinition.componentName}${variant ? ` (${variant})` : ''}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
-    };
-    if (renderingDefinition.componentName === constants.HIDDEN_RENDERING_NAME) {
-        return {
-            component: hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering,
-            isEmpty: true,
-            componentType: 'universal',
-        };
-    }
-    else if (!renderingDefinition.componentName) {
-        return {
-            component: () => React.createElement(React.Fragment, null),
-            isEmpty: true,
-            componentType: 'universal',
-        };
-    }
-    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 === FEAAS_COMPONENT_RENDERING_NAME) {
-            return {
-                component: FEaaSComponent,
-                isEmpty: false,
-                componentType: 'universal',
-            };
-        }
-        else if (renderingDefinition.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
-            return {
-                component: FEaaSWrapper,
-                isEmpty: false,
-                componentType: 'universal',
-            };
-        }
-        else if (renderingDefinition.componentName === BYOC_COMPONENT_RENDERING_NAME) {
-            return {
-                component: BYOCComponent,
-                isEmpty: false,
-                componentType: 'universal',
-            };
-        }
-        else if (renderingDefinition.componentName === 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,
-                dynamic: true,
-                componentType: 'universal',
-                isEmpty: false,
-            };
-        }
-        logUnknownComponentError();
-        return {
-            component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent,
-            isEmpty: true,
-            componentType: 'universal',
-        };
-    }
-    // Render SXA Rendering Variant if available
-    const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
-    const renderedComponent = exportName && exportName !== DEFAULT_EXPORT_NAME
-        ? component[exportName]
-        : component.default ||
-            component.Default ||
-            component;
-    if (!renderedComponent) {
-        logUnknownComponentError(exportName !== DEFAULT_EXPORT_NAME ? exportName : undefined);
-        return {
-            component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent,
-            isEmpty: true,
-            componentType: 'universal',
-        };
-    }
-    const dynamic = !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload) ||
-        renderingDefinition.componentName === BYOC_WRAPPER_RENDERING_NAME;
-    // all dynamic elements will have a separate render prop
-    return {
-        component: renderedComponent,
-        dynamic,
-        componentType: component
-            .componentType,
-        isEmpty: false,
-    };
-};
+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 from 'react';
+import { MissingComponent } from '../MissingComponent';
+import { DEFAULT_EXPORT_NAME } from '../sharedTypes';
+import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-content-sdk/core/layout';
+import { constants } from '@sitecore-content-sdk/core';
+import { HiddenRendering } from '../HiddenRendering';
+import { FEaaSComponent, FEaaSWrapper, BYOCComponent, BYOCWrapper, BYOC_COMPONENT_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, FEAAS_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, } from '../FEaaS';
+/**
+ * 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
+ */
+export 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.entries(rendering.placeholders).forEach(([key, value]) => {
+            const patternPlaceholder = isDynamicPlaceholder(key)
+                ? getDynamicPlaceholderPattern(key)
+                : null;
+            if (patternPlaceholder && patternPlaceholder.test(phName)) {
+                if (isEditing) {
+                    phName = key;
+                }
+                else {
+                    rendering.placeholders[phName] = value;
+                    delete rendering.placeholders[key];
+                }
+            }
+        });
+    }
+    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;
+};
+/**
+ * Get SXA specific params from Sitecore rendering params
+ * @param {ComponentRendering} rendering rendering object
+ * @returns {object} converted SXA params
+ */
+export const getSXAParams = (rendering) => {
+    if (!rendering.params)
+        return { styles: '' };
+    const { GridParameters, Styles } = rendering.params;
+    return ((GridParameters || Styles) && {
+        styles: `${GridParameters || ''} ${Styles || ''}`,
+    });
+};
+/**
+ * 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
+ */
+export const renderEmptyPlaceholder = (node) => {
+    return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+};
+/**
+ * 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
+ */
+export const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
+    // eslint-disable-next-line no-unused-vars
+    const { fields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
+    delete passThroughProps.missingComponentComponent;
+    delete passThroughProps.hiddenRenderingComponent;
+    delete passThroughProps.name;
+    const mergedContentProps = getAppComponentProps(placeholderProps, componentRendering);
+    return Object.assign(Object.assign(Object.assign({ key: renderingKey }, passThroughProps), mergedContentProps), { rendering: componentRendering });
+};
+/**
+ * Merge placeholder and component field and params content props.
+ * @param {BasePlaceholderProps} placeholderProps placeholder props
+ * @param {ComponentRendering} componentRendering component rendering
+ * @returns {ComponentProps} merged props
+ */
+export function getAppComponentProps(placeholderProps, componentRendering) {
+    const fields = Object.assign(Object.assign({}, (placeholderProps.fields || {})), (componentRendering.fields || {}));
+    const params = Object.assign(Object.assign({}, (placeholderProps.params || {})), (componentRendering.params || {}));
+    return {
+        fields,
+        params: Object.assign(Object.assign({}, params), getSXAParams(componentRendering)),
+        rendering: componentRendering,
+    };
+}
+/**
+ * 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
+ */
+export const getComponentForRendering = (renderingDefinition, placeholderName, componentMap, hiddenRenderingComponent, missingComponentComponent) => {
+    var _a, _b;
+    const logUnknownComponentError = (variant) => {
+        console.error(`Placeholder ${placeholderName} contains unknown component ${renderingDefinition.componentName}${variant ? ` (${variant})` : ''}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
+    };
+    if (renderingDefinition.componentName === constants.HIDDEN_RENDERING_NAME) {
+        return {
+            component: hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering,
+            isEmpty: true,
+            componentType: 'universal',
+        };
+    }
+    else if (!renderingDefinition.componentName) {
+        return {
+            component: () => React.createElement(React.Fragment, null),
+            isEmpty: true,
+            componentType: 'universal',
+        };
+    }
+    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 === FEAAS_COMPONENT_RENDERING_NAME) {
+            return {
+                component: FEaaSComponent,
+                isEmpty: false,
+                componentType: 'universal',
+            };
+        }
+        else if (renderingDefinition.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
+            return {
+                component: FEaaSWrapper,
+                isEmpty: false,
+                componentType: 'universal',
+            };
+        }
+        else if (renderingDefinition.componentName === BYOC_COMPONENT_RENDERING_NAME) {
+            return {
+                component: BYOCComponent,
+                isEmpty: false,
+                componentType: 'universal',
+            };
+        }
+        else if (renderingDefinition.componentName === 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,
+                dynamic: true,
+                componentType: 'universal',
+                isEmpty: false,
+            };
+        }
+        logUnknownComponentError();
+        return {
+            component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent,
+            isEmpty: true,
+            componentType: 'universal',
+        };
+    }
+    // Render SXA Rendering Variant if available
+    const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+    const renderedComponent = exportName && exportName !== DEFAULT_EXPORT_NAME
+        ? component[exportName]
+        : component.default ||
+            component.Default ||
+            component;
+    if (!renderedComponent) {
+        logUnknownComponentError(exportName !== DEFAULT_EXPORT_NAME ? exportName : undefined);
+        return {
+            component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent,
+            isEmpty: true,
+            componentType: 'universal',
+        };
+    }
+    const dynamic = !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload) ||
+        renderingDefinition.componentName === BYOC_WRAPPER_RENDERING_NAME;
+    // all dynamic elements will have a separate render prop
+    return {
+        component: renderedComponent,
+        dynamic,
+        componentType: component
+            .componentType,
+        isEmpty: false,
+    };
+};

package/dist/esm/components/RichText.js

@@ -1,34 +1,39 @@
-'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 { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef((
-// eslint-disable-next-line no-unused-vars
-_a, ref) => {
-    var 
-    // eslint-disable-next-line no-unused-vars
-    { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, 
-    // eslint-disable-next-line no-unused-vars
-    ["field", "tag", "editable"]);
-    if (isFieldValueEmpty(field)) {
-        return null;
-    }
-    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
-            __html: field.value,
-        }, ref }, otherProps);
-    return React.createElement(tag || 'div', htmlProps);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
-RichText.displayName = 'RichText';
+'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 { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+/**
+ * The RichText component.
+ * @param {RichTextProps} props component props
+ * @public
+ */
+export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef((
+// eslint-disable-next-line no-unused-vars
+_a, ref) => {
+    var 
+    // eslint-disable-next-line no-unused-vars
+    { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, 
+    // eslint-disable-next-line no-unused-vars
+    ["field", "tag", "editable"]);
+    if (isFieldValueEmpty(field)) {
+        return null;
+    }
+    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
+            __html: field.value,
+        }, ref }, otherProps);
+    return React.createElement(tag || 'div', htmlProps);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreProvider.js

@@ -1,45 +1,55 @@
-'use client';
-import React from 'react';
-import fastDeepEqual from 'fast-deep-equal/es6/react';
-import { constants } from '@sitecore-content-sdk/core';
-export const SitecoreProviderReactContext = React.createContext({});
-export const ComponentMapReactContext = React.createContext(new Map());
-export class SitecoreProvider extends React.Component {
-    constructor(props) {
-        var _a, _b, _c, _d, _e, _f;
-        super(props);
-        /**
-         * Update page state.
-         * @param {Page} value New page value
-         */
-        this.setPage = (value) => {
-            this.setState({
-                page: value,
-            });
-        };
-        // If any Edge ID is present but no edgeUrl, apply the default
-        let api = props.api;
-        if ((((_b = (_a = props.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId) || ((_d = (_c = props.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.clientContextId)) &&
-            !((_f = (_e = props.api) === null || _e === void 0 ? void 0 : _e.edge) === null || _f === void 0 ? void 0 : _f.edgeUrl)) {
-            api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: constants.SITECORE_EDGE_URL_DEFAULT }) });
-        }
-        this.state = {
-            page: props.page,
-            setPage: this.setPage,
-            api,
-        };
-    }
-    componentDidUpdate(prevProps) {
-        // In case if somebody will manage SitecoreProvider state by passing fresh `page` prop
-        // instead of using `updateContext`
-        if (!fastDeepEqual(prevProps.page, this.props.page)) {
-            this.setPage(this.props.page);
-            return;
-        }
-    }
-    render() {
-        return (React.createElement(ComponentMapReactContext.Provider, { value: this.props.componentMap },
-            React.createElement(SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children)));
-    }
-}
-SitecoreProvider.displayName = 'SitecoreProvider';
+'use client';
+import React from 'react';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
+import { constants } from '@sitecore-content-sdk/core';
+/**
+ * The context for the SitecoreProvider component.
+ * @public
+ */
+export const SitecoreProviderReactContext = React.createContext({});
+export const ComponentMapReactContext = React.createContext(new Map());
+export const ImportMapReactContext = React.createContext(undefined);
+/**
+ * The SitecoreProvider component.
+ * @public
+ */
+export class SitecoreProvider extends React.Component {
+    constructor(props) {
+        var _a, _b, _c, _d, _e, _f;
+        super(props);
+        /**
+         * Update page state.
+         * @param {Page} value New page value
+         */
+        this.setPage = (value) => {
+            this.setState({
+                page: value,
+            });
+        };
+        // If any Edge ID is present but no edgeUrl, apply the default
+        let api = props.api;
+        if ((((_b = (_a = props.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId) || ((_d = (_c = props.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.clientContextId)) &&
+            !((_f = (_e = props.api) === null || _e === void 0 ? void 0 : _e.edge) === null || _f === void 0 ? void 0 : _f.edgeUrl)) {
+            api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: constants.SITECORE_EDGE_URL_DEFAULT }) });
+        }
+        this.state = {
+            page: props.page,
+            setPage: this.setPage,
+            api,
+        };
+    }
+    componentDidUpdate(prevProps) {
+        // In case if somebody will manage SitecoreProvider state by passing fresh `page` prop
+        // instead of using `updateContext`
+        if (!fastDeepEqual(prevProps.page, this.props.page)) {
+            this.setPage(this.props.page);
+            return;
+        }
+    }
+    render() {
+        return (React.createElement(ImportMapReactContext.Provider, { value: this.props.loadImportMap },
+            React.createElement(ComponentMapReactContext.Provider, { value: this.props.componentMap },
+                React.createElement(SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children))));
+    }
+}
+SitecoreProvider.displayName = 'SitecoreProvider';