@sitecore-content-sdk/react 0.1.0-beta.1

package/dist/esm/index.js

@@ -0,0 +1,28 @@
+export { constants, enableDebug, ClientError, MemoryCacheClient, NativeDataFetcher, } from '@sitecore-content-sdk/core';
+export { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-content-sdk/core/layout';
+export { GraphQLDictionaryService, } from '@sitecore-content-sdk/core/i18n';
+export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-content-sdk/core/graphql';
+export { mediaApi } from '@sitecore-content-sdk/core/media';
+export { Placeholder } from './components/Placeholder';
+export { Image, } from './components/Image';
+export { RichText, RichTextPropTypes } from './components/RichText';
+export { Text } from './components/Text';
+export { DateField } from './components/Date';
+export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
+export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
+export { Link, LinkPropTypes } from './components/Link';
+export { File } from './components/File';
+export { SitecoreContext, SitecoreContextReactContext, } from './components/SitecoreContext';
+export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSitecoreContext';
+export { withEditorChromes } from './enhancers/withEditorChromes';
+export { withPlaceholder } from './enhancers/withPlaceholder';
+export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
+export { ComponentBuilder } from './ComponentBuilder';
+export { withFieldMetadata } from './enhancers/withFieldMetadata';
+export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
+export { EditingScripts } from './components/EditingScripts';
+export { DefaultEmptyFieldEditingComponentText, DefaultEmptyFieldEditingComponentImage, } from './components/DefaultEmptyFieldEditingComponents';

package/dist/esm/utils.js

@@ -0,0 +1,33 @@
+import { getFieldValue } from '@sitecore-content-sdk/core/layout';
+/**
+ * "class" property will be transformed into or appended to "className" instead.
+ * @param {string} otherAttrs all other props included on the image component
+ * @returns {void}
+ */
+export const addClassName = (otherAttrs) => {
+    if (otherAttrs.class) {
+        // if any classes are defined properly already
+        if (otherAttrs.className) {
+            let className = otherAttrs.className;
+            className += ` ${otherAttrs.class}`;
+            otherAttrs.className = className;
+        }
+        else {
+            otherAttrs.className = otherAttrs.class;
+        }
+        delete otherAttrs.class;
+    }
+};
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = getFieldValue(fields, key);
+        return acc;
+    }, data);
+    return data;
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@sitecore-content-sdk/react",
+  "version": "0.1.0-beta.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig-esm.json",
+    "clean": "del-cli dist types",
+    "lint": "eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
+    "test": "mocha --require ts-node/register/transpile-only --require ./src/tests/jsdom-setup.ts \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
+    "prepublishOnly": "npm run build",
+    "coverage": "nyc npm test",
+    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --outputFileStrategy Members --parametersFormat table --readme none --out ../../ref-docs/react src/index.ts --githubPages false"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://jss.sitecore.com",
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "devDependencies": {
+    "@sitecore-feaas/clientside": "^0.5.19",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.6.0",
+    "@types/chai": "^5.0.1",
+    "@types/chai-string": "^1.4.5",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "22.12.0",
+    "@types/prop-types": "^15.7.14",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.0.10",
+    "@types/sinon": "^17.0.3",
+    "@types/sinon-chai": "^4.0.0",
+    "chai": "^4.3.7",
+    "chai-string": "^1.5.0",
+    "del-cli": "^6.0.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.31.11",
+    "jsdom": "^26.0.0",
+    "mocha": "^11.1.0",
+    "nyc": "^17.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sinon": "^19.0.2",
+    "sinon-chai": "^3.7.0",
+    "ts-node": "^10.9.1",
+    "typescript": "~5.7.3"
+  },
+  "peerDependencies": {
+    "@sitecore-feaas/clientside": "^0.5.19",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@sitecore-content-sdk/core": "^0.1.0-beta.1",
+    "fast-deep-equal": "^3.1.3",
+    "prop-types": "^15.8.1"
+  },
+  "description": "",
+  "types": "types/index.d.ts",
+  "gitHead": "11e6c0ce4b6bcaf8a5ddffa39a921c8dd145e603",
+  "files": [
+    "dist",
+    "types"
+  ]
+}

