@sitecore-content-sdk/react 0.1.0-beta.4 → 0.1.0-beta.41

package/README.md

@@ -1,10 +1,11 @@
-# Sitecore JavaScript Rendering SDK for React
+# Sitecore Content SDK for React
 
-This module is provided as a part of Sitecore JavaScript Rendering SDK (JSS). It contains React components and integration for JSS.
+This module is provided as a part of Sitecore Content SDK. It contains React components and integration for Sitecore Content SDK.
 
 <!---
-@TODO: use new name when decided
+@TODO: Update link with appropriate page when avaiable
 -->
-[Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+
+[Documentation](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
 
 [API reference documentation](/ref-docs/react/)

package/dist/cjs/components/{ComponentLibraryLayout.js → DesignLibrary.js}

@@ -33,13 +33,13 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentLibraryLayout = void 0;
+exports.DesignLibrary = void 0;
 const react_1 = __importStar(require("react"));
 const Placeholder_1 = require("./Placeholder");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const EditingScripts_1 = require("./EditingScripts");
-const ComponentLibraryLayout = (layoutData) => {
+const DesignLibrary = (layoutData) => {
     const { route } = layoutData.sitecore;
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
     const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
@@ -56,7 +56,7 @@ const ComponentLibraryLayout = (layoutData) => {
         // useEffect will fire when components are ready - and we inform the whole wide world of it too
         if (!componentReady) {
             componentReady = true;
-            window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.READY, rootComponent.uid), '*');
+            window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
         }
         const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
             setRootUpdate(Object.assign({}, updatedRoot));
@@ -70,11 +70,11 @@ const ComponentLibraryLayout = (layoutData) => {
         if (renderKey === 0) {
             return;
         }
-        window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
+        window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
     }, [renderKey, rootComponent.uid]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(EditingScripts_1.EditingScripts, null),
         react_1.default.createElement("main", null,
             react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
-exports.ComponentLibraryLayout = ComponentLibraryLayout;
+exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/EditingScripts.js

@@ -8,17 +8,30 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
+const editing_2 = require("@sitecore-content-sdk/core/editing");
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when RenderingType is `component`).
+ * @param {EditingScriptsProps} props - The props for the EditingScripts component.
+ * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-const EditingScripts = () => {
-    const { sitecoreContext: { pageState, clientData, clientScripts }, } = (0, withSitecoreContext_1.useSitecoreContext)();
-    // Don't render anything if not in editing/preview mode
-    if (pageState === layout_1.LayoutServicePageState.Normal ||
-        pageState === layout_1.LayoutServicePageState.Preview ||
-        !pageState) {
+const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = (0, withSitecoreContext_1.useSitecoreContext)();
+    // Don't render anything if not in editing/preview mode and rendering type is not component
+    if (renderingType !== layout_1.RenderingType.Component &&
+        (pageState === layout_1.LayoutServicePageState.Normal ||
+            pageState === layout_1.LayoutServicePageState.Preview ||
+            !pageState)) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
+    // In case of RenderingType.Component - render only the script for Design Libnrary
+    if (renderingType === layout_1.RenderingType.Component) {
+        // Add cache buster to the script URL
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     const jssClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getJssPagesClientData)());
     return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
         clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),

package/dist/cjs/components/Form.js

@@ -0,0 +1,75 @@
+"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.Form = void 0;
+const react_1 = __importStar(require("react"));
+const form_1 = require("@sitecore-content-sdk/core/form");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const Form = ({ params, rendering }) => {
+    var _a;
+    const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
+    const [error, setError] = (0, react_1.useState)(false);
+    const [content, setContent] = (0, react_1.useState)('');
+    const context = (0, withSitecoreContext_1.useSitecoreContext)();
+    const formRef = (0, react_1.useRef)(null);
+    const isEditing = context.sitecoreContext.pageEditing;
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (!content) {
+            (0, form_1.loadForm)((_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
+                .then(setContent)
+                .catch(() => {
+                if (isEditing) {
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
+                }
+                setError(true);
+            });
+        }
+        else {
+            // If we are in editing mode, we don't want to send any events
+            if (!isEditing) {
+                (0, form_1.subscribeToFormSubmitEvent)(formRef.current, rendering.uid);
+            }
+            (0, form_1.executeScriptElements)(formRef.current);
+        }
+    }, [content]);
+    if (isEditing) {
+        if (error) {
+            return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
+        }
+    }
+    return (react_1.default.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));
+};
+exports.Form = Form;

package/dist/cjs/components/Placeholder.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = void 0;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("./PlaceholderCommon");
-const withComponentFactory_1 = require("../enhancers/withComponentFactory");
+const withComponentMap_1 = require("../enhancers/withComponentMap");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
@@ -30,7 +30,7 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     render() {
         var _a, _b;
         const childProps = Object.assign({}, this.props);
-        delete childProps.componentFactory;
+        delete childProps.componentMap;
         if (this.state.error) {
             if (childProps.errorComponent) {
                 return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
@@ -68,5 +68,5 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-const PlaceholderWithComponentFactory = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);
-exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentFactory);
+const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
+exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentMap);

package/dist/cjs/components/PlaceholderCommon.js

@@ -18,6 +18,7 @@ exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const MissingComponent_1 = require("./MissingComponent");
+const sharedTypes_1 = require("./sharedTypes");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const core_1 = require("@sitecore-content-sdk/core");
 const HiddenRendering_1 = require("./HiddenRendering");
@@ -102,7 +103,7 @@ class PlaceholderCommon extends react_1.default.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
             if (!component) {
                 if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
                     component = FEaaSComponent_1.FEaaSComponent;
@@ -118,7 +119,7 @@ class PlaceholderCommon extends react_1.default.Component {
                 }
             }
             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.`);
+                console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent;
                 isEmpty = true;
             }
@@ -151,16 +152,22 @@ class PlaceholderCommon extends react_1.default.Component {
     }
     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}`);
+        const componentMap = this.props.componentMap;
+        if (!componentMap || componentMap.size === 0) {
+            console.warn(`No components were available in component map 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);
+        // Render SXA Rendering Variant if available
+        const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+        const component = componentMap.get(renderingDefinition.componentName);
+        if (!component)
+            return null;
+        if (exportName && exportName !== sharedTypes_1.DEFAULT_EXPORT_NAME) {
+            return component[exportName];
         }
-        return componentFactory(renderingDefinition.componentName);
+        return (component.default ||
+            component.Default ||
+            component);
     }
 }
 exports.PlaceholderCommon = PlaceholderCommon;

package/dist/cjs/components/SitecoreContext.js

@@ -3,15 +3,17 @@ 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;
+exports.SitecoreContext = exports.ComponentMapReactContext = 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"));
+const core_1 = require("@sitecore-content-sdk/core");
 exports.SitecoreContextReactContext = react_1.default.createContext({});
-exports.ComponentFactoryReactContext = react_1.default.createContext({});
+exports.ComponentMapReactContext = react_1.default.createContext(new Map());
 class SitecoreContext extends react_1.default.Component {
     constructor(props) {
+        var _a, _b, _c, _d;
         super(props);
         /**
          * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -26,9 +28,14 @@ class SitecoreContext extends react_1.default.Component {
             });
         };
         const context = this.constructContext(props.layoutData);
+        let api = props.api;
+        if (((_b = (_a = props.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId) && !((_d = (_c = props.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)) {
+            api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: core_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
+        }
         this.state = {
             context,
             setContext: this.setContext,
+            api,
         };
     }
     constructContext(layoutData) {
@@ -49,14 +56,14 @@ class SitecoreContext extends react_1.default.Component {
         }
     }
     render() {
-        return (react_1.default.createElement(exports.ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+        return (react_1.default.createElement(exports.ComponentMapReactContext.Provider, { value: this.props.componentMap },
             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,
+    componentMap: prop_types_1.default.instanceOf(Map),
     layoutData: prop_types_1.default.shape({
         sitecore: prop_types_1.default.shape({
             context: prop_types_1.default.any,

package/dist/cjs/components/sharedTypes/components.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_EXPORT_NAME = void 0;
+/**
+ * SXA uses custom default export name
+ */
+exports.DEFAULT_EXPORT_NAME = 'Default';

package/dist/cjs/components/sharedTypes/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./props"), exports);

package/dist/cjs/enhancers/{withComponentFactory.js → withComponentMap.js}

@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withComponentFactory = withComponentFactory;
+exports.withComponentMap = withComponentMap;
 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) {
+function withComponentMap(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 }));
+    function WithComponentMap(props) {
+        const context = (0, react_2.useContext)(SitecoreContext_1.ComponentMapReactContext);
+        return react_1.default.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
     }
-    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+    WithComponentMap.displayName = `withComponentMap(${Component.displayName ||
         Component.name ||
         'Anonymous'})`;
-    return WithComponentFactory;
+    return WithComponentMap;
 }

package/dist/cjs/enhancers/withPlaceholder.js

@@ -6,7 +6,7 @@ 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 withComponentMap_1 = require("./withComponentMap");
 const withSitecoreContext_1 = require("./withSitecoreContext");
 /**
  * @param {WithPlaceholderSpec} placeholders
@@ -20,7 +20,7 @@ function withPlaceholder(placeholders, options) {
             }
             render() {
                 let childProps = Object.assign({}, this.props);
-                delete childProps.componentFactory;
+                delete childProps.componentMap;
                 if (options && options.propsTransformer) {
                     childProps = options.propsTransformer(childProps);
                 }
@@ -58,6 +58,6 @@ function withPlaceholder(placeholders, options) {
             }
         }
         WithPlaceholder.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentFactory_1.withComponentFactory)(WithPlaceholder));
+        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
     };
 }

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -13,7 +13,7 @@ const SitecoreContext_1 = require("../components/SitecoreContext");
 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 })))));
+            return (react_1.default.createElement(SitecoreContext_1.SitecoreContextReactContext.Consumer, null, (context) => (react_1.default.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
         };
     };
 }
@@ -23,7 +23,6 @@ function withSitecoreContext(options) {
  * - 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 = () => {
@@ -42,6 +41,7 @@ function useSitecoreContext(options) {
     const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);
     const updatable = options === null || options === void 0 ? void 0 : options.updatable;
     return {
+        api: reactContext.api,
         sitecoreContext: reactContext.context,
         updateSitecoreContext: updatable ? reactContext.setContext : undefined,
     };

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "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;
+exports.GraphQLSitePathService = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = 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.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.Form = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = 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; } });
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: functi
 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, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getDesignLibraryStylesheetLinks; } });
 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; } });
@@ -20,11 +20,13 @@ Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: functio
 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 client_1 = require("@sitecore-content-sdk/core/client");
+Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return client_1.DefaultRetryStrategy; } });
+Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return client_1.GraphQLRequestClient; } });
 var media_1 = require("@sitecore-content-sdk/core/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
+var Form_1 = require("./components/Form");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
 var Image_1 = require("./components/Image");
@@ -41,8 +43,8 @@ Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: functi
 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 DesignLibrary_1 = require("./components/DesignLibrary");
+Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
 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; } });
@@ -65,8 +67,6 @@ 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");
@@ -76,3 +76,5 @@ Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: functi
 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; } });
+var site_1 = require("@sitecore-content-sdk/core/site");
+Object.defineProperty(exports, "GraphQLSitePathService", { enumerable: true, get: function () { return site_1.GraphQLSitePathService; } });

package/dist/esm/components/{ComponentLibraryLayout.js → DesignLibrary.js}

@@ -1,9 +1,9 @@
 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 { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
 import { EditingScripts } from './EditingScripts';
-export const ComponentLibraryLayout = (layoutData) => {
+export const DesignLibrary = (layoutData) => {
     const { route } = layoutData.sitecore;
     const [renderKey, setRenderKey] = useState(0);
     const [rootUpdate, setRootUpdate] = useState(null);
@@ -20,7 +20,7 @@ export const ComponentLibraryLayout = (layoutData) => {
         // 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), '*');
+            window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
         }
         const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
             setRootUpdate(Object.assign({}, updatedRoot));
@@ -34,7 +34,7 @@ export const ComponentLibraryLayout = (layoutData) => {
         if (renderKey === 0) {
             return;
         }
-        window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
+        window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
     }, [renderKey, rootComponent.uid]);
     return (React.createElement(React.Fragment, null,
         React.createElement(EditingScripts, null),

package/dist/esm/components/EditingScripts.js

@@ -1,18 +1,31 @@
 import React from 'react';
-import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { LayoutServicePageState, RenderingType } from '@sitecore-content-sdk/core/layout';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
 import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
+import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when RenderingType is `component`).
+ * @param {EditingScriptsProps} props - The props for the EditingScripts component.
+ * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-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) {
+export const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecoreContext();
+    // Don't render anything if not in editing/preview mode and rendering type is not component
+    if (renderingType !== RenderingType.Component &&
+        (pageState === LayoutServicePageState.Normal ||
+            pageState === LayoutServicePageState.Preview ||
+            !pageState)) {
         return React.createElement(React.Fragment, null);
     }
+    // In case of RenderingType.Component - render only the script for Design Libnrary
+    if (renderingType === RenderingType.Component) {
+        // Add cache buster to the script URL
+        const scriptUrl = `${getDesignLibraryScriptLink(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     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 }))),

package/dist/esm/components/Form.js

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { executeScriptElements, loadForm, subscribeToFormSubmitEvent, } from '@sitecore-content-sdk/core/form';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+export const Form = ({ params, rendering }) => {
+    var _a;
+    const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
+    const [error, setError] = useState(false);
+    const [content, setContent] = useState('');
+    const context = useSitecoreContext();
+    const formRef = useRef(null);
+    const isEditing = context.sitecoreContext.pageEditing;
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!content) {
+            loadForm((_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
+                .then(setContent)
+                .catch(() => {
+                if (isEditing) {
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
+                }
+                setError(true);
+            });
+        }
+        else {
+            // If we are in editing mode, we don't want to send any events
+            if (!isEditing) {
+                subscribeToFormSubmitEvent(formRef.current, rendering.uid);
+            }
+            executeScriptElements(formRef.current);
+        }
+    }, [content]);
+    if (isEditing) {
+        if (error) {
+            return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
+        }
+    }
+    return (React.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));
+};

package/dist/esm/components/Placeholder.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
-import { withComponentFactory } from '../enhancers/withComponentFactory';
+import { withComponentMap } from '../enhancers/withComponentMap';
 import { PagesEditor } from '@sitecore-content-sdk/core/editing';
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 class PlaceholderComponent extends PlaceholderCommon {
@@ -24,7 +24,7 @@ class PlaceholderComponent extends PlaceholderCommon {
     render() {
         var _a, _b;
         const childProps = Object.assign({}, this.props);
-        delete childProps.componentFactory;
+        delete childProps.componentMap;
         if (this.state.error) {
             if (childProps.errorComponent) {
                 return React.createElement(childProps.errorComponent, { error: this.state.error });
@@ -62,5 +62,5 @@ class PlaceholderComponent extends PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon.propTypes;
-const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
-export const Placeholder = withSitecoreContext()(PlaceholderWithComponentFactory);
+const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
+export const Placeholder = withSitecoreContext()(PlaceholderWithComponentMap);