@sitecore-content-sdk/react 0.1.0-beta.1

package/dist/cjs/components/Placeholder.js

@@ -0,0 +1,72 @@
+"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 editing_1 = require("@sitecore-content-sdk/core/editing");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+    }
+    componentDidMount() {
+        if (this.isEmpty && editing_1.PagesEditor.isActive()) {
+            editing_1.PagesEditor.resetChromes();
+        }
+    }
+    /**
+     * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
+     * @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() {
+        var _a, _b;
+        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, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing);
+        this.isEmpty = !placeholderData.length;
+        const components = this.getComponentsForRenderingData(placeholderData);
+        if (this.isEmpty) {
+            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
+            return ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
+                ? this.renderEmptyPlaceholder(rendered)
+                : rendered;
+        }
+        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;
+const PlaceholderWithComponentFactory = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);
+exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentFactory);

package/dist/cjs/components/PlaceholderCommon.js

@@ -0,0 +1,191 @@
+"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 layout_1 = require("@sitecore-content-sdk/core/layout");
+const core_1 = require("@sitecore-content-sdk/core");
+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) {
+        super(props);
+        this.state = {};
+    }
+    static getPlaceholderDataFromRenderingData(rendering, name, isEditing) {
+        let result;
+        let 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) => {
+                const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
+                    ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
+                    : null;
+                if (patternPlaceholder && patternPlaceholder.test(phName)) {
+                    if (isEditing) {
+                        phName = placeholder;
+                    }
+                    else {
+                        rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                        delete rendering.placeholders[placeholder];
+                    }
+                }
+            });
+        }
+        if (rendering && rendering.placeholders && Object.keys(rendering.placeholders).length > 0) {
+            result = rendering.placeholders[phName];
+        }
+        else {
+            result = null;
+        }
+        if (!result) {
+            console.warn(`Placeholder '${phName}' was not found in the current rendering data`, JSON.stringify(rendering, null, 2));
+            return [];
+        }
+        return result;
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    getSXAParams(rendering) {
+        if (!rendering.params)
+            return {};
+        return (rendering.params.FieldNames && {
+            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        });
+    }
+    getComponentsForRenderingData(placeholderData) {
+        var _a;
+        const _b = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _b, placeholderProps = __rest(_b, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        const transformedComponents = placeholderData
+            .map((rendering, index) => {
+            var _a, _b;
+            const key = rendering.uid
+                ? rendering.uid
+                : `component-${index}`;
+            const commonProps = { key };
+            let isEmpty = false;
+            const componentRendering = rendering;
+            let component;
+            if (componentRendering.componentName === core_1.constants.HIDDEN_RENDERING_NAME) {
+                component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering_1.HiddenRendering;
+                isEmpty = true;
+            }
+            else if (!componentRendering.componentName) {
+                component = () => react_1.default.createElement(react_1.default.Fragment, null);
+                isEmpty = true;
+            }
+            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;
+                isEmpty = true;
+            }
+            const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
+                fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
+            })), ((placeholderParams || componentRendering.params) && {
+                params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
+            })), { rendering: componentRendering });
+            let rendered = react_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            if (!isEmpty) {
+                // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+                const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+                // that's why we need to expose element's props here
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+            }
+            // if in edit mode then emit shallow chromes for hydration in Pages
+            if ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {
+                return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+            }
+            return rendered;
+        })
+            .filter((element) => element); // remove nulls
+        if ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing) {
+            return [
+                react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
+            ];
+        }
+        return transformedComponents;
+    }
+    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);
+    }
+}
+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,
+    sitecoreContext: prop_types_1.default.object,
+};

package/dist/cjs/components/PlaceholderMetadata.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderMetadata = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+/**
+ * A React component to generate metadata blocks for a placeholder or rendering.
+ * It utilizes dynamic attributes based on whether the component acts as a placeholder
+ * or as a rendering to properly render the surrounding code blocks.
+ * @param {object} props The properties passed to the component.
+ * @param {ComponentRendering} props.rendering The rendering data.
+ * @param {string} [props.placeholderName] The name of the placeholder.
+ * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
+ * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
+ */
+const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
+    const getCodeBlockAttributes = (kind, id, placeholderName) => {
+        const chrometype = placeholderName ? 'placeholder' : 'rendering';
+        const attributes = {
+            type: 'text/sitecore',
+            chrometype: chrometype,
+            className: 'scpm',
+            kind: kind,
+        };
+        if (kind === editing_1.MetadataKind.Open) {
+            if (chrometype === 'placeholder' && placeholderName) {
+                let phId = '';
+                for (const placeholder of Object.keys(rendering.placeholders)) {
+                    if (placeholderName === placeholder) {
+                        phId = id
+                            ? `${placeholderName}_${id}`
+                            : `${placeholderName}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
+                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
+                            break;
+                        }
+                    }
+                }
+                attributes.id = phId;
+            }
+            else {
+                attributes.id = id;
+            }
+        }
+        return attributes;
+    };
+    const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Open, uid, placeholderName))),
+        children,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Close, uid, placeholderName)))));
+    return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
+};
+exports.PlaceholderMetadata = PlaceholderMetadata;

package/dist/cjs/components/RichText.js

@@ -0,0 +1,82 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.RichTextPropTypes = exports.RichText = void 0;
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
+const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
+const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
+// eslint-disable-next-line react/display-name
+(0, react_1.forwardRef)((_a, ref) => {
+    var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+    if ((0, layout_1.isFieldValueEmpty)(field)) {
+        return null;
+    }
+    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
+            __html: field.value,
+        }, ref }, otherProps);
+    return react_1.default.createElement(tag || 'div', htmlProps);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+exports.RichTextPropTypes = {
+    field: prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        metadata: prop_types_1.default.objectOf(prop_types_1.default.any),
+    }),
+    tag: prop_types_1.default.string,
+    editable: prop_types_1.default.bool,
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+};
+exports.RichText.propTypes = exports.RichTextPropTypes;
+exports.RichText.displayName = 'RichText';

package/dist/cjs/components/SitecoreContext.js

@@ -0,0 +1,67 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 prop_types_1 = __importDefault(require("prop-types"));
+const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
+exports.SitecoreContextReactContext = react_1.default.createContext({});
+exports.ComponentFactoryReactContext = react_1.default.createContext({});
+class SitecoreContext extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        /**
+         * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
+         * or you can provide exact @type {SitecoreContextValue}
+         * @param {SitecoreContextValue | LayoutServiceData} value New context value
+         */
+        this.setContext = (value) => {
+            this.setState({
+                context: value.sitecore
+                    ? this.constructContext(value)
+                    : Object.assign({}, value),
+            });
+        };
+        const context = this.constructContext(props.layoutData);
+        this.state = {
+            context,
+            setContext: this.setContext,
+        };
+    }
+    constructContext(layoutData) {
+        var _a;
+        if (!layoutData) {
+            return {
+                pageEditing: false,
+            };
+        }
+        return Object.assign({ route: layoutData.sitecore.route, itemId: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.itemId }, layoutData.sitecore.context);
+    }
+    componentDidUpdate(prevProps) {
+        // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
+        // instead of using `updateSitecoreContext`
+        if (!(0, react_2.default)(prevProps.layoutData, this.props.layoutData)) {
+            this.setContext(this.props.layoutData);
+            return;
+        }
+    }
+    render() {
+        return (react_1.default.createElement(exports.ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+            react_1.default.createElement(exports.SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
+    }
+}
+exports.SitecoreContext = SitecoreContext;
+SitecoreContext.propTypes = {
+    children: prop_types_1.default.any.isRequired,
+    componentFactory: prop_types_1.default.func,
+    layoutData: prop_types_1.default.shape({
+        sitecore: prop_types_1.default.shape({
+            context: prop_types_1.default.any,
+            route: prop_types_1.default.any,
+        }),
+    }),
+};
+SitecoreContext.displayName = 'SitecoreContext';

package/dist/cjs/components/Text.js

@@ -0,0 +1,78 @@
+"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.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 prop_types_1 = __importDefault(require("prop-types"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
+    var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
+    if ((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;
+    }
+    let output = field.value === undefined ? '' : field.value;
+    // when string value isn't formatted, we should format line breaks
+    const splitted = String(output).split('\n');
+    if (splitted.length) {
+        const formatted = [];
+        splitted.forEach((str, i) => {
+            const isLast = i === splitted.length - 1;
+            formatted.push(str);
+            if (!isLast) {
+                formatted.push(react_1.default.createElement("br", { key: i }));
+            }
+        });
+        output = formatted;
+    }
+    let children = null;
+    const htmlProps = Object.assign({}, otherProps);
+    if (!encode) {
+        htmlProps.dangerouslySetInnerHTML = {
+            __html: output,
+        };
+    }
+    else {
+        children = output;
+    }
+    if (tag || !encode) {
+        return react_1.default.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText }));
+exports.Text.propTypes = {
+    field: prop_types_1.default.shape({
+        value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
+        metadata: prop_types_1.default.objectOf(prop_types_1.default.any),
+    }),
+    tag: prop_types_1.default.string,
+    editable: prop_types_1.default.bool,
+    encode: prop_types_1.default.bool,
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
+};
+exports.Text.displayName = 'Text';

package/dist/cjs/components/sharedTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/enhancers/withComponentFactory.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withComponentFactory = withComponentFactory;
+const react_1 = __importDefault(require("react"));
+const SitecoreContext_1 = require("../components/SitecoreContext");
+const react_2 = require("react");
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+function withComponentFactory(Component) {
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentFactory(props) {
+        const context = (0, 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;
+}

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultEditingError = void 0;
+exports.withDatasourceCheck = withDatasourceCheck;
+const react_1 = __importDefault(require("react"));
+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;
+/**
+ * Checks whether a Sitecore datasource is present and renders appropriately depending on page mode (normal vs editing).
+ * @param {WithDatasourceCheckOptions} [options]
+ * @returns
+ *  The wrapped component, if a datasource is present.
+ *  A null component (in normal mode) or an error component (in editing mode), if a datasource is not present.
+ */
+function withDatasourceCheck(options) {
+    return function withDatasourceCheckHoc(Component) {
+        return function WithDatasourceCheck(props) {
+            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;
+            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/withEditorChromes.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withEditorChromes = void 0;
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const withEditorChromes = (WrappedComponent) => {
+    class Enhancer extends react_1.default.Component {
+        constructor() {
+            super(...arguments);
+            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+        }
+        componentDidUpdate() {
+            (0, __1.resetEditorChromes)();
+        }
+        render() {
+            return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props));
+        }
+    }
+    return Enhancer;
+};
+exports.withEditorChromes = withEditorChromes;