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

package/dist/esm/components/PlaceholderCommon.js

@@ -0,0 +1,184 @@
+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;
+};
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MissingComponent } from './MissingComponent';
+import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-content-sdk/core/layout';
+import { constants } from '@sitecore-content-sdk/core';
+import { HiddenRendering } from './HiddenRendering';
+import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
+import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
+import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
+import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
+import ErrorBoundary from './ErrorBoundary';
+export class PlaceholderCommon extends React.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 = isDynamicPlaceholder(placeholder)
+                    ? 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 === constants.HIDDEN_RENDERING_NAME) {
+                component = hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering;
+                isEmpty = true;
+            }
+            else if (!componentRendering.componentName) {
+                component = () => React.createElement(React.Fragment, null);
+                isEmpty = true;
+            }
+            else {
+                component = this.getComponentForRendering(componentRendering);
+            }
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            if (!component) {
+                if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
+                    component = FEaaSComponent;
+                }
+                else if (componentRendering.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
+                    component = FEaaSWrapper;
+                }
+                else if (componentRendering.componentName === BYOC_COMPONENT_RENDERING_NAME) {
+                    component = BYOCComponent;
+                }
+                else if (componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME) {
+                    component = 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;
+                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.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            if (!isEmpty) {
+                // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+                const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+                // that's why we need to expose element's props here
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+            }
+            // if 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.createElement(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.createElement(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);
+    }
+}
+PlaceholderCommon.propTypes = {
+    rendering: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.object,
+    ]).isRequired,
+    fields: PropTypes.objectOf(PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.object,
+    ]).isRequired),
+    params: PropTypes.objectOf(PropTypes.string.isRequired),
+    missingComponentComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    hiddenRenderingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    errorComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+    modifyComponentProps: PropTypes.func,
+    sitecoreContext: PropTypes.object,
+};

package/dist/esm/components/PlaceholderMetadata.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-content-sdk/core/layout';
+import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@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.
+ */
+export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
+    const getCodeBlockAttributes = (kind, id, placeholderName) => {
+        const chrometype = placeholderName ? 'placeholder' : 'rendering';
+        const attributes = {
+            type: 'text/sitecore',
+            chrometype: chrometype,
+            className: 'scpm',
+            kind: kind,
+        };
+        if (kind === MetadataKind.Open) {
+            if (chrometype === 'placeholder' && placeholderName) {
+                let phId = '';
+                for (const placeholder of Object.keys(rendering.placeholders)) {
+                    if (placeholderName === placeholder) {
+                        phId = id
+                            ? `${placeholderName}_${id}`
+                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if (isDynamicPlaceholder(placeholder)) {
+                        const pattern = getDynamicPlaceholderPattern(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+                            break;
+                        }
+                    }
+                }
+                attributes.id = phId;
+            }
+            else {
+                attributes.id = id;
+            }
+        }
+        return attributes;
+    };
+    const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
+        children,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
+    return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
+};

package/dist/esm/components/RichText.js

@@ -0,0 +1,43 @@
+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;
+};
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(
+// eslint-disable-next-line react/display-name
+forwardRef((_a, ref) => {
+    var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+    if (isFieldValueEmpty(field)) {
+        return null;
+    }
+    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
+            __html: field.value,
+        }, ref }, otherProps);
+    return React.createElement(tag || 'div', htmlProps);
+}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+export const RichTextPropTypes = {
+    field: PropTypes.shape({
+        value: PropTypes.string,
+        metadata: PropTypes.objectOf(PropTypes.any),
+    }),
+    tag: PropTypes.string,
+    editable: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+};
+RichText.propTypes = RichTextPropTypes;
+RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreContext.js

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import PropTypes from 'prop-types';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
+export const SitecoreContextReactContext = React.createContext({});
+export const ComponentFactoryReactContext = React.createContext({});
+export class SitecoreContext extends React.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 (!fastDeepEqual(prevProps.layoutData, this.props.layoutData)) {
+            this.setContext(this.props.layoutData);
+            return;
+        }
+    }
+    render() {
+        return (React.createElement(ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+            React.createElement(SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
+    }
+}
+SitecoreContext.propTypes = {
+    children: PropTypes.any.isRequired,
+    componentFactory: PropTypes.func,
+    layoutData: PropTypes.shape({
+        sitecore: PropTypes.shape({
+            context: PropTypes.any,
+            route: PropTypes.any,
+        }),
+    }),
+};
+SitecoreContext.displayName = 'SitecoreContext';

package/dist/esm/components/Text.js

@@ -0,0 +1,72 @@
+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;
+};
+import React from 'react';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import PropTypes from 'prop-types';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+    var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
+    if (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.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.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return React.createElement(React.Fragment, null, children);
+    }
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+Text.propTypes = {
+    field: PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        metadata: PropTypes.objectOf(PropTypes.any),
+    }),
+    tag: PropTypes.string,
+    editable: PropTypes.bool,
+    encode: PropTypes.bool,
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+};
+Text.displayName = 'Text';

