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

package/dist/cjs/components/RichText.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextPropTypes = exports.RichText = void 0;
+const react_1 = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+exports.RichText = (0, react_1.forwardRef)((_a, ref) => {
+    var { field, tag, editable } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+    if (!field || (!field.editable && !field.value)) {
+        return null;
+    }
+    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
+            __html: field.editable && editable ? field.editable : field.value,
+        }, ref }, otherProps);
+    return react_1.default.createElement(tag || 'div', htmlProps);
+});
+exports.RichTextPropTypes = {
+    field: prop_types_1.default.shape({
+        value: prop_types_1.default.string,
+        editable: prop_types_1.default.string,
+    }),
+    tag: prop_types_1.default.string,
+    editable: prop_types_1.default.bool,
+};
+exports.RichText.propTypes = exports.RichTextPropTypes;
+exports.RichText.defaultProps = {
+    tag: 'div',
+    editable: true,
+};
+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,83 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+const Text = (_a) => {
+    var { field, tag, editable, encode } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
+    if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+        return null;
+    }
+    // can't use editable value if we want to output unencoded
+    if (!encode) {
+        // eslint-disable-next-line no-param-reassign
+        editable = false;
+    }
+    const isEditable = field.editable && editable;
+    let output = isEditable
+        ? field.editable || ''
+        : field.value === undefined
+            ? ''
+            : field.value;
+    // when string value isn't formatted, we should format line breaks
+    if (!field.editable && typeof output === 'string') {
+        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;
+        }
+    }
+    const setDangerously = isEditable || !encode;
+    let children = null;
+    const htmlProps = Object.assign({}, otherProps);
+    if (setDangerously) {
+        htmlProps.dangerouslySetInnerHTML = {
+            __html: output,
+        };
+    }
+    else {
+        children = output;
+    }
+    if (tag || setDangerously) {
+        return react_1.default.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+};
+exports.Text = Text;
+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]),
+        editable: prop_types_1.default.string,
+    }),
+    tag: prop_types_1.default.string,
+    editable: prop_types_1.default.bool,
+    encode: prop_types_1.default.bool,
+};
+exports.Text.defaultProps = {
+    editable: true,
+    encode: true,
+};
+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,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withComponentFactory = void 0;
+const react_1 = __importDefault(require("react"));
+const SitecoreContext_1 = require("../components/SitecoreContext");
+const react_2 = require("react");
+/**
+ * @param {React.ComponentClass<T> | React.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;
+}
+exports.withComponentFactory = 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.withDatasourceCheck = exports.DefaultEditingError = void 0;
+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;
+        };
+    };
+}
+exports.withDatasourceCheck = withDatasourceCheck;

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;

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 = void 0;
+const react_1 = __importDefault(require("react"));
+const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
+const withComponentFactory_1 = require("./withComponentFactory");
+/**
+ * @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);
+                        if (placeholderData) {
+                            childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                    else {
+                        placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
+                        if (placeholderData) {
+                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                        }
+                    }
+                });
+                return react_1.default.createElement(WrappedComponent, Object.assign({}, childProps));
+            }
+        }
+        WithPlaceholder.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
+        return (0, withComponentFactory_1.withComponentFactory)(WithPlaceholder);
+    };
+}
+exports.withPlaceholder = withPlaceholder;

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSitecoreContext = exports.withSitecoreContext = void 0;
+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 })))));
+        };
+    };
+}
+exports.withSitecoreContext = withSitecoreContext;
+/**
+ * This hook grants acсess to the current Sitecore page context
+ * by default JSS includes the following properties in this context:
+ * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
+ * - pageState - Like pageEditing, but a string: normal, preview or edit.
+ * - 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,
+    };
+}
+exports.useSitecoreContext = useSitecoreContext;

package/dist/cjs/index.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentBuilder = exports.EditFrame = 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.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLDictionaryService = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.NativeDataFetcher = exports.constants = void 0;
+var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
+Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.NativeDataFetcher; } });
+Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
+var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
+Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButton; } });
+Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButtons; } });
+var layout_1 = require("@sitecore-jss/sitecore-jss/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; } });
+var i18n_1 = require("@sitecore-jss/sitecore-jss/i18n");
+Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return i18n_1.GraphQLDictionaryService; } });
+var media_1 = require("@sitecore-jss/sitecore-jss/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; } });
+Object.defineProperty(exports, "getEEMarkup", { enumerable: true, get: function () { return Image_1.getEEMarkup; } });
+var RichText_1 = require("./components/RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+Object.defineProperty(exports, "RichTextPropTypes", { enumerable: true, get: function () { return RichText_1.RichTextPropTypes; } });
+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 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 EditFrame_1 = require("./components/EditFrame");
+Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function () { return EditFrame_1.EditFrame; } });
+var ComponentBuilder_1 = require("./ComponentBuilder");
+Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });

package/dist/cjs/utils.js

@@ -0,0 +1,118 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataFromFields = exports.getAttributesString = exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const style_attr_1 = require("style-attr");
+// https://stackoverflow.com/a/10426674/9324
+const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
+exports.convertKebabCasetoCamelCase = convertKebabCasetoCamelCase;
+/**
+ * https://facebook.github.io/react/docs/dom-elements.html
+ * We are only concerned with style at the moment, which needs to be converted from string to object to satisfy React.
+ * We don't need to convert any other attributes (that we know of), because the placeholder renders them "as-is" by using the special "is" React prop.
+ * For whatever reason though, the "style" prop is still validated as needing to be an object when using the "is" prop, which is why we need to convert from string to object.
+ * @param {string} [style] style
+ * @returns {Array} converted attributes
+ */
+const convertStyleAttribute = (style = '') => {
+    // styleParse converts a style attribute string into an object format
+    const parsedStyle = (0, style_attr_1.parse)(style, { preserveNumbers: true });
+    return Object.keys(parsedStyle).reduce((initialResult, styleKey) => {
+        const result = initialResult;
+        const convertedKey = (0, exports.convertKebabCasetoCamelCase)(styleKey);
+        result[convertedKey] = parsedStyle[styleKey];
+        return result;
+    }, {});
+};
+exports.convertStyleAttribute = convertStyleAttribute;
+const convertAttributesToReactProps = (attributes) => {
+    if (!attributes) {
+        return [];
+    }
+    return Object.keys(attributes).reduce((initialResult, attrName) => {
+        const result = initialResult;
+        switch (attrName) {
+            case 'class': {
+                result.className = attributes.class;
+                break;
+            }
+            case 'style': {
+                result.style = (0, exports.convertStyleAttribute)(attributes.style);
+                break;
+            }
+            default: {
+                result[attrName] = attributes[attrName];
+                break;
+            }
+        }
+        return result;
+    }, {});
+};
+exports.convertAttributesToReactProps = convertAttributesToReactProps;
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * @returns {void}
+ */
+const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};
+exports.addClassName = addClassName;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+const getAttributesString = (attributes) => {
+    const { className } = attributes, restAttributes = __rest(attributes, ["className"]);
+    const attributesEntries = Object.entries(restAttributes).map(([key, value]) => {
+        if (typeof value === 'object') {
+            const valueString = JSON.stringify(value)
+                .replace(/"|{|}/g, '')
+                .replace(/,/g, ';');
+            return `${key}="${valueString}"`;
+        }
+        return `${key}="${value}"`;
+    });
+    if (className) {
+        attributesEntries.push(`class="${className}"`);
+    }
+    return attributesEntries.join(' ');
+};
+exports.getAttributesString = getAttributesString;
+/**
+ * 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;
+        };
+    }
+}