Fix #8449: Nested SplitterPanel detection logic (#8448)

* Fix: [Splitter] Nested SplitterPanel detection logic

Current logic incorrectly identifies any nested Prime Component
as a nested SplitterPanel causing incorrect behaviour. This
change fixes that to identify SplitterPanel component only for
such purpose.

* fix formatting

* fix formatting

Author: usrlocl

components/doc/common/docsectionnav.js

@@ -138,11 +138,11 @@ export function DocSectionNav({ docs = [] }) {
                     style={{
                         display: 'flex',
                         justifyContent: 'center',
-                        marginTop:'1rem'
+                        marginTop: '1rem'
                     }}
                 >
-                    <a href="https://primeui.store" target="_blank" rel="noopener" className='p-button p-component p-button-rounded p-button-sm'>
-                        <span className='p-button-label p-c'>Buy Now</span>
+                    <a href="https://primeui.store" target="_blank" rel="noopener" className="p-button p-component p-button-rounded p-button-sm">
+                        <span className="p-button-label p-c">Buy Now</span>
                     </a>
                 </span>
             </div>

components/lib/splitter/Splitter.js

@@ -380,7 +380,7 @@ export const Splitter = React.memo(
                 prevSize.current = panelSize(panelSizes, 0);
                 _panelSizes[i] = panelSize(panelSizes, i);
 
-                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
+                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']")) && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-section='root']"))) {
                     !isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
                     panelElement.setAttribute('data-p-splitter-panel-nested', true);
                     setNested(true);

components/lib/splitter/Splitter.spec.js

@@ -70,4 +70,14 @@ describe('Splitter', () => {
         </>,
         'Without panels'
     );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel>
+                    <div data-pc-section="root" />
+                </SplitterPanel>
+            </Splitter>
+        </>,
+        'Single Panel with some other nested prime component'
+    );
 });

components/lib/splitter/__snapshots__/Splitter.spec.js.snap

@@ -341,3 +341,47 @@ exports[`Splitter Without panels 1`] = `
   />
 </div>
 `;
+
+exports[`Splitter Single Panel with some other nested prime component 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_9_0"
+      role="presentation"
+      style="flex-basis: calc(100% - 0px);"
+    >
+      <div
+        data-pc-section="root"
+      />
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="height: 4px;"
+    >
+      <div
+        aria-controls="pr_id_9_0"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="100"
+        aria-valuetext="100%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;