@sitecore-jss/sitecore-jss-react 21.0.0-canary.13 → 21.0.0-canary.130

package/dist/cjs/components/File.js

@@ -49,6 +49,5 @@ exports.File.propTypes = {
             value: prop_types_1.default.object,
         }),
     ]).isRequired,
-    children: prop_types_1.default.node,
 };
 exports.File.displayName = 'File';

package/dist/cjs/components/Image.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = void 0;
+exports.Image = exports.getEEMarkup = void 0;
 const media_1 = require("@sitecore-jss/sitecore-jss/media");
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
@@ -29,6 +29,7 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     if (!src) {
         return null;
     }
+    utils_1.addClassName(otherAttrs);
     const newAttrs = Object.assign({}, otherAttrs);
     // update image URL for jss handler and image rendering params
     const resolvedSrc = media_1.mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
@@ -40,6 +41,31 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     newAttrs.src = resolvedSrc;
     return newAttrs;
 };
+/**
+ * @param {ImageField} imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param {ImageProps['imageParams']} imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param {RegExp} mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param {ImageProps} otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
+    // we likely have an experience editor value, should be a string
+    const foundImg = media_1.mediaApi.findEditorImageTag(imageField.editable);
+    if (!foundImg) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const foundImgProps = utils_1.convertAttributesToReactProps(foundImg.attrs);
+    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
+    // We do not attempt to merge.
+    const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
+    if (!imgAttrs) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const imgHtml = server_1.default.renderToStaticMarkup(react_1.default.createElement("img", Object.assign({}, imgAttrs)));
+    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+    return getEditableWrapper(editableMarkup);
+};
+exports.getEEMarkup = getEEMarkup;
 const Image = (_a) => {
     var { media, editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["media", "editable", "imageParams", "field", "mediaUrlPrefix"]);
     // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
@@ -52,22 +78,8 @@ const Image = (_a) => {
         return null;
     }
     const imageField = dynamicMedia;
-    // we likely have an experience editor value, should be a string
     if (editable && imageField.editable) {
-        const foundImg = media_1.mediaApi.findEditorImageTag(imageField.editable);
-        if (!foundImg) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const foundImgProps = utils_1.convertAttributesToReactProps(foundImg.attrs);
-        // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
-        // We do not attempt to merge.
-        const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
-        if (!imgAttrs) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const imgHtml = server_1.default.renderToStaticMarkup(react_1.default.createElement("img", Object.assign({}, imgAttrs)));
-        const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
-        return getEditableWrapper(editableMarkup);
+        return exports.getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps);
     }
     // some wise-guy/gal is passing in a 'raw' image object value
     const img = dynamicMedia.src

package/dist/cjs/components/Link.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,10 +34,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPropTypes = exports.Link = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const Link = (_a) => {
-    var { field, editable, children, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "children", "showLinkTextWithChildrenPresent"]);
+const html_react_parser_1 = __importDefault(require("html-react-parser"));
+exports.Link = react_1.forwardRef((_a, ref) => {
+    var { field, editable, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
     const dynamicField = field;
     if (!field ||
         (!dynamicField.editableFirstPart &&
@@ -34,10 +55,13 @@ const Link = (_a) => {
         // 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: {
-                __html: markup,
-            } }, otherProps), { key: 'editable' });
-        resultTags.push(react_1.default.createElement("span", Object.assign({}, htmlProps)));
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper' }, otherProps), { key: 'editable' });
+        const components = html_react_parser_1.default(markup, {
+            htmlparser2: {
+                lowerCaseTags: false,
+            },
+        });
+        resultTags.push(react_1.default.createElement("span", Object.assign({}, htmlProps), components));
         // don't render normal link tag when editing, if no children exist
         // this preserves normal-ish behavior if not using a link body (no hacks required)
         if (!children) {
@@ -62,14 +86,13 @@ const Link = (_a) => {
         anchorAttrs.rel = 'noopener noreferrer';
     }
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
-    resultTags.push(react_1.default.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link' }), linkText, children));
+    resultTags.push(react_1.default.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
     return react_1.default.createElement(react_1.default.Fragment, null, resultTags);
-};
-exports.Link = Link;
+});
 exports.LinkPropTypes = {
     field: prop_types_1.default.oneOfType([
         prop_types_1.default.shape({
-            href: prop_types_1.default.string,
+            href: prop_types_1.default.oneOfType([prop_types_1.default.string.isRequired, prop_types_1.default.oneOf([null]).isRequired]),
         }),
         prop_types_1.default.shape({
             value: prop_types_1.default.object,
@@ -78,7 +101,6 @@ exports.LinkPropTypes = {
         }),
     ]).isRequired,
     editable: prop_types_1.default.bool,
-    children: prop_types_1.default.node,
     showLinkTextWithChildrenPresent: prop_types_1.default.bool,
 };
 exports.Link.propTypes = exports.LinkPropTypes;

package/dist/cjs/components/Placeholder.js

@@ -21,6 +21,7 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
         this.isEmpty = false;
     }
     componentDidMount() {
+        super.componentDidMount();
         if (this.isEmpty && utils_1.HorizonEditor.isActive()) {
             utils_1.HorizonEditor.resetChromes();
         }

package/dist/cjs/components/PlaceholderCommon.js

@@ -17,9 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const MissingComponent_1 = require("../components/MissingComponent");
+const MissingComponent_1 = require("./MissingComponent");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
+/** [SXA] common marker by which we find container fo replacing **/
+const PREFIX_PLACEHOLDER = 'container-{*}';
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -31,6 +33,12 @@ class PlaceholderCommon extends react_1.default.Component {
     }
     static getPlaceholderDataFromRenderingData(rendering, name) {
         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 'container-{*}' where '{*}' marker for replacing **/
+        if (rendering && rendering.placeholders && rendering.placeholders[PREFIX_PLACEHOLDER]) {
+            rendering.placeholders[name] = rendering.placeholders[PREFIX_PLACEHOLDER];
+            delete rendering.placeholders[PREFIX_PLACEHOLDER];
+        }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
             result = rendering.placeholders[name];
         }

