@sitecore-jss/sitecore-jss-react 0.1.0-beta.2

package/dist/cjs/components/File.js

@@ -0,0 +1,53 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.File = void 0;
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const File = (_a) => {
+    /*
+      File fields cannot be managed via the EE. We never output "editable."
+    */
+    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
+    const dynamicField = field;
+    if (!field || (!dynamicField.value && !dynamicField.src)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const file = (dynamicField.src
+        ? field
+        : dynamicField.value);
+    if (!file) {
+        return null;
+    }
+    const linkText = !children ? file.title || file.displayName : null;
+    const anchorAttrs = {
+        href: file.src,
+    };
+    return react_1.default.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+};
+exports.File = File;
+exports.File.propTypes = {
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            src: prop_types_1.default.string,
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+        }),
+    ]).isRequired,
+};
+exports.File.displayName = 'File';

package/dist/cjs/components/HiddenRendering.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HIDDEN_RENDERING_NAME = exports.HiddenRendering = void 0;
+const react_1 = __importDefault(require("react"));
+const styles = {
+    height: '100px',
+    backgroundImage: 'linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%)',
+    backgroundSize: '3px 3px',
+};
+const HiddenRendering = () => react_1.default.createElement("div", { style: styles });
+exports.HiddenRendering = HiddenRendering;
+exports.HIDDEN_RENDERING_NAME = 'Hidden Rendering';

package/dist/cjs/components/Image.js

@@ -0,0 +1,120 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"));
+const utils_1 = require("../utils");
+const utils_2 = require("../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
+react_1.default.createElement("span", Object.assign({ className: "sc-image-wrapper" }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
+const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
+    var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
+    if (!src) {
+        return null;
+    }
+    (0, 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);
+    if (srcSet) {
+        // replace with HTML-formatted srcset, including updated image URLs
+        newAttrs.srcSet = media_1.mediaApi.getSrcSet(resolvedSrc, srcSet, imageParams, mediaUrlPrefix);
+    }
+    // always output original src as fallback for older browsers
+    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 = (0, 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 = `<img ${(0, utils_2.getAttributesString)(imgAttrs)} />`;
+    const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
+    return getEditableWrapper(editableMarkup);
+};
+exports.getEEMarkup = getEEMarkup;
+const Image = (_a) => {
+    var { editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if (!field ||
+        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+        return null;
+    }
+    const imageField = dynamicMedia;
+    if (editable && imageField.editable) {
+        return (0, exports.getEEMarkup)(imageField, imageParams, mediaUrlPrefix, otherProps);
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    if (!img) {
+        return null;
+    }
+    const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
+    if (attrs) {
+        return react_1.default.createElement("img", Object.assign({}, attrs));
+    }
+    return null; // we can't handle the truth
+};
+exports.Image = Image;
+exports.Image.propTypes = {
+    media: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            src: prop_types_1.default.string,
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+            editable: prop_types_1.default.string,
+        }),
+    ]),
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            src: prop_types_1.default.string,
+        }),
+        prop_types_1.default.shape({
+            value: prop_types_1.default.object,
+            editable: prop_types_1.default.string,
+        }),
+    ]),
+    editable: prop_types_1.default.bool,
+    mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
+    imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
+};
+exports.Image.defaultProps = {
+    editable: true,
+};
+exports.Image.displayName = 'Image';

package/dist/cjs/components/Link.js

@@ -0,0 +1,115 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkPropTypes = exports.Link = void 0;
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+exports.Link = (0, 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 &&
+            !dynamicField.value &&
+            !dynamicField.href)) {
+        return null;
+    }
+    const resultTags = [];
+    // EXPERIENCE EDITOR RENDERING
+    if (editable && dynamicField.editableFirstPart) {
+        const markup = dynamicField.editableFirstPart + dynamicField.editableLastPart;
+        // in an ideal world, we'd pre-render React children here and inject them between editableFirstPart and editableLastPart.
+        // 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' });
+        // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together
+        // and children will be added as a sibling
+        delete htmlProps.children;
+        resultTags.push(react_1.default.createElement("span", Object.assign({}, htmlProps)));
+        // 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) {
+            return resultTags[0];
+        }
+    }
+    // handle link directly on field for forgetful devs
+    const link = dynamicField.href
+        ? field
+        : dynamicField.value;
+    if (!link) {
+        return null;
+    }
+    const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+    const anchorAttrs = {
+        href: `${link.href}${querystring}${anchor}`,
+        className: link.class,
+        title: link.title,
+        target: link.target,
+    };
+    if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) {
+        // information disclosure attack prevention keeps target blank site from getting ref to window.opener
+        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', ref }), linkText, children));
+    return react_1.default.createElement(react_1.default.Fragment, null, resultTags);
+});
+exports.LinkPropTypes = {
+    field: prop_types_1.default.oneOfType([
+        prop_types_1.default.shape({
+            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,
+            editableFirstPart: prop_types_1.default.string,
+            editableLastPart: prop_types_1.default.string,
+        }),
+    ]).isRequired,
+    editable: prop_types_1.default.bool,
+    showLinkTextWithChildrenPresent: prop_types_1.default.bool,
+};
+exports.Link.propTypes = exports.LinkPropTypes;
+exports.Link.defaultProps = {
+    editable: true,
+};
+exports.Link.displayName = 'Link';

