@sitecore-content-sdk/react 1.2.0-canary.1 → 1.2.0-canary.11

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);
@@ -96,6 +97,11 @@ const Preview = () => {
         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, '*');
+};
 class ErrorBoundary extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -112,9 +118,7 @@ class ErrorBoundary extends react_1.default.Component {
         }
     }
     componentDidCatch(error) {
-        const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
-        console.debug('Component Library: sending error event', errorEvent);
-        window.top.postMessage(errorEvent, '*');
+        sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
     }
     render() {
         if (this.state.hasError) {
@@ -132,12 +136,7 @@ const VariantGeneration = (props) => {
     const { layout: { sitecore: { route }, }, } = page;
     const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [initError, setInitError] = (0, react_1.useState)(false);
-    const [importMapError, setImportMapError] = (0, react_1.useState)(false);
     const [Component, setComponent] = (0, react_1.useState)(null);
-    if (!rendering) {
-        return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
-    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
         let cancelled = false;
@@ -145,10 +144,11 @@ const VariantGeneration = (props) => {
         // 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) {
-                console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
-                setImportMapError(true);
+                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             try {
@@ -156,20 +156,19 @@ const VariantGeneration = (props) => {
                 importMap = importMapImport.default;
             }
             catch (error) {
-                console.error('Error loading import map:', error);
-                setImportMapError(true);
+                const errorMessage = `Error loading import map: ${error}`;
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
             if (cancelled)
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
-                setRenderKey((key) => key + 1);
+                // Error event is already sent in the addComponentPreviewHandler
                 if (error) {
-                    setInitError(true);
                     return;
                 }
-                setInitError(false);
+                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
@@ -178,6 +177,9 @@ const VariantGeneration = (props) => {
             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
@@ -188,12 +190,16 @@ const VariantGeneration = (props) => {
             }
         };
     }, []);
-    if (importMapError) {
-        return (react_1.default.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
-    }
-    if (initError) {
-        return react_1.default.createElement("div", { key: renderKey }, "Error during component initialization");
-    }
+    // 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..."))));
 };

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) {
@@ -59,6 +60,11 @@ const Preview = () => {
         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, '*');
+};
 class ErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);
@@ -75,9 +81,7 @@ class ErrorBoundary extends React.Component {
         }
     }
     componentDidCatch(error) {
-        const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
-        console.debug('Component Library: sending error event', errorEvent);
-        window.top.postMessage(errorEvent, '*');
+        sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
     }
     render() {
         if (this.state.hasError) {
@@ -95,12 +99,7 @@ export const VariantGeneration = (props) => {
     const { layout: { sitecore: { route }, }, } = page;
     const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
     const [renderKey, setRenderKey] = useState(0);
-    const [initError, setInitError] = useState(false);
-    const [importMapError, setImportMapError] = useState(false);
     const [Component, setComponent] = useState(null);
-    if (!rendering) {
-        return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
-    }
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         let cancelled = false;
@@ -108,10 +107,11 @@ export const VariantGeneration = (props) => {
         // 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) {
-                console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
-                setImportMapError(true);
+                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             try {
@@ -119,20 +119,19 @@ export const VariantGeneration = (props) => {
                 importMap = importMapImport.default;
             }
             catch (error) {
-                console.error('Error loading import map:', error);
-                setImportMapError(true);
+                const errorMessage = `Error loading import map: ${error}`;
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
             if (cancelled)
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
-                setRenderKey((key) => key + 1);
+                // Error event is already sent in the addComponentPreviewHandler
                 if (error) {
-                    setInitError(true);
                     return;
                 }
-                setInitError(false);
+                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
@@ -141,6 +140,9 @@ export const VariantGeneration = (props) => {
             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
@@ -151,12 +153,16 @@ export const VariantGeneration = (props) => {
             }
         };
     }, []);
-    if (importMapError) {
-        return (React.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
-    }
-    if (initError) {
-        return React.createElement("div", { key: renderKey }, "Error during component initialization");
-    }
+    // 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..."))));
 };

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.1",
+  "version": "1.2.0-canary.11",
   "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.1",
+    "@sitecore-content-sdk/core": "1.2.0-canary.11",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "565f6fc2a2cb57ddcaf3dddb6e0a416a996eeb80",
+  "gitHead": "9bca85610fb5ee5f98e918ae3dd4734419ecdfe3",
   "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/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 {};