From 8a93ec53799f2ff8f068bfe16db1a601eb6bf8a7 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Tue, 23 Jul 2024 17:59:40 -0400
Subject: [PATCH 1/8] Render hidden rendering on null componentName

---
 .../src/components/Placeholder.test.tsx       | 34 ++++++++++++++++++-
 .../src/components/PlaceholderCommon.tsx      |  6 +++-
 .../src/test-data/metadata-data.ts            | 20 +++++++++++
 packages/sitecore-jss/src/layout/models.ts    |  2 +-
 4 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
index ebc2b5eabf..0ccf923d5c 100644
--- a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/prop-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComponentRendering, EditMode, RouteData } from '@sitecore-jss/sitecore-jss/layout';
+import { ComponentRendering, RouteData } from '@sitecore-jss/sitecore-jss/layout';
 import { expect } from 'chai';
 import { mount, shallow } from 'enzyme';
 import PropTypes from 'prop-types';
@@ -795,6 +795,7 @@ describe('PlaceholderMetadata', () => {
     layoutDataForNestedDynamicPlaceholder,
     layoutDataWithEmptyPlaceholder,
     layoutDataWithUnknownComponent,
+    layoutDataWithNullComponent,
   } = metadataData;
 
   const componentFactory: ComponentFactory = (componentName: string) => {
@@ -810,6 +811,37 @@ describe('PlaceholderMetadata', () => {
     return components.get(componentName) || null;
   };
 
+  it('should render HiddenRendering when rendering is hidden', () => {
+    const renderedComponent = mount(
+      <SitecoreContext componentFactory={componentFactory} layoutData={layoutDataWithNullComponent}>
+        <Placeholder name="main" rendering={layoutDataWithNullComponent.sitecore.route} />
+      </SitecoreContext>
+    );
+    expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
+  });
+
+  it('should render custom HiddenRendering when rendering is hidden in metadata mode', () => {
+    const CustomHiddenRendering: React.FC<any> = (props) => (
+      <div className="hidden-rendering">
+        <HiddenRendering />
+        <p>Hidden Rendering</p>
+      </div>
+    );
+
+    const renderedComponent = mount(
+      <SitecoreContext componentFactory={componentFactory} layoutData={layoutDataWithNullComponent}>
+        <Placeholder
+          name="main"
+          rendering={layoutDataWithNullComponent.sitecore.route}
+          hiddenRenderingComponent={CustomHiddenRendering}
+        />
+      </SitecoreContext>
+    );
+    expect(renderedComponent.find('.hidden-rendering').length).to.equal(1);
+    expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
+    expect(renderedComponent.find('p').props().children).to.equal('Hidden Rendering');
+  });
+
   it('should render <PlaceholderMetadata> with nested placeholder components', () => {
     const wrapper = mount(
       <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index 749c334450..25665dcec8 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -247,7 +247,11 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
           component = hiddenRenderingComponent ?? HiddenRendering;
           isEmpty = true;
         } else if (!componentRendering.componentName) {
-          component = () => <></>;
+          if (this.props.sitecoreContext?.editMode === EditMode.Metadata) {
+            component = hiddenRenderingComponent ?? HiddenRendering;
+          } else {
+            component = () => <></>;
+          }
           isEmpty = true;
         } else {
           component = this.getComponentForRendering(componentRendering);
diff --git a/packages/sitecore-jss-react/src/test-data/metadata-data.ts b/packages/sitecore-jss-react/src/test-data/metadata-data.ts
index 10740186b3..10d349b155 100644
--- a/packages/sitecore-jss-react/src/test-data/metadata-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/metadata-data.ts
@@ -63,6 +63,26 @@ export const layoutDataWithUnknownComponent = {
   },
 };
 
+export const layoutDataWithNullComponent = {
+  sitecore: {
+    context: {
+      pageEditing: true,
+      editMode: EditMode.Metadata,
+    },
+    route: {
+      name: 'main',
+      placeholders: {
+        main: [
+          {
+            uid: '123',
+            componentName: null,
+          },
+        ],
+      },
+    },
+  },
+};
+
 export const layoutDataForNestedDynamicPlaceholder = (rootPhKey: string) => ({
   sitecore: {
     context: {
diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts
index 3f60e02081..13dc2a1566 100644
--- a/packages/sitecore-jss/src/layout/models.ts
+++ b/packages/sitecore-jss/src/layout/models.ts
@@ -94,7 +94,7 @@ export interface ComponentParams {
  * Definition of a component instance within a placeholder on a route
  */
 export interface ComponentRendering {
-  componentName: string;
+  componentName: string | null;
   dataSource?: string;
   uid?: string;
   placeholders?: PlaceholdersData;

From af439c2bdeca79434572a678d9f1ecebe35bd1f8 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 15:09:59 -0400
Subject: [PATCH 2/8] test typo

---
 packages/sitecore-jss/src/graphql-request-client.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sitecore-jss/src/graphql-request-client.test.ts b/packages/sitecore-jss/src/graphql-request-client.test.ts
index 767629682d..82a858fdad 100644
--- a/packages/sitecore-jss/src/graphql-request-client.test.ts
+++ b/packages/sitecore-jss/src/graphql-request-client.test.ts
@@ -345,7 +345,7 @@ describe('GraphQLRequestClient', () => {
       }
     });
 
-    describe('Retrayable status codes', () => {
+    describe('Retryable status codes', () => {
       const retryableStatusCodeThrowError = async (statusCode: number) => {
         nock('http://jssnextweb')
           .post('/graphql')

From ccb2295387375fec4c6b32747b15cf91e0d8978b Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 15:12:48 -0400
Subject: [PATCH 3/8] revert previous fix

---
 .../src/components/Placeholder.test.tsx       | 32 -------------------
 .../src/components/PlaceholderCommon.tsx      |  8 ++---
 .../src/test-data/metadata-data.ts            | 20 ------------
 packages/sitecore-jss/src/layout/models.ts    |  2 +-
 4 files changed, 3 insertions(+), 59 deletions(-)

diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
index 0ccf923d5c..485e4fc384 100644
--- a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
@@ -795,7 +795,6 @@ describe('PlaceholderMetadata', () => {
     layoutDataForNestedDynamicPlaceholder,
     layoutDataWithEmptyPlaceholder,
     layoutDataWithUnknownComponent,
-    layoutDataWithNullComponent,
   } = metadataData;
 
   const componentFactory: ComponentFactory = (componentName: string) => {
@@ -811,37 +810,6 @@ describe('PlaceholderMetadata', () => {
     return components.get(componentName) || null;
   };
 
-  it('should render HiddenRendering when rendering is hidden', () => {
-    const renderedComponent = mount(
-      <SitecoreContext componentFactory={componentFactory} layoutData={layoutDataWithNullComponent}>
-        <Placeholder name="main" rendering={layoutDataWithNullComponent.sitecore.route} />
-      </SitecoreContext>
-    );
-    expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
-  });
-
-  it('should render custom HiddenRendering when rendering is hidden in metadata mode', () => {
-    const CustomHiddenRendering: React.FC<any> = (props) => (
-      <div className="hidden-rendering">
-        <HiddenRendering />
-        <p>Hidden Rendering</p>
-      </div>
-    );
-
-    const renderedComponent = mount(
-      <SitecoreContext componentFactory={componentFactory} layoutData={layoutDataWithNullComponent}>
-        <Placeholder
-          name="main"
-          rendering={layoutDataWithNullComponent.sitecore.route}
-          hiddenRenderingComponent={CustomHiddenRendering}
-        />
-      </SitecoreContext>
-    );
-    expect(renderedComponent.find('.hidden-rendering').length).to.equal(1);
-    expect(renderedComponent.find(HiddenRendering).length).to.equal(1);
-    expect(renderedComponent.find('p').props().children).to.equal('Hidden Rendering');
-  });
-
   it('should render <PlaceholderMetadata> with nested placeholder components', () => {
     const wrapper = mount(
       <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index 25665dcec8..6d578b1fb0 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -11,7 +11,7 @@ import {
   EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
 import { convertAttributesToReactProps } from '../utils';
-import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+import { HiddenRendering } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
 import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
 import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
@@ -247,11 +247,7 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
           component = hiddenRenderingComponent ?? HiddenRendering;
           isEmpty = true;
         } else if (!componentRendering.componentName) {
-          if (this.props.sitecoreContext?.editMode === EditMode.Metadata) {
-            component = hiddenRenderingComponent ?? HiddenRendering;
-          } else {
-            component = () => <></>;
-          }
+          component = () => <></>;
           isEmpty = true;
         } else {
           component = this.getComponentForRendering(componentRendering);
diff --git a/packages/sitecore-jss-react/src/test-data/metadata-data.ts b/packages/sitecore-jss-react/src/test-data/metadata-data.ts
index 10d349b155..10740186b3 100644
--- a/packages/sitecore-jss-react/src/test-data/metadata-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/metadata-data.ts
@@ -63,26 +63,6 @@ export const layoutDataWithUnknownComponent = {
   },
 };
 
-export const layoutDataWithNullComponent = {
-  sitecore: {
-    context: {
-      pageEditing: true,
-      editMode: EditMode.Metadata,
-    },
-    route: {
-      name: 'main',
-      placeholders: {
-        main: [
-          {
-            uid: '123',
-            componentName: null,
-          },
-        ],
-      },
-    },
-  },
-};
-
 export const layoutDataForNestedDynamicPlaceholder = (rootPhKey: string) => ({
   sitecore: {
     context: {
diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts
index 13dc2a1566..3f60e02081 100644
--- a/packages/sitecore-jss/src/layout/models.ts
+++ b/packages/sitecore-jss/src/layout/models.ts
@@ -94,7 +94,7 @@ export interface ComponentParams {
  * Definition of a component instance within a placeholder on a route
  */
 export interface ComponentRendering {
-  componentName: string | null;
+  componentName: string;
   dataSource?: string;
   uid?: string;
   placeholders?: PlaceholdersData;

From ab61169ebc4441714268ffbb73f353877661eede Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 15:15:28 -0400
Subject: [PATCH 4/8] move HIDDEN_RENDERING_NAME to base pacakage constants

---
 .../src/components/hidden-rendering.component.ts             | 2 --
 .../src/components/placeholder.component.ts                  | 5 +++--
 .../sitecore-jss-react/src/components/HiddenRendering.tsx    | 2 --
 .../sitecore-jss-react/src/components/PlaceholderCommon.tsx  | 3 ++-
 packages/sitecore-jss-vue/src/components/HiddenRendering.ts  | 2 --
 .../sitecore-jss-vue/src/components/PlaceholderCommon.ts     | 5 +++--
 packages/sitecore-jss/src/constants.ts                       | 2 ++
 7 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts b/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts
index a332aa1836..facecfa9d1 100644
--- a/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts
+++ b/packages/sitecore-jss-angular/src/components/hidden-rendering.component.ts
@@ -8,5 +8,3 @@ export class HiddenRenderingComponent {
     return 'background-image: linear-gradient(45deg, #ffffff 25%, #dcdcdc 25%, #dcdcdc 50%, #ffffff 50%, #ffffff 75%, #dcdcdc 75%, #dcdcdc 100%); background-size: 3px 3px; display: block; height: 100px;';
   }
 }
-
-export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
diff --git a/packages/sitecore-jss-angular/src/components/placeholder.component.ts b/packages/sitecore-jss-angular/src/components/placeholder.component.ts
index 1683afac3d..b34c614164 100644
--- a/packages/sitecore-jss-angular/src/components/placeholder.component.ts
+++ b/packages/sitecore-jss-angular/src/components/placeholder.component.ts
@@ -39,7 +39,7 @@ import {
   PLACEHOLDER_HIDDEN_RENDERING_COMPONENT,
   PLACEHOLDER_MISSING_COMPONENT_COMPONENT,
 } from '../services/placeholder.token';
-import { HIDDEN_RENDERING_NAME } from './hidden-rendering.component';
+import { constants } from '@sitecore-jss/sitecore-jss';
 import { PlaceholderLoadingDirective } from './placeholder-loading.directive';
 import { RenderEachDirective } from './render-each.directive';
 import { RenderEmptyDirective } from './render-empty.directive';
@@ -286,7 +286,8 @@ export class PlaceholderComponent implements OnInit, OnChanges, DoCheck, OnDestr
 
   private _renderEmbeddedComponent(rendering: ComponentFactoryResult, data: Data, index: number) {
     if (
-      (rendering.componentDefinition as ComponentRendering).componentName === HIDDEN_RENDERING_NAME
+      (rendering.componentDefinition as ComponentRendering).componentName ===
+      constants.HIDDEN_RENDERING_NAME
     ) {
       rendering.componentImplementation = this.hiddenRenderingComponent;
     }
diff --git a/packages/sitecore-jss-react/src/components/HiddenRendering.tsx b/packages/sitecore-jss-react/src/components/HiddenRendering.tsx
index e9f914db75..66e5632f8f 100644
--- a/packages/sitecore-jss-react/src/components/HiddenRendering.tsx
+++ b/packages/sitecore-jss-react/src/components/HiddenRendering.tsx
@@ -8,5 +8,3 @@ const styles = {
 };
 
 export const HiddenRendering = () => <div style={styles} />;
-
-export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index 6d578b1fb0..cff5643817 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -10,6 +10,7 @@ import {
   HtmlElementRendering,
   EditMode,
 } from '@sitecore-jss/sitecore-jss/layout';
+import { constants } from '@sitecore-jss/sitecore-jss';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent';
@@ -243,7 +244,7 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
 
         let component;
 
-        if (componentRendering.componentName === HIDDEN_RENDERING_NAME) {
+        if (componentRendering.componentName === constants.HIDDEN_RENDERING_NAME) {
           component = hiddenRenderingComponent ?? HiddenRendering;
           isEmpty = true;
         } else if (!componentRendering.componentName) {
diff --git a/packages/sitecore-jss-vue/src/components/HiddenRendering.ts b/packages/sitecore-jss-vue/src/components/HiddenRendering.ts
index f13cc33d3b..1f0c7ce9b9 100644
--- a/packages/sitecore-jss-vue/src/components/HiddenRendering.ts
+++ b/packages/sitecore-jss-vue/src/components/HiddenRendering.ts
@@ -12,5 +12,3 @@ export const HiddenRendering = defineComponent({
     });
   },
 });
-
-export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';
diff --git a/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts b/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
index 67910dcc64..201d294842 100644
--- a/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
+++ b/packages/sitecore-jss-vue/src/components/PlaceholderCommon.ts
@@ -7,9 +7,10 @@ import {
   RouteData,
 } from '@sitecore-jss/sitecore-jss/layout';
 import { resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
+import { constants } from '@sitecore-jss/sitecore-jss';
 import { Component, h, VNode, DefineComponent, ref, onMounted } from 'vue';
 import { MissingComponent } from './MissingComponent';
-import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
+import { HiddenRendering } from './HiddenRendering';
 import { ComponentFactory } from './sharedTypes';
 
 export interface PlaceholderProps {
@@ -116,7 +117,7 @@ export function getVNodesForRenderingData(
 
       let component: any;
 
-      if (rendering.componentName === HIDDEN_RENDERING_NAME) {
+      if (rendering.componentName === constants.HIDDEN_RENDERING_NAME) {
         component = hiddenRenderingComponent || HiddenRendering;
       } else {
         component = getComponentForRendering(rendering, componentFactory);
diff --git a/packages/sitecore-jss/src/constants.ts b/packages/sitecore-jss/src/constants.ts
index 7fd8f42154..7a974f39c7 100644
--- a/packages/sitecore-jss/src/constants.ts
+++ b/packages/sitecore-jss/src/constants.ts
@@ -19,3 +19,5 @@ export const JSS_MODE = {
 export const siteNameError = 'The siteName cannot be empty';
 
 export const SITECORE_EDGE_URL_DEFAULT = 'https://edge-platform.sitecorecloud.io';
+
+export const HIDDEN_RENDERING_NAME = 'Hidden Rendering';

From 17bd88f5baef219c5d69e64c9fa2b73918cd3d6d Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 15:16:00 -0400
Subject: [PATCH 5/8] personalize into hidden rendering for metadata mode

---
 .../personalize/layout-personalizer.test.ts   | 14 ++++++
 .../src/personalize/layout-personalizer.ts    | 44 ++++++++++++++-----
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
index fc6db5ee01..9a92753ccf 100644
--- a/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
+++ b/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
@@ -16,6 +16,7 @@ import {
   mountain_bike_audience,
   city_bike_audience,
 } from '../test-data/personalizeData';
+import { HIDDEN_RENDERING_NAME } from '../constants';
 
 const { personalizeLayout, personalizePlaceholder, personalizeComponent } = personalize;
 
@@ -349,6 +350,19 @@ describe('layout-personalizer', () => {
         expect(personalizedComponentResult).to.equal(null);
       });
 
+      it('should return HIDDEN_RENDERING variant in metadata edit mode when variantVariant is hidden', () => {
+        const variant = 'mountain_bike_audience';
+        const personalizedComponentResult = personalizeComponent(
+          (variantIsHidden as unknown) as ComponentRenderingWithExperiences,
+          [variant],
+          true
+        );
+        expect(personalizedComponentResult).to.deep.equal({
+          ...variantIsHidden.experiences.mountain_bike_audience,
+          componentName: HIDDEN_RENDERING_NAME,
+        });
+      });
+
       it('should return null when variantVariant and componentName is undefined', () => {
         const variant = 'test';
         const personalizedComponentResult = personalizeComponent(
diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
index b370813446..7bd0fa9dc4 100644
--- a/packages/sitecore-jss/src/personalize/layout-personalizer.ts
+++ b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
@@ -1,8 +1,10 @@
+import { HIDDEN_RENDERING_NAME } from '../constants';
 import {
   LayoutServiceData,
   ComponentRendering,
   HtmlElementRendering,
   PlaceholdersData,
+  EditMode,
 } from './../layout/models';
 
 export type ComponentRenderingWithExperiences = ComponentRendering & {
@@ -26,12 +28,15 @@ export function personalizeLayout(
   if (Object.keys(placeholders ?? {}).length === 0) {
     return;
   }
+  const metadataEditing =
+    layout.sitecore.context.pageEditing && layout.sitecore.context.editMode === EditMode.Metadata;
   if (placeholders) {
     Object.keys(placeholders).forEach((placeholder) => {
-      placeholders[placeholder] = personalizePlaceholder(placeholders[placeholder], [
-        variantId,
-        ...(componentVariantIds || []),
-      ]);
+      placeholders[placeholder] = personalizePlaceholder(
+        placeholders[placeholder],
+        [variantId, ...(componentVariantIds || [])],
+        metadataEditing
+      );
     });
   }
   return placeholders;
@@ -40,25 +45,33 @@ export function personalizeLayout(
 /**
  * @param {Array} components components within placeholder
  * @param {string[]} variantIds variant ids
+ * @param {boolean} metadataEditing indicates if page is rendered in metadata edit mode
  * @returns {Array<ComponentRendering | HtmlElementRendering>} components with personalization applied
  */
 export function personalizePlaceholder(
   components: Array<ComponentRendering | HtmlElementRendering>,
-  variantIds: string[]
+  variantIds: string[],
+  metadataEditing?: boolean
 ): Array<ComponentRendering | HtmlElementRendering> {
   return components
     .map((component) => {
       const rendering = component as ComponentRendering;
 
       if ((rendering as ComponentRenderingWithExperiences).experiences !== undefined) {
-        return personalizeComponent(rendering as ComponentRenderingWithExperiences, variantIds) as
-          | ComponentRendering
-          | HtmlElementRendering;
+        return personalizeComponent(
+          rendering as ComponentRenderingWithExperiences,
+          variantIds,
+          metadataEditing
+        ) as ComponentRendering | HtmlElementRendering;
       } else if (rendering.placeholders) {
         const placeholders = rendering.placeholders as PlaceholdersData;
 
         Object.keys(placeholders).forEach((placeholder) => {
-          placeholders[placeholder] = personalizePlaceholder(placeholders[placeholder], variantIds);
+          placeholders[placeholder] = personalizePlaceholder(
+            placeholders[placeholder],
+            variantIds,
+            metadataEditing
+          );
         });
       }
 
@@ -70,11 +83,13 @@ export function personalizePlaceholder(
 /**
  * @param {ComponentRenderingWithExperiences} component component with experiences
  * @param {string[]} variantIds variant ids
+ * @param {boolean} metadataEditing indicates if page is rendered in metadata edit mode
  * @returns {ComponentRendering | null} component with personalization applied or null if hidden
  */
 export function personalizeComponent(
   component: ComponentRenderingWithExperiences,
-  variantIds: string[]
+  variantIds: string[],
+  metadataEditing?: boolean
 ): ComponentRendering | null {
   // Check if we have a page/component experience matching any of the variants (there should be at most 1)
   const match = Object.keys(component.experiences).find((variantId) =>
@@ -86,7 +101,14 @@ export function personalizeComponent(
     return null;
   } else if (variant && variant.componentName === null && variant.dataSource === null) {
     // VARIANT IS HIDDEN
-    return null;
+    if (metadataEditing) {
+      component = {
+        ...variant,
+        componentName: HIDDEN_RENDERING_NAME,
+      };
+    } else {
+      return null;
+    }
   } else if (variant) {
     component = variant;
   }

From f6571a17fe4548fa912f73e471105ff88afbcbe4 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 15:26:39 -0400
Subject: [PATCH 6/8] changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7026880cd6..b3b675cdf2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,7 +33,7 @@ Our versioning strategy is as follows:
 
 ### 🛠 Breaking Change
 
-* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))
+* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835))([#1853](https://github.com/Sitecore/jss/pull/1853))
   * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering  the components and placeholders with required metadata.
   * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`.
   * `ComponentConsumerProps` is removed. You might need to reuse `WithSitecoreContextProps` type.
@@ -45,6 +45,7 @@ Our versioning strategy is as follows:
   * `[sitecore-jss]` Introduced `GraphQLEditingService` class to fetch editing data in Metadata Edit Mode.
   * `[templates/nextjs-xmcloud]` Introduced _/lib/graphql-editing-service_ to fetch editing data in Metadata Edit Mode.
   * `[templates/nextjs-xmcloud]` Added a new _page-props-factory/plugins/preview-mode_ plugin to handle both Chromes and Metadata Edit Mode.
+  * `[sitecore-jss]` layout-personalizer will mark components hidden by personalization by setting 'Hidden Rendering' component name in Metadata edit mode
 * `[sitecore-jss]` Introduced _/editing_ submodule that contains all editing related functionality. Editing utils are now available in _/editing_ submodule. Editing utils exported from _/utils_ marked as deprecated. ([#1806](https://github.com/Sitecore/jss/pull/1806))
 * `[sitecore-jss-nextjs]` EditingRenderMiddleware `resolvePageUrl` function now accepts an object `(args: { serverUrl?: string; itemPath: string }) => string` instead of multiple parameters `(serverUrl: string, itemPath: string) => string`. `serverUrl` is now optional and omitted when Metadata Edit Mode is used.
 * `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` Remove Partial rendering implementation as it will not be used by Pages in its current implementation - includes removing of EditingComponentPlaceholder component, few constants associated with it and RenderingType enum ([#1821](https://github.com/Sitecore/jss/pull/1821))

From 9875570b3cf5be9a9f651f08a7788e26609e0f8c Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 18:01:38 -0400
Subject: [PATCH 7/8] apply for default hidden variant

---
 .../personalize/layout-personalizer.test.ts   | 37 +++++++++++--------
 .../src/personalize/layout-personalizer.ts    | 16 +++++---
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
index 9a92753ccf..397017d565 100644
--- a/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
+++ b/packages/sitecore-jss/src/personalize/layout-personalizer.test.ts
@@ -341,7 +341,7 @@ describe('layout-personalizer', () => {
         ).to.deep.equal({});
       });
 
-      it('should return null when variantVariant is hidden', () => {
+      it('should return null when variant is hidden', () => {
         const variant = 'mountain_bike_audience';
         const personalizedComponentResult = personalizeComponent(
           (variantIsHidden as unknown) as ComponentRenderingWithExperiences,
@@ -350,20 +350,7 @@ describe('layout-personalizer', () => {
         expect(personalizedComponentResult).to.equal(null);
       });
 
-      it('should return HIDDEN_RENDERING variant in metadata edit mode when variantVariant is hidden', () => {
-        const variant = 'mountain_bike_audience';
-        const personalizedComponentResult = personalizeComponent(
-          (variantIsHidden as unknown) as ComponentRenderingWithExperiences,
-          [variant],
-          true
-        );
-        expect(personalizedComponentResult).to.deep.equal({
-          ...variantIsHidden.experiences.mountain_bike_audience,
-          componentName: HIDDEN_RENDERING_NAME,
-        });
-      });
-
-      it('should return null when variantVariant and componentName is undefined', () => {
+      it('should return null when variant and componentName is undefined', () => {
         const variant = 'test';
         const personalizedComponentResult = personalizeComponent(
           (withoutComponentName as unknown) as ComponentRenderingWithExperiences,
@@ -373,6 +360,26 @@ describe('layout-personalizer', () => {
       });
     });
 
+    it('should return HIDDEN_RENDERING variant in metadata edit mode when non-default variant is hidden', () => {
+      const variant = 'mountain_bike_audience';
+      const personalizedComponentResult = personalizeComponent(
+        (variantIsHidden as unknown) as ComponentRenderingWithExperiences,
+        [variant],
+        true
+      );
+      expect(personalizedComponentResult?.componentName).to.equal(HIDDEN_RENDERING_NAME);
+    });
+
+    it('should return HIDDEN_RENDERING variant in metadata edit mode when default variant is hidden', () => {
+      const variant = 'will-not-match';
+      const personalizedComponentResult = personalizeComponent(
+        (withoutComponentName as unknown) as ComponentRenderingWithExperiences,
+        [variant],
+        true
+      );
+      expect(personalizedComponentResult?.componentName).to.equal(HIDDEN_RENDERING_NAME);
+    });
+
     describe('with multiple variant Ids', () => {
       const testComponent = structuredClone(component);
 
diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
index 7bd0fa9dc4..aab055709a 100644
--- a/packages/sitecore-jss/src/personalize/layout-personalizer.ts
+++ b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
@@ -7,6 +7,11 @@ import {
   EditMode,
 } from './../layout/models';
 
+const hiddenRenderingVariant = {
+  componentName: HIDDEN_RENDERING_NAME,
+  experiences: {},
+};
+
 export type ComponentRenderingWithExperiences = ComponentRendering & {
   experiences: { [name: string]: ComponentRenderingWithExperiences };
 };
@@ -98,14 +103,15 @@ export function personalizeComponent(
   const variant = match && component.experiences[match];
   if (variant === undefined && component.componentName === undefined) {
     // DEFAULT IS HIDDEN
-    return null;
+    if (metadataEditing) {
+      component = hiddenRenderingVariant;
+    } else {
+      return null;
+    }
   } else if (variant && variant.componentName === null && variant.dataSource === null) {
     // VARIANT IS HIDDEN
     if (metadataEditing) {
-      component = {
-        ...variant,
-        componentName: HIDDEN_RENDERING_NAME,
-      };
+      component = hiddenRenderingVariant;
     } else {
       return null;
     }

From 332d386deeb9c17bb605f97c694f2d8e9d639ffe Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Wed, 24 Jul 2024 18:13:17 -0400
Subject: [PATCH 8/8] ensure null and undefined scenarios work for default
 hidden variant

---
 packages/sitecore-jss/src/personalize/layout-personalizer.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/sitecore-jss/src/personalize/layout-personalizer.ts b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
index aab055709a..9f1d7138bb 100644
--- a/packages/sitecore-jss/src/personalize/layout-personalizer.ts
+++ b/packages/sitecore-jss/src/personalize/layout-personalizer.ts
@@ -101,7 +101,9 @@ export function personalizeComponent(
     variantIds.includes(variantId)
   );
   const variant = match && component.experiences[match];
-  if (variant === undefined && component.componentName === undefined) {
+
+  // variant and componentName can be undefined or null
+  if (!variant && !component.componentName) {
     // DEFAULT IS HIDDEN
     if (metadataEditing) {
       component = hiddenRenderingVariant;