@sitecore-content-sdk/react 2.5.0 → 2.5.1-canary.20261102062040

package/dist/cjs/enhancers/DatasourceCheckFallback.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatasourceCheckFallback = void 0;
+const react_1 = __importDefault(require("react"));
+const SitecoreProvider_1 = require("../components/SitecoreProvider");
+/**
+ * Resolves the missing-datasource outcome from `SitecoreProvider` context when `page` is not available in props.
+ * Accepts only React elements so it can be rendered from a Server Component.
+ * @deprecated Temporary fallback for callers that omit `page`. Remove this component in version 3.0.0
+ * and make the `page` prop required on `withDatasourceCheck`.
+ * @param {DatasourceCheckFallbackProps} props component props
+ * @returns {JSX.Element | null} the wrapped component in Design Library, the editing error in editing mode, otherwise null
+ */
+const DatasourceCheckFallback = ({ editingError, children, }) => {
+    var _a, _b;
+    const { page } = (0, SitecoreProvider_1.useSitecore)();
+    const isDesignLibrary = (_a = page === null || page === void 0 ? void 0 : page.mode) === null || _a === void 0 ? void 0 : _a.isDesignLibrary;
+    if (isDesignLibrary) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    return ((_b = page === null || page === void 0 ? void 0 : page.mode) === null || _b === void 0 ? void 0 : _b.isEditing) ? react_1.default.createElement(react_1.default.Fragment, null, editingError) : null;
+};
+exports.DatasourceCheckFallback = DatasourceCheckFallback;

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultEditingError = void 0;
 exports.withDatasourceCheck = withDatasourceCheck;
 const react_1 = __importDefault(require("react"));
-const SitecoreProvider_1 = require("./../components/SitecoreProvider");
+const DatasourceCheckFallback_1 = require("./DatasourceCheckFallback");
 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;
 /**
@@ -24,6 +23,10 @@ function hasValidDatasource(rendering) {
 /**
  * Checks whether a Sitecore datasource is present and valid, then renders appropriately depending on page mode (normal vs editing).
  * `isContentResolved: false` is treated the same as a missing datasource. If the property is omitted, the original presence check is used.
+ *
+ * Works in both Server and Client Components. Apply it in the same module as the wrapped component.
+ * When `page` is not passed (e.g. outside a `Placeholder`), the page mode is resolved on the client
+ * from `SitecoreProvider` context. In Server Components, pass `page` to keep the check on the server.
  * @param {WithDatasourceCheckOptions} [options]
  * @returns
  *  The wrapped component, if a datasource is present and valid.
@@ -40,13 +43,24 @@ function hasValidDatasource(rendering) {
  */
 function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
-        return (props) => {
-            var _a;
-            const { page } = (0, SitecoreProvider_1.useSitecore)();
+        return function WithDatasourceCheck(props) {
+            var _a, _b, _c;
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : exports.DefaultEditingError;
+            if (hasValidDatasource(props.rendering)) {
+                return react_1.default.createElement(Component, Object.assign({}, props));
+            }
+            if (!props.page) {
+                console.warn('withDatasourceCheck: The `page` prop was not provided. Pass the `page` prop to components wrapped by `withDatasourceCheck`, especially when using Server Components.');
+                return (react_1.default.createElement(DatasourceCheckFallback_1.DatasourceCheckFallback, { editingError: react_1.default.createElement(EditingError, null) },
+                    react_1.default.createElement(Component, Object.assign({}, props))));
+            }
+            const isDesignLibrary = (_b = props.page.mode) === null || _b === void 0 ? void 0 : _b.isDesignLibrary;
+            const isEditing = (_c = props.page.mode) === null || _c === void 0 ? void 0 : _c.isEditing;
             // If the component is rendered in DesignLibrary, we don't need to check for datasource
-            const isDesignLibrary = page.mode.isDesignLibrary;
-            return isDesignLibrary || hasValidDatasource(props.rendering) ? (react_1.default.createElement(Component, Object.assign({}, props))) : page.mode.isEditing ? (react_1.default.createElement(EditingError, null)) : null;
+            if (isDesignLibrary) {
+                return react_1.default.createElement(Component, Object.assign({}, props));
+            }
+            return isEditing ? react_1.default.createElement(EditingError, null) : null;
         };
     };
 }