package/dist/cjs/components/VisitorIdentification.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisitorIdentification = void 0;
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 let emittedVI = false;
-const VIComponent = ({ sitecoreContext }) => {
+const VIComponent = () => {
+    const { sitecoreContext } = withSitecoreContext_1.useSitecoreContext();
     if (emittedVI ||
         typeof document === 'undefined' ||
         !sitecoreContext.visitorIdentificationTimestamp) {
@@ -24,4 +25,4 @@ const VIComponent = ({ sitecoreContext }) => {
     return null;
 };
 VIComponent.displayName = 'VisitorIdentification';
-exports.VisitorIdentification = withSitecoreContext_1.withSitecoreContext()(VIComponent);
+exports.VisitorIdentification = VIComponent;

package/dist/cjs/enhancers/withComponentFactory.js

@@ -6,12 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withComponentFactory = void 0;
 const react_1 = __importDefault(require("react"));
 const SitecoreContext_1 = require("../components/SitecoreContext");
+const react_2 = require("react");
 /**
- * @param {React.ComponentClass<T> | React.SFC<T>} Component
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
  */
 function withComponentFactory(Component) {
-    return function WithComponentFactory(props) {
-        return (react_1.default.createElement(SitecoreContext_1.ComponentFactoryReactContext.Consumer, null, (context) => react_1.default.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }))));
-    };
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = react_2.useContext(SitecoreContext_1.ComponentFactoryReactContext);
+        return react_1.default.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    }
+    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentFactory;
 }
 exports.withComponentFactory = withComponentFactory;