package/dist/esm/components/sharedTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/enhancers/withComponentFactory.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentFactoryReactContext } from '../components/SitecoreContext';
+import { useContext } from 'react';
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+export function withComponentFactory(Component) {
+    /**
+     * @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/withDatasourceCheck.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSitecoreContext } from './withSitecoreContext';
+export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
+/**
+ * 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.
+ */
+export function withDatasourceCheck(options) {
+    return function withDatasourceCheckHoc(Component) {
+        return function WithDatasourceCheck(props) {
+            var _a, _b;
+            const { sitecoreContext } = useSitecoreContext();
+            const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
+            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+        };
+    };
+}

package/dist/esm/enhancers/withEditorChromes.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { resetEditorChromes } from '..';
+export const withEditorChromes = (WrappedComponent) => {
+    class Enhancer extends React.Component {
+        constructor() {
+            super(...arguments);
+            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+        }
+        componentDidUpdate() {
+            resetEditorChromes();
+        }
+        render() {
+            return React.createElement(WrappedComponent, Object.assign({}, this.props));
+        }
+    }
+    return Enhancer;
+};

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+import { isFieldValueEmpty, } from '@sitecore-content-sdk/core/layout';
+/**
+ * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
+ */
+export function withEmptyFieldEditingComponent(FieldComponent, options) {
+    const getEmptyFieldEditingComponent = (props) => {
+        var _a;
+        const { editable = true } = props;
+        if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
+            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+        }
+        return null;
+    };
+    if (options.isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return forwardRef((props, ref) => {
+            const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    return (props) => {
+        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props)))));
+    };
+}

package/dist/esm/enhancers/withFieldMetadata.js

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import { FieldMetadata } from '../components/FieldMetadata';
+/**
+ * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
+ * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ */
+export function withFieldMetadata(FieldComponent, isForwardRef = false) {
+    if (isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return forwardRef((props, ref) => {
+            var _a;
+            const { editable = true } = props;
+            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+            if (!metadata || !editable) {
+                return React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
+            }
+            return (React.createElement(FieldMetadata, { metadata: metadata },
+                React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    return (props) => {
+        var _a;
+        const { editable = true } = props;
+        const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
+        if (!metadata || !editable) {
+            return React.createElement(FieldComponent, Object.assign({}, props));
+        }
+        return (React.createElement(FieldMetadata, { metadata: metadata },
+            React.createElement(FieldComponent, Object.assign({}, props))));
+    };
+}

package/dist/esm/enhancers/withPlaceholder.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { PlaceholderCommon } from '../components/PlaceholderCommon';
+import { withComponentFactory } from './withComponentFactory';
+import { withSitecoreContext } from './withSitecoreContext';
+/**
+ * @param {WithPlaceholderSpec} placeholders
+ * @param {WithPlaceholderOptions} [options]
+ */
+export function withPlaceholder(placeholders, options) {
+    return (WrappedComponent) => {
+        class WithPlaceholder extends PlaceholderCommon {
+            constructor(props) {
+                super(props);
+            }
+            render() {
+                let childProps = Object.assign({}, this.props);
+                delete childProps.componentFactory;
+                if (options && options.propsTransformer) {
+                    childProps = options.propsTransformer(childProps);
+                }
+                if (this.state.error) {
+                    if (childProps.errorComponent) {
+                        return React.createElement(childProps.errorComponent, { error: this.state.error });
+                    }
+                    return (React.createElement("div", { className: "sc-jss-placeholder-error" },
+                        "A rendering error occurred: ",
+                        this.state.error.message,
+                        "."));
+                }
+                const renderingData = options && options.resolvePlaceholderDataFromProps
+                    ? options.resolvePlaceholderDataFromProps(childProps)
+                    : childProps.rendering;
+                const definitelyArrayPlacholders = !Array.isArray(placeholders)
+                    ? [placeholders]
+                    : placeholders;
+                definitelyArrayPlacholders.forEach((placeholder) => {
+                    let placeholderData;
+                    if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.pageEditing);
+                        if (placeholderData) {
+                            childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                    else {
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.pageEditing);
+                        if (placeholderData) {
+                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                });
+                return React.createElement(WrappedComponent, Object.assign({}, childProps));
+            }
+        }
+        WithPlaceholder.propTypes = PlaceholderCommon.propTypes;
+        return withSitecoreContext()(withComponentFactory(WithPlaceholder));
+    };
+}

package/dist/esm/enhancers/withSitecoreContext.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SitecoreContextReactContext } from '../components/SitecoreContext';
+/**
+ * @param {WithSitecoreContextOptions} [options]
+ */
+export function withSitecoreContext(options) {
+    return function withSitecoreContextHoc(Component) {
+        return function WithSitecoreContext(props) {
+            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
+        };
+    };
+}
+/**
+ * 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 Sitecore Editor.
+ * - pageState - Like pageEditing, but a string: normal, preview or edit.
+ * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
+ * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
+ * @param {WithSitecoreContextOptions} [options] hook options
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext } = useSitecoreContext();
+ *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @example
+ * const EditMode = () => {
+ *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
+ *    const onClick = () => updateSitecoreContext({ pageEditing: true });
+ *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @returns {object} { sitecoreContext, updateSitecoreContext }
+ */
+export function useSitecoreContext(options) {
+    const reactContext = React.useContext(SitecoreContextReactContext);
+    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
+    return {
+        sitecoreContext: reactContext.context,
+        updateSitecoreContext: updatable ? reactContext.setContext : undefined,
+    };
+}