@sitecore-jss/sitecore-jss-react 22.2.0-canary.83 → 22.3.0-canary.1

package/dist/cjs/components/EditingScripts.js

@@ -15,8 +15,9 @@ const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 const EditingScripts = () => {
     const { sitecoreContext: { pageState, editMode, clientData, clientScripts }, } = (0, withSitecoreContext_1.useSitecoreContext)();
     // Don't render anything if not in editing/preview mode
-    if (pageState === layout_1.LayoutServicePageState.Normal)
+    if (pageState === layout_1.LayoutServicePageState.Normal || pageState === layout_1.LayoutServicePageState.Preview) {
         return react_1.default.createElement(react_1.default.Fragment, null);
+    }
     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 :

package/dist/cjs/components/FieldMetadata.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldMetadata = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 /**
  * The component which renders field metadata markup
  * @param {FieldMetadataProps} props the props of the component
@@ -18,8 +19,8 @@ const FieldMetadata = (props) => {
         chrometype: 'field',
         className: 'scpm',
     };
-    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: 'open' });
-    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: 'close' });
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Open });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: editing_1.MetadataKind.Close });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("code", Object.assign({}, codeOpenAttributes), data),
         props.children,

package/dist/cjs/components/PlaceholderCommon.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaceholderCommon = exports.isDynamicPlaceholder = exports.getDynamicPlaceholderPattern = void 0;
+exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const MissingComponent_1 = require("./MissingComponent");
@@ -28,22 +28,6 @@ const BYOCComponent_1 = require("./BYOCComponent");
 const BYOCWrapper_1 = require("./BYOCWrapper");
 const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
 const ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
-/**
- * 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
- */
-const getDynamicPlaceholderPattern = (placeholder) => {
-    return new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`);
-};
-exports.getDynamicPlaceholderPattern = getDynamicPlaceholderPattern;
-/**
- * Checks if the placeholder name is dynamic.
- * @param {string} placeholder Placeholder name
- * @returns True if the placeholder name is dynamic
- */
-const isDynamicPlaceholder = (placeholder) => placeholder.indexOf('{*}') !== -1;
-exports.isDynamicPlaceholder = isDynamicPlaceholder;
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -57,14 +41,14 @@ class PlaceholderCommon extends react_1.default.Component {
         let result;
         let phName = name.slice();
         /**
-         * [Chromes Mode]: [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
-         * from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing.
-         * [Metadata Mode]: We need to keep the raw placeholder name. e.g 'nameOfContainer-{*}' instead of 'nameOfContainer-1'
+         * Process (SXA) dynamic placeholders
+         * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
+         * For Metadata EditMode, we need to keep the raw placeholder name in place.
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
-                const patternPlaceholder = (0, exports.isDynamicPlaceholder)(placeholder)
-                    ? (0, exports.getDynamicPlaceholderPattern)(placeholder)
+                const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
+                    ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
                     : null;
                 if (patternPlaceholder && patternPlaceholder.test(phName)) {
                     if (editMode === layout_1.EditMode.Metadata) {

package/dist/cjs/components/PlaceholderMetadata.js

@@ -5,11 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaceholderMetadata = void 0;
 const react_1 = __importDefault(require("react"));
-const PlaceholderCommon_1 = require("./PlaceholderCommon");
-/**
- * default value of uid for root placeholder when uid is not present.
- */
-const DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const editing_1 = require("@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
@@ -30,22 +27,22 @@ const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
             className: 'scpm',
             kind: kind,
         };
-        if (kind === 'open') {
+        if (kind === editing_1.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}`;
+                            : `${placeholderName}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
                         break;
                     }
                     // Check if the placeholder is a dynamic placeholder
-                    if ((0, PlaceholderCommon_1.isDynamicPlaceholder)(placeholder)) {
-                        const pattern = (0, PlaceholderCommon_1.getDynamicPlaceholderPattern)(placeholder);
+                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
+                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
                         // Check if the placeholder matches the dynamic placeholder pattern
                         if (pattern.test(placeholderName)) {
-                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
                             break;
                         }
                     }
@@ -59,9 +56,9 @@ const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
         return attributes;
     };
     const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes('open', uid, placeholderName))),
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Open, uid, placeholderName))),
         children,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes('close', uid, placeholderName)))));
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Close, uid, placeholderName)))));
     return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
 };
 exports.PlaceholderMetadata = PlaceholderMetadata;

package/dist/esm/components/EditingScripts.js

@@ -9,8 +9,9 @@ import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
 export const EditingScripts = () => {
     const { sitecoreContext: { pageState, editMode, clientData, clientScripts }, } = useSitecoreContext();
     // Don't render anything if not in editing/preview mode
-    if (pageState === LayoutServicePageState.Normal)
+    if (pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview) {
         return React.createElement(React.Fragment, null);
+    }
     if (editMode === EditMode.Metadata) {
         const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
         return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :

package/dist/esm/components/FieldMetadata.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MetadataKind } from '@sitecore-jss/sitecore-jss/editing';
 /**
  * The component which renders field metadata markup
  * @param {FieldMetadataProps} props the props of the component
@@ -12,8 +13,8 @@ export const FieldMetadata = (props) => {
         chrometype: 'field',
         className: 'scpm',
     };
-    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: 'open' });
-    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: 'close' });
+    const codeOpenAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Open });
+    const codeCloseAttributes = Object.assign(Object.assign({}, attributes), { kind: MetadataKind.Close });
     return (React.createElement(React.Fragment, null,
         React.createElement("code", Object.assign({}, codeOpenAttributes), data),
         props.children,

package/dist/esm/components/PlaceholderCommon.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MissingComponent } from './MissingComponent';
-import { EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+import { EditMode, isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-jss/sitecore-jss/layout';
 import { constants } from '@sitecore-jss/sitecore-jss';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering } from './HiddenRendering';
@@ -22,20 +22,6 @@ import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
 import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
 import { PlaceholderMetadata } from './PlaceholderMetadata';
 import ErrorBoundary from './ErrorBoundary';
-/**
- * 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 const getDynamicPlaceholderPattern = (placeholder) => {
-    return new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`);
-};
-/**
- * Checks if the placeholder name is dynamic.
- * @param {string} placeholder Placeholder name
- * @returns True if the placeholder name is dynamic
- */
-export const isDynamicPlaceholder = (placeholder) => placeholder.indexOf('{*}') !== -1;
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -49,9 +35,9 @@ export class PlaceholderCommon extends React.Component {
         let result;
         let phName = name.slice();
         /**
-         * [Chromes Mode]: [SXA] it needs for deleting dynamics placeholder when we set him number(props.name) of container.
-         * from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing.
-         * [Metadata Mode]: We need to keep the raw placeholder name. e.g 'nameOfContainer-{*}' instead of 'nameOfContainer-1'
+         * Process (SXA) dynamic placeholders
+         * Find and replace the matching dynamic placeholder e.g 'nameOfContainer-{*}' with the requested e.g. 'nameOfContainer-1'.
+         * For Metadata EditMode, we need to keep the raw placeholder name in place.
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {

package/dist/esm/components/PlaceholderMetadata.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { getDynamicPlaceholderPattern, isDynamicPlaceholder } from './PlaceholderCommon';
-/**
- * default value of uid for root placeholder when uid is not present.
- */
-const DEFAULT_PLACEHOLDER_UID = '00000000-0000-0000-0000-000000000000';
+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
@@ -24,7 +21,7 @@ export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) =
             className: 'scpm',
             kind: kind,
         };
