@sitecore-jss/sitecore-jss-react 22.1.0-canary.9 → 22.1.0

package/dist/esm/components/PlaceholderCommon.js

@@ -12,13 +12,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MissingComponent } from './MissingComponent';
+import { EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+import { constants } from '@sitecore-jss/sitecore-jss';
 import { convertAttributesToReactProps } from '../utils';
-import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+import { HiddenRendering } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
 import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
 import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
 import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
 import ErrorBoundary from './ErrorBoundary';
+/**
+ * Returns a regular expression pattern for a dynamic placeholder name.
+ * @param {string} placeholder Placeholder name with a dynamic segment (e.g. 'main-{*}')
+ * @returns Regular expression pattern for the dynamic segment
+ */
+export const getDynamicPlaceholderPattern = (placeholder) => {
+    return new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`);
+};
+/**
+ * Checks if the placeholder name is dynamic.
+ * @param {string} placeholder Placeholder name
+ * @returns True if the placeholder name is dynamic
+ */
+export const isDynamicPlaceholder = (placeholder) => placeholder.indexOf('{*}') !== -1;
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -28,29 +45,38 @@ export class PlaceholderCommon extends React.Component {
         this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
         this.createRawElement = this.createRawElement.bind(this);
     }
-    static getPlaceholderDataFromRenderingData(rendering, name) {
+    static getPlaceholderDataFromRenderingData(rendering, name, editMode) {
         let result;
-        /** [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
-        from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
+        let phName = name.slice();
+        /**
+         * [Chromes Mode]: [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
+         * from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing.
+         * [Metadata Mode]: We need to keep the raw placeholder name. e.g 'nameOfContainer-{*}' instead of 'nameOfContainer-1'
+         */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
-                const patternPlaceholder = placeholder.indexOf('{*}') !== -1
-                    ? new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`)
+                const patternPlaceholder = isDynamicPlaceholder(placeholder)
+                    ? getDynamicPlaceholderPattern(placeholder)
                     : null;
-                if (patternPlaceholder && patternPlaceholder.test(name)) {
-                    rendering.placeholders[name] = rendering.placeholders[placeholder];
-                    delete rendering.placeholders[placeholder];
+                if (patternPlaceholder && patternPlaceholder.test(phName)) {
+                    if (editMode === EditMode.Metadata) {
+                        phName = placeholder;
+                    }
+                    else {
+                        rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                        delete rendering.placeholders[placeholder];
+                    }
                 }
             });
         }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
-            result = rendering.placeholders[name];
+            result = rendering.placeholders[phName];
         }
         else {
             result = null;
         }
         if (!result) {
-            console.warn(`Placeholder '${name}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+            console.warn(`Placeholder '${phName}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
             return [];
         }
         return result;
@@ -72,13 +98,16 @@ export class PlaceholderCommon extends React.Component {
         });
     }
     getComponentsForRenderingData(placeholderData) {
-        const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
-        return placeholderData
+        var _a;
+        const _b = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _b, placeholderProps = __rest(_b, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        const transformedComponents = placeholderData
             .map((rendering, index) => {
+            var _a, _b;
             const key = rendering.uid
                 ? rendering.uid
                 : `component-${index}`;
             const commonProps = { key };
+            let isEmpty = false;
             // if the element is not a 'component rendering', render it 'raw'
             if (!rendering.componentName &&
                 rendering.name) {
@@ -86,11 +115,13 @@ export class PlaceholderCommon extends React.Component {
             }
             const componentRendering = rendering;
             let component;
-            if (componentRendering.componentName === HIDDEN_RENDERING_NAME) {
+            if (componentRendering.componentName === constants.HIDDEN_RENDERING_NAME) {
                 component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering;
+                isEmpty = true;
             }
             else if (!componentRendering.componentName) {
                 component = () => React.createElement(React.Fragment, null);
+                isEmpty = true;
             }
             else {
                 component = this.getComponentForRendering(componentRendering);
@@ -113,20 +144,34 @@ export class PlaceholderCommon extends React.Component {
             if (!component) {
                 console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent;
+                isEmpty = true;
             }
             const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
                 fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
             })), ((placeholderParams || componentRendering.params) && {
                 params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
             })), { rendering: componentRendering });
-            return React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            let rendered = React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            if (!isEmpty) {
+                // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+                const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+                // that's why we need to expose element's props here
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+            }
+            // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
+            if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === EditMode.Metadata) {
+                return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+            }
+            return rendered;
         })
