From 888f55accf488daf5d27834f848187bd1b0e8788 Mon Sep 17 00:00:00 2001
From: Luis Santos <luis.santos@gympass.com>
Date: Wed, 4 Oct 2023 16:43:50 +0100
Subject: [PATCH] fix: console warnings

---
 .../components/navigationmenu/index.mdx          | 16 +++++++++++-----
 .../NavigationMenu/web/NavigationMenu.test.tsx   |  9 ++++++---
 .../src/NavigationMenu/web/Switcher/Actions.tsx  |  2 +-
 .../src/NavigationMenu/web/Switcher/Switcher.tsx |  4 ++--
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/doc/content/components/components/navigationmenu/index.mdx b/packages/doc/content/components/components/navigationmenu/index.mdx
index ac0de5576a..23e4d2a2f3 100644
--- a/packages/doc/content/components/components/navigationmenu/index.mdx
+++ b/packages/doc/content/components/components/navigationmenu/index.mdx
@@ -106,10 +106,11 @@ render(() => {
         </NavigationMenu.Header>
 
         <NavigationMenu.Items>
-          {itemGroups.map(group => (
-            <NavigationMenu.ItemsGroup>
+          {itemGroups.map((group, index) => (
+            <NavigationMenu.ItemsGroup key={index}>
               {group.map(item => (
                 <NavigationMenu.Item
+                  key={item.label}
                   active={item.active}
                   expanded={item.expanded}
                   icon={<IconComponent icon={item.icon} />}
@@ -121,6 +122,7 @@ render(() => {
                   {item.subitems &&
                     item.subitems.map(({ label }) => (
                       <NavigationMenu.Subitem
+                        key={label}
                         label={label}
                         wrapper={renderWrapper}
                       />
@@ -237,10 +239,11 @@ render(() => {
         </NavigationMenu.Header>
 
         <NavigationMenu.Items>
-          {itemGroups.map(group => (
-            <NavigationMenu.ItemsGroup>
+          {itemGroups.map((group, index) => (
+            <NavigationMenu.ItemsGroup key={index}>
               {group.map(item => (
                 <NavigationMenu.Item
+                  key={item.label}
                   active={item.active}
                   expanded={item.expanded}
                   icon={<IconComponent icon={item.icon} />}
@@ -251,6 +254,7 @@ render(() => {
                   {item.subitems &&
                     item.subitems.map(({ label }) => (
                       <NavigationMenu.Subitem
+                        key={label}
                         label={label}
                         wrapper={renderWrapper}
                       />
@@ -275,6 +279,7 @@ render(() => {
       <NavigationMenu.BottomItems>
         {bottomItems.map(({ active, icon, label, wrapper }) => (
           <NavigationMenu.BottomItem
+            key={label}
             active={active}
             icon={icon}
             label={label}
@@ -342,8 +347,9 @@ render(() => {
         <NavigationMenu.Switcher
           actions={actions}
           avatar={<StyledAvatar fill="vibin" />}
-          title="User"
+          sideOffset={36}
           subtitle="Admin, Supervisor"
+          title="User"
         />
       </NavigationMenu.Footer>
     </NavigationMenu>
diff --git a/packages/yoga/src/NavigationMenu/web/NavigationMenu.test.tsx b/packages/yoga/src/NavigationMenu/web/NavigationMenu.test.tsx
index 720b43e0bc..671e89d360 100644
--- a/packages/yoga/src/NavigationMenu/web/NavigationMenu.test.tsx
+++ b/packages/yoga/src/NavigationMenu/web/NavigationMenu.test.tsx
@@ -55,10 +55,11 @@ describe('<NavigationMenu />', () => {
             </NavigationMenu.Header>
 
             <NavigationMenu.Items>
-              {itemGroups.map(group => (
-                <NavigationMenu.ItemsGroup>
+              {itemGroups.map((group, index) => (
+                <NavigationMenu.ItemsGroup key={index}>
                   {group.map(item => (
                     <NavigationMenu.Item
+                      key={item.label}
                       active={item.active}
                       expanded={item.expanded}
                       icon={<IconComponent icon={item.icon} />}
@@ -70,6 +71,7 @@ describe('<NavigationMenu />', () => {
                       {item.subitems &&
                         item.subitems.map(({ label }) => (
                           <NavigationMenu.Subitem
+                            key={label}
                             label={label}
                             wrapper={renderWrapper}
                           />
@@ -134,8 +136,9 @@ describe('<NavigationMenu />', () => {
               <NavigationMenu.Switcher
                 actions={actions}
                 avatar={<Avatar.Circle />}
-                title="User"
+                sideOffset={36}
                 subtitle="Admin, Supervisor"
+                title="User"
               />
             </NavigationMenu.Footer>
           </NavigationMenu>
diff --git a/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx b/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx
index d684819c6f..9b8061c997 100644
--- a/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx
+++ b/packages/yoga/src/NavigationMenu/web/Switcher/Actions.tsx
@@ -7,7 +7,7 @@ import * as Styles from './Actions.styles';
 
 type ActionsProps = {
   actions: SwitcherActionsProps[];
-  sideOffset: string;
+  sideOffset: number;
 };
 
 const Actions = ({ actions, sideOffset }: ActionsProps) => {
diff --git a/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx b/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx
index 4c1b8d770d..3b5403f69d 100644
--- a/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx
+++ b/packages/yoga/src/NavigationMenu/web/Switcher/Switcher.tsx
@@ -14,7 +14,7 @@ export type SwitcherProps = {
   actions?: SwitcherActionsProps[];
   avatar: React.ReactElement;
   fill?: string;
-  sideOffset?: string;
+  sideOffset?: number;
   subtitle?: string;
   title: string;
 };
@@ -23,7 +23,7 @@ const Switcher = ({
   actions,
   avatar: Avatar,
   fill = 'transparent',
-  sideOffset = '4',
+  sideOffset = 36,
   subtitle,
   title,
 }: SwitcherProps) => {