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

package/dist/cjs/components/Placeholder/Placeholder.js

@@ -33,103 +33,31 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = exports.PlaceholderComponent = void 0;
-const react_1 = __importDefault(require("react"));
-const withComponentMap_1 = require("../../enhancers/withComponentMap");
+exports.Placeholder = void 0;
+const react_1 = __importStar(require("react"));
 const editing_1 = require("@sitecore-content-sdk/content/editing");
-const withSitecore_1 = require("../../enhancers/withSitecore");
 const placeholder_utils_1 = require("./placeholder-utils");
-const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
-const ErrorBoundary_1 = __importStar(require("../ErrorBoundary"));
-class PlaceholderComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.isEmpty = false;
-        this.state = {};
-    }
-    componentDidMount() {
-        if (this.isEmpty && editing_1.PagesEditor.isActive()) {
-            editing_1.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_1.default.createElement(childProps.errorComponent, { error: this.state.error });
-            }
-            return (react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
-        }
-        const renderingData = childProps.rendering;
-        const placeholderRenderings = (0, placeholder_utils_1.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 ? (0, placeholder_utils_1.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;
-        }
-    }
-}
-exports.PlaceholderComponent = PlaceholderComponent;
-/**
- * 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 = (0, placeholder_utils_1.getRenderedComponentProps)(props, componentRendering, key);
-        const component = (0, placeholder_utils_1.getComponentForRendering)(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
-        let rendered = react_1.default.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
-        if (!component.isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "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_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element); // remove nulls
-    if (props.page.mode.isEditing) {
-        return [
-            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
-        ];
-    }
-    return transformedComponents;
-};
-const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
+const SitecoreProvider_1 = require("../SitecoreProvider");
+const AppPlaceholder_1 = require("./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
  */
