@sitecore-content-sdk/react 1.3.0-canary.9 → 1.4.0-canary.2

package/dist/esm/components/FEaaS/FEaaSSeverWrapper.js

@@ -1,27 +1,19 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React from 'react';
-import { fetchFEaaSComponentServerProps } from './feaas-utils';
-import { FEaaSWrapper } from './FEaaSWrapper';
-import { nonSerializedPlaceholderProps } from '../Placeholder/models';
-/**
- * Server component for FEaaS. Retrieves server props and renders client FEaaSWrapper.
- * @param {FEaaSComponentProps} props incoming props
- * @returns {Promise<JSX.Element>} rendered FEaaSWrapper component
- */
-export const FEaaSServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
-    const isPageStateNormal = (_b = props.page) === null || _b === void 0 ? void 0 : _b.mode.isNormal;
-    // only pass serializable props to the client FEaaS component
-    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !nonSerializedPlaceholderProps.includes(key)));
-    const finalProps = Object.assign(Object.assign({}, (yield fetchFEaaSComponentServerProps(params, isPageStateNormal))), serializableProps);
-    return React.createElement(FEaaSWrapper, Object.assign({}, finalProps));
-});
+import React from 'react';
+import { fetchFEaaSComponentServerProps } from './feaas-utils';
+import { FEaaSWrapper } from './FEaaSWrapper';
+import { nonSerializedPlaceholderProps } from '../Placeholder/models';
+/**
+ * Server component for FEaaS. Retrieves server props and renders client FEaaSWrapper.
+ * @param {FEaaSComponentProps} props incoming props
+ * @returns rendered FEaaSWrapper component
+ * @public
+ */
+export const FEaaSServerWrapper = async (props) => {
+    var _a, _b;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    const isPageStateNormal = (_b = props.page) === null || _b === void 0 ? void 0 : _b.mode.isNormal;
+    // only pass serializable props to the client FEaaS component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (await fetchFEaaSComponentServerProps(params, isPageStateNormal))), serializableProps);
+    return React.createElement(FEaaSWrapper, Object.assign({}, finalProps));
+};

package/dist/esm/components/FEaaS/FEaaSWrapper.js

@@ -1,37 +1,43 @@
-'use client';
-import React from 'react';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-import { getDataFromFields } from '../../utils';
-// FEaaSComponent remains for backward compatibility and testing purposes
-/**
- * @param {FEaaSComponentProps} props component props
- */
-export const FEaaSComponent = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
-    if (!props.template &&
-        (!props.params ||
-            !props.params.LibraryId ||
-            !props.params.ComponentId ||
-            !props.params.ComponentVersion ||
-            !props.params.ComponentHostName ||
-            !computedRevision)) {
-        // Missing FEaaS component required props
-        return null;
-    }
-    // combine fetchedData from server with datasource data (if present)
-    const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
-    // FEaaS control would still be hydrated by client
-    // we pass all the props as a workaround to avoid hydration error, until we convert all Content SDK components to server side
-    // this also allows component to fall back to full client-side rendering when template or src is empty
-    // FEAAS should not fetch anything, since Content SDK does the fetching - so we pass empty array into fetch param
-    return (React.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
-};
-export const FEaaSWrapper = (props) => {
-    var _a, _b;
-    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
-    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
-    return (React.createElement("div", { className: styles, id: id ? id : undefined },
-        React.createElement("div", { className: "component-content" },
-            React.createElement(FEaaSComponent, Object.assign({}, props)))));
-};
+'use client';
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { getDataFromFields } from '../../utils';
+// FEaaSComponent remains for backward compatibility and testing purposes
+/**
+ * @param {FEaaSComponentProps} props component props
+ * @public
+ */
+export const FEaaSComponent = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
+    if (!props.template &&
+        (!props.params ||
+            !props.params.LibraryId ||
+            !props.params.ComponentId ||
+            !props.params.ComponentVersion ||
+            !props.params.ComponentHostName ||
+            !computedRevision)) {
+        // Missing FEaaS component required props
+        return null;
+    }
+    // combine fetchedData from server with datasource data (if present)
+    const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
+    // FEaaS control would still be hydrated by client
+    // we pass all the props as a workaround to avoid hydration error, until we convert all Content SDK components to server side
+    // this also allows component to fall back to full client-side rendering when template or src is empty
+    // FEAAS should not fetch anything, since Content SDK does the fetching - so we pass empty array into fetch param
+    return (React.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_e = (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId) !== null && _e !== void 0 ? _e : '', version: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentVersion, component: (_h = (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentId) !== null && _h !== void 0 ? _h : '', instance: (_j = props.params) === null || _j === void 0 ? void 0 : _j.ComponentInstanceId, revision: computedRevision, fetch: [] }));
+};
+/**
+ * The FEaaSWrapper component.
+ * @param {FEaaSComponentProps} props component props
+ * @public
+ */
+export const FEaaSWrapper = (props) => {
+    var _a, _b;
+    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
+    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
+    return (React.createElement("div", { className: styles, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(FEaaSComponent, Object.assign({}, props)))));
+};

