@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

package/dist/docs/components/listMenu.md

@@ -0,0 +1,392 @@
+# ListMenu
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/listMenu
+*Captured:* 2025-12-12T14:20:56.314Z
+
+A simple list menu that supports grouping and filter.
+
+## ListMenu
+
+### Example: Example 1
+
+ListMenu (default)
+Group
+Lorem
+Disabled Ipsum
+Dolor
+Sit amet
+No Link Sample
+
+ListMenu with optional name filter
+
+Group5 items
+Lorem
+Disabled Ipsum
+Dolor
+Sit amet
+No Link Sample
+
+#### Summary
+
+ListMenu (default)
+Group
+Lorem
+Disabled Ipsum
+Dolor
+Sit amet
+No Link Sample
+
+ListMenu with optional name filter
+
+Group5 items
+Lorem
+Disabled Ipsum
+Dolor
+Sit amet
+No Link Sample
+
+#### React (tsx)
+
+```tsx
+import { useState, type MouseEvent, type MouseEventHandler } from 'react';
+
+import ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';
+
+const menuItems = (activeItem: string, setActiveItem: MouseEventHandler<HTMLSpanElement>): ListMenuItem[] => [
+    {
+        group: 'Group',
+        navItems: [
+            {
+                key: 'Lorem',
+                item: (
+                    <span className={activeItem === '0' ? 'active' : ''} data-key='0' onClick={setActiveItem}>
+                        Lorem
+                    </span>
+                ),
+            },
+            {
+                key: 'Lipsum',
+                disabled: true,
+                item: (
+                    <span className={activeItem === '1' ? 'active' : ''} data-key='1' onClick={setActiveItem}>
+                        Disabled Ipsum
+                    </span>
+                ),
+            },
+            {
+                key: 'Dolor',
+                item: (
+                    <span className={activeItem === '2' ? 'active' : ''} data-key='2' onClick={setActiveItem}>
+                        Dolor
+                    </span>
+                ),
+            },
+            {
+                key: 'Sit amet',
+                item: (
+                    <span className={activeItem === '3' ? 'active' : ''} data-key='3' onClick={setActiveItem}>
+                        Sit amet
+                    </span>
+                ),
+            },
+            {
+                key: 'No link',
+                item: <span>No Link Sample</span>,
+            },
+        ],
+    },
+];
+
+export default () => {
+    const [activeItem, setActiveItem] = useState('0');
+
+    const onItemClick = (event: MouseEvent) => {
+        const key = (event.target as HTMLSpanElement).getAttribute('data-key') as string;
+        setActiveItem(key);
+    };
+
+    return (
+        <div>
+            <div className='h5 margin-bottom-20'>ListMenu (default)</div>
+            <ListMenu menuItems={menuItems(activeItem, onItemClick)} />
+            <hr />
+            <div className='h5 margin-bottom-20'>ListMenu with optional name filter</div>
+            <ListMenu
+                menuItems={menuItems(activeItem, onItemClick).map(item => ({
+                    ...item,
+                    badge: '5 items',
+                    badgeType: 'muted',
+                }))}
+                enableFilter
+                focusFilter
+                filterPlaceholder='Filter by name'
+                notFoundMessage='Nothing found'
+            />
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="h5 margin-bottom-20">ListMenu (default)</div>
+    <div class="ListMenu  ">
+        <ul class="ListMenuGroup ">
+            <li class="ListMenuHeader">
+                <span class="">Group</span>
+            </li>
+            <li class="">
+                <span class="active" data-key="0">Lorem</span>
+            </li>
+            <li class="disabled">
+                <span class="" data-key="1">Disabled Ipsum</span>
+            </li>
+            <li class="">
+                <span class="" data-key="2">Dolor</span>
+            </li>
+            <li class="">
+                <span class="" data-key="3">Sit amet</span>
+            </li>
+            <li class="">
+                <span>No Link Sample</span>
+            </li>
+        </ul>
+    </div>
+    <hr>
+    <div class="h5 margin-bottom-20">ListMenu with optional name filter</div>
+    <div class="ListMenu  ">
+        <div class="form-group margin-bottom-5 padding-left-15 padding-right-15 padding-bottom-15 position-sticky top-0 z-index-1">
+            <div class="input-group width-100pct">
+                <span class="input-group-addon">
+                    <span class="rioglyph rioglyph-search" aria-hidden="true">
+                    </span>
+                </span>
+                <div class="ClearableInput input-group">
+                    <input placeholder="Filter by name" class="form-control" type="text" tabindex="0" value="">
+                    <span class="clearButton hide">
+                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                        </span>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <ul class="ListMenuGroup ">
+            <li class="ListMenuHeader">
+                <span class="">Group</span>
+                <span class="badge badge-muted">5 items</span>
+            </li>
+            <li class="">
+                <span class="active" data-key="0">Lorem</span>
+            </li>
+            <li class="disabled">
+                <span class="" data-key="1">Disabled Ipsum</span>
+            </li>
+            <li class="">
+                <span class="" data-key="2">Dolor</span>
+            </li>
+            <li class="">
+                <span class="" data-key="3">Sit amet</span>
+            </li>
+            <li class="">
+                <span>No Link Sample</span>
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| menuItems | Array of Objects | — | List of menu item groups to be shown. |
+| └group | String \| Node | — | The optional group header to be shown. This can also be a component such as aFormattedMessage. |
+| └badge | String \| Node | — | The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility. |
+| └badgeType | "muted" \| "success" \| "info" \| "warning" \| "danger" | — | Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger. |
+| └groupNavItem | String \| Node | — | The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted. |
+| └navItems | Array of Objects | — | The list of all menu items of a group. |
+| └navItems.key | String | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |
+| └navItems.item | Node | — | The menu nav item itself. This can be a simple<a>, <NavLink>, <Link> or a <span> or even a <FormattedMessage> |
+| └navItems.disabled | Boolean | false | Disables the list item. |
+| enableFilter | Boolean | false | Enables the filter. |
+| focusFilter | Boolean | false | Focus the filter input. |
+| filterKey | String | key | Define the attribute key for filter for. |
+| filterPlaceholder | String | — | The placeholder text for the input. |
+| notFoundMessage | String / Node | — | A localized message to be shown when filter result is empty. |
+| responsive | Boolean | true | The menu uses collapses on smaller screens using an expander panel. |
+| autoClose | Boolean | true | Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using "event.stopPropagation()" will not work for the panel to close. |
+| trailingInputAddon | ReactNode | — | Additional addon for the input group. |
+| groupClassName | String | — | Additional classes to be set on the menu group element. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+
+## ListMenu with NavLinks
+
+In case you want to navigate routes you can also use NavLink components.
+
+In this example, all NavLinks are pointing to this ListMenu page.
+
+### Example: Example 2
+
+ListMenu with NavLinks
+Group
+Lorem
+Lipsum
+Dolor
+Sit amet
+No Link Sample
+
+Another group
+Lorem
+
+#### Summary
+
+ListMenu with NavLinks
+Group
+Lorem
+Lipsum
+Dolor
+Sit amet
+No Link Sample
+
+Another group
+Lorem
+
+#### React (tsx)
+
+```tsx
+import { NavLink } from 'react-router-dom';
+
+import ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';
+
+const menuItems: ListMenuItem[] = [
+    {
+        group: 'Group',
+        navItems: [
+            {
+                key: 'Lorem',
+                item: (
+                    <NavLink activeClassName='active' to='/components/listMenu'>
+                        Lorem
+                    </NavLink>
+                ),
+            },
+            {
+                key: 'Lipsum',
+                item: (
+                    <NavLink activeClassName='active' to='/foo'>
+                        Lipsum
+                    </NavLink>
+                ),
+            },
+            {
+                key: 'Dolor',
+                item: (
+                    <NavLink activeClassName='active' to='/foo'>
+                        Dolor
+                    </NavLink>
+                ),
+            },
+            {
+                key: 'Sit amet',
+                item: (
+                    <NavLink activeClassName='active' to='/foo'>
+                        Sit amet
+                    </NavLink>
+                ),
+            },
+            {
+                key: 'No link',
+                item: <span>No Link Sample</span>,
+                isSubItem: true,
+            },
+        ],
+    },
+    {
+        group: 'Another group',
+        isSubItem: true,
+        navItems: [
+            {
+                key: 'Lorem',
+                item: (
+                    <NavLink activeClassName='active' to='/bar'>
+                        Lorem
+                    </NavLink>
+                ),
+            },
+        ],
+    },
+];
+
+export default () => (
+    <div>
+        <h5 className='margin-bottom-20'>ListMenu with NavLinks</h5>
+        <ListMenu menuItems={menuItems} />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <h5 class="margin-bottom-20">ListMenu with NavLinks</h5>
+    <div class="ListMenu  ">
+        <ul class="ListMenuGroup ">
+            <li class="ListMenuHeader">
+                <span class="">Group</span>
+            </li>
+            <li class="">
+                <a aria-current="page" class="active" href="#components/listMenu">Lorem</a>
+            </li>
+            <li class="">
+                <a href="#foo">Lipsum</a>
+            </li>
+            <li class="">
+                <a href="#foo">Dolor</a>
+            </li>
+            <li class="">
+                <a href="#foo">Sit amet</a>
+            </li>
+            <li class="subitem">
+                <span>No Link Sample</span>
+            </li>
+        </ul>
+        <ul class="ListMenuGroup ">
+            <li class="ListMenuHeader">
+                <span class="">Another group</span>
+            </li>
+            <li class="">
+                <a href="#bar">Lorem</a>
+            </li>
+        </ul>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| menuItems | Array of Objects | — | List of menu item groups to be shown. |
+| └group | String \| Node | — | The optional group header to be shown. This can also be a component such as aFormattedMessage. |
+| └badge | String \| Node | — | The optional badge displayed alongside the group or nav items. This can be a string or a React node for additional flexibility. |
+| └badgeType | "muted" \| "success" \| "info" \| "warning" \| "danger" | — | Determines the visual style of the badge. Available types include:muted, success, info, warning, and danger. |
+| └groupNavItem | String \| Node | — | The optional group header link to be shown. This can be a link component such asNavLink orLink. This way, the header can be a link itself. In this case, the propgroupcan be omitted. |
+| └navItems | Array of Objects | — | The list of all menu items of a group. |
+| └navItems.key | String | — | The name or key of the menu nav item. This key will be used for filtering, hence it should match the translated menu item name. |
+| └navItems.item | Node | — | The menu nav item itself. This can be a simple<a>, <NavLink>, <Link> or a <span> or even a <FormattedMessage> |
+| └navItems.disabled | Boolean | false | Disables the list item. |
+| enableFilter | Boolean | false | Enables the filter. |
+| focusFilter | Boolean | false | Focus the filter input. |
+| filterKey | String | key | Define the attribute key for filter for. |
+| filterPlaceholder | String | — | The placeholder text for the input. |
+| notFoundMessage | String / Node | — | A localized message to be shown when filter result is empty. |
+| responsive | Boolean | true | The menu uses collapses on smaller screens using an expander panel. |
+| autoClose | Boolean | true | Enables automatic close of the expander panel. Only relevant when using the responsive flag. Note: make sure to not stop the events from bubbling up when clicking on an list item. Using "event.stopPropagation()" will not work for the panel to close. |
+| trailingInputAddon | ReactNode | — | Additional addon for the input group. |
+| groupClassName | String | — | Additional classes to be set on the menu group element. |
+| className | String | — | Additional classes to be set on the wrapper element. |

package/dist/docs/components/loadMore.md

@@ -0,0 +1,219 @@
+# LoadMoreButton
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#components/loadMore
+*Captured:* 2025-12-12T14:20:17.463Z
+
+## LoadMoreButton
+
+### Example: Example 1
+
+50/150
+
+Load more
+
+Reset
+
+#### Summary
+
+50/150
+
+Load more
+
+Reset
+
+#### React (tsx)
+
+```tsx
+import React, { useState } from 'react';
+
+import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';
+
+const initialState = { loaded: 50, total: 150 };
+
+export default () => {
+    const [state, setState] = useState(initialState);
+
+    const handleLoadMore = () => {
+        const { loaded, total } = state;
+        if (loaded < total) {
+            setState({
+                ...state,
+                loaded: loaded + 50,
+            });
+        }
+    };
+
+    const handleReset = () => setState(initialState);
+
+    return (
+        <React.Fragment>
+            <LoadMoreButton
+                loaded={state.loaded}
+                total={state.total}
+                onLoadMore={handleLoadMore}
+                loadMoreMessage='Load more'
+                noMoreMessage='Everything loaded'
+            />
+
+            <button
+                className='position-absolute left-0 bottom-0 margin-10 btn btn-default'
+                type='button'
+                onClick={handleReset}
+            >
+                Reset
+            </button>
+        </React.Fragment>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
+    <div class="min-width-150">
+        <div class="text-center margin-bottom-3">
+            <span class="text-medium">50</span>
+            <span class="margin-left-5 margin-right-5">/</span>
+            <span class="text-medium">150</span>
+        </div>
+        <div class="progress height-2 margin-bottom-10 bg-white">
+            <div class="progress-bar" style="width: 33.3333%;">
+            </div>
+        </div>
+        <div class="display-flex justify-content-center">
+            <button class="btn btn-link padding-right-20 margin-top--5" type="button">
+                <span class="rioglyph rioglyph-arrow-down">
+                </span>Load more</button>
+        </div>
+    </div>
+</div>
+<button class="position-absolute left-0 bottom-0 margin-10 btn btn-default" type="button">Reset</button>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| loaded | Number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |
+| total | Number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |
+| loadMoreMessage | String / Node | — | The text for the load more button. |
+| noMoreMessage | String / Node | — | The message that will be shown when everything is loaded. |
+| isInteractive | Boolean | true | If set to "false", the button will not be rendered. The loadMoreMessage will be shown as text. |
+| progressBarStyle | String | white | In case the component is used on white background, set the progress bar style to "gray". |
+| onLoadMore | Function | () => {} | Callback fired when clicking on the load more button. |
+| className | String | — | Additional classes to be set on the wrapper element. |
+
+### Example: Example 2
+
+20/100
+
+Showing limited result.
+Use filters to narrow down the result.
+
+ResetLoad more
+
+#### Summary
+
+20/100
+
+Showing limited result.
+Use filters to narrow down the result.
+
+ResetLoad more
+
+#### React (tsx)
+
+```tsx
+import React, { useState } from 'react';
+
+import LoadMoreButton from '@rio-cloud/rio-uikit/LoadMoreButton';
+
+const initialState = { loaded: 20, total: 100 };
+
+export default () => {
+    const [state, setState] = useState(initialState);
+
+    const handleLoadMore = () => {
+        const { loaded, total } = state;
+        if (loaded < total) {
+            setState({
+                ...state,
+                loaded: loaded + 20,
+            });
+        }
+    };
+
+    const handleReset = () => setState(initialState);
+
+    return (
+        <React.Fragment>
+            <LoadMoreButton
+                loaded={state.loaded}
+                total={state.total}
+                loadMoreMessage={
+                    <div className='max-width-150 text-center text-size-12 line-height-125rel'>
+                        Showing limited result.
+                        <br />
+                        Use filters to narrow down the result.
+                    </div>
+                }
+                noMoreMessage=''
+                progressBarStyle='gray'
+                isInteractive={false}
+            />
+
+            <div className='position-absolute left-0 bottom-0 margin-10 btn-toolbar'>
+                <button className='btn btn-default' type='button' onClick={handleReset}>
+                    Reset
+                </button>
+                <button className='btn btn-default' type='button' onClick={handleLoadMore}>
+                    Load more
+                </button>
+            </div>
+        </React.Fragment>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="LoadMoreButton align-items-center display-flex justify-content-center margin-top-25 margin-bottom-25 non-printable">
+    <div class="min-width-150">
+        <div class="text-center margin-bottom-3">
+            <span class="text-medium">20</span>
+            <span class="margin-left-5 margin-right-5">/</span>
+            <span class="text-medium">100</span>
+        </div>
+        <div class="progress height-2 margin-bottom-10 bg-lighter">
+            <div class="progress-bar border border-right-only border-color-white border-width-2" style="width: 20%;">
+            </div>
+        </div>
+        <div class="display-flex justify-content-center">
+            <span class="padding-top-4 padding-bottom-10">
+                <div class="max-width-150 text-center text-size-12 line-height-125rel">Showing limited result.<br>Use filters to narrow down the result.</div>
+            </span>
+        </div>
+    </div>
+</div>
+<div class="position-absolute left-0 bottom-0 margin-10 btn-toolbar">
+    <button class="btn btn-default" type="button">Reset</button>
+    <button class="btn btn-default" type="button">Load more</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| loaded | Number | 0 | The number of already loaded elements. If set to 0 the progress bar will not be shown. |
+| total | Number | 100 | The number of all elements. If set to 0 the progress bar will not be shown. |
+| loadMoreMessage | String / Node | — | The text for the load more button. |
+| noMoreMessage | String / Node | — | The message that will be shown when everything is loaded. |
+| isInteractive | Boolean | true | If set to "false", the button will not be rendered. The loadMoreMessage will be shown as text. |
+| progressBarStyle | String | white | In case the component is used on white background, set the progress bar style to "gray". |
+| onLoadMore | Function | () => {} | Callback fired when clicking on the load more button. |
+| className | String | — | Additional classes to be set on the wrapper element. |