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

package/dist/esm/components/PlaceholderMetadata.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-jss/sitecore-jss/layout';
-import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@sitecore-jss/sitecore-jss/editing';
-/**
- * A React component to generate metadata blocks for a placeholder or rendering.
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
- * or as a rendering to properly render the surrounding code blocks.
- * @param {object} props The properties passed to the component.
- * @param {ComponentRendering} props.rendering The rendering data.
- * @param {string} [props.placeholderName] The name of the placeholder.
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
- */
-export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
-    const getCodeBlockAttributes = (kind, id, placeholderName) => {
-        const chrometype = placeholderName ? 'placeholder' : 'rendering';
-        const attributes = {
-            type: 'text/sitecore',
-            chrometype: chrometype,
-            className: 'scpm',
-            kind: kind,
-        };
-        if (kind === MetadataKind.Open) {
-            if (chrometype === 'placeholder' && placeholderName) {
-                let phId = '';
-                for (const placeholder of Object.keys(rendering.placeholders)) {
-                    if (placeholderName === placeholder) {
-                        phId = id
-                            ? `${placeholderName}_${id}`
-                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
-                        break;
-                    }
-                    // Check if the placeholder is a dynamic placeholder
-                    if (isDynamicPlaceholder(placeholder)) {
-                        const pattern = getDynamicPlaceholderPattern(placeholder);
-                        // Check if the placeholder matches the dynamic placeholder pattern
-                        if (pattern.test(placeholderName)) {
-                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
-                            break;
-                        }
-                    }
-                }
-                attributes.id = phId;
-            }
-            else {
-                attributes.id = id;
-            }
-        }
-        return attributes;
-    };
-    const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
-        children,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
-    return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
-};

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -1,36 +0,0 @@
-import React, { forwardRef } from 'react';
-import { isFieldValueEmpty, } from '@sitecore-jss/sitecore-jss/layout';
-/**
- * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
- */
-export function withEmptyFieldEditingComponent(FieldComponent, options) {
-    const getEmptyFieldEditingComponent = (props) => {
-        var _a;
-        const { editable = true } = props;
-        if (((_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata) && editable && isFieldValueEmpty(props.field)) {
-            const Component = props.emptyFieldEditingComponent || options.defaultEmptyFieldEditingComponent;
-            let resolvedProps = props;
-            // If no custom empty field editing component is provided, we can omit unnecessary props
-            // to do not insert them to html
-            if (!props.emptyFieldEditingComponent) {
-                resolvedProps = Object.assign(Object.assign({}, props), { editable: undefined, field: undefined });
-            }
-            return React.createElement(Component, Object.assign({}, resolvedProps));
-        }
-        return null;
-    };
-    if (options.isForwardRef) {
-        // eslint-disable-next-line react/display-name
-        return forwardRef((props, ref) => {
-            const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-            return (emptyFieldEditingComponent || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
-        });
-    }
-    // eslint-disable-next-line react/display-name
-    return (props) => {
-        const emptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
-        return emptyFieldEditingComponent || React.createElement(FieldComponent, Object.assign({}, props));
-    };
-}

package/dist/esm/enhancers/withFieldMetadata.js

@@ -1,33 +0,0 @@
-import React, { forwardRef } from 'react';
-import { FieldMetadata } from '../components/FieldMetadata';
-/**
- * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {boolean} isForwardRef set to 'true' if forward reference is needed
- */
-export function withFieldMetadata(FieldComponent, isForwardRef = false) {
-    if (isForwardRef) {
-        // eslint-disable-next-line react/display-name
-        return forwardRef((props, ref) => {
-            var _a;
-            const { editable = true } = props;
-            const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
-            if (!metadata || !editable) {
-                return React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }));
-            }
-            return (React.createElement(FieldMetadata, { metadata: metadata },
-                React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
-        });
-    }
-    // eslint-disable-next-line react/display-name
-    return (props) => {
-        var _a;
-        const { editable = true } = props;
-        const metadata = (_a = props.field) === null || _a === void 0 ? void 0 : _a.metadata;
-        if (!metadata || !editable) {
-            return React.createElement(FieldComponent, Object.assign({}, props));
-        }
-        return (React.createElement(FieldMetadata, { metadata: metadata },
-            React.createElement(FieldComponent, Object.assign({}, props))));
-    };
-}

package/types/components/BYOCComponent.d.ts

@@ -1,91 +0,0 @@
-/// <reference types="@types/react" />
-import React from 'react';
-import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
-import { MissingComponentProps } from './MissingComponent';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
-/**
- * FEaaS props for server rendering.
- */
-type BYOCServerProps = {
-    /**
-     * Fetched data from server component props for server rendering, based on rendering params.
-     */
-    fetchedData?: FEAAS.DataScopes;
-};
-/**
- * Data from rendering params on Sitecore's BYOC rendering
- */
-export type BYOCComponentParams = {
-    /**
-     * Name of the component to render
-     */
-    ComponentName?: string;
-    /**
-     * JSON props to pass into rendered component
-     */
-    ComponentProps?: string;
-    /**
-     * A JSON object with data sources to be fetched and passed to the component
-     */
-    ComponentDataOverride?: string;
-    /**
-     * A string with classes that can be used to apply themes, via SXA functionality
-     */
-    styles?: string;
-    RenderingIdentifier?: string;
-};
-/**
- * Props for BYOCComponent. Includes components list to load external components from.
- */
-export type BYOCComponentClientProps = {
-    /**
-     * rendering data
-     */
-    rendering: ComponentRendering;
-    /**
-     * rendering params
-     */
-    params?: BYOCComponentParams;
-    /**
-     * fields from datasource items to be passed as rendered child component props
-     */
-    fields?: ComponentFields;
-    /**
-     * Error component override. To be shown when Renderer or underlying component throws
-     */
-    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
-    /**
-     * Override to indicate missing component situations. Would be shown when BYOC component is not registered
-     * or ComponentName is missing
-     */
-    missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
-};
-export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
-type ErrorComponentProps = {
-    [prop: string]: unknown;
-    error?: Error;
-};
-/**
- * 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
- */
-export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
-    state: Readonly<{
-        error?: Error;
-    }>;
-    constructor(props: BYOCComponentProps);
-    static getDerivedStateFromError(error: Error): {
-        error: Error;
-    };
-    componentDidCatch(error: Error): void;
-    render(): React.JSX.Element;
-}
-/**
- * Fetches server component props required for server rendering, based on rendering params.
- * @param {BYOCComponentParams} params component params
- */
-export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCServerProps>;
-export {};