package/dist/esm/components/FEaaS/feaas-utils.js

@@ -1,105 +1,91 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-/**
- * Fetches server component props required for server rendering, based on rendering params.
- * @param {BYOCComponentParams} params component params
- */
-export function fetchBYOCComponentServerProps(params) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const fetchDataOptions = params.ComponentDataOverride
-            ? JSON.parse(params.ComponentDataOverride)
-            : {};
-        const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
-        return {
-            fetchedData,
-        };
-    });
-}
-/**
- * Fetches server component props required for server rendering, based on rendering params.
- * Component endpoint will either be retrieved from params or from endpointOverride
- * @param {FEaaSComponentParams} params component params
- * @param {boolean} [isPageStateNormal] whether page is in normal mode
- * @param {string} [endpointOverride] optional override for component endpoint
- */
-export function fetchFEaaSComponentServerProps(params, isPageStateNormal, endpointOverride) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const revisionFallback = isPageStateNormal ? 'published' : 'staged';
-        const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
-        let template = '';
-        let fetchedData = {};
-        const fetchDataOptions = params.ComponentDataOverride
-            ? JSON.parse(params.ComponentDataOverride)
-            : {};
-        try {
-            template = yield fetchComponentTemplate(src, params, revisionFallback);
-            fetchedData = yield fetchData(fetchDataOptions);
-        }
-        catch (e) {
-            console.error(e);
-        }
-        return {
-            fetchedData,
-            revisionFallback,
-            template,
-        };
-    });
-}
-/**
- * @param {string} src component endpoint
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
- */
-function fetchComponentTemplate(src, params, revisionFallback) {
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            const { template } = yield FEAAS.fetchComponent(src);
-            return template;
-        }
-        catch (error) {
-            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision || revisionFallback}" is present`);
-            throw error;
-        }
-    });
-}
-/**
- * Fetches component data based on the provided data options.
- * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
- * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
- * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
- * or rejects with an error if data fetching encounters an issue.
- * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
- */
-function fetchData(dataOptions) {
-    return __awaiter(this, void 0, void 0, function* () {
-        try {
-            const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
-            return fetchedData;
-        }
-        catch (error) {
-            console.error('Fetch FEAAS component data settings failed');
-            throw error;
-        }
-    });
-}
-/**
- * Build component endpoint URL from component's params
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
- * @returns component endpoint URL
- */
-export const composeComponentEndpoint = (params, revisionFallback) => {
-    const revision = params.ComponentRevision || revisionFallback;
-    const hostname = params.ComponentHostName.startsWith('https://')
-        ? params.ComponentHostName
-        : `https://${params.ComponentHostName}`;
-    return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
-};
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ * @public
+ */
+export async function fetchBYOCComponentServerProps(params) {
+    const fetchDataOptions = params.ComponentDataOverride
+        ? JSON.parse(params.ComponentDataOverride)
+        : {};
+    const fetchedData = await FEAAS.DataSettings.fetch(fetchDataOptions || {});
+    return {
+        fetchedData,
+    };
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * Component endpoint will either be retrieved from params or from endpointOverride
+ * @param {FEaaSComponentParams} params component params
+ * @param {boolean} [isPageStateNormal] whether page is in normal mode
+ * @param {string} [endpointOverride] optional override for component endpoint
+ * @public
+ */
+export async function fetchFEaaSComponentServerProps(params, isPageStateNormal, endpointOverride) {
+    const revisionFallback = isPageStateNormal ? 'published' : 'staged';
+    const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
+    let template = '';
+    let fetchedData = {};
+    const fetchDataOptions = params.ComponentDataOverride
+        ? JSON.parse(params.ComponentDataOverride)
+        : {};
+    try {
+        template = await fetchComponentTemplate(src, params, revisionFallback);
+        fetchedData = await fetchData(fetchDataOptions);
+    }
+    catch (e) {
+        console.error(e);
+    }
+    return {
+        fetchedData,
+        revisionFallback,
+        template,
+    };
+}
+/**
+ * @param {string} src component endpoint
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ */
+async function fetchComponentTemplate(src, params, revisionFallback) {
+    try {
+        const { template } = await FEAAS.fetchComponent(src);
+        return template;
+    }
+    catch (error) {
+        console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision || revisionFallback}" is present`);
+        throw error;
+    }
+}
+/**
+ * Fetches component data based on the provided data options.
+ * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
+ * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
+ * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
+ * or rejects with an error if data fetching encounters an issue.
+ * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
+ */
+async function fetchData(dataOptions) {
+    try {
+        const fetchedData = await FEAAS.DataSettings.fetch(dataOptions || {});
+        return fetchedData;
+    }
+    catch (error) {
+        console.error('Fetch FEAAS component data settings failed');
+        throw error;
+    }
+}
+/**
+ * Build component endpoint URL from component's params
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ * @returns component endpoint URL
+ */
+export const composeComponentEndpoint = (params, revisionFallback) => {
+    var _a;
+    const revision = params.ComponentRevision || revisionFallback;
+    const hostname = ((_a = params.ComponentHostName) === null || _a === void 0 ? void 0 : _a.startsWith('https://'))
+        ? params.ComponentHostName
+        : `https://${params.ComponentHostName}`;
+    return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
+};

