@sitecore-jss/sitecore-jss-react 23.0.0-canary.8 → 23.0.0

package/dist/esm/components/PlaceholderCommon.js

@@ -1,14 +1,9 @@
 import React from 'react';
 import { MissingComponent } from './MissingComponent';
-import { EditMode, isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-jss/sitecore-jss/layout';
+import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-jss/sitecore-jss/layout';
 import { constants } from '@sitecore-jss/sitecore-jss';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering } from './HiddenRendering';
-import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
-import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
-import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
-import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
 import ErrorBoundary from './ErrorBoundary';
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
@@ -19,13 +14,12 @@ export class PlaceholderCommon extends React.Component {
         this.updateKeyAttributes = this.updateKeyAttributes.bind(this);
         this.createRawElement = this.createRawElement.bind(this);
     }
-    static getPlaceholderDataFromRenderingData(rendering, name, editMode) {
+    static getPlaceholderDataFromRenderingData(rendering, name) {
         let result;
-        let phName = name.slice();
+        const phName = name.slice();
         /**
          * Process (SXA) dynamic placeholders
          * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
-         * For Metadata EditMode, we need to keep the raw placeholder name in place.
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
@@ -33,13 +27,8 @@ export class PlaceholderCommon extends React.Component {
                     ? getDynamicPlaceholderPattern(placeholder)
                     : null;
                 if (patternPlaceholder && patternPlaceholder.test(phName)) {
-                    if (editMode === EditMode.Metadata) {
-                        phName = placeholder;
-                    }
-                    else {
-                        rendering.placeholders[phName] = rendering.placeholders[placeholder];
-                        delete rendering.placeholders[placeholder];
-                    }
+                    rendering.placeholders[phName] = rendering.placeholders[placeholder];
+                    delete rendering.placeholders[placeholder];
                 }
             });
         }
@@ -72,11 +61,10 @@ export class PlaceholderCommon extends React.Component {
         });
     }
     getComponentsForRenderingData(placeholderData) {
-        var _a;
         const { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent, passThroughComponentProps, modifyComponentProps, } = this.props;
         const transformedComponents = placeholderData
             .map((rendering, index) => {
-            var _a, _b;
+            var _a;
             const key = rendering.uid
                 ? rendering.uid
                 : `component-${index}`;
@@ -100,21 +88,6 @@ export class PlaceholderCommon extends React.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
-            if (!component) {
-                if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
-                    component = FEaaSComponent;
-                }
-                else if (componentRendering.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
-                    component = FEaaSWrapper;
-                }
-                else if (componentRendering.componentName === BYOC_COMPONENT_RENDERING_NAME) {
-                    component = BYOCComponent;
-                }
-                else if (componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME) {
-                    component = BYOCWrapper;
-                }
-            }
             if (!component) {
                 console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent;
@@ -133,26 +106,15 @@ export class PlaceholderCommon extends React.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
-                // the registered BYOC components are imported using dynamic(), so we need to account for that when passing the isDynamic prop to ErrorBoundary
-                const isByocWrapper = componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME;
                 // all dynamic elements will have a separate render prop
                 const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: this.props.disableSuspense }, rendered.props), rendered));
-            }
-            // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
-            if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === EditMode.Metadata) {
-                return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent, disableSuspense: this.props.disableSuspense }, rendered.props), rendered));
             }
             return rendered;
         })
             .filter((element) => element); // remove nulls
-        if (((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode) === EditMode.Metadata) {
-            return [
-                React.createElement(PlaceholderMetadata, { key: this.props.rendering.uid, placeholderName: name, rendering: this.props.rendering }, transformedComponents),
-            ];
-        }
         return transformedComponents;
     }
     getComponentForRendering(renderingDefinition) {
@@ -184,6 +146,8 @@ export class PlaceholderCommon extends React.Component {
         if (!Array.isArray(attributes) && attributes && attributes.chrometype === 'placeholder') {
             props.phkey = elem.attributes.key; // props that get rendered as dom attribute names need to be lowercase, otherwise React complains.
             props.ref = this.addRef; // only need ref for placeholder containers, trying to add it to other components (e.g. stateless components) may result in a warning.
+            // EE may mutate chrome
+            props.suppressHydrationWarning = true;
         }
         return React.createElement(elem.name, props);
     }

package/dist/esm/components/RichText.js

@@ -9,21 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import React, { forwardRef, useMemo } from 'react';
 import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
-export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line react/display-name
-forwardRef((_a, ref) => {
+export const RichText = forwardRef((_a, ref) => {
     var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
-    if (!field || (!field.editable && isFieldValueEmpty(field))) {
+    const html = field && (field.editable && editable ? field.editable : field.value);
+    // Keep the object reference stable across re-renders when the html is unchanged,
+    // since React DOM compares dangerouslySetInnerHTML by reference and re-sets
+    // innerHTML (recreating all child DOM nodes) whenever it changes.
+    const dangerouslySetInnerHTML = useMemo(() => (html !== undefined && html !== '' ? { __html: html } : undefined), [html]);
+    if (!field || (!field.editable && isFieldValueEmpty(field)) || !dangerouslySetInnerHTML) {
         return null;
     }
-    const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
-            __html: field.editable && editable ? field.editable : field.value,
-        }, ref }, otherProps);
+    const htmlProps = Object.assign(Object.assign({ dangerouslySetInnerHTML,
+        ref }, (field.editable && editable ? { suppressHydrationWarning: true } : {})), otherProps);
     return React.createElement(tag || 'div', htmlProps);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+});
 RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreContext.js

@@ -1,12 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
-import { constants } from '@sitecore-jss/sitecore-jss';
 export const SitecoreContextReactContext = React.createContext({});
 export const ComponentFactoryReactContext = React.createContext({});
 export class SitecoreContext extends React.Component {
     constructor(props) {
-        var _a, _b, _c, _d;
         super(props);
         /**
          * Update context state. Value can be @type {LayoutServiceData} which will be automatically transformed
@@ -21,14 +18,9 @@ export class SitecoreContext extends React.Component {
             });
         };
         const context = this.constructContext(props.layoutData);
-        let api = props.api;
-        if (((_b = (_a = props.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.contextId) && !((_d = (_c = props.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)) {
-            api = Object.assign(Object.assign({}, props.api), { edge: Object.assign(Object.assign({}, props.api.edge), { edgeUrl: constants.SITECORE_EDGE_URL_DEFAULT }) });
-        }
         this.state = {
             context,
             setContext: this.setContext,
-            api,
         };
     }
     constructContext(layoutData) {

package/dist/esm/components/Text.js

@@ -10,18 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
-export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+export const Text = (_a) => {
     var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
     if (!field || (!field.editable && isFieldValueEmpty(field))) {
         return null;
     }
     // can't use editable value if we want to output unencoded
     if (!encode) {
-        // eslint-disable-next-line no-param-reassign
         editable = false;
     }
     const isEditable = field.editable && editable;
@@ -62,5 +58,5 @@ export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     else {
         return React.createElement(React.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+};
 Text.displayName = 'Text';

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from './withSitecoreContext';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
@@ -15,9 +14,7 @@ export function withDatasourceCheck(options) {
             var _a, _b;
             const { sitecoreContext } = useSitecoreContext();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
-            // If the component is rendered in DesignLibrary, we don't need to check for datasource
-            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === RenderingType.Component;
-            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/esm/enhancers/withPlaceholder.js

@@ -36,13 +36,13 @@ export function withPlaceholder(placeholders, options) {
                 definitelyArrayPlacholders.forEach((placeholder) => {
                     let placeholderData;
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder, childProps.sitecoreContext.editMode);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder.placeholder);
                         if (placeholderData) {
                             childProps[placeholder.prop] = this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                     else {
-                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.sitecoreContext.editMode);
+                        placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder);
                         if (placeholderData) {
                             childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
                         }

package/dist/esm/enhancers/withSitecoreContext.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { SitecoreContextReactContext, } from '../components/SitecoreContext';
+import { SitecoreContextReactContext } from '../components/SitecoreContext';
 /**
  * @param {WithSitecoreContextOptions} [options]
  */
 export function withSitecoreContext(options) {
     return function withSitecoreContextHoc(Component) {
         return function WithSitecoreContext(props) {
-            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, api: context.api, updateSitecoreContext: options && options.updatable && context.setContext })))));
+            return (React.createElement(SitecoreContextReactContext.Consumer, null, (context) => (React.createElement(Component, Object.assign({}, props, { sitecoreContext: context.context, updateSitecoreContext: options && options.updatable && context.setContext })))));
         };
     };
 }
