@sitecore-content-sdk/react 2.1.0-canary.10 → 2.1.0-canary.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/Form.js +20 -12
  2. package/dist/esm/components/Form.js +18 -11
  3. package/package.json +6 -5
  4. package/types/components/Form.d.ts +1 -0
  5. package/types/components/Form.d.ts.map +1 -1
package/dist/cjs/components/Form.js CHANGED
@@ -34,14 +34,16 @@ var __importStar = (this && this.__importStar) || (function () {
34
34
  };
35
35
  })();
36
36
  Object.defineProperty(exports, "__esModule", { value: true });
37
- exports.Form = exports.mockFormModule = void 0;
37
+ exports.Form = exports.mockAnalyticsInternalModule = exports.mockFormModule = void 0;
38
38
  const react_1 = __importStar(require("react"));
39
+ const analyticsCoreInternalModule = __importStar(require("@sitecore-content-sdk/analytics-core/internal"));
39
40
  const content_1 = require("@sitecore-content-sdk/content");
40
41
  const core_1 = require("@sitecore-content-sdk/core");
41
42
  const SitecoreProvider_1 = require("./SitecoreProvider");
42
43
  const ErrorBoundary_1 = require("./ErrorBoundary");
43
44
  const { ERROR_MESSAGES } = core_1.constants;
44
45
  let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = content_1.form;
