@sitecore-content-sdk/react 2.0.0-canary.2 → 2.0.0-canary.4

package/dist/esm/components/Link.js

@@ -10,22 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-/**
- * The Link component.
- * @param {LinkProps} props component props
- * @public
- */
-export const Link = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef(
-// eslint-disable-next-line no-unused-vars
-(_a, ref) => {
-    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+const LinkComponent = (_a) => {
+    var { field, showLinkTextWithChildrenPresent, ref } = _a, otherProps = __rest(_a, ["field", "showLinkTextWithChildrenPresent", "ref"]);
     const children = otherProps.children;
     const dynamicField = field;
+    delete otherProps.editable; // prevent editable from being passed to the DOM
     if (isFieldValueEmpty(dynamicField)) {
         return null;
     }
@@ -49,7 +43,16 @@ export const Link = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef(
         anchorAttrs.rel = 'noopener noreferrer';
     }
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
-    const element = React.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
-    return React.createElement(React.Fragment, null, element);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+    return (React.createElement("a", Object.assign({}, anchorAttrs, otherProps, { key: "link", ref: ref }),
+        linkText,
+        children));
+};
+/**
+ * The Link component.
+ * @param {LinkProps} props component props
+ * @public
+ */
+export const Link = withFieldMetadata(withEmptyFieldEditingComponent(LinkComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+}));
 Link.displayName = 'Link';

package/dist/esm/components/Placeholder/AppPlaceholder.js

@@ -1,72 +1,71 @@
-import { getAppComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, } from './placeholder-utils';
+import { getChildComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, } from './placeholder-utils';
 import React from 'react';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
 import ErrorBoundary from '../ErrorBoundary';
 import { ClientComponentWrapper } from './ClientComponentWrapper';
 import { rsc } from '#rsc-env';
-/**
- * The implemention of placeholder compatible with React Server Components.
- * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
- * Pulls components from the provided component map.
- * @param {AppPlaceholderProps} props Placeholder props
- * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
- * @public
- */
-export const AppPlaceholder = (props) => {
-    const { rendering: parentRendering, componentMap, page } = props;
-    const placeholderRenderings = getPlaceholderRenderings(parentRendering, props.name, page.mode.isEditing);
-    const components = placeholderRenderings
-        .map((rendering, index) => {
-        const { component: Component, isEmpty, componentType, dynamic, } = getComponentForRendering(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
-        const isClient = componentType === 'client';
-        const key = rendering.uid || `component-${index}`;
-        // Use rsc context to determine the current runtime
-        const componentRuntime = rsc ? 'server' : 'client';
-        const renderedProps = getAppComponentProps(props, rendering);
-        const finalRenderedProps = props.modifyComponentProps
-            ? props.modifyComponentProps(renderedProps)
-            : renderedProps;
+import { PlaceholderMetadata } from './PlaceholderMetadata';
+const AppPlaceholderComponent = (props) => {
+    const renderingData = props.rendering;
+    const isEditing = props.page.mode.isEditing;
+    const placeholderRenderings = getPlaceholderRenderings(renderingData, props.name, isEditing);
+    const isEmpty = !placeholderRenderings.length;
+    const components = getPlaceholderComponents(props, placeholderRenderings);
+    if (isEmpty) {
+        let renderedOutput = components;
+        if (props.renderEmpty) {
+            renderedOutput = props.renderEmpty(components);
+        }
+        return isEditing ? renderEmptyPlaceholder(renderedOutput) : renderedOutput;
+    }
+    else if (props.render) {
+        return props.render(components, placeholderRenderings, props);
+    }
+    return components;
+};
+const getPlaceholderComponents = (placeholderProps, placeholderRenderings) => {
+    const { name, rendering, passThroughComponentProps, missingComponentComponent, hiddenRenderingComponent, errorComponent, componentLoadingMessage, renderEach, modifyComponentProps, componentMap, page, } = placeholderProps;
+    const isEditing = page.mode.isEditing;
+    const componentRuntime = rsc ? 'server' : 'client';
+    const transformedComponents = placeholderRenderings
+        .map((componentRendering, index) => {
+        const { component: ChildComponent, isEmpty: componentEmpty, componentType, dynamic, } = getComponentForRendering(componentRendering, name, componentMap, hiddenRenderingComponent, missingComponentComponent);
+        const key = componentRendering.uid || `component-${index}`;
+        const renderedProps = modifyComponentProps
+            ? modifyComponentProps(getChildComponentProps(placeholderProps, componentRendering))
+            : getChildComponentProps(placeholderProps, componentRendering);
         // Client wrapper is required only when component crosses boundary from server to client.
         // It happens when component is marker as client and rendered in RSC context.
         // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
-        const useClientWrapper = isClient && rsc && !isEmpty;
-        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (React.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
-        if (!isEmpty) {
+        const useClientWrapper = componentType === 'client' && rsc && !componentEmpty;
+        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: renderedProps.rendering, componentProps: Object.assign(Object.assign({}, renderedProps), passThroughComponentProps), placeholderName: name, key: key })) : (React.createElement(ChildComponent, Object.assign({ key: key }, renderedProps, passThroughComponentProps, { page: page, componentMap: componentMap })));
+        if (renderEach) {
+            rendered = renderEach(rendered, index);
+        }
+        if (!componentEmpty) {
             const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+            const disableSuspense = placeholderProps.disableSuspense || false;
+            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: errorComponent, componentLoadingMessage: componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
         }
         // if in edit mode then emit shallow chromes for hydration in Pages
-        if (page.mode.isEditing) {
-            const key = rendering.uid || `component-${index}`;
-            return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering, componentRuntime: componentRuntime }, rendered));
-        }
-        return rendered;
+        return isEditing ? (React.createElement(PlaceholderMetadata, { key: key, rendering: componentRendering, componentRuntime: componentRuntime }, rendered)) : (rendered);
     })
-        .filter((element) => element);
-    const finalRendering = page.mode.isEditing
-        ? [
-            React.createElement(PlaceholderMetadata, { key: parentRendering.uid || 'placeholder-metadata-root', placeholderName: props.name, rendering: parentRendering }, components),
-        ]
-        : components;
-    const placeholderEmpty = !placeholderRenderings.length;
-    if (placeholderEmpty) {
-        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
-        return page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
-    }
-    if (props.render) {
-        return props.render(components, placeholderRenderings, props);
-    }
-    else if (props.renderEach) {
-        const renderEach = props.renderEach;
-        return finalRendering.map((component, index) => {
-            if (component && component.props && component.props.type === 'text/sitecore') {
-                return component;
-            }
-            return renderEach(component, index);
-        });
-    }
-    else {
-        return finalRendering;
+        .filter((element) => element); // remove nulls
+    if (!isEditing) {
+        return transformedComponents;
     }
+    return [
+        React.createElement(PlaceholderMetadata, { key: rendering.uid, placeholderName: name, rendering: rendering }, transformedComponents),
+    ];
 };
+/**
+ * The implemention of placeholder compatible with React Server Components.
+ * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
+ * Pulls components from the provided component map.
+ * @param {AppPlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ * @public
+ */
+export const AppPlaceholder = (props) => (
+// Using error boundary for errors that may happen within Placeholder itself
+React.createElement(ErrorBoundary, { errorComponent: props.errorComponent },
+    React.createElement(AppPlaceholderComponent, Object.assign({}, props))));

package/dist/esm/components/Placeholder/ClientComponentWrapper.js

@@ -1,14 +1,10 @@
 'use client';
-import { ComponentMapReactContext } from '../SitecoreProvider';
-import { useContext } from 'react';
+import { useSitecore } from '../SitecoreProvider';
 import React from 'react';
-import { useSitecore } from '../../enhancers/withSitecore';
 import { getComponentForRendering } from './placeholder-utils';
 export const ClientComponentWrapper = (props) => {
-    const { page } = useSitecore();
-    const componentMap = useContext(ComponentMapReactContext);
-    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
-        page });
-    const { component: Component } = getComponentForRendering(props.rendering, props.placeholderName, componentMap);
+    const { page, componentMap: clientComponentMap } = useSitecore();
+    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap: clientComponentMap, page });
+    const { component: Component } = getComponentForRendering(props.rendering, props.placeholderName, clientComponentMap);
     return React.createElement(Component, Object.assign({}, componentPropsWithContext));
 };