-            .filter((element) => element)
-            .map((element, id) => {
-            // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
-            const type = element.props.type === 'text/sitecore' ? element.props.type : '';
-            return (React.createElement(ErrorBoundary, { key: element.type + '-' + id, customErrorComponent: this.props.errorComponent, rendering: element.props.rendering, componentLoadingMessage: this.props.componentLoadingMessage, type: type }, element));
-        });
+            .filter((element) => element); // remove nulls
+        if (((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode) === EditMode.Metadata) {
+            return [
+                React.createElement(PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
+            ];
+        }
+        return transformedComponents;
     }
     getComponentForRendering(renderingDefinition) {
         var _a;
@@ -201,4 +246,5 @@ PlaceholderCommon.propTypes = {
         PropTypes.func,
     ]),
     modifyComponentProps: PropTypes.func,
+    sitecoreContext: PropTypes.object,
 };

package/dist/esm/components/PlaceholderMetadata.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { getDynamicPlaceholderPattern, isDynamicPlaceholder } from './PlaceholderCommon';
+/**
+ * default value of uid for root placeholder when uid is not present.
+ */
+const DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
+/**
+ * A React component to generate metadata blocks for a placeholder or rendering.
+ * It utilizes dynamic attributes based on whether the component acts as a placeholder
+ * or as a rendering to properly render the surrounding code blocks.
+ *
+ * @param {object} props The properties passed to the component.
+ * @param {ComponentRendering} props.rendering The rendering data.
+ * @param {string} [props.placeholderName] The name of the placeholder.
+ * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
+ * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
+ */
+export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
+    const getCodeBlockAttributes = (kind, id, placeholderName) => {
+        const chrometype = placeholderName ? 'placeholder' : 'rendering';
+        const attributes = {
+            type: 'text/sitecore',
+            chrometype: chrometype,
+            className: 'scpm',
+            kind: kind,
+        };
+        if (kind === 'open') {
+            if (chrometype === 'placeholder' && placeholderName) {
+                let phId = '';
+                for (const placeholder of Object.keys(rendering.placeholders)) {
+                    if (placeholderName === placeholder) {
+                        phId = id
+                            ? `${placeholderName}_${id}`
+                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if (isDynamicPlaceholder(placeholder)) {
+                        const pattern = getDynamicPlaceholderPattern(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+                            break;
+                        }
+                    }
+                }
+                attributes.id = phId;
+            }
+            else {
+                attributes.id = id;
+            }
+        }
+        return attributes;
+    };
+    const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes('open', uid, placeholderName))),
+        children,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes('close', uid, placeholderName)))));
+    return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
+};

package/dist/esm/components/RichText.js

@@ -11,23 +11,34 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-export const RichText = forwardRef((_a, ref) => {
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(
+// eslint-disable-next-line react/display-name
+forwardRef((_a, ref) => {
     var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
-    if (!field || (!field.editable && !field.value)) {
+    if (!field || (!field.editable && isFieldValueEmpty(field))) {
         return null;
     }
     const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
             __html: field.editable && editable ? field.editable : field.value,
         }, ref }, otherProps);
     return React.createElement(tag || 'div', htmlProps);
-});
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
 export const RichTextPropTypes = {
     field: PropTypes.shape({
         value: PropTypes.string,
         editable: PropTypes.string,
+        metadata: PropTypes.objectOf(PropTypes.any),
     }),
     tag: PropTypes.string,
     editable: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 RichText.propTypes = RichTextPropTypes;
 RichText.displayName = 'RichText';

package/dist/esm/components/Text.js

@@ -10,10 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
 import PropTypes from 'prop-types';
-export const Text = (_a) => {
+import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
-    if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+    if (!field || (!field.editable && isFieldValueEmpty(field))) {
         return null;
     }
     // can't use editable value if we want to output unencoded
@@ -59,14 +63,19 @@ export const Text = (_a) => {
     else {
         return React.createElement(React.Fragment, null, children);
     }
-};
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
 Text.propTypes = {
     field: PropTypes.shape({
         value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         editable: PropTypes.string,
+        metadata: PropTypes.objectOf(PropTypes.any),
     }),
     tag: PropTypes.string,
     editable: PropTypes.bool,
     encode: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 Text.displayName = 'Text';

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+import { isFieldValueEmpty, } from '@sitecore-jss/sitecore-jss/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;
+ */
+export function withEmptyFieldEditingComponent(FieldComponent, options) {
+    const getEmptyFieldEditingComponent = (props) => {
+        var _a;
+        const { editable = true } = props;
+        if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
+            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+        }
+        return null;
+    };
+    if (options.isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        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 })))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    return (props) => {
+        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props)))));
+    };
+}

