#559044: [SXA] fixed rendering dynamic placeholders for splitter components

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', () => {

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];
         }

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 <p>field data</p> o'boy! "wow"',
+        },
+      },
+      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',
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};