@sitecore-jss/sitecore-jss-react 22.6.0-canary.9 → 22.7.0-canary.1

package/dist/cjs/components/Form.js

@@ -0,0 +1,77 @@
+"use strict";
+/* eslint-disable prefer-const */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = exports.mockFormModule = void 0;
+const react_1 = __importStar(require("react"));
+const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = sitecore_jss_1.form;
+/**
+ * Mock function to replace the form module functions for `testing` purposes.
+ * @param {any} formModule - The form module to mock
+ */
+const mockFormModule = (formModule) => {
+    executeScriptElements = formModule.executeScriptElements;
+    loadForm = formModule.loadForm;
+    subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
+};
+exports.mockFormModule = mockFormModule;
+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) {
+            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_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/PlaceholderCommon.js

@@ -147,9 +147,13 @@ class PlaceholderCommon extends react_1.default.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // the registered BYOC components are imported using dynamic(), so we need to account for that when passing the isDynamic prop to ErrorBoundary
+                const isByocWrapper = componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME;
+                // all dynamic elements will have a separate render prop
+                const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper }, rendered.props), rendered));
             }
             // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
             if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === layout_1.EditMode.Metadata) {

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/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,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withFieldMetadata = 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.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.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = 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.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Form = 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.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; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
@@ -34,6 +34,8 @@ var media_1 = require("@sitecore-jss/sitecore-jss/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+var Form_1 = require("./components/Form");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
 Object.defineProperty(exports, "getEEMarkup", { enumerable: true, get: function () { return Image_1.getEEMarkup; } });

package/dist/esm/components/Form.js

@@ -0,0 +1,49 @@
+/* eslint-disable prefer-const */
+import React, { useEffect, useRef, useState } from 'react';
+import { form } from '@sitecore-jss/sitecore-jss';
+import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
+/**
+ * Mock function to replace the form module functions for `testing` purposes.
+ * @param {any} formModule - The form module to mock
+ */
+export const mockFormModule = (formModule) => {
+    executeScriptElements = formModule.executeScriptElements;
+    loadForm = formModule.loadForm;
+    subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
+};
+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/PlaceholderCommon.js

@@ -141,9 +141,13 @@ export class PlaceholderCommon extends React.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                // the registered BYOC components are imported using dynamic(), so we need to account for that when passing the isDynamic prop to ErrorBoundary
+                const isByocWrapper = componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME;
+                // all dynamic elements will have a separate render prop
+                const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper }, rendered.props), rendered));
             }
             // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
             if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === EditMode.Metadata) {

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/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

@@ -6,6 +6,7 @@ export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/
 export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { Placeholder } from './components/Placeholder';
+export { Form } from './components/Form';
 export { Image, getEEMarkup, } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';
 export { Text } from './components/Text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.6.0-canary.9",
+  "version": "22.7.0-canary.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -56,19 +56,20 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
+    "@sitecore-cloudsdk/events": "^0.5.0",
     "@sitecore-feaas/clientside": "^0.5.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.6.0-canary.9",
+    "@sitecore-jss/sitecore-jss": "22.7.0-canary.1",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "74a964dcb099331d61768df6668f830ec557d466",
+  "gitHead": "31b27434eca1cdfcc402ad567b7ecff70670f675",
   "files": [
     "dist",
     "types"

package/types/components/Form.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="@types/react" />
+import React from 'react';
+import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
+/**
+ * Mock function to replace the form module functions for `testing` purposes.
+ * @param {any} formModule - The form module to mock
+ */
+export declare const mockFormModule: (formModule: any) => void;
+/**
+ * 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

@@ -28,7 +28,7 @@ export interface PlaceholderProps {
      * Any component or placeholder rendered by a placeholder will have access to this data via `props.fields`.
      */
     fields?: {
-        [name: string]: Field | Item[];
+        [name: string]: Field | Item | Item[];
     };
     /**
      * An object of rendering parameter names/values that are aggregated and propagated through the component tree created by a placeholder.

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

@@ -8,6 +8,7 @@ export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequest
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { ComponentFactory, JssComponentType } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
+export { Form } from './components/Form';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';