package/dist/esm/enhancers/DatasourceCheckFallback.js

@@ -0,0 +1,20 @@
+'use client';
+import React from 'react';
+import { useSitecore } from '../components/SitecoreProvider';
+/**
+ * Resolves the missing-datasource outcome from `SitecoreProvider` context when `page` is not available in props.
+ * Accepts only React elements so it can be rendered from a Server Component.
+ * @deprecated Temporary fallback for callers that omit `page`. Remove this component in version 3.0.0
+ * and make the `page` prop required on `withDatasourceCheck`.
+ * @param {DatasourceCheckFallbackProps} props component props
+ * @returns {JSX.Element | null} the wrapped component in Design Library, the editing error in editing mode, otherwise null
+ */
+export const DatasourceCheckFallback = ({ editingError, children, }) => {
+    var _a, _b;
+    const { page } = useSitecore();
+    const isDesignLibrary = (_a = page === null || page === void 0 ? void 0 : page.mode) === null || _a === void 0 ? void 0 : _a.isDesignLibrary;
+    if (isDesignLibrary) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return ((_b = page === null || page === void 0 ? void 0 : page.mode) === null || _b === void 0 ? void 0 : _b.isEditing) ? React.createElement(React.Fragment, null, editingError) : null;
+};

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,6 +1,5 @@
-'use client';
 import React from 'react';
-import { useSitecore } from './../components/SitecoreProvider';
+import { DatasourceCheckFallback } from './DatasourceCheckFallback';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
  * Returns true when the rendering has a datasource and Layout Service did not report unresolved content.
