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

package/dist/esm/components/ErrorBoundary.js

@@ -27,6 +27,11 @@ class ErrorBoundary extends React.Component {
             ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageState) === LayoutServicePageState.Edit ||
             ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Preview);
     }
+    isPageEditing() {
+        var _a, _b;
+        return (!!((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing) ||
+            ((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.pageState) === LayoutServicePageState.Edit);
+    }
     render() {
         var _a, _b;
         if (this.state.error) {
@@ -51,10 +56,21 @@ class ErrorBoundary extends React.Component {
             }
         }
         // do not apply suspense when suspense is disabled or when on already dynamic components
+        let content;
         if (((_b = this.props.disableSuspense) !== null && _b !== void 0 ? _b : true) || this.props.isDynamic) {
-            return this.props.children;
+            content = this.props.children;
+        }
+        else {
+            content = (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+        }
+        // Experience Editor tags the outermost DOM node of each rendering (sc-part-of,
+        // scEnabledChrome) after SSR. Own that node in the SDK during editing so hydration
+        // mismatches can be suppressed without requiring suppressHydrationWarning on every
+        // app component. `display: contents` keeps SXA/Bootstrap column layout intact.
+        if (this.isPageEditing()) {
+            return (React.createElement("div", { suppressHydrationWarning: true, style: { display: 'contents' } }, content));
         }
-        return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+        return content;
     }
 }
 export default withSitecoreContext()(ErrorBoundary);

package/dist/esm/components/Image.js

@@ -13,14 +13,12 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import React from 'react';
 import { addClassName, convertAttributesToReactProps } from '../utils';
 import { getAttributesString } from '../utils';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentImage } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
-React.createElement("span", Object.assign({ className: "sc-image-wrapper" }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
+// Experience Editor rewrites this chrome markup client-side after SSR.
+React.createElement("span", Object.assign({ className: "sc-image-wrapper", suppressHydrationWarning: true }, otherProps, { dangerouslySetInnerHTML: { __html: editableMarkup } })));
 const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     var { src, srcSet } = _a, otherAttrs = __rest(_a, ["src", "srcSet"]);
     if (!src) {
@@ -62,7 +60,7 @@ export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps)
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };
-export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+export const Image = (_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
     const dynamicMedia = field;
     if (!field || (!dynamicMedia.editable && isFieldValueEmpty(dynamicMedia))) {
@@ -79,14 +77,10 @@ export const Image = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     if (!img) {
         return null;
     }
-    // prevent metadata from being passed to the img tag
-    if (img.metadata) {
-        delete img.metadata;
-    }
     const attrs = getImageAttrs(Object.assign(Object.assign({}, img), otherProps), imageParams, mediaUrlPrefix);
     if (attrs) {
         return React.createElement("img", Object.assign({}, attrs));
     }
     return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
+};
 Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -10,13 +10,8 @@ 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 { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
-export const Link = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line react/display-name
-forwardRef((_a, ref) => {
+export const Link = forwardRef((_a, ref) => {
     var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;
@@ -31,7 +26,9 @@ forwardRef((_a, ref) => {
         // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children)
         // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately
         // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006.
-        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', dangerouslySetInnerHTML: {
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', 
+            // Experience Editor rewrites this chrome markup client-side after SSR.
+            suppressHydrationWarning: true, dangerouslySetInnerHTML: {
                 __html: markup,
             } }, otherProps), { key: 'editable' });
         // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together
@@ -66,5 +63,5 @@ forwardRef((_a, ref) => {
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
     resultTags.push(React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children));
     return React.createElement(React.Fragment, null, resultTags);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+});
 Link.displayName = 'Link';

package/dist/esm/components/Placeholder.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
-import { HorizonEditor } from '@sitecore-jss/sitecore-jss/editing';
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
@@ -15,12 +14,6 @@ class PlaceholderComponent extends PlaceholderCommon {
         super(props);
         this.isEmpty = false;
     }
-    componentDidMount() {
-        super.componentDidMount();
-        if (this.isEmpty && HorizonEditor.isActive()) {
-            HorizonEditor.resetChromes();
-        }
-    }
     /**
      * In case we need to render an empty placeholder, some part of the markup will be inserted by the EE,
      * so we need to separate the empty placeholder's markup and allow React reconciliation to be executed correctly
@@ -29,10 +22,10 @@ class PlaceholderComponent extends PlaceholderCommon {
      * @returns react node
      */
     renderEmptyPlaceholder(node) {
-        return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
+        // Experience Editor may mutate empty-placeholder chrome between SSR and hydration.
+        return (React.createElement("div", { className: "sc-jss-empty-placeholder", suppressHydrationWarning: true }, node));
     }
     render() {
-        var _a;
         const childProps = Object.assign({}, this.props);
         delete childProps.componentFactory;
         if (this.state.error) {
@@ -45,7 +38,7 @@ class PlaceholderComponent extends PlaceholderCommon {
                 "."));
         }
         const renderingData = childProps.rendering;
-        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name, (_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.editMode);
+        const placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
         this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
         const components = this.getComponentsForRenderingData(placeholderData);
         if (this.props.renderEmpty && this.isEmpty) {

package/dist/esm/components/PlaceholderCommon.js

@@ -1,25 +1,9 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import 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) {
@@ -30,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) => {
@@ -44,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];
                 }
             });
         }
@@ -83,11 +61,10 @@ export class PlaceholderCommon extends React.Component {
         });
     }
     getComponentsForRenderingData(placeholderData) {
-        var _a;
-        const _b = this.props, { name, fields: placeholderFields, params: placeholderParams, missingComponentComponent, hiddenRenderingComponent } = _b, placeholderProps = __rest(_b, ["name", "fields", "params", "missingComponentComponent", "hiddenRenderingComponent"]);
+        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}`;
@@ -111,55 +88,33 @@ 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;
                 isEmpty = true;
             }
-            const finalProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), placeholderProps), ((placeholderFields || componentRendering.fields) && {
+            // Only pass rendering data props to child components.
+            // Internal Placeholder/SitecoreContext props are excluded.
+            const childProps = Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), ((placeholderFields || componentRendering.fields) && {
                 fields: Object.assign(Object.assign({}, placeholderFields), componentRendering.fields),
             })), ((placeholderParams || componentRendering.params) && {
                 params: Object.assign(Object.assign(Object.assign({}, placeholderParams), componentRendering.params), this.getSXAParams(componentRendering)),
             })), { rendering: componentRendering });
-            let rendered = React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
+            const modifiedProps = modifyComponentProps ? modifyComponentProps(childProps) : childProps;
+            const finalProps = Object.assign(Object.assign({}, modifiedProps), passThroughComponentProps);
+            let rendered = React.createElement(component, finalProps);
             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) {
@@ -191,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.2",
+  "version": "23.0.0-canary.21",
   "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.2",
+    "@sitecore-jss/sitecore-jss": "23.0.0-canary.21",
     "fast-deep-equal": "^3.1.3",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "885e9ceff27b4215bf41087b88069888e84e43a5",
+  "gitHead": "9f17c1ef59f6b506117d0956e9df69f32b14f4b9",
   "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
      */