@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/groupedItemList.md

@@ -0,0 +1,1001 @@
+# GroupedItemList
+
+*Category:* Components
+*Section:* Content
+*Source:* https://uikit.developers.rio.cloud/#components/groupedItemList
+*Captured:* 2025-12-12T14:20:44.081Z
+
+## GroupedItemList
+
+### Example: Grouped by name (default)
+
+Grouped by name (default)
+A
+
+Aaron
+bar2
+
+Alice
+bar1
+
+Amelia
+bar3
+
+B
+
+Barbara
+bar5
+
+Bob
+bar4
+
+C
+
+Carl
+bar7
+
+Catherine
+bar8
+
+Charlie
+bar6
+
+D
+
+Daniel
+bar10
+
+David
+bar9
+
+Diana
+bar11
+
+E
+
+Edward
+bar12
+
+Eleanor
+bar14
+
+Eve
+bar13
+
+F
+
+Fred
+bar15
+
+#### Summary
+
+Grouped by name (default)
+A
+
+Aaron
+bar2
+
+Alice
+bar1
+
+Amelia
+bar3
+
+B
+
+Barbara
+bar5
+
+Bob
+bar4
+
+C
+
+Carl
+bar7
+
+Catherine
+bar8
+
+Charlie
+bar6
+
+D
+
+Daniel
+bar10
+
+David
+bar9
+
+Diana
+bar11
+
+E
+
+Edward
+bar12
+
+Eleanor
+bar14
+
+Eve
+bar13
+
+F
+
+Fred
+bar15
+
+#### React (tsx)
+
+```tsx
+import GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';
+
+type CustomItem = {
+    id: string;
+    name: string;
+    foo: string;
+    creationDate: string;
+};
+
+const items: CustomItem[] = [
+    { id: '1', name: 'Alice', foo: 'bar1', creationDate: '2024-09-01' },
+    { id: '2', name: 'Aaron', foo: 'bar2', creationDate: '2024-09-01' },
+    { id: '3', name: 'Amelia', foo: 'bar3', creationDate: '2024-09-01' },
+    { id: '4', name: 'Bob', foo: 'bar4', creationDate: '2024-09-02' },
+    { id: '5', name: 'Barbara', foo: 'bar5', creationDate: '2024-09-02' },
+    { id: '6', name: 'Charlie', foo: 'bar6', creationDate: '2024-09-03' },
+    { id: '7', name: 'Carl', foo: 'bar7', creationDate: '2024-09-03' },
+    { id: '8', name: 'Catherine', foo: 'bar8', creationDate: '2024-09-03' },
+    { id: '9', name: 'David', foo: 'bar9', creationDate: '2024-09-04' },
+    { id: '10', name: 'Daniel', foo: 'bar10', creationDate: '2024-09-04' },
+    { id: '11', name: 'Diana', foo: 'bar11', creationDate: '2024-09-05' },
+    { id: '12', name: 'Edward', foo: 'bar12', creationDate: '2024-09-05' },
+    { id: '13', name: 'Eve', foo: 'bar13', creationDate: '2024-09-06' },
+    { id: '14', name: 'Eleanor', foo: 'bar14', creationDate: '2024-09-06' },
+    { id: '15', name: 'Fred', foo: 'bar15', creationDate: '2024-09-07' },
+];
+
+export default () => {
+    // Custom render function for group dividers
+    const renderCustomDivider = (groupKey: string) => (
+        <div className='text-color-dark text-medium margin-bottom-10 margin-top-25 text-size-16'>{groupKey}</div>
+    );
+
+    // Custom render function for list items (rendered as <li> when using <ul>)
+    const renderCustomItem = (item: CustomItem) => (
+        <li
+            key={item.id}
+            className={`list-group-item display-flex gap-15 padding-y-15 ${item.id === '6' ? 'list-group-item-warning' : ''}`}
+        >
+            <div className='rounded-circle aspect-ratio-1 display-grid place-items-center border max-width-40 width-40'>
+                <span className='rioglyph rioglyph-user text-size-20 text-color-darker' />
+            </div>
+            <div>
+                <div className='text-bold'>{item.name}</div>
+                <div>{item.foo}</div>
+            </div>
+        </li>
+    );
+
+    return (
+        <div>
+            <h4>Grouped by name (default)</h4>
+            <GroupedItemList
+                items={items}
+                renderDivider={renderCustomDivider}
+                renderItem={renderCustomItem}
+                listElement='ul' // Render the list as unordered list
+                listElementClassName='list-group border rounded shadow-default'
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | Array | — | 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. |
+| groupBy | String / Function | — | 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". |
+| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
+| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
+| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
+| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
+| renderDivider | Function | — | 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. |
+| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
+| listElement | "div" \| "ul" | div | 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. |
+| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
+| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
+| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |
+
+### Example: Grouped by date
+
+Grouped by date
+Switch group sort orderSwitch item sort order
+2024-09-07
+
+Parcel O
+(Pending)
+
+2024-09-06
+
+Truck N
+(Delivered)
+
+Truck M
+(In Transit)
+
+2024-09-05
+
+Freight L
+(Pending)
+
+Freight K
+(Delivered)
+
+2024-09-04
+
+Pallet J
+(In Transit)
+
+Pallet I
+(Pending)
+
+2024-09-03
+
+Container H
+(Delivered)
+
+Container G
+(In Transit)
+
+Container F
+(Pending)
+
+2024-09-02
+
+Package E
+(Delivered)
+
+Package D
+(In Transit)
+
+2024-09-01
+
+Shipment C
+(Pending)
+
+Shipment B
+(Delivered)
+
+Shipment A
+(In Transit)
+
+#### Summary
+
+Grouped by date
+Switch group sort orderSwitch item sort order
+2024-09-07
+
+Parcel O
+(Pending)
+
+2024-09-06
+
+Truck N
+(Delivered)
+
+Truck M
+(In Transit)
+
+2024-09-05
+
+Freight L
+(Pending)
+
+Freight K
+(Delivered)
+
+2024-09-04
+
+Pallet J
+(In Transit)
+
+Pallet I
+(Pending)
+
+2024-09-03
+
+Container H
+(Delivered)
+
+Container G
+(In Transit)
+
+Container F
+(Pending)
+
+2024-09-02
+
+Package E
+(Delivered)
+
+Package D
+(In Transit)
+
+2024-09-01
+
+Shipment C
+(Pending)
+
+Shipment B
+(Delivered)
+
+Shipment A
+(In Transit)
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import GroupedItemList, { type Group } from '@rio-cloud/rio-uikit/GroupedItemList';
+import Button from '@rio-cloud/rio-uikit/Button';
+import { naturalSortByProperty, sortByProperty } from '@rio-cloud/rio-uikit/SortUtils';
+
+type LogisticItem = {
+    id: string;
+    name: string;
+    status: string;
+    deliveryDate: string;
+};
+
+const logisticItems: LogisticItem[] = [
+    { id: '1', name: 'Shipment A', status: 'In Transit', deliveryDate: '2024-09-01' },
+    { id: '2', name: 'Shipment B', status: 'Delivered', deliveryDate: '2024-09-01' },
+    { id: '3', name: 'Shipment C', status: 'Pending', deliveryDate: '2024-09-01' },
+    { id: '4', name: 'Package D', status: 'In Transit', deliveryDate: '2024-09-02' },
+    { id: '5', name: 'Package E', status: 'Delivered', deliveryDate: '2024-09-02' },
+    { id: '6', name: 'Container F', status: 'Pending', deliveryDate: '2024-09-03' },
+    { id: '7', name: 'Container G', status: 'In Transit', deliveryDate: '2024-09-03' },
+    { id: '8', name: 'Container H', status: 'Delivered', deliveryDate: '2024-09-03' },
+    { id: '9', name: 'Pallet I', status: 'Pending', deliveryDate: '2024-09-04' },
+    { id: '10', name: 'Pallet J', status: 'In Transit', deliveryDate: '2024-09-04' },
+    { id: '11', name: 'Freight K', status: 'Delivered', deliveryDate: '2024-09-05' },
+    { id: '12', name: 'Freight L', status: 'Pending', deliveryDate: '2024-09-05' },
+    { id: '13', name: 'Truck M', status: 'In Transit', deliveryDate: '2024-09-06' },
+    { id: '14', name: 'Truck N', status: 'Delivered', deliveryDate: '2024-09-06' },
+    { id: '15', name: 'Parcel O', status: 'Pending', deliveryDate: '2024-09-07' },
+];
+
+export default () => {
+    const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+    const [itemSortOrder, setItemSortOrder] = useState<'asc' | 'desc'>('desc');
+
+    const handleChangeSortOrder = () => {
+        setSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
+    };
+
+    const handleChangeItemSortOrder = () => {
+        setItemSortOrder(prevOrder => (prevOrder === 'asc' ? 'desc' : 'asc'));
+    };
+
+    // Custom render function for group dividers
+    const renderCustomDivider = (groupKey: string) => (
+        <div className='text-color-darker text-medium margin-bottom-5 margin-top-50 text-size-16'>{groupKey}</div>
+    );
+
+    // Custom render function for list items (rendered as <li> when using <ul>)
+    const renderSimpleCustomItem = (item: LogisticItem) => (
+        <div key={item.id} className='padding-10 border border-bottom-only display-flex gap-5'>
+            <div>{item.name}</div>
+            <div className='text-light'>({item.status})</div>
+        </div>
+    );
+
+    // Sorting function for groups by deliveryDate
+    const groupSortFunction = (groups: Group[]) => {
+        return naturalSortByProperty(groups, 'groupKey', sortOrder);
+    };
+
+    // Sorting function for items within each group
+    const itemSortFunction = (items: LogisticItem[]) => {
+        return sortByProperty(items, 'name', itemSortOrder);
+    };
+
+    return (
+        <div>
+            <h4>Grouped by date</h4>
+            <div className='btn-toolbar'>
+                <Button onClick={handleChangeSortOrder}>Switch group sort order</Button>
+                <Button onClick={handleChangeItemSortOrder}>Switch item sort order</Button>
+            </div>
+            <GroupedItemList
+                items={logisticItems}
+                groupBy={(item: LogisticItem) => item.deliveryDate}
+                groupSortOrder={sortOrder}
+                groupSortFunction={groupSortFunction}
+                itemSortFunction={itemSortFunction}
+                renderDivider={renderCustomDivider}
+                renderItem={renderSimpleCustomItem}
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | Array | — | 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. |
+| groupBy | String / Function | — | 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". |
+| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
+| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
+| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
+| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
+| renderDivider | Function | — | 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. |
+| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
+| listElement | "div" \| "ul" | div | 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. |
+| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
+| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
+| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |
+
+### Example: Example 3
+
+Grouped by custom key with basic styling
+
+A
+Air Freight: The transportation of goods via air
+Air Waybill (AWB): A document for air shipments detailing the goods and their destination
+
+B
+Bill of Lading (B/L): A contract between the shipper and the carrier for ocean transport
+Bulk Cargo: Unpackaged goods shipped in large quantities, like grains or coal
+
+C
+Cargo: Goods transported by a vehicle such as a ship, truck, or aircraft
+Carrier: A company that transports goods via road, rail, sea, or air
+Consignee: The person or company receiving the shipment
+Customs: Government agency responsible for regulating shipments entering a country
+
+D
+Dangerous Goods: Items that require special handling due to safety concerns, like chemicals
+Demurrage: A charge for delaying the return of a container beyond the allowed time
+
+F
+Freight Forwarder: A company that organizes shipments on behalf of shippers
+Full Container Load (FCL): A shipment that fills an entire container
+
+L
+Logistics: The management of the flow of goods between the point of origin and consumption
+LTL (Less than Truckload): A shipment that doesn’t require a full truckload
+
+V
+Vessel: A large ship used to transport goods across seas and oceans
+
+#### Summary
+
+Grouped by custom key with basic styling
+
+A
+Air Freight: The transportation of goods via air
+Air Waybill (AWB): A document for air shipments detailing the goods and their destination
+
+B
+Bill of Lading (B/L): A contract between the shipper and the carrier for ocean transport
+Bulk Cargo: Unpackaged goods shipped in large quantities, like grains or coal
+
+C
+Cargo: Goods transported by a vehicle such as a ship, truck, or aircraft
+Carrier: A company that transports goods via road, rail, sea, or air
+Consignee: The person or company receiving the shipment
+Customs: Government agency responsible for regulating shipments entering a country
+
+D
+Dangerous Goods: Items that require special handling due to safety concerns, like chemicals
+Demurrage: A charge for delaying the return of a container beyond the allowed time
+
+F
+Freight Forwarder: A company that organizes shipments on behalf of shippers
+Full Container Load (FCL): A shipment that fills an entire container
+
+L
+Logistics: The management of the flow of goods between the point of origin and consumption
+LTL (Less than Truckload): A shipment that doesn’t require a full truckload
+
+V
+Vessel: A large ship used to transport goods across seas and oceans
+
+#### React (tsx)
+
+```tsx
+import Divider from '@rio-cloud/rio-uikit/Divider';
+import GroupedItemList from '@rio-cloud/rio-uikit/GroupedItemList';
+
+type Item = {
+    id: string;
+    term: string;
+    explanation: string;
+};
+
+const items = [
+    { id: '1', term: 'Air Freight', explanation: 'The transportation of goods via air' },
+    {
+        id: '2',
+        term: 'Air Waybill (AWB)',
+        explanation: 'A document for air shipments detailing the goods and their destination',
+    },
+    {
+        id: '3',
+        term: 'Bill of Lading (B/L)',
+        explanation: 'A contract between the shipper and the carrier for ocean transport',
+    },
+    { id: '4', term: 'Bulk Cargo', explanation: 'Unpackaged goods shipped in large quantities, like grains or coal' },
+    { id: '5', term: 'Cargo', explanation: 'Goods transported by a vehicle such as a ship, truck, or aircraft' },
+    { id: '6', term: 'Carrier', explanation: 'A company that transports goods via road, rail, sea, or air' },
+    { id: '7', term: 'Consignee', explanation: 'The person or company receiving the shipment' },
+    {
+        id: '8',
+        term: 'Customs',
+        explanation: 'Government agency responsible for regulating shipments entering a country',
+    },
+    {
+        id: '9',
+        term: 'Demurrage',
+        explanation: 'A charge for delaying the return of a container beyond the allowed time',
+    },
+    {
+        id: '10',
+        term: 'Dangerous Goods',
+        explanation: 'Items that require special handling due to safety concerns, like chemicals',
+    },
+    { id: '11', term: 'Freight Forwarder', explanation: 'A company that organizes shipments on behalf of shippers' },
+    { id: '12', term: 'Full Container Load (FCL)', explanation: 'A shipment that fills an entire container' },
+    { id: '13', term: 'LTL (Less than Truckload)', explanation: 'A shipment that doesn’t require a full truckload' },
+    {
+        id: '14',
+        term: 'Logistics',
+        explanation: 'The management of the flow of goods between the point of origin and consumption',
+    },
+    { id: '15', term: 'Vessel', explanation: 'A large ship used to transport goods across seas and oceans' },
+];
+
+export default () => {
+    // Custom render function for list items (rendered as <li> when using <ul>)
+    const renderCustomItem = (item: Item) => (
+        <li key={item.id}>
+            <span className='text-bold'>{item.term}: </span>
+            <span>{item.explanation}</span>
+        </li>
+    );
+
+    return (
+        <div>
+            <h5>Grouped by custom key with basic styling</h5>
+            <Divider />
+            <GroupedItemList
+                items={items}
+                groupBy='term'
+                renderItem={renderCustomItem}
+                listElement='ul'
+                listElementClassName='margin-bottom-20'
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<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>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| items | Array | — | 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. |
+| groupBy | String / Function | — | 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". |
+| groupSortOrder | String | asc | Defines the sort order for groups. Accepts "asc" for ascending or "desc" for descending order. |
+| itemSortOrder | String | asc | Defines the sort order for items within each group. Accepts "asc" for ascending or "desc" for descending order. |
+| groupSortFunction | Function | — | Optional sorting function for the groups. It takes an array of groups and returns them in the desired order. |
+| itemSortFunction | Function | — | Optional sorting function for items within each group. It takes an array of items and returns them in the desired order. |
+| renderDivider | Function | — | 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. |
+| renderItem | Function | — | Custom render function for individual list items. Receives an item as a parameter and should return a React node representing the item. |
+| listElement | "div" \| "ul" | div | 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. |
+| listElementClassName | String | — | Optional class name for the list element inside each group (applies to the `div` or `ul` wrapping the items). |
+| dividerElementClassName | String | — | Optional class name for the divider element in each group (applies to the `div` wrapping each group divider). |
+| className | String | — | Optional class name for the outer wrapper element (applies to the outer `div` wrapping the entire component). |