package/dist/esm/components/FEaaS/index.js

@@ -1,6 +1,6 @@
-export { FEaaSWrapper, FEaaSComponent } from './FEaaSWrapper';
-export { BYOCWrapper, BYOCComponent } from './BYOCWrapper';
-export { FEAAS_COMPONENT_RENDERING_NAME, BYOC_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, } from './models';
-export { FEaaSServerWrapper } from './FEaaSSeverWrapper';
-export { BYOCServerWrapper } from './BYOCServerWrapper';
-export { fetchFEaaSComponentServerProps, fetchBYOCComponentServerProps } from './feaas-utils';
+export { FEaaSWrapper, FEaaSComponent } from './FEaaSWrapper';
+export { BYOCWrapper, BYOCComponent } from './BYOCWrapper';
+export { FEAAS_COMPONENT_RENDERING_NAME, BYOC_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, } from './models';
+export { FEaaSServerWrapper } from './FEaaSSeverWrapper';
+export { BYOCServerWrapper } from './BYOCServerWrapper';
+export { fetchFEaaSComponentServerProps, fetchBYOCComponentServerProps } from './feaas-utils';

package/dist/esm/components/FEaaS/models.js

@@ -1,4 +1,4 @@
-export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
-export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
-export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
-export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
+export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';

package/dist/esm/components/FieldMetadata.js