46
+ let { isBotClientSide } = analyticsCoreInternalModule;
45
47
  /**
46
48
  * Mock function to replace the form module functions for `testing` purposes.
47
49
  * @param {any} formModule - The form module to mock
@@ -52,6 +54,10 @@ const mockFormModule = (formModule) => {
52
54
  subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
53
55
  };
54
56
  exports.mockFormModule = mockFormModule;
57
+ const mockAnalyticsInternalModule = (analyticsCoreInternalModule) => {
58
+ isBotClientSide = analyticsCoreInternalModule.isBotClientSide;
59
+ };
60
+ exports.mockAnalyticsInternalModule = mockAnalyticsInternalModule;
55
61
  /**
56
62
  * The Form component.
57
63
  * @param {FormProps} props incoming props
@@ -65,6 +71,7 @@ const Form = ({ params, rendering }) => {
65
71
  const context = (0, SitecoreProvider_1.useSitecore)();
66
72
  const formRef = (0, react_1.useRef)(null);
67
73
  const isEditing = context.page.mode.isEditing;
74
+ // fetch form content
68
75
  (0, react_1.useEffect)(() => {
69
76
  var _a, _b, _c, _d;
70
77
  if (!content) {
@@ -84,26 +91,27 @@ const Form = ({ params, rendering }) => {
84
91
  setError(true);
85
92
  });
86
93
  }
87
- else {
88
- if (!formRef.current)
89
- return;
90
- // If we are in editing mode, we don't want to send any events
91
- if (!isEditing) {
92
- subscribeToFormSubmitEvent(formRef.current, rendering.uid);
93
- }
94
- executeScriptElements(formRef.current);
95
- }
96
94
  }, [
97
95
  content,
98
96
  isEditing,
99
97
  params.FormId,
100
- rendering.uid,
101
98
  (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId,
102
99
  (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl,
103
100
  ]);
101
+ // Set innerHTML and execute scripts whenever form content changes
102
+ (0, react_1.useEffect)(() => {
103
+ if (!content || !formRef.current)
104
+ return;
105
+ formRef.current.innerHTML = content;
106
+ executeScriptElements(formRef.current);
107
+ // If we are in editing mode, we don't want to send any events
108
+ if (!isEditing && !isBotClientSide()) {
109
+ subscribeToFormSubmitEvent(formRef.current, rendering.uid);
110
+ }
111
+ }, [content, isEditing, rendering.uid]);
104
112
  if (isEditing && error) {
105
113
  return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "There was a problem loading this section" });
106
114
  }
107
- return (react_1.default.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined }));
115
+ return react_1.default.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
108
116
  };
109
117
  exports.Form = Form;
package/dist/esm/components/Form.js CHANGED
@@ -1,11 +1,13 @@
1
1
  'use client';
2
2
  import React, { useEffect, useRef, useState } from 'react';
3
+ import * as analyticsCoreInternalModule from '@sitecore-content-sdk/analytics-core/internal';
3
4
  import { form } from '@sitecore-content-sdk/content';
4
5
  import { constants } from '@sitecore-content-sdk/core';
5
6
  import { useSitecore } from './SitecoreProvider';
6
7
  import { ErrorComponent } from './ErrorBoundary';
7
8
  const { ERROR_MESSAGES } = constants;
8
9
  let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
10
+ let { isBotClientSide } = analyticsCoreInternalModule;
9
11
  /**
10
12
  * Mock function to replace the form module functions for `testing` purposes.
11
13
  * @param {any} formModule - The form module to mock
@@ -15,6 +17,9 @@ export const mockFormModule = (formModule) => {
15
17
  loadForm = formModule.loadForm;
16
18
  subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
17
19
  };
20
+ export const mockAnalyticsInternalModule = (analyticsCoreInternalModule) => {
21
+ isBotClientSide = analyticsCoreInternalModule.isBotClientSide;
22
+ };
18
23
  /**
19
24
  * The Form component.
20
25
  * @param {FormProps} props incoming props
@@ -28,6 +33,7 @@ export const Form = ({ params, rendering }) => {
28
33
  const context = useSitecore();
29
34
  const formRef = useRef(null);
30
35
  const isEditing = context.page.mode.isEditing;
36
+ // fetch form content
31
37
  useEffect(() => {
32
38
  var _a, _b, _c, _d;
33
39
  if (!content) {
@@ -47,25 +53,26 @@ export const Form = ({ params, rendering }) => {
47
53
  setError(true);
48
54
  });
49
55
  }
50
- else {
51
- if (!formRef.current)
52
- return;
53
- // If we are in editing mode, we don't want to send any events
54
- if (!isEditing) {
55
- subscribeToFormSubmitEvent(formRef.current, rendering.uid);
56
- }
57
- executeScriptElements(formRef.current);
58
- }
59
56
  }, [
60
57
  content,
61
58
  isEditing,
62
59
  params.FormId,
63
- rendering.uid,
64
60
  (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId,
65
61
  (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl,
66
62
  ]);
63
+ // Set innerHTML and execute scripts whenever form content changes
64
+ useEffect(() => {
65
+ if (!content || !formRef.current)
66
+ return;
67
+ formRef.current.innerHTML = content;
68
+ executeScriptElements(formRef.current);
69
+ // If we are in editing mode, we don't want to send any events
70
+ if (!isEditing && !isBotClientSide()) {
71
+ subscribeToFormSubmitEvent(formRef.current, rendering.uid);
72
+ }
73
+ }, [content, isEditing, rendering.uid]);
67
74
  if (isEditing && error) {
68
75
  return React.createElement(ErrorComponent, { message: "There was a problem loading this section" });
69
76
  }
70
- return (React.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined }));
77
+ return React.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
71
78
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-content-sdk/react",
3
- "version": "2.1.0-canary.10",
3
+ "version": "2.1.0-canary.12",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -32,6 +32,7 @@
32
32
  "url": "https://github.com/sitecore/content-sdk/issues"
33
33
  },
34
34
  "devDependencies": {
35
+ "@sitecore-content-sdk/analytics-core": "2.1.0-canary.12",
35
36
  "@sitecore-feaas/clientside": "^0.6.0",
36
37
  "@stylistic/eslint-plugin": "^5.2.2",
37
38
  "@testing-library/dom": "^10.4.0",
@@ -77,14 +78,14 @@
77
78
  "react-dom": "^19.2.1"
78
79
  },
79
80
  "dependencies": {
80
- "@sitecore-content-sdk/content": "2.1.0-canary.10",
81
- "@sitecore-content-sdk/core": "2.1.0-canary.10",
82
- "@sitecore-content-sdk/search": "0.2.2-canary.19",
81
+ "@sitecore-content-sdk/content": "2.1.0-canary.12",
82
+ "@sitecore-content-sdk/core": "2.1.0-canary.12",
83
+ "@sitecore-content-sdk/search": "0.2.2-canary.21",
83
84
  "fast-deep-equal": "^3.1.3"
84
85
  },
85
86
  "description": "",
86
87
  "types": "types/index.d.ts",
87
- "gitHead": "f4f6bb8a4ac09e5d721e8a4a361c8ad980997e6c",
88
+ "gitHead": "608209f0b31dffb40d22f154843fbfe21fcd5f92",
88
89
  "files": [
89
90
  "dist",
90
91
  "types",
package/types/components/Form.d.ts CHANGED
@@ -5,6 +5,7 @@ import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
5
5
  * @param {any} formModule - The form module to mock
6
6
  */
7
7
  export declare const mockFormModule: (formModule: any) => void;
8
+ export declare const mockAnalyticsInternalModule: (analyticsCoreInternalModule: any) => void;
8
9
  /**
9
10
  * Shape of the Form component rendering data.
10
11
  * FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
package/types/components/Form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAU1E;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,GAAG,SAI7C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,EAAE;QACN;;WAEG;QACH,MAAM,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,uBAAuB,SAAS,sBA6DpD,CAAC"}
1
+ {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/components/Form.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAY1E;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,YAAY,GAAG,SAI7C,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,6BAA6B,GAAG,SAE3E,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,EAAE;QACN;;WAEG;QACH,MAAM,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;CACH,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,uBAAuB,SAAS,sBA0DpD,CAAC"}