@sitecore-jss/sitecore-jss-react 23.0.0-canary.8 → 23.0.0

package/dist/cjs/components/PlaceholderCommon.js

@@ -10,11 +10,6 @@ const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
-const FEaaSComponent_1 = require("./FEaaSComponent");
-const FEaaSWrapper_1 = require("./FEaaSWrapper");
-const BYOCComponent_1 = require("./BYOCComponent");
-const BYOCWrapper_1 = require("./BYOCWrapper");
-const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
 const ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
@@ -25,13 +20,12 @@ class PlaceholderCommon extends react_1.default.Component {
         this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
         this.createRawElement = this.createRawElement.bind(this);
     }
-    static getPlaceholderDataFromRenderingData(rendering, name, editMode) {
+    static getPlaceholderDataFromRenderingData(rendering, name) {
         let result;
-        let phName = name.slice();
+        const phName = name.slice();
         /**
          * Process (SXA) dynamic placeholders
          * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
-         * For Metadata EditMode, we need to keep the raw placeholder name in place.
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
@@ -39,13 +33,8 @@ class PlaceholderCommon extends react_1.default.Component {
                     ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
                     : null;
                 if (patternPlaceholder && patternPlaceholder.test(phName)) {
-                    if (editMode === layout_1.EditMode.Metadata) {
-                        phName = placeholder;
-                    }
-                    else {
-                        rendering.placeholders[phName] = rendering.placeholders[placeholder];
-                        delete rendering.placeholders[placeholder];
-                    }
+                    rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                    delete rendering.placeholders[placeholder];
                 }
             });
         }
@@ -78,11 +67,10 @@ class PlaceholderCommon extends react_1.default.Component {
         });
     }
     getComponentsForRenderingData(placeholderData) {
-        var _a;
         const { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent, passThroughComponentProps, modifyComponentProps, } = this.props;
         const transformedComponents = placeholderData
             .map((rendering, index) => {
-            var _a, _b;
+            var _a;
             const key = rendering.uid
                 ? rendering.uid
                 : `component-${index}`;
@@ -106,21 +94,6 @@ class PlaceholderCommon extends react_1.default.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
-            if (!component) {
-                if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
-                    component = FEaaSComponent_1.FEaaSComponent;
-                }
-                else if (componentRendering.componentName === FEaaSWrapper_1.FEAAS_WRAPPER_RENDERING_NAME) {
-                    component = FEaaSWrapper_1.FEaaSWrapper;
-                }
-                else if (componentRendering.componentName === BYOCComponent_1.BYOC_COMPONENT_RENDERING_NAME) {
-                    component = BYOCComponent_1.BYOCComponent;
-                }
-                else if (componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME) {
-                    component = BYOCWrapper_1.BYOCWrapper;
-                }
-            }
             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_1.MissingComponent;
@@ -139,26 +112,15 @@ class PlaceholderCommon extends react_1.default.Component {
             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 : '';
-                // the registered BYOC components are imported using dynamic(), so we need to account for that when passing the isDynamic prop to ErrorBoundary
-                const isByocWrapper = componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME;
                 // all dynamic elements will have a separate render prop
                 const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
                 // 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_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: this.props.disableSuspense }, 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) === layout_1.EditMode.Metadata) {
-                return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent, disableSuspense: this.props.disableSuspense }, rendered.props), rendered));
             }
             return rendered;
         })
             .filter((element) => element); // remove nulls
-        if (((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode) === layout_1.EditMode.Metadata) {
-            return [
-                react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
-            ];
-        }
         return transformedComponents;
     }
     getComponentForRendering(renderingDefinition) {
@@ -190,6 +152,8 @@ class PlaceholderCommon extends react_1.default.Component {
         if (!Array.isArray(attributes) && attributes && attributes.chrometype === 'placeholder') {
             props.phkey = elem.attributes.key; // props that get rendered as dom attribute names need to be lowercase, otherwise React complains.
             props.ref = this.addRef; // only need ref for placeholder containers, trying to add it to other components (e.g. stateless components) may result in a warning.
+            // EE may mutate chrome
+            props.suppressHydrationWarning = true;
         }
         return react_1.default.createElement(elem.name, props);
     }

package/dist/cjs/components/RichText.js

@@ -36,20 +36,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichText = void 0;
 const react_1 = __importStar(require("react"));
-const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
-const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
-const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
-// eslint-disable-next-line react/display-name
-(0, react_1.forwardRef)((_a, ref) => {
+exports.RichText = (0, react_1.forwardRef)((_a, ref) => {
     var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
-    if (!field || (!field.editable && (0, layout_1.isFieldValueEmpty)(field))) {
+    const html = field && (field.editable && editable ? field.editable : field.value);
+    // Keep the object reference stable across re-renders when the html is unchanged,
+    // since React DOM compares dangerouslySetInnerHTML by reference and re-sets
+    // innerHTML (recreating all child DOM nodes) whenever it changes.
+    const dangerouslySetInnerHTML = (0, react_1.useMemo)(() => (html !== undefined && html !== '' ? { __html: html } : undefined), [html]);
+    if (!field || (!field.editable && (0, layout_1.isFieldValueEmpty)(field)) || !dangerouslySetInnerHTML) {
         return null;
     }
-    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
-            __html: field.editable && editable ? field.editable : field.value,
-        }, ref }, otherProps);
+    const htmlProps = Object.assign(Object.assign({ dangerouslySetInnerHTML,
+        ref }, (field.editable && editable ? { suppressHydrationWarning: true } : {})), otherProps);
     return react_1.default.createElement(tag || 'div', htmlProps);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+});
 exports.RichText.displayName = 'RichText';

package/dist/cjs/components/SitecoreContext.js

@@ -4,15 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SitecoreContext = exports.ComponentFactoryReactContext = exports.SitecoreContextReactContext = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
-const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 exports.SitecoreContextReactContext = react_1.default.createContext({});
 exports.ComponentFactoryReactContext = react_1.default.createContext({});
 class SitecoreContext extends react_1.default.Component {
     constructor(props) {
-        var _a, _b, _c, _d;
         super(props);
         /**
          * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -27,14 +24,9 @@ class SitecoreContext extends react_1.default.Component {
             });
         };
         const context = this.constructContext(props.layoutData);
-        let api = props.api;
-        if (((_b = (_a = props.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId) && !((_d = (_c = props.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)) {
-            api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: sitecore_jss_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
-        }
         this.state = {
             context,
             setContext: this.setContext,
-            api,
         };
     }
     constructContext(layoutData) {

package/dist/cjs/components/Text.js

@@ -16,18 +16,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const react_1 = __importDefault(require("react"));
-const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
-const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
-const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
+const Text = (_a) => {
     var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
     if (!field || (!field.editable && (0, layout_1.isFieldValueEmpty)(field))) {
         return null;
     }
     // can't use editable value if we want to output unencoded
     if (!encode) {
-        // eslint-disable-next-line no-param-reassign
         editable = false;
     }
     const isEditable = field.editable && editable;
@@ -68,5 +64,6 @@ exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEdit
     else {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText }));
+};
+exports.Text = Text;
 exports.Text.displayName = 'Text';

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withDatasourceCheck = exports.DefaultEditingError = void 0;
 const react_1 = __importDefault(require("react"));
-const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("./withSitecoreContext");
 const DefaultEditingError = () => (react_1.default.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 exports.DefaultEditingError = DefaultEditingError;
@@ -22,9 +21,7 @@ function withDatasourceCheck(options) {
             var _a, _b;
             const { sitecoreContext } = (0, withSitecoreContext_1.useSitecoreContext)();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : exports.DefaultEditingError;
-            // If the component is rendered in DesignLibrary, we don't need to check for datasource
-            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === layout_1.RenderingType.Component;
-            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
+            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/cjs/enhancers/withPlaceholder.js

@@ -42,13 +42,13 @@ function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.editMode);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.editMode);
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -12,7 +12,7 @@ const SitecoreContext_1 = require("../components/SitecoreContext");
 function withSitecoreContext(options) {
     return function withSitecoreContextHoc(Component) {
         return function WithSitecoreContext(props) {
-            return (react_1.default.createElement(SitecoreContext_1.SitecoreContextReactContext.Consumer, null, (context) => (react_1.default.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
+            return (react_1.default.createElement(SitecoreContext_1.SitecoreContextReactContext.Consumer, null, (context) => (react_1.default.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
         };
     };
 }
@@ -42,7 +42,6 @@ function useSitecoreContext(options) {
     const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);
     const updatable = options === null || options === void 0 ? void 0 : options.updatable;
     return {
-        api: reactContext.api,
         sitecoreContext: reactContext.context,
         updateSitecoreContext: updatable ? reactContext.setContext : undefined,
     };

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withFieldMetadata = exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.getEEMarkup = exports.Image = exports.Form = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
-exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = void 0;
+exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.Link = exports.DateField = exports.Text = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
@@ -14,14 +13,11 @@ Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: fu
 Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return editing_1.DefaultEditFrameButton; } });
 Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return editing_1.DefaultEditFrameButtons; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
-Object.defineProperty(exports, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getDesignLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
 Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
 Object.defineProperty(exports, "RestLayoutService", { enumerable: true, get: function () { return layout_1.RestLayoutService; } });
 Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
-Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
 var tracking_1 = require("@sitecore-jss/sitecore-jss/tracking");
 Object.defineProperty(exports, "trackingApi", { enumerable: true, get: function () { return tracking_1.trackingApi; } });
 var i18n_1 = require("@sitecore-jss/sitecore-jss/i18n");
@@ -34,8 +30,6 @@ var media_1 = require("@sitecore-jss/sitecore-jss/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
-var Form_1 = require("./components/Form");
-Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
 Object.defineProperty(exports, "getEEMarkup", { enumerable: true, get: function () { return Image_1.getEEMarkup; } });
@@ -45,18 +39,6 @@ var Text_1 = require("./components/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 var Date_1 = require("./components/Date");
 Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return Date_1.DateField; } });
-var FEaaSComponent_1 = require("./components/FEaaSComponent");
-Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSComponent_1.FEaaSComponent; } });
-Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
-var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
-Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
-var DesignLibrary_1 = require("./components/DesignLibrary");
-Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
-var BYOCComponent_1 = require("./components/BYOCComponent");
-Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
-Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });
-var BYOCWrapper_1 = require("./components/BYOCWrapper");
-Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCWrapper; } });
 var Link_1 = require("./components/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 var File_1 = require("./components/File");
@@ -79,12 +61,3 @@ var EditFrame_1 = require("./components/EditFrame");
 Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function () { return EditFrame_1.EditFrame; } });
 var ComponentBuilder_1 = require("./ComponentBuilder");
 Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });
-var withFieldMetadata_1 = require("./enhancers/withFieldMetadata");
-Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return withFieldMetadata_1.withFieldMetadata; } });
-var withEmptyFieldEditingComponent_1 = require("./enhancers/withEmptyFieldEditingComponent");
-Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent; } });
-var EditingScripts_1 = require("./components/EditingScripts");
-Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return EditingScripts_1.EditingScripts; } });
-var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");
-Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText; } });
-Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage; } });

package/dist/cjs/utils.js

@@ -11,8 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDataFromFields = exports.getAttributesString = exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
-const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+exports.getAttributesString = exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
 const style_attr_1 = require("style-attr");
 // https://stackoverflow.com/a/10426674/9324
 const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -102,17 +101,3 @@ const getAttributesString = (attributes) => {
     return attributesEntries.join(' ');
 };
 exports.getAttributesString = getAttributesString;
-/**
- * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
- * @param {ComponentFields} fields field collection from Sitecore
- * @returns JSON object that can be used as props
- */
-const getDataFromFields = (fields) => {
-    let data = {};
-    data = Object.entries(fields).reduce((acc, [key]) => {
-        acc[key] = (0, layout_1.getFieldValue)(fields, key);
-        return acc;
-    }, data);
-    return data;
-};
-exports.getDataFromFields = getDataFromFields;

package/dist/esm/components/Date.js

@@ -10,11 +10,8 @@ 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 { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
-export const DateField = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+export const DateField = (_a) => {
     var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
     if (!field || (!field.editable && isFieldValueEmpty(field))) {
         return null;
@@ -38,5 +35,5 @@ export const DateField = withFieldMetadata(withEmptyFieldEditingComponent((_a) =
     else {
         return React.createElement(React.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+};
 DateField.displayName = 'Date';

package/dist/esm/components/ErrorBoundary.js

@@ -27,6 +27,11 @@ class ErrorBoundary extends React.Component {
             ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === LayoutServicePageState.Edit ||
             ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
     }
+    isPageEditing() {
+        var _a, _b;
+        return (!!((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing) ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Edit);
+    }
     render() {
         var _a, _b;
         if (this.state.error) {
@@ -51,10 +56,21 @@ class ErrorBoundary extends React.Component {
             }
         }
         // do not apply suspense when suspense is disabled or when on already dynamic components
+        let content;
         if (((_b = this.props.disableSuspense) !== null && _b !== void 0 ? _b : true) || this.props.isDynamic) {
-            return this.props.children;
+            content = this.props.children;
+        }
+        else {
+            content = (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+        }
+        // Experience Editor tags the outermost DOM node of each rendering (sc-part-of,
+        // scEnabledChrome) after SSR. Own that node in the SDK during editing so hydration
+        // mismatches can be suppressed without requiring suppressHydrationWarning on every
+        // app component. `display: contents` keeps SXA/Bootstrap column layout intact.
+        if (this.isPageEditing()) {
+            return (React.createElement("div", { suppressHydrationWarning: true, style: { display: 'contents' } }, content));
         }
-        return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+        return content;
     }
 }
 export default withSitecoreContext()(ErrorBoundary);

package/dist/esm/components/Image.js

@@ -13,14 +13,12 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import React from 'react';
 import { addClassName, convertAttributesToReactProps } from '../utils';
 import { getAttributesString } from '../utils';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
-React.createElement("span", Object.assign({ className: "sc-image-wrapper" }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
+// Experience Editor rewrites this chrome markup client-side after SSR.
+React.createElement("span", Object.assign({ className: "sc-image-wrapper", suppressHydrationWarning: true }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
 const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
     if (!src) {
@@ -62,7 +60,7 @@ export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps)
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };
-export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+export const Image = (_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
     const dynamicMedia = field;
     if (!field || (!dynamicMedia.editable && isFieldValueEmpty(dynamicMedia))) {
@@ -79,14 +77,10 @@ export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     if (!img) {
         return null;
     }
-    // prevent metadata from being passed to the img tag
-    if (img.metadata) {
-        delete img.metadata;
-    }
     const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
     if (attrs) {
         return React.createElement("img", Object.assign({}, attrs));
     }
     return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
+};
 Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -10,13 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
-export const Link = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line react/display-name
-forwardRef((_a, ref) => {
+export const Link = forwardRef((_a, ref) => {
     var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;
@@ -31,7 +26,9 @@ forwardRef((_a, ref) => {
         // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children)
         // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately
         // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006.
-        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', dangerouslySetInnerHTML: {
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', 
+            // Experience Editor rewrites this chrome markup client-side after SSR.
+            suppressHydrationWarning: true, dangerouslySetInnerHTML: {
                 __html: markup,
             } }, otherProps), { key: 'editable' });
         // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together
@@ -66,5 +63,5 @@ forwardRef((_a, ref) => {
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
     resultTags.push(React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
     return React.createElement(React.Fragment, null, resultTags);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+});
 Link.displayName = 'Link';

package/dist/esm/components/Placeholder.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
-import { HorizonEditor } from '@sitecore-jss/sitecore-jss/editing';
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
@@ -15,12 +14,6 @@ class PlaceholderComponent extends PlaceholderCommon {
         super(props);
         this.isEmpty = false;
     }
-    componentDidMount() {
-        super.componentDidMount();
-        if (this.isEmpty && HorizonEditor.isActive()) {
-            HorizonEditor.resetChromes();
-        }
-    }
     /**
      * In case we need to render an empty placeholder, some part of the markup will be inserted by the EE,
      * so we need to separate the empty placeholder's markup and allow React reconciliation to be executed correctly
@@ -29,10 +22,10 @@ class PlaceholderComponent extends PlaceholderCommon {
      * @returns react node
      */
     renderEmptyPlaceholder(node) {
-        return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+        // Experience Editor may mutate empty-placeholder chrome between SSR and hydration.
+        return (React.createElement("div", { className: "sc-jss-empty-placeholder", suppressHydrationWarning: true }, node));
     }
     render() {
-        var _a;
         const childProps = Object.assign({}, this.props);
         delete childProps.componentFactory;
         if (this.state.error) {
@@ -45,7 +38,7 @@ class PlaceholderComponent extends PlaceholderCommon {
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode);
+        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
         this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
         const components = this.getComponentsForRenderingData(placeholderData);
         if (this.props.renderEmpty && this.isEmpty) {