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

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -0,0 +1,65 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withEmptyFieldEditingComponent = withEmptyFieldEditingComponent;
+const react_1 = __importStar(require("react"));
+const layout_1 = require("@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;
+ */
+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 && (0, layout_1.isFieldValueEmpty)(props.field)) {
+            return props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
+        }
+        return null;
+    };
+    if (options.isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return (0, react_1.forwardRef)((props, ref) => {
+            const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+            return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
+        });
+    }
+    // eslint-disable-next-line react/display-name
+    return (props) => {
+        const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
+        return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props)))));
+    };
+}

package/dist/cjs/enhancers/withFieldMetadata.js

@@ -0,0 +1,69 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withFieldMetadata = withFieldMetadata;
+const react_1 = __importStar(require("react"));
+const FieldMetadata_1 = require("../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
+ */
+function withFieldMetadata(FieldComponent, isForwardRef = false) {
+    if (isForwardRef) {
+        // eslint-disable-next-line react/display-name
+        return (0, react_1.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_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
+            }
+            return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+                react_1.default.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_1.default.createElement(FieldComponent, Object.assign({}, props));
+        }
+        return (react_1.default.createElement(FieldMetadata_1.FieldMetadata, { metadata: metadata },
+            react_1.default.createElement(FieldComponent, Object.assign({}, props))));
+    };
+}

