@sitecore-jss/sitecore-jss-react 22.3.0 → 22.3.1-canary.2

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/FEaaSComponent.js

@@ -118,7 +118,6 @@ function fetchComponentTemplate(src, params, revisionFallback) {
 /**
  * Fetches component data based on the provided data options.
  * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
- *
  * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
  * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
  * or rejects with an error if data fetching encounters an issue.

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,16 +5,12 @@ 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
  * 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.
@@ -30,22 +26,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 +55,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/cjs/enhancers/withSitecoreContext.js

@@ -23,24 +23,20 @@ exports.withSitecoreContext = withSitecoreContext;
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
- *
  * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
- *
  * @param {WithSitecoreContextOptions} [options] hook options
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext } = useSitecoreContext();
  *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
  *    const onClick = () => updateSitecoreContext({ pageEditing: true });
  *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- * @returns {Object} { sitecoreContext, updateSitecoreContext }
+ * @returns {object} { sitecoreContext, updateSitecoreContext }
  */
 function useSitecoreContext(options) {
     const reactContext = react_1.default.useContext(SitecoreContext_1.SitecoreContextReactContext);

package/dist/cjs/utils.js

@@ -82,7 +82,7 @@ const addClassName = (otherAttrs) => {
 exports.addClassName = addClassName;
 /**
  * Converts the given tag attributes object to a string
- * @param {Object.<string, unknown>} attributes the attributes object
+ * @param {{[key: string]: unknown}} attributes the attributes object
  * @returns {string} string representation of the attributes
  */
 const getAttributesString = (attributes) => {

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/FEaaSComponent.js

@@ -87,7 +87,6 @@ function fetchComponentTemplate(src, params, revisionFallback) {
 /**
  * Fetches component data based on the provided data options.
  * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
- *
  * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
  * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
  * or rejects with an error if data fetching encounters an issue.

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,14 +1,10 @@
 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
  * 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.
@@ -24,7 +20,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 +49,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/dist/esm/enhancers/withSitecoreContext.js

@@ -16,24 +16,20 @@ export function withSitecoreContext(options) {
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
- *
  * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
- *
  * @param {WithSitecoreContextOptions} [options] hook options
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext } = useSitecoreContext();
  *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
  *    const onClick = () => updateSitecoreContext({ pageEditing: true });
  *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- * @returns {Object} { sitecoreContext, updateSitecoreContext }
+ * @returns {object} { sitecoreContext, updateSitecoreContext }
  */
 export function useSitecoreContext(options) {
     const reactContext = React.useContext(SitecoreContextReactContext);

package/dist/esm/utils.js

@@ -75,7 +75,7 @@ export const addClassName = (otherAttrs) => {
 };
 /**
  * Converts the given tag attributes object to a string
- * @param {Object.<string, unknown>} attributes the attributes object
+ * @param {{[key: string]: unknown}} attributes the attributes object
  * @returns {string} string representation of the attributes
  */
 export const getAttributesString = (attributes) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.3.0",
+  "version": "22.3.1-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -11,10 +11,10 @@
     "test": "mocha --require ts-node/register/transpile-only --require ./src/tests/shim.ts ./src/tests/jsdom-setup.ts ./src/tests/enzyme-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 --readme none --out ../../ref-docs/sitecore-jss-react src/index.ts --githubPages false"
+    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --outputFileStrategy Members --parametersFormat table --readme none --out ../../ref-docs/sitecore-jss-react src/index.ts --githubPages false"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "author": {
     "name": "Sitecore Corporation",
@@ -33,7 +33,7 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "20.14.2",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.2.22",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.0.10",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
@@ -43,9 +43,9 @@
     "cheerio": "1.0.0-rc.12",
     "del-cli": "^5.0.0",
     "enzyme": "^3.11.0",
-    "eslint": "^8.28.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.31.11",
-    "jsdom": "^20.0.3",
+    "jsdom": "^25.0.1",
     "mocha": "^10.2.0",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "22.3.0",
+    "@sitecore-jss/sitecore-jss": "^22.3.1-canary.2",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "81b0239517966b6d0debdf6da3f12a98228c4d0c",
+  "gitHead": "5b35bbbe22b6ea21a1829950e371d54422ebf8fd",
   "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;

package/types/components/PlaceholderMetadata.d.ts

@@ -20,7 +20,6 @@ export type CodeBlockAttributes = {
  * 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.

package/types/enhancers/withEmptyFieldEditingComponent.d.ts

@@ -3,7 +3,7 @@ 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

package/types/enhancers/withSitecoreContext.d.ts

@@ -20,24 +20,20 @@ export declare function withSitecoreContext(options?: WithSitecoreContextOptions
  * - pageEditing - Provided by Layout Service, a boolean indicating whether the route is being accessed via the Experience Editor.
  * - pageState - Like pageEditing, but a string: normal, preview or edit.
  * - site - Provided by Layout Service, an object containing the name of the current Sitecore site context.
- *
  * @see https://jss.sitecore.com/docs/techniques/extending-layout-service/layoutservice-extending-context
- *
  * @param {WithSitecoreContextOptions} [options] hook options
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext } = useSitecoreContext();
  *    return <span>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- *
  * @example
  * const EditMode = () => {
  *    const { sitecoreContext, updateSitecoreContext } = useSitecoreContext({ updatable: true });
  *    const onClick = () => updateSitecoreContext({ pageEditing: true });
  *    return <span onClick={onClick}>Edit Mode is {sitecoreContext.pageEditing ? 'active' : 'inactive'}</span>
  * }
- * @returns {Object} { sitecoreContext, updateSitecoreContext }
+ * @returns {object} { sitecoreContext, updateSitecoreContext }
  */
 export declare function useSitecoreContext(options?: WithSitecoreContextOptions): {
     sitecoreContext: SitecoreContextValue;

package/types/utils.d.ts

@@ -26,7 +26,7 @@ export declare const addClassName: (otherAttrs: {
 }) => void;
 /**
  * Converts the given tag attributes object to a string
- * @param {Object.<string, unknown>} attributes the attributes object
+ * @param {{[key: string]: unknown}} attributes the attributes object
  * @returns {string} string representation of the attributes
  */
 export declare const getAttributesString: (attributes: {