Merge pull request #336 from dd3tech/fix/tabs-single-select

Fix: Add validation tab hidden and change validation value single select

Author: arielsrodriguez

src/components/Form/SingleSelect.tsx

@@ -128,7 +128,7 @@ function SingleSelect({
   }))
 
   const getInputLabel = () => {
-    if (!isFilter && !selectedOption) return placeholder || label || ''
+    if (!isFilter && !selectedOption) return ''
     if (!selectedOption) return placeholder || label || ''
 
     return selectedOption.label || selectedOption.value.toString()

src/components/Tabs/TabGroup.tsx

@@ -120,7 +120,6 @@ function TabGroup({
     },
     [orientation, variant, refContainer, dashRect]
   )
-
   const onClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
       const nodes = Array.prototype.slice.call(refContainer.current?.children)
@@ -156,6 +155,7 @@ function TabGroup({
           ...child.props
         })
       }
+      if ((child as React.ReactElement)?.props?.hidden) return null
       return child
     })
   }, [
@@ -172,8 +172,9 @@ function TabGroup({
   ])
 
   useEffect(() => {
+    if ((children as React.ReactElement)?.props?.hidden) return
     handleChangeIndicator(value)
-  }, [orientation, variant, wideLine, value])
+  }, [orientation, variant, wideLine, value, children])
 
   return (
     <div

src/components/TopPage/TopPage.tsx

@@ -204,16 +204,18 @@ const TopPage = ({
       </Flex>
       <div className="-mx-5 mt-1">
         {tabs ? (
-          <TabGroup value={tabs.value} onChange={tabs.setValue}>
-            {tabs.items.map((tab, index) => (
-              <Tab
-                key={index}
-                label={tab.label}
-                disabled={tab.disabled}
-                hidden={tab.hidden}
-                toolTipProps={tab.toolTipProps}
-              />
-            ))}
+          <TabGroup value={tabs?.value} onChange={tabs?.setValue}>
+            {tabs?.items?.map((tab, index) => {
+              return (
+                <Tab
+                  key={index}
+                  label={tab.label}
+                  disabled={tab.disabled}
+                  hidden={tab.hidden}
+                  toolTipProps={tab.toolTipProps}
+                />
+              )
+            })}
           </TabGroup>
         ) : (
           <Divider className="mt-3" light />