From d0439b60ef1a7327dec1e0bf16ce96cc2244b8c7 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Wed, 24 Jan 2024 16:39:27 +0700
Subject: [PATCH 1/2] fix(SubnavigationBar): ignore falsy children

---
 .../SubnavigationBar.test.tsx                 | 19 +++++++++++++++++++
 .../SubnavigationBar/SubnavigationBar.tsx     |  4 +++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx
index 396d89b9e7..c746c7a162 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.test.tsx
+++ b/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);
+  });
 });
diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
index ae63071ae5..b68f94cb96 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
+++ b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
@@ -48,6 +48,8 @@ export const SubnavigationBar = ({
     };
   }
 
+  const actualChildren = React.useMemo(() => React.Children.toArray(children), [children]);
+
   return (
     <RootComponent
       baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}
@@ -55,7 +57,7 @@ export const SubnavigationBar = ({
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
         <ul className={styles['SubnavigationBar__scrollIn']}>
-          {React.Children.map(children, (child, idx) => (
+          {actualChildren.map((child, idx) => (
             <li key={idx} className={styles['SubnavigationBar__item']}>
               {child}
             </li>

From 79aa7266741a8e8ac0bd0cea289bf5ae844780d2 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Wed, 24 Jan 2024 17:53:58 +0700
Subject: [PATCH 2/2] Fix review notes

---
 .../SubnavigationBar/SubnavigationBar.tsx         | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx b/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
index b68f94cb96..c8b2dff5f0 100644
--- a/packages/vkui/src/components/SubnavigationBar/SubnavigationBar.tsx
+++ b/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,
@@ -48,8 +49,6 @@ export const SubnavigationBar = ({
     };
   }
 
-  const actualChildren = React.useMemo(() => React.Children.toArray(children), [children]);
-
   return (
     <RootComponent
       baseClassName={mode === 'fixed' && styles['SubnavigationBar--mode-fixed']}
@@ -57,11 +56,13 @@ export const SubnavigationBar = ({
     >
       <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>
         <ul className={styles['SubnavigationBar__scrollIn']}>
-          {actualChildren.map((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>