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

package/dist/cjs/enhancers/withEditorChromes.js

@@ -1,24 +1,29 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEditorChromes = void 0;
-const react_1 = __importDefault(require("react"));
-const __1 = require("..");
-const withEditorChromes = (WrappedComponent) => {
-    class Enhancer extends react_1.default.Component {
-        constructor() {
-            super(...arguments);
-            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-        }
-        componentDidUpdate() {
-            (0, __1.resetEditorChromes)();
-        }
-        render() {
-            return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props));
-        }
-    }
-    return Enhancer;
-};
-exports.withEditorChromes = withEditorChromes;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withEditorChromes = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+/**
+ * HOC to inject editor chromes reset on component update.
+ * @param {React.ComponentClass<unknown> | React.FC<unknown>} WrappedComponent - The component to wrap.
+ * @public
+ */
+const withEditorChromes = (WrappedComponent) => {
+    class Enhancer extends react_1.default.Component {
+        constructor() {
+            super(...arguments);
+            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+        }
+        componentDidUpdate() {
+            (0, __1.resetEditorChromes)();
+        }
+        render() {
+            return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props));
+        }
+    }
+    return Enhancer;
+};
+exports.withEditorChromes = withEditorChromes;

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -1,70 +1,71 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;
-const react_1 = __importStar(require("react"));
-const layout_1 = require("@sitecore-content-sdk/core/layout");
-/**
- * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
- */
-function withEmptyFieldEditingComponent(FieldComponent, options) {
-    const getEmptyFieldEditingComponent = (props) => {
-        var _a;
-        const { editable = true } = props;
-        if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && (0, layout_1.isFieldValueEmpty)(props.field)) {
-            const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
-            let resolvedProps = props;
-            // If no custom empty field editing component is provided, we can omit unnecessary props
-            // to do not insert them to html
-            if (!props.emptyFieldEditingComponent) {
-                resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
-            }
-            return react_1.default.createElement(Component, Object.assign({}, resolvedProps));
-        }
-        return null;
-    };
-    if (options.isForwardRef) {
-        return (0, react_1.forwardRef)((props, ref) => {
-            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
-        });
-    }
-    return (props) => {
-        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props));
-    };
-}
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;
+const react_1 = __importStar(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+/**
+ * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
+ * @public
+ */
+function withEmptyFieldEditingComponent(FieldComponent, options) {
+    const getEmptyFieldEditingComponent = (props) => {
+        var _a;
+        const { editable = true } = props;
+        if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && (0, layout_1.isFieldValueEmpty)(props.field)) {
+            const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            let resolvedProps = props;
+            // If no custom empty field editing component is provided, we can omit unnecessary props
+            // to do not insert them to html
+            if (!props.emptyFieldEditingComponent) {
+                resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
+            }
+            return react_1.default.createElement(Component, Object.assign({}, resolvedProps));
+        }
+        return null;
+    };
+    if (options.isForwardRef) {
+        return (0, react_1.forwardRef)((props, ref) => {
+            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
+        });
+    }
+    return (props) => {
+        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props));
+    };
+}

package/dist/cjs/enhancers/withFieldMetadata.js