package/dist/cjs/components/MissingComponent.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingComponent = void 0;
+const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
+const MissingComponent = (props) => {
+    const componentName = props.rendering && props.rendering.componentName
+        ? props.rendering.componentName
+        : 'Unnamed Component';
+    // error override would mean component is not unimplemented
+    !props.errorOverride &&
+        console.log(`Component props for unimplemented '${componentName}' component`, props);
+    const errorMessage = props.errorOverride ||
+        'JSS component is missing React implementation. See the developer console for more information.';
+    return (react_1.default.createElement("div", { style: {
+            background: 'darkorange',
+            outline: '5px solid orange',
+            padding: '10px',
+            color: 'white',
+            maxWidth: '500px',
+        } },
+        react_1.default.createElement("h2", null, componentName),
+        react_1.default.createElement("p", null, errorMessage)));
+};
+exports.MissingComponent = MissingComponent;
+exports.MissingComponent.propTypes = {
+    rendering: prop_types_1.default.shape({
+        componentName: prop_types_1.default.string,
+    }),
+};
+exports.MissingComponent.displayName = 'MissingComponent';

package/dist/cjs/components/Placeholder.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
+const react_1 = __importDefault(require("react"));
+const PlaceholderCommon_1 = require("./PlaceholderCommon");
+const withComponentFactory_1 = require("../enhancers/withComponentFactory");
+const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+/**
+ * @param {HtmlElementRendering | ComponentRendering} rendering
+ */
+function isRawRendering(rendering) {
+    return (!rendering.componentName &&
+        rendering.name !== undefined);
+}
+class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        if (this.isEmpty && utils_1.HorizonEditor.isActive()) {
+            utils_1.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
+     * and retain sibling tags
+     * @param {React.ReactNode | React.ReactElement[]} node react node
+     * @returns react node
+     */
+    renderEmptyPlaceholder(node) {
+        return react_1.default.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+    }
+    render() {
+        const childProps = Object.assign({}, this.props);
+        delete childProps.componentFactory;
+        if (this.state.error) {
+            if (childProps.errorComponent) {
+                return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
+            }
+            return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+                "A rendering error occurred: ",
+                this.state.error.message,
+                "."));
+        }
+        const renderingData = childProps.rendering;
+        const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
+        const components = this.getComponentsForRenderingData(placeholderData);
+        this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
+        if (this.props.renderEmpty && this.isEmpty) {
+            const rendered = this.props.renderEmpty(components);
+            return components.length ? this.renderEmptyPlaceholder(rendered) : rendered;
+        }
+        else if (components.length && this.isEmpty) {
+            return this.renderEmptyPlaceholder(components);
+        }
+        else if (this.props.render) {
+            return this.props.render(components, placeholderData, childProps);
+        }
+        else if (this.props.renderEach) {
+            const renderEach = this.props.renderEach;
+            return components.map((component, index) => {
+                if (component && component.props && component.props.type === 'text/sitecore') {
+                    return component;
+                }
+                return renderEach(component, index);
+            });
+        }
+        else {
+            return components;
+        }
+    }
+}
+PlaceholderComponent.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
+exports.Placeholder = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);

package/dist/cjs/components/PlaceholderCommon.js

