@sitecore-content-sdk/react 0.1.0-beta.3 → 0.1.0-beta.31

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 (18) hide show
  1. package/dist/cjs/components/{ComponentLibraryLayout.js → DesignLibrary.js} +5 -5
  2. package/dist/cjs/components/Form.js +75 -0
  3. package/dist/cjs/components/SitecoreContext.js +7 -0
  4. package/dist/cjs/enhancers/withSitecoreContext.js +2 -1
  5. package/dist/cjs/index.js +11 -7
  6. package/dist/esm/components/{ComponentLibraryLayout.js → DesignLibrary.js} +4 -4
  7. package/dist/esm/components/Form.js +38 -0
  8. package/dist/esm/components/SitecoreContext.js +7 -0
  9. package/dist/esm/enhancers/withSitecoreContext.js +3 -2
  10. package/dist/esm/index.js +5 -3
  11. package/package.json +7 -4
  12. package/types/components/DesignLibrary.d.ts +2 -0
  13. package/types/components/Form.d.ts +24 -0
  14. package/types/components/PlaceholderCommon.d.ts +2 -2
  15. package/types/components/SitecoreContext.d.ts +3 -0
  16. package/types/enhancers/withSitecoreContext.d.ts +3 -5
  17. package/types/index.d.ts +5 -3
  18. package/types/components/ComponentLibraryLayout.d.ts +0 -2
package/dist/cjs/components/{ComponentLibraryLayout.js → DesignLibrary.js} RENAMED
@@ -33,13 +33,13 @@ var __importStar = (this && this.__importStar) || (function () {
33
33
  };
34
34
  })();
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
- exports.ComponentLibraryLayout = void 0;
36
+ exports.DesignLibrary = void 0;
37
37
  const react_1 = __importStar(require("react"));
38
38
  const Placeholder_1 = require("./Placeholder");
39
39
  const layout_1 = require("@sitecore-content-sdk/core/layout");
40
40
  const editing_1 = require("@sitecore-content-sdk/core/editing");
41
41
  const EditingScripts_1 = require("./EditingScripts");
42
- const ComponentLibraryLayout = (layoutData) => {
42
+ const DesignLibrary = (layoutData) => {
43
43
  const { route } = layoutData.sitecore;
44
44
  const [renderKey, setRenderKey] = (0, react_1.useState)(0);
45
45
  const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
@@ -56,7 +56,7 @@ const ComponentLibraryLayout = (layoutData) => {
56
56
  // useEffect will fire when components are ready - and we inform the whole wide world of it too
57
57
  if (!componentReady) {
58
58
  componentReady = true;
59
- window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.READY, rootComponent.uid), '*');
59
+ window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
60
60
  }
61
61
  const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
62
62
  setRootUpdate(Object.assign({}, updatedRoot));
@@ -70,11 +70,11 @@ const ComponentLibraryLayout = (layoutData) => {
70
70
  if (renderKey === 0) {
71
71
  return;
72
72
  }
73
- window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
73
+ window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
74
74
  }, [renderKey, rootComponent.uid]);