@@ -1,67 +1,68 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withFieldMetadata = withFieldMetadata;
-const react_1 = __importStar(require("react"));
-const FieldMetadata_1 = require("../components/FieldMetadata");
-/**
- * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {boolean} isForwardRef set to 'true' if forward reference is needed
- */
-function withFieldMetadata(FieldComponent, isForwardRef = false) {
-    if (isForwardRef) {
-        return (0, react_1.forwardRef)((props, ref) => {
-            var _a;
-            const { editable = true } = props;
-            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
-            if (!metadata || !editable) {
-                return react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
-            }
-            return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
-                react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
-        });
-    }
-    return (props) => {
-        var _a;
-        const { editable = true } = props;
-        const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
-        if (!metadata || !editable) {
-            return react_1.default.createElement(FieldComponent, Object.assign({}, props));
-        }
-        return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
-            react_1.default.createElement(FieldComponent, Object.assign({}, props))));
-    };
-}
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withFieldMetadata = withFieldMetadata;
+const react_1 = __importStar(require("react"));
+const FieldMetadata_1 = require("../components/FieldMetadata");
+/**
+ * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ * @public
+ */
+function withFieldMetadata(FieldComponent, isForwardRef = false) {
+    if (isForwardRef) {
+        return (0, react_1.forwardRef)((props, ref) => {
+            var _a;
+            const { editable = true } = props;
+            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+            if (!metadata || !editable) {
+                return react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
+            }
+            return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+                react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
+        });
+    }
+    return (props) => {
+        var _a;
+        const { editable = true } = props;
+        const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+        if (!metadata || !editable) {
+            return react_1.default.createElement(FieldComponent, Object.assign({}, props));
+        }
+        return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+            react_1.default.createElement(FieldComponent, Object.assign({}, props))));
+    };
+}

package/dist/cjs/enhancers/withLoadImportMap.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withLoadImportMap = withLoadImportMap;
+const react_1 = __importStar(require("react"));
+const SitecoreProvider_1 = require("../components/SitecoreProvider");
+/**
+ * Higher-order component that injects the loadImportMap function from context into component props.
+ * If the component already receives loadImportMap via props, the prop value takes precedence.
+ * @param {React.ComponentClass<T> | React.FC<T>} Component - The component to enhance.
+ * @returns {React.ComponentClass<T> | React.FC<T>} The enhanced component with loadImportMap injected.
+ */
+function withLoadImportMap(Component) {
+    const WithLoadImportMap = (props) => {
+        const loadImportMapContext = (0, react_1.useContext)(SitecoreProvider_1.ImportMapReactContext);
+        const loadClientImportMap = props.loadImportMap || loadImportMapContext;
+        return react_1.default.createElement(Component, Object.assign({}, props, { loadImportMap: loadClientImportMap }));
+    };
+    WithLoadImportMap.displayName = `withLoadImportMap(${Component.displayName || Component.name || 'Component'})`;
+    return WithLoadImportMap;
+}

package/dist/cjs/enhancers/withPlaceholder.js