package/types/components/BYOCWrapper.d.ts

@@ -1,4 +0,0 @@
-import { BYOCComponentProps } from './BYOCComponent';
-import { JSX } from 'react';
-export declare const BYOC_WRAPPER_RENDERING_NAME = "BYOCWrapper";
-export declare const BYOCWrapper: (props: BYOCComponentProps) => JSX.Element;

package/types/components/DefaultEmptyFieldEditingComponents.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="@types/react" />
-import React from 'react';
-export declare const DefaultEmptyFieldEditingComponentText: React.FC<{
-    [key: string]: unknown;
-    tag?: string;
-}>;
-export declare const DefaultEmptyFieldEditingComponentImage: React.FC<{
-    [key: string]: unknown;
-    className?: string;
-}>;

package/types/components/DesignLibrary.d.ts

@@ -1,3 +0,0 @@
-import { JSX } from 'react';
-import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
-export declare const DesignLibrary: (layoutData: LayoutServiceData) => JSX.Element;

package/types/components/EditingScripts.d.ts

@@ -1,8 +0,0 @@
-import { JSX } from 'react';
-/**
- * - 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.
- */
-export declare const EditingScripts: () => JSX.Element;

package/types/components/FEaaSComponent.d.ts

@@ -1,72 +0,0 @@
-import { JSX } from 'react';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
-export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
-/**
- * Params from a Sitecore FEaaS rendering
- */
-export type FEaaSComponentParams = {
-    LibraryId?: string;
-    ComponentId?: string;
-    ComponentVersion?: string;
-    ComponentRevision?: RevisionType;
-    ComponentHostName?: string;
-    ComponentInstanceId?: string;
-    ComponentDataOverride?: string;
-    ComponentHTMLOverride?: string;
-    styles?: string;
-    RenderingIdentifier?: string;
-};
-type RevisionType = number | 'staged' | 'published' | 'saved';
-/**
- * FEaaS props for server rendering.
- */
-type FEaaSComponentServerProps = {
-    /**
-     * HTML template for presentation rendered inside the component
-     */
-    template?: string;
-    /**
-     * Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
-     */
-    revisionFallback?: RevisionType;
-    /**
-     * Fetched data from server component props for server rendering, based on rendering params.
-     */
-    fetchedData?: FEAAS.DataScopes;
-};
-/**
- * FEaaS props for client side component. Should be used as fallback when server props are not provided.
- * Would also be passed on server to avoid hydration issues
- */
-type FEaaSComponentClientProps = {
-    /**
-     * parameters from Sitecore's FEAAS component
-     */
-    params?: FEaaSComponentParams;
-    /**
-     * field data from component's datasource
-     */
-    fields?: ComponentFields;
-};
-export type FEaaSComponentProps = FEaaSComponentServerProps & FEaaSComponentClientProps;
-/**
- * @param {FEaaSComponentProps} props component props
- */
-export declare const FEaaSComponent: (props: FEaaSComponentProps) => JSX.Element;
-/**
- * Fetches server component props required for server rendering, based on rendering params.
- * Component endpoint will either be retrieved from params or from endpointOverride
- * @param {FEaaSComponentParams} params component params
- * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
- * @param {string} [endpointOverride] optional override for component endpoint
- */
-export declare function fetchFEaaSComponentServerProps(params: FEaaSComponentParams, pageState?: LayoutServicePageState, endpointOverride?: string): Promise<FEaaSComponentProps>;
-/**
- * Build component endpoint URL from component's params
- * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
- * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
- * @returns component endpoint URL
- */
-export declare const composeComponentEndpoint: (params: FEaaSComponentParams, revisionFallback: RevisionType) => string;
-export {};