-        if (kind === 'open') {
+        if (kind === MetadataKind.Open) {
             if (chrometype === 'placeholder' && placeholderName) {
                 let phId = '';
                 for (const placeholder of Object.keys(rendering.placeholders)) {
@@ -53,8 +50,8 @@ export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) =
         return attributes;
     };
     const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes('open', uid, placeholderName))),
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
         children,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes('close', uid, placeholderName)))));
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
     return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.2.0-canary.83",
+  "version": "22.3.0-canary.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.2.0-canary.83",
+    "@sitecore-jss/sitecore-jss": "^22.3.0-canary.1",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "d56b18ae5aabcf3095dac9d45b9f28959bf10b64",
+  "gitHead": "204eb3427f26d4ba8c08f44cf9c772f19f2820a8",
   "files": [
     "dist",
     "types"

package/types/components/PlaceholderCommon.d.ts

@@ -12,18 +12,6 @@ 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. */
@@ -81,7 +69,7 @@ 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/layout").GenericFieldValue> | Item | Item[]>>>>>;
+        rendering: PropTypes.Validator<NonNullable<NonNullable<ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | 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/layout").GenericFieldValue> | Item[]>>;
         }>;
@@ -99,7 +87,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 | HtmlElementRendering)[];
+    static getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, editMode?: EditMode): (ComponentRendering<import("@sitecore-jss/sitecore-jss/layout").ComponentFields> | HtmlElementRendering)[];
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentDidCatch(error: Error): void;