@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.3 → 22.1.0-canary.31

package/types/components/Placeholder.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="@types/react" />
 import React from 'react';
-import { PlaceholderComponentProps } from '@sitecore-jss/sitecore-jss-react';
-export declare const Placeholder: (props: PlaceholderComponentProps) => React.JSX.Element;
+import { PlaceholderComponentProps, WithSitecoreContextProps, EnhancedOmit } from '@sitecore-jss/sitecore-jss-react';
+/**
+ * React Placeholder component wrapped by withSitecoreContext, so these properties shouldn't be passed to the Next.js Placeholder.
+ */
+type PlaceholderProps = EnhancedOmit<PlaceholderComponentProps, keyof WithSitecoreContextProps>;
+export declare const Placeholder: (props: PlaceholderProps) => React.JSX.Element;
+export {};

package/types/components/RichText.d.ts

@@ -19,14 +19,13 @@ export declare const RichText: {
         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>;
         internalLinksSelector: PropTypes.Requireable<string>;
     };
-    defaultProps: {
-        tag: string;
-        editable: boolean;
-    };
     displayName: string;
 };

package/types/editing/constants.d.ts

@@ -1,3 +1,7 @@
 export declare const QUERY_PARAM_EDITING_SECRET = "secret";
 export declare const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = "x-sitecore-protection-bypass";
 export declare const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = "x-vercel-protection-bypass";
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
+export declare const EDITING_ALLOWED_ORIGINS: string[];

package/types/editing/editing-config-middleware.d.ts

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
 import { Metadata } from '@sitecore-jss/sitecore-jss-dev-tools';
 export type EditingConfigMiddlewareConfig = {
     /**
@@ -9,6 +10,12 @@ export type EditingConfigMiddlewareConfig = {
      * Application metadata
      */
     metadata: Metadata;
+    /**
+     * Determines which editing mode should be used by Pages.
+     * Can be either 'chromes' or 'metadata'.
+     * By default its 'metadata'
+     */
+    pagesEditMode?: EditMode;
 };
 /**
  * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')

package/types/editing/editing-data-service.d.ts

@@ -4,6 +4,7 @@ import { EditingDataCache } from './editing-data-cache';
 import { PreviewData } from 'next';
 /**
  * Data for Next.js Preview (Editing) mode
+ * Used in Chromes Edit Mode only
  */
 export interface EditingPreviewData {
     key: string;

package/types/editing/editing-render-middleware.d.ts

@@ -1,16 +1,23 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss';
-import { EditingData } from './editing-data';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { EditingDataService } from './editing-data-service';
 import { RenderMiddlewareBase } from './render-middleware';
-export interface EditingRenderMiddlewareConfig {
+/**
+ * Configuration for the Editing Render Middleware.
+ */
+export type EditingRenderMiddlewareConfig = {
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `AxiosDataFetcher` instance to use for API requests.
      * @default new AxiosDataFetcher()
      * @see AxiosDataFetcher
      */
     dataFetcher?: AxiosDataFetcher;
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `EditingDataService` instance to use.
      * This would typically only be necessary if you've got a custom `EditingDataService` instance (e.g. using a custom API route).
      * By default, this is `editingDataService` (the `EditingDataService` default instance).
@@ -20,16 +27,25 @@ export interface EditingRenderMiddlewareConfig {
      */
     editingDataService?: EditingDataService;
     /**
+     * -- Edit Mode Chromes / Metadata --
+     *
      * Function used to determine route/page URL to render.
      * This may be necessary for certain custom Next.js routing configurations.
-     * @param {string} serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'. Available in Chromes Edit Mode only.
      * @param {string} itemPath The Sitecore relative item path e.g. '/styleguide'
      * @returns {string} The URL to render
-     * @default `${serverUrl}${itemPath}`
+     * @default `${serverUrl}${itemPath}` In Edit Mode Chromes
+     * @default `${itemPath}` In XMCloud Pages for Edit Mode Metadata
      * @see resolveServerUrl
      */
-    resolvePageUrl?: (serverUrl: string, itemPath: string) => string;
+    resolvePageUrl?: (args: {
+        serverUrl?: string;
+        itemPath: string;
+    }) => string;
     /**
+     * -- Edit Mode Chromes --
+     *
      * Function used to determine the root server URL. This is used for the route/page and subsequent data API requests.
      * By default, the host header is used, with https protocol on Vercel (due to serverless function architecture) and http protocol elsewhere.
      * @param {NextApiRequest} req The current request.
@@ -37,30 +53,29 @@ export interface EditingRenderMiddlewareConfig {
      * @see resolvePageUrl
      */
     resolveServerUrl?: (req: NextApiRequest) => string;
-}
+};
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Configuration for the Editing Chromes Handler.
  */
-export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+export type EditingRenderMiddlewareChromesConfig = EditingRenderMiddlewareConfig;
+/**
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
+ */
+export declare class ChromesHandler extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
     private editingDataService;
     private dataFetcher;
     private resolvePageUrl;
     private resolveServerUrl;
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
-    constructor(config?: EditingRenderMiddlewareConfig);
-    /**
-     * Gets the Next.js API route handler
-     * @returns route handler
-     */
-    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
-    private handler;
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    render(req: NextApiRequest, res: NextApiResponse): Promise<void>;
     /**
      * Default page URL resolution.
-     * @param {string} serverUrl
-     * @param {string} itemPath
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+     * @returns {string} The URL to render
      */
     private defaultResolvePageUrl;
     /**
@@ -74,8 +89,81 @@ export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
      * @param {NextApiRequest} req
      */
     private defaultResolveServerUrl;
+    private extractEditingData;
+}
+/**
+ * Configuration for the Editing Metadata Handler.
+ */
+export type EditingRenderMiddlewareMetadataConfig = Pick<EditingRenderMiddlewareConfig, 'resolvePageUrl'>;
+/**
+ * Query parameters appended to the page route URL
+ * Appended when XMCloud Pages preview (editing) Metadata Edit Mode is used
+ */
+export type MetadataQueryParams = {
+    secret: string;
+    sc_lang: string;
+    sc_itemid: string;
+    sc_version: string;
+    sc_site: string;
+    route: string;
+    sc_variant: string;
+    mode: Exclude<LayoutServicePageState, 'normal'>;
+};
+/**
+ * Next.js API request with Metadata query parameters.
+ */
+type MetadataNextApiRequest = NextApiRequest & {
+    query: MetadataQueryParams;
+};
+/**
+ * Data for Next.js Preview (Editing) Metadata Edit Mode.
+ */
+export type EditingMetadataPreviewData = {
+    site: string;
+    itemId: string;
+    language: string;
+    variantId: string;
+    version: string;
+    editMode: EditMode.Metadata;
+    pageState: Exclude<LayoutServicePageState, 'Normal'>;
+};
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+export declare const isEditingMetadataPreviewData: (data: unknown) => data is EditingMetadataPreviewData;
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+export declare class MetadataHandler {
+    config: EditingRenderMiddlewareMetadataConfig;
+    constructor(config: EditingRenderMiddlewareMetadataConfig);
+    render(req: MetadataNextApiRequest, res: NextApiResponse): void;
+    /**
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
+     */
+    getSCPHeader(): string;
 }
 /**
- * @param {NextApiRequest} req
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
  */
-export declare function extractEditingData(req: NextApiRequest): EditingData;
+export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
+    private handler;
+}
+export {};