@@ -1,65 +1,64 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withPlaceholder = withPlaceholder;
-const react_1 = __importDefault(require("react"));
-const withComponentMap_1 = require("./withComponentMap");
-const withSitecore_1 = require("./withSitecore");
-const Placeholder_1 = require("../components/Placeholder");
-/**
- * HOC to provide client-side placeholder functionality to a component.
- * @param {WithPlaceholderSpec} placeholders
- * @param {WithPlaceholderOptions} [options]
- */
-function withPlaceholder(placeholders, options) {
-    return (WrappedComponent) => {
-        class WithPlaceholder extends Placeholder_1.PlaceholderComponent {
-            constructor(props) {
-                super(props);
-            }
-            render() {
-                let childProps = Object.assign({}, this.props);
-                delete childProps.componentMap;
-                if (options && options.propsTransformer) {
-                    childProps = options.propsTransformer(childProps);
-                }
-                if (this.state.error) {
-                    if (childProps.errorComponent) {
-                        return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
-                    }
-                    return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
-                        "A rendering error occurred: ",
-                        this.state.error.message,
-                        "."));
-                }
-                const renderingData = options && options.resolvePlaceholderDataFromProps
-                    ? options.resolvePlaceholderDataFromProps(childProps)
-                    : childProps.rendering;
-                const definitelyArrayPlacholders = !Array.isArray(placeholders)
-                    ? [placeholders]
-                    : placeholders;
-                definitelyArrayPlacholders.forEach((placeholder) => {
-                    let placeholderData;
-                    if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
-                        if (placeholderData) {
-                            childProps[placeholder.prop] =
-                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
-                        }
-                    }
-                    else {
-                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder, childProps.page.mode.isEditing);
-                        if (placeholderData) {
-                            childProps[placeholder] =
-                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
-                        }
-                    }
-                });
-                return react_1.default.createElement(WrappedComponent, Object.assign({}, childProps));
-            }
-        }
-        return (0, withSitecore_1.withSitecore)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
-    };
-}
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withPlaceholder = withPlaceholder;
+const react_1 = __importDefault(require("react"));
+const withComponentMap_1 = require("./withComponentMap");
+const withSitecore_1 = require("./withSitecore");
+const Placeholder_1 = require("../components/Placeholder");
+const ErrorBoundary_1 = require("../components/ErrorBoundary");
+/**
+ * HOC to provide client-side placeholder functionality to a component.
+ * @param {WithPlaceholderSpec} placeholders
+ * @param {WithPlaceholderOptions} [options]
+ * @public
+ */
+function withPlaceholder(placeholders, options) {
+    return (WrappedComponent) => {
+        class WithPlaceholder extends Placeholder_1.PlaceholderComponent {
+            constructor(props) {
+                super(props);
+            }
+            render() {
+                let childProps = Object.assign({}, this.props);
+                delete childProps.componentMap;
+                if (options && options.propsTransformer) {
+                    childProps = options.propsTransformer(childProps);
+                }
+                if (this.state.error) {
+                    if (childProps.errorComponent) {
+                        return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
+                    }
+                    return (react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
+                }
+                const renderingData = options && options.resolvePlaceholderDataFromProps
+                    ? options.resolvePlaceholderDataFromProps(childProps)
+                    : childProps.rendering;
+                const definitelyArrayPlacholders = !Array.isArray(placeholders)
+                    ? [placeholders]
+                    : placeholders;
+                definitelyArrayPlacholders.forEach((placeholder) => {
+                    let placeholderData;
+                    if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
+                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
+                        if (placeholderData) {
+                            childProps[placeholder.prop] =
+                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                        }
+                    }
+                    else {
+                        placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder, childProps.page.mode.isEditing);
+                        if (placeholderData) {
+                            childProps[placeholder] =
+                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                        }
+                    }
+                });
+                return react_1.default.createElement(WrappedComponent, Object.assign({}, childProps));
+            }
+        }
+        return (0, withSitecore_1.withSitecore)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
+    };
+}

package/dist/cjs/enhancers/withSitecore.js

@@ -1,45 +1,47 @@
-"use strict";
-'use client';
-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, { page: value.page, api: value.api, updatePage: options && options.updatable && value.setPage })))));
-        };
-    };
-}
-/**
- * This hook grants acсess to the current Sitecore page and api.
- * @param {WithSitecoreOptions} [options] hook options
- * @example
- * const EditMode = () => {
- *    const { page } = useSitecore();
- *    return <span>Edit Mode is {page.mode.isEditing ? 'active' : 'inactive'}</span>
- * }
- * @example
- * const EditMode = () => {
- *    const { page, updatePage } = useSitecore({ updatable: true });
- *    const onClick = () => updatePage({ itemId: '123' });
- *    return <span onClick={onClick}>Item id is {page.itemId}</span>
- * }
- * @returns {object} { api, page, updatePage }
- */
-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,
-        page: reactContext.page,
-        updatePage: updatable ? reactContext.setPage : undefined,
-    };
-}
+"use strict";
+'use client';
+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]
+ * @public
+ */
+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, { page: value.page, api: value.api, updatePage: options && options.updatable && value.setPage })))));
+        };
+    };
+}
+/**
+ * This hook grants acсess to the current Sitecore page and api.
+ * @param {WithSitecoreOptions} [options] hook options
+ * @example
+ * const EditMode = () => {
+ *    const { page } = useSitecore();
+ *    return <span>Edit Mode is {page.mode.isEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @example
+ * const EditMode = () => {
+ *    const { page, updatePage } = useSitecore({ updatable: true });
+ *    const onClick = () => updatePage({ itemId: '123' });
+ *    return <span onClick={onClick}>Item id is {page.itemId}</span>
+ * }
+ * @returns {object} { api, page, updatePage }
+ * @public
+ */
+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,
+        page: reactContext.page,
+        updatePage: updatable ? reactContext.setPage : undefined,
+    };
+}