@sitecore-jss/sitecore-jss-react 22.1.0-canary.9 → 22.1.0

package/types/components/PlaceholderCommon.d.ts

@@ -2,7 +2,8 @@
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';
-import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';
+import { ComponentRendering, RouteData, Field, Item, HtmlElementRendering, EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { SitecoreContextValue } from './SitecoreContext';
 type ErrorComponentProps = {
     [prop: string]: unknown;
 };
@@ -11,6 +12,18 @@ export type ComponentProps = {
     [key: string]: unknown;
     rendering: ComponentRendering;
 };
+/**
+ * Returns a regular expression pattern for a dynamic placeholder name.
+ * @param {string} placeholder Placeholder name with a dynamic segment (e.g. 'main-{*}')
+ * @returns Regular expression pattern for the dynamic segment
+ */
+export declare const getDynamicPlaceholderPattern: (placeholder: string) => RegExp;
+/**
+ * Checks if the placeholder name is dynamic.
+ * @param {string} placeholder Placeholder name
+ * @returns True if the placeholder name is dynamic
+ */
+export declare const isDynamicPlaceholder: (placeholder: string) => boolean;
 export interface PlaceholderProps {
     [key: string]: unknown;
     /** Name of the placeholder to render. */
@@ -57,6 +70,10 @@ export interface PlaceholderProps {
      * 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
      */
@@ -64,9 +81,9 @@ export interface PlaceholderProps {
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     static propTypes: {
-        rendering: PropTypes.Validator<NonNullable<NonNullable<ComponentRendering | RouteData<Record<string, Field<import("@sitecore-jss/sitecore-jss/types/layout/models").GenericFieldValue> | Item | Item[]>>>>>;
+        rendering: PropTypes.Validator<NonNullable<NonNullable<ComponentRendering | RouteData<Record<string, Field<import("@sitecore-jss/sitecore-jss/layout").GenericFieldValue> | Item | Item[]>>>>>;
         fields: PropTypes.Requireable<{
-            [x: string]: NonNullable<NonNullable<Field<import("@sitecore-jss/sitecore-jss/types/layout/models").GenericFieldValue> | Item[]>>;
+            [x: string]: NonNullable<NonNullable<Field<import("@sitecore-jss/sitecore-jss/layout").GenericFieldValue> | Item[]>>;
         }>;
         params: PropTypes.Requireable<{
             [x: string]: string;
@@ -75,13 +92,14 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
         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: PropTypes.Requireable<SitecoreContextValue>;
     };
     nodeRefs: Element[];
     state: Readonly<{
         error?: Error;
     }>;
     constructor(props: T);
-    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string): (ComponentRendering | HtmlElementRendering)[];
+    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, editMode?: EditMode): (ComponentRendering | HtmlElementRendering)[];
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;

package/types/components/PlaceholderMetadata.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="@types/react" />
+import { ReactNode } 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/components/RichText.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
-export interface RichTextField {
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
+export interface RichTextField extends FieldMetadata {
     value?: string;
     editable?: string;
 }
-export interface RichTextProps {
+export interface RichTextProps extends EditableFieldProps {
     [htmlAttributes: string]: unknown;
     /** The rich text field data. */
     field?: RichTextField;
@@ -14,19 +16,17 @@ export interface RichTextProps {
      * @default <div />
      */
     tag?: string;
-    /**
-     * 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;
 }
 export declare const RichText: React.FC<RichTextProps>;
 export declare const RichTextPropTypes: {
     field: PropTypes.Requireable<PropTypes.InferProps<{
         value: PropTypes.Requireable<string>;
         editable: PropTypes.Requireable<string>;
+        metadata: PropTypes.Requireable<{
+            [x: string]: any;
+        }>;
     }>>;
     tag: PropTypes.Requireable<string>;
     editable: PropTypes.Requireable<boolean>;
+    emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
 };

package/types/components/Text.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="@types/react" />
-import { FunctionComponent } from 'react';
-export interface TextField {
+import React from 'react';
+import { EditableFieldProps } from './sharedTypes';
+import { FieldMetadata } from '@sitecore-jss/sitecore-jss/layout';
+export interface TextField extends FieldMetadata {
     value?: string | number;
     editable?: string;
 }
-export interface TextProps {
+export interface TextProps extends EditableFieldProps {
     [htmlAttributes: string]: unknown;
     /** The text field data. */
     field?: TextField;
@@ -12,15 +14,9 @@ export interface TextProps {
      * The HTML element that will wrap the contents of the field.
      */
     tag?: string;
-    /**
-     * 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;
     /**
      * If false, HTML-encoding of the field value is disabled and the value is rendered as-is.
      */
     encode?: boolean;
 }
-export declare const Text: FunctionComponent<TextProps>;
+export declare const Text: React.FC<TextProps>;

package/types/components/sharedTypes.d.ts

@@ -4,4 +4,29 @@ import { ComponentType } from 'react';
  * @param {string} componentName component to be imported from the component factory
  * @param {string?} exportName component to be imported in case you export multiple components from the same file
  */
-export type ComponentFactory = (componentName: string, exportName?: string) => ComponentType | null;
+export type ComponentFactory = (componentName: string, exportName?: string) => JssComponentType | null;
+/**
+ * Component type returned from component builder / factory
+ */
+export type JssComponentType = ComponentType & {
+    render?: {
+        [key: string]: unknown;
+    };
+};
+/**
+ * Shared editing field props
+ */
+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<unknown> | React.FC<unknown>;
+}

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -0,0 +1,28 @@
+/// <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 {
+    field?: (Partial<Field> | GenericFieldValue) & FieldMetadata;
+    editable?: boolean;
+    emptyFieldEditingComponent?: React.ComponentClass | React.FC;
+}
+/**
+ * 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, 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

@@ -0,0 +1,17 @@
+/// <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 {};

package/types/enhancers/withPlaceholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
 import { PlaceholderProps } from '../components/PlaceholderCommon';
@@ -31,7 +32,4 @@ export type WithPlaceholderSpec = (string | PlaceholderToPropMapping) | (string
  * @param {WithPlaceholderSpec} placeholders
  * @param {WithPlaceholderOptions} [options]
  */
-export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => {
-    (props: PlaceholderProps): JSX.Element;
-    displayName: string;
-};
+export declare function withPlaceholder(placeholders: WithPlaceholderSpec, options?: WithPlaceholderOptions): (WrappedComponent: React.ComponentClass<PlaceholderProps> | React.FunctionComponent<PlaceholderProps>) => (props: import("@sitecore-jss/sitecore-jss/utils").EnhancedOmit<PlaceholderProps, keyof import("./withSitecoreContext").WithSitecoreContextProps>) => React.JSX.Element;

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="@types/react" />
-import React, { ReactNode } from 'react';
+import React from 'react';
+import { EnhancedOmit } from '@sitecore-jss/sitecore-jss/utils';
 import { SitecoreContextValue } from '../components/SitecoreContext';
 export interface WithSitecoreContextOptions {
     updatable?: boolean;
@@ -8,14 +9,11 @@ export interface WithSitecoreContextProps {
     sitecoreContext: SitecoreContextValue;
     updateSitecoreContext?: ((value: SitecoreContextValue) => void) | false;
 }
-export interface ComponentConsumerProps extends WithSitecoreContextProps {
-    children?: ReactNode;
-}
-export type WithSitecoreContextHocProps<ComponentProps> = Pick<ComponentProps, Exclude<keyof ComponentProps, keyof WithSitecoreContextProps>>;
+export type WithSitecoreContextHocProps<ComponentProps> = EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>;
 /**
  * @param {WithSitecoreContextOptions} [options]
  */
-export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends ComponentConsumerProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreContextHocProps<ComponentProps>) => React.JSX.Element;
+export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends WithSitecoreContextProps>(Component: React.ComponentType<ComponentProps>) => (props: EnhancedOmit<ComponentProps, keyof WithSitecoreContextProps>) => React.JSX.Element;
 /**
  * This hook grants acсess to the current Sitecore page context
  * by default JSS includes the following properties in this context:

package/types/index.d.ts

@@ -1,11 +1,12 @@
 export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/utils';
-export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
+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, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, EditMode, } 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 } from './components/sharedTypes';
+export { ComponentFactory, JssComponentType } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
@@ -19,9 +20,13 @@ export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './com
 export { File, FileField } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
 export { SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, } from './components/SitecoreContext';
-export { withSitecoreContext, useSitecoreContext, ComponentConsumerProps, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, } from './enhancers/withSitecoreContext';
+export { withSitecoreContext, useSitecoreContext, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, } from './enhancers/withSitecoreContext';
 export { withEditorChromes } from './enhancers/withEditorChromes';
 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';