@sitecore-content-sdk/react 1.0.0-canary.1 → 1.0.0-canary.10

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

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditingScripts = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const withSitecore_1 = require("../enhancers/withSitecore");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 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 { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = (0, withSitecoreContext_1.useSitecoreContext)();
+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

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const withSitecore_1 = require("../enhancers/withSitecore");
 class ErrorBoundary extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -59,8 +59,8 @@ class ErrorBoundary extends react_1.default.Component {
     showErrorDetails() {
         var _a, _b;
         return (this.isInDevMode() ||
-            ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === layout_1.LayoutServicePageState.Edit ||
-            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === layout_1.LayoutServicePageState.Preview);
+            ((_a = this.props.pageContext) === null || _a === void 0 ? void 0 : _a.pageState) === layout_1.LayoutServicePageState.Edit ||
+            ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageState) === layout_1.LayoutServicePageState.Preview);
     }
     render() {
         var _a;
@@ -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,15 +81,15 @@ 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));
     }
 }
-exports.default = (0, withSitecoreContext_1.withSitecoreContext)()(ErrorBoundary);
+exports.default = (0, withSitecore_1.withSitecore)()(ErrorBoundary);

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

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = exports.mockFormModule = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("@sitecore-content-sdk/core");
-const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const withSitecore_1 = require("../enhancers/withSitecore");
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = core_1.form;
 /**
  * Mock function to replace the form module functions for `testing` purposes.
@@ -53,17 +53,24 @@ const Form = ({ params, rendering }) => {
     const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
     const [error, setError] = (0, react_1.useState)(false);
     const [content, setContent] = (0, react_1.useState)('');
-    const context = (0, withSitecoreContext_1.useSitecoreContext)();
+    const context = (0, withSitecore_1.useSitecore)();
     const formRef = (0, react_1.useRef)(null);
-    const isEditing = context.sitecoreContext.pageEditing;
+    const isEditing = context.pageContext.pageEditing;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
         if (!content) {
-            loadForm((_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
+            // Forms must use clientContextId since they are rendered client-side
+            const edgeId = (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId;
+            if (!edgeId) {
+                /* eslint-disable no-console */
+                console.warn('Warning: clientContextId is missing – form cannot be loaded properly on the client');
+                return;
+            }
+            loadForm(edgeId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
                 .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);
             });
@@ -76,10 +83,8 @@ const Form = ({ params, rendering }) => {
             executeScriptElements(formRef.current);
         }
     }, [content]);
-    if (isEditing) {
-        if (error) {
-            return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
-        }
+    if (isEditing && error) {
+        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

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("./PlaceholderCommon");
 const withComponentMap_1 = require("../enhancers/withComponentMap");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
-const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const withSitecore_1 = require("../enhancers/withSitecore");
 class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     constructor(props) {
         super(props);
@@ -35,20 +35,18 @@ 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,
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing);
+        const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.pageContext) === null || _a === void 0 ? void 0 : _a.pageEditing);
         this.isEmpty = !placeholderData.length;
         const components = this.getComponentsForRenderingData(placeholderData);
         if (this.isEmpty) {
             const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
-            return ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
-                ? this.renderEmptyPlaceholder(rendered)
-                : rendered;
+            return ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) ? this.renderEmptyPlaceholder(rendered) : rendered;
         }
         else if (this.props.render) {
             return this.props.render(components, placeholderData, childProps);
@@ -68,4 +66,4 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     }
 }
 const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
-exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentMap);
+exports.Placeholder = (0, withSitecore_1.withSitecore)()(PlaceholderWithComponentMap);

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,18 +132,22 @@ 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.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {
+            if ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {
                 return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
             }
             return rendered;
         })
             .filter((element) => element); // remove nulls