75
75
  return (react_1.default.createElement(react_1.default.Fragment, null,
76
76
  react_1.default.createElement(EditingScripts_1.EditingScripts, null),
77
77
  react_1.default.createElement("main", null,
78
78
  react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
79
79
  };
80
- exports.ComponentLibraryLayout = ComponentLibraryLayout;
80
+ exports.DesignLibrary = DesignLibrary;
package/dist/cjs/components/Form.js ADDED
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.Form = void 0;
37
+ const react_1 = __importStar(require("react"));
38
+ const form_1 = require("@sitecore-content-sdk/core/form");
39
+ const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
40
+ const Form = ({ params, rendering }) => {
41
+ var _a;
42
+ const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
43
+ const [error, setError] = (0, react_1.useState)(false);
44
+ const [content, setContent] = (0, react_1.useState)('');
45
+ const context = (0, withSitecoreContext_1.useSitecoreContext)();
46
+ const formRef = (0, react_1.useRef)(null);
47
+ const isEditing = context.sitecoreContext.pageEditing;
48
+ (0, react_1.useEffect)(() => {
49
+ var _a, _b, _c, _d;
50
+ if (!content) {
51
+ (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)
52
+ .then(setContent)
53
+ .catch(() => {
54
+ if (isEditing) {
55
+ console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
56
+ }
57
+ setError(true);
58
+ });
59
+ }
60
+ else {
61
+ // If we are in editing mode, we don't want to send any events
62
+ if (!isEditing) {
63
+ (0, form_1.subscribeToFormSubmitEvent)(formRef.current, rendering.uid);
64
+ }
65
+ (0, form_1.executeScriptElements)(formRef.current);
66
+ }
67
+ }, [content]);
68
+ if (isEditing) {
69
+ if (error) {
70
+ return (react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
71
+ }
72
+ }
73
+ 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 }));
74
+ };
75
+ exports.Form = Form;
package/dist/cjs/components/SitecoreContext.js CHANGED
@@ -8,10 +8,12 @@ exports.SitecoreContext = exports.ComponentFactoryReactContext = exports.Sitecor
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const prop_types_1 = __importDefault(require("prop-types"));
10
10
  const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
11
+ const core_1 = require("@sitecore-content-sdk/core");
11
12
  exports.SitecoreContextReactContext = react_1.default.createContext({});
12
13
  exports.ComponentFactoryReactContext = react_1.default.createContext({});