package/dist/cjs/enhancers/withEditorChromes.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withExperienceEditorChromes = exports.withEditorChromes = void 0;
+exports.withEditorChromes = void 0;
 const react_1 = __importDefault(require("react"));
 const __1 = require("..");
 const withEditorChromes = (WrappedComponent) => {
@@ -22,7 +22,3 @@ const withEditorChromes = (WrappedComponent) => {
     return Enhancer;
 };
 exports.withEditorChromes = withEditorChromes;
-/**
- * @deprecated Will be removed in a future release. Please use withEditorChromes instead.
- */
-exports.withExperienceEditorChromes = exports.withEditorChromes;

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -18,7 +18,7 @@ function withSitecoreContext(options) {
 }
 exports.withSitecoreContext = withSitecoreContext;
 /**
- * This hook grants acсess to the current SiteCore page context
+ * This hook grants acсess to the current Sitecore page context
  * by default JSS includes the following properties in this context:
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.

package/dist/cjs/index.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withExperienceEditorChromes = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resetEditorChromes = exports.isEditorActive = exports.resetExperienceEditorChromes = exports.isExperienceEditorActive = exports.constants = void 0;
+exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resetEditorChromes = exports.isEditorActive = 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; } });
 var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
-Object.defineProperty(exports, "isExperienceEditorActive", { enumerable: true, get: function () { return utils_1.isExperienceEditorActive; } });
-Object.defineProperty(exports, "resetExperienceEditorChromes", { enumerable: true, get: function () { return utils_1.resetExperienceEditorChromes; } });
 Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
 Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
@@ -25,6 +24,7 @@ var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
 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; } });
 var RichText_1 = require("./components/RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
 Object.defineProperty(exports, "RichTextPropTypes", { enumerable: true, get: function () { return RichText_1.RichTextPropTypes; } });
@@ -47,7 +47,6 @@ Object.defineProperty(exports, "withSitecoreContext", { enumerable: true, get: f
 Object.defineProperty(exports, "useSitecoreContext", { enumerable: true, get: function () { return withSitecoreContext_1.useSitecoreContext; } });
 var withEditorChromes_1 = require("./enhancers/withEditorChromes");
 Object.defineProperty(exports, "withEditorChromes", { enumerable: true, get: function () { return withEditorChromes_1.withEditorChromes; } });
-Object.defineProperty(exports, "withExperienceEditorChromes", { enumerable: true, get: function () { return withEditorChromes_1.withExperienceEditorChromes; } });
 var withPlaceholder_1 = require("./enhancers/withPlaceholder");
 Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
 var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");

package/dist/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+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());
@@ -48,3 +48,23 @@ const convertAttributesToReactProps = (attributes) => {
     }, {});
 };
 exports.convertAttributesToReactProps = convertAttributesToReactProps;
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};
+exports.addClassName = addClassName;

package/dist/esm/components/File.js

@@ -42,6 +42,5 @@ File.propTypes = {
             value: PropTypes.object,
         }),
     ]).isRequired,
-    children: PropTypes.node,
 };
 File.displayName = 'File';

package/dist/esm/components/Image.js

@@ -13,7 +13,7 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { convertAttributesToReactProps } from '../utils';
+import { addClassName, convertAttributesToReactProps } from '../utils';
 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
@@ -23,6 +23,7 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     if (!src) {
         return null;
     }
+    addClassName(otherAttrs);
     const newAttrs = Object.assign({}, otherAttrs);
     // update image URL for jss handler and image rendering params
     const resolvedSrc = mediaApi.updateImageUrl(src, imageParams, mediaUrlPrefix);
@@ -34,6 +35,30 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     newAttrs.src = resolvedSrc;
     return newAttrs;
 };
+/**
+ * @param {ImageField} imageField {ImageField} provides the dynamicMedia which is used to render the image
+ * @param {ImageProps['imageParams']} imageParams {ImageProp['imageParams']}} provides the image parameters that will be attached to the image URL
+ * @param {RegExp} mediaUrlPrefix {RegExp} the url prefix regex used in the mediaApi
+ * @param {ImageProps} otherProps {ImageProps} all other props included on the image component
+ * @returns Experience Editor Markup
+ */
+export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
+    // we likely have an experience editor value, should be a string
+    const foundImg = mediaApi.findEditorImageTag(imageField.editable);
+    if (!foundImg) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
+    // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
+    // We do not attempt to merge.
+    const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
+    if (!imgAttrs) {
+        return getEditableWrapper(imageField.editable);
+    }
+    const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
+    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+    return getEditableWrapper(editableMarkup);
+};
 export const Image = (_a) => {
     var { media, editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["media", "editable", "imageParams", "field", "mediaUrlPrefix"]);
     // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
@@ -46,22 +71,8 @@ export const Image = (_a) => {
         return null;
     }
     const imageField = dynamicMedia;
-    // we likely have an experience editor value, should be a string
     if (editable && imageField.editable) {
-        const foundImg = mediaApi.findEditorImageTag(imageField.editable);
-        if (!foundImg) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const foundImgProps = convertAttributesToReactProps(foundImg.attrs);
-        // Note: otherProps may override values from foundImgProps, e.g. `style`, `className` prop
-        // We do not attempt to merge.
-        const imgAttrs = getImageAttrs(Object.assign(Object.assign({}, foundImgProps), otherProps), imageParams, mediaUrlPrefix);
-        if (!imgAttrs) {
-            return getEditableWrapper(imageField.editable);
-        }
-        const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
-        const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
-        return getEditableWrapper(editableMarkup);
+        return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps);
     }
     // some wise-guy/gal is passing in a 'raw' image object value
     const img = dynamicMedia.src