-        if ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing) {
+        if ((_a = this.props.pageContext) === null || _a === void 0 ? void 0 : _a.pageEditing) {
             return [
                 react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
             ];

package/dist/cjs/components/{SitecoreContext.js → SitecoreProvider.js}

@@ -3,36 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SitecoreContext = exports.ComponentMapReactContext = exports.SitecoreContextReactContext = void 0;
+exports.SitecoreProvider = exports.ComponentMapReactContext = exports.SitecoreProviderReactContext = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
 const core_1 = require("@sitecore-content-sdk/core");
-exports.SitecoreContextReactContext = react_1.default.createContext({});
+exports.SitecoreProviderReactContext = react_1.default.createContext({});
 exports.ComponentMapReactContext = react_1.default.createContext(new Map());
-class SitecoreContext extends react_1.default.Component {
+class SitecoreProvider extends react_1.default.Component {
     constructor(props) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         super(props);
         /**
          * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
-         * or you can provide exact @type {SitecoreContextValue}
-         * @param {SitecoreContextValue | LayoutServiceData} value New context value
+         * or you can provide exact @type {SitecoreProviderPageContext}
+         * @param {SitecoreProviderPageContext | LayoutServiceData} value New context value
          */
         this.setContext = (value) => {
             this.setState({
-                context: value.sitecore
+                pageContext: value.sitecore
                     ? this.constructContext(value)
                     : Object.assign({}, value),
             });
         };
-        const context = this.constructContext(props.layoutData);
+        const pageContext = this.constructContext(props.layoutData);
+        // 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.edgeUrl)) {
+        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: core_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
         }
         this.state = {
-            context,
+            pageContext,
             setContext: this.setContext,
             api,
         };
@@ -40,15 +42,13 @@ class SitecoreContext extends react_1.default.Component {
     constructContext(layoutData) {
         var _a;
         if (!layoutData) {
-            return {
-                pageEditing: false,
-            };
+            return { pageEditing: false };
         }
         return Object.assign({ route: layoutData.sitecore.route, itemId: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.itemId }, layoutData.sitecore.context);
     }
     componentDidUpdate(prevProps) {
-        // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
-        // instead of using `updateSitecoreContext`
+        // In case if somebody will manage SitecoreProvider state by passing fresh `layoutData` prop
+        // instead of using `updateContext`
         if (!(0, react_2.default)(prevProps.layoutData, this.props.layoutData)) {
             this.setContext(this.props.layoutData);
             return;
@@ -56,8 +56,8 @@ class SitecoreContext extends react_1.default.Component {
     }
     render() {
         return (react_1.default.createElement(exports.ComponentMapReactContext.Provider, { value: this.props.componentMap },
-            react_1.default.createElement(exports.SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
+            react_1.default.createElement(exports.SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children)));
     }
 }
-exports.SitecoreContext = SitecoreContext;
-SitecoreContext.displayName = 'SitecoreContext';
+exports.SitecoreProvider = SitecoreProvider;
+SitecoreProvider.displayName = 'SitecoreProvider';

package/dist/cjs/enhancers/withComponentMap.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withComponentMap = withComponentMap;
 const react_1 = __importDefault(require("react"));
-const SitecoreContext_1 = require("../components/SitecoreContext");
+const SitecoreProvider_1 = require("../components/SitecoreProvider");
 const react_2 = require("react");
 /**
  * @param {React.ComponentClass<T> | React.FC<T>} Component
@@ -16,7 +16,7 @@ function withComponentMap(Component) {
      * @returns {JSX.Element} - the rendered component
      */
     function WithComponentMap(props) {
-        const context = (0, react_2.useContext)(SitecoreContext_1.ComponentMapReactContext);
+        const context = (0, react_2.useContext)(SitecoreProvider_1.ComponentMapReactContext);
         return react_1.default.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
     }
     WithComponentMap.displayName = `withComponentMap(${Component.displayName ||

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -7,7 +7,7 @@ exports.DefaultEditingError = void 0;
 exports.withDatasourceCheck = withDatasourceCheck;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-const withSitecoreContext_1 = require("./withSitecoreContext");
+const withSitecore_1 = require("./withSitecore");
 const DefaultEditingError = () => (react_1.default.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 exports.DefaultEditingError = DefaultEditingError;
 /**
@@ -21,11 +21,11 @@ function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
         return function WithDatasourceCheck(props) {
             var _a, _b;
-            const { sitecoreContext } = (0, withSitecoreContext_1.useSitecoreContext)();
+            const { pageContext } = (0, withSitecore_1.useSitecore)();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : exports.DefaultEditingError;
             // If the component is rendered in DesignLibrary, we don't need to check for datasource
-            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === layout_1.RenderingType.Component;
-            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
+            const isDesignLibrary = (pageContext === null || pageContext === void 0 ? void 0 : pageContext.renderingType) === layout_1.RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : pageContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/cjs/enhancers/withPlaceholder.js

@@ -7,7 +7,7 @@ exports.withPlaceholder = withPlaceholder;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
 const withComponentMap_1 = require("./withComponentMap");
-const withSitecoreContext_1 = require("./withSitecoreContext");
+const withSitecore_1 = require("./withSitecore");
 /**
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
@@ -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,
                         "."));
@@ -42,13 +42,13 @@ 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.sitecoreContext.pageEditing);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.pageContext.pageEditing);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.pageEditing);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.pageContext.pageEditing);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }
@@ -57,6 +57,6 @@ function withPlaceholder(placeholders, options) {
                 return react_1.default.createElement(WrappedComponent, Object.assign({}, childProps));
             }
         }
-        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
+        return (0, withSitecore_1.withSitecore)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
     };
 }

package/dist/cjs/enhancers/withSitecore.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSitecore = withSitecore;
+exports.useSitecore = useSitecore;
+const react_1 = __importDefault(require("react"));
+const SitecoreProvider_1 = require("../components/SitecoreProvider");
+/**
+ * @param {WithSitecoreProviderOptions} [options]
+ */
+function withSitecore(options) {
+    return function withSitecoreProviderHoc(Component) {
+        return function WithSitecoreProvider(props) {
+            return (react_1.default.createElement(SitecoreProvider_1.SitecoreProviderReactContext.Consumer, null, (value) => (react_1.default.createElement(Component, Object.assign({}, props, { pageContext: value.pageContext, api: value.api, updateContext: options && options.updatable && value.setContext })))));
+        };
+    };
+}
+/**
+ * This hook grants acсess to the current Sitecore page context and api.
+ * 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.
+ * @param {WithSitecoreOptions} [options] hook options
+ * @example
+ * const EditMode = () => {
+ *    const { pageContext } = useSitecore();
+ *    return <span>Edit Mode is {pageContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @example
+ * const EditMode = () => {
+ *    const { pageContext, updateContext } = useSitecore({ updatable: true });
+ *    const onClick = () => updateContext({ pageEditing: true });
+ *    return <span onClick={onClick}>Edit Mode is {pageContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @returns {object} { api, pageContext, updateContext }
+ */
+function useSitecore(options) {
+    const reactContext = react_1.default.useContext(SitecoreProvider_1.SitecoreProviderReactContext);
+    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
+    return {
+        api: reactContext.api,
+        pageContext: reactContext.pageContext,
+        updateContext: updatable ? reactContext.setContext : undefined,
+    };
+}

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphQLSitePathService = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = 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.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = 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.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.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; } });
@@ -14,12 +14,12 @@ var layout_1 = require("@sitecore-content-sdk/core/layout");
 Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
 Object.defineProperty(exports, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getDesignLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
-Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
+Object.defineProperty(exports, "LayoutService", { enumerable: true, get: function () { return layout_1.LayoutService; } });
 Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
 Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
 var i18n_1 = require("@sitecore-content-sdk/core/i18n");
-Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return i18n_1.GraphQLDictionaryService; } });
+Object.defineProperty(exports, "DictionaryService", { enumerable: true, get: function () { return i18n_1.DictionaryService; } });
 var client_1 = require("@sitecore-content-sdk/core/client");
 Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return client_1.DefaultRetryStrategy; } });
 Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return client_1.GraphQLRequestClient; } });
@@ -53,12 +53,12 @@ var Link_1 = require("./components/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 var File_1 = require("./components/File");
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return File_1.File; } });
-var SitecoreContext_1 = require("./components/SitecoreContext");
-Object.defineProperty(exports, "SitecoreContext", { enumerable: true, get: function () { return SitecoreContext_1.SitecoreContext; } });
-Object.defineProperty(exports, "SitecoreContextReactContext", { enumerable: true, get: function () { return SitecoreContext_1.SitecoreContextReactContext; } });
-var withSitecoreContext_1 = require("./enhancers/withSitecoreContext");
-Object.defineProperty(exports, "withSitecoreContext", { enumerable: true, get: function () { return withSitecoreContext_1.withSitecoreContext; } });
-Object.defineProperty(exports, "useSitecoreContext", { enumerable: true, get: function () { return withSitecoreContext_1.useSitecoreContext; } });
+var SitecoreProvider_1 = require("./components/SitecoreProvider");
+Object.defineProperty(exports, "SitecoreProvider", { enumerable: true, get: function () { return SitecoreProvider_1.SitecoreProvider; } });
+Object.defineProperty(exports, "SitecoreProviderReactContext", { enumerable: true, get: function () { return SitecoreProvider_1.SitecoreProviderReactContext; } });
+var withSitecore_1 = require("./enhancers/withSitecore");
+Object.defineProperty(exports, "withSitecore", { enumerable: true, get: function () { return withSitecore_1.withSitecore; } });
+Object.defineProperty(exports, "useSitecore", { enumerable: true, get: function () { return withSitecore_1.useSitecore; } });
 var withEditorChromes_1 = require("./enhancers/withEditorChromes");
 Object.defineProperty(exports, "withEditorChromes", { enumerable: true, get: function () { return withEditorChromes_1.withEditorChromes; } });
 var withPlaceholder_1 = require("./enhancers/withPlaceholder");
@@ -75,4 +75,4 @@ var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFie
 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 site_1 = require("@sitecore-content-sdk/core/site");
-Object.defineProperty(exports, "GraphQLSitePathService", { enumerable: true, get: function () { return site_1.GraphQLSitePathService; } });
+Object.defineProperty(exports, "SitePathService", { enumerable: true, get: function () { return site_1.SitePathService; } });

package/dist/esm/components/EditingScripts.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { LayoutServicePageState, RenderingType } from '@sitecore-content-sdk/core/layout';
-import { useSitecoreContext } from '../enhancers/withSitecoreContext';
-import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
+import { useSitecore } from '../enhancers/withSitecore';
+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 { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecoreContext();
+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]) } })))));
 };