package/dist/esm/enhancers/withFieldMetadata.js

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import { FieldMetadata } from '../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
+ */
+export function withFieldMetadata(FieldComponent, isForwardRef = false) {
+    if (isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return forwardRef((props, ref) => {
+            var _a;
+            const { editable = true } = props;
+            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+            if (!metadata || !editable) {
+                return React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
+            }
+            return (React.createElement(FieldMetadata, { metadata: metadata },
+                React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    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.createElement(FieldComponent, Object.assign({}, props));
+        }
+        return (React.createElement(FieldMetadata, { metadata: metadata },
+            React.createElement(FieldComponent, Object.assign({}, props))));
+    };
+}

package/dist/esm/enhancers/withPlaceholder.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PlaceholderCommon } from '../components/PlaceholderCommon';
 import { withComponentFactory } from './withComponentFactory';
+import { withSitecoreContext } from './withSitecoreContext';
 /**
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
@@ -35,13 +36,13 @@ export function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.editMode);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.editMode);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }
@@ -51,6 +52,6 @@ export function withPlaceholder(placeholders, options) {
             }
         }
         WithPlaceholder.propTypes = PlaceholderCommon.propTypes;
-        return withComponentFactory(WithPlaceholder);
+        return withSitecoreContext()(withComponentFactory(WithPlaceholder));
     };
 }

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/utils';
-export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
+export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/editing';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
@@ -24,3 +24,7 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
 export { EditFrame } from './components/EditFrame';
 export { ComponentBuilder } from './ComponentBuilder';
+export { withFieldMetadata } from './enhancers/withFieldMetadata';
+export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
+export { EditingScripts } from './components/EditingScripts';
+export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.1.0-canary.9",
+  "version": "22.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -14,7 +14,7 @@
     "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-react src/index.ts --githubPages false"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "author": {
     "name": "Sitecore Corporation",
@@ -31,7 +31,7 @@
     "@types/chai-string": "^1.4.2",
     "@types/enzyme": "^3.10.12",
     "@types/mocha": "^10.0.1",
-    "@types/node": "18.11.10",
+    "@types/node": "20.14.2",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.10",
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.9",
+    "@sitecore-jss/sitecore-jss": "22.1.0",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "9b249f8d03fb9d74e74f74f3040fc2668137bdcc",
+  "gitHead": "8f6fa5709f6b306bf40fb2b0775ae6c5ac4182e7",
   "files": [
     "dist",
     "types"

package/types/components/Date.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="@types/react" />
 import React from 'react';
-export interface DateFieldProps {
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
+export interface DateFieldProps extends EditableFieldProps {
     /** The date field data. */
     [htmlAttributes: string]: unknown;
-    field: {
+    field: FieldMetadata & {
         value?: string;
         editable?: string;
     };
@@ -11,12 +13,6 @@ export interface DateFieldProps {
      * The HTML element that will wrap the contents of the field.
      */
     tag?: string;
-    /**
-     * Can be used to explicitly disable inline editing.
-     * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
-     * @default true
-     */
-    editable?: boolean;
     render?: (date: Date | null) => React.ReactNode;
 }
 export declare const DateField: React.FC<DateFieldProps>;

package/types/components/DefaultEmptyFieldEditingComponents.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@types/react" />
+import React from 'react';
+export declare const DefaultEmptyFieldEditingComponentText: React.FC;
+export declare const DefaultEmptyFieldEditingComponentImage: React.FC;

package/types/components/EditFrame.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="@types/react" />
 import React, { PropsWithChildren } from 'react';
-import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/utils';
+import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/editing';
 export interface EditFrameProps {
     dataSource?: EditFrameDataSource;
     buttons?: EditButtonTypes[];

package/types/components/EditingScripts.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Renders client scripts and data for editing/preview mode in Pages.
+ * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ */
+export declare const EditingScripts: () => JSX.Element;

package/types/components/ErrorBoundary.d.ts

@@ -2,16 +2,17 @@
 import React, { ReactNode } from 'react';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { SitecoreContextValue } from './SitecoreContext';
-type CustomErrorComponentProps = {
+type ErrorComponentProps = {
     [prop: string]: unknown;
 };
 export type ErrorBoundaryProps = {
     children: ReactNode;
     sitecoreContext: SitecoreContextValue;
     type: string;
-    customErrorComponent?: React.ComponentClass<CustomErrorComponentProps> | React.FC<CustomErrorComponentProps>;
+    isDynamic?: boolean;
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     rendering?: ComponentRendering;
     componentLoadingMessage?: string;
 };
-declare const _default: (props: import("../enhancers/withSitecoreContext").WithSitecoreContextHocProps<ErrorBoundaryProps>) => React.JSX.Element;
+declare const _default: (props: import("@sitecore-jss/sitecore-jss/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;
 export default _default;

package/types/components/FieldMetadata.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="@types/react" />
+import React from 'react';
+import PropTypes from 'prop-types';
+interface FieldMetadataProps {
+    metadata: {
+        [key: string]: unknown;
+    };
+    children: React.ReactNode;
+}
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+export declare const FieldMetadata: {
+    (props: FieldMetadataProps): JSX.Element;
+    displayName: string;
+    propTypes: {
+        metadata: PropTypes.Validator<object>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export {};

package/types/components/HiddenRendering.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="@types/react" />
 import React from 'react';
 export declare const HiddenRendering: () => React.JSX.Element;
-export declare const HIDDEN_RENDERING_NAME = "Hidden Rendering";

package/types/components/Image.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="@types/react" />
 import React from 'react';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
 export interface ImageFieldValue {
     [attributeName: string]: unknown;
     src?: string;
@@ -25,16 +27,10 @@ export interface ImageSizeParameters {
     /** Image scale. Defaults to 1.0 */
     sc?: number;
 }
-export interface ImageProps {
+export interface ImageProps extends EditableFieldProps {
     [attributeName: string]: unknown;
     /** Image field data (consistent with other field types) */
-    field?: ImageField | ImageFieldValue;
-    /**
-     * Can be used to explicitly disable inline editing.
-     * If true and `media.editable` has a value, then `media.editable` will be processed
-     * and rendered as component output. If false, `media.editable` value will be ignored and not rendered.
-     */
-    editable?: boolean;
+    field?: (ImageField | ImageFieldValue) & FieldMetadata;
     /**
      * Parameters that will be attached to Sitecore media URLs
      */

package/types/components/Link.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="@types/react" />
-import React from 'react';
+import React, { RefAttributes } from 'react';
 import PropTypes from 'prop-types';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
 export interface LinkFieldValue {
     [attributeName: string]: unknown;
     href?: string;
@@ -18,22 +20,16 @@ export interface LinkField {
     editableFirstPart?: string;
     editableLastPart?: string;
 }
-export type LinkProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
+export type LinkProps = EditableFieldProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
     /** The link field data. */
-    field: LinkField | LinkFieldValue;
-    /**
-     * Can be used to explicitly disable inline editing.
-     * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
-     * @default true
-     */
-    editable?: boolean;
+    field: (LinkField | LinkFieldValue) & FieldMetadata;
     /**
      * Displays a link text ('description' in Sitecore) even when children exist
      * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
      */
     showLinkTextWithChildrenPresent?: boolean;
 };
-export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.FC<LinkProps>;
 export declare const LinkPropTypes: {
     field: PropTypes.Validator<NonNullable<NonNullable<PropTypes.InferProps<{
         href: PropTypes.Requireable<any>;
@@ -44,4 +40,5 @@ export declare const LinkPropTypes: {
     }>>>>;
     editable: PropTypes.Requireable<boolean>;
     showLinkTextWithChildrenPresent: PropTypes.Requireable<boolean>;
+    emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
 };

package/types/components/Placeholder.d.ts

@@ -19,7 +19,4 @@ export interface PlaceholderComponentProps extends PlaceholderProps {
      */
     renderEach?: (component: React.ReactNode, index: number) => React.ReactNode;
 }
-export declare const Placeholder: {
-    (props: PlaceholderComponentProps): JSX.Element;
-    displayName: string;
-};
+export declare const Placeholder: (props: import("@sitecore-jss/sitecore-jss/utils").EnhancedOmit<PlaceholderComponentProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;