fix(SubnavigationBar): ignore falsy children (#6442)

* fix(SubnavigationBar): ignore falsy children

* Fix review notes

packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx

@@ -1,6 +1,25 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
+import { SubnavigationButton } from '../SubnavigationButton/SubnavigationButton';
 import { SubnavigationBar } from './SubnavigationBar';
 
 describe('SubnavigationBar', () => {
   baselineComponent(SubnavigationBar);
+
+  it('Does not render falsy children', () => {
+    const falseCondition = false;
+    const trueCondition = true;
+    render(
+      <SubnavigationBar mode="fixed">
+        <SubnavigationButton>Сканировать</SubnavigationButton>
+        {null}
+        {trueCondition && <SubnavigationButton>Добавить</SubnavigationButton>}
+        {false}
+        {falseCondition && <SubnavigationButton>Удалить</SubnavigationButton>}
+      </SubnavigationBar>,
+    );
+
+    expect(screen.getAllByRole('listitem').length).toEqual(2);
+  });
 });

packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { hasReactNode } from '@vkontakte/vkjs';
 import { HTMLAttributesWithRootRef } from '../../types';
 import {
   HorizontalScroll,
@@ -55,11 +56,13 @@ export const SubnavigationBar = ({
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
         <ul className={styles['SubnavigationBar__scrollIn']}>
-          {React.Children.map(children, (child, idx) => (
-            <li key={idx} className={styles['SubnavigationBar__item']}>
-              {child}
-            </li>
-          ))}
+          {React.Children.map(children, (child, idx) =>
+            hasReactNode(child) ? (
+              <li key={idx} className={styles['SubnavigationBar__item']}>
+                {child}
+              </li>
+            ) : null,
+          )}
         </ul>
       </ScrollWrapper>
     </RootComponent>