package/dist/cjs/enhancers/withPlaceholder.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.withPlaceholder = withPlaceholder;
+const react_1 = __importDefault(require("react"));
+const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
+const withComponentFactory_1 = require("./withComponentFactory");
+const withSitecoreContext_1 = require("./withSitecoreContext");
+/**
+ * @param {WithPlaceholderSpec} placeholders
+ * @param {WithPlaceholderOptions} [options]
+ */
+function withPlaceholder(placeholders, options) {
+    return (WrappedComponent) => {
+        class WithPlaceholder extends PlaceholderCommon_1.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_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 = 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_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.pageEditing);
+                        if (placeholderData) {
+                            childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                    else {
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.pageEditing);
+                        if (placeholderData) {
+                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                });
+                return react_1.default.createElement(WrappedComponent, Object.assign({}, childProps));
+            }
+        }
+        WithPlaceholder.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
+        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentFactory_1.withComponentFactory)(WithPlaceholder));
+    };
+}

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSitecoreContext = withSitecoreContext;
+exports.useSitecoreContext = useSitecoreContext;
+const react_1 = __importDefault(require("react"));
+const SitecoreContext_1 = require("../components/SitecoreContext");
+/**
+ * @param {WithSitecoreContextOptions} [options]
+ */
+function withSitecoreContext(options) {
+    return function withSitecoreContextHoc(Component) {
+        return function WithSitecoreContext(props) {
+            return (react_1.default.createElement(SitecoreContext_1.SitecoreContextReactContext.Consumer, null, (context) => (react_1.default.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, 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 }
+ */
+function useSitecoreContext(options) {
+    const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);
+    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
+    return {
+        sitecoreContext: reactContext.context,
+        updateSitecoreContext: updatable ? reactContext.setContext : undefined,
+    };
+}

package/dist/cjs/index.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.ComponentBuilder = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.ComponentLibraryLayout = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+var core_1 = require("@sitecore-content-sdk/core");
+Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
+Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
+Object.defineProperty(exports, "ClientError", { enumerable: true, get: function () { return core_1.ClientError; } });
+Object.defineProperty(exports, "MemoryCacheClient", { enumerable: true, get: function () { return core_1.MemoryCacheClient; } });
+Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return core_1.NativeDataFetcher; } });
+var editing_1 = require("@sitecore-content-sdk/core/editing");
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return editing_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });
+var layout_1 = require("@sitecore-content-sdk/core/layout");
+Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
+Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getComponentLibraryStylesheetLinks; } });
+Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
+Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
+Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
+Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
+Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
+var i18n_1 = require("@sitecore-content-sdk/core/i18n");
+Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return i18n_1.GraphQLDictionaryService; } });
+var graphql_1 = require("@sitecore-content-sdk/core/graphql");
+Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return graphql_1.DefaultRetryStrategy; } });
+Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return graphql_1.GraphQLRequestClient; } });
+var media_1 = require("@sitecore-content-sdk/core/media");
+Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
+var Placeholder_1 = require("./components/Placeholder");
+Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+var Image_1 = require("./components/Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
+var RichText_1 = require("./components/RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+Object.defineProperty(exports, "RichTextPropTypes", { enumerable: true, get: function () { return RichText_1.RichTextPropTypes; } });
+var Text_1 = require("./components/Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var Date_1 = require("./components/Date");
+Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return Date_1.DateField; } });
+var FEaaSComponent_1 = require("./components/FEaaSComponent");
+Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSComponent_1.FEaaSComponent; } });
+Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
+var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
+Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
+var ComponentLibraryLayout_1 = require("./components/ComponentLibraryLayout");
+Object.defineProperty(exports, "ComponentLibraryLayout", { enumerable: true, get: function () { return ComponentLibraryLayout_1.ComponentLibraryLayout; } });
+var BYOCComponent_1 = require("./components/BYOCComponent");
+Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
+Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });
+var BYOCWrapper_1 = require("./components/BYOCWrapper");
+Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCWrapper; } });
+var Link_1 = require("./components/Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
+Object.defineProperty(exports, "LinkPropTypes", { enumerable: true, get: function () { return Link_1.LinkPropTypes; } });
+var File_1 = require("./components/File");
+Object.defineProperty(exports, "File", { enumerable: true, get: function () { return File_1.File; } });
+var SitecoreContext_1 = require("./components/SitecoreContext");
+Object.defineProperty(exports, "SitecoreContext", { enumerable: true, get: function () { return SitecoreContext_1.SitecoreContext; } });
+Object.defineProperty(exports, "SitecoreContextReactContext", { enumerable: true, get: function () { return SitecoreContext_1.SitecoreContextReactContext; } });
+var withSitecoreContext_1 = require("./enhancers/withSitecoreContext");
+Object.defineProperty(exports, "withSitecoreContext", { enumerable: true, get: function () { return withSitecoreContext_1.withSitecoreContext; } });
+Object.defineProperty(exports, "useSitecoreContext", { enumerable: true, get: function () { return withSitecoreContext_1.useSitecoreContext; } });
+var withEditorChromes_1 = require("./enhancers/withEditorChromes");
+Object.defineProperty(exports, "withEditorChromes", { enumerable: true, get: function () { return withEditorChromes_1.withEditorChromes; } });
+var withPlaceholder_1 = require("./enhancers/withPlaceholder");
+Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
+var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");
+Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return withDatasourceCheck_1.withDatasourceCheck; } });
+var ComponentBuilder_1 = require("./ComponentBuilder");
+Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });
+var withFieldMetadata_1 = require("./enhancers/withFieldMetadata");
+Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return withFieldMetadata_1.withFieldMetadata; } });
+var withEmptyFieldEditingComponent_1 = require("./enhancers/withEmptyFieldEditingComponent");
+Object.defineProperty(exports, "withEmptyFieldEditingComponent", { enumerable: true, get: function () { return withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent; } });
+var EditingScripts_1 = require("./components/EditingScripts");
+Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: function () { return EditingScripts_1.EditingScripts; } });
+var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText; } });
+Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage; } });

package/dist/cjs/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataFromFields = exports.addClassName = void 0;
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * @returns {void}
+ */
+const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};
+exports.addClassName = addClassName;
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = (0, layout_1.getFieldValue)(fields, key);
+        return acc;
+    }, data);
+    return data;
+};
+exports.getDataFromFields = getDataFromFields;

package/dist/esm/ComponentBuilder.js

