@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/tooltip.json

@@ -0,0 +1,270 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:01.438Z",
+    "source": "https://uikit.developers.rio.cloud/#components/tooltip",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/tooltip",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "87df7686078a14e6f47c159846d45179ff07df10dc0edc9336c529bc8cffec33"
+  },
+  "title": "Tooltips",
+  "lead": "In order to use a Tooltip on an element, wrap it with the OverlayTrigger component or use the SimpleTooltip component.",
+  "content": [
+    {
+      "heading": "Tooltips",
+      "body": "> Note: By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element. To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid grid-cols-1 grid-cols-2-sm gap-20\"><div class=\"padding-15\"><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button></div><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button></div><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button></div></div><div class=\"padding-15\"><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button></div><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button></div><div class=\"display-flex justify-content-between gap-10 center-block height-50\"><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button></div></div></div><hr><div class=\"display-grid grid-cols-2\"><div class=\"display-flex justify-content-between gap-10 center-block\"><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div></div><div class=\"display-flex justify-content-between gap-10 center-block\"><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div><div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\"><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Button from '@rio-cloud/rio-uikit/Button';\nimport Tooltip from '@rio-cloud/rio-uikit/Tooltip';\nimport OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';\nimport type { Placement } from '@rio-cloud/rio-uikit/values/Placement';\n\nimport { getNames } from '../../../utils/mapUtils';\n\nconst tip = <span>Tooltip</span>;\n\nconst tooltipPlacements = {\n    top: [\n        {\n            name: 'top-start',\n        },\n        {\n            name: 'top',\n        },\n        {\n            name: 'top-end',\n        },\n    ],\n    middle: [\n        {\n            name: 'left',\n        },\n        {\n            name: 'right',\n        },\n    ],\n    bottom: [\n        {\n            name: 'bottom-start',\n        },\n        {\n            name: 'bottom',\n        },\n        {\n            name: 'bottom-end',\n        },\n    ],\n};\n\nconst eachPlacementTop = getNames(tooltipPlacements.top);\nconst eachPlacementMiddle = getNames(tooltipPlacements.middle);\nconst eachPlacementBottom = getNames(tooltipPlacements.bottom);\n\nexport default () => (\n    <>\n        <div className='display-grid grid-cols-1 grid-cols-2-sm gap-20'>\n            <div className='padding-15'>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementTop.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Hover</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementMiddle.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Hover</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementBottom.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Hover</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n            </div>\n            <div className='padding-15'>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementTop.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            trigger='click'\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Click</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementMiddle.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            trigger='click'\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Click</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n                <div className='display-flex justify-content-between gap-10 center-block height-50'>\n                    {eachPlacementBottom.map((placement: Placement) => (\n                        <OverlayTrigger\n                            key={crypto.randomUUID()}\n                            placement={placement}\n                            trigger='click'\n                            overlay={\n                                <Tooltip id='tooltip' allowOnTouch>\n                                    {tip}\n                                </Tooltip>\n                            }\n                        >\n                            <Button bsStyle='primary'>Click</Button>\n                        </OverlayTrigger>\n                    ))}\n                </div>\n            </div>\n        </div>\n        <hr />\n        <div className='display-grid grid-cols-2'>\n            <div className='display-flex justify-content-between gap-10 center-block'>\n                {eachPlacementTop.map((placement: Placement) => (\n                    <OverlayTrigger\n                        key={crypto.randomUUID()}\n                        placement={placement}\n                        delay={200}\n                        overlay={\n                            <Tooltip id='tooltip' allowOnTouch>\n                                {tip}\n                            </Tooltip>\n                        }\n                    >\n                        <div\n                            className='display-flex align-items-center justify-content-center'\n                            data-test='info-overlay'\n                        >\n                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />\n                        </div>\n                    </OverlayTrigger>\n                ))}\n            </div>\n            <div className='display-flex justify-content-between gap-10 center-block'>\n                {eachPlacementBottom.map((placement: Placement) => (\n                    <OverlayTrigger\n                        key={crypto.randomUUID()}\n                        placement={placement}\n                        delay={{ show: 1000, hide: 500 }}\n                        overlay={\n                            <Tooltip id='tooltip' allowOnTouch>\n                                {tip}\n                            </Tooltip>\n                        }\n                    >\n                        <div\n                            className='display-flex align-items-center justify-content-center'\n                            data-test='info-overlay'\n                        >\n                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />\n                        </div>\n                    </OverlayTrigger>\n                ))}\n            </div>\n        </div>\n    </>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid grid-cols-1 grid-cols-2-sm gap-20\">\n    <div class=\"padding-15\">\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n        </div>\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n        </div>\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Hover</button>\n        </div>\n    </div>\n    <div class=\"padding-15\">\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n        </div>\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n        </div>\n        <div class=\"display-flex justify-content-between gap-10 center-block height-50\">\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n            <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Click</button>\n        </div>\n    </div>\n</div>\n<hr>\n<div class=\"display-grid grid-cols-2\">\n    <div class=\"display-flex justify-content-between gap-10 center-block\">\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n    </div>\n    <div class=\"display-flex justify-content-between gap-10 center-block\">\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n        <div class=\"display-flex align-items-center justify-content-center\" data-test=\"info-overlay\">\n            <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n            </span>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Tooltip",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String / Number",
+                      "default": "",
+                      "description": "An HTML id attribute, necessary for accessibility."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end"
+                    },
+                    {
+                      "name": "tooltipStyle",
+                      "type": "String",
+                      "default": "default",
+                      "description": "Defines the look of the tooltip. Possible values are: default, onboarding"
+                    },
+                    {
+                      "name": "textAlignment",
+                      "type": "String",
+                      "default": "center",
+                      "description": "Defines the position of the text content. Possible values are: left, right, center"
+                    },
+                    {
+                      "name": "width",
+                      "type": "String",
+                      "default": "",
+                      "description": "Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500"
+                    },
+                    {
+                      "name": "allowOnTouch",
+                      "type": "bool",
+                      "default": "false",
+                      "description": "Render Tooltips on mobile devices."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the inner element."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any element to be rendered inside the tooltip."
+                    }
+                  ]
+                },
+                {
+                  "heading": "OverlayTrigger",
+                  "rows": [
+                    {
+                      "name": "trigger",
+                      "type": "'click' | 'hover' | 'focus'",
+                      "default": "hover",
+                      "description": "Specify which action or actions trigger Overlay visibility. Possible values are: OverlayTrigger.TRIGGER_CLICK , OverlayTrigger.TRIGGER_HOVER, OverlayTrigger.TRIGGER_HOVER or 'click', 'hover', 'focus'"
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number / Object",
+                      "default": "",
+                      "description": "A millisecond delay amount to show and hide the Overlay once triggered."
+                    },
+                    {
+                      "name": "└show",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before showing the Overlay once triggered."
+                    },
+                    {
+                      "name": "└hide",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before hiding the Overlay once triggered."
+                    },
+                    {
+                      "name": "defaultShow",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "The initial visibility state of the Overlay. For more nuanced visibility control, consider using the Overlay component directly."
+                    },
+                    {
+                      "name": "overlay",
+                      "type": "Node",
+                      "default": "",
+                      "description": "An element or text to overlay next to the target."
+                    },
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "",
+                      "description": "Sets the direction the overlay is positioned towards. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end"
+                    },
+                    {
+                      "name": "popperConfig",
+                      "type": "Object",
+                      "default": "",
+                      "description": "A Popper.js config object passed to the the underlying popper instance."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SimpleTooltip",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><label>Simple tooltip with auto placement:</label><div class=\"margin-bottom-25 display-flex gap-25\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Hover me</button></div><label>Simple tooltip with bottom placement:</label><div class=\"margin-bottom-25 display-flex gap-25\"><div class=\"tag\"><div class=\"tag-inner\">Hover me</div></div><div class=\"uikit-switch\"><label class=\"switch-label label-position-right\"><input type=\"checkbox\" class=\"switch-input\"><div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\"><div class=\"switch-handle\"></div></div>Hover me</label></div></div><label>Simple tooltip within text:</label><div>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur adipiscing</a> 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. <a href=\"#\">Fusce ac ligula bibendum</a>, rutrum libero quis, viverra sem. Interdum etmalesuada 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><hr><span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\"></span></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Tag from '@rio-cloud/rio-uikit/Tag';\nimport Switch from '@rio-cloud/rio-uikit/Switch';\n\nconst content = <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>;\n\nexport default () => (\n    <div>\n        <label>Simple tooltip with auto placement:</label>\n        <div className='margin-bottom-25 display-flex gap-25'>\n            <SimpleTooltip content={content}>\n                <Button>Hover me</Button>\n            </SimpleTooltip>\n        </div>\n        <label>Simple tooltip with bottom placement:</label>\n        <div className='margin-bottom-25 display-flex gap-25'>\n            <SimpleTooltip content={content} placement='bottom'>\n                <Tag>Hover me</Tag>\n            </SimpleTooltip>\n            <SimpleTooltip content={content} placement='bottom'>\n                <Switch>Hover me</Switch>\n            </SimpleTooltip>\n        </div>\n        <label>Simple tooltip within text:</label>\n        <div>\n            Lorem ipsum dolor sit amet,{' '}\n            <SimpleTooltip content={content} placement='top'>\n                <a href='#'>consectetur adipiscing</a>\n            </SimpleTooltip>{' '}\n            elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc\n            efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque\n            tincidunt.{' '}\n            <SimpleTooltip content={content} placement='top'>\n                <a href='#'>Fusce ac ligula bibendum</a>\n            </SimpleTooltip>\n            , rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut\n            hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci,\n            semper finibus lorem in, fringilla pretium velit.\n        </div>\n        <hr />\n        <SimpleTooltip placement='bottom-start' content={<span>Hello</span>} width={100}>\n            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />\n        </SimpleTooltip>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <label>Simple tooltip with auto placement:</label>\n    <div class=\"margin-bottom-25 display-flex gap-25\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Hover me</button>\n    </div>\n    <label>Simple tooltip with bottom placement:</label>\n    <div class=\"margin-bottom-25 display-flex gap-25\">\n        <div class=\"tag\">\n            <div class=\"tag-inner\">Hover me</div>\n        </div>\n        <div class=\"uikit-switch\">\n            <label class=\"switch-label label-position-right\">\n                <input type=\"checkbox\" class=\"switch-input\">\n                <div class=\"switch-content\" style=\"color: var(--brand-primary); min-width: 40px;\">\n                    <div class=\"switch-handle\">\n                    </div>\n                </div>Hover me\n            </label>\n        </div>\n    </div>\n    <label>Simple tooltip within text:</label>\n    <div>Lorem ipsum dolor sit amet, <a href=\"#\">consectetur adipiscing</a> 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. <a href=\"#\">Fusce ac ligula bibendum</a>, rutrum libero quis, viverra sem. Interdum etmalesuada 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>\n    <hr>\n    <span class=\"rioglyph rioglyph-info-sign text-color-info text-size-18\">\n    </span>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "SimpleTooltip",
+                  "rows": [
+                    {
+                      "name": "trigger",
+                      "type": "String",
+                      "default": "hover",
+                      "description": "Specify which action or actions trigger Overlay visibility. Possible values are: 'click', 'hover', 'focus'"
+                    },
+                    {
+                      "name": "placement",
+                      "type": "String",
+                      "default": "AUTO",
+                      "description": "Sets the direction the Tooltip is positioned towards. This is generally provided by the OverlayTrigger component positioning the tooltip. Possible values are: auto-start, auto, auto-end, top-start, top, top-end, bottom-start, bottom, bottom-end, right-start, right, right-end, left-start, left or left-end"
+                    },
+                    {
+                      "name": "content",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The tooltip content."
+                    },
+                    {
+                      "name": "targetRef",
+                      "type": "Ref",
+                      "default": "",
+                      "description": "The react ref object assigned to the target of the tooltip."
+                    },
+                    {
+                      "name": "delay",
+                      "type": "Number / Object",
+                      "default": "",
+                      "description": "A millisecond delay amount to show the Overlay once triggered."
+                    },
+                    {
+                      "name": "└show",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before showing the Overlay once triggered."
+                    },
+                    {
+                      "name": "└hide",
+                      "type": "Number",
+                      "default": "",
+                      "description": "A millisecond delay amount before hiding the Overlay once triggered."
+                    },
+                    {
+                      "name": "textAlignment",
+                      "type": "String",
+                      "default": "center",
+                      "description": "Defines the position of the text content. Possible values are: left, right, center"
+                    },
+                    {
+                      "name": "width",
+                      "type": "String",
+                      "default": "",
+                      "description": "Defines the width of the tooltip. Possible values are: auto, 100, 150, 200, 250, 300, 350, 400, 450, 500"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the inner element."
+                    },
+                    {
+                      "name": "popperConfig",
+                      "type": "Object",
+                      "default": "",
+                      "description": "A Popper.js config object passed to the the underlying popper instance."
+                    },
+                    {
+                      "name": "children",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The target node."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/virtuallist.json

@@ -0,0 +1,175 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:47.173Z",
+    "source": "https://uikit.developers.rio.cloud/#components/virtualList",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/virtuallist",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "2d601fb47c834c8b282e44d07d64a30f072c1a3ba8f95d8b651e9a0d4c4ea479"
+  },
+  "title": "VirtualList",
+  "lead": "The VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.",
+  "content": [
+    {
+      "heading": "VirtualList",
+      "body": "It allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 padding-y-20\"><label class=\"padding-left-10\">Virtual list with 100 items</label><div class=\"VirtualList overflow-y-auto max-height-400 padding-x-10\" style=\"height: 100%; position: relative; overflow: auto;\"><div class=\"position-relative\" style=\"height: 7000px;\"><div class=\"VirtualListItemContainer \"><div class=\"VirtualListItemWrapper \" data-index=\"0\" style=\"position: absolute; transform: translateY(0px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 1</div><div class=\"word-break\" data-test-ignore=\"text\">Bibendum, semper orci velit. consectetur eget ipsum ac sagittis massa ac sem.</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"1\" style=\"position: absolute; transform: translateY(70px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 2</div><div class=\"word-break\" data-test-ignore=\"text\">\nLorem sem. eget et in ut faucibus. adipiscing in, fames libero ac eget Fusce vel</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"2\" style=\"position: absolute; transform: translateY(140px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 3</div><div class=\"word-break\" data-test-ignore=\"text\">Eget ac Vivamus in viverra ut Duis Mauris pretium ac elit.</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"3\" style=\"position: absolute; transform: translateY(210px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 4</div><div class=\"word-break\" data-test-ignore=\"text\">Bibendum, volutpat ac ac pretium in, fringilla ante ipsum orci malesuada amet, libero enim</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"4\" style=\"position: absolute; transform: translateY(280px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 5</div><div class=\"word-break\" data-test-ignore=\"text\">Consectetur In condimentum semper amet, \nLorem nec libero in efficitur</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"5\" style=\"position: absolute; transform: translateY(350px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 6</div><div class=\"word-break\" data-test-ignore=\"text\">Ut hendrerit elementum primis in Duis posuere enim in, ac hendrerit dolor Ut est eget</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"6\" style=\"position: absolute; transform: translateY(420px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 7</div><div class=\"word-break\" data-test-ignore=\"text\">In ante eget in pretium elementum lorem ac consectetur in,</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"7\" style=\"position: absolute; transform: translateY(490px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 8</div><div class=\"word-break\" data-test-ignore=\"text\">Felis. ut semper. eget Fusce Sed et orci,</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"8\" style=\"position: absolute; transform: translateY(560px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 9</div><div class=\"word-break\" data-test-ignore=\"text\">Ante Integer quis, volutpat Integer \nLorem velit. In</div></div></div><div class=\"VirtualListItemWrapper \" data-index=\"9\" style=\"position: absolute; transform: translateY(630px); width: 100%; will-change: transform;\"><div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\"><div class=\"text-medium\" data-test-ignore=\"text\">Item 10</div><div class=\"word-break\" data-test-ignore=\"text\">Ut et posuere Sed in</div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import VirtualList from '@rio-cloud/rio-uikit/VirtualList';\n\nimport { generateDummyText } from '../../../utils/data';\n\nconst ITEM_COUNT = 100;\n\nexport default () => {\n    const items = Array.from({ length: ITEM_COUNT }, (_, index) => ({\n        title: `Item ${index + 1}`,\n        description: generateDummyText(),\n    }));\n\n    return (\n        <div className='max-width-600 padding-y-20'>\n            <label className='padding-left-10'>Virtual list with {ITEM_COUNT} items</label>\n            <VirtualList\n                items={items}\n                renderItem={(item, index) => (\n                    <div\n                        key={index}\n                        className='margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker'\n                    >\n                        <div className='text-medium' data-test-ignore='text'>\n                            {item.title}\n                        </div>\n                        <div className='word-break' data-test-ignore='text'>\n                            {item.description}\n                        </div>\n                    </div>\n                )}\n                className='max-height-400 padding-x-10'\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 padding-y-20\">\n    <label class=\"padding-left-10\">Virtual list with 100 items</label>\n    <div class=\"VirtualList overflow-y-auto max-height-400 padding-x-10\" style=\"height: 100%; position: relative; overflow: auto;\">\n        <div class=\"position-relative\" style=\"height: 7000px;\">\n            <div class=\"VirtualListItemContainer \">\n                <div class=\"VirtualListItemWrapper \" data-index=\"0\" style=\"position: absolute; transform: translateY(0px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 1</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Bibendum, semper orci velit. consectetur eget ipsum ac sagittis massa ac sem.</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"1\" style=\"position: absolute; transform: translateY(70px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 2</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">\n                            Lorem sem. eget et in ut faucibus. adipiscing in, fames libero ac eget Fusce vel</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"2\" style=\"position: absolute; transform: translateY(140px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 3</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Eget ac Vivamus in viverra ut Duis Mauris pretium ac elit.</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"3\" style=\"position: absolute; transform: translateY(210px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 4</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Bibendum, volutpat ac ac pretium in, fringilla ante ipsum orci malesuada amet, libero enim</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"4\" style=\"position: absolute; transform: translateY(280px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 5</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Consectetur In condimentum semper amet,\n                            Lorem nec libero in efficitur</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"5\" style=\"position: absolute; transform: translateY(350px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 6</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Ut hendrerit elementum primis in Duis posuere enim in, ac hendrerit dolor Ut est eget</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"6\" style=\"position: absolute; transform: translateY(420px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 7</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">In ante eget in pretium elementum lorem ac consectetur in,</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"7\" style=\"position: absolute; transform: translateY(490px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 8</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Felis. ut semper. eget Fusce Sed et orci,</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"8\" style=\"position: absolute; transform: translateY(560px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 9</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Ante Integer quis, volutpat Integer\n                            Lorem velit. In</div>\n                    </div>\n                </div>\n                <div class=\"VirtualListItemWrapper \" data-index=\"9\" style=\"position: absolute; transform: translateY(630px); width: 100%; will-change: transform;\">\n                    <div class=\"margin-bottom-10 padding-y-10 padding-x-15 bg-white rounded shadow-accent text-color-darker\">\n                        <div class=\"text-medium\" data-test-ignore=\"text\">Item 10</div>\n                        <div class=\"word-break\" data-test-ignore=\"text\">Ut et posuere Sed in</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of items to be rendered in the list."
+                    },
+                    {
+                      "name": "renderItem",
+                      "type": "(item: T, index: number) => React.ReactElement",
+                      "default": "",
+                      "description": "A function that renders an item given its data and index."
+                    },
+                    {
+                      "name": "overscanCount",
+                      "type": "number",
+                      "default": "3",
+                      "description": "The number of items to render outside the visible area for smoother scrolling."
+                    },
+                    {
+                      "name": "defaultHeight",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The default height for items if their height cannot be determined."
+                    },
+                    {
+                      "name": "scrollContainerRef",
+                      "type": "React.RefObject<HTMLElement>",
+                      "default": "",
+                      "description": "Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container."
+                    },
+                    {
+                      "name": "containerClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for the container of the list items."
+                    },
+                    {
+                      "name": "listItemWrapperClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for the outer list container."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"padding-20\"><label>Virtual list with 5000 items</label><div class=\"max-width-600 max-height-400 overflow-y-auto\"><div class=\"VirtualList overflow-y-auto border rounded\" style=\"height: 360000px; position: relative; overflow: visible;\"><div class=\"position-relative\" style=\"height: auto;\"><div class=\"VirtualListItemContainer list-group\"><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"0\" style=\"position: absolute; transform: translateY(0px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 1</div><div class=\"word-break\" data-test-ignore=\"text\">Elementum finibus Integer lorem malesuada pretium fames in</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"1\" style=\"position: absolute; transform: translateY(69px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 2</div><div class=\"word-break\" data-test-ignore=\"text\">Tortor in semper. massa Duis eget nunc sem. malesuada</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"2\" style=\"position: absolute; transform: translateY(139px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 3</div><div class=\"word-break\" data-test-ignore=\"text\">Pharetra ac iaculis. pharetra in, finibus pharetra felis. Sed ligula quis, semper. vel</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"3\" style=\"position: absolute; transform: translateY(209px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 4</div><div class=\"word-break\" data-test-ignore=\"text\">Efficitur semper. sem. neque. aliquam orci nec ante in, In</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"4\" style=\"position: absolute; transform: translateY(279px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 5</div><div class=\"word-break\" data-test-ignore=\"text\">Vel dui Interdum amet, Vivamus in ipsum</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"5\" style=\"position: absolute; transform: translateY(349px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 6</div><div class=\"word-break\" data-test-ignore=\"text\">Felis. purus consectetur dolor efficitur ut libero neque. massa, efficitur dui consectetur fringilla molestie posuere</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"6\" style=\"position: absolute; transform: translateY(439px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 7</div><div class=\"word-break\" data-test-ignore=\"text\">Condimentum ante bibendum, orci, adipiscing sem. vel eget malesuada quis,</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"7\" style=\"position: absolute; transform: translateY(509px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 8</div><div class=\"word-break\" data-test-ignore=\"text\">Iaculis. Mauris ut semper. bibendum, est finibus</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"8\" style=\"position: absolute; transform: translateY(579px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 9</div><div class=\"word-break\" data-test-ignore=\"text\">Massa Interdum ligula iaculis. vel fringilla pretium</div></div></div></div><div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"9\" style=\"position: absolute; transform: translateY(649px); width: 100%; will-change: transform;\"><div class=\"display-flex gap-15 align-items-center\"><div class=\"Avatar bg-lightest\" style=\"height: 40px;\"><span class=\"Avatar-icon rioglyph rioglyph-truck \"></span></div><div><div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 10</div><div class=\"word-break\" data-test-ignore=\"text\">Enim consectetur in molestie Integer Interdum</div></div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef } from 'react';\n\nimport Avatar from '@rio-cloud/rio-uikit/Avatar';\nimport VirtualList from '@rio-cloud/rio-uikit/VirtualList';\n\nimport { generateDummyText } from '../../../utils/data';\n\nconst DemoItem = ({ title, description }: { title: string; description: string }) => (\n    <div className='display-flex gap-15 align-items-center'>\n        <Avatar iconName='truck' backgroundColor='bg-lightest' />\n        <div>\n            <div className='text-medium' data-test-ignore='text'>\n                {title}\n            </div>\n            <div className='word-break' data-test-ignore='text'>\n                {description}\n            </div>\n        </div>\n    </div>\n);\n\nconst ITEM_COUNT = 5_000;\n\n// This demo includes:\n// - A custom item component\n// - List group styling for the inner container and the items wrapper\n// - The max height is defined outside on the parent of the VirtualList using a scrollContainerRef\n// - A custom overscan count, means more items are loaded outside the visible window\n\nexport default () => {\n    const items = Array.from({ length: ITEM_COUNT }, (_, index) => ({\n        title: `Vehicle ${index + 1}`,\n        description: generateDummyText(),\n    }));\n\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n    return (\n        <div className='padding-20'>\n            <label>Virtual list with {ITEM_COUNT} items</label>\n            <div ref={scrollContainerRef} className='max-width-600 max-height-400 overflow-y-auto'>\n                <VirtualList\n                    items={items}\n                    renderItem={(item, index) => (\n                        <DemoItem key={index} title={item.title} description={item.description} />\n                    )}\n                    className='border rounded'\n                    containerClassName='list-group'\n                    listItemWrapperClassName='list-group-item padding-y-15'\n                    defaultHeight={71}\n                    overscanCount={5}\n                    scrollContainerRef={scrollContainerRef}\n                />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-20\">\n    <label>Virtual list with 5000 items</label>\n    <div class=\"max-width-600 max-height-400 overflow-y-auto\">\n        <div class=\"VirtualList overflow-y-auto border rounded\" style=\"height: 360000px; position: relative; overflow: visible;\">\n            <div class=\"position-relative\" style=\"height: auto;\">\n                <div class=\"VirtualListItemContainer list-group\">\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"0\" style=\"position: absolute; transform: translateY(0px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 1</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Elementum finibus Integer lorem malesuada pretium fames in</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"1\" style=\"position: absolute; transform: translateY(69px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 2</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Tortor in semper. massa Duis eget nunc sem. malesuada</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"2\" style=\"position: absolute; transform: translateY(139px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 3</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Pharetra ac iaculis. pharetra in, finibus pharetra felis. Sed ligula quis, semper. vel</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"3\" style=\"position: absolute; transform: translateY(209px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 4</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Efficitur semper. sem. neque. aliquam orci nec ante in, In</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"4\" style=\"position: absolute; transform: translateY(279px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 5</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Vel dui Interdum amet, Vivamus in ipsum</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"5\" style=\"position: absolute; transform: translateY(349px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 6</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Felis. purus consectetur dolor efficitur ut libero neque. massa, efficitur dui consectetur fringilla molestie posuere</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"6\" style=\"position: absolute; transform: translateY(439px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 7</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Condimentum ante bibendum, orci, adipiscing sem. vel eget malesuada quis,</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"7\" style=\"position: absolute; transform: translateY(509px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 8</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Iaculis. Mauris ut semper. bibendum, est finibus</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"8\" style=\"position: absolute; transform: translateY(579px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 9</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Massa Interdum ligula iaculis. vel fringilla pretium</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"VirtualListItemWrapper list-group-item padding-y-15\" data-index=\"9\" style=\"position: absolute; transform: translateY(649px); width: 100%; will-change: transform;\">\n                        <div class=\"display-flex gap-15 align-items-center\">\n                            <div class=\"Avatar bg-lightest\" style=\"height: 40px;\">\n                                <span class=\"Avatar-icon rioglyph rioglyph-truck \">\n                                </span>\n                            </div>\n                            <div>\n                                <div class=\"text-medium\" data-test-ignore=\"text\">Vehicle 10</div>\n                                <div class=\"word-break\" data-test-ignore=\"text\">Enim consectetur in molestie Integer Interdum</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of items to be rendered in the list."
+                    },
+                    {
+                      "name": "renderItem",
+                      "type": "(item: T, index: number) => React.ReactElement",
+                      "default": "",
+                      "description": "A function that renders an item given its data and index."
+                    },
+                    {
+                      "name": "overscanCount",
+                      "type": "number",
+                      "default": "3",
+                      "description": "The number of items to render outside the visible area for smoother scrolling."
+                    },
+                    {
+                      "name": "defaultHeight",
+                      "type": "number",
+                      "default": "50",
+                      "description": "The default height for items if their height cannot be determined."
+                    },
+                    {
+                      "name": "scrollContainerRef",
+                      "type": "React.RefObject<HTMLElement>",
+                      "default": "",
+                      "description": "Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container."
+                    },
+                    {
+                      "name": "containerClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for the container of the list items."
+                    },
+                    {
+                      "name": "listItemWrapperClassName",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classNames for the outer list container."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}