@sitecore-jss/sitecore-jss-react 23.0.0-canary.2 → 23.0.0-canary.21

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 (88) hide show
  1. package/dist/cjs/components/Date.js +3 -5
  2. package/dist/cjs/components/ErrorBoundary.js +18 -2
  3. package/dist/cjs/components/Image.js +5 -10
  4. package/dist/cjs/components/Link.js +5 -8
  5. package/dist/cjs/components/Placeholder.js +3 -10
  6. package/dist/cjs/components/PlaceholderCommon.js +15 -58
  7. package/dist/cjs/components/RichText.js +10 -11
  8. package/dist/cjs/components/SitecoreContext.js +0 -8
  9. package/dist/cjs/components/Text.js +3 -6
  10. package/dist/cjs/enhancers/withDatasourceCheck.js +1 -4
  11. package/dist/cjs/enhancers/withPlaceholder.js +2 -2
  12. package/dist/cjs/enhancers/withSitecoreContext.js +1 -2
  13. package/dist/cjs/index.js +1 -28
  14. package/dist/cjs/utils.js +1 -16
  15. package/dist/esm/components/Date.js +2 -5
  16. package/dist/esm/components/ErrorBoundary.js +18 -2
  17. package/dist/esm/components/Image.js +4 -10
  18. package/dist/esm/components/Link.js +5 -8
  19. package/dist/esm/components/Placeholder.js +3 -10
  20. package/dist/esm/components/PlaceholderCommon.js +16 -59
  21. package/dist/esm/components/RichText.js +11 -12
  22. package/dist/esm/components/SitecoreContext.js +0 -8
  23. package/dist/esm/components/Text.js +2 -6
  24. package/dist/esm/enhancers/withDatasourceCheck.js +1 -4
  25. package/dist/esm/enhancers/withPlaceholder.js +2 -2
  26. package/dist/esm/enhancers/withSitecoreContext.js +2 -3
  27. package/dist/esm/index.js +1 -11
  28. package/dist/esm/utils.js +0 -14
  29. package/package.json +3 -6
  30. package/types/ComponentBuilder.d.ts +0 -1
  31. package/types/components/Date.d.ts +2 -4
  32. package/types/components/EditFrame.d.ts +0 -1
  33. package/types/components/ErrorBoundary.d.ts +0 -1
  34. package/types/components/File.d.ts +0 -1
  35. package/types/components/HiddenRendering.d.ts +0 -1
  36. package/types/components/Image.d.ts +2 -4
  37. package/types/components/Link.d.ts +3 -5
  38. package/types/components/MissingComponent.d.ts +0 -1
  39. package/types/components/Placeholder.d.ts +0 -1
  40. package/types/components/PlaceholderCommon.d.ts +12 -4
  41. package/types/components/RichText.d.ts +3 -5
  42. package/types/components/SitecoreContext.d.ts +0 -21
  43. package/types/components/Text.d.ts +2 -4
  44. package/types/components/VisitorIdentification.d.ts +0 -1
  45. package/types/components/sharedTypes.d.ts +1 -8
  46. package/types/enhancers/withComponentFactory.d.ts +0 -1
  47. package/types/enhancers/withDatasourceCheck.d.ts +0 -1
  48. package/types/enhancers/withEditorChromes.d.ts +0 -1
  49. package/types/enhancers/withPlaceholder.d.ts +0 -1
  50. package/types/enhancers/withSitecoreContext.d.ts +1 -3
  51. package/types/index.d.ts +1 -11
  52. package/types/utils.d.ts +0 -9
  53. package/dist/cjs/components/BYOCComponent.js +0 -122
  54. package/dist/cjs/components/BYOCWrapper.js +0 -18
  55. package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js +0 -22
  56. package/dist/cjs/components/DesignLibrary.js +0 -72
  57. package/dist/cjs/components/EditingScripts.js +0 -47
  58. package/dist/cjs/components/FEaaSComponent.js +0 -151
  59. package/dist/cjs/components/FEaaSWrapper.js +0 -18
  60. package/dist/cjs/components/FieldMetadata.js +0 -29
  61. package/dist/cjs/components/Form.js +0 -80
  62. package/dist/cjs/components/PlaceholderMetadata.js +0 -63
  63. package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js +0 -63
  64. package/dist/cjs/enhancers/withFieldMetadata.js +0 -60
  65. package/dist/esm/components/BYOCComponent.js +0 -91
  66. package/dist/esm/components/BYOCWrapper.js +0 -11
  67. package/dist/esm/components/DefaultEmptyFieldEditingComponents.js +0 -14
  68. package/dist/esm/components/DesignLibrary.js +0 -45
  69. package/dist/esm/components/EditingScripts.js +0 -40
  70. package/dist/esm/components/FEaaSComponent.js +0 -119
  71. package/dist/esm/components/FEaaSWrapper.js +0 -11
  72. package/dist/esm/components/FieldMetadata.js +0 -22
  73. package/dist/esm/components/Form.js +0 -52
  74. package/dist/esm/components/PlaceholderMetadata.js +0 -56
  75. package/dist/esm/enhancers/withEmptyFieldEditingComponent.js +0 -36
  76. package/dist/esm/enhancers/withFieldMetadata.js +0 -33
  77. package/types/components/BYOCComponent.d.ts +0 -91
  78. package/types/components/BYOCWrapper.d.ts +0 -4
  79. package/types/components/DefaultEmptyFieldEditingComponents.d.ts +0 -10
  80. package/types/components/DesignLibrary.d.ts +0 -3
  81. package/types/components/EditingScripts.d.ts +0 -8
  82. package/types/components/FEaaSComponent.d.ts +0 -72
  83. package/types/components/FEaaSWrapper.d.ts +0 -4
  84. package/types/components/FieldMetadata.d.ts +0 -18
  85. package/types/components/Form.d.ts +0 -30
  86. package/types/components/PlaceholderMetadata.d.ts +0 -29
  87. package/types/enhancers/withEmptyFieldEditingComponent.d.ts +0 -28
  88. package/types/enhancers/withFieldMetadata.d.ts +0 -17