@@ -0,0 +1,21 @@
+/**
+ * React implementation of component builder class for building components based on the configuration.
+ */
+export class ComponentBuilder {
+    constructor(config) {
+        this.config = config;
+        this.components = new Map([...config.components]);
+    }
+    /**
+     * Creates a new instance of component factory
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory() {
+        return (componentName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            return component;
+        };
+    }
+}

package/dist/esm/components/BYOCComponent.js

@@ -0,0 +1,91 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { getDataFromFields } from '../utils';
+import { MissingComponent } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
+const DefaultErrorComponent = (props) => {
+    var _a;
+    return (React.createElement("div", null,
+        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
+        _a.message,
+        "."));
+};
+/**
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
+ * missing components, and customization of error messages or alternative rendering components.
+ * @param {ByocComponentProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export class BYOCComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error: error };
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    render() {
+        var _a, _b, _c;
+        const props = this.props;
+        if (this.state.error) {
+            return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
+        }
+        const { ComponentName: componentName } = props.params || {};
+        if (!componentName) {
+            const noNameProps = {
+                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
+            };
+            return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
+        }
+        const unRegisteredComponentProps = {
+            rendering: {
+                componentName: componentName,
+            },
+            errorOverride: 'BYOC: This component was not registered.',
+        };
+        const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
+        const ErrorComponent = this.props.errorComponent;
+        let componentProps = {};
+        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
+            try {
+                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
+            }
+            catch (e) {
+                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        // apply props from item datasource
+        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
+        // we render fallback on client to avoid problems with client-only components
+        return (React.createElement(FEAAS.ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
+    }
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ */
+export function fetchBYOCComponentServerProps(params) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
+        return {
+            fetchedData,
+        };
+    });
+}

package/dist/esm/components/BYOCWrapper.js

@@ -0,0 +1,14 @@
+import { BYOCComponent } from './BYOCComponent';
+import React from 'react';
+export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+/**
+ * TODO: remove when framework agnostic forms implemented
+ */
+export const BYOCWrapper = (props) => {
+    var _a, _b, _c;
+    const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
+    const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
+    return (React.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(BYOCComponent, Object.assign({}, props)))));
+};

package/dist/esm/components/ComponentLibraryLayout.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Placeholder } from './Placeholder';
+import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
+import { ComponentLibraryStatus, getComponentLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
+import { EditingScripts } from './EditingScripts';
+export const ComponentLibraryLayout = (layoutData) => {
+    const { route } = layoutData.sitecore;
+    const [renderKey, setRenderKey] = useState(0);
+    const [rootUpdate, setRootUpdate] = useState(null);
+    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
+    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
+    let componentReady = false;
+    // have an up-to-date layout state between re-renders (SSR re-render excluded)
+    const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
+        rootComponent,
+        rootUpdate,
+    ]);
+    route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
+    useEffect(() => {
+        // useEffect will fire when components are ready - and we inform the whole wide world of it too
+        if (!componentReady) {
+            componentReady = true;
+            window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.READY, rootComponent.uid), '*');
+        }
+        const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
+            setRootUpdate(Object.assign({}, updatedRoot));
+            setRenderKey((key) => key + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0) {
+            return;
+        }
+        window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
+    }, [renderKey, rootComponent.uid]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditingScripts, null),
+        React.createElement("main", null,
+            React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
+};

package/dist/esm/components/Date.js

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

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export const DefaultEmptyFieldEditingComponentText = () => {
+    return React.createElement("span", null, "[No text in field]");
+};
+export const DefaultEmptyFieldEditingComponentImage = () => {
+    const inlineStyles = {
+        minWidth: '48px',
+        minHeight: '48px',
+        maxWidth: '400px',
+        maxHeight: '400px',
+        cursor: 'pointer',
+    };
+    return (React.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+};

package/dist/esm/components/EditingScripts.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
+/**
+ * Renders client scripts and data for editing/preview mode in Pages.
+ */
+export const EditingScripts = () => {
+    const { sitecoreContext: { pageState, clientData, clientScripts }, } = useSitecoreContext();
+    // Don't render anything if not in editing/preview mode
+    if (pageState === LayoutServicePageState.Normal ||
+        pageState === LayoutServicePageState.Preview ||
+        !pageState) {
+        return React.createElement(React.Fragment, null);
+    }
+    const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
+    return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
+        clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
+        Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
+};