@@ -35,7 +35,6 @@ export function useSitecoreContext(options) {
     const reactContext = React.useContext(SitecoreContextReactContext);
     const updatable = options === null || options === void 0 ? void 0 : options.updatable;
     return {
-        api: reactContext.api,
         sitecoreContext: reactContext.context,
         updateSitecoreContext: updatable ? reactContext.setContext : undefined,
     };

package/dist/esm/index.js

@@ -1,21 +1,15 @@
 export { constants, enableDebug, ClientError, MemoryCacheClient, NativeDataFetcher, } from '@sitecore-jss/sitecore-jss';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/editing';
-export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { Placeholder } from './components/Placeholder';
-export { Form } from './components/Form';
 export { Image, getEEMarkup, } from './components/Image';
 export { RichText } from './components/RichText';
 export { Text } from './components/Text';
 export { DateField } from './components/Date';
-export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
-export { FEaaSWrapper } from './components/FEaaSWrapper';
-export { DesignLibrary } from './components/DesignLibrary';
-export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
-export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link } from './components/Link';
 export { File } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
@@ -26,7 +20,3 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
 export { EditFrame } from './components/EditFrame';
 export { ComponentBuilder } from './ComponentBuilder';
-export { withFieldMetadata } from './enhancers/withFieldMetadata';
-export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
-export { EditingScripts } from './components/EditingScripts';
-export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';