package/dist/esm/components/Link.js

@@ -9,10 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-export const Link = (_a) => {
-    var { field, editable, children, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "children", "showLinkTextWithChildrenPresent"]);
+import parse from 'html-react-parser';
+export const Link = forwardRef((_a, ref) => {
+    var { field, editable, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    const children = otherProps.children;
     const dynamicField = field;
     if (!field ||
         (!dynamicField.editableFirstPart &&
@@ -28,10 +30,13 @@ export const Link = (_a) => {
         // 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: {
-                __html: markup,
-            } }, otherProps), { key: 'editable' });
-        resultTags.push(React.createElement("span", Object.assign({}, htmlProps)));
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper' }, otherProps), { key: 'editable' });
+        const components = parse(markup, {
+            htmlparser2: {
+                lowerCaseTags: false,
+            },
+        });
+        resultTags.push(React.createElement("span", Object.assign({}, htmlProps), components));
         // don't render normal link tag when editing, if no children exist
         // this preserves normal-ish behavior if not using a link body (no hacks required)
         if (!children) {
@@ -56,13 +61,13 @@ export const Link = (_a) => {
         anchorAttrs.rel = 'noopener noreferrer';
     }
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
-    resultTags.push(React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link' }), linkText, children));
+    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);
-};
+});
 export const LinkPropTypes = {
     field: PropTypes.oneOfType([
         PropTypes.shape({
-            href: PropTypes.string,
+            href: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.oneOf([null]).isRequired]),
         }),
         PropTypes.shape({
             value: PropTypes.object,
@@ -71,7 +76,6 @@ export const LinkPropTypes = {
         }),
     ]).isRequired,
     editable: PropTypes.bool,
-    children: PropTypes.node,
     showLinkTextWithChildrenPresent: PropTypes.bool,
 };
 Link.propTypes = LinkPropTypes;

package/dist/esm/components/Placeholder.js

