@sitecore-content-sdk/react 2.0.0-canary.1 → 2.0.0-canary.12

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -1,45 +1,15 @@
 "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;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/content/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;
+ * @param {WithEmptyFieldEditingComponentOptions} options the options of the HOC;
  * @public
  */
 function withEmptyFieldEditingComponent(FieldComponent, options) {
@@ -59,10 +29,10 @@ function withEmptyFieldEditingComponent(FieldComponent, options) {
         return null;
     };
     if (options.isForwardRef) {
-        return (0, react_1.forwardRef)((props, ref) => {
+        return (props) => {
             const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
-        });
+            return (emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props)));
+        };
     }
     return (props) => {
         const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);

package/dist/cjs/enhancers/withFieldMetadata.js

@@ -1,59 +1,29 @@
 "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;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withFieldMetadata = withFieldMetadata;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(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
+ * @param {boolean} isForwardRef set to 'true' if the ref prop should be explicitly accepted and forwarded
  * @public
  */
 function withFieldMetadata(FieldComponent, isForwardRef = false) {
     if (isForwardRef) {
-        return (0, react_1.forwardRef)((props, 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, { ref: ref }));
+                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, { ref: ref }))));
-        });
+                react_1.default.createElement(FieldComponent, Object.assign({}, props))));
+        };
     }
     return (props) => {
         var _a;

package/dist/cjs/enhancers/withPlaceholder.js

@@ -1,64 +1,28 @@
 "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.withPlaceholder = withPlaceholder;
+exports.withPlaceholder = void 0;
 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]
+ * Provides a slot-like functionality by wrapping a component in client/SSR context and rendering placeholders defined in the layout data.
+ * @param {ComponentType<T>} Component - The component to be wrapped around placeholders.
+ * @returns {React.ReactNode} A new component that renders the original component with placeholders.
  * @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));
-            }
+const withPlaceholder = (Component) => {
+    return (props) => {
+        const placeholders = props.rendering.placeholders || {};
+        const phProps = {};
+        for (const placeholder of Object.keys(placeholders)) {
+            phProps[placeholder] = (react_1.default.createElement(Placeholder_1.Placeholder, { name: placeholder, rendering: props.rendering, page: props.page, componentMap: props.componentMap }));
         }
-        return (0, withSitecore_1.withSitecore)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
+        const displayName = Component.displayName || Component.name || 'Component';
+        const propsCopy = Object.assign(Object.assign({}, props), { displayName });
+        return react_1.default.createElement(Component, Object.assign({}, propsCopy, { placeholders: phProps }));
     };
-}
+};
+exports.withPlaceholder = withPlaceholder;

package/dist/cjs/enhancers/withSitecore.js

@@ -5,43 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (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]
+ * @deprecated `useSitecore` hook is a better practice for consuming Sitecore context in components
+ * @param {UseSitecoreOptions} [options] - Options for whether return page context update method alongside the rest of context
+ * @returns A higher-order component that injects Sitecore context into the wrapped component.
  * @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 })))));
+            const scContext = (0, SitecoreProvider_1.useSitecore)(options);
+            return (react_1.default.createElement(Component, Object.assign({}, props, { page: scContext.page, api: scContext.api, setPage: scContext.setPage, componentMap: scContext.componentMap, loadImportMap: scContext.loadImportMap })));
         };
     };
 }