package/dist/esm/components/Placeholder/Placeholder.js

@@ -1,95 +1,26 @@
 'use client';
-import React from 'react';
-import { withComponentMap } from '../../enhancers/withComponentMap';
+import React, { useEffect } from 'react';
 import { PagesEditor } from '@sitecore-content-sdk/content/editing';
-import { withSitecore } from '../../enhancers/withSitecore';
-import { getComponentForRendering, getPlaceholderRenderings, getRenderedComponentProps, renderEmptyPlaceholder, } from './placeholder-utils';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
-import ErrorBoundary, { ErrorComponent } from '../ErrorBoundary';
-export class PlaceholderComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.isEmpty = false;
-        this.state = {};
-    }
-    componentDidMount() {
-        if (this.isEmpty && PagesEditor.isActive()) {
-            PagesEditor.resetChromes();
-        }
-    }
-    componentDidCatch(error) {
-        this.setState({ error });
-    }
-    render() {
-        const childProps = Object.assign({}, this.props);
-        delete childProps.componentMap;
-        if (this.state.error) {
-            if (childProps.errorComponent) {
-                return React.createElement(childProps.errorComponent, { error: this.state.error });
-            }
-            return (React.createElement(ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
-        }
-        const renderingData = childProps.rendering;
-        const placeholderRenderings = getPlaceholderRenderings(renderingData, this.props.name, this.props.page.mode.isEditing);
-        this.isEmpty = !placeholderRenderings.length;
-        const components = PlaceholderComponent.getRenderedComponents(this.props, placeholderRenderings);
-        if (this.isEmpty) {
-            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
-            return this.props.page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
-        }
-        else if (this.props.render) {
-            return this.props.render(components, placeholderRenderings, childProps);
-        }
-        else if (this.props.renderEach) {
-            const renderEach = this.props.renderEach;
-            return components.map((component, index) => {
-                if (component && component.props && component.props.type === 'text/sitecore') {
-                    return component;
-                }
-                return renderEach(component, index);
-            });
-        }
-        else {
-            return components;
-        }
-    }
-}
-/**
- * Renders the components for the placeholder based on the provided rendering data.
- * @param {PlaceholderProps} props placeholder component props
- * @param {ComponentRendering[]} placeholderRenderings renderings within placeholder
- * @returns {React.ReactNode | React.ReactElement[]} rendered components
- */
-PlaceholderComponent.getRenderedComponents = (props, placeholderRenderings) => {
-    const { name, missingComponentComponent, hiddenRenderingComponent } = props;
-    const transformedComponents = placeholderRenderings
-        .map((componentRendering, index) => {
-        const key = componentRendering.uid || `component-${index}`;
-        const renderedProps = getRenderedComponentProps(props, componentRendering, key);
-        const component = getComponentForRendering(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
-        let rendered = React.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
-        if (!component.isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: component.dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
-        }
-        // if in edit mode then emit shallow chromes for hydration in Pages
-        if (props.page.mode.isEditing) {
-            return (React.createElement(PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element); // remove nulls
-    if (props.page.mode.isEditing) {
-        return [
-            React.createElement(PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
-        ];
-    }
-    return transformedComponents;
-};
-const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
+import { getPlaceholderRenderings } from './placeholder-utils';
+import { useSitecore } from '../SitecoreProvider';
+import { AppPlaceholder } from './AppPlaceholder';
 /**
  * The Placeholder component.
+ * Renders the components assigned to a placeholder in Sitecore. It also supports custom rendering and empty state.
+ * @param {PlaceholderProps} props - The props for the Placeholder component.
+ * @returns The rendered Placeholder component.
  * @public
  */
-export const Placeholder = withSitecore()(PlaceholderWithComponentMap);
+export const Placeholder = (props) => {
+    const { page, componentMap } = useSitecore();
+    const placeholderRenderings = getPlaceholderRenderings(props.rendering, props.name, page.mode.isEditing);
+    const isEmpty = !placeholderRenderings.length;
+    useEffect(() => {
+        if (isEmpty && PagesEditor.isActive()) {
+            PagesEditor.resetChromes();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Empty array so it runs only once on mount
+    const appProps = Object.assign(Object.assign({}, props), { page, componentMap });
+    return React.createElement(AppPlaceholder, Object.assign({}, appProps));
+};

package/dist/esm/components/Placeholder/index.js

@@ -1,4 +1,4 @@
-export { Placeholder, PlaceholderComponent } from './Placeholder';
+export { Placeholder } from './Placeholder';
 export { PlaceholderMetadata } from './PlaceholderMetadata';
 export { AppPlaceholder } from './AppPlaceholder';
 export * from './placeholder-utils';

package/dist/esm/components/Placeholder/placeholder-utils.js

@@ -1,14 +1,3 @@
-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 { DEFAULT_EXPORT_NAME } from '../sharedTypes';
@@ -17,7 +6,7 @@ import { HIDDEN_RENDERING_NAME } from '@sitecore-content-sdk/content';
 import { HiddenRendering } from '../HiddenRendering';
 import { FEaaSComponent, FEaaSWrapper, BYOCComponent, BYOCWrapper, BYOC_COMPONENT_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, FEAAS_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, } from '../FEaaS';
 /**
- * Get the renderings for the specified placeholder from the rendering data.
+ * Get the renderings for the specified placeholder from the rendering layout data.
  * @param {ComponentRendering | RouteData } rendering rendering data
  * @param {string} name placeholder name
  * @param {boolean} isEditing whether components should be rendered in editing mode
@@ -82,28 +71,12 @@ export const renderEmptyPlaceholder = (node) => {
     return React.createElement("div", { className: "sc-jss-empty-placeholder" }, node);
 };
 /**
- * Get component props to be passed to the rendered component.
- * @param {PlaceholderProps} placeholderProps current placeholder props
- * @param {ComponentRendering} componentRendering rendering to be rendered
- * @param {string} renderingKey unique key to pass over to rendering props
- * @returns {RenderedProps} props to be passed to the rendered component
- */
-export const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
-    // eslint-disable-next-line no-unused-vars
-    const { fields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
-    delete passThroughProps.missingComponentComponent;
-    delete passThroughProps.hiddenRenderingComponent;
-    delete passThroughProps.name;
-    const mergedContentProps = getAppComponentProps(placeholderProps, componentRendering);
-    return Object.assign(Object.assign(Object.assign({ key: renderingKey }, passThroughProps), mergedContentProps), { rendering: componentRendering });
-};
-/**
- * Merge placeholder and component field and params content props.
- * @param {BasePlaceholderProps} placeholderProps placeholder props
+ * Merge specific placeholder props with component field and params content props.
+ * @param {PlaceholderProps} placeholderProps placeholder props
  * @param {ComponentRendering} componentRendering component rendering
  * @returns {ComponentProps} merged props
  */
-export function getAppComponentProps(placeholderProps, componentRendering) {
+export function getChildComponentProps(placeholderProps, componentRendering) {
     const fields = Object.assign(Object.assign({}, (placeholderProps.fields || {})), (componentRendering.fields || {}));
     const params = Object.assign(Object.assign({}, (placeholderProps.params || {})), (componentRendering.params || {}));
     return {
@@ -171,7 +144,7 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
             };
         }
         else if (renderingDefinition.componentName === BYOC_WRAPPER_RENDERING_NAME) {
-            // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+            // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOCs and tries to access its children props
             // that's why we need to mark BYOC wrapper dynamic
             return {
                 component: BYOCWrapper,

package/dist/esm/components/RichText.js

@@ -10,30 +10,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-/**
- * The RichText component.
- * @param {RichTextProps} props component props
- * @public
- */
-export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef((
-// eslint-disable-next-line no-unused-vars
-_a, ref) => {
-    var 
-    // eslint-disable-next-line no-unused-vars
-    { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, 
-    // eslint-disable-next-line no-unused-vars
-    ["field", "tag", "editable"]);
+const RichTextComponent = (_a) => {
+    var { field, tag = 'div', ref } = _a, otherProps = __rest(_a, ["field", "tag", "ref"]);
     if (isFieldValueEmpty(field)) {
         return null;
     }
+    delete otherProps.editable; // prevent editable from being passed to the DOM
     const htmlProps = Object.assign({ dangerouslySetInnerHTML: {
             __html: field.value,
         }, ref, suppressHydrationWarning: field.metadata ? true : undefined }, otherProps);
-    return React.createElement(tag || 'div', htmlProps);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+    const Tag = (tag || 'div');
+    return React.createElement(Tag, Object.assign({}, htmlProps));
+};
+/**
+ * The RichText component.
+ * @param {RichTextProps} props component props
+ * @public
+ */
+export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(RichTextComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+}));
 RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreProvider.js

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useContext } from 'react';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
 /**
  * The context for the SitecoreProvider component.
@@ -10,38 +10,52 @@ export const ComponentMapReactContext = React.createContext(new Map());
 export const ImportMapReactContext = React.createContext(undefined);
 /**
  * The SitecoreProvider component.
+ * @param {SitecoreProviderProps} props - The props for the SitecoreProvider component.
+ * @param {SitecoreProviderProps['api']} props.api - The API configuration.
+ * @param {SitecoreProviderProps['page']} props.page - The page data.
+ * @param {SitecoreProviderProps['componentMap']} props.componentMap - The component map.
+ * @param {SitecoreProviderProps['loadImportMap']} props.loadImportMap - The function to load the import map.
+ * @param {React.ReactNode} props.children - The children to render.
+ * @returns {React.ReactNode} The SitecoreProvider component.
  * @public
  */
-export class SitecoreProvider extends React.Component {
-    constructor(props) {
-        super(props);
-        /**
-         * Update page state.
-         * @param {Page} value New page value
-         */
-        this.setPage = (value) => {
-            this.setState({
-                page: value,
-            });
-        };
-        this.state = {
-            page: props.page,
-            setPage: this.setPage,
-            api: props.api,
-        };
-    }
-    componentDidUpdate(prevProps) {
-        // In case if somebody will manage SitecoreProvider state by passing fresh `page` prop
-        // instead of using `updateContext`
-        if (!fastDeepEqual(prevProps.page, this.props.page)) {
-            this.setPage(this.props.page);
-            return;
+export const SitecoreProvider = (props) => {
+    const { api, page: propsPage, componentMap, loadImportMap, children } = props;
+    const [page, setPageInternal] = useState(propsPage);
+    // Memoize setPage callback
+    const setPage = useCallback((value) => {
+        setPageInternal(value);
+    }, []);
+    // Handle page prop changes using useEffect instead of componentDidUpdate
+    useEffect(() => {
+        if (!fastDeepEqual(propsPage, page)) {
+            setPage(propsPage);
         }
-    }
-    render() {
-        return (React.createElement(ImportMapReactContext.Provider, { value: this.props.loadImportMap },
-            React.createElement(ComponentMapReactContext.Provider, { value: this.props.componentMap },
-                React.createElement(SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children))));
-    }
-}
+    }, [propsPage, page, setPage]);
+    // Memoize the context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
+        page,
+        setPage,
+        api,
+        componentMap,
+        loadImportMap,
+    }), [page, setPage, api, componentMap, loadImportMap]);
+    return (React.createElement(SitecoreProviderReactContext.Provider, { value: contextValue }, children));
+};
 SitecoreProvider.displayName = 'SitecoreProvider';
+/**
+ * This hook grants acсess to the current Sitecore page and api.
+ * @param {UseSitecoreOptions} [options] hook options
+ * @example
+ * const EditMode = () => {
+ *    const { page } = useSitecore();
+ *    return <span>Edit Mode is {page.mode.isEditing ? 'active' : 'inactive'}</span>
+ * }
+ * @returns {SitecoreProviderState} The current Sitecore context, including the page and api.
+ * @public
+ */
+export function useSitecore(options) {
+    const scContext = useContext(SitecoreProviderReactContext);
+    const updatable = options === null || options === void 0 ? void 0 : options.updatable;
+    return Object.assign(Object.assign({}, scContext), { setPage: updatable ? scContext.setPage : undefined });
+}

package/dist/esm/components/Text.js

@@ -15,11 +15,7 @@ import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-/**
- * The Text component.
- * @public
- */
-export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+const TextComponent = (_a) => {
     var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
     if (isFieldValueEmpty(field)) {
         return null;
@@ -53,14 +49,22 @@ export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     else {
         children = output;
     }
+    const Tag = (tag || 'span');
     if (field.metadata) {
-        return React.createElement(tag || 'span', Object.assign(Object.assign({}, htmlProps), { suppressHydrationWarning: true }), children);
+        return (React.createElement(Tag, Object.assign({}, htmlProps, { suppressHydrationWarning: true }), children));
     }
     else if (tag || !encode) {
-        return React.createElement(tag || 'span', htmlProps, children);
+        return React.createElement(Tag, Object.assign({}, htmlProps), children);
     }
     else {
         return React.createElement(React.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+};
+/**
+ * The Text component.
+ * @public
+ */
+export const Text = withFieldMetadata(withEmptyFieldEditingComponent(TextComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText,
+}));
 Text.displayName = 'Text';

package/dist/esm/enhancers/withAppPlaceholder.js

@@ -1,5 +1,11 @@
 import React from 'react';
 import { AppPlaceholder } from '../components/Placeholder/AppPlaceholder';
+/**
+ * Provides a slot-like functionality by wrapping a component and rendering placeholders defined in the layout data.
+ * @param {ComponentType<T>} Component - The component to be wrapped around placeholders.
+ * @returns {React.ReactNode} A new component that renders the original component with placeholders.
+ * @public
+ */
 export const withAppPlaceholder = (Component) => {
     return (props) => {
         const placeholders = props.rendering.placeholders || {};

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,5 +1,6 @@
+'use client';
 import React from 'react';
-import { useSitecore } from './withSitecore';
+import { useSitecore } from './../components/SitecoreProvider';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
  * Checks whether a Sitecore datasource is present and renders appropriately depending on page mode (normal vs editing).
@@ -11,7 +12,7 @@ export const DefaultEditingError = () => (React.createElement("div", { className
  */
 export function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
-        return function WithDatasourceCheck(props) {
+        return (props) => {
             var _a, _b;
             const { page } = useSitecore();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;

package/dist/esm/enhancers/withEditorChromes.js

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import React, { useEffect, useRef } from 'react';
 import { resetEditorChromes } from '..';
 /**
  * HOC to inject editor chromes reset on component update.
@@ -6,17 +7,21 @@ import { resetEditorChromes } from '..';
  * @public
  */
 export const withEditorChromes = (WrappedComponent) => {
-    class Enhancer extends React.Component {
-        constructor() {
-            super(...arguments);
-            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-        }
-        componentDidUpdate() {
+    const Enhancer = (props) => {
+        const isFirstRender = useRef(true);
+        useEffect(() => {
+            if (isFirstRender.current) {
+                isFirstRender.current = false;
+                return;
+            }
+            // only reset chromes on subsequent re-renders
             resetEditorChromes();
-        }
-        render() {
-            return React.createElement(WrappedComponent, Object.assign({}, this.props));
-        }
-    }
+        });
+        return React.createElement(WrappedComponent, Object.assign({}, props));
+    };
+    Enhancer.displayName =
+        WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component';
     return Enhancer;
 };