package/types/ComponentBuilder.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType } from 'react';
+import { ComponentFactory } from './components/sharedTypes';
+/**
+ * Configuration for ComponentBuilder
+ */
+export type ComponentBuilderConfig<ComponentType> = {
+    /**
+     * List of components to be stored
+     */
+    components: Map<string, ComponentType>;
+};
+/**
+ * React implementation of component builder class for building components based on the configuration.
+ */
+export declare class ComponentBuilder {
+    protected config: ComponentBuilderConfig<ComponentType>;
+    /**
+     * List of components to be stored
+     */
+    protected components: Map<string, ComponentType>;
+    constructor(config: ComponentBuilderConfig<ComponentType>);
+    /**
+     * Creates a new instance of component factory
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory(): ComponentFactory;
+}

package/types/components/BYOCComponent.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ComponentFields, ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import { MissingComponentProps } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
+/**
+ * TODO: remove when framework agnostic forms implemented
+ */
+/**
+ * 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

@@ -0,0 +1,6 @@
+import { BYOCComponentProps } from './BYOCComponent';
+export declare const BYOC_WRAPPER_RENDERING_NAME = "BYOCWrapper";
+/**
+ * TODO: remove when framework agnostic forms implemented
+ */
+export declare const BYOCWrapper: (props: BYOCComponentProps) => JSX.Element;

package/types/components/ComponentLibraryLayout.d.ts

@@ -0,0 +1,2 @@
+import { LayoutServiceData } from '@sitecore-content-sdk/core/layout';
+export declare const ComponentLibraryLayout: (layoutData: LayoutServiceData) => JSX.Element;

package/types/components/Date.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
+export interface DateFieldProps extends EditableFieldProps {
+    /** The date field data. */
+    [htmlAttributes: string]: unknown;
+    field: FieldMetadata & {
+        value?: string;
+    };
+    /**
+     * The HTML element that will wrap the contents of the field.
+     */
+    tag?: string;
+    render?: (date: Date | null) => React.ReactNode;
+}
+export declare const DateField: React.FC<DateFieldProps>;

package/types/components/DefaultEmptyFieldEditingComponents.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DefaultEmptyFieldEditingComponentText: React.FC;
+export declare const DefaultEmptyFieldEditingComponentImage: React.FC;

package/types/components/EditingScripts.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Renders client scripts and data for editing/preview mode in Pages.
+ */
+export declare const EditingScripts: () => JSX.Element;

package/types/components/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import { SitecoreContextValue } from './SitecoreContext';
+type ErrorComponentProps = {
+    [prop: string]: unknown;
+};
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    sitecoreContext: SitecoreContextValue;
+    type: string;
+    isDynamic?: boolean;
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    rendering?: ComponentRendering;
+    componentLoadingMessage?: string;
+};
+declare const _default: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;
+export default _default;

package/types/components/FEaaSComponent.d.ts

@@ -0,0 +1,71 @@
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { ComponentFields, LayoutServicePageState } from '@sitecore-content-sdk/core/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

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