@@ -1,22 +1,22 @@
-import React from 'react';
-import { MetadataKind } from '@sitecore-content-sdk/core/editing';
-/**
- * The component which renders field metadata markup
- * @param {FieldMetadataProps} props the props of the component
- * @returns metadata markup wrapped around children
- */
-export const FieldMetadata = (props) => {
-    const data = JSON.stringify(props.metadata);
-    const attributes = {
-        type: 'text/sitecore',
-        chrometype: 'field',
-        className: 'scpm',
-    };
-    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
-    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("code", Object.assign({}, codeOpenAttributes), data),
-        props.children,
-        React.createElement("code", Object.assign({}, codeCloseAttributes))));
-};
-FieldMetadata.displayName = 'FieldMetadata';
+import React from 'react';
+import { MetadataKind } from '@sitecore-content-sdk/core/editing';
+/**
+ * The component which renders field metadata markup
+ * @param {FieldMetadataProps} props the props of the component
+ * @returns metadata markup wrapped around children
+ */
+export const FieldMetadata = (props) => {
+    const data = JSON.stringify(props.metadata);
+    const attributes = {
+        type: 'text/sitecore',
+        chrometype: 'field',
+        className: 'scpm',
+    };
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, codeOpenAttributes), data),
+        props.children,
+        React.createElement("code", Object.assign({}, codeCloseAttributes))));
+};
+FieldMetadata.displayName = 'FieldMetadata';

package/dist/esm/components/File.js

@@ -1,31 +1,36 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-import React from 'react';
-export const File = (_a) => {
-    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
-    const dynamicField = field;
-    if (isFieldValueEmpty(dynamicField)) {
-        return null;
-    }
-    // handle link directly on field for forgetful devs
-    const file = (dynamicField.src ? field : dynamicField.value);
-    if (!file) {
-        return null;
-    }
-    const linkText = !children ? file.title || file.displayName : null;
-    const anchorAttrs = {
-        href: file.src,
-    };
-    return React.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
-};
-File.displayName = 'File';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import React from 'react';
+/**
+ * The File component.
+ * @param {FileProps} props component props
+ * @public
+ */
+export const File = (_a) => {
+    var { field, children } = _a, otherProps = __rest(_a, ["field", "children"]);
+    const dynamicField = field;
+    if (isFieldValueEmpty(dynamicField)) {
+        return null;
+    }
+    // handle link directly on field for forgetful devs
+    const file = (dynamicField.src ? field : dynamicField.value);
+    if (!file) {
+        return null;
+    }
+    const linkText = !children ? file.title || file.displayName : null;
+    const anchorAttrs = {
+        href: file.src,
+    };
+    return React.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+};
+File.displayName = 'File';

package/dist/esm/components/Form.js

@@ -1,54 +1,62 @@
-'use client';
-import React, { useEffect, useRef, useState } from 'react';
-import { form } from '@sitecore-content-sdk/core';
-import { useSitecore } from '../enhancers/withSitecore';
-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 = useSitecore();
-    const formRef = useRef(null);
-    const isEditing = context.page.mode.isEditing;
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (!content) {
-            // Forms must use clientContextId since they are rendered client-side
-            const edgeId = (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId;
-            if (!edgeId) {
-                /* eslint-disable no-console */
-                console.warn('Warning: clientContextId is missing – form cannot be loaded properly on the client');
-                return;
-            }
-            loadForm(edgeId, 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 content-sdk: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 && error) {
-        return (React.createElement("div", { className: "sc-content-sdk-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 }));
-};
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import { form } from '@sitecore-content-sdk/core';
+import { useSitecore } from '../enhancers/withSitecore';
+import { ErrorComponent } from './ErrorBoundary';
+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;
+};
+/**
+ * The Form component.
+ * @param {FormProps} props incoming props
+ * @public
+ */
+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 = useSitecore();
+    const formRef = useRef(null);
+    const isEditing = context.page.mode.isEditing;
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!content) {
+            // Forms must use clientContextId since they are rendered client-side
+            const edgeId = (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId;
+            if (!edgeId) {
+                /* eslint-disable no-console */
+                console.warn('Warning: clientContextId is missing – form cannot be loaded properly on the client');
+                return;
+            }
+            loadForm(edgeId, 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 content-sdk:form for more details.`);
+                }
+                setError(true);
+            });
+        }
+        else {
+            if (!formRef.current)
+                return;
+            // 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 && error) {
+        return React.createElement(ErrorComponent, { message: "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 }));
+};