-exports.Placeholder = (0, withSitecore_1.withSitecore)()(PlaceholderWithComponentMap);
+const Placeholder = (props) => {
+    const { page, componentMap } = (0, SitecoreProvider_1.useSitecore)();
+    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(props.rendering, props.name, page.mode.isEditing);
+    const isEmpty = !placeholderRenderings.length;
+    (0, react_1.useEffect)(() => {
+        if (isEmpty && editing_1.PagesEditor.isActive()) {
+            editing_1.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_1.default.createElement(AppPlaceholder_1.AppPlaceholder, Object.assign({}, appProps));
+};
+exports.Placeholder = Placeholder;

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

@@ -14,10 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppPlaceholder = exports.PlaceholderMetadata = exports.PlaceholderComponent = exports.Placeholder = void 0;
+exports.AppPlaceholder = exports.PlaceholderMetadata = exports.Placeholder = void 0;
 var Placeholder_1 = require("./Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
-Object.defineProperty(exports, "PlaceholderComponent", { enumerable: true, get: function () { return Placeholder_1.PlaceholderComponent; } });
 var PlaceholderMetadata_1 = require("./PlaceholderMetadata");
 Object.defineProperty(exports, "PlaceholderMetadata", { enumerable: true, get: function () { return PlaceholderMetadata_1.PlaceholderMetadata; } });
 var AppPlaceholder_1 = require("./AppPlaceholder");

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

@@ -1,21 +1,10 @@
 "use strict";
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentForRendering = exports.getRenderedComponentProps = exports.renderEmptyPlaceholder = exports.getSXAParams = exports.getPlaceholderRenderings = void 0;
-exports.getAppComponentProps = getAppComponentProps;
+exports.getComponentForRendering = exports.renderEmptyPlaceholder = exports.getSXAParams = exports.getPlaceholderRenderings = void 0;
+exports.getChildComponentProps = getChildComponentProps;
 const react_1 = __importDefault(require("react"));
 const MissingComponent_1 = require("../MissingComponent");
 const sharedTypes_1 = require("../sharedTypes");
@@ -24,7 +13,7 @@ const content_1 = require("@sitecore-content-sdk/content");
 const HiddenRendering_1 = require("../HiddenRendering");
 const FEaaS_1 = require("../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
@@ -92,29 +81,12 @@ const renderEmptyPlaceholder = (node) => {
 };
 exports.renderEmptyPlaceholder = renderEmptyPlaceholder;
 /**
- * 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
- */
-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 });
-};
-exports.getRenderedComponentProps = getRenderedComponentProps;
-/**
- * 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
  */
-function getAppComponentProps(placeholderProps, componentRendering) {
+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 {
@@ -182,7 +154,7 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
             };
         }
         else if (renderingDefinition.componentName === FEaaS_1.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: FEaaS_1.BYOCWrapper,

package/dist/cjs/components/RichText.js

@@ -1,38 +1,5 @@
 "use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 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)
@@ -44,32 +11,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichText = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/content/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
-/**
- * The RichText component.
- * @param {RichTextProps} props component props
- * @public
- */
-exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((0, react_1.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 ((0, layout_1.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_1.default.createElement(tag || 'div', htmlProps);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+    const Tag = (tag || 'div');
+    return react_1.default.createElement(Tag, Object.assign({}, htmlProps));
+};
+/**
+ * The RichText component.
+ * @param {RichTextProps} props component props
+ * @public
+ */
+exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(RichTextComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText,
+}));
 exports.RichText.displayName = 'RichText';

package/dist/cjs/components/SitecoreProvider.js

@@ -1,11 +1,45 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SitecoreProvider = exports.ImportMapReactContext = exports.ComponentMapReactContext = exports.SitecoreProviderReactContext = void 0;
-const react_1 = __importDefault(require("react"));
+exports.useSitecore = useSitecore;
+const react_1 = __importStar(require("react"));
 const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
 /**
  * The context for the SitecoreProvider component.
@@ -16,39 +50,53 @@ exports.ComponentMapReactContext = react_1.default.createContext(new Map());
 exports.ImportMapReactContext = react_1.default.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
  */
-class SitecoreProvider extends react_1.default.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 (!(0, react_2.default)(prevProps.page, this.props.page)) {
-            this.setPage(this.props.page);
-            return;
+const SitecoreProvider = (props) => {
+    const { api, page: propsPage, componentMap, loadImportMap, children } = props;
+    const [page, setPageInternal] = (0, react_1.useState)(propsPage);
+    // Memoize setPage callback
+    const setPage = (0, react_1.useCallback)((value) => {
+        setPageInternal(value);
+    }, []);
+    // Handle page prop changes using useEffect instead of componentDidUpdate
+    (0, react_1.useEffect)(() => {
+        if (!(0, react_2.default)(propsPage, page)) {
+            setPage(propsPage);
         }
-    }
-    render() {
-        return (react_1.default.createElement(exports.ImportMapReactContext.Provider, { value: this.props.loadImportMap },
-            react_1.default.createElement(exports.ComponentMapReactContext.Provider, { value: this.props.componentMap },
-                react_1.default.createElement(exports.SitecoreProviderReactContext.Provider, { value: this.state }, this.props.children))));
-    }
-}
+    }, [propsPage, page, setPage]);
+    // Memoize the context value to prevent unnecessary re-renders
+    const contextValue = (0, react_1.useMemo)(() => ({
+        page,
+        setPage,
+        api,
+        componentMap,
+        loadImportMap,
+    }), [page, setPage, api, componentMap, loadImportMap]);
+    return (react_1.default.createElement(exports.SitecoreProviderReactContext.Provider, { value: contextValue }, children));
+};
 exports.SitecoreProvider = SitecoreProvider;
-SitecoreProvider.displayName = 'SitecoreProvider';
+exports.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
+ */
+function useSitecore(options) {
+    const scContext = (0, react_1.useContext)(exports.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/cjs/components/Text.js

@@ -21,11 +21,7 @@ const layout_1 = require("@sitecore-content-sdk/content/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
-/**
- * The Text component.
- * @public
- */
-exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
+const TextComponent = (_a) => {
     var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
     if ((0, layout_1.isFieldValueEmpty)(field)) {
         return null;
@@ -59,14 +55,22 @@ exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEdit
     else {
         children = output;
     }
+    const Tag = (tag || 'span');
     if (field.metadata) {
-        return react_1.default.createElement(tag || 'span', Object.assign(Object.assign({}, htmlProps), { suppressHydrationWarning: true }), children);
+        return (react_1.default.createElement(Tag, Object.assign({}, htmlProps, { suppressHydrationWarning: true }), children));
     }
     else if (tag || !encode) {
-        return react_1.default.createElement(tag || 'span', htmlProps, children);
+        return react_1.default.createElement(Tag, Object.assign({}, htmlProps), children);
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText }));
+};
+/**
+ * The Text component.
+ * @public
+ */
+exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(TextComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText,
+}));
 exports.Text.displayName = 'Text';

package/dist/cjs/enhancers/withAppPlaceholder.js

@@ -6,6 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withAppPlaceholder = void 0;
 const react_1 = __importDefault(require("react"));
 const AppPlaceholder_1 = require("../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
+ */
 const withAppPlaceholder = (Component) => {
     return (props) => {
         const placeholders = props.rendering.placeholders || {};

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultEditingError = void 0;
 exports.withDatasourceCheck = withDatasourceCheck;
 const react_1 = __importDefault(require("react"));
-const withSitecore_1 = require("./withSitecore");
+const SitecoreProvider_1 = require("./../components/SitecoreProvider");
 const DefaultEditingError = () => (react_1.default.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 exports.DefaultEditingError = DefaultEditingError;
 /**
@@ -19,9 +20,9 @@ exports.DefaultEditingError = DefaultEditingError;
  */
 function withDatasourceCheck(options) {
     return function withDatasourceCheckHoc(Component) {
-        return function WithDatasourceCheck(props) {
+        return (props) => {
             var _a, _b;
-            const { page } = (0, withSitecore_1.useSitecore)();
+            const { page } = (0, SitecoreProvider_1.useSitecore)();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : exports.DefaultEditingError;
             // If the component is rendered in DesignLibrary, we don't need to check for datasource
             const isDesignLibrary = page.mode.isDesignLibrary;

package/dist/cjs/enhancers/withEditorChromes.js

@@ -1,10 +1,41 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withEditorChromes = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const __1 = require("..");
 /**
  * HOC to inject editor chromes reset on component update.
@@ -12,18 +43,22 @@ const __1 = require("..");
  * @public
  */
 const withEditorChromes = (WrappedComponent) => {
-    class Enhancer extends react_1.default.Component {
-        constructor() {
-            super(...arguments);
-            this.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-        }
-        componentDidUpdate() {
+    const Enhancer = (props) => {
+        const isFirstRender = (0, react_1.useRef)(true);
+        (0, react_1.useEffect)(() => {
+            if (isFirstRender.current) {
+                isFirstRender.current = false;
+                return;
+            }
+            // only reset chromes on subsequent re-renders
             (0, __1.resetEditorChromes)();
-        }
-        render() {
-            return react_1.default.createElement(WrappedComponent, Object.assign({}, this.props));
-        }
-    }
+        });
+        return react_1.default.createElement(WrappedComponent, Object.assign({}, props));
+    };
+    Enhancer.displayName =
+        WrappedComponent.displayName ||
+            WrappedComponent.name ||
+            'Component';
     return Enhancer;
 };
 exports.withEditorChromes = withEditorChromes;