fix: validation was added

Author: arielsrodriguez

src/components/Tabs/TabGroup.tsx

@@ -122,44 +122,42 @@ function TabGroup({
   )
 
   const onClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      const nodes = Array.prototype.slice.call(refContainer.current?.children)
-      const newValue = nodes.indexOf(event.target) ?? 0
+    (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
       handleChangeIndicator(newValue)
-      onChange && onChange(newValue)
-
-      const tabElement = nodes[
-        newValue !== 0 ? newValue + 1 : newValue
-      ] as HTMLElement
-
-      if (tabElement)
-        tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      onChange?.(newValue)
     },
-    [refContainer, handleChangeIndicator, onChange]
+    [handleChangeIndicator, onChange]
   )
 
   const childrenWithProps = useCallback((): ReactNode => {
-    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
-    })
+    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
+      })
+    )
   }, [
+    children,
     value,
     onClick,
     disabledText,
@@ -169,7 +167,7 @@ function TabGroup({
     variant,
     tabWidth,
     tabMinWidth,
-    children
+    orientation
   ])
 
   useEffect(() => {