@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/dataTabs.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/dataTabs
-*Captured:* 2026-01-07T12:11:40.597Z
+*Captured:* 2026-02-03T14:04:45.261Z
 
 Passing a single tab content component via commonTabContent prop into the DataTabs component allows to update that single component when switching tabs. This comes in handy for instance when you want to animate a graph with different values from each tab.
 
@@ -161,19 +161,21 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activeKey | String | "" | Sets key and id. |
-| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
-| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
-| vertical | boolean | false | Whether the layout should be vertical. |
+| activeKey | string | '' | Sets key and id. |
 | bordered | boolean | true | Whether the component should add a border. |
-| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
 | className | string | — | Additional classes to be set on the wrapper element. |
-| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
+| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
+| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
+| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
+| tabClassName | string | — | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
+| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
+| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
+| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
 | tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
-| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
-| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
-| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
-| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+| vertical | boolean | false | Whether the layout should be vertical. |
 
 #### Props: DataTab
 
@@ -181,13 +183,13 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
 | tabKey | string | — | Used to identify the tab. |
-| title | string \| ReactNode | — | The content for the tab. |
-| active | boolean | — | Whether this tab is the one currently active. |
-| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| disableTransition | boolean | false | Whether the transition effect should be disabled. |
+| title | React.ReactNode | — | The content for the tab. |
 | onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
 | onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
-| className | String | — | Additional classes to be set on the element. |
+| className | string | — | Additional classes to be set on the element. |
 
 ### Example: Example 2
 
@@ -341,19 +343,21 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activeKey | String | "" | Sets key and id. |
-| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
-| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
-| vertical | boolean | false | Whether the layout should be vertical. |
+| activeKey | string | '' | Sets key and id. |
 | bordered | boolean | true | Whether the component should add a border. |
-| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
 | className | string | — | Additional classes to be set on the wrapper element. |
-| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
+| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
+| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
+| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
+| tabClassName | string | — | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
+| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
+| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
+| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
 | tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
-| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
-| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
-| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
-| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+| vertical | boolean | false | Whether the layout should be vertical. |
 
 #### Props: DataTab
 
@@ -361,13 +365,13 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
 | tabKey | string | — | Used to identify the tab. |
-| title | string \| ReactNode | — | The content for the tab. |
-| active | boolean | — | Whether this tab is the one currently active. |
-| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| disableTransition | boolean | false | Whether the transition effect should be disabled. |
+| title | React.ReactNode | — | The content for the tab. |
 | onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
 | onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
-| className | String | — | Additional classes to be set on the element. |
+| className | string | — | Additional classes to be set on the element. |
 
 ## DataTabs inside an ExpanderPanel and custom color
 
@@ -570,19 +574,21 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activeKey | String | "" | Sets key and id. |
-| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
-| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
-| vertical | boolean | false | Whether the layout should be vertical. |
+| activeKey | string | '' | Sets key and id. |
 | bordered | boolean | true | Whether the component should add a border. |
-| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
 | className | string | — | Additional classes to be set on the wrapper element. |
-| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
+| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
+| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
+| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
+| tabClassName | string | — | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
+| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
+| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
+| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
 | tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
-| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
-| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
-| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
-| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+| vertical | boolean | false | Whether the layout should be vertical. |
 
 #### Props: DataTab
 
@@ -590,13 +596,13 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
 | tabKey | string | — | Used to identify the tab. |
-| title | string \| ReactNode | — | The content for the tab. |
-| active | boolean | — | Whether this tab is the one currently active. |
-| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| disableTransition | boolean | false | Whether the transition effect should be disabled. |
+| title | React.ReactNode | — | The content for the tab. |
 | onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
 | onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
-| className | String | — | Additional classes to be set on the element. |
+| className | string | — | Additional classes to be set on the element. |
 
 ## DataTabs with shared common tab content and custom styling
 
