fix: add validation tabs

Author: arielsrodriguez

src/components/Tabs/TabGroup.tsx

@@ -120,44 +120,46 @@ function TabGroup({
     },
     [orientation, variant, refContainer, dashRect]
   )
-
+  console.log(refContainer.current?.children)
   const onClick = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      const nodes = Array.from(
-        refContainer.current?.children ?? []
-      ) as HTMLElement[]
-      const newValue = nodes.indexOf(e.currentTarget as unknown as HTMLElement) // 👈 en vez de e.target
+    (event: MouseEvent<HTMLButtonElement>) => {
+      const nodes = Array.prototype.slice.call(refContainer.current?.children)
+      const newValue = nodes.indexOf(event.target) ?? 0
       handleChangeIndicator(newValue)
-      onChange?.(newValue)
+      onChange && onChange(newValue)
+
+      const tabElement = nodes[
+        newValue !== 0 ? newValue + 1 : newValue
+      ] as HTMLElement
+
+      if (tabElement)
+        tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
     },
-    [handleChangeIndicator, onChange]
+    [refContainer, handleChangeIndicator, onChange]
   )
 
   const childrenWithProps = useCallback((): ReactNode => {
-    const visibles = React.Children.toArray(children).filter(
-      (children): children is React.ReactElement =>
-        React.isValidElement(children) && !children.props?.hidden
-    )
-
-    return visibles.map((child, visibleIndex) =>
-      React.cloneElement(child, {
-        index: visibleIndex,
-        'data-tab-index': visibleIndex,
-        value,
-        onClick,
-        textColor,
-        textDisabledColor,
-        variant,
-        disabledText,
-        tabWidth,
-        tabMinWidth,
-        className: childClassName,
-        isVertical: orientation === 'vertical',
-        ...child.props
-      })
-    )
+    return React.Children.map(children, (child, index): ReactNode => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child as React.ReactElement, {
+          index,
+          value,
+          onClick,
+          textColor,
+          textDisabledColor,
+          variant,
+          disabledText,
+          tabWidth,
+          tabMinWidth,
+          className: childClassName,
+          isVertical: orientation === 'vertical',
+          ...child.props
+        })
+      }
+      if ((child as React.ReactElement)?.props?.hidden) return null
+      return child
+    })
   }, [
-    children,
     value,
     onClick,
     disabledText,
@@ -167,7 +169,7 @@ function TabGroup({
     variant,
     tabWidth,
     tabMinWidth,
-    orientation
+    children
   ])
 
   useEffect(() => {

src/components/TopPage/TopPage.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) DD360 and its affiliates.
  */
 
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { composeClasses } from 'lib/classes'
 import Breadcrumbs from 'components/Breadcrumbs'
 import type { BreadcrumbsProps } from 'components/Breadcrumbs'
@@ -109,6 +109,10 @@ const TopPage = ({
     return 'text-blue-600'
   }, [actionIcon])
 
+  const updateTabs = useMemo(() => {
+    return tabs?.items.filter((tab) => !tab.hidden)
+  }, [tabs])
+
   return (
     <div className={classNameHeader ?? 'sticky top-0 bg-white z-40 px-5'}>
       {(optionsBreadcrumbs || lastUpdate) && (
@@ -203,20 +207,17 @@ const TopPage = ({
         )}
       </Flex>
       <div className="-mx-5 mt-1">
-        {tabs ? (
-          <TabGroup value={tabs.value} onChange={tabs.setValue}>
-            {tabs.items.map((tab, index) => {
-              if (tab.hidden) return null
-              return (
-                <Tab
-                  key={index}
-                  label={tab.label}
-                  disabled={tab.disabled}
-                  hidden={tab.hidden}
-                  toolTipProps={tab.toolTipProps}
-                />
-              )
-            })}
+        {updateTabs ? (
+          <TabGroup value={tabs?.value} onChange={tabs?.setValue}>
+            {updateTabs?.map((tab, index) => (
+              <Tab
+                key={index}
+                label={tab.label}
+                disabled={tab.disabled}
+                hidden={tab.hidden}
+                toolTipProps={tab.toolTipProps}
+              />
+            ))}
           </TabGroup>
         ) : (
           <Divider className="mt-3" light />