@@ -15,6 +15,7 @@ class PlaceholderComponent extends PlaceholderCommon {
         this.isEmpty = false;
     }
     componentDidMount() {
+        super.componentDidMount();
         if (this.isEmpty && HorizonEditor.isActive()) {
             HorizonEditor.resetChromes();
         }

package/dist/esm/components/PlaceholderCommon.js

@@ -11,9 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MissingComponent } from '../components/MissingComponent';
+import { MissingComponent } from './MissingComponent';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+/** [SXA] common marker by which we find container fo replacing **/
+const PREFIX_PLACEHOLDER = 'container-{*}';
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -25,6 +27,12 @@ export class PlaceholderCommon extends React.Component {
     }
     static getPlaceholderDataFromRenderingData(rendering, name) {
         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 'container-{*}' where '{*}' marker for replacing **/
+        if (rendering && rendering.placeholders && rendering.placeholders[PREFIX_PLACEHOLDER]) {
+            rendering.placeholders[name] = rendering.placeholders[PREFIX_PLACEHOLDER];
+            delete rendering.placeholders[PREFIX_PLACEHOLDER];
+        }
         if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
             result = rendering.placeholders[name];
         }

package/dist/esm/components/VisitorIdentification.js

@@ -1,6 +1,7 @@
-import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
 let emittedVI = false;
-const VIComponent = ({ sitecoreContext }) => {
+const VIComponent = () => {
+    const { sitecoreContext } = useSitecoreContext();
     if (emittedVI ||
         typeof document === 'undefined' ||
         !sitecoreContext.visitorIdentificationTimestamp) {
@@ -21,4 +22,4 @@ const VIComponent = ({ sitecoreContext }) => {
     return null;
 };
 VIComponent.displayName = 'VisitorIdentification';
-export const VisitorIdentification = withSitecoreContext()(VIComponent);
+export const VisitorIdentification = VIComponent;

package/dist/esm/enhancers/withComponentFactory.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import { ComponentFactoryReactContext } from '../components/SitecoreContext';
+import { useContext } from 'react';
 /**
- * @param {React.ComponentClass<T> | React.SFC<T>} Component
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
  */
 export function withComponentFactory(Component) {
-    return function WithComponentFactory(props) {
-        return (React.createElement(ComponentFactoryReactContext.Consumer, null, (context) => React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }))));
-    };
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = useContext(ComponentFactoryReactContext);
+        return React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    }
+    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentFactory;
 }

package/dist/esm/enhancers/withEditorChromes.js

@@ -15,7 +15,3 @@ export const withEditorChromes = (WrappedComponent) => {
     }
     return Enhancer;
 };
-/**
- * @deprecated Will be removed in a future release. Please use withEditorChromes instead.
- */
-export const withExperienceEditorChromes = withEditorChromes;

package/dist/esm/enhancers/withSitecoreContext.js

@@ -11,7 +11,7 @@ export function withSitecoreContext(options) {
     };
 }
 /**
- * This hook grants acсess to the current SiteCore page context
+ * This hook grants acсess to the current Sitecore page context
  * by default JSS includes the following properties in this context:
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.

package/dist/esm/index.js

@@ -1,11 +1,11 @@
-export { constants } from '@sitecore-jss/sitecore-jss';
-export { isExperienceEditorActive, resetExperienceEditorChromes, isEditorActive, resetEditorChromes, } from '@sitecore-jss/sitecore-jss/utils';
+export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
 export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { Placeholder } from './components/Placeholder';
-export { Image } from './components/Image';
+export { Image, getEEMarkup, } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';
 export { Text } from './components/Text';
 export { DateField } from './components/Date';
@@ -13,7 +13,7 @@ export { Link, LinkPropTypes } from './components/Link';
 export { File } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
 export { SitecoreContext, SitecoreContextReactContext, } from './components/SitecoreContext';
-export { withSitecoreContext, useSitecoreContext } from './enhancers/withSitecoreContext';
-export { withEditorChromes, withExperienceEditorChromes } from './enhancers/withEditorChromes';
+export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSitecoreContext';
+export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';

package/dist/esm/utils.js

@@ -42,3 +42,22 @@ export const convertAttributesToReactProps = (attributes) => {
         return result;
     }, {});
 };
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * * @returns {void}
+ */
+export const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};