@sitecore-content-sdk/react 0.2.0 → 0.3.0-canary.2

package/dist/cjs/components/EditingScripts.js

@@ -6,7 +6,7 @@ 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");
 /**
@@ -17,7 +17,7 @@ const editing_2 = require("@sitecore-content-sdk/core/editing");
  * @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 { pageContext: { pageState, clientData, clientScripts, renderingType }, } = (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 ||

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;
@@ -92,4 +92,4 @@ class ErrorBoundary extends react_1.default.Component {
         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/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,9 +53,9 @@ 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) {

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);
@@ -41,14 +41,12 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
                 "."));
         }
         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

@@ -136,13 +136,13 @@ class PlaceholderCommon extends react_1.default.Component {
                 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));
             }
             // 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,36 @@ 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;
         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);
         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)) {
             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,
         };
@@ -47,8 +47,8 @@ class SitecoreContext extends react_1.default.Component {
         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]
@@ -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 JSS 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.GraphQLSitePathService = 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.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;
 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; } });
@@ -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");

package/dist/esm/components/EditingScripts.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LayoutServicePageState, RenderingType } from '@sitecore-content-sdk/core/layout';
-import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { useSitecore } from '../enhancers/withSitecore';
 import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
 import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
 /**
@@ -11,7 +11,7 @@ import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
  * @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();
+    const { pageContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecore();
     // Don't render anything if not in editing/preview mode and rendering type is not component
     if (renderingType !== RenderingType.Component &&
         (pageState === LayoutServicePageState.Normal ||

package/dist/esm/components/ErrorBoundary.js

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
-import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+import { withSitecore } from '../enhancers/withSitecore';
 class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
@@ -24,8 +24,8 @@ class ErrorBoundary extends React.Component {
     showErrorDetails() {
         var _a, _b;
         return (this.isInDevMode() ||
-            ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === LayoutServicePageState.Edit ||
-            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
+            ((_a = this.props.pageContext) === null || _a === void 0 ? void 0 : _a.pageState) === LayoutServicePageState.Edit ||
+            ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
     }
     render() {
         var _a;
@@ -57,4 +57,4 @@ class ErrorBoundary extends React.Component {
         return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
     }
 }
-export default withSitecoreContext()(ErrorBoundary);
+export default withSitecore()(ErrorBoundary);

package/dist/esm/components/Form.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { form } from '@sitecore-content-sdk/core';
-import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { useSitecore } from '../enhancers/withSitecore';
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
 /**
  * Mock function to replace the form module functions for `testing` purposes.
@@ -16,9 +16,9 @@ export const Form = ({ params, rendering }) => {
     const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
     const [error, setError] = useState(false);
     const [content, setContent] = useState('');
-    const context = useSitecoreContext();
+    const context = useSitecore();
     const formRef = useRef(null);
-    const isEditing = context.sitecoreContext.pageEditing;
+    const isEditing = context.pageContext.pageEditing;
     useEffect(() => {
         var _a, _b, _c, _d;
         if (!content) {

package/dist/esm/components/Placeholder.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentMap } from '../enhancers/withComponentMap';
 import { PagesEditor } from '@sitecore-content-sdk/core/editing';
-import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+import { withSitecore } from '../enhancers/withSitecore';
 class PlaceholderComponent extends PlaceholderCommon {
     constructor(props) {
         super(props);
@@ -35,14 +35,12 @@ class PlaceholderComponent extends PlaceholderCommon {
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing);
+        const placeholderData = 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);
@@ -62,4 +60,4 @@ class PlaceholderComponent extends PlaceholderCommon {
     }
 }
 const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
-export const Placeholder = withSitecoreContext()(PlaceholderWithComponentMap);
+export const Placeholder = withSitecore()(PlaceholderWithComponentMap);

package/dist/esm/components/PlaceholderCommon.js

@@ -130,13 +130,13 @@ export class PlaceholderCommon extends React.Component {
                 rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
             }
             // 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.createElement(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.createElement(PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
             ];

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

@@ -2,31 +2,31 @@
 import React from 'react';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
 import { constants } from '@sitecore-content-sdk/core';
-export const SitecoreContextReactContext = React.createContext({});
+export const SitecoreProviderReactContext = React.createContext({});
 export const ComponentMapReactContext = React.createContext(new Map());
-export class SitecoreContext extends React.Component {
+export class SitecoreProvider extends React.Component {
     constructor(props) {
         var _a, _b, _c, _d;
         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);
         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)) {
             api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: constants.SITECORE_EDGE_URL_DEFAULT }) });
         }
         this.state = {
-            context,
+            pageContext,
             setContext: this.setContext,
             api,
         };
@@ -41,8 +41,8 @@ export class SitecoreContext extends React.Component {
         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 (!fastDeepEqual(prevProps.layoutData, this.props.layoutData)) {
             this.setContext(this.props.layoutData);
             return;
@@ -50,7 +50,7 @@ export class SitecoreContext extends React.Component {
     }
     render() {
         return (React.createElement(ComponentMapReactContext.Provider, { value: this.props.componentMap },
-            React.createElement(SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
+            React.createElement(SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children)));
     }
 }
-SitecoreContext.displayName = 'SitecoreContext';
+SitecoreProvider.displayName = 'SitecoreProvider';

package/dist/esm/enhancers/withComponentMap.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMapReactContext } from '../components/SitecoreContext';
+import { ComponentMapReactContext } from '../components/SitecoreProvider';
 import { useContext } from 'react';
 /**
  * @param {React.ComponentClass<T> | React.FC<T>} Component

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RenderingType } from '@sitecore-content-sdk/core/layout';
-import { useSitecoreContext } from './withSitecoreContext';
+import { useSitecore } from './withSitecore';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
  * Checks whether a Sitecore datasource is present and renders appropriately depending on page mode (normal vs editing).
@@ -13,11 +13,11 @@ export function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
         return function WithDatasourceCheck(props) {
             var _a, _b;
-            const { sitecoreContext } = useSitecoreContext();
+            const { pageContext } = useSitecore();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : 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) === RenderingType.Component;
-            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+            const isDesignLibrary = (pageContext === null || pageContext === void 0 ? void 0 : pageContext.renderingType) === RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : pageContext.pageEditing ? (React.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/esm/enhancers/withPlaceholder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PlaceholderCommon } from '../components/PlaceholderCommon';
 import { withComponentMap } from './withComponentMap';
-import { withSitecoreContext } from './withSitecoreContext';
+import { withSitecore } from './withSitecore';
 /**
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
@@ -36,13 +36,13 @@ export function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.pageEditing);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.pageContext.pageEditing);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.pageEditing);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.pageContext.pageEditing);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }
@@ -51,6 +51,6 @@ export function withPlaceholder(placeholders, options) {
                 return React.createElement(WrappedComponent, Object.assign({}, childProps));
             }
         }
-        return withSitecoreContext()(withComponentMap(WithPlaceholder));
+        return withSitecore()(withComponentMap(WithPlaceholder));
     };
 }

package/dist/esm/enhancers/withSitecore.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SitecoreProviderReactContext, } from '../components/SitecoreProvider';
+/**
+ * @param {WithSitecoreProviderOptions} [options]
+ */
+export function withSitecore(options) {
+    return function withSitecoreProviderHoc(Component) {
+        return function WithSitecoreProvider(props) {
+            return (React.createElement(SitecoreProviderReactContext.Consumer, null, (value) => (React.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 JSS 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 }
+ */
+export function useSitecore(options) {
+    const reactContext = React.useContext(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/esm/index.js

@@ -17,8 +17,8 @@ export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOC
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link } from './components/Link';
 export { File } from './components/File';
-export { SitecoreContext, SitecoreContextReactContext, } from './components/SitecoreContext';
-export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSitecoreContext';
+export { SitecoreProvider, SitecoreProviderReactContext, } from './components/SitecoreProvider';
+export { withSitecore, useSitecore, } from './enhancers/withSitecore';
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "0.2.0",
+  "version": "0.3.0-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -63,12 +63,12 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "0.2.0",
+    "@sitecore-content-sdk/core": "0.3.0-canary.2",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "0ea2d0d026c3be308ae018629020aa00442d6b42",
+  "gitHead": "8243c78fad6aa9456ac8cb726ac0a90c72589506",
   "files": [
     "dist",
     "types"

package/types/components/ErrorBoundary.d.ts

@@ -1,17 +1,17 @@
 import React, { ReactNode } from 'react';
 import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
-import { SitecoreContextValue } from './SitecoreContext';
+import { SitecoreProviderPageContext } from './SitecoreProvider';
 type ErrorComponentProps = {
     [prop: string]: unknown;
 };
 export type ErrorBoundaryProps = {
     children: ReactNode;
-    sitecoreContext: SitecoreContextValue;
+    pageContext: SitecoreProviderPageContext;
     type: string;
     isDynamic?: boolean;
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     rendering?: ComponentRendering;
     componentLoadingMessage?: string;
 };
-declare const _default: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;
+declare const _default: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecore").WithSitecoreProps>) => React.JSX.Element;
 export default _default;

package/types/components/Placeholder.d.ts

@@ -17,4 +17,4 @@ export interface PlaceholderComponentProps extends PlaceholderProps {
      */
     renderEach?: (component: React.ReactNode, index: number) => React.ReactNode;
 }
-export declare const Placeholder: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderComponentProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;
+export declare const Placeholder: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderComponentProps, keyof import("../enhancers/withSitecore").WithSitecoreProps>) => React.JSX.Element;

package/types/components/PlaceholderCommon.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'react';
 import { ComponentMap } from './sharedTypes';
 import { ComponentRendering, RouteData, Field, Item } from '@sitecore-content-sdk/core/layout';
-import { SitecoreContextValue } from './SitecoreContext';
+import { SitecoreProviderPageContext } from './SitecoreProvider';
 type ErrorComponentProps = {
     [prop: string]: unknown;
 };
@@ -18,7 +18,7 @@ export interface PlaceholderProps {
     rendering: ComponentRendering | RouteData;
     /**
      * Component Map will be used to map Sitecore component names to app implementation
-     * When rendered within a <SitecoreContext> component, defaults to the context componentMap.
+     * When rendered within a <SitecoreProvider> component, defaults to the context componentMap.
      */
     componentMap?: ComponentMap;
     /**
@@ -57,9 +57,10 @@ export interface PlaceholderProps {
      */
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     /**
-     *  Context data from the Sitecore Layout Service
+     * Page context data.
+     * This data is passed by the SitecoreProvider.
      */
-    sitecoreContext: SitecoreContextValue;
+    pageContext: SitecoreProviderPageContext;
     /**
      * The message that gets displayed while component is loading
      */

package/types/components/SitecoreProvider.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
+import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
+import { ComponentMap } from './sharedTypes';
+export interface SitecoreProviderProps {
+    /**
+     * The API configuration defined in the `SitecoreConfig`.
+     */
+    api: SitecoreConfig['api'];
+    /**
+     * The component map to use for rendering components.
+     */
+    componentMap: ComponentMap;
+    /**
+     * The Sitecore Layout data.
+     */
+    layoutData?: LayoutServiceData;
+    children: React.ReactNode;
+}
+export interface SitecoreProviderState {
+    /**
+     * Method to set the page context.
+     * @param {SitecoreProviderPageContext | LayoutServiceData} value New page context value.
+     * @returns {void}
+     */
+    setContext: (value: SitecoreProviderPageContext | LayoutServiceData) => void;
+    /**
+     * The current page context.
+     */
+    pageContext: SitecoreProviderPageContext;
+    /**
+     * The API configuration defined in the `SitecoreConfig`.
+     */
+    api?: SitecoreProviderProps['api'];
+}
+export declare const SitecoreProviderReactContext: React.Context<SitecoreProviderState>;
+export declare const ComponentMapReactContext: React.Context<ComponentMap>;
+/**
+ * The page context provided by the SitecoreProvider.
+ */
+export type SitecoreProviderPageContext = LayoutServiceContext & {
+    itemId?: string;
+    route?: RouteData;
+};
+export declare class SitecoreProvider extends React.Component<SitecoreProviderProps, SitecoreProviderState> {
+    static displayName: string;
+    constructor(props: SitecoreProviderProps);
+    constructContext(layoutData?: LayoutServiceData): SitecoreProviderPageContext;
+    componentDidUpdate(prevProps: SitecoreProviderProps): void;
+    /**
+     * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
+     * or you can provide exact @type {SitecoreProviderPageContext}
+     * @param {SitecoreProviderPageContext | LayoutServiceData} value New context value
+     */
+    setContext: (value: SitecoreProviderPageContext | LayoutServiceData) => void;
+    render(): React.JSX.Element;
+}

package/types/enhancers/withPlaceholder.d.ts

@@ -31,4 +31,4 @@ export type WithPlaceholderSpec = (string | PlaceholderToPropMapping) | (string
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
  */
-export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderProps, keyof import("./withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;
+export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderProps, keyof import("./withSitecore").WithSitecoreProps>) => React.JSX.Element;

package/types/enhancers/withSitecore.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
+import { SitecoreProviderState, SitecoreProviderPageContext } from '../components/SitecoreProvider';
+export interface WithSitecoreOptions {
+    /**
+     * If set to true, the `updateContext` method will be injected into the component props.
+     */
+    updatable?: boolean;
+}
+export interface WithSitecoreProps {
+    /**
+     * The current page context.
+     */
+    pageContext: SitecoreProviderPageContext;
+    /**
+     * The API configuration defined in the `SitecoreConfig`.
+     */
+    api?: SitecoreProviderState['api'];
+    /**
+     * Method to update the page context. This is only available if `updatable` is set to true.
+     * @param {SitecoreProviderPageContext} value New page context value.
+     * @returns {void}
+     */
+    updateContext?: ((value: SitecoreProviderPageContext) => void) | false;
+}
+export type WithSitecoreHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreProps>;
+/**
+ * @param {WithSitecoreProviderOptions} [options]
+ */
+export declare function withSitecore(options?: WithSitecoreOptions): <ComponentProps extends WithSitecoreProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreHocProps<ComponentProps>) => React.JSX.Element;
+/**
+ * This hook grants acсess to the current Sitecore page context and api.
+ * by default JSS includes the following properties in this context:
+ * - 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 }
+ */
+export declare function useSitecore(options?: WithSitecoreOptions): WithSitecoreProps;

package/types/index.d.ts

@@ -19,8 +19,8 @@ export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCCompon
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps } from './components/Link';
 export { File, FileField } from './components/File';
-export { SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, } from './components/SitecoreContext';
-export { withSitecoreContext, useSitecoreContext, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, } from './enhancers/withSitecoreContext';
+export { SitecoreProvider, SitecoreProviderState, SitecoreProviderPageContext, SitecoreProviderReactContext, } from './components/SitecoreProvider';
+export { withSitecore, useSitecore, WithSitecoreOptions, WithSitecoreProps, WithSitecoreHocProps, } from './enhancers/withSitecore';
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -1,48 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withSitecoreContext = withSitecoreContext;
-exports.useSitecoreContext = useSitecoreContext;
-const react_1 = __importDefault(require("react"));
-const SitecoreContext_1 = require("../components/SitecoreContext");
-/**
- * @param {WithSitecoreContextOptions} [options]
- */
-function withSitecoreContext(options) {
-    return function withSitecoreContextHoc(Component) {
-        return function WithSitecoreContext(props) {
-            return (react_1.default.createElement(SitecoreContext_1.SitecoreContextReactContext.Consumer, null, (context) => (react_1.default.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
-        };
-    };
-}
-/**
- * This hook grants acсess to the current Sitecore page context
- * by default JSS 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 {WithSitecoreContextOptions} [options] hook options
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext } = useSitecoreContext();
- *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
- *    const onClick = () => updateSitecoreContext({ pageEditing: true });
- *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @returns {object} { sitecoreContext, updateSitecoreContext }
- */
-function useSitecoreContext(options) {
-    const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);
-    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
-    return {
-        api: reactContext.api,
-        sitecoreContext: reactContext.context,
-        updateSitecoreContext: updatable ? reactContext.setContext : undefined,
-    };
-}

package/dist/esm/enhancers/withSitecoreContext.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { SitecoreContextReactContext, } from '../components/SitecoreContext';
-/**
- * @param {WithSitecoreContextOptions} [options]
- */
-export function withSitecoreContext(options) {
-    return function withSitecoreContextHoc(Component) {
-        return function WithSitecoreContext(props) {
-            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
-        };
-    };
-}
-/**
- * This hook grants acсess to the current Sitecore page context
- * by default JSS 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 {WithSitecoreContextOptions} [options] hook options
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext } = useSitecoreContext();
- *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
- *    const onClick = () => updateSitecoreContext({ pageEditing: true });
- *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @returns {object} { sitecoreContext, updateSitecoreContext }
- */
-export function useSitecoreContext(options) {
-    const reactContext = React.useContext(SitecoreContextReactContext);
-    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
-    return {
-        api: reactContext.api,
-        sitecoreContext: reactContext.context,
-        updateSitecoreContext: updatable ? reactContext.setContext : undefined,
-    };
-}

package/types/components/SitecoreContext.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
-import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
-import { ComponentMap } from './sharedTypes';
-export interface SitecoreContextProps {
-    api: SitecoreConfig['api'];
-    componentMap: ComponentMap;
-    layoutData?: LayoutServiceData;
-    children: React.ReactNode;
-}
-export interface SitecoreContextState {
-    setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
-    context: SitecoreContextValue;
-    api?: SitecoreContextProps['api'];
-}
-export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
-export declare const ComponentMapReactContext: React.Context<ComponentMap>;
-export type SitecoreContextValue = LayoutServiceContext & {
-    itemId?: string;
-    route?: RouteData;
-};
-export declare class SitecoreContext extends React.Component<SitecoreContextProps, SitecoreContextState> {
-    static displayName: string;
-    constructor(props: SitecoreContextProps);
-    constructContext(layoutData?: LayoutServiceData): SitecoreContextValue;
-    componentDidUpdate(prevProps: SitecoreContextProps): void;
-    /**
-     * 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
-     */
-    setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
-    render(): React.JSX.Element;
-}

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
-import { SitecoreContextState, SitecoreContextValue } from '../components/SitecoreContext';
-export interface WithSitecoreContextOptions {
-    updatable?: boolean;
-}
-export interface WithSitecoreContextProps {
-    sitecoreContext: SitecoreContextValue;
-    api?: SitecoreContextState['api'];
-    updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
-}
-export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
-/**
- * @param {WithSitecoreContextOptions} [options]
- */
-export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends WithSitecoreContextProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreContextHocProps<ComponentProps>) => React.JSX.Element;
-/**
- * This hook grants acсess to the current Sitecore page context
- * by default JSS 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 {WithSitecoreContextOptions} [options] hook options
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext } = useSitecoreContext();
- *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @example
- * const EditMode = () => {
- *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
- *    const onClick = () => updateSitecoreContext({ pageEditing: true });
- *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
- * }
- * @returns {object} { sitecoreContext, updateSitecoreContext }
- */
-export declare function useSitecoreContext(options?: WithSitecoreContextOptions): WithSitecoreContextProps;