@@ -648,7 +654,7 @@ Hide last tab
 /* eslint-disable max-len */
 import type React from 'react';
 import { useState } from 'react';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
 import DataTabs from '@rio-cloud/rio-uikit/DataTabs';
@@ -663,7 +669,7 @@ type DummyItem = { name: string; value: number };
 const getData = (): DummyItem[] =>
     ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'].map(item => ({
         name: item,
-        value: faker.random.arrayElement([3200, 3000, 2000, 2780, 1890, 2390, 3490]),
+        value: faker.helpers.arrayElement([3200, 3000, 2000, 2780, 1890, 2390, 3490]),
     }));
 
 const DummyContent = ({ tabKey }: { tabKey: string }) => (
@@ -837,7 +843,7 @@ export const RouteType = () => (
                                                     </title>
                                                     <desc>
                                                     </desc>
-                                                    <g tabindex="-1" id="recharts-zindex--100-:r5:">
+                                                    <g tabindex="-1">
                                                         <g class="recharts-cartesian-grid">
                                                             <g class="recharts-cartesian-grid-horizontal">
                                                                 <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="470" height="140" x1="15" y1="155" x2="485" y2="155">
@@ -853,7 +859,7 @@ export const RouteType = () => (
                                                             </g>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex--50-:r6:">
+                                                    <g tabindex="-1">
                                                     </g>
                                                     <defs>
                                                         <clipPath id="recharts1-clip">
@@ -861,19 +867,19 @@ export const RouteType = () => (
                                                             </rect>
                                                         </clipPath>
                                                     </defs>
-                                                    <g tabindex="-1" id="recharts-zindex-100-:r8:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-200-:r9:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-300-:ra:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-400-:rb:">
+                                                    <g tabindex="-1">
                                                         <g class="recharts-layer recharts-line">
-                                                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r7:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="469.85504150390625px 0px" d="M45,62.056C67.778,46.306,90.556,30.556,113.333,30.556C136.111,30.556,158.889,77.222,181.667,77.222C204.444,77.222,227.222,19.278,250,19.278C272.778,19.278,295.556,46.889,318.333,46.889C341.111,46.889,363.889,38.333,386.667,38.333C409.444,38.333,432.222,50.194,455,62.056">
+                                                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r5:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="431.9348px 0.000014453125004365575px" d="M45,23.75C67.778,28.563,90.556,33.375,113.333,33.375C136.111,33.375,158.889,15,181.667,15C204.444,15,227.222,33.375,250,33.375C272.778,33.375,295.556,15,318.333,15C341.111,15,363.889,50.438,386.667,50.438C409.444,50.438,432.222,41.906,455,33.375">
                                                             </path>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-500-:rc:">
+                                                    <g tabindex="-1">
                                                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                                                             <line angle="0" height="30" orientation="bottom" x="15" y="155" width="470" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="155" x2="485" y2="155">
                                                             </line>
@@ -911,31 +917,31 @@ export const RouteType = () => (
                                                             </g>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-600-:rd:">
+                                                    <g tabindex="-1">
                                                         <g class="recharts-layer recharts-line-dots">
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="45" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="45" cy="23.75" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="113.33333333333333" cy="30.55555555555556" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="113.33333333333333" cy="33.375" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="77.22222222222221" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="15" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="33.375" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="318.3333333333333" cy="46.888888888888886" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="318.3333333333333" cy="15" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="386.66666666666663" cy="38.33333333333333" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="386.66666666666663" cy="50.43750000000001" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
+                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="33.375" class="recharts-dot recharts-line-dot">
                                                             </circle>
                                                         </g>
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-1000-:re:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-1100-:rf:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-1200-:rg:">
+                                                    <g tabindex="-1">
                                                     </g>
-                                                    <g tabindex="-1" id="recharts-zindex-2000-:rh:">
+                                                    <g tabindex="-1">
                                                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                                                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                                                 <text height="30" orientation="bottom" width="470" stroke="none" x="45" y="163" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -1000,19 +1006,21 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activeKey | String | "" | Sets key and id. |
-| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
-| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
-| vertical | boolean | false | Whether the layout should be vertical. |
+| activeKey | string | '' | Sets key and id. |
 | bordered | boolean | true | Whether the component should add a border. |
-| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
 | className | string | — | Additional classes to be set on the wrapper element. |
-| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
+| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
+| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
+| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
+| tabClassName | string | — | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
+| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
+| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
+| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
 | tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
-| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
-| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
-| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
-| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+| vertical | boolean | false | Whether the layout should be vertical. |
 
 #### Props: DataTab
 
@@ -1020,13 +1028,13 @@ export const RouteType = () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
 | tabKey | string | — | Used to identify the tab. |
-| title | string \| ReactNode | — | The content for the tab. |
-| active | boolean | — | Whether this tab is the one currently active. |
-| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| disableTransition | boolean | false | Whether the transition effect should be disabled. |
+| title | React.ReactNode | — | The content for the tab. |
 | onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
 | onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
-| className | String | — | Additional classes to be set on the element. |
+| className | string | — | Additional classes to be set on the element. |
 
 ### Example: Example 5
 
@@ -1222,19 +1230,21 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| activeKey | String | "" | Sets key and id. |
-| onSelectTab | boolean | () => {} | Called when a tab is being activated. |
-| commonTabContent | ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
-| vertical | boolean | false | Whether the layout should be vertical. |
+| activeKey | string | '' | Sets key and id. |
 | bordered | boolean | true | Whether the component should add a border. |
-| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
 | className | string | — | Additional classes to be set on the wrapper element. |
-| tabContentClassName | string | — | Additional classes to be set on the tabContent wrapper element. |
+| commonTabContent | React.ReactNode | — | Tab content that is used for all tabs. Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when switching tabs as it is a single tab content component. |
+| disableTransition | boolean | false | Transitions between tab contents are enabled by default. Set if you want to disable them. The Navigation tabs will still remain animated. |
+| arrowClassName | string | 'bg-highlight-dark border-color-transparent' | Additional classes to be set on the arrow. |
+| onSelectTab | (tabKey: string) => void | — | Called when a tab is being activated. |
+| tabClassName | string | — | Additional classes to be set on the tab element. |
+| tabHoverClassName | string | 'bg-highlight-decent text-color-darkest' | Utility hover classes to be set on the tab element. |
+| tabActiveClassName | string | 'bg-highlight-dark text-color-white' | Utility active classes to be set on the tab element. |
+| tabFirstChildClassName | string | — | Utility first-child classes to be set on the tab element. |
+| tabLastChildClassName | string | — | Utility last-child classes to be set on the tab element. |
+| tabContentClassName | string | — | Utility content classes to be set on the tab element. |
 | tabsWrapperClassName | string | — | Additional classes to be set on the tabs wrapper element. |
-| arrowClassName | string | bg-highlight-dark | Additional classes to be set on the arrow. |
-| tabClassName | string | bg-white | Additional classes to be set on the tab element. |
-| tabHoverClassName | string | text-color-darkest | Utility hover classes to be set on the tab element. |
-| tabActiveClassName | string | text-color-darkest | Utility active classes to be set on the tab element. |
+| vertical | boolean | false | Whether the layout should be vertical. |
 
 #### Props: DataTab
 
@@ -1242,10 +1252,10 @@ export default () => {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
 | tabKey | string | — | Used to identify the tab. |
-| title | string \| ReactNode | — | The content for the tab. |
-| active | boolean | — | Whether this tab is the one currently active. |
-| disableTransition | boolean | — | Whether the transition effect should be disabled. |
+| disableTransition | boolean | false | Whether the transition effect should be disabled. |
+| title | React.ReactNode | — | The content for the tab. |
 | onAnimationStart | VoidFunction | — | Callback for when the animation starts. |
 | onAnimationEnd | VoidFunction | — | Callback for when the animation ends. |
-| className | String | — | Additional classes to be set on the element. |
+| className | string | — | Additional classes to be set on the element. |