package/types/components/FEaaSWrapper.d.ts

@@ -1,4 +0,0 @@
-import { FEaaSComponentProps } from './FEaaSComponent';
-import { JSX } from 'react';
-export declare const FEAAS_WRAPPER_RENDERING_NAME = "FEaaSWrapper";
-export declare const FEaaSWrapper: (props: FEaaSComponentProps) => JSX.Element;

package/types/components/FieldMetadata.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="@types/react" />
-import React, { JSX } from 'react';
-interface FieldMetadataProps {
-    metadata: {
-        [key: string]: unknown;
-    };
-    children: React.ReactNode;
-}
-/**
- * The component which renders field metadata markup
- * @param {FieldMetadataProps} props the props of the component
- * @returns metadata markup wrapped around children
- */
-export declare const FieldMetadata: {
-    (props: FieldMetadataProps): JSX.Element;
-    displayName: string;
-};
-export {};

package/types/components/Form.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="@types/react" />
-import React from 'react';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
-/**
- * Mock function to replace the form module functions for `testing` purposes.
- * @param {any} formModule - The form module to mock
- */
-export declare const mockFormModule: (formModule: any) => void;
-/**
- * Shape of the Form component rendering data.
- * FormId is the rendering parameter that specifies the ID of the Sitecore Form to render.
- */
-export type FormProps = {
-    rendering: ComponentRendering;
-    params: {
-        /**
-         * The ID of the Sitecore Form to render.
-         */
-        FormId: string;
-        /**
-         * The CSS class to apply to the form.
-         */
-        styles?: string;
-        /**
-         * The unique identifier of the rendering.
-         */
-        RenderingIdentifier?: string;
-    };
-};
-export declare const Form: ({ params, rendering }: FormProps) => React.JSX.Element;

package/types/components/PlaceholderMetadata.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="@types/react" />
-import { ReactNode, JSX } from 'react';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
-/**
- *  Props containing the component data to render.
- */
-export interface PlaceholderMetadataProps {
-    rendering: ComponentRendering;
-    placeholderName?: string;
-    children?: ReactNode;
-}
-export type CodeBlockAttributes = {
-    type: string;
-    chrometype: string;
-    className: string;
-    kind: string;
-    id?: string;
-};
-/**
- * A React component to generate metadata blocks for a placeholder or rendering.
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
- * or as a rendering to properly render the surrounding code blocks.
- * @param {object} props The properties passed to the component.
- * @param {ComponentRendering} props.rendering The rendering data.
- * @param {string} [props.placeholderName] The name of the placeholder.
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
- */
-export declare const PlaceholderMetadata: ({ rendering, placeholderName, children, }: PlaceholderMetadataProps) => JSX.Element;

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="@types/react" />
-import React, { ComponentType } from 'react';
-import { GenericFieldValue, Field, FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
-/**
- * The HOC options
- */
-export interface WithEmptyFieldEditingComponentOptions {
-    /**
-     * the default empty field component
-     */
-    defaultEmptyFieldEditingComponent: React.FC;
-    /**
-     * 'true' if forward reference is needed
-     */
-    isForwardRef?: boolean;
-}
-interface WithEmptyFieldEditingComponentProps<Props> {
-    field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
-    editable?: boolean;
-    emptyFieldEditingComponent?: React.ComponentClass<Props> | React.FC<Props>;
-}
-/**
- * Returns the passed field component or default component in case field value is empty and edit mode is 'metadata'
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {WithEmptyFieldEditingComponentProps} options the options of the HOC;
- */
-export declare function withEmptyFieldEditingComponent<FieldComponentProps extends WithEmptyFieldEditingComponentProps<FieldComponentProps>, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, options: WithEmptyFieldEditingComponentOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
-export {};

package/types/enhancers/withFieldMetadata.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="@types/react" />
-import React, { ComponentType } from 'react';
-interface WithMetadataProps {
-    field?: {
-        metadata?: {
-            [key: string]: unknown;
-        };
-    };
-    editable?: boolean;
-}
-/**
- * Wraps the field component with metadata markup intended to be used for chromes hydration in Pages
- * @param {ComponentType<FieldComponentProps>} FieldComponent the field component
- * @param {boolean} isForwardRef set to 'true' if forward reference is needed
- */
-export declare function withFieldMetadata<FieldComponentProps extends WithMetadataProps, RefElementType = HTMLElement>(FieldComponent: ComponentType<FieldComponentProps>, isForwardRef?: boolean): React.ForwardRefExoticComponent<React.PropsWithoutRef<FieldComponentProps> & React.RefAttributes<RefElementType>> | ((props: FieldComponentProps) => React.JSX.Element);
-export {};