package/dist/esm/utils.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 import { parse as styleParse } from 'style-attr';
 // https://stackoverflow.com/a/10426674/9324
 export const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -94,16 +93,3 @@ export const getAttributesString = (attributes) => {
     }
     return attributesEntries.join(' ');
 };
-/**
- * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
- * @param {ComponentFields} fields field collection from Sitecore
- * @returns JSON object that can be used as props
- */
-export const getDataFromFields = (fields) => {
-    let data = {};
-    data = Object.entries(fields).reduce((acc, [key]) => {
-        acc[key] = getFieldValue(fields, key);
-        return acc;
-    }, data);
-    return data;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "23.0.0-canary.8",
+  "version": "23.0.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -26,7 +26,6 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-feaas/clientside": "^0.6.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -55,19 +54,17 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
-    "@sitecore-cloudsdk/events": "^0.5.2",
-    "@sitecore-feaas/clientside": "^0.6.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "23.0.0-canary.8",
+    "@sitecore-jss/sitecore-jss": "23.0.0",
     "fast-deep-equal": "^3.1.3",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "5290a2b2dcb1c0c0dc11f1b9cf97803dcd93441a",
+  "gitHead": "df3fb1582d7a53c14a3e3901d3561436f5110130",
   "files": [
     "dist",
     "types"

package/types/ComponentBuilder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 import { ComponentFactory } from './components/sharedTypes';
 /**

package/types/components/Date.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
-import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
-export interface DateFieldProps extends EditableFieldProps<DateFieldProps> {
+export interface DateFieldProps extends EditableFieldProps {
     /** The date field data. */
     [htmlAttributes: string]: unknown;
-    field: FieldMetadata & {
+    field: {
         value?: string;
         editable?: string;
     };

package/types/components/EditFrame.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React, { PropsWithChildren } from 'react';
 import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/editing';
 export interface EditFrameProps {

package/types/components/ErrorBoundary.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React, { ReactNode } from 'react';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { SitecoreContextValue } from './SitecoreContext';

package/types/components/File.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React from 'react';
 export interface FileFieldValue {
     [propName: string]: unknown;

package/types/components/HiddenRendering.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="@types/react" />
 import React from 'react';
 export declare const HiddenRendering: () => React.JSX.Element;

package/types/components/Image.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
-import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
 export interface ImageFieldValue {
     [attributeName: string]: unknown;
     src?: string;
@@ -27,10 +25,10 @@ export interface ImageSizeParameters {
     /** Image scale. Defaults to 1.0 */
     sc?: number;
 }
-export interface ImageProps extends EditableFieldProps<ImageProps> {
+export interface ImageProps extends EditableFieldProps {
     [attributeName: string]: unknown;
     /** Image field data (consistent with other field types) */
-    field?: (ImageField | ImageFieldValue) & FieldMetadata;
+    field?: ImageField | ImageFieldValue;
     /**
      * Parameters that will be attached to Sitecore media URLs
      */

package/types/components/Link.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="@types/react" />
 import React, { RefAttributes } from 'react';
 import { EditableFieldProps } from './sharedTypes';
-import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
 export interface LinkFieldValue {
     [attributeName: string]: unknown;
     href?: string;
@@ -19,13 +17,13 @@ export interface LinkField {
     editableFirstPart?: string;
     editableLastPart?: string;
 }
-export type LinkProps = EditableFieldProps<LinkProps> & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
+export type LinkProps = EditableFieldProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
     /** The link field data. */
-    field: (LinkField | LinkFieldValue) & FieldMetadata;
+    field: LinkField | LinkFieldValue;
     /**
      * Displays a link text ('description' in Sitecore) even when children exist
      * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
      */
     showLinkTextWithChildrenPresent?: boolean;
 };
-export declare const Link: React.FC<LinkProps>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/types/components/MissingComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React from 'react';
 export interface MissingComponentProps {
     rendering?: {

package/types/components/Placeholder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { PlaceholderProps } from './PlaceholderCommon';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';

package/types/components/PlaceholderCommon.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="@types/react" />
 import React, { ComponentType } from 'react';
 import { ComponentFactory } from './sharedTypes';
-import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering, EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { SitecoreContextValue } from './SitecoreContext';
 type ErrorComponentProps = {
     [prop: string]: unknown;
@@ -87,7 +86,7 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
         error?: Error;
     }>;
     constructor(props: T);
-    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, editMode?: EditMode): (ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | HtmlElementRendering)[];
+    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string): (ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | HtmlElementRendering)[];
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;
@@ -96,7 +95,9 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
     } | {
         styles: string;
     };
-    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.JSX.Element[];
+    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.ReactElement<{
+        [attr: string]: unknown;
+    }, string | React.JSXElementConstructor<any>>[];
     getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null;
     addRef(nodeRef: Element): void;
     createRawElement(elem: HtmlElementRendering, baseProps: {

package/types/components/RichText.d.ts

@@ -1,12 +1,10 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
-import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
-export interface RichTextField extends FieldMetadata {
+export interface RichTextField {
     value?: string;
     editable?: string;
 }
-export interface RichTextProps extends EditableFieldProps<RichTextProps> {
+export interface RichTextProps extends EditableFieldProps {
     [htmlAttributes: string]: unknown;
     /** The rich text field data. */
     field?: RichTextField;
@@ -16,4 +14,4 @@ export interface RichTextProps extends EditableFieldProps<RichTextProps> {
      */
     tag?: string;
 }
-export declare const RichText: React.FC<RichTextProps>;
+export declare const RichText: React.ForwardRefExoticComponent<Omit<RichTextProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/types/components/SitecoreContext.d.ts

@@ -1,35 +1,14 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentFactory } from './sharedTypes';
 import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
 export interface SitecoreContextProps {
     componentFactory: ComponentFactory;
     layoutData?: LayoutServiceData;
-    /**
-     * API settings to connect to Sitecore.
-     */
-    api?: {
-        /**
-         * Sitecore XM Cloud Edge endpoint credentials for Sitecore connection.
-         */
-        edge?: {
-            /**
-             * A unified identifier used to connect and retrieve data from XM Cloud instance
-             */
-            contextId: string;
-            /**
-             * XM Cloud endpoint that the app will communicate and retrieve data from
-             * @default https://edge-platform.sitecorecloud.io
-             */
-            edgeUrl?: string;
-        };
-    };
     children: React.ReactNode;
 }
 export interface SitecoreContextState {
     setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
     context: SitecoreContextValue;
-    api?: SitecoreContextProps['api'];
 }
 export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
 export declare const ComponentFactoryReactContext: React.Context<ComponentFactory>;

package/types/components/Text.d.ts

@@ -1,12 +1,10 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { EditableFieldProps } from './sharedTypes';
-import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
-export interface TextField extends FieldMetadata {
+export interface TextField {
     value?: string | number;
     editable?: string;
 }
-export interface TextProps extends EditableFieldProps<TextProps> {
+export interface TextProps extends EditableFieldProps {
     [htmlAttributes: string]: unknown;
     /** The text field data. */
     field?: TextField;

package/types/components/VisitorIdentification.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React from 'react';
 interface VisitorIdentificationProps {
     defer?: boolean;

package/types/components/sharedTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 /**
  * @param {string} componentName component to be imported from the component factory
@@ -16,17 +15,11 @@ export type JssComponentType = ComponentType & {
 /**
  * Shared editing field props
  */
-export interface EditableFieldProps<EmptyFieldEditingComponentProps = unknown> {
+export interface EditableFieldProps {
     /**
      * Can be used to explicitly disable inline editing.
      * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
      * @default true
      */
     editable?: boolean;
-    /**
-     * -- Edit Mode Metadata --
-     *
-     * Custom element to render in Pages in Metadata edit mode if field value is empty
-     */
-    emptyFieldEditingComponent?: React.ComponentClass<EmptyFieldEditingComponentProps> | React.FC<EmptyFieldEditingComponentProps>;
 }

package/types/enhancers/withComponentFactory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React, { JSX } from 'react';
 import { ComponentFactory } from '../components/sharedTypes';
 export interface ComponentFactoryProps {

package/types/enhancers/withDatasourceCheck.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React, { JSX } from 'react';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
 export declare const DefaultEditingError: () => JSX.Element;

package/types/enhancers/withEditorChromes.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="@types/react" />
 import React from 'react';
 export declare const withEditorChromes: (WrappedComponent: React.ComponentClass<unknown> | React.FC<unknown>) => React.ComponentClass<{}, any>;

package/types/enhancers/withPlaceholder.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
 import { PlaceholderProps } from '../components/PlaceholderCommon';