@@ -16,6 +15,10 @@ function hasValidDatasource(rendering) {
 /**
  * Checks whether a Sitecore datasource is present and valid, then renders appropriately depending on page mode (normal vs editing).
  * `isContentResolved: false` is treated the same as a missing datasource. If the property is omitted, the original presence check is used.
+ *
+ * Works in both Server and Client Components. Apply it in the same module as the wrapped component.
+ * When `page` is not passed (e.g. outside a `Placeholder`), the page mode is resolved on the client
+ * from `SitecoreProvider` context. In Server Components, pass `page` to keep the check on the server.
  * @param {WithDatasourceCheckOptions} [options]
  * @returns
  *  The wrapped component, if a datasource is present and valid.
@@ -32,13 +35,24 @@ function hasValidDatasource(rendering) {
  */
 export function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
-        return (props) => {
-            var _a;
-            const { page } = useSitecore();
+        return function WithDatasourceCheck(props) {
+            var _a, _b, _c;
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
+            if (hasValidDatasource(props.rendering)) {
+                return React.createElement(Component, Object.assign({}, props));
+            }
+            if (!props.page) {
+                console.warn('withDatasourceCheck: The `page` prop was not provided. Pass the `page` prop to components wrapped by `withDatasourceCheck`, especially when using Server Components.');
+                return (React.createElement(DatasourceCheckFallback, { editingError: React.createElement(EditingError, null) },
+                    React.createElement(Component, Object.assign({}, props))));
+            }
+            const isDesignLibrary = (_b = props.page.mode) === null || _b === void 0 ? void 0 : _b.isDesignLibrary;
+            const isEditing = (_c = props.page.mode) === null || _c === void 0 ? void 0 : _c.isEditing;
             // If the component is rendered in DesignLibrary, we don't need to check for datasource
-            const isDesignLibrary = page.mode.isDesignLibrary;
-            return isDesignLibrary || hasValidDatasource(props.rendering) ? (React.createElement(Component, Object.assign({}, props))) : page.mode.isEditing ? (React.createElement(EditingError, null)) : null;
+            if (isDesignLibrary) {
+                return React.createElement(Component, Object.assign({}, props));
+            }
+            return isEditing ? React.createElement(EditingError, null) : null;
         };
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "2.5.0",
+  "version": "2.5.1-canary.20261102062040",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,

package/types/enhancers/DatasourceCheckFallback.d.ts

@@ -0,0 +1,21 @@
+import React, { JSX } from 'react';
+export interface DatasourceCheckFallbackProps {
+    /**
+     * Element rendered in editing mode.
+     */
+    editingError: React.ReactNode;
+    /**
+     * Wrapped component element, rendered in Design Library mode.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Resolves the missing-datasource outcome from `SitecoreProvider` context when `page` is not available in props.
+ * Accepts only React elements so it can be rendered from a Server Component.
+ * @deprecated Temporary fallback for callers that omit `page`. Remove this component in version 3.0.0
+ * and make the `page` prop required on `withDatasourceCheck`.
+ * @param {DatasourceCheckFallbackProps} props component props
+ * @returns {JSX.Element | null} the wrapped component in Design Library, the editing error in editing mode, otherwise null
+ */
+export declare const DatasourceCheckFallback: ({ editingError, children, }: DatasourceCheckFallbackProps) => JSX.Element | null;
+//# sourceMappingURL=DatasourceCheckFallback.d.ts.map

package/types/enhancers/DatasourceCheckFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatasourceCheckFallback.d.ts","sourceRoot":"","sources":["../../src/enhancers/DatasourceCheckFallback.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGnC,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,6BAGrC,4BAA4B,KAAG,GAAG,CAAC,OAAO,GAAG,IAS/C,CAAC"}

package/types/enhancers/withDatasourceCheck.d.ts

@@ -1,8 +1,15 @@
 import React, { JSX } from 'react';
+import { Page } from '@sitecore-content-sdk/content/client';
 import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
 export declare const DefaultEditingError: () => JSX.Element;
 export interface WithDatasourceCheckProps {
     rendering: ComponentRendering;
+    /**
+     * Page data, supplied by `Placeholder`. Used to detect editing and Design Library modes.
+     * When omitted, the page mode is read from `SitecoreProvider` context on the client.
+     * This prop will be required in version 3.0.0, when `DatasourceCheckFallback` is removed.
+     */
+    page?: Page;
 }
 export interface WithDatasourceCheckOptions {
     /**
@@ -14,6 +21,10 @@ export interface WithDatasourceCheckOptions {
 /**
  * Checks whether a Sitecore datasource is present and valid, then renders appropriately depending on page mode (normal vs editing).
  * `isContentResolved: false` is treated the same as a missing datasource. If the property is omitted, the original presence check is used.
+ *
+ * Works in both Server and Client Components. Apply it in the same module as the wrapped component.
+ * When `page` is not passed (e.g. outside a `Placeholder`), the page mode is resolved on the client
+ * from `SitecoreProvider` context. In Server Components, pass `page` to keep the check on the server.
  * @param {WithDatasourceCheckOptions} [options]
  * @returns
  *  The wrapped component, if a datasource is present and valid.

package/types/enhancers/withDatasourceCheck.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withDatasourceCheck.d.ts","sourceRoot":"","sources":["../../src/enhancers/withDatasourceCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG1E,eAAO,MAAM,mBAAmB,QAAO,GAAG,CAAC,OAI1C,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;CAC3E;AAeD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,0BAA0B,IAC/B,cAAc,SAAS,wBAAwB,EACpF,WAAW,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,MAEtC,OAAO,cAAc,wBAchC"}
+{"version":3,"file":"withDatasourceCheck.d.ts","sourceRoot":"","sources":["../../src/enhancers/withDatasourceCheck.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAG1E,eAAO,MAAM,mBAAmB,QAAO,GAAG,CAAC,OAI1C,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,kBAAkB,CAAC;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;CAC3E;AAeD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,0BAA0B,IAC/B,cAAc,SAAS,wBAAwB,EACpF,WAAW,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,MAEV,OAAO,cAAc,KAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6BjF"}