fix(tabs): pass 'value' as first argument in 'onChange'

Author: arturbien

src/Tabs/Tab.tsx

@@ -8,7 +8,7 @@ import { CommonStyledProps } from '../types';
 type TabProps = {
   children?: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>, value: any) => void;
+  onClick?: (value: any, event: React.MouseEvent<HTMLButtonElement>) => void;
   selected?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any;
@@ -76,7 +76,7 @@ const Tab = forwardRef<HTMLButtonElement, TabProps>(
         aria-selected={selected}
         selected={selected}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
-          onClick?.(e, value)
+          onClick?.(value, e)
         }
         ref={ref}
         role='tab'

src/Tabs/Tabs.spec.tsx

@@ -61,7 +61,7 @@ describe('<Tabs />', () => {
 
       fireEvent.click(getAllByRole('tab')[1]);
       expect(handleChange).toBeCalledTimes(1);
-      expect(handleChange.mock.calls[0][1]).toBe(1);
+      expect(handleChange.mock.calls[0][0]).toBe(1);
     });
   });
 

src/Tabs/Tabs.stories.tsx

@@ -32,9 +32,12 @@ export function Default() {
   });
 
   const handleChange = (
-    _: React.MouseEvent<HTMLButtonElement>,
-    value: number
-  ) => setState({ activeTab: value });
+    value: number,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    console.log({ value, event });
+    setState({ activeTab: value });
+  };
 
   const { activeTab } = state;
   return (
@@ -88,10 +91,7 @@ export function MultiRow() {
     activeTab: 'Shoes'
   });
 
-  const handleChange = (
-    _: React.MouseEvent<HTMLButtonElement>,
-    value: string
-  ) => setState({ activeTab: value });
+  const handleChange = (value: string) => setState({ activeTab: value });
 
   const { activeTab } = state;
   return (