@rio-cloud/uikit-mcp 1.1.2 → 1.1.4

package/dist/docs/components/dataTabs.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#components/dataTabs
-*Captured:* 2025-12-15T15:02:39.354Z
+*Captured:* 2026-01-14T09:07:30.689Z
 
 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,40 +155,6 @@ export const RouteType = () => (
 </div>
 ```
 
-#### Props: DataTabs
-
-### DataTabs
-
-| 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. |
-| 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. |
-| 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. |
-
-#### Props: DataTab
-
-### DataTab
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| 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
@@ -335,40 +301,6 @@ export const RouteType = () => (
 </div>
 ```
 
-#### Props: DataTabs
-
-### DataTabs
-
-| 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. |
-| 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. |
-| 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. |
-
-#### Props: DataTab
-
-### DataTab
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| 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
@@ -564,40 +496,6 @@ export const RouteType = () => (
 </div>
 ```
 
-#### Props: DataTabs
-
-### DataTabs
-
-| 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. |
-| 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. |
-| 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. |
-
-#### Props: DataTab
-
-### DataTab
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| 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
@@ -648,7 +546,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 +561,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 +735,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 +751,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 +759,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="486.64190673828125px 0px" d="M45,77.222C67.778,48.25,90.556,19.278,113.333,19.278C136.111,19.278,158.889,81.5,181.667,81.5C204.444,81.5,227.222,38.333,250,38.333C272.778,38.333,295.556,62.056,318.333,62.056C341.111,62.056,363.889,45.463,386.667,38.333C409.444,31.204,432.222,25.241,455,19.278">
+                                                            <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>
                                                         </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 +809,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="77.22222222222221" 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="19.27777777777778" class="recharts-dot recharts-line-dot">
+                                                            <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>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="181.66666666666666" cy="81.5" class="recharts-dot recharts-line-dot">
+                                                            <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>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="250" cy="38.33333333333333" class="recharts-dot recharts-line-dot">
+                                                            <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>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="318.3333333333333" cy="62.05555555555556" class="recharts-dot recharts-line-dot">
+                                                            <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>
-                                                            <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="15" class="recharts-dot recharts-line-dot">
                                                             </circle>
-                                                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="140" width="470" cx="455" cy="19.27777777777778" class="recharts-dot recharts-line-dot">
+                                                            <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>
                                                         </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">
@@ -994,40 +892,6 @@ 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. |
-| 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. |
-| 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. |
-| 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. |
-
-#### Props: DataTab
-
-### DataTab
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| 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
@@ -1214,38 +1078,4 @@ 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. |
-| 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. |
-| 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. |
-| 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. |
-
-#### Props: DataTab
-
-### DataTab
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| 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. |
-| 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. |
+```