-/**
- * 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,
-    };
-}

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibraryApp = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.renderEmptyPlaceholder = exports.AppPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
-exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = void 0;
+exports.withAppPlaceholder = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withSitecore = exports.withEditorChromes = exports.useSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibraryApp = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.renderEmptyPlaceholder = exports.AppPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withPlaceholder = 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; } });
@@ -63,19 +63,21 @@ Object.defineProperty(exports, "File", { enumerable: true, get: function () { re
 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; } });
+Object.defineProperty(exports, "useSitecore", { enumerable: true, get: function () { return SitecoreProvider_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");
-Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
+var withSitecore_1 = require("./enhancers/withSitecore");
+Object.defineProperty(exports, "withSitecore", { enumerable: true, get: function () { return withSitecore_1.withSitecore; } });
 var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return withDatasourceCheck_1.withDatasourceCheck; } });
 var withFieldMetadata_1 = require("./enhancers/withFieldMetadata");
 Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return withFieldMetadata_1.withFieldMetadata; } });
 var withEmptyFieldEditingComponent_1 = require("./enhancers/withEmptyFieldEditingComponent");
 Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent; } });
+var withAppPlaceholder_1 = require("./enhancers/withAppPlaceholder");
+Object.defineProperty(exports, "withAppPlaceholder", { enumerable: true, get: function () { return withAppPlaceholder_1.withAppPlaceholder; } });
+var withPlaceholder_1 = require("./enhancers/withPlaceholder");
+Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
 var EditingScripts_1 = require("./components/EditingScripts");
 Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return EditingScripts_1.EditingScripts; } });
 var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");

package/dist/cjs/search/utils.js

@@ -4,14 +4,14 @@ exports.getOffset = exports.DEFAULT_PAGE_SIZE = void 0;
 exports.useSearchService = useSearchService;
 const search_1 = require("@sitecore-content-sdk/search");
 const react_1 = require("react");
-const withSitecore_1 = require("../enhancers/withSitecore");
+const SitecoreProvider_1 = require("../components/SitecoreProvider");
 exports.DEFAULT_PAGE_SIZE = 10;
 /**
  * Hook to initialize and manage SearchService.
  */
 function useSearchService() {
     var _a, _b;
-    const { api } = (0, withSitecore_1.useSitecore)();
+    const { api } = (0, SitecoreProvider_1.useSitecore)();
     return (0, react_1.useMemo)(() => {
         var _a;
         if (!((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.clientContextId)) {

package/dist/esm/components/Date.js

@@ -14,19 +14,13 @@ import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
-/**
- * The DateField component.
- * @public
- */
-export const DateField = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line no-unused-vars
-(_a) => {
-    var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
+const DateFieldComponent = (_a) => {
+    var { field, tag, render } = _a, htmlProps = __rest(_a, ["field", "tag", "render"]);
     if (isFieldValueEmpty(field)) {
         return null;
     }
+    delete htmlProps.editable; // prevent editable from being passed to the DOM
     let children;
-    const htmlProps = Object.assign({}, otherProps);
     if (render) {
         children = render(field.value ? new Date(field.value) : null);
     }
@@ -34,10 +28,18 @@ export const DateField = withFieldMetadata(withEmptyFieldEditingComponent(
         children = field.value;
     }
     if (tag) {
-        return React.createElement(tag || 'span', htmlProps, children);
+        const Tag = (tag || 'span');
+        return React.createElement(Tag, Object.assign({}, htmlProps), children);
     }
     else {
         return React.createElement(React.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+};
+/**
+ * The DateField component.
+ * @public
+ */
+export const DateField = withFieldMetadata(withEmptyFieldEditingComponent(DateFieldComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+}));
 DateField.displayName = 'Date';

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -5,7 +5,8 @@ import React from 'react';
  * @public
  */
 export const DefaultEmptyFieldEditingComponentText = (props) => {
-    return React.createElement(props.tag || 'span', Object.assign(Object.assign({}, props), { suppressHydrationWarning: true }), '[No text in field]');
+    const Tag = (props.tag || 'span');
+    return (React.createElement(Tag, Object.assign({}, props, { suppressHydrationWarning: true }), "[No text in field]"));
 };
 /**
  * The DefaultEmptyFieldEditingComponentImage component.

package/dist/esm/components/DesignLibrary/DesignLibrary.js

@@ -6,10 +6,9 @@ import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-
 import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/content/editing';
 import * as codegen from '@sitecore-content-sdk/content/codegen';
 import * as editing from '@sitecore-content-sdk/content/editing';
-import { useSitecore } from '../../enhancers/withSitecore';
+import { useSitecore } from '../../components/SitecoreProvider';
 import { Placeholder, PlaceholderMetadata } from '../Placeholder';
 import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
-import { useLoadImportMap } from '../../enhancers/withLoadImportMap';
 import { ErrorComponent } from '../ErrorBoundary';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 let { postToDesignLibrary } = editing;
@@ -29,15 +28,12 @@ export const __mockDependencies = (mocks) => {
  * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
  * wires the **variant generation** handshake so the parent (DL Studio) can send
  * generated code to preview and iterate on.
- * @param {DesignLibraryProps} props
- * @param {() => Promise} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
  * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  * @public
  */
 export const DesignLibrary = () => {
     var _a, _b;
-    const { page } = useSitecore();
-    const loadImportMap = useLoadImportMap();
+    const { page, loadImportMap } = useSitecore();
     const route = page.layout.sitecore.route;
     const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
     const uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
@@ -86,7 +82,7 @@ export const DesignLibrary = () => {
         let unsubscribe;
         (async () => {
             if (!loadImportMap) {
-                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.ImportMapMissing);
                 return;
             }
             let importMap;
@@ -95,7 +91,7 @@ export const DesignLibrary = () => {
                 importMap = mod.default;
             }
             catch (e) {
-                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.ImportMapLoad);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -118,7 +114,7 @@ export const DesignLibrary = () => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isVariantGeneration, uid]);
+    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState]);
     return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
         React.createElement(PlaceholderMetadata, { rendering: rendering },
             React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));

package/dist/esm/components/DesignLibrary/DesignLibraryClientEvents.js

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import * as dlHelpers from '@sitecore-content-sdk/content/editing';
 import * as codegen from '@sitecore-content-sdk/content/codegen';
 import { updateComponentAction, previewComponentAction, } from '../../server-actions/update-server-component-action';
-import { useSitecore } from '../../enhancers/withSitecore';
+import { useSitecore } from '../SitecoreProvider';
 let { getDesignLibraryComponentPropsEvent, addServerComponentPreviewHandler, getDesignLibraryImportMapEvent, addStyleElement, sendErrorEvent, } = codegen;
 let { getDesignLibraryStatusEvent, addComponentUpdateHandler, postToDesignLibrary } = dlHelpers;
 let _updateComponentAction = updateComponentAction;
@@ -49,7 +49,9 @@ export const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, })
  * @returns {JSX.Element} empty JSX element.
  */
 export const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, componentInitError, generatedComponentData, }) => {
+    var _a;
     const { api } = useSitecore();
+    const edgeUrl = (_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl;
     useEffect(() => {
         var _a;
         if (!(component === null || component === void 0 ? void 0 : component.uid))
@@ -63,15 +65,14 @@ export const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, comp
             });
         });
         const unsubPreview = addServerComponentPreviewHandler((eventArgs) => {
-            var _a;
             _previewComponentAction({
                 uid: component.uid,
                 args: eventArgs,
-            }, (_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl);
+            }, edgeUrl);
         });
         if (componentInitError) {
             // an error occurred during initialization of the component on the server side
-            sendErrorEvent(component.uid, componentInitError, codegen.DesignLibraryPreviewError.RenderInit);
+            sendErrorEvent(component.uid, componentInitError.message, componentInitError.type);
         }
         else {
             const importMapEvent = getDesignLibraryImportMapEvent(component.uid, importMap);
@@ -87,6 +88,13 @@ export const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, comp
             unsubUpdate && unsubUpdate();
             unsubPreview && unsubPreview();
         };
-    }, [component, designLibraryStatus, importMap, componentInitError, generatedComponentData]);
+    }, [
+        component,
+        designLibraryStatus,
+        importMap,
+        componentInitError,
+        generatedComponentData,
+        edgeUrl,
+    ]);
     return React.createElement(React.Fragment, null);
 };