13
14
  class SitecoreContext extends react_1.default.Component {
14
15
  constructor(props) {
16
+ var _a, _b, _c, _d;
15
17
  super(props);
16
18
  /**
17
19
  * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -26,9 +28,14 @@ class SitecoreContext extends react_1.default.Component {
26
28
  });
27
29
  };
28
30
  const context = this.constructContext(props.layoutData);
31
+ let api = props.api;
32
+ 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)) {
33
+ api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: core_1.constants.SITECORE_EDGE_URL_DEFAULT }) });
34
+ }
29
35
  this.state = {
30
36
  context,
31
37
  setContext: this.setContext,
38
+ api,
32
39
  };
33
40
  }
34
41
  constructContext(layoutData) {
package/dist/cjs/enhancers/withSitecoreContext.js CHANGED
@@ -13,7 +13,7 @@ const SitecoreContext_1 = require("../components/SitecoreContext");
13
13
  function withSitecoreContext(options) {
14
14
  return function withSitecoreContextHoc(Component) {
15
15
  return function WithSitecoreContext(props) {
16
- 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 })))));
16
+ 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 })))));
17
17
  };
18
18
  };
19
19
  }
@@ -42,6 +42,7 @@ function useSitecoreContext(options) {
42
42
  const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);
43
43
  const updatable = options === null || options === void 0 ? void 0 : options.updatable;
44
44
  return {
45
+ api: reactContext.api,
45
46
  sitecoreContext: reactContext.context,
46
47
  updateSitecoreContext: updatable ? reactContext.setContext : undefined,
47
48
  };
package/dist/cjs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ 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.DesignLibrary = 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.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
4
4
  var core_1 = require("@sitecore-content-sdk/core");
5
5
  Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
6
6
  Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: functi
12
12
  Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });
13
13
  var layout_1 = require("@sitecore-content-sdk/core/layout");
14
14
  Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
15
- Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getComponentLibraryStylesheetLinks; } });
15
+ Object.defineProperty(exports, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getDesignLibraryStylesheetLinks; } });
16
16
  Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
17
17
  Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
18
18
  Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
@@ -20,11 +20,13 @@ Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: functio
20
20
  Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
21
21
  var i18n_1 = require("@sitecore-content-sdk/core/i18n");
22
22
  Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return i18n_1.GraphQLDictionaryService; } });
23
- var graphql_1 = require("@sitecore-content-sdk/core/graphql");
24
- Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return graphql_1.DefaultRetryStrategy; } });
25
- Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return graphql_1.GraphQLRequestClient; } });
23
+ var client_1 = require("@sitecore-content-sdk/core/client");
24
+ Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return client_1.DefaultRetryStrategy; } });
25
+ Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return client_1.GraphQLRequestClient; } });
26
26
  var media_1 = require("@sitecore-content-sdk/core/media");
27
27
  Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
28
+ var Form_1 = require("./components/Form");
29
+ Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
28
30
  var Placeholder_1 = require("./components/Placeholder");
29
31
  Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
30
32
  var Image_1 = require("./components/Image");
@@ -41,8 +43,8 @@ Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: functi
41
43
  Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
42
44
  var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
43
45
  Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
44
- var ComponentLibraryLayout_1 = require("./components/ComponentLibraryLayout");
45
- Object.defineProperty(exports, "ComponentLibraryLayout", { enumerable: true, get: function () { return ComponentLibraryLayout_1.ComponentLibraryLayout; } });
46
+ var DesignLibrary_1 = require("./components/DesignLibrary");
47
+ Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
46
48
  var BYOCComponent_1 = require("./components/BYOCComponent");
47
49
  Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
48
50
  Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });
@@ -76,3 +78,5 @@ Object.defineProperty(exports, "EditingScripts", { enumerable: true, get: functi
76
78
  var DefaultEmptyFieldEditingComponents_1 = require("./components/DefaultEmptyFieldEditingComponents");
77
79
  Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText; } });
78
80
  Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage; } });
81
+ var site_1 = require("@sitecore-content-sdk/core/site");
82
+ Object.defineProperty(exports, "GraphQLSitePathService", { enumerable: true, get: function () { return site_1.GraphQLSitePathService; } });
package/dist/esm/components/{ComponentLibraryLayout.js → DesignLibrary.js} RENAMED
@@ -1,9 +1,9 @@
1
1
  import React, { useEffect, useMemo, useState } from 'react';
2
2
  import { Placeholder } from './Placeholder';
3
3
  import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
4
- import { ComponentLibraryStatus, getComponentLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
4
+ import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
5
5
  import { EditingScripts } from './EditingScripts';
6
- export const ComponentLibraryLayout = (layoutData) => {
6
+ export const DesignLibrary = (layoutData) => {
7
7
  const { route } = layoutData.sitecore;
8
8
  const [renderKey, setRenderKey] = useState(0);
9
9
  const [rootUpdate, setRootUpdate] = useState(null);
@@ -20,7 +20,7 @@ export const ComponentLibraryLayout = (layoutData) => {
20
20
  // useEffect will fire when components are ready - and we inform the whole wide world of it too
21
21
  if (!componentReady) {
22
22
  componentReady = true;
23
- window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.READY, rootComponent.uid), '*');
23
+ window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
24
24
  }
25
25
  const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
26
26
  setRootUpdate(Object.assign({}, updatedRoot));
@@ -34,7 +34,7 @@ export const ComponentLibraryLayout = (layoutData) => {
34
34
  if (renderKey === 0) {
35
35
  return;
36
36
  }
37
- window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
37
+ window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
38
38
  }, [renderKey, rootComponent.uid]);
39
39
  return (React.createElement(React.Fragment, null,
40
40
  React.createElement(EditingScripts, null),
package/dist/esm/components/Form.js ADDED
@@ -0,0 +1,38 @@
1
+ import React, { useEffect, useRef, useState } from 'react';
2
+ import { executeScriptElements, loadForm, subscribeToFormSubmitEvent, } from '@sitecore-content-sdk/core/form';
3
+ import { useSitecoreContext } from '../enhancers/withSitecoreContext';
4
+ export const Form = ({ params, rendering }) => {
5
+ var _a;
6
+ const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
7
+ const [error, setError] = useState(false);
8
+ const [content, setContent] = useState('');
9
+ const context = useSitecoreContext();
10
+ const formRef = useRef(null);
11
+ const isEditing = context.sitecoreContext.pageEditing;
12
+ useEffect(() => {
13
+ var _a, _b, _c, _d;
14
+ if (!content) {
15
+ 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)
16
+ .then(setContent)
17
+ .catch(() => {
18
+ if (isEditing) {
19
+ console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
20
+ }
21
+ setError(true);
22
+ });
23
+ }
24
+ else {
25
+ // If we are in editing mode, we don't want to send any events
26
+ if (!isEditing) {
27
+ subscribeToFormSubmitEvent(formRef.current, rendering.uid);
28
+ }
29
+ executeScriptElements(formRef.current);
30
+ }
31
+ }, [content]);
32
+ if (isEditing) {
33
+ if (error) {
34
+ return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
35
+ }
36
+ }
37
+ 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 }));
38
+ };
package/dist/esm/components/SitecoreContext.js CHANGED
@@ -2,10 +2,12 @@
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import fastDeepEqual from 'fast-deep-equal/es6/react';
5
+ import { constants } from '@sitecore-content-sdk/core';
5
6
  export const SitecoreContextReactContext = React.createContext({});
6
7
  export const ComponentFactoryReactContext = React.createContext({});
7
8
  export class SitecoreContext extends React.Component {
8
9
  constructor(props) {
10
+ var _a, _b, _c, _d;
9
11
  super(props);
10
12
  /**
11
13
  * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -20,9 +22,14 @@ export class SitecoreContext extends React.Component {
20
22
  });
21
23
  };
22
24
  const context = this.constructContext(props.layoutData);
25
+ let api = props.api;
26
+ 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)) {
27
+ api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: constants.SITECORE_EDGE_URL_DEFAULT }) });
28
+ }
23
29
  this.state = {
24
30
  context,
25
31
  setContext: this.setContext,
32
+ api,
26
33
  };
27
34
  }
28
35
  constructContext(layoutData) {
package/dist/esm/enhancers/withSitecoreContext.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import React from 'react';
2
- import { SitecoreContextReactContext } from '../components/SitecoreContext';
2
+ import { SitecoreContextReactContext, } from '../components/SitecoreContext';
3
3
  /**
4
4
  * @param {WithSitecoreContextOptions} [options]
5
5
  */
6
6
  export function withSitecoreContext(options) {
7
7
  return function withSitecoreContextHoc(Component) {
8
8
  return function WithSitecoreContext(props) {
9
- return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
9
+ 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 })))));
10
10
  };
