fix(tabs): fix overflow and positining issue with tabs

Author: fritzschoff

src/components/Tabs/Tabs.stories.tsx

@@ -12,11 +12,22 @@ const Template: Story<ComponentProps<typeof Tabs>> = (args) => <Tabs {...args} /
 
 export const Basic = Template.bind({});
 Basic.args = {
+  contentClassName: 'ui-overflow-hidden',
   items: [
     {
       id: 'tab1',
       label: 'tab12',
-      content: <div>Tab 1</div>
+      content: (
+        <div style={{ display: 'flex' }}>
+          Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+          Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>Tab 1 <div>Tab 1</div>
+        </div>
+      )
     },
     {
       id: 'tab2',
@@ -30,6 +41,5 @@ Basic.args = {
       disabled: true
     }
   ],
-  initial: 'tab1',
-  contentClassName: 'ui-p-4'
+  initial: 'tab1'
 };

src/components/Tabs/Tabs.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import React, { useMemo, useState } from 'react';
-
+import React, { useCallback, useMemo, useState } from 'react';
 import { Tab } from '../Tab/Tab';
 
 export interface ITabItem {
@@ -28,21 +27,28 @@ export const Tabs: React.FC<TabsProps> = ({
 }) => {
   const [activeTab, setActiveTab] = useState(initial);
 
-  const selectTab = (item: ITabItem) => {
-    if (item.disabled) return;
-
-    setActiveTab(item.id);
-    onChange?.(item.id);
-  };
+  const selectTab = useCallback(
+    (item: ITabItem) => {
+      if (item.disabled) return;
+      setActiveTab(item.id);
+      onChange?.(item.id);
+    },
+    [onChange]
+  );
 
   const content = useMemo(
     () => items.find((item) => item.id === activeTab)?.content,
     [activeTab, items]
   );
 
   return (
-    <div className={className}>
-      <div className='ui-flex ui-items-center ui-flex-nowrap ui-overflow-auto'>
+    <>
+      <div
+        className={clsx(
+          'ui-flex ui-items-center ui-justify-center ui-flex-nowrap ui-overflow-auto',
+          className
+        )}
+      >
         {items.map((item) => (
           <Tab
             key={item.id}
@@ -54,7 +60,7 @@ export const Tabs: React.FC<TabsProps> = ({
           />
         ))}
       </div>
-      <div className={clsx(contentClassName, 'dark:ui-text-white')}>{content}</div>
-    </div>
+      <div className={clsx('dark:ui-text-white', contentClassName)}>{content}</div>
+    </>
   );
 };