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

package/dist/cjs/components/BYOCComponent.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/BYOCWrapper.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
 const react_1 = __importDefault(require("react"));
-const DefaultEmptyFieldEditingComponentText = () => {
-    return react_1.default.createElement("span", null, "[No text in field]");
+const DefaultEmptyFieldEditingComponentText = (props) => {
+    return react_1.default.createElement(props.tag || 'span', props, '[No text in field]');
 };
 exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
-const DefaultEmptyFieldEditingComponentImage = () => {
+const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -17,6 +17,6 @@ const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (react_1.default.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (react_1.default.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };
 exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/components/DesignLibrary.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,7 +43,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
+exports.DesignLibrary = exports.__mockDependencies = void 0;
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
 const react_1 = __importStar(require("react"));
@@ -51,55 +52,31 @@ const layout_1 = require("@sitecore-content-sdk/core/layout");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
 const withSitecore_1 = require("../enhancers/withSitecore");
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
 exports.__mockDependencies = __mockDependencies;
-/**
- * This component is used to render the component in preview mode.
- * It is used to send the rendered event to the parent window and render the component.
- * Reacts on the update event from the parent window and re-renders the component.
- */
-const Preview = () => {
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
-    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
-    let componentReady = false;
-    // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
-    route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    (0, react_1.useEffect)(() => {
-        // useEffect will fire when components are ready - and we inform the whole wide world of it too
-        if (!componentReady) {
-            componentReady = true;
-            window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("main", null,
-            react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
 const sendErrorEvent = (uid, error, type) => {
     const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
     console.error('Component Library: sending error event', errorEvent);
-    window.top.postMessage(errorEvent, '*');
+    if (typeof window !== 'undefined') {
+        const target = window.parent && window.parent !== window ? window.parent : window;
+        target.postMessage(errorEvent, '*');
+    }
+};
+const postToDL = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt === null || evt === void 0 ? void 0 : evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
 };
 class ErrorBoundary extends react_1.default.Component {
     constructor() {
@@ -127,36 +104,74 @@ class ErrorBoundary extends react_1.default.Component {
     }
 }
 /**
- * This component is used to render the component in variant generation mode.
- * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * 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<{ default: import('../codegen').ImportEntry[] }>} [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.
  */
-const VariantGeneration = (props) => {
+const DesignLibrary = ({ loadImportMap }) => {
+    var _a, _b;
     const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
+    const route = page.layout.sitecore.route;
+    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const { isDesignLibrary } = page.mode;
+    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
+    const [propsState, setPropsState] = (0, react_1.useState)({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
     const [Component, setComponent] = (0, react_1.useState)(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = (0, editing_1.addComponentUpdateHandler)(rendering, (updated) => {
+            setPropsState({ fields: updated.fields, params: updated.params });
+            setRenderKey((k) => k + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return () => unsubUpdate && unsubUpdate();
+    }, [isVariantGeneration, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid));
+    }, [renderKey, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        if (!isDesignLibrary || !isVariantGeneration)
+            return undefined;
         let cancelled = false;
         // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
         // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
-        let unsubscribe = undefined;
-        const init = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            let importMap = undefined;
-            if (!props.loadImportMap) {
-                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+        let unsubscribe;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!loadImportMap) {
+                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
+            let importMap;
             try {
-                const importMapImport = yield props.loadImportMap();
-                importMap = importMapImport.default;
+                const mod = yield loadImportMap();
+                importMap = mod.default;
             }
-            catch (error) {
-                const errorMessage = `Error loading import map: ${error}`;
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+            catch (e) {
+                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -164,56 +179,24 @@ const VariantGeneration = (props) => {
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
                 // Error event is already sent in the addComponentPreviewHandler
-                if (error) {
+                if (error)
                     return;
-                }
-                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
+                setRenderKey((k) => k + 1);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            console.debug('Component Library: sending event', importMapEvent);
-            window.parent.postMessage(importMapEvent, '*');
-            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-            console.debug('Component Library: sending event', componentPropsEvent);
-            window.top.postMessage(componentPropsEvent, '*');
-            const readyEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid);
-            console.debug('Component Library: sending event', readyEvent);
-            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
-        });
-        init();
-        // return function that calls unsubsubribe - if the component was mounted correctly
+            postToDL(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            postToDL(propsEvent);
+        }))();
+        // return function that calls unsubscribe - if the component was mounted correctly
         return () => {
             cancelled = true;
-            if (unsubscribe) {
-                unsubscribe();
-            }
+            unsubscribe && unsubscribe();
         };
-    }, []);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return undefined;
-        const renderedEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid);
-        console.debug('Component Library: sending event', renderedEvent);
-        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
-    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
-    return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
-};
-exports.VariantGeneration = VariantGeneration;
-const DesignLibrary = ({ loadImportMap }) => {
-    var _a;
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { isDesignLibrary } = page.mode;
-    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
-    if (!isDesignLibrary) {
-        return null;
-    }
-    if (isVariantGeneration) {
-        return react_1.default.createElement(exports.VariantGeneration, { loadImportMap: loadImportMap });
-    }
-    return react_1.default.createElement(Preview, null);
+    }, [isVariantGeneration, rendering]);
+    return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+        react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { rendering: rendering },
+            react_1.default.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
 exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/FEaaSComponent.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/FEaaSWrapper.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/Form.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/SitecoreProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -46,18 +46,25 @@ function withEmptyFieldEditingComponent(FieldComponent, options) {
         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)) {
-            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            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 (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (emptyFieldEditingComponent || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
     return (props) => {
-        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props)))));
+        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return emptyFieldEditingComponent || react_1.default.createElement(FieldComponent, Object.assign({}, props));
     };
 }

package/dist/cjs/enhancers/withSitecore.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/esm/components/BYOCComponent.js

@@ -1,3 +1,4 @@
+'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

package/dist/esm/components/BYOCWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { BYOCComponent } from './BYOCComponent';
 import React from 'react';
 export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -1,8 +1,8 @@
 import React from 'react';
-export const DefaultEmptyFieldEditingComponentText = () => {
-    return React.createElement("span", null, "[No text in field]");
+export const DefaultEmptyFieldEditingComponentText = (props) => {
+    return React.createElement(props.tag || 'span', props, '[No text in field]');
 };
-export const DefaultEmptyFieldEditingComponentImage = () => {
+export const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -10,5 +10,5 @@ export const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (React.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (React.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };

package/dist/esm/components/DesignLibrary.js

@@ -1,3 +1,4 @@
+'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -9,60 +10,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Placeholder } from './Placeholder';
 import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
 import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
 import * as codegen from '@sitecore-content-sdk/core/codegen';
 import { useSitecore } from '../enhancers/withSitecore';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 export const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
-/**
- * This component is used to render the component in preview mode.
- * It is used to send the rendered event to the parent window and render the component.
- * Reacts on the update event from the parent window and re-renders the component.
- */
-const Preview = () => {
-    const { page } = useSitecore();
-    const { layout: { sitecore: { route }, }, } = page;
-    const [renderKey, setRenderKey] = useState(0);
-    const [rootUpdate, setRootUpdate] = useState(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
-    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
-    let componentReady = false;
-    // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
-    route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    useEffect(() => {
-        // useEffect will fire when components are ready - and we inform the whole wide world of it too
-        if (!componentReady) {
-            componentReady = true;
-            window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    useEffect(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("main", null,
-            React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
 const sendErrorEvent = (uid, error, type) => {
     const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
     console.error('Component Library: sending error event', errorEvent);
-    window.top.postMessage(errorEvent, '*');
+    if (typeof window !== 'undefined') {
+        const target = window.parent && window.parent !== window ? window.parent : window;
+        target.postMessage(errorEvent, '*');
+    }
+};
+const postToDL = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt === null || evt === void 0 ? void 0 : evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
 };
 class ErrorBoundary extends React.Component {
     constructor() {
@@ -90,36 +67,74 @@ class ErrorBoundary extends React.Component {
     }
 }
 /**
- * This component is used to render the component in variant generation mode.
- * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * 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<{ default: import('../codegen').ImportEntry[] }>} [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.
  */
-export const VariantGeneration = (props) => {
+export const DesignLibrary = ({ loadImportMap }) => {
+    var _a, _b;
     const { page } = useSitecore();
-    const { layout: { sitecore: { route }, }, } = page;
-    const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
+    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 { isDesignLibrary } = page.mode;
+    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
+    const [propsState, setPropsState] = useState({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
     const [renderKey, setRenderKey] = useState(0);
     const [Component, setComponent] = useState(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
+        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = addComponentUpdateHandler(rendering, (updated) => {
+            setPropsState({ fields: updated.fields, params: updated.params });
+            setRenderKey((k) => k + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return () => unsubUpdate && unsubUpdate();
+    }, [isVariantGeneration, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid));
+    }, [renderKey, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (!isDesignLibrary || !isVariantGeneration)
+            return undefined;
         let cancelled = false;
         // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
         // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
-        let unsubscribe = undefined;
-        const init = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            let importMap = undefined;
-            if (!props.loadImportMap) {
-                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+        let unsubscribe;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!loadImportMap) {
+                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
+            let importMap;
             try {
-                const importMapImport = yield props.loadImportMap();
-                importMap = importMapImport.default;
+                const mod = yield loadImportMap();
+                importMap = mod.default;
             }
-            catch (error) {
-                const errorMessage = `Error loading import map: ${error}`;
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+            catch (e) {
+                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -127,54 +142,23 @@ export const VariantGeneration = (props) => {
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
                 // Error event is already sent in the addComponentPreviewHandler
-                if (error) {
+                if (error)
                     return;
-                }
-                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
+                setRenderKey((k) => k + 1);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            console.debug('Component Library: sending event', importMapEvent);
-            window.parent.postMessage(importMapEvent, '*');
-            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-            console.debug('Component Library: sending event', componentPropsEvent);
-            window.top.postMessage(componentPropsEvent, '*');
-            const readyEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid);
-            console.debug('Component Library: sending event', readyEvent);
-            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
-        });
-        init();
-        // return function that calls unsubsubribe - if the component was mounted correctly
+            postToDL(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            postToDL(propsEvent);
+        }))();
+        // return function that calls unsubscribe - if the component was mounted correctly
         return () => {
             cancelled = true;
-            if (unsubscribe) {
-                unsubscribe();
-            }
+            unsubscribe && unsubscribe();
         };
-    }, []);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        var _a;
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return undefined;
-        const renderedEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid);
-        console.debug('Component Library: sending event', renderedEvent);
-        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
-    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
-    return (React.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
-};
-export const DesignLibrary = ({ loadImportMap }) => {
-    var _a;
-    const { page } = useSitecore();
-    const { isDesignLibrary } = page.mode;
-    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
-    if (!isDesignLibrary) {
-        return null;
-    }
-    if (isVariantGeneration) {
-        return React.createElement(VariantGeneration, { loadImportMap: loadImportMap });
-    }
-    return React.createElement(Preview, null);
+    }, [isVariantGeneration, rendering]);
+    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(ErrorBoundary, { uid: rendering.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/FEaaSComponent.js

@@ -1,3 +1,4 @@
+'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

package/dist/esm/components/FEaaSWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { FEaaSComponent } from './FEaaSComponent';
 import React from 'react';
 export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';

package/dist/esm/components/Form.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useEffect, useRef, useState } from 'react';
 import { form } from '@sitecore-content-sdk/core';
 import { useSitecore } from '../enhancers/withSitecore';

package/dist/esm/components/SitecoreProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
 import { constants } from '@sitecore-content-sdk/core';

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -10,18 +10,25 @@ export function withEmptyFieldEditingComponent(FieldComponent, options) {
         var _a;
         const { editable = true } = props;
         if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
-            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+            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.createElement(Component, Object.assign({}, resolvedProps));
         }
         return null;
     };
     if (options.isForwardRef) {
         return forwardRef((props, ref) => {
-            const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (emptyFieldEditingComponent || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
     return (props) => {
-        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props)))));
+        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return emptyFieldEditingComponent || React.createElement(FieldComponent, Object.assign({}, props));
     };
 }

package/dist/esm/enhancers/withSitecore.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { SitecoreProviderReactContext, } from '../components/SitecoreProvider';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "1.2.0-canary.2",
+  "version": "1.2.0-canary.20",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,12 +72,12 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "1.2.0-canary.2",
+    "@sitecore-content-sdk/core": "1.2.0-canary.20",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "91681af284f72808222c3648de790d2bba5c5953",
+  "gitHead": "c37f5159bbc1ade9567748eee4ca47e0158e2d89",
   "files": [
     "dist",
     "types"

package/types/components/Date.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
 import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
-export interface DateFieldProps extends EditableFieldProps {
+export interface DateFieldProps extends EditableFieldProps<DateFieldProps> {
     /** The date field data. */
     [htmlAttributes: string]: unknown;
     field: FieldMetadata & {

package/types/components/DefaultEmptyFieldEditingComponents.d.ts

@@ -1,3 +1,9 @@
 import React from 'react';
-export declare const DefaultEmptyFieldEditingComponentText: React.FC;
-export declare const DefaultEmptyFieldEditingComponentImage: React.FC;
+export declare const DefaultEmptyFieldEditingComponentText: React.FC<{
+    [key: string]: unknown;
+    tag?: string;
+}>;
+export declare const DefaultEmptyFieldEditingComponentImage: React.FC<{
+    [key: string]: unknown;
+    className?: string;
+}>;

package/types/components/DesignLibrary.d.ts

@@ -1,20 +1,9 @@
-import { JSX } from 'react';
+import React from 'react';
 import * as codegen from '@sitecore-content-sdk/core/codegen';
 export declare const __mockDependencies: (mocks: any) => void;
 export type ImportMapImport = {
     default: codegen.ImportEntry[];
 };
-type VariantGenerationProps = {
-    /**
-     * The import map to be used in variant generation mode.
-     */
-    loadImportMap?: () => Promise<ImportMapImport>;
-};
-/**
- * This component is used to render the component in variant generation mode.
- * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
- */
-export declare const VariantGeneration: (props: VariantGenerationProps) => JSX.Element;
 type DesignLibraryProps = {
     /**
      * The dynamic import for import map to be used in variant generation mode.
@@ -22,5 +11,16 @@ type DesignLibraryProps = {
      */
     loadImportMap?: () => Promise<ImportMapImport>;
 };
-export declare const DesignLibrary: ({ loadImportMap }: DesignLibraryProps) => JSX.Element;
+/**
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * 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<{ default: import('../codegen').ImportEntry[] }>} [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.
+ */
+export declare const DesignLibrary: ({ loadImportMap }: DesignLibraryProps) => React.JSX.Element;
 export {};

package/types/components/Image.d.ts

@@ -25,7 +25,7 @@ export interface ImageSizeParameters {
     /** Image scale. Defaults to 1.0 */
     sc?: number;
 }
-export interface ImageProps extends EditableFieldProps {
+export interface ImageProps extends EditableFieldProps<ImageProps> {
     [attributeName: string]: unknown;
     /** Image field data (consistent with other field types) */
     field?: (ImageField | ImageFieldValue) & FieldMetadata;

package/types/components/Link.d.ts

@@ -16,7 +16,7 @@ export interface LinkFieldValue {
 export interface LinkField {
     value: LinkFieldValue;
 }
-export type LinkProps = EditableFieldProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
+export type LinkProps = EditableFieldProps<LinkProps> & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
     /** The link field data. */
     field: (LinkField | LinkFieldValue) & FieldMetadata;
     /**

package/types/components/RichText.d.ts

@@ -4,7 +4,7 @@ import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
 export interface RichTextField extends FieldMetadata {
     value?: string;
 }
-export interface RichTextProps extends EditableFieldProps {
+export interface RichTextProps extends EditableFieldProps<RichTextProps> {
     [htmlAttributes: string]: unknown;
     /** The rich text field data. */
     field?: RichTextField;

package/types/components/Text.d.ts

@@ -4,7 +4,7 @@ import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
 export interface TextField extends FieldMetadata {
     value?: string | number;
 }
-export interface TextProps extends EditableFieldProps {
+export interface TextProps extends EditableFieldProps<TextProps> {
     [htmlAttributes: string]: unknown;
     /** The text field data. */
     field?: TextField;

package/types/components/sharedTypes/props.d.ts

@@ -1,7 +1,7 @@
 /**
  * Shared editing field props
  */
-export interface EditableFieldProps {
+export interface EditableFieldProps<EmptyFieldEditingComponentProps = unknown> {
     /**
      * Can be used to explicitly disable inline editing.
      * @default true
@@ -10,5 +10,5 @@ export interface EditableFieldProps {
     /**
      * Custom element to render in Pages in edit mode if field value is empty
      */
-    emptyFieldEditingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+    emptyFieldEditingComponent?: React.ComponentClass<EmptyFieldEditingComponentProps> | React.FC<EmptyFieldEditingComponentProps>;
 }

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -13,15 +13,15 @@ export interface WithEmptyFieldEditingComponentOptions {
      */
     isForwardRef?: boolean;
 }
-interface WithEmptyFieldEditingComponentProps {
+interface WithEmptyFieldEditingComponentProps<Props> {
     field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
     editable?: boolean;
-    emptyFieldEditingComponent?: React.ComponentClass | React.FC;
+    emptyFieldEditingComponent?: React.ComponentClass<Props> | React.FC<Props>;
 }
 /**
  * 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;
  */
-export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
+export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps<FieldComponentProps>, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
 export {};