@sitecore-content-sdk/react 0.1.0-beta.26 → 0.1.0-beta.28

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/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 core_1 = require("@sitecore-content-sdk/core");
 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: core_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
+        }
         this.state = {
             context,
             setContext: this.setContext,
+            api,
         };
     }
     constructContext(layoutData) {

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 })))));
         };
     };
 }
@@ -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.GraphQLSitePathService = 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.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.Form = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -25,6 +25,8 @@ Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get:
 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");

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/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-content-sdk/core';
 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/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

@@ -4,6 +4,7 @@ export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutSer
 export { GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
 export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
 export { mediaApi } from '@sitecore-content-sdk/core/media';
+export { Form } from './components/Form';
 export { Placeholder } from './components/Placeholder';
 export { Image, } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "0.1.0-beta.26",
+  "version": "0.1.0-beta.28",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -39,6 +39,7 @@
     "@types/mocha": "^10.0.10",
     "@types/node": "22.12.0",
     "@types/prop-types": "^15.7.14",
+    "@types/proxyquire": "^1.3.31",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.0.10",
     "@types/sinon": "^17.0.3",
@@ -51,6 +52,7 @@
     "jsdom": "^26.0.0",
     "mocha": "^11.1.0",
     "nyc": "^17.1.0",
+    "proxyquire": "^2.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sinon": "^19.0.2",
@@ -59,18 +61,19 @@
     "typescript": "~5.7.3"
   },
   "peerDependencies": {
+    "@sitecore-cloudsdk/events": "^0.4.2",
     "@sitecore-feaas/clientside": "^0.5.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "0.1.0-beta.26",
+    "@sitecore-content-sdk/core": "0.1.0-beta.28",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "534f88bad88d588fc2be201ae29c1b065a539e8e",
+  "gitHead": "efa34cf0c8f10c1bbf9db6ce9edb2d1b9bca5977",
   "files": [
     "dist",
     "types"

package/types/components/Form.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+/**
+ * Shape of the Form component rendering data.
+ * FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
+ */
+export type FormProps = {
+    rendering: ComponentRendering;
+    params: {
+        /**
+         * The ID of the Sitecore Form to render.
+         */
+        FormId: string;
+        /**
+         * The CSS class to apply to the form.
+         */
+        styles?: string;
+        /**
+         * The unique identifier of the rendering.
+         */
+        RenderingIdentifier?: string;
+    };
+};
+export declare const Form: ({ params, rendering }: FormProps) => React.JSX.Element;

package/types/components/PlaceholderCommon.d.ts

@@ -68,7 +68,7 @@ export interface PlaceholderProps {
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     static propTypes: {
-        rendering: PropTypes.Validator<NonNullable<NonNullable<ComponentRendering<import("@sitecore-content-sdk/core/layout").ComponentFields> | RouteData<Record<string, Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item | Item[]>>>>>;
+        rendering: PropTypes.Validator<NonNullable<NonNullable<RouteData<Record<string, Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item | Item[]>> | ComponentRendering<import("@sitecore-content-sdk/core/layout").ComponentFields>>>>;
         fields: PropTypes.Requireable<{
             [x: string]: NonNullable<NonNullable<Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item[]>>;
         }>;

package/types/components/SitecoreContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';
+import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
 import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
 export interface SitecoreContextProps {
+    api: SitecoreConfig['api'];
     componentFactory: ComponentFactory;
     layoutData?: LayoutServiceData;
     children: React.ReactNode;
@@ -10,6 +12,7 @@ export interface SitecoreContextProps {
 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,11 +1,12 @@
 import React from 'react';
 import { EnhancedOmit } from '@sitecore-content-sdk/core/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>;
@@ -34,7 +35,4 @@ export declare function withSitecoreContext(options?: WithSitecoreContextOptions
  * }
  * @returns {object} { sitecoreContext, updateSitecoreContext }
  */
-export declare function useSitecoreContext(options?: WithSitecoreContextOptions): {
-    sitecoreContext: SitecoreContextValue;
-    updateSitecoreContext: (value: SitecoreContextValue | import("@sitecore-content-sdk/core/layout").LayoutServiceData) => void;
-};
+export declare function useSitecoreContext(options?: WithSitecoreContextOptions): WithSitecoreContextProps;

package/types/index.d.ts

@@ -5,6 +5,7 @@ export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutSer
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
 export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
 export { mediaApi } from '@sitecore-content-sdk/core/media';
+export { Form } from './components/Form';
 export { ComponentFactory, JssComponentType } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';