feat: scroll tab in view on active

affects: @medly-components/core

packages/core/src/components/Tabs/Tab/Tab.tsx

@@ -1,13 +1,19 @@
 import { WithStyle } from '@medly-components/utils';
-import { memo, useContext } from 'react';
+import type { FC } from 'react';
+import { memo, useContext, useEffect, useRef } from 'react';
 import { TabsContext } from '../Tabs.context';
 import * as Styled from './Tab.styled';
 import { TabProps } from './types';
-import type { FC } from 'react';
 
 const Component: FC<TabProps> = memo(props => {
+    const ref = useRef<HTMLButtonElement>(null);
     const { id, active, label, icon: Icon = null, helperText, count, disabled, disabledLabel, ...restProps } = props,
         { tabSize, tabBackground, variant } = useContext(TabsContext);
+
+    useEffect(() => {
+        active && ref.current && ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }, [active]);
+
     return (
         <Styled.TabWrapper
             {...{ id, active, tabSize, disabled, variant, tabBackground, ...restProps }}
@@ -16,6 +22,7 @@ const Component: FC<TabProps> = memo(props => {
             aria-selected={active ? 'true' : 'false'}
             aria-controls={`panel-${id}`}
             tabIndex={active ? 0 : -1}
+            ref={ref}
         >
             {Icon && <Icon variant={tabSize === 'S' ? 'flat' : 'solid'} />}
             <Styled.LabelAndDetailsWrapper>