From d7c3ef2bdb29d41dd8902d7ce5efc24c9dac1d84 Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <rusm@sitecore.net>
Date: Mon, 16 Jan 2023 14:36:05 +0100
Subject: [PATCH 1/2]  #559044: [SXA] added fix for sitecore-jss-react. added
 exclude patterns for Splitter components

---
 .../src/components/PlaceholderCommon.tsx           | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
index f424b55148..4e30a9b147 100644
--- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
+++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx
@@ -12,6 +12,15 @@ import {
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
 
+/**
+ * These patterns need for right rendering Dynamic placeholders.
+ * Must be distinguished Splitter components and another placeholders(containers)
+ */
+const EXCLUDE_PLACEHOLDERS_RENDER = [
+  new RegExp(/column-(\d{1})-\{\*\}/i),
+  new RegExp(/row-(\d{1})-\{\*\}/i),
+];
+
 type ErrorComponentProps = {
   [prop: string]: unknown;
 };
@@ -121,7 +130,10 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
     from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
     if (rendering?.placeholders) {
       Object.keys(rendering.placeholders).forEach((placeholder) => {
-        if (placeholder.indexOf('{*}') !== -1) {
+        if (
+          placeholder.indexOf('{*}') !== -1 &&
+          !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1)
+        ) {
           rendering.placeholders[name] = rendering.placeholders[placeholder];
           delete rendering.placeholders[placeholder];
         }

From 29e6e17e9154e069362dfcfbf0a8f87cf1c22b90 Mon Sep 17 00:00:00 2001
From: Ruslan Matkovskyi <rusm@sitecore.net>
Date: Sun, 29 Jan 2023 23:53:43 +0100
Subject: [PATCH 2/2]  #559044: added unit test

---
 .../src/components/Placeholder.test.tsx       | 16 ++++++++
 .../src/test-data/non-ee-data.ts              | 39 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
index a86cd56579..32cd592d80 100644
--- a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx
@@ -14,6 +14,7 @@ import { ComponentProps } from './PlaceholderCommon';
 import {
   convertedDevData as nonEeDevData,
   convertedLayoutServiceData as nonEeLsData,
+  sxaRenderingColumnSplitterVariant,
   sxaRenderingVariantData,
   sxaRenderingVariantDataWithCommonContainerName as sxaRenderingCommonContainerName,
   sxaRenderingVariantDataWithoutCommonContainerName as sxaRenderingWithoutContainerName,
@@ -346,6 +347,21 @@ describe('<Placeholder />', () => {
       );
       expect(renderedComponent.find('.default').length).to.equal(1);
     });
+
+    it('should render column splitter rendering variant', () => {
+      const component = sxaRenderingColumnSplitterVariant.sitecore.route as RouteData;
+      const phKey = 'column-1-{*}';
+
+      const renderedComponent = mount(
+        <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
+      );
+
+      expect(renderedComponent.find('.rendering-variant').length).to.equal(1);
+      expect(renderedComponent.find('.rendering-variant').prop('className')).to.equal(
+        'rendering-variant col-9|col-sm-10|col-md-12|col-lg-6|col-xl-7|col-xxl-8 test-css-class-y'
+      );
+      expect(renderedComponent.find('.default').length).to.equal(1);
+    });
   });
 
   it('should populate the "key" attribute of placeholder chrome', () => {
diff --git a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
index a1327b3bb3..52f819b4f6 100644
--- a/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
+++ b/packages/sitecore-jss-react/src/test-data/non-ee-data.ts
@@ -269,3 +269,42 @@ export const sxaRenderingVariantDataWithoutCommonContainerName = {
     },
   },
 };
+
+export const sxaRenderingColumnSplitterVariant = {
+  sitecore: {
+    context: {
+      pageEditing: false,
+    },
+    route: {
+      name: 'Home',
+      displayName: 'Home',
+      fields: {
+        key: {
+          value: 'This is a some sample &lt;p&gt;field data&lt;/p&gt; o&#39;boy! &quot;wow&quot;',
+        },
+      },
+      placeholders: {
+        'column-1-{*}': [
+          {
+            uid: 'c4d5d43b-5aa8-4e03-8f16-9428f3e02d5c',
+            componentName: 'RichText',
+            dataSource: '/sitecore/content/SxaSample/SxaSampleSite/Home/Data/RichText',
+            params: {
+              GridParameters: 'col-9|col-sm-10|col-md-12|col-lg-6|col-xl-7|col-xxl-8',
+              FieldNames: 'Default',
+              Styles: 'test-css-class-y',
+            },
+            fields: {
+              Text: {
+                value: 'Test RichText',
+              },
+              Title: {
+                value: 'Rich Text Rendering Variant',
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};