package/dist/esm/components/DesignLibrary/DesignLibraryServer.js

@@ -62,10 +62,14 @@ export const DesignLibraryServerVariantGeneration = async ({ page, rendering, lo
     let Component;
     let componentInitError;
     let generatedComponentData;
+    const getComponentInitError = (type, error) => ({
+        type,
+        message: error instanceof Error ? error.message : String(error),
+    });
     // load importmap and importmap payload to pass to FE
     // if not provided, or errors during load set error to pass to FE
     if (!loadServerImportMap) {
-        componentInitError = 'No loadImportMap provided';
+        componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.ImportMapMissing, 'No loadImportMap provided');
     }
     else {
         try {
@@ -74,7 +78,7 @@ export const DesignLibraryServerVariantGeneration = async ({ page, rendering, lo
             importMapInfo = getImportMapInfo(importMap);
         }
         catch (e) {
-            componentInitError = `Error loading import map: ${e}`;
+            componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.ImportMapLoad, `Error loading import map: ${e}`);
         }
     }
     let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
@@ -103,7 +107,7 @@ export const DesignLibraryServerVariantGeneration = async ({ page, rendering, lo
             }
             catch (error) {
                 // error during component initialization - send error to client
-                componentInitError = error.toString();
+                componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.RenderInit, error);
             }
         }
     }