11
11
  };
12
12
  }
@@ -35,6 +35,7 @@ export function useSitecoreContext(options) {
35
35
  const reactContext = React.useContext(SitecoreContextReactContext);
36
36
  const updatable = options === null || options === void 0 ? void 0 : options.updatable;
37
37
  return {
38
+ api: reactContext.api,
38
39
  sitecoreContext: reactContext.context,
39
40
  updateSitecoreContext: updatable ? reactContext.setContext : undefined,
40
41
  };
package/dist/esm/index.js CHANGED
@@ -1,9 +1,10 @@
1
1
  export { constants, enableDebug, ClientError, MemoryCacheClient, NativeDataFetcher, } from '@sitecore-content-sdk/core';
2
2
  export { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
3
- export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-content-sdk/core/layout';
3
+ export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-content-sdk/core/layout';
4
4
  export { GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
5
- export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-content-sdk/core/graphql';
5
+ export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
6
6
  export { mediaApi } from '@sitecore-content-sdk/core/media';
7
+ export { Form } from './components/Form';
7
8
  export { Placeholder } from './components/Placeholder';
8
9
  export { Image, } from './components/Image';
9
10
  export { RichText, RichTextPropTypes } from './components/RichText';
@@ -11,7 +12,7 @@ export { Text } from './components/Text';
11
12
  export { DateField } from './components/Date';
12
13
  export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
13
14
  export { FEaaSWrapper } from './components/FEaaSWrapper';
14
- export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
15
+ export { DesignLibrary } from './components/DesignLibrary';
15
16
  export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
16
17
  export { BYOCWrapper } from './components/BYOCWrapper';
17
18
  export { Link, LinkPropTypes } from './components/Link';
@@ -26,3 +27,4 @@ export { withFieldMetadata } from './enhancers/withFieldMetadata';
26
27
  export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
27
28
  export { EditingScripts } from './components/EditingScripts';
28
29
  export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';
30
+ export { GraphQLSitePathService, } from '@sitecore-content-sdk/core/site';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-content-sdk/react",
3
- "version": "0.1.0-beta.3",
3
+ "version": "0.1.0-beta.31",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -12,7 +12,7 @@
12
12
  "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig-esm.json",
13
13
  "clean": "del-cli dist types",
14
14
  "lint": "eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
15
- "test": "mocha --require ts-node/register/transpile-only --require ./src/tests/jsdom-setup.ts \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
15
+ "test": "mocha --require ./test/setup.js \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
16
16
  "prepublishOnly": "npm run build",
17
17
  "coverage": "nyc npm test",
18
18
  "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --outputFileStrategy Members --parametersFormat table --readme none --out ../../ref-docs/react src/index.ts --githubPages false"
@@ -39,6 +39,7 @@
39
39
  "@types/mocha": "^10.0.10",
40
40
  "@types/node": "22.12.0",
41
41
  "@types/prop-types": "^15.7.14",
42
+ "@types/proxyquire": "^1.3.31",
42
43
  "@types/react": "^18.2.45",
43
44
  "@types/react-dom": "^18.0.10",
44
45
  "@types/sinon": "^17.0.3",
@@ -51,6 +52,7 @@
51
52
  "jsdom": "^26.0.0",
52
53
  "mocha": "^11.1.0",
53
54
  "nyc": "^17.1.0",
55
+ "proxyquire": "^2.1.3",
54
56
  "react": "^18.2.0",
55
57
  "react-dom": "^18.2.0",
56
58
  "sinon": "^19.0.2",
@@ -59,18 +61,19 @@
59
61
  "typescript": "~5.7.3"
60
62
  },
61
63
  "peerDependencies": {
64
+ "@sitecore-cloudsdk/events": "^0.4.2",
62
65
  "@sitecore-feaas/clientside": "^0.5.19",
63
66
  "react": "^18.2.0",
64
67
  "react-dom": "^18.2.0"
65
68
  },
66
69
  "dependencies": {
67
- "@sitecore-content-sdk/core": "0.1.0-beta.3",
70
+ "@sitecore-content-sdk/core": "0.1.0-beta.31",
68
71
  "fast-deep-equal": "^3.1.3",
69
72
  "prop-types": "^15.8.1"
70
73
  },
71
74
  "description": "",
72
75
  "types": "types/index.d.ts",
73
- "gitHead": "7c21f51b4c212150d4e494ddde4297d8900415c5",
76
+ "gitHead": "ee745f4ab2409caf08bb66bc6eb1eddb39f3868c",
74
77
  "files": [
75
78
  "dist",
76
79
  "types"
package/types/components/DesignLibrary.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { LayoutServiceData } from '@sitecore-content-sdk/core/layout';
2
+ export declare const DesignLibrary: (layoutData: LayoutServiceData) => JSX.Element;
package/types/components/Form.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
3
+ /**
4
+ * Shape of the Form component rendering data.
5
+ * FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
6
+ */
7
+ export type FormProps = {
8
+ rendering: ComponentRendering;
9
+ params: {
10
+ /**
11
+ * The ID of the Sitecore Form to render.
12
+ */
13
+ FormId: string;
14
+ /**
15
+ * The CSS class to apply to the form.
16
+ */
17
+ styles?: string;
18
+ /**
19
+ * The unique identifier of the rendering.
20
+ */
21
+ RenderingIdentifier?: string;
22
+ };
23
+ };
24
+ export declare const Form: ({ params, rendering }: FormProps) => React.JSX.Element;
package/types/components/PlaceholderCommon.d.ts CHANGED
@@ -27,7 +27,7 @@ export interface PlaceholderProps {
27
27
  * Any component or placeholder rendered by a placeholder will have access to this data via `props.fields`.
28
28
  */
29
29
  fields?: {
30
- [name: string]: Field | Item[];
30
+ [name: string]: Field | Item | Item[];
31
31
  };
32
32
  /**
33
33
  * An object of rendering parameter names/values that are aggregated and propagated through the component tree created by a placeholder.
@@ -68,7 +68,7 @@ export interface PlaceholderProps {
68
68
  }
69
69
  export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
70
70
  static propTypes: {
71
- 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[]>>>>>;
71
+ 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>>>>;
72
72
  fields: PropTypes.Requireable<{
73
73
  [x: string]: NonNullable<NonNullable<Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item[]>>;
74
74
  }>;
package/types/components/SitecoreContext.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { ComponentFactory } from './sharedTypes';
4
+ import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
4
5
  import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
5
6
  export interface SitecoreContextProps {
7
+ api: SitecoreConfig['api'];
6
8
  componentFactory: ComponentFactory;
7
9
  layoutData?: LayoutServiceData;
8
10
  children: React.ReactNode;
@@ -10,6 +12,7 @@ export interface SitecoreContextProps {
10
12
  export interface SitecoreContextState {
11
13
  setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
12
14
  context: SitecoreContextValue;
15
+ api?: SitecoreContextProps['api'];
13
16
  }
14
17
  export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
15
18
  export declare const ComponentFactoryReactContext: React.Context<ComponentFactory>;
package/types/enhancers/withSitecoreContext.d.ts CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
3
- import { SitecoreContextValue } from '../components/SitecoreContext';
3
+ import { SitecoreContextState, SitecoreContextValue } from '../components/SitecoreContext';
4
4
  export interface WithSitecoreContextOptions {
5
5
  updatable?: boolean;
6
6
  }
7
7
  export interface WithSitecoreContextProps {
8
8
  sitecoreContext: SitecoreContextValue;
9
+ api?: SitecoreContextState['api'];
9
10
  updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
10
11
  }
11
12
  export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
@@ -34,7 +35,4 @@ export declare function withSitecoreContext(options?: WithSitecoreContextOptions
34
35
  * }
35
36
  * @returns {object} { sitecoreContext, updateSitecoreContext }
36
37
  */
37
- export declare function useSitecoreContext(options?: WithSitecoreContextOptions): {
38
- sitecoreContext: SitecoreContextValue;
39
- updateSitecoreContext: (value: SitecoreContextValue | import("@sitecore-content-sdk/core/layout").LayoutServiceData) => void;
40
- };
38
+ export declare function useSitecoreContext(options?: WithSitecoreContextOptions): WithSitecoreContextProps;
package/types/index.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, NativeDataFetcher, NativeDataFetcherResponse, NativeDataFetcherConfig, } from '@sitecore-content-sdk/core';
2
2
  export { EnhancedOmit } from '@sitecore-content-sdk/core/utils';
3
3
  export { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
4
- export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RouteData, Field, Item, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-content-sdk/core/layout';
4
+ export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RouteData, Field, Item, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-content-sdk/core/layout';
5
5
  export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
6
- export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/graphql';
6
+ export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
7
7
  export { mediaApi } from '@sitecore-content-sdk/core/media';
8
+ export { Form } from './components/Form';
8
9
  export { ComponentFactory, JssComponentType } from './components/sharedTypes';
9
10
  export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
10
11
  export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';
@@ -13,7 +14,7 @@ export { Text, TextField } from './components/Text';
13
14
  export { DateField, DateFieldProps } from './components/Date';
14
15
  export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
15
16
  export { FEaaSWrapper } from './components/FEaaSWrapper';
16
- export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
17
+ export { DesignLibrary } from './components/DesignLibrary';
17
18
  export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
18
19
  export { BYOCWrapper } from './components/BYOCWrapper';
19
20
  export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
@@ -28,3 +29,4 @@ export { withFieldMetadata } from './enhancers/withFieldMetadata';
28
29
  export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
29
30
  export { EditingScripts } from './components/EditingScripts';
30
31
  export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';
32
+ export { GraphQLSitePathService, GraphQLSitePathServiceConfig, } from '@sitecore-content-sdk/core/site';
package/types/components/ComponentLibraryLayout.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { LayoutServiceData } from '@sitecore-content-sdk/core/layout';
2
- export declare const ComponentLibraryLayout: (layoutData: LayoutServiceData) => JSX.Element;