package/types/editing/index.d.ts

@@ -1,7 +1,8 @@
+export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
 export { EditingData } from './editing-data';
 export { EditingDataCache, EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware, EditingDataMiddlewareConfig } from './editing-data-middleware';
-export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, } from './editing-render-middleware';
+export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, EditingMetadataPreviewData, isEditingMetadataPreviewData, } from './editing-render-middleware';
 export { EditingPreviewData, EditingDataService, BasicEditingDataService, BasicEditingDataServiceConfig, ServerlessEditingDataService, ServerlessEditingDataServiceConfig, editingDataService, } from './editing-data-service';
 export { VercelEditingDataCache } from './vercel-editing-data-cache';
 export { FEAASRenderMiddleware, FEAASRenderMiddlewareConfig } from './feaas-render-middleware';

package/types/index.d.ts

@@ -1,5 +1,5 @@
 export { constants, HttpDataFetcher, HttpResponse, AxiosResponse, AxiosDataFetcher, AxiosDataFetcherConfig, NativeDataFetcher, NativeDataFetcherConfig, HTMLLink, enableDebug, debug, } from '@sitecore-jss/sitecore-jss';
-export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, getContentStylesheetLink, } from '@sitecore-jss/sitecore-jss/layout';
+export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, getContentStylesheetLink, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, GraphQLDictionaryServiceConfig, RestDictionaryService, RestDictionaryServiceConfig, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -24,4 +24,4 @@ export { FEaaSWrapper };
 export { BYOCWrapper };
 export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
 export { Context, ContextConfig, SDK } from './context';
-export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, ComponentConsumerProps, WithSitecoreContextOptions, WithSitecoreContextProps, } from '@sitecore-jss/sitecore-jss-react';
+export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';

package/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { getPublicUrl, handleEditorFastRefresh } from './utils';
-export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';