@@ -111,7 +115,9 @@ export const DesignLibraryServerVariantGeneration = async ({ page, rendering, lo
         // we have a preview update, get it and clean the cache
         designLibraryStatus = DesignLibraryStatus.RENDERED;
         const previewData = getCacheAndClean(componentPreviewKey);
-        componentInitError = previewData === null || previewData === void 0 ? void 0 : previewData.error;
+        if (previewData === null || previewData === void 0 ? void 0 : previewData.error) {
+            componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.GeneratedComponentFetch, previewData.error);
+        }
         if (previewData === null || previewData === void 0 ? void 0 : previewData.generatedComponentData) {
             generatedComponentData = previewData.generatedComponentData;
             try {
@@ -120,7 +126,7 @@ export const DesignLibraryServerVariantGeneration = async ({ page, rendering, lo
             }
             catch (error) {
                 // error during component initialization - send error to client
-                componentInitError = error.toString();
+                componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.RenderInit, error);
             }
         }
     }

package/dist/esm/components/EditingScripts.js

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
-import { useSitecore } from '../enhancers/withSitecore';
-import { getContentSdkPagesClientData, getDesignLibraryScriptLink } from '@sitecore-content-sdk/content/editing';
+import { useSitecore } from './SitecoreProvider';
+import { getContentSdkPagesClientData, getDesignLibraryScriptLink, } from '@sitecore-content-sdk/content/editing';
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when mode.isDesignLibrary is true).

package/dist/esm/components/ErrorBoundary.js

@@ -1,6 +1,6 @@
 'use client';
 import React, { Suspense } from 'react';
-import { withSitecore } from '../enhancers/withSitecore';
+import { useSitecore } from './SitecoreProvider';
 /**
  * Simple error component applying basic error styling.
  * @param {object} props - Either with `message` (string) or with `children` (ReactNode), but not both.
@@ -8,7 +8,7 @@ import { withSitecore } from '../enhancers/withSitecore';
 export const ErrorComponent = (props) => {
     return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" }, props.message ? props.message : props.children));
 };
-class ErrorBoundary extends React.Component {
+class ErrorBoundaryClass extends React.Component {
     constructor(props) {
         super(props);
         this.defaultErrorMessage = 'There was a problem loading this section.';
@@ -32,7 +32,7 @@ class ErrorBoundary extends React.Component {
         return this.isInDevMode() || this.props.page.mode.isEditing || this.props.page.mode.isPreview;
     }
     render() {
-        var _a;
+        var _a, _b;
         if (this.state.error) {
             if (this.props.errorComponent) {
                 return React.createElement(this.props.errorComponent, { error: this.state.error });
@@ -55,10 +55,14 @@ class ErrorBoundary extends React.Component {
             }
         }
         // do not apply suspense when suspense is disabled or when on already dynamic components
-        if (this.props.disableSuspense || this.props.isDynamic) {
+        if (((_b = this.props.disableSuspense) !== null && _b !== void 0 ? _b : true) || this.props.isDynamic)
             return this.props.children;
-        }
         return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
     }
 }
-export default withSitecore()(ErrorBoundary);
+const ErrorBoundary = (props) => {
+    const { page } = useSitecore();
+    const boundaryProps = Object.assign(Object.assign({}, props), { page });
+    return React.createElement(ErrorBoundaryClass, Object.assign({}, boundaryProps));
+};
+export default ErrorBoundary;

package/dist/esm/components/File.js

@@ -31,6 +31,8 @@ export const File = (_a) => {
     const anchorAttrs = {
         href: file.src,
     };
-    return React.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+    return (React.createElement("a", Object.assign({}, anchorAttrs, otherProps),
+        linkText,
+        children));
 };
 File.displayName = 'File';