package/types/components/FieldMetadata.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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;
+    propTypes: {
+        metadata: PropTypes.Validator<object>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export {};

package/types/components/File.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FileFieldValue {
+    [propName: string]: unknown;
+    src?: string;
+    title?: string;
+    displayName?: string;
+}
+export interface FileField {
+    value: FileFieldValue;
+}
+export interface FileProps {
+    [attributeName: string]: unknown;
+    /** The file field data. */
+    field: FileFieldValue | FileField;
+    /** HTML attributes that will be appended to the rendered <a /> tag. */
+    children?: React.ReactNode;
+}
+export declare const File: React.FC<FileProps>;

package/types/components/HiddenRendering.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const HiddenRendering: () => React.JSX.Element;

package/types/components/Image.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
+export interface ImageFieldValue {
+    [attributeName: string]: unknown;
+    src?: string;
+}
+export interface ImageField {
+    value?: ImageFieldValue;
+}
+export interface ImageSizeParameters {
+    [attr: string]: string | number | undefined;
+    /** Fixed width of the image */
+    w?: number;
+    /** Fixed height of the image */
+    h?: number;
+    /** Max width of the image */
+    mw?: number;
+    /** Max height of the image */
+    mh?: number;
+    /** Ignore aspect ratio */
+    iar?: 1 | 0;
+    /** Allow stretch */
+    as?: 1 | 0;
+    /** Image scale. Defaults to 1.0 */
+    sc?: number;
+}
+export interface ImageProps extends EditableFieldProps {
+    [attributeName: string]: unknown;
+    /** Image field data (consistent with other field types) */
+    field?: (ImageField | ImageFieldValue) & FieldMetadata;
+    /**
+     * Parameters that will be attached to Sitecore media URLs
+     */
+    imageParams?: {
+        [paramName: string]: string | number;
+    };
+    srcSet?: ImageSizeParameters[];
+    /**
+     * Custom regexp that finds media URL prefix that will be replaced by `/-/jssmedia` or `/~/jssmedia`.
+     * @example
+     * /\/([-~]{1})assets\//i
+     * /-assets/website -> /-/jssmedia/website
+     * /~assets/website -> /~/jssmedia/website
+     */
+    mediaUrlPrefix?: RegExp;
+}
+export declare const Image: React.FC<ImageProps>;

package/types/components/Link.d.ts

@@ -0,0 +1,38 @@
+import React, { RefAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { FieldMetadata } from '@sitecore-content-sdk/core/layout';
+import { EditableFieldProps } from './sharedTypes';
+export interface LinkFieldValue {
+    [attributeName: string]: unknown;
+    href?: string;
+    className?: string;
+    class?: string;
+    title?: string;
+    target?: string;
+    text?: string;
+    anchor?: string;
+    querystring?: string;
+    linktype?: string;
+}
+export interface LinkField {
+    value: LinkFieldValue;
+}
+export type LinkProps = EditableFieldProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement> & {
+    /** The link field data. */
+    field: (LinkField | LinkFieldValue) & FieldMetadata;
+    /**
+     * Displays a link text ('description' in Sitecore) even when children exist
+     */
+    showLinkTextWithChildrenPresent?: boolean;
+};
+export declare const Link: React.FC<LinkProps>;
+export declare const LinkPropTypes: {
+    field: PropTypes.Validator<NonNullable<NonNullable<PropTypes.InferProps<{
+        href: PropTypes.Requireable<any>;
+    }> | PropTypes.InferProps<{
+        value: PropTypes.Requireable<object>;
+    }>>>>;
+    editable: PropTypes.Requireable<boolean>;
+    showLinkTextWithChildrenPresent: PropTypes.Requireable<boolean>;
+    emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
+};

package/types/components/MissingComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MissingComponentProps {
+    rendering?: {
+        componentName?: string;
+    };
+    errorOverride?: string;
+}
+export declare const MissingComponent: React.FC<MissingComponentProps>;

package/types/components/Placeholder.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PlaceholderProps } from './PlaceholderCommon';
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+export interface PlaceholderComponentProps extends PlaceholderProps {
+    /**
+     * Render props function that is called when the placeholder contains no content components.
+     */
+    renderEmpty?: (components: React.ReactNode[]) => React.ReactNode;
+    /**
+     * Render props function that enables control over the rendering of the components in the placeholder.
+     * Useful for techniques like wrapping each child in a wrapper component.
+     */
+    render?: (components: React.ReactNode[], data: ComponentRendering[], props: PlaceholderProps) => React.ReactNode;
+    /**
+     * Render props function that is called for each non-system component added to the placeholder.
+     * Mutually exclusive with `render`.
+     */
+    renderEach?: (component: React.ReactNode, index: number) => React.ReactNode;
+}
+export declare const Placeholder: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<PlaceholderComponentProps, keyof import("../enhancers/withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;

package/types/components/PlaceholderCommon.d.ts

@@ -0,0 +1,98 @@
+import React, { ComponentType } from 'react';
+import PropTypes, { Requireable } from 'prop-types';
+import { ComponentFactory } from './sharedTypes';
+import { ComponentRendering, RouteData, Field, Item } from '@sitecore-content-sdk/core/layout';
+import { SitecoreContextValue } from './SitecoreContext';
+type ErrorComponentProps = {
+    [prop: string]: unknown;
+};
+/** Provided for the component which represents rendering data */
+export type ComponentProps = {
+    [key: string]: unknown;
+    rendering: ComponentRendering;
+};
+export interface PlaceholderProps {
+    [key: string]: unknown;
+    /** Name of the placeholder to render. */
+    name: string;
+    /** Rendering data to be used when rendering the placeholder. */
+    rendering: ComponentRendering | RouteData;
+    /**
+     * A factory function that will receive a componentName and return an instance of a React component.
+     * When rendered within a <SitecoreContext> component, defaults to the context componentFactory.
+     */
+    componentFactory?: ComponentFactory;
+    /**
+     * An object of field names/values that are aggregated and propagated through the component tree created by a placeholder.
+     * Any component or placeholder rendered by a placeholder will have access to this data via `props.fields`.
+     */
+    fields?: {
+        [name: string]: Field | Item[];
+    };
+    /**
+     * An object of rendering parameter names/values that are aggregated and propagated through the component tree created by a placeholder.
+     * Any component or placeholder rendered by a placeholder will have access to this data via `props.params`.
+     */
+    params?: {
+        [name: string]: string;
+    };
+    /**
+     * Modify final props of component (before render) provided by rendering data.
+     * Can be used in case when you need to insert additional data into the component.
+     * @param {ComponentProps} componentProps component props to be modified
+     * @returns {ComponentProps} modified or initial props
+     */
+    modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
+    /**
+     * 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)
+     */
+    missingComponentComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+    /**
+     * A component that is rendered in place of any components that are hidden
+     */
+    hiddenRenderingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+    /**
+     * A component that is rendered in place of the placeholder when an error occurs rendering
+     * the placeholder
+     */
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    /**
+     *  Context data from the Sitecore Layout Service
+     */
+    sitecoreContext: SitecoreContextValue;
+    /**
+     * The message that gets displayed while component is loading
+     */
+    componentLoadingMessage?: string;
+}
+export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
+    static propTypes: {
+        rendering: PropTypes.Validator<NonNullable<NonNullable<ComponentRendering<import("@sitecore-content-sdk/core/layout").ComponentFields> | RouteData<Record<string, Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item | Item[]>>>>>;
+        fields: PropTypes.Requireable<{
+            [x: string]: NonNullable<NonNullable<Field<import("@sitecore-content-sdk/core/layout").GenericFieldValue> | Item[]>>;
+        }>;
+        params: PropTypes.Requireable<{
+            [x: string]: string;
+        }>;
+        missingComponentComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
+        hiddenRenderingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
+        errorComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
+        modifyComponentProps: PropTypes.Requireable<(...args: any[]) => any>;
+        sitecoreContext: Requireable<SitecoreContextValue>;
+    };
+    state: Readonly<{
+        error?: Error;
+    }>;
+    constructor(props: T);
+    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, isEditing: boolean): ComponentRendering<import("@sitecore-content-sdk/core/layout").ComponentFields>[];
+    componentDidCatch(error: Error): void;
+    getSXAParams(rendering: ComponentRendering): {
+        styles?: undefined;
+    } | {
+        styles: string;
+    };
+    getComponentsForRenderingData(placeholderData: ComponentRendering[]): React.JSX.Element[];
+    getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null;
+}
+export {};