@sitecore-jss/sitecore-jss-react 22.5.0-beta.1 → 22.5.0-beta.10

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

@@ -23,14 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 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-jss/sitecore-jss/layout");
 const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
-const EditingScripts_1 = require("./EditingScripts");
-const ComponentLibraryLayout = (layoutData) => {
+9;
+const DesignLibrary = (layoutData) => {
     const { route } = layoutData.sitecore;
+    const isDesignLibrary = layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component;
+    if (!isDesignLibrary) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
     const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
     const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
@@ -46,7 +50,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));
@@ -60,11 +64,10 @@ 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,16 +8,28 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+const editing_2 = require("@sitecore-jss/sitecore-jss/editing");
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * - Renders client scripts and data for editing/preview mode for Pages
+ * - Renders script required for the Design Library (when RenderingType is `component`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
 const EditingScripts = () => {
-    const { sitecoreContext: { pageState, editMode, 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) {
+    var _a;
+    const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = (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)) {
         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)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     if (editMode === layout_1.EditMode.Metadata) {
         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 :

package/dist/cjs/components/SitecoreContext.js

@@ -8,10 +8,12 @@ exports.SitecoreContext = exports.ComponentFactoryReactContext = exports.Sitecor
 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 sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 exports.SitecoreContextReactContext = react_1.default.createContext({});
 exports.ComponentFactoryReactContext = react_1.default.createContext({});
 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: sitecore_jss_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
+        }
         this.state = {
             context,
             setContext: this.setContext,
+            api,
         };
     }
     constructContext(layoutData) {

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withDatasourceCheck = exports.DefaultEditingError = void 0;
 const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 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;
@@ -21,7 +22,9 @@ function withDatasourceCheck(options) {
             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;
+            // If the component is rendered in DesignLibrary, we don't need to check for datasource
+            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === layout_1.RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/cjs/enhancers/withSitecoreContext.js

@@ -12,7 +12,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 })))));
         };
     };
 }
@@ -42,6 +42,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.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = 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.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = 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.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
@@ -15,7 +15,7 @@ Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get
 Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return editing_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, "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, "RestLayoutService", { enumerable: true, get: function () { return layout_1.RestLayoutService; } });
@@ -49,8 +49,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; } });

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

