@rio-cloud/uikit-mcp 1.1.4 → 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-14T09:07:30.689Z
+*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.
 
@@ -155,6 +155,42 @@ export const RouteType = () => (
 </div>
 ```
 
+#### Props: DataTabs
+
+### DataTabs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activeKey | string | '' | Sets key and id. |
+| bordered | boolean | true | Whether the component should add a border. |
+| className | string | — | Additional classes to be set on the 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
+| tabKey | string | — | Used to identify the tab. |
+| 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. |
+
 ### Example: Example 2
 
 Vertical layout
@@ -301,6 +337,42 @@ export const RouteType = () => (
 </div>
 ```
 
+#### Props: DataTabs
+
+### DataTabs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activeKey | string | '' | Sets key and id. |
+| bordered | boolean | true | Whether the component should add a border. |
+| className | string | — | Additional classes to be set on the 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
+| tabKey | string | — | Used to identify the tab. |
+| 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. |
+
 ## DataTabs inside an ExpanderPanel and custom color
 
 ### Example: Example 3
@@ -496,6 +568,42 @@ export const RouteType = () => (
 </div>
 ```
 
+#### Props: DataTabs
+
+### DataTabs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activeKey | string | '' | Sets key and id. |
+| bordered | boolean | true | Whether the component should add a border. |
+| className | string | — | Additional classes to be set on the 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
+| tabKey | string | — | Used to identify the tab. |
+| 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. |
+
 ## DataTabs with shared common tab content and custom styling
 
 ### Example: Example 4
@@ -767,7 +875,7 @@ export const RouteType = () => (
                                                     </g>
                                                     <g tabindex="-1">
                                                         <g class="recharts-layer recharts-line">
-                                                            <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r5:" height="140" width="470" class="recharts-curve recharts-line-curve" stroke-dasharray="467.2336px 0.00004257812497598934px" d="M45,23.75C67.778,45.625,90.556,67.5,113.333,67.5C136.111,67.5,158.889,33.375,181.667,33.375C204.444,33.375,227.222,64.292,250,67.5C272.778,70.708,295.556,72.313,318.333,72.313C341.111,72.313,363.889,15,386.667,15C409.444,15,432.222,19.375,455,23.75">
+                                                            <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>
@@ -813,17 +921,17 @@ export const RouteType = () => (
                                                         <g class="recharts-layer recharts-line-dots">
                                                             <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="67.5" 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="33.375" 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="67.5" 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="72.3125" 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="15" 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="23.75" 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>
@@ -892,6 +1000,42 @@ export const RouteType = () => (
 <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">Hide last tab</button>
 ```
 
+#### Props: DataTabs
+
+### DataTabs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activeKey | string | '' | Sets key and id. |
+| bordered | boolean | true | Whether the component should add a border. |
+| className | string | — | Additional classes to be set on the 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
+| tabKey | string | — | Used to identify the tab. |
+| 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. |
+
 ### Example: Example 5
 
 Data Set 1Data Set 2
@@ -1078,4 +1222,40 @@ export default () => {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
     </div>
 </div>
-```
+```
+
+#### Props: DataTabs
+
+### DataTabs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| activeKey | string | '' | Sets key and id. |
+| bordered | boolean | true | Whether the component should add a border. |
+| className | string | — | Additional classes to be set on the 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. |
+| vertical | boolean | false | Whether the layout should be vertical. |
+
+#### Props: DataTab
+
+### DataTab
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| active | boolean | false | Whether this tab is the one currently active. |
+| tabKey | string | — | Used to identify the tab. |
+| 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. |