@sitecore-jss/sitecore-jss-react 22.2.0-canary.9 → 22.2.1-canary.1

package/dist/cjs/components/EditingScripts.js

@@ -7,6 +7,7 @@ exports.EditingScripts = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 /**
  * Renders client scripts and data for editing/preview mode in Pages.
  * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
@@ -17,10 +18,10 @@ const EditingScripts = () => {
     if (pageState === layout_1.LayoutServicePageState.Normal)
         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 :
             clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
-            clientData &&
-                Object.keys(clientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(clientData[id]) } })))));
+            Object.keys(jssClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
     }
     return react_1.default.createElement(react_1.default.Fragment, null);
 };

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 = void 0;
+exports.PlaceholderCommon = exports.isDynamicPlaceholder = exports.getDynamicPlaceholderPattern = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const MissingComponent_1 = require("./MissingComponent");
@@ -28,6 +28,22 @@ 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);
@@ -41,14 +57,14 @@ class PlaceholderCommon extends react_1.default.Component {
         let result;
         let phName = name.slice();
         /**
-         * 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.
+         * [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'
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
-                const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
-                    ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
+                const patternPlaceholder = (0, exports.isDynamicPlaceholder)(placeholder)
+                    ? (0, exports.getDynamicPlaceholderPattern)(placeholder)
                     : null;
                 if (patternPlaceholder && patternPlaceholder.test(phName)) {
                     if (editMode === layout_1.EditMode.Metadata) {

package/dist/cjs/components/PlaceholderMetadata.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaceholderMetadata = void 0;
 const react_1 = __importDefault(require("react"));
-const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const PlaceholderCommon_1 = require("./PlaceholderCommon");
 /**
  * default value of uid for root placeholder when uid is not present.
  */
@@ -41,8 +41,8 @@ const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
                         break;
                     }
                     // Check if the placeholder is a dynamic placeholder
-                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
-                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
+                    if ((0, PlaceholderCommon_1.isDynamicPlaceholder)(placeholder)) {
+                        const pattern = (0, PlaceholderCommon_1.getDynamicPlaceholderPattern)(placeholder);
                         // Check if the placeholder matches the dynamic placeholder pattern
                         if (pattern.test(placeholderName)) {
                             phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;

package/dist/cjs/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.ClientError = exports.enableDebug = exports.constants = void 0;
-exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
+exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
 Object.defineProperty(exports, "ClientError", { enumerable: true, get: function () { return sitecore_jss_1.ClientError; } });
+Object.defineProperty(exports, "MemoryCacheClient", { enumerable: true, get: function () { return sitecore_jss_1.MemoryCacheClient; } });
 var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return editing_1.isEditorActive; } });
 Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });

package/dist/esm/components/EditingScripts.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
+import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
 /**
  * Renders client scripts and data for editing/preview mode in Pages.
  * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
@@ -11,10 +12,10 @@ export const EditingScripts = () => {
     if (pageState === LayoutServicePageState.Normal)
         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 :
             clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
-            clientData &&
-                Object.keys(clientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(clientData[id]) } })))));
+            Object.keys(jssClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(jssClientData[id]) } })))));
     }
     return React.createElement(React.Fragment, null);
 };

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, isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-jss/sitecore-jss/layout';
+import { EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 import { constants } from '@sitecore-jss/sitecore-jss';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering } from './HiddenRendering';
@@ -22,6 +22,20 @@ 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);
@@ -35,9 +49,9 @@ export class PlaceholderCommon extends React.Component {
         let result;
         let phName = name.slice();
         /**
-         * 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.
+         * [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'
          */
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {

package/dist/esm/components/PlaceholderMetadata.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-jss/sitecore-jss/layout';
+import { getDynamicPlaceholderPattern, isDynamicPlaceholder } from './PlaceholderCommon';
 /**
  * default value of uid for root placeholder when uid is not present.
  */

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
+export { constants, enableDebug, ClientError, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/editing';
 export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.2.0-canary.9",
+  "version": "22.2.1-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.9",
+    "@sitecore-jss/sitecore-jss": "^22.2.1-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": "843696778d1ce2cb8cb4d0ff21bf60da5df3020e",
+  "gitHead": "74995e778ae28463d857b92a8ea5051333c18795",
   "files": [
     "dist",
     "types"

package/types/components/PlaceholderCommon.d.ts

@@ -12,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. */

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
+export { constants, enableDebug, ClientError, CacheClient, CacheOptions, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
 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';