@@ -1,40 +0,0 @@
1
- import React from 'react';
2
- import { EditMode, LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
3
- import { useSitecoreContext } from '../enhancers/withSitecoreContext';
4
- import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
5
- import { getDesignLibraryScriptLink } from '@sitecore-jss/sitecore-jss/editing';
6
- /**
7
- * - Renders client scripts and data for editing/preview mode for Pages
8
- * - Renders script required for the Design Library (when RenderingType is `component`).
9
- * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
10
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
11
- */
12
- export const EditingScripts = () => {
13
- var _a;
14
- const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = useSitecoreContext();
15
- // Don't render anything if not in editing/preview mode and rendering type is not component
16
- if (renderingType !== RenderingType.Component &&
17
- (pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview)) {
18
- return React.createElement(React.Fragment, null);
19
- }
20
- // In case of RenderingType.Component - render only the script for Design Libnrary
21
- if (renderingType === RenderingType.Component) {
22
- // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
23
- const now = new Date();
24
- const hour = String(now.getUTCHours()).padStart(2, '0');
25
- const day = String(now.getUTCDate()).padStart(2, '0');
26
- const month = String(now.getUTCMonth() + 1).padStart(2, '0');
27
- const year = String(now.getUTCFullYear());
28
- const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
29
- const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
30
- return (React.createElement(React.Fragment, null,
31
- React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
32
- }
33
- if (editMode === EditMode.Metadata) {
34
- const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
35
- return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
36
- clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
37
- Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
38
- }
39
- return React.createElement(React.Fragment, null);
40
- };
@@ -1,119 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React from 'react';
11
- import * as FEAAS from '@sitecore-feaas/clientside/react';
12
- import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
13
- import { getDataFromFields } from '../utils';
14
- export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
15
- /**
16
- * @param {FEaaSComponentProps} props component props
17
- */
18
- export const FEaaSComponent = (props) => {
19
- var _a, _b, _c, _d, _e, _f, _g;
20
- const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
21
- if (!props.template &&
22
- (!props.params ||
23
- !props.params.LibraryId ||
24
- !props.params.ComponentId ||
25
- !props.params.ComponentVersion ||
26
- !props.params.ComponentHostName ||
27
- !computedRevision)) {
28
- // Missing FEaaS component required props
29
- return null;
30
- }
31
- // combine fetchedData from server with datasource data (if present)
32
- const data = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
33
- // FEaaS control would still be hydrated by client
34
- // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
35
- // this also allows component to fall back to full client-side rendering when template or src is empty
36
- // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
37
- 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: [] }));
38
- };
39
- /**
40
- * Fetches server component props required for server rendering, based on rendering params.
41
- * Component endpoint will either be retrieved from params or from endpointOverride
42
- * @param {FEaaSComponentParams} params component params
43
- * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
44
- * @param {string} [endpointOverride] optional override for component endpoint
45
- */
46
- export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
47
- return __awaiter(this, void 0, void 0, function* () {
48
- const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
49
- const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
50
- let template = '';
51
- let fetchedData = {};
52
- const fetchDataOptions = params.ComponentDataOverride
53
- ? JSON.parse(params.ComponentDataOverride)
54
- : {};
55
- try {
56
- template = yield fetchComponentTemplate(src, params, revisionFallback);
57
- fetchedData = yield fetchData(fetchDataOptions);
58
- }
59
- catch (e) {
60
- console.error(e);
61
- }
62
- return {
63
- fetchedData,
64
- revisionFallback,
65
- template,
66
- };
67
- });
68
- }
69
- /**
70
- * @param {string} src component endpoint
71
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
72
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
73
- */
74
- function fetchComponentTemplate(src, params, revisionFallback) {
75
- return __awaiter(this, void 0, void 0, function* () {
76
- try {
77
- const { template } = yield FEAAS.fetchComponent(src);
78
- return template;
79
- }
80
- catch (error) {
81
- console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
82
- revisionFallback}" is present`);
83
- throw error;
84
- }
85
- });
86
- }
87
- /**
88
- * Fetches component data based on the provided data options.
89
- * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
90
- * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
91
- * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
92
- * or rejects with an error if data fetching encounters an issue.
93
- * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
94
- */
95
- function fetchData(dataOptions) {
96
- return __awaiter(this, void 0, void 0, function* () {
97
- try {
98
- const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
99
- return fetchedData;
100
- }
101
- catch (error) {
102
- console.error('Fetch FEAAS component data settings failed');
103
- throw error;
104
- }
105
- });
106
- }
107
- /**
108
- * Build component endpoint URL from component's params
109
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
110
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
111
- * @returns component endpoint URL
112
- */
113
- export const composeComponentEndpoint = (params, revisionFallback) => {
114
- const revision = params.ComponentRevision || revisionFallback;
115
- const hostname = params.ComponentHostName.startsWith('https://')
116
- ? params.ComponentHostName
117
- : `https://${params.ComponentHostName}`;
118
- return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
119
- };
@@ -1,11 +0,0 @@
1
- import { FEaaSComponent } from './FEaaSComponent';
2
- import React from 'react';
3
- export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
4
- export const FEaaSWrapper = (props) => {
5
- var _a, _b;
6
- const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
7
- const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
8
- return (React.createElement("div", { className: styles, id: id ? id : undefined },
9
- React.createElement("div", { className: "component-content" },
10
- React.createElement(FEaaSComponent, Object.assign({}, props)))));
11
- };
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import { MetadataKind } from '@sitecore-jss/sitecore-jss/editing';
3
- /**
4
- * The component which renders field metadata markup
5
- * @param {FieldMetadataProps} props the props of the component
6
- * @returns metadata markup wrapped around children
7
- */
8
- export const FieldMetadata = (props) => {
9
- const data = JSON.stringify(props.metadata);
10
- const attributes = {
11
- type: 'text/sitecore',
12
- chrometype: 'field',
13
- className: 'scpm',
14
- };
15
- const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
16
- const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
17
- return (React.createElement(React.Fragment, null,
18
- React.createElement("code", Object.assign({}, codeOpenAttributes), data),
19
- props.children,
20
- React.createElement("code", Object.assign({}, codeCloseAttributes))));
21
- };
22
- FieldMetadata.displayName = 'FieldMetadata';
@@ -1,52 +0,0 @@
1
- /* eslint-disable prefer-const */
2
- import React, { useEffect, useRef, useState } from 'react';
3
- import { form } from '@sitecore-jss/sitecore-jss';
4
- import { useSitecoreContext } from '../enhancers/withSitecoreContext';
5
- let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = form;
6
- /**
7
- * Mock function to replace the form module functions for `testing` purposes.
8
- * @param {any} formModule - The form module to mock
9
- */
10
- export const mockFormModule = (formModule) => {
11
- executeScriptElements = formModule.executeScriptElements;
12
- loadForm = formModule.loadForm;
13
- subscribeToFormSubmitEvent = formModule.subscribeToFormSubmitEvent;
14
- };
15
- export const Form = ({ params, rendering }) => {
16
- var _a, _b, _c, _d, _e;
17
- const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
18
- const [error, setError] = useState(false);
19
- const [content, setContent] = useState('');
20
- const context = useSitecoreContext();
21
- const formRef = useRef(null);
22
- const isEditing = context.sitecoreContext.pageEditing;
23
- useEffect(() => {
24
- var _a, _b, _c, _d;
25
- if (!content) {
26
- 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)
27
- .then(setContent)
28
- .catch(() => {
29
- if (isEditing) {
30
- console.error(`Failed to load form with id ${params.FormId}. Check debug logs for sitecore-jss:form for more details.`);
31
- }
32
- setError(true);
33
- });
34
- }
35
- }, [content, params.FormId, (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl, isEditing]);
36
- useEffect(() => {
37
- if (!content || !formRef.current)
38
- return;
39
- formRef.current.innerHTML = content;
40
- executeScriptElements(formRef.current);
41
- // If we are in editing mode, we don't want to send any events
42
- if (!isEditing) {
43
- subscribeToFormSubmitEvent(formRef.current, rendering.uid);
44
- }
45
- }, [content, isEditing, rendering.uid]);
46
- if (isEditing) {
47
- if (error) {
48
- return (React.createElement("div", { className: "sc-jss-placeholder-error" }, "There was a problem loading this section"));
49
- }
50
- }
51
- return React.createElement("div", { ref: formRef, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined });
52
- };
@@ -1,56 +0,0 @@
1
- import React from 'react';
2
- import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-jss/sitecore-jss/layout';
3
- import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@sitecore-jss/sitecore-jss/editing';
4
- /**
5
- * A React component to generate metadata blocks for a placeholder or rendering.
6
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
7
- * or as a rendering to properly render the surrounding code blocks.
8
- * @param {object} props The properties passed to the component.
9
- * @param {ComponentRendering} props.rendering The rendering data.
10
- * @param {string} [props.placeholderName] The name of the placeholder.
11
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
12
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
13
- */
14
- export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
15
- const getCodeBlockAttributes = (kind, id, placeholderName) => {
16
- const chrometype = placeholderName ? 'placeholder' : 'rendering';
17
- const attributes = {
18
- type: 'text/sitecore',
19
- chrometype: chrometype,
20
- className: 'scpm',
21
- kind: kind,
22
- };
23
- if (kind === MetadataKind.Open) {
24
- if (chrometype === 'placeholder' && placeholderName) {
25
- let phId = '';
26
- for (const placeholder of Object.keys(rendering.placeholders)) {
27
- if (placeholderName === placeholder) {
28
- phId = id
29
- ? `${placeholderName}_${id}`
30
- : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
31
- break;
32
- }
33
- // Check if the placeholder is a dynamic placeholder
34
- if (isDynamicPlaceholder(placeholder)) {
35
- const pattern = getDynamicPlaceholderPattern(placeholder);
36
- // Check if the placeholder matches the dynamic placeholder pattern
37
- if (pattern.test(placeholderName)) {
38
- phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
39
- break;
40
- }
41
- }
42
- }
43
- attributes.id = phId;
44
- }
45
- else {
46
- attributes.id = id;
47
- }
48
- }
49
- return attributes;
50
- };
51
- const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
52
- React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
53
- children,
54
- React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
55
- return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
56
- };
@@ -1,36 +0,0 @@
1
- import React, { forwardRef } from 'react';
2
- import { isFieldValueEmpty, } from '@sitecore-jss/sitecore-jss/layout';
3
- /**
4
- * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
5
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
6
- * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
7
- */
8
- export function withEmptyFieldEditingComponent(FieldComponent, options) {
9
- const getEmptyFieldEditingComponent = (props) => {
10
- var _a;
11
- const { editable = true } = props;
12
- if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
13
- const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
14
- let resolvedProps = props;
15
- // If no custom empty field editing component is provided, we can omit unnecessary props
16
- // to do not insert them to html
17
- if (!props.emptyFieldEditingComponent) {
18
- resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
19
- }
20
- return React.createElement(Component, Object.assign({}, resolvedProps));
21
- }
22
- return null;
23
- };
24
- if (options.isForwardRef) {
25
- // eslint-disable-next-line react/display-name
26
- return forwardRef((props, ref) => {
27
- const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
28
- return (emptyFieldEditingComponent || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
29
- });
30
- }
31
- // eslint-disable-next-line react/display-name
32
- return (props) => {
33
- const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
34
- return emptyFieldEditingComponent || React.createElement(FieldComponent, Object.assign({}, props));
35
- };
36
- }
@@ -1,33 +0,0 @@
1
- import React, { forwardRef } from 'react';
2
- import { FieldMetadata } from '../components/FieldMetadata';
3
- /**
4
- * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
5
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
6
- * @param {boolean} isForwardRef set to 'true' if forward reference is needed
7
- */
8
- export function withFieldMetadata(FieldComponent, isForwardRef = false) {
9
- if (isForwardRef) {
10
- // eslint-disable-next-line react/display-name
11
- return forwardRef((props, ref) => {
12
- var _a;
13
- const { editable = true } = props;
14
- const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
15
- if (!metadata || !editable) {
16
- return React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
17
- }
18
- return (React.createElement(FieldMetadata, { metadata: metadata },
19
- React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
20
- });
21
- }
22
- // eslint-disable-next-line react/display-name
23
- return (props) => {
24
- var _a;
25
- const { editable = true } = props;
26
- const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
27
- if (!metadata || !editable) {
28
- return React.createElement(FieldComponent, Object.assign({}, props));
29
- }
30
- return (React.createElement(FieldMetadata, { metadata: metadata },
31
- React.createElement(FieldComponent, Object.assign({}, props))));
32
- };
33
- }
@@ -1,91 +0,0 @@
1
- /// <reference types="@types/react" />
2
- import React from 'react';
3
- import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
4
- import { MissingComponentProps } from './MissingComponent';
5
- import * as FEAAS from '@sitecore-feaas/clientside/react';
6
- export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
7
- /**
8
- * FEaaS props for server rendering.
9
- */
10
- type BYOCServerProps = {
11
- /**
12
- * Fetched data from server component props for server rendering, based on rendering params.
13
- */
14
- fetchedData?: FEAAS.DataScopes;
15
- };
16
- /**
17
- * Data from rendering params on Sitecore's BYOC rendering
18
- */
19
- export type BYOCComponentParams = {
20
- /**
21
- * Name of the component to render
22
- */
23
- ComponentName?: string;
24
- /**
25
- * JSON props to pass into rendered component
26
- */
27
- ComponentProps?: string;
28
- /**
29
- * A JSON object with data sources to be fetched and passed to the component
30
- */
31
- ComponentDataOverride?: string;
32
- /**
33
- * A string with classes that can be used to apply themes, via SXA functionality
34
- */
35
- styles?: string;
36
- RenderingIdentifier?: string;
37
- };
38
- /**
39
- * Props for BYOCComponent. Includes components list to load external components from.
40
- */
41
- export type BYOCComponentClientProps = {
42
- /**
43
- * rendering data
44
- */
45
- rendering: ComponentRendering;
46
- /**
47
- * rendering params
48
- */
49
- params?: BYOCComponentParams;
50
- /**
51
- * fields from datasource items to be passed as rendered child component props
52
- */
53
- fields?: ComponentFields;
54
- /**
55
- * Error component override. To be shown when Renderer or underlying component throws
56
- */
57
- errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
58
- /**
59
- * Override to indicate missing component situations. Would be shown when BYOC component is not registered
60
- * or ComponentName is missing
61
- */
62
- missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
63
- };
64
- export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
65
- type ErrorComponentProps = {
66
- [prop: string]: unknown;
67
- error?: Error;
68
- };
69
- /**
70
- * BYOCComponent facilitate the rendering of external components. It manages potential errors,
71
- * missing components, and customization of error messages or alternative rendering components.
72
- * @param {ByocComponentProps} props component props
73
- * @returns dynamicly rendered component or Missing Component error frame
74
- */
75
- export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
76
- state: Readonly<{
77
- error?: Error;
78
- }>;
79
- constructor(props: BYOCComponentProps);
80
- static getDerivedStateFromError(error: Error): {
81
- error: Error;
82
- };
83
- componentDidCatch(error: Error): void;
84
- render(): React.JSX.Element;
85
- }
86
- /**
87
- * Fetches server component props required for server rendering, based on rendering params.
88
- * @param {BYOCComponentParams} params component params
89
- */
90
- export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCServerProps>;
91
- export {};
@@ -1,4 +0,0 @@
1
- import { BYOCComponentProps } from './BYOCComponent';
2
- import { JSX } from 'react';
3
- export declare const BYOC_WRAPPER_RENDERING_NAME = "BYOCWrapper";
4
- export declare const BYOCWrapper: (props: BYOCComponentProps) => JSX.Element;
@@ -1,10 +0,0 @@
1
- /// <reference types="@types/react" />
2
- import React from 'react';
3
- export declare const DefaultEmptyFieldEditingComponentText: React.FC<{
4
- [key: string]: unknown;
5
- tag?: string;
6
- }>;
7
- export declare const DefaultEmptyFieldEditingComponentImage: React.FC<{
8
- [key: string]: unknown;
9
- className?: string;
10
- }>;
@@ -1,3 +0,0 @@
1
- import { JSX } from 'react';
2
- import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
3
- export declare const DesignLibrary: (layoutData: LayoutServiceData) => JSX.Element;
@@ -1,8 +0,0 @@
1
- import { JSX } from 'react';
2
- /**
3
- * - Renders client scripts and data for editing/preview mode for Pages
4
- * - Renders script required for the Design Library (when RenderingType is `component`).
5
- * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
6
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
7
- */
8
- export declare const EditingScripts: () => JSX.Element;
@@ -1,72 +0,0 @@
1
- import { JSX } from 'react';
2
- import * as FEAAS from '@sitecore-feaas/clientside/react';
3
- import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
4
- export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
5
- /**
6
- * Params from a Sitecore FEaaS rendering
7
- */
8
- export type FEaaSComponentParams = {
9
- LibraryId?: string;
10
- ComponentId?: string;
11
- ComponentVersion?: string;
12
- ComponentRevision?: RevisionType;
13
- ComponentHostName?: string;
14
- ComponentInstanceId?: string;
15
- ComponentDataOverride?: string;
16
- ComponentHTMLOverride?: string;
17
- styles?: string;
18
- RenderingIdentifier?: string;
19
- };
20
- type RevisionType = number | 'staged' | 'published' | 'saved';
21
- /**
22
- * FEaaS props for server rendering.
23
- */
24
- type FEaaSComponentServerProps = {
25
- /**
26
- * HTML template for presentation rendered inside the component
27
- */
28
- template?: string;
29
- /**
30
- * Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
31
- */
32
- revisionFallback?: RevisionType;
33
- /**
34
- * Fetched data from server component props for server rendering, based on rendering params.
35
- */
36
- fetchedData?: FEAAS.DataScopes;
37
- };
38
- /**
39
- * FEaaS props for client side component. Should be used as fallback when server props are not provided.
40
- * Would also be passed on server to avoid hydration issues
41
- */
42
- type FEaaSComponentClientProps = {
43
- /**
44
- * parameters from Sitecore's FEAAS component
45
- */
46
- params?: FEaaSComponentParams;
47
- /**
48
- * field data from component's datasource
49
- */
50
- fields?: ComponentFields;
51
- };
52
- export type FEaaSComponentProps = FEaaSComponentServerProps & FEaaSComponentClientProps;
53
- /**
54
- * @param {FEaaSComponentProps} props component props
55
- */
56
- export declare const FEaaSComponent: (props: FEaaSComponentProps) => JSX.Element;
57
- /**
58
- * Fetches server component props required for server rendering, based on rendering params.
59
- * Component endpoint will either be retrieved from params or from endpointOverride
60
- * @param {FEaaSComponentParams} params component params
61
- * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
62
- * @param {string} [endpointOverride] optional override for component endpoint
63
- */
64
- export declare function fetchFEaaSComponentServerProps(params: FEaaSComponentParams, pageState?: LayoutServicePageState, endpointOverride?: string): Promise<FEaaSComponentProps>;
65
- /**
66
- * Build component endpoint URL from component's params
67
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
68
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
69
- * @returns component endpoint URL
70
- */
71
- export declare const composeComponentEndpoint: (params: FEaaSComponentParams, revisionFallback: RevisionType) => string;
72
- export {};
@@ -1,4 +0,0 @@
1
- import { FEaaSComponentProps } from './FEaaSComponent';
2
- import { JSX } from 'react';
3
- export declare const FEAAS_WRAPPER_RENDERING_NAME = "FEaaSWrapper";
4
- export declare const FEaaSWrapper: (props: FEaaSComponentProps) => JSX.Element;
@@ -1,18 +0,0 @@
1
- /// <reference types="@types/react" />
2
- import React, { JSX } from 'react';
3
- interface FieldMetadataProps {
4
- metadata: {
5
- [key: string]: unknown;
6
- };
7
- children: React.ReactNode;
8
- }
9
- /**
10
- * The component which renders field metadata markup
11
- * @param {FieldMetadataProps} props the props of the component
12
- * @returns metadata markup wrapped around children
13
- */
14
- export declare const FieldMetadata: {
15
- (props: FieldMetadataProps): JSX.Element;
16
- displayName: string;
17
- };
18
- export {};
@@ -1,30 +0,0 @@
1
- /// <reference types="@types/react" />
2
- import React from 'react';
3
- import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
4
- /**
5
- * Mock function to replace the form module functions for `testing` purposes.
6
- * @param {any} formModule - The form module to mock
7
- */
8
- export declare const mockFormModule: (formModule: any) => void;
9
- /**
10
- * Shape of the Form component rendering data.
11
- * FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
12
- */
13
- export type FormProps = {
14
- rendering: ComponentRendering;
15
- params: {
16
- /**
17
- * The ID of the Sitecore Form to render.
18
- */
19
- FormId: string;
20
- /**
21
- * The CSS class to apply to the form.
22
- */
23
- styles?: string;
24
- /**
25
- * The unique identifier of the rendering.
26
- */
27
- RenderingIdentifier?: string;
28
- };
29
- };
30
- export declare const Form: ({ params, rendering }: FormProps) => React.JSX.Element;
@@ -1,29 +0,0 @@
1
- /// <reference types="@types/react" />
2
- import { ReactNode, JSX } from 'react';
3
- import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
4
- /**
5
- * Props containing the component data to render.
6
- */
7
- export interface PlaceholderMetadataProps {
8
- rendering: ComponentRendering;
9
- placeholderName?: string;
10
- children?: ReactNode;
11
- }
12
- export type CodeBlockAttributes = {
13
- type: string;
14
- chrometype: string;
15
- className: string;
16
- kind: string;
17
- id?: string;
18
- };
19
- /**
20
- * A React component to generate metadata blocks for a placeholder or rendering.
21
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
22
- * or as a rendering to properly render the surrounding code blocks.
23
- * @param {object} props The properties passed to the component.
24
- * @param {ComponentRendering} props.rendering The rendering data.
25
- * @param {string} [props.placeholderName] The name of the placeholder.
26
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
27
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
28
- */
29
- export declare const PlaceholderMetadata: ({ rendering, placeholderName, children, }: PlaceholderMetadataProps) => JSX.Element;