@sitecore-content-sdk/react 2.0.0-canary.2 → 2.0.0-canary.20

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.withFieldMetadata = exports.withDatasourceCheck = exports.withSitecore = exports.withEditorChromes = exports.ErrorComponent = exports.useSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibraryErrorBoundary = 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.PlaceholderMetadata = 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 = exports.withAppPlaceholder = exports.withEmptyFieldEditingComponent = 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; } });
@@ -32,6 +32,7 @@ Object.defineProperty(exports, "Form", { enumerable: true, get: function () { re
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
 Object.defineProperty(exports, "AppPlaceholder", { enumerable: true, get: function () { return Placeholder_1.AppPlaceholder; } });
+Object.defineProperty(exports, "PlaceholderMetadata", { enumerable: true, get: function () { return Placeholder_1.PlaceholderMetadata; } });
 Object.defineProperty(exports, "renderEmptyPlaceholder", { enumerable: true, get: function () { return Placeholder_1.renderEmptyPlaceholder; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
@@ -55,7 +56,7 @@ Object.defineProperty(exports, "FEaaSServerWrapper", { enumerable: true, get: fu
 Object.defineProperty(exports, "BYOCServerWrapper", { enumerable: true, get: function () { return FEaaS_1.BYOCServerWrapper; } });
 var DesignLibrary_1 = require("./components/DesignLibrary");
 Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
-Object.defineProperty(exports, "DesignLibraryApp", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibraryApp; } });
+Object.defineProperty(exports, "DesignLibraryErrorBoundary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibraryErrorBoundary; } });
 var Link_1 = require("./components/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 var File_1 = require("./components/File");
@@ -63,19 +64,23 @@ 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 ErrorBoundary_1 = require("./components/ErrorBoundary");
+Object.defineProperty(exports, "ErrorComponent", { enumerable: true, get: function () { return ErrorBoundary_1.ErrorComponent; } });
 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/DesignLibraryErrorBoundary.js

@@ -1,6 +1,12 @@
 'use client';
 import React, { Suspense } from 'react';
 import { DesignLibraryPreviewError, sendErrorEvent } from '@sitecore-content-sdk/content/codegen';
+/**
+ * Error boundary for the Design Library component.
+ * Catches errors during rendering and sends them to the Design Library
+ * @param {DesignLibraryErrorBoundaryProps} props - The props for the error boundary, including the component UID and children to render.
+ * @internal
+ */
 export class DesignLibraryErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);

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

@@ -1,2 +1,2 @@
 export { DesignLibrary } from './DesignLibrary';
-export { DesignLibraryApp } from './DesignLibraryApp';
+export { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';

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,14 +1,15 @@
 '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.
+ * @internal
  */
 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 +33,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 +56,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';

package/dist/esm/components/Form.js

@@ -1,8 +1,10 @@
 'use client';
 import React, { useEffect, useRef, useState } from 'react';
 import { form } from '@sitecore-content-sdk/content';
-import { useSitecore } from '../enhancers/withSitecore';
+import { constants } from '@sitecore-content-sdk/core';
+import { useSitecore } from './SitecoreProvider';
 import { ErrorComponent } from './ErrorBoundary';
+const { ERROR_MESSAGES } = constants;
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
 /**
  * Mock function to replace the form module functions for `testing` purposes.
@@ -19,7 +21,7 @@ export const mockFormModule = (formModule) => {
  * @public
  */
 export const Form = ({ params, rendering }) => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
     const [error, setError] = useState(false);
     const [content, setContent] = useState('');
@@ -33,14 +35,14 @@ export const Form = ({ params, rendering }) => {
             const edgeId = (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId;
             if (!edgeId) {
                 /* eslint-disable no-console */
-                console.warn('Warning: clientContextId is missing – form cannot be loaded properly on the client');
+                console.warn(`${ERROR_MESSAGES.MV_006}. Form cannot be loaded properly on the client`);
                 return;
             }
             loadForm(edgeId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
                 .then(setContent)
                 .catch(() => {
                 if (isEditing) {
-                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details.`);
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details. ${ERROR_MESSAGES.CONTACT_SUPPORT}`);
                 }
                 setError(true);
             });
@@ -54,9 +56,16 @@ export const Form = ({ params, rendering }) => {
             }
             executeScriptElements(formRef.current);
         }
-    }, [content]);
+    }, [
+        content,
+        isEditing,
+        params.FormId,
+        rendering.uid,
+        (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId,
+        (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl,
+    ]);
     if (isEditing && error) {
         return React.createElement(ErrorComponent, { message: "There was a problem loading this section" });
     }
-    return (React.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));
+    return (React.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined }));
 };