@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,323 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:39.291Z",
+    "source": "https://uikit.developers.rio.cloud/#components/groupedItemList",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/groupeditemlist",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "19e74beb2f592b68f8d8a1135e8459afc72819150f72229102c4101c63656c9c"
+  },
+  "title": "GroupedItemList",
+  "lead": null,
+  "content": [
+    {
+      "heading": "GroupedItemList",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Grouped by name (default)",
+          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><h4>Grouped by name (default)</h4><div class=\"grouped-item-list \"><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">A</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Aaron</div><div>bar2</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Alice</div><div>bar1</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Amelia</div><div>bar3</div></div></li></ul><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">B</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Barbara</div><div>bar5</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Bob</div><div>bar4</div></div></li></ul><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">C</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Carl</div><div>bar7</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Catherine</div><div>bar8</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 list-group-item-warning\"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Charlie</div><div>bar6</div></div></li></ul><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">D</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Daniel</div><div>bar10</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">David</div><div>bar9</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Diana</div><div>bar11</div></div></li></ul><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">E</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Edward</div><div>bar12</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Eleanor</div><div>bar14</div></div></li><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Eve</div><div>bar13</div></div></li></ul><div class=\"group-divider \"><div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">F</div></div><ul class=\"list-group border rounded shadow-default\"><li class=\"list-group-item display-flex gap-15 padding-y-15 \"><div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\"><span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\"></span></div><div><div class=\"text-bold\">Fred</div><div>bar15</div></div></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';\n\ntype CustomItem = {\n    id: string;\n    name: string;\n    foo: string;\n    creationDate: string;\n};\n\nconst items: CustomItem[] = [\n    { id: '1', name: 'Alice', foo: 'bar1', creationDate: '2024-09-01' },\n    { id: '2', name: 'Aaron', foo: 'bar2', creationDate: '2024-09-01' },\n    { id: '3', name: 'Amelia', foo: 'bar3', creationDate: '2024-09-01' },\n    { id: '4', name: 'Bob', foo: 'bar4', creationDate: '2024-09-02' },\n    { id: '5', name: 'Barbara', foo: 'bar5', creationDate: '2024-09-02' },\n    { id: '6', name: 'Charlie', foo: 'bar6', creationDate: '2024-09-03' },\n    { id: '7', name: 'Carl', foo: 'bar7', creationDate: '2024-09-03' },\n    { id: '8', name: 'Catherine', foo: 'bar8', creationDate: '2024-09-03' },\n    { id: '9', name: 'David', foo: 'bar9', creationDate: '2024-09-04' },\n    { id: '10', name: 'Daniel', foo: 'bar10', creationDate: '2024-09-04' },\n    { id: '11', name: 'Diana', foo: 'bar11', creationDate: '2024-09-05' },\n    { id: '12', name: 'Edward', foo: 'bar12', creationDate: '2024-09-05' },\n    { id: '13', name: 'Eve', foo: 'bar13', creationDate: '2024-09-06' },\n    { id: '14', name: 'Eleanor', foo: 'bar14', creationDate: '2024-09-06' },\n    { id: '15', name: 'Fred', foo: 'bar15', creationDate: '2024-09-07' },\n];\n\nexport default () => {\n    // Custom render function for group dividers\n    const renderCustomDivider = (groupKey: string) => (\n        <div className='text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16'>{groupKey}</div>\n    );\n\n    // Custom render function for list items (rendered as <li> when using <ul>)\n    const renderCustomItem = (item: CustomItem) => (\n        <li\n            key={item.id}\n            className={`list-group-item display-flex gap-15 padding-y-15 ${item.id === '6' ? 'list-group-item-warning' : ''}`}\n        >\n            <div className='rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40'>\n                <span className='rioglyph rioglyph-user text-size-20 text-color-darker' />\n            </div>\n            <div>\n                <div className='text-bold'>{item.name}</div>\n                <div>{item.foo}</div>\n            </div>\n        </li>\n    );\n\n    return (\n        <div>\n            <h4>Grouped by name (default)</h4>\n            <GroupedItemList\n                items={items}\n                renderDivider={renderCustomDivider}\n                renderItem={renderCustomItem}\n                listElement='ul' // Render the list as unordered list\n                listElementClassName='list-group border rounded shadow-default'\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <h4>Grouped by name (default)</h4>\n    <div class=\"grouped-item-list \">\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">A</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Aaron</div>\n                    <div>bar2</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Alice</div>\n                    <div>bar1</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Amelia</div>\n                    <div>bar3</div>\n                </div>\n            </li>\n        </ul>\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">B</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Barbara</div>\n                    <div>bar5</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Bob</div>\n                    <div>bar4</div>\n                </div>\n            </li>\n        </ul>\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">C</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Carl</div>\n                    <div>bar7</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Catherine</div>\n                    <div>bar8</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 list-group-item-warning\">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Charlie</div>\n                    <div>bar6</div>\n                </div>\n            </li>\n        </ul>\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">D</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Daniel</div>\n                    <div>bar10</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">David</div>\n                    <div>bar9</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Diana</div>\n                    <div>bar11</div>\n                </div>\n            </li>\n        </ul>\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">E</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Edward</div>\n                    <div>bar12</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Eleanor</div>\n                    <div>bar14</div>\n                </div>\n            </li>\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Eve</div>\n                    <div>bar13</div>\n                </div>\n            </li>\n        </ul>\n        <div class=\"group-divider \">\n            <div class=\"text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16\">F</div>\n        </div>\n        <ul class=\"list-group border rounded shadow-default\">\n            <li class=\"list-group-item display-flex gap-15 padding-y-15 \">\n                <div class=\"rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40\">\n                    <span class=\"rioglyph rioglyph-user text-size-20 text-color-darker\">\n                    </span>\n                </div>\n                <div>\n                    <div class=\"text-bold\">Fred</div>\n                    <div>bar15</div>\n                </div>\n            </li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "Array",
+                      "default": "",
+                      "description": "The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes."
+                    },
+                    {
+                      "name": "groupBy",
+                      "type": "String / Function",
+                      "default": "",
+                      "description": "The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\"."
+                    },
+                    {
+                      "name": "groupSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "itemSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "groupSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for the groups. It takes an array of groups and returns them in the desired order."
+                    },
+                    {
+                      "name": "itemSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for items within each group. It takes an array of items and returns them in the desired order."
+                    },
+                    {
+                      "name": "renderDivider",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider."
+                    },
+                    {
+                      "name": "renderItem",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item."
+                    },
+                    {
+                      "name": "listElement",
+                      "type": "\"div\" | \"ul\"",
+                      "default": "div",
+                      "description": "Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as `<li>` elements."
+                    },
+                    {
+                      "name": "listElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items)."
+                    },
+                    {
+                      "name": "dividerElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the divider element in each group (applies to the `div` wrapping each group divider)."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component)."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Grouped by date",
+          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><h4>Grouped by date</h4><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Switch group sort order</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Switch item sort order</button></div><div class=\"grouped-item-list \"><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-07</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Parcel O</div><div class=\"text-light\">(Pending)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-06</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Truck N</div><div class=\"text-light\">(Delivered)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Truck M</div><div class=\"text-light\">(In Transit)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-05</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Freight L</div><div class=\"text-light\">(Pending)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Freight K</div><div class=\"text-light\">(Delivered)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-04</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Pallet J</div><div class=\"text-light\">(In Transit)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Pallet I</div><div class=\"text-light\">(Pending)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-03</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Container H</div><div class=\"text-light\">(Delivered)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Container G</div><div class=\"text-light\">(In Transit)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Container F</div><div class=\"text-light\">(Pending)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-02</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Package E</div><div class=\"text-light\">(Delivered)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Package D</div><div class=\"text-light\">(In Transit)</div></div></div><div class=\"group-divider \"><div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-01</div></div><div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Shipment C</div><div class=\"text-light\">(Pending)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Shipment B</div><div class=\"text-light\">(Delivered)</div></div><div class=\"padding-10 border border-bottom-only display-flex gap-5\"><div>Shipment A</div><div class=\"text-light\">(In Transit)</div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport GroupedItemList, { type Group } from '@rio-cloud/rio-uikit/GroupedItemList';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport { naturalSortByProperty, sortByProperty } from '@rio-cloud/rio-uikit/SortUtils';\n\ntype LogisticItem = {\n    id: string;\n    name: string;\n    status: string;\n    deliveryDate: string;\n};\n\nconst logisticItems: LogisticItem[] = [\n    { id: '1', name: 'Shipment A', status: 'In Transit', deliveryDate: '2024-09-01' },\n    { id: '2', name: 'Shipment B', status: 'Delivered', deliveryDate: '2024-09-01' },\n    { id: '3', name: 'Shipment C', status: 'Pending', deliveryDate: '2024-09-01' },\n    { id: '4', name: 'Package D', status: 'In Transit', deliveryDate: '2024-09-02' },\n    { id: '5', name: 'Package E', status: 'Delivered', deliveryDate: '2024-09-02' },\n    { id: '6', name: 'Container F', status: 'Pending', deliveryDate: '2024-09-03' },\n    { id: '7', name: 'Container G', status: 'In Transit', deliveryDate: '2024-09-03' },\n    { id: '8', name: 'Container H', status: 'Delivered', deliveryDate: '2024-09-03' },\n    { id: '9', name: 'Pallet I', status: 'Pending', deliveryDate: '2024-09-04' },\n    { id: '10', name: 'Pallet J', status: 'In Transit', deliveryDate: '2024-09-04' },\n    { id: '11', name: 'Freight K', status: 'Delivered', deliveryDate: '2024-09-05' },\n    { id: '12', name: 'Freight L', status: 'Pending', deliveryDate: '2024-09-05' },\n    { id: '13', name: 'Truck M', status: 'In Transit', deliveryDate: '2024-09-06' },\n    { id: '14', name: 'Truck N', status: 'Delivered', deliveryDate: '2024-09-06' },\n    { id: '15', name: 'Parcel O', status: 'Pending', deliveryDate: '2024-09-07' },\n];\n\nexport default () => {\n    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');\n    const [itemSortOrder, setItemSortOrder] = useState<'asc' | 'desc'>('desc');\n\n    const handleChangeSortOrder = () => {\n        setSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));\n    };\n\n    const handleChangeItemSortOrder = () => {\n        setItemSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));\n    };\n\n    // Custom render function for group dividers\n    const renderCustomDivider = (groupKey: string) => (\n        <div className='text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16'>{groupKey}</div>\n    );\n\n    // Custom render function for list items (rendered as <li> when using <ul>)\n    const renderSimpleCustomItem = (item: LogisticItem) => (\n        <div key={item.id} className='padding-10 border border-bottom-only display-flex gap-5'>\n            <div>{item.name}</div>\n            <div className='text-light'>({item.status})</div>\n        </div>\n    );\n\n    // Sorting function for groups by deliveryDate\n    const groupSortFunction = (groups: Group[]) => {\n        return naturalSortByProperty(groups, 'groupKey', sortOrder);\n    };\n\n    // Sorting function for items within each group\n    const itemSortFunction = (items: LogisticItem[]) => {\n        return sortByProperty(items, 'name', itemSortOrder);\n    };\n\n    return (\n        <div>\n            <h4>Grouped by date</h4>\n            <div className='btn-toolbar'>\n                <Button onClick={handleChangeSortOrder}>Switch group sort order</Button>\n                <Button onClick={handleChangeItemSortOrder}>Switch item sort order</Button>\n            </div>\n            <GroupedItemList\n                items={logisticItems}\n                groupBy={(item: LogisticItem) => item.deliveryDate}\n                groupSortOrder={sortOrder}\n                groupSortFunction={groupSortFunction}\n                itemSortFunction={itemSortFunction}\n                renderDivider={renderCustomDivider}\n                renderItem={renderSimpleCustomItem}\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <h4>Grouped by date</h4>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Switch group sort order</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Switch item sort order</button>\n    </div>\n    <div class=\"grouped-item-list \">\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-07</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Parcel O</div>\n                <div class=\"text-light\">(Pending)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-06</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Truck N</div>\n                <div class=\"text-light\">(Delivered)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Truck M</div>\n                <div class=\"text-light\">(In Transit)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-05</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Freight L</div>\n                <div class=\"text-light\">(Pending)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Freight K</div>\n                <div class=\"text-light\">(Delivered)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-04</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Pallet J</div>\n                <div class=\"text-light\">(In Transit)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Pallet I</div>\n                <div class=\"text-light\">(Pending)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-03</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Container H</div>\n                <div class=\"text-light\">(Delivered)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Container G</div>\n                <div class=\"text-light\">(In Transit)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Container F</div>\n                <div class=\"text-light\">(Pending)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-02</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Package E</div>\n                <div class=\"text-light\">(Delivered)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Package D</div>\n                <div class=\"text-light\">(In Transit)</div>\n            </div>\n        </div>\n        <div class=\"group-divider \">\n            <div class=\"text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16\">2024-09-01</div>\n        </div>\n        <div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Shipment C</div>\n                <div class=\"text-light\">(Pending)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Shipment B</div>\n                <div class=\"text-light\">(Delivered)</div>\n            </div>\n            <div class=\"padding-10 border border-bottom-only display-flex gap-5\">\n                <div>Shipment A</div>\n                <div class=\"text-light\">(In Transit)</div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "Array",
+                      "default": "",
+                      "description": "The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes."
+                    },
+                    {
+                      "name": "groupBy",
+                      "type": "String / Function",
+                      "default": "",
+                      "description": "The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\"."
+                    },
+                    {
+                      "name": "groupSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "itemSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "groupSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for the groups. It takes an array of groups and returns them in the desired order."
+                    },
+                    {
+                      "name": "itemSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for items within each group. It takes an array of items and returns them in the desired order."
+                    },
+                    {
+                      "name": "renderDivider",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider."
+                    },
+                    {
+                      "name": "renderItem",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item."
+                    },
+                    {
+                      "name": "listElement",
+                      "type": "\"div\" | \"ul\"",
+                      "default": "div",
+                      "description": "Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as `<li>` elements."
+                    },
+                    {
+                      "name": "listElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items)."
+                    },
+                    {
+                      "name": "dividerElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the divider element in each group (applies to the `div` wrapping each group divider)."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component)."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-lightest padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><h5>Grouped by custom key with basic styling</h5><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"grouped-item-list \"><div class=\"group-divider \">A</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Air Freight: </span><span>The transportation of goods via air</span></li><li><span class=\"text-bold\">Air Waybill (AWB): </span><span>A document for air shipments detailing the goods and their destination</span></li></ul><div class=\"group-divider \">B</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Bill of Lading (B/L): </span><span>A contract between the shipper and the carrier for ocean transport</span></li><li><span class=\"text-bold\">Bulk Cargo: </span><span>Unpackaged goods shipped in large quantities, like grains or coal</span></li></ul><div class=\"group-divider \">C</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Cargo: </span><span>Goods transported by a vehicle such as a ship, truck, or aircraft</span></li><li><span class=\"text-bold\">Carrier: </span><span>A company that transports goods via road, rail, sea, or air</span></li><li><span class=\"text-bold\">Consignee: </span><span>The person or company receiving the shipment</span></li><li><span class=\"text-bold\">Customs: </span><span>Government agency responsible for regulating shipments entering a country</span></li></ul><div class=\"group-divider \">D</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Dangerous Goods: </span><span>Items that require special handling due to safety concerns, like chemicals</span></li><li><span class=\"text-bold\">Demurrage: </span><span>A charge for delaying the return of a container beyond the allowed time</span></li></ul><div class=\"group-divider \">F</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Freight Forwarder: </span><span>A company that organizes shipments on behalf of shippers</span></li><li><span class=\"text-bold\">Full Container Load (FCL): </span><span>A shipment that fills an entire container</span></li></ul><div class=\"group-divider \">L</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Logistics: </span><span>The management of the flow of goods between the point of origin and consumption</span></li><li><span class=\"text-bold\">LTL (Less than Truckload): </span><span>A shipment that doesn’t require a full truckload</span></li></ul><div class=\"group-divider \">V</div><ul class=\"margin-bottom-20\"><li><span class=\"text-bold\">Vessel: </span><span>A large ship used to transport goods across seas and oceans</span></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Divider from '@rio-cloud/rio-uikit/Divider';\nimport GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';\n\ntype Item = {\n    id: string;\n    term: string;\n    explanation: string;\n};\n\nconst items = [\n    { id: '1', term: 'Air Freight', explanation: 'The transportation of goods via air' },\n    {\n        id: '2',\n        term: 'Air Waybill (AWB)',\n        explanation: 'A document for air shipments detailing the goods and their destination',\n    },\n    {\n        id: '3',\n        term: 'Bill of Lading (B/L)',\n        explanation: 'A contract between the shipper and the carrier for ocean transport',\n    },\n    { id: '4', term: 'Bulk Cargo', explanation: 'Unpackaged goods shipped in large quantities, like grains or coal' },\n    { id: '5', term: 'Cargo', explanation: 'Goods transported by a vehicle such as a ship, truck, or aircraft' },\n    { id: '6', term: 'Carrier', explanation: 'A company that transports goods via road, rail, sea, or air' },\n    { id: '7', term: 'Consignee', explanation: 'The person or company receiving the shipment' },\n    {\n        id: '8',\n        term: 'Customs',\n        explanation: 'Government agency responsible for regulating shipments entering a country',\n    },\n    {\n        id: '9',\n        term: 'Demurrage',\n        explanation: 'A charge for delaying the return of a container beyond the allowed time',\n    },\n    {\n        id: '10',\n        term: 'Dangerous Goods',\n        explanation: 'Items that require special handling due to safety concerns, like chemicals',\n    },\n    { id: '11', term: 'Freight Forwarder', explanation: 'A company that organizes shipments on behalf of shippers' },\n    { id: '12', term: 'Full Container Load (FCL)', explanation: 'A shipment that fills an entire container' },\n    { id: '13', term: 'LTL (Less than Truckload)', explanation: 'A shipment that doesn’t require a full truckload' },\n    {\n        id: '14',\n        term: 'Logistics',\n        explanation: 'The management of the flow of goods between the point of origin and consumption',\n    },\n    { id: '15', term: 'Vessel', explanation: 'A large ship used to transport goods across seas and oceans' },\n];\n\nexport default () => {\n    // Custom render function for list items (rendered as <li> when using <ul>)\n    const renderCustomItem = (item: Item) => (\n        <li key={item.id}>\n            <span className='text-bold'>{item.term}: </span>\n            <span>{item.explanation}</span>\n        </li>\n    );\n\n    return (\n        <div>\n            <h5>Grouped by custom key with basic styling</h5>\n            <Divider />\n            <GroupedItemList\n                items={items}\n                groupBy='term'\n                renderItem={renderCustomItem}\n                listElement='ul'\n                listElementClassName='margin-bottom-20'\n            />\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <h5>Grouped by custom key with basic styling</h5>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"grouped-item-list \">\n        <div class=\"group-divider \">A</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Air Freight: </span>\n                <span>The transportation of goods via air</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Air Waybill (AWB): </span>\n                <span>A document for air shipments detailing the goods and their destination</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">B</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Bill of Lading (B/L): </span>\n                <span>A contract between the shipper and the carrier for ocean transport</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Bulk Cargo: </span>\n                <span>Unpackaged goods shipped in large quantities, like grains or coal</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">C</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Cargo: </span>\n                <span>Goods transported by a vehicle such as a ship, truck, or aircraft</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Carrier: </span>\n                <span>A company that transports goods via road, rail, sea, or air</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Consignee: </span>\n                <span>The person or company receiving the shipment</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Customs: </span>\n                <span>Government agency responsible for regulating shipments entering a country</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">D</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Dangerous Goods: </span>\n                <span>Items that require special handling due to safety concerns, like chemicals</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Demurrage: </span>\n                <span>A charge for delaying the return of a container beyond the allowed time</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">F</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Freight Forwarder: </span>\n                <span>A company that organizes shipments on behalf of shippers</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">Full Container Load (FCL): </span>\n                <span>A shipment that fills an entire container</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">L</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Logistics: </span>\n                <span>The management of the flow of goods between the point of origin and consumption</span>\n            </li>\n            <li>\n                <span class=\"text-bold\">LTL (Less than Truckload): </span>\n                <span>A shipment that doesn’t require a full truckload</span>\n            </li>\n        </ul>\n        <div class=\"group-divider \">V</div>\n        <ul class=\"margin-bottom-20\">\n            <li>\n                <span class=\"text-bold\">Vessel: </span>\n                <span>A large ship used to transport goods across seas and oceans</span>\n            </li>\n        </ul>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "Array",
+                      "default": "",
+                      "description": "The list of items to be grouped and rendered. By default, the component assumes an item object containing an \"id\" and \"name\" property plus some other attributes."
+                    },
+                    {
+                      "name": "groupBy",
+                      "type": "String / Function",
+                      "default": "",
+                      "description": "The property of the items to group by, either as a string (e.g., \"name\") or a custom grouping function. If not provided, it defaults to grouping by \"name\"."
+                    },
+                    {
+                      "name": "groupSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for groups. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "itemSortOrder",
+                      "type": "String",
+                      "default": "asc",
+                      "description": "Defines the sort order for items within each group. Accepts \"asc\" for ascending or \"desc\" for descending order."
+                    },
+                    {
+                      "name": "groupSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for the groups. It takes an array of groups and returns them in the desired order."
+                    },
+                    {
+                      "name": "itemSortFunction",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Optional sorting function for items within each group. It takes an array of items and returns them in the desired order."
+                    },
+                    {
+                      "name": "renderDivider",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for the group divider. Receives the group key as a parameter and should return a React node to render as the divider."
+                    },
+                    {
+                      "name": "renderItem",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item."
+                    },
+                    {
+                      "name": "listElement",
+                      "type": "\"div\" | \"ul\"",
+                      "default": "div",
+                      "description": "Specifies the HTML element to use for the list inside each group. Defaults to \"div\", but \"ul\" can be used if rendering list items as `<li>` elements."
+                    },
+                    {
+                      "name": "listElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items)."
+                    },
+                    {
+                      "name": "dividerElementClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the divider element in each group (applies to the `div` wrapping each group divider)."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component)."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,45 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:01.031Z",
+    "source": "https://uikit.developers.rio.cloud/#components/iconList",
+    "category": "Components",
+    "section": "CSS Only",
+    "slug": "components/iconlist",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d4661778afbfc083a29b38841e5794cc38936b11a85d7b3f894d535d081680bb"
+  },
+  "title": "IconList",
+  "lead": "The timeline component is a pure CSS component.",
+  "content": [
+    {
+      "heading": "IconList",
+      "body": "",
+      "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-50\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Icon list</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"icon-list margin-bottom-0\"><li><span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li><li><span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li><li><span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li></ul></div><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Icon list</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"icon-list margin-bottom-0\"><li><span class=\"rioglyph rioglyph-bus margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li><li><span class=\"rioglyph rioglyph-truck margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li><li><span class=\"rioglyph rioglyph-truck margin-top--1\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid grid-cols-1 grid-cols-2-sm gap-50\">\n    <div>\n        <div class=\"lead \">\n            <div class=\"display-flex justify-content-between\">\n                <div>Icon list</div>\n            </div>\n            <hr class=\"margin-top-10 border-color-light\">\n        </div>\n        <ul class=\"icon-list margin-bottom-0\">\n            <li>\n                <span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n            <li>\n                <span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n            <li>\n                <span class=\"rioglyph rioglyph-ok-sign text-color-success margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n        </ul>\n    </div>\n    <div>\n        <div class=\"lead \">\n            <div class=\"display-flex justify-content-between\">\n                <div>Icon list</div>\n            </div>\n            <hr class=\"margin-top-10 border-color-light\">\n        </div>\n        <ul class=\"icon-list margin-bottom-0\">\n            <li>\n                <span class=\"rioglyph rioglyph-bus margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n            <li>\n                <span class=\"rioglyph rioglyph-truck margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n            <li>\n                <span class=\"rioglyph rioglyph-truck margin-top--1\">\n                </span>\n                <span>\n                    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.</span>\n            </li>\n        </ul>\n    </div>\n</div>"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "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-5-sm gap-50\"><div><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Tree list</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"tree-list margin-bottom-0 margin-left-15\"><li><span>Lorem ipsum</span></li><li><span>Lorem ipsum</span><ul><li>Lorem ipsum<ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></li><li>Lorem ipsum<ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></li></ul></li><li><span>Lorem ipsum</span><ul><li>Lorem ipsum<ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></li><li>Lorem ipsum<ul><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li></ul></li></ul></li><li><span>Lorem Ipsum</span></li></ul></div><div class=\"grid-colspan-2-sm\"><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Tree list with panels</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"tree-list\"><li><div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\"><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li><li><div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\"><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li><li><div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\"><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li></ul></div><div class=\"grid-colspan-2-sm\"><div class=\"lead \"><div class=\"display-flex justify-content-between\"><div>Tree list with icons</div></div><hr class=\"margin-top-10 border-color-light\"></div><ul class=\"tree-list\"><li><div class=\"display-flex gap-5 margin-bottom-10\"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li><li><div class=\"display-flex gap-5 margin-bottom-10\"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li><li><div class=\"display-flex gap-5 margin-bottom-10\"><span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\"></span><span>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span></div></li></ul></div></div></div>",
+          "tabs": [
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid grid-cols-1 grid-cols-5-sm gap-50\">\n    <div>\n        <div class=\"lead \">\n            <div class=\"display-flex justify-content-between\">\n                <div>Tree list</div>\n            </div>\n            <hr class=\"margin-top-10 border-color-light\">\n        </div>\n        <ul class=\"tree-list margin-bottom-0 margin-left-15\">\n            <li>\n                <span>Lorem ipsum</span>\n            </li>\n            <li>\n                <span>Lorem ipsum</span>\n                <ul>\n                    <li>Lorem ipsum<ul>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                        </ul>\n                    </li>\n                    <li>Lorem ipsum<ul>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                        </ul>\n                    </li>\n                </ul>\n            </li>\n            <li>\n                <span>Lorem ipsum</span>\n                <ul>\n                    <li>Lorem ipsum<ul>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                        </ul>\n                    </li>\n                    <li>Lorem ipsum<ul>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                            <li>Lorem ipsum</li>\n                        </ul>\n                    </li>\n                </ul>\n            </li>\n            <li>\n                <span>Lorem Ipsum</span>\n            </li>\n        </ul>\n    </div>\n    <div class=\"grid-colspan-2-sm\">\n        <div class=\"lead \">\n            <div class=\"display-flex justify-content-between\">\n                <div>Tree list with panels</div>\n            </div>\n            <hr class=\"margin-top-10 border-color-light\">\n        </div>\n        <ul class=\"tree-list\">\n            <li>\n                <div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\">\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n            <li>\n                <div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\">\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n            <li>\n                <div class=\"panel panel-default panel-body margin-bottom-15 shadow-default\">\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n    <div class=\"grid-colspan-2-sm\">\n        <div class=\"lead \">\n            <div class=\"display-flex justify-content-between\">\n                <div>Tree list with icons</div>\n            </div>\n            <hr class=\"margin-top-10 border-color-light\">\n        </div>\n        <ul class=\"tree-list\">\n            <li>\n                <div class=\"display-flex gap-5 margin-bottom-10\">\n                    <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\">\n                    </span>\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n            <li>\n                <div class=\"display-flex gap-5 margin-bottom-10\">\n                    <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\">\n                    </span>\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n            <li>\n                <div class=\"display-flex gap-5 margin-bottom-10\">\n                    <span class=\"rioglyph rioglyph-ok-sign text-color-success text-size-18 margin-top-2\">\n                    </span>\n                    <span>\n                        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.</span>\n                </div>\n            </li>\n        </ul>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,81 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:50.623Z",
+    "source": "https://uikit.developers.rio.cloud/#components/imagePreloader",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/imagepreloader",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "11fc70dcc0e56e8cc64e979a57d652532cdc5cafcaa8009e174bc45113e6e9b3"
+  },
+  "title": "ImagePreloader",
+  "lead": "Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.",
+  "content": [
+    {
+      "heading": "ImagePreloader",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"row\"><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">With Image tag</div><div class=\"position-relative \" style=\"aspect-ratio: 1000 / 560;\"><div class=\"display-grid place-items-center position-absolute inset-0\"><div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\"><div class=\"spinner\"><div></div><div></div><div></div><div></div></div></div></div></div></div><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">As background image without spinner</div></div><div class=\"col-md-4\"><div class=\"h5 ellipsis-1\">Fallback case</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ImagePreloader from '@rio-cloud/rio-uikit/ImagePreloader';\nimport AspectRatioPlaceholder from '@rio-cloud/rio-uikit/AspectRatioPlaceholder';\nimport Spinner from '@rio-cloud/rio-uikit/Spinner';\n\nexport default () => (\n    <div className='row'>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>With Image tag</div>\n            {imageExample}\n        </div>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>As background image without spinner</div>\n            {backgroundImageExample}\n        </div>\n        <div className='col-md-4'>\n            <div className='h5 ellipsis-1'>Fallback case</div>\n            {failedImageExample}\n        </div>\n    </div>\n);\n\nconst fallback = (\n    <AspectRatioPlaceholder width={1000} height={562}>\n        <div className='text-size-h3 display-grid place-items-center position-absolute inset-0'>\n            <span className='rioglyph rioglyph-missing text-size-200pct text-color-gray' />\n        </div>\n    </AspectRatioPlaceholder>\n);\n\nconst imageExample = (\n    <ImagePreloader src='https://picsum.photos/1000/560'>\n        {({ status, image }) => {\n            switch (status) {\n                case 'FAILED':\n                    return fallback;\n\n                case 'LOADED':\n                    // When image has been loaded, render the image tag\n                    return <img src={image.src} className='img-responsive ani-fade-in' alt='Awesome stuff.' />;\n\n                default:\n                    return (\n                        <AspectRatioPlaceholder width={1000} height={560}>\n                            <div className='display-grid place-items-center position-absolute inset-0'>\n                                <Spinner isInverse={false} />\n                            </div>\n                        </AspectRatioPlaceholder>\n                    );\n            }\n        }}\n    </ImagePreloader>\n);\n\nconst backgroundImageExample = (\n    <ImagePreloader src='https://picsum.photos/1000/560'>\n        {({ status, image }) => {\n            switch (status) {\n                case 'FAILED':\n                    return fallback;\n\n                case 'LOADED':\n                    // When image has been loaded, set it as background\n                    return (\n                        <div\n                            className='bg-size-cover bg-position-center ani-fade-in'\n                            style={{ backgroundImage: `url(${image.src})` }}\n                        >\n                            <AspectRatioPlaceholder width={1000} height={560} />\n                        </div>\n                    );\n\n                default:\n                    return null;\n            }\n        }}\n    </ImagePreloader>\n);\n\nconst failedImageExample = (\n    <ImagePreloader src='https://not-there'>\n        {({ status }) => {\n            if (status === 'FAILED') {\n                return fallback;\n            }\n            return null;\n        }}\n    </ImagePreloader>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"row\">\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">With Image tag</div>\n        <div class=\"position-relative \" style=\"aspect-ratio: 1000 / 560;\">\n            <div class=\"display-grid place-items-center position-absolute inset-0\">\n                <div class=\"spinnerInfoBox display-flex justify-content-center align-items-center height-100pct\">\n                    <div class=\"spinner\">\n                        <div>\n                        </div>\n                        <div>\n                        </div>\n                        <div>\n                        </div>\n                        <div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">As background image without spinner</div>\n    </div>\n    <div class=\"col-md-4\">\n        <div class=\"h5 ellipsis-1\">Fallback case</div>\n        <div class=\"position-relative \" style=\"aspect-ratio: 1000 / 562;\">\n            <div class=\"text-size-h3 display-grid place-items-center position-absolute inset-0\">\n                <span class=\"rioglyph rioglyph-missing text-size-200pct text-color-gray\">\n                </span>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "src",
+                      "type": "String",
+                      "default": "",
+                      "description": "The source location for the image to load."
+                    },
+                    {
+                      "name": "onLoaded",
+                      "type": "(image: HTMLImageElement) => void",
+                      "default": "() => {}",
+                      "description": "Invoked when the image is loaded. The image object will be passed as argument."
+                    },
+                    {
+                      "name": "onFailed",
+                      "type": "(image: HTMLImageElement) => void",
+                      "default": "() => {}",
+                      "description": "Invoked when the image failed to load. The image object will be passed as argument."
+                    },
+                    {
+                      "name": "isAnonymous",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to set \"crossOrigin\" to \"Anonymous\" or not."
+                    },
+                    {
+                      "name": "children",
+                      "type": "(props: { status: ImagePreloaderStatus; image: HTMLImageElement }) => JSX.Element | null",
+                      "default": "",
+                      "description": "A render function can be used to access both the current state and the image element. Using this, you can decide how to render the different states and/or the loaded image. The function will receive props containing the status and image properties. status will be one of 'PENDING', 'FAILED' or 'LOADED'. image is the Image element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}