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

package/types/components/Link.d.ts

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

package/types/components/MissingComponent.d.ts

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

package/types/components/Placeholder.d.ts

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

package/types/components/PlaceholderCommon.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="@types/react" />
 import React, { ComponentType } from 'react';
 import { ComponentFactory } from './sharedTypes';
-import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering, EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
 import { SitecoreContextValue } from './SitecoreContext';
 type ErrorComponentProps = {
     [prop: string]: unknown;
@@ -43,6 +42,13 @@ export interface PlaceholderProps {
      * @returns {ComponentProps} modified or initial props
      */
     modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
+    /**
+     * An alternative to `modifyComponentProps` that allows passing additional props to rendered
+     * components without forwarding Placeholder/SitecoreContext internal props.
+     */
+    passThroughComponentProps?: {
+        [key: string]: unknown;
+    };
     /**
      * A component that is rendered in place of any components that are in this placeholder,
      * but do not have a definition in the componentFactory (i.e. don't have a React implementation)
@@ -80,7 +86,7 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
         error?: Error;
     }>;
     constructor(props: T);
-    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, editMode?: EditMode): (ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | HtmlElementRendering)[];
+    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string): (ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | HtmlElementRendering)[];
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;
@@ -89,7 +95,9 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
     } | {
         styles: string;
     };
-    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.JSX.Element[];
+    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.ReactElement<{
+        [attr: string]: unknown;
+    }, string | React.JSXElementConstructor<any>>[];
     getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null;
     addRef(nodeRef: Element): void;
     createRawElement(elem: HtmlElementRendering, baseProps: {

package/types/components/RichText.d.ts

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

package/types/components/SitecoreContext.d.ts

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

package/types/components/Text.d.ts

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

package/types/components/VisitorIdentification.d.ts

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

package/types/components/sharedTypes.d.ts

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

package/types/enhancers/withComponentFactory.d.ts

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

package/types/enhancers/withDatasourceCheck.d.ts

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

package/types/enhancers/withEditorChromes.d.ts

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

package/types/enhancers/withPlaceholder.d.ts

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

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,13 +1,11 @@
-/// <reference types="@types/react" />
 import React from 'react';
 import { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
-import { SitecoreContextState, SitecoreContextValue } from '../components/SitecoreContext';
+import { SitecoreContextValue } from '../components/SitecoreContext';
 export interface WithSitecoreContextOptions {
     updatable?: boolean;
 }
 export interface WithSitecoreContextProps {
     sitecoreContext: SitecoreContextValue;
-    api?: SitecoreContextState['api'];
     updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
 }
 export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;

package/types/index.d.ts

@@ -1,23 +1,17 @@
 export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, HttpDataFetcher, NativeDataFetcher, NativeDataFetcherError, NativeDataFetcherResponse, NativeDataFetcherConfig, } from '@sitecore-jss/sitecore-jss';
 export { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/editing';
-export { getContentStylesheetLink, getDesignLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { ComponentFactory, JssComponentType } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
-export { Form } from './components/Form';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
-export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
-export { FEaaSWrapper } from './components/FEaaSWrapper';
-export { DesignLibrary } from './components/DesignLibrary';
-export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
-export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps } from './components/Link';
 export { File, FileField } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
@@ -28,7 +22,3 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
 export { EditFrameProps, EditFrame } from './components/EditFrame';
 export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
-export { withFieldMetadata } from './enhancers/withFieldMetadata';
-export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
-export { EditingScripts } from './components/EditingScripts';
-export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';

package/types/utils.d.ts

@@ -1,4 +1,3 @@
-import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
 export declare const convertKebabCasetoCamelCase: (str: string) => string;
 /**
  * https://facebook.github.io/react/docs/dom-elements.html
@@ -32,11 +31,3 @@ export declare const addClassName: (otherAttrs: {
 export declare const getAttributesString: (attributes: {
     [key: string]: unknown;
 }) => string;
-/**
- * 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 declare const getDataFromFields: (fields: ComponentFields) => {
-    [key: string]: unknown;
-};

package/dist/cjs/components/BYOCComponent.js

@@ -1,122 +0,0 @@
-"use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.BYOC_COMPONENT_RENDERING_NAME = void 0;
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const MissingComponent_1 = require("./MissingComponent");
-const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
-exports.BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
-const DefaultErrorComponent = (props) => {
-    var _a;
-    return (react_1.default.createElement("div", null,
-        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
-        _a.message,
-        "."));
-};
-/**
- * BYOCComponent facilitate the rendering of external components. It manages potential errors,
- * missing components, and customization of error messages or alternative rendering components.
- * @param {ByocComponentProps} props component props
- * @returns dynamicly rendered component or Missing Component error frame
- */
-class BYOCComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { error: error };
-    }
-    componentDidCatch(error) {
-        this.setState({ error });
-    }
-    render() {
-        var _a, _b, _c;
-        const props = this.props;
-        if (this.state.error) {
-            return this.props.errorComponent ? (react_1.default.createElement(this.props.errorComponent, { error: this.state.error })) : (react_1.default.createElement(DefaultErrorComponent, { error: this.state.error }));
-        }
-        const { ComponentName: componentName } = props.params || {};
-        if (!componentName) {
-            const noNameProps = {
-                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
-            };
-            return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps)));
-        }
-        const unRegisteredComponentProps = {
-            rendering: {
-                componentName: componentName,
-            },
-            errorOverride: 'BYOC: This component was not registered.',
-        };
-        const fallbackComponent = this.props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, unRegisteredComponentProps)));
-        const ErrorComponent = this.props.errorComponent;
-        let componentProps = {};
-        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
-            try {
-                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
-            }
-            catch (e) {
-                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
-                return ErrorComponent ? (react_1.default.createElement(ErrorComponent, { error: e })) : (react_1.default.createElement(DefaultErrorComponent, { error: e }));
-            }
-        }
-        // apply props from item datasource
-        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
-        // we render fallback on client to avoid problems with client-only components
-        return (react_1.default.createElement(FEAAS.ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
-    }
-}
-exports.BYOCComponent = BYOCComponent;
-/**
- * Fetches server component props required for server rendering, based on rendering params.
- * @param {BYOCComponentParams} params component params
- */
-function fetchBYOCComponentServerProps(params) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const fetchDataOptions = params.ComponentDataOverride
-            ? JSON.parse(params.ComponentDataOverride)
-            : {};
-        const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
-        return {
-            fetchedData,
-        };
-    });
-}
-exports.fetchBYOCComponentServerProps = fetchBYOCComponentServerProps;