@@ -1,10 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Placeholder } from './Placeholder';
-import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-jss/sitecore-jss/layout';
-import { ComponentLibraryStatus, getComponentLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-jss/sitecore-jss/editing';
-import { EditingScripts } from './EditingScripts';
-export const ComponentLibraryLayout = (layoutData) => {
+import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
+import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-jss/sitecore-jss/editing';
+9;
+export const DesignLibrary = (layoutData) => {
     const { route } = layoutData.sitecore;
+    const isDesignLibrary = layoutData.sitecore.context.renderingType === RenderingType.Component;
+    if (!isDesignLibrary) {
+        return React.createElement(React.Fragment, null);
+    }
     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];
@@ -20,7 +24,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,10 +38,9 @@ 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),
         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/EditingScripts.js

@@ -1,17 +1,29 @@
 import React from 'react';
-import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { EditMode, LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
 import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
+import { getDesignLibraryScriptLink } from '@sitecore-jss/sitecore-jss/editing';
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * - Renders client scripts and data for editing/preview mode for Pages
+ * - Renders script required for the Design Library (when RenderingType is `component`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
 export const EditingScripts = () => {
-    const { sitecoreContext: { pageState, editMode, clientData, clientScripts }, } = useSitecoreContext();
-    // Don't render anything if not in editing/preview mode
-    if (pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview) {
+    var _a;
+    const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = 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)) {
         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((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     if (editMode === EditMode.Metadata) {
         const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
         return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :

package/dist/esm/components/SitecoreContext.js

@@ -2,10 +2,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
+import { constants } from '@sitecore-jss/sitecore-jss';
 export const SitecoreContextReactContext = React.createContext({});
 export const ComponentFactoryReactContext = React.createContext({});
 export class SitecoreContext extends React.Component {
     constructor(props) {
+        var _a, _b, _c, _d;
         super(props);
         /**
          * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -20,9 +22,14 @@ export class SitecoreContext extends React.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: constants.SITECORE_EDGE_URL_DEFAULT }) });
+        }
         this.state = {
             context,
             setContext: this.setContext,
+            api,
         };
     }
     constructContext(layoutData) {

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from './withSitecoreContext';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
@@ -14,7 +15,9 @@ export function withDatasourceCheck(options) {
             var _a, _b;
             const { sitecoreContext } = useSitecoreContext();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
-            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+            // If the component is rendered in DesignLibrary, we don't need to check for datasource
+            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/esm/enhancers/withSitecoreContext.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { SitecoreContextReactContext } from '../components/SitecoreContext';
+import { SitecoreContextReactContext, } from '../components/SitecoreContext';
 /**
  * @param {WithSitecoreContextOptions} [options]
  */
 export function withSitecoreContext(options) {
     return function withSitecoreContextHoc(Component) {
         return function WithSitecoreContext(props) {
-            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
+            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
         };
     };
 }
@@ -35,6 +35,7 @@ export function useSitecoreContext(options) {
     const reactContext = React.useContext(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/esm/index.js

@@ -1,6 +1,6 @@
 export { constants, enableDebug, ClientError, MemoryCacheClient, NativeDataFetcher, } from '@sitecore-jss/sitecore-jss';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/editing';
-export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
@@ -12,7 +12,7 @@ export { Text } from './components/Text';
 export { DateField } from './components/Date';
 export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
 export { FEaaSWrapper } from './components/FEaaSWrapper';
-export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
+export { DesignLibrary } from './components/DesignLibrary';
 export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkPropTypes } from './components/Link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.5.0-beta.1",
+  "version": "22.5.0-beta.10",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.5.0-beta.1",
+    "@sitecore-jss/sitecore-jss": "22.5.0-beta.10",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "e080916b354c36e63f29f01fbcb87688d7f2b4cd",
+  "gitHead": "5219803dfd700b1e2967c02e1b17db07f6f31b45",
   "files": [
     "dist",
     "types"

package/types/components/DesignLibrary.d.ts

@@ -0,0 +1,2 @@
+import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
+export declare const DesignLibrary: (layoutData: LayoutServiceData) => JSX.Element;

package/types/components/EditingScripts.d.ts

@@ -1,5 +1,7 @@
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * - Renders client scripts and data for editing/preview mode for Pages
+ * - Renders script required for the Design Library (when RenderingType is `component`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
 export declare const EditingScripts: () => JSX.Element;

package/types/components/SitecoreContext.d.ts

@@ -6,11 +6,31 @@ import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
 export interface SitecoreContextProps {
     componentFactory: ComponentFactory;
     layoutData?: LayoutServiceData;
+    /**
+     * API settings to connect to Sitecore.
+     */
+    api?: {
+        /**
+         * Sitecore XM Cloud Edge endpoint credentials for Sitecore connection.
+         */
+        edge?: {
+            /**
+             * A unified identifier used to connect and retrieve data from XM Cloud instance
+             */
+            contextId: string;
+            /**
+             * XM Cloud endpoint that the app will communicate and retrieve data from
+             * @default https://edge-platform.sitecorecloud.io
+             */
+            edgeUrl?: string;
+        };
+    };
     children: React.ReactNode;
 }
 export interface SitecoreContextState {
     setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
     context: SitecoreContextValue;
+    api?: SitecoreContextProps['api'];
 }
 export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
 export declare const ComponentFactoryReactContext: React.Context<ComponentFactory>;

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="@types/react" />
 import React from 'react';
 import { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
-import { SitecoreContextValue } from '../components/SitecoreContext';
+import { SitecoreContextState, SitecoreContextValue } from '../components/SitecoreContext';
 export interface WithSitecoreContextOptions {
     updatable?: boolean;
 }
 export interface WithSitecoreContextProps {
     sitecoreContext: SitecoreContextValue;
+    api?: SitecoreContextState['api'];
     updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
 }
 export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
@@ -35,7 +36,4 @@ export declare function withSitecoreContext(options?: WithSitecoreContextOptions
  * }
  * @returns {object} { sitecoreContext, updateSitecoreContext }
  */
-export declare function useSitecoreContext(options?: WithSitecoreContextOptions): {
-    sitecoreContext: SitecoreContextValue;
-    updateSitecoreContext: (value: import("@sitecore-jss/sitecore-jss/layout").LayoutServiceData | SitecoreContextValue) => void;
-};
+export declare function useSitecoreContext(options?: WithSitecoreContextOptions): WithSitecoreContextProps;

package/types/index.d.ts

@@ -1,7 +1,7 @@
 export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, HttpDataFetcher, NativeDataFetcher, NativeDataFetcherError, NativeDataFetcherResponse, NativeDataFetcherConfig, } from '@sitecore-jss/sitecore-jss';
 export { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/editing';
-export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
@@ -14,7 +14,7 @@ export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
 export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
 export { FEaaSWrapper } from './components/FEaaSWrapper';
-export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
+export { DesignLibrary } from './components/DesignLibrary';
 export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';

package/types/components/ComponentLibraryLayout.d.ts

@@ -1,2 +0,0 @@
-import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
-export declare const ComponentLibraryLayout: (layoutData: LayoutServiceData) => JSX.Element;