@@ -0,0 +1,212 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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("./MissingComponent");
+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");
+/**
+ * These patterns need for right rendering Dynamic placeholders.
+ * Must be distinguished Splitter components and another placeholders(containers)
+ */
+const EXCLUDE_PLACEHOLDERS_RENDER = [
+    new RegExp(/column-(\d{1})-\{\*\}/i),
+    new RegExp(/row-(\d{1})-\{\*\}/i),
+];
+class PlaceholderCommon extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.nodeRefs = [];
+        this.state = {};
+        this.addRef = this.addRef.bind(this);
+        this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
+        this.createRawElement = this.createRawElement.bind(this);
+    }
+    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 'nameOfContainer-{*}' where '{*}' marker for replacing **/
+        if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
+            Object.keys(rendering.placeholders).forEach((placeholder) => {
+                if (placeholder.indexOf('{*}') !== -1 &&
+                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1) &&
+                    name.replace(/[^a-zA-Z]*/gi, '') === placeholder.replace(/[^a-zA-Z]*/gi, '')) {
+                    rendering.placeholders[name] = rendering.placeholders[placeholder];
+                    delete rendering.placeholders[placeholder];
+                }
+            });
+        }
+        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+            result = rendering.placeholders[name];
+        }
+        else {
+            result = null;
+        }
+        if (!result) {
+            console.warn(`Placeholder '${name}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+            return [];
+        }
+        return result;
+    }
+    componentDidMount() {
+        this.updateKeyAttributes();
+    }
+    componentDidUpdate() {
+        this.updateKeyAttributes();
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    getSXAParams(rendering) {
+        if (!rendering.params)
+            return {};
+        return (rendering.params.FieldNames && {
+            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        });
+    }
+    getComponentsForRenderingData(placeholderData) {
+        const _a = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _a, placeholderProps = __rest(_a, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        return placeholderData
+            .map((rendering, index) => {
+            const key = rendering.uid
+                ? rendering.uid
+                : `component-${index}`;
+            const commonProps = { key };
+            // if the element is not a 'component rendering', render it 'raw'
+            if (!rendering.componentName &&
+                rendering.name) {
+                return this.createRawElement(rendering, commonProps);
+            }
+            const componentRendering = rendering;
+            let component;
+            if (componentRendering.componentName === HiddenRendering_1.HIDDEN_RENDERING_NAME) {
+                component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering_1.HiddenRendering;
+            }
+            else if (!componentRendering.componentName) {
+                component = () => react_1.default.createElement(react_1.default.Fragment, null);
+            }
+            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;
+            }
+            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_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+        })
+            .filter((element) => element); // remove nulls
+    }
+    getComponentForRendering(renderingDefinition) {
+        var _a;
+        const componentFactory = this.props.componentFactory;
+        if (!componentFactory || typeof componentFactory !== 'function') {
+            console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
+            return null;
+        }
+        // Render SXA Rendering Variant
+        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
+            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        }
+        return componentFactory(renderingDefinition.componentName);
+    }
+    addRef(nodeRef) {
+        this.nodeRefs.push(nodeRef);
+    }
+    createRawElement(elem, baseProps) {
+        if (!elem.name) {
+            console.error('"elem.name" is undefined in "createRawElement". Something is likely wrong with your component data. Ensure that your components have a name.');
+            return null;
+        }
+        const attributes = (0, utils_1.convertAttributesToReactProps)(elem.attributes);
+        const props = Object.assign(Object.assign(Object.assign({}, baseProps), attributes), { dangerouslySetInnerHTML: elem.contents ? { __html: elem.contents } : undefined });
+        /* Since we can't set the "key" attribute via React, stash it
+         * so we can set in the DOM after render.
+         */
+        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.
+        }
+        return react_1.default.createElement(elem.name, props);
+    }
+    updateKeyAttributes() {
+        if (!this.nodeRefs) {
+            return;
+        }
+        this.nodeRefs.forEach((ref) => {
+            if (ref && ref.getAttribute) {
+                // ref might be a wrapped component, so check for existence of getAttribute method
+                const key = ref.getAttribute('phkey');
+                if (key) {
+                    // need to manually set the 'key' attribute after component mount because
+                    // 'key' is a reserved attribute/prop in React. so it will never be rendered
+                    // as an html attribute.
+                    ref.setAttribute('key', key);
+                }
+            }
+        });
+    }
+}
+exports.PlaceholderCommon = PlaceholderCommon;
+PlaceholderCommon.propTypes = {
+    rendering: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.object,
+    ]).isRequired,
+    fields: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.object,
+    ]).isRequired),
+    params: prop_types_1.default.objectOf(prop_types_1.default.string.isRequired),
+    missingComponentComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+    hiddenRenderingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+    errorComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+    modifyComponentProps: prop_types_1.default.func,
+};