package/dist/cjs/components/BYOCWrapper.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BYOCWrapper = exports.BYOC_WRAPPER_RENDERING_NAME = void 0;
-const BYOCComponent_1 = require("./BYOCComponent");
-const react_1 = __importDefault(require("react"));
-exports.BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
-const BYOCWrapper = (props) => {
-    var _a, _b, _c;
-    const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
-    const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
-    return (react_1.default.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
-        react_1.default.createElement("div", { className: "component-content" },
-            react_1.default.createElement(BYOCComponent_1.BYOCComponent, Object.assign({}, props)))));
-};
-exports.BYOCWrapper = BYOCWrapper;

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
-const react_1 = __importDefault(require("react"));
-const DefaultEmptyFieldEditingComponentText = (props) => {
-    return react_1.default.createElement(props.tag || 'span', props, '[No text in field]');
-};
-exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
-const DefaultEmptyFieldEditingComponentImage = (props) => {
-    const inlineStyles = {
-        minWidth: '48px',
-        minHeight: '48px',
-        maxWidth: '400px',
-        maxHeight: '400px',
-        cursor: 'pointer',
-    };
-    return (react_1.default.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', style: inlineStyles, className: `scEmptyImage ${props.className || ''}` })));
-};
-exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/components/DesignLibrary.js

@@ -1,72 +0,0 @@
-"use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesignLibrary = void 0;
-const react_1 = __importStar(require("react"));
-const Placeholder_1 = require("./Placeholder");
-const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
-const DesignLibrary = (layoutData) => {
-    const { route } = layoutData.sitecore;
-    const isDesignLibrary = layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component;
-    if (!isDesignLibrary) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
-    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
-    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
-    let componentReady = false;
-    // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
-        rootComponent,
-        rootUpdate,
-    ]);
-    route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    (0, react_1.useEffect)(() => {
-        // useEffect will fire when components are ready - and we inform the whole wide world of it too
-        if (!componentReady) {
-            componentReady = true;
-            window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("main", null,
-            react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
-exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/EditingScripts.js

@@ -1,47 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditingScripts = void 0;
-const react_1 = __importDefault(require("react"));
-const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
-const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
-const editing_2 = require("@sitecore-jss/sitecore-jss/editing");
-/**
- * - Renders client scripts and data for editing/preview mode for Pages
- * - Renders script required for the Design Library (when RenderingType is `component`).
- * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
- */
-const EditingScripts = () => {
-    var _a;
-    const { sitecoreContext: { pageState, editMode, clientData, clientScripts, renderingType }, api, } = (0, withSitecoreContext_1.useSitecoreContext)();
-    // Don't render anything if not in editing/preview mode and rendering type is not component
-    if (renderingType !== layout_1.RenderingType.Component &&
-        (pageState === layout_1.LayoutServicePageState.Normal || pageState === layout_1.LayoutServicePageState.Preview)) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
-    // In case of RenderingType.Component - render only the script for Design Libnrary
-    if (renderingType === layout_1.RenderingType.Component) {
-        // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
-        const now = new Date();
-        const hour = String(now.getUTCHours()).padStart(2, '0');
-        const day = String(now.getUTCDate()).padStart(2, '0');
-        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
-        const year = String(now.getUTCFullYear());
-        const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
-        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
-    }
-    if (editMode === layout_1.EditMode.Metadata) {
-        const jssClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getJssPagesClientData)());
-        return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
-            clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
-            Object.keys(jssClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
-    }
-    return react_1.default.createElement(react_1.default.Fragment, null);
-};
-exports.EditingScripts = EditingScripts;