@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/listMenu.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/listMenu
-*Captured:* 2026-03-06T10:40:59.102Z
+*Captured:* 2026-04-27T14:58:22.286Z
 
 A simple list menu that supports grouping and filter.
 
@@ -203,6 +203,7 @@ export default () => {
 | groupClassName | string | — | Additional classes to be set on the menu group element. |
 | trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |
 | className | string | — | Additional classes to be set on the wrapper element. |
+| filterFn | ListMenuFilterFn<T> | — | Optional custom filter function. Use this when filtering should do more than a simple substring match, for example fuzzy ranking or multi-field weighting. |
 
 #### Props: ListMenuNavItem
 
@@ -241,6 +242,8 @@ import { NavLink } from 'react-router-dom';
 
 import ListMenu, { type ListMenuItem } from '@rio-cloud/rio-uikit/ListMenu';
 
+const getNavLinkClassName = ({ isActive }: { isActive: boolean }) => (isActive ? 'active' : '');
+
 const menuItems: ListMenuItem[] = [
     {
         group: 'Group',
@@ -248,7 +251,7 @@ const menuItems: ListMenuItem[] = [
             {
                 key: 'Lorem',
                 item: (
-                    <NavLink activeClassName='active' to='/components/listMenu'>
+                    <NavLink className={getNavLinkClassName} to='/components/listMenu'>
                         Lorem
                     </NavLink>
                 ),
@@ -256,7 +259,7 @@ const menuItems: ListMenuItem[] = [
             {
                 key: 'Lipsum',
                 item: (
-                    <NavLink activeClassName='active' to='/foo'>
+                    <NavLink className={getNavLinkClassName} to='/foo'>
                         Lipsum
                     </NavLink>
                 ),
@@ -264,7 +267,7 @@ const menuItems: ListMenuItem[] = [
             {
                 key: 'Dolor',
                 item: (
-                    <NavLink activeClassName='active' to='/foo'>
+                    <NavLink className={getNavLinkClassName} to='/foo'>
                         Dolor
                     </NavLink>
                 ),
@@ -272,7 +275,7 @@ const menuItems: ListMenuItem[] = [
             {
                 key: 'Sit amet',
                 item: (
-                    <NavLink activeClassName='active' to='/foo'>
+                    <NavLink className={getNavLinkClassName} to='/foo'>
                         Sit amet
                     </NavLink>
                 ),
@@ -286,12 +289,11 @@ const menuItems: ListMenuItem[] = [
     },
     {
         group: 'Another group',
-        isSubItem: true,
         navItems: [
             {
                 key: 'Lorem',
                 item: (
-                    <NavLink activeClassName='active' to='/bar'>
+                    <NavLink className={getNavLinkClassName} to='/bar'>
                         Lorem
                     </NavLink>
                 ),
@@ -319,16 +321,16 @@ export default () => (
                 <span class="">Group</span>
             </li>
             <li class="">
-                <a activeclassname="active" aria-current="page" class="active" href="#/components/listMenu" data-discover="true">Lorem</a>
+                <a aria-current="page" class="active" href="#/components/listMenu" data-discover="true">Lorem</a>
             </li>
             <li class="">
-                <a activeclassname="active" class="" href="#/foo" data-discover="true">Lipsum</a>
+                <a class="" href="#/foo" data-discover="true">Lipsum</a>
             </li>
             <li class="">
-                <a activeclassname="active" class="" href="#/foo" data-discover="true">Dolor</a>
+                <a class="" href="#/foo" data-discover="true">Dolor</a>
             </li>
             <li class="">
-                <a activeclassname="active" class="" href="#/foo" data-discover="true">Sit amet</a>
+                <a class="" href="#/foo" data-discover="true">Sit amet</a>
             </li>
             <li class="subitem">
                 <span>No Link Sample</span>
@@ -339,7 +341,7 @@ export default () => (
                 <span class="">Another group</span>
             </li>
             <li class="">
-                <a activeclassname="active" class="" href="#/bar" data-discover="true">Lorem</a>
+                <a class="" href="#/bar" data-discover="true">Lorem</a>
             </li>
         </ul>
     </div>
@@ -369,6 +371,7 @@ export default () => (
 | groupClassName | string | — | Additional classes to be set on the menu group element. |
 | trailingInputAddon | React.ReactNode | — | Additional addon for the input group. |
 | className | string | — | Additional classes to be set on the wrapper element. |
+| filterFn | ListMenuFilterFn<T> | — | Optional custom filter function. Use this when filtering should do more than a simple substring match, for example fuzzy ranking or multi-field weighting. |
 
 #### Props: ListMenuNavItem
 

package/dist/docs/components/loadMore.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/loadMore
-*Captured:* 2026-03-06T10:40:09.969Z
+*Captured:* 2026-04-27T14:57:19.954Z
 
 ## LoadMoreButton
 
@@ -95,6 +95,7 @@ export default () => {
 | onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |
 | progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |
 | className | string | — | Additional classes to be set on the wrapper element. |
+| hideOnPrint | boolean | true | Hides the wrapper in print styles. |
 
 ### Example: Example 2
 
@@ -197,4 +198,5 @@ export default () => {
 | isInteractive | boolean | true | If set to false, the button will not be rendered. The loadMoreMessage will be shown as text. |
 | onLoadMore | VoidFunction | — | Callback fired when clicking on the load more button. |
 | progressBarStyle | ProgressBarStyle | 'white' | In case the component is used on white background, set the progress bar style to gray. |
-| className | string | — | Additional classes to be set on the wrapper element. |
+| className | string | — | Additional classes to be set on the wrapper element. |
+| hideOnPrint | boolean | true | Hides the wrapper in print styles. |

package/dist/docs/components/mainNavigation.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#/components/mainNavigation
-*Captured:* 2026-03-06T10:39:59.855Z
+*Captured:* 2026-04-27T14:57:11.171Z
 
 ## MainNavigation
 

package/dist/docs/components/mapCircle.md

@@ -3,13 +3,22 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCircle
-*Captured:* 2026-03-06T10:41:18.987Z
+*Captured:* 2026-04-27T14:58:55.503Z
 
 ## Circle
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 

package/dist/docs/components/mapCluster.md

@@ -3,12 +3,23 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCluster
-*Captured:* 2026-03-06T10:41:15.985Z
+*Captured:* 2026-04-27T14:58:50.599Z
 
 ## Clusters
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 Regenerate data Toggle cluster
 
 #### React (tsx)
@@ -56,6 +67,7 @@ const ClustersExample = () => {
             ),
             getClusterPresentation: (assets: Asset[]) => (
                 <ClusterMapMarker
+                    iconName='truck'
                     count={assets.length}
                     warningCount={Math.floor((assets.length * 10) / 3)}
                     exceptionCount={Math.floor((assets.length * 10) / 5)}
@@ -140,6 +152,17 @@ export default ClustersExample;
 
 ### Example: Example 2
 
+Terms of use © 1987–2026 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 Regenerate data
 
 #### React (tsx)
@@ -199,6 +222,7 @@ const ClustersExample = () => {
             ),
             getClusterPresentation: ({ length }: Asset[]) => (
                 <ClusterMapMarker
+                    iconName='truck'
                     count={length}
                     warningCount={Math.floor((length * 10) / 3)}
                     exceptionCount={Math.floor((length * 10) / 5)}

package/dist/docs/components/mapContext.md

@@ -3,13 +3,22 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapContext
-*Captured:* 2026-03-06T10:41:21.788Z
+*Captured:* 2026-04-27T14:59:06.978Z
 
 ## Map
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -35,12 +44,11 @@ import type { MapApi, MapContextMenuEvent, MapEvent, Position } from '@rio-cloud
 import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
 import MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';
 
-const formatCoordinates = (coordinates: Position) => {
-    return [
+const formatCoordinates = (coordinates: Position) =>
+    [
         Math.abs(Number(coordinates.lat.toFixed(4))) + (coordinates.lat > 0 ? 'N' : 'S'),
         Math.abs(Number(coordinates.lng.toFixed(4))) + (coordinates.lng > 0 ? 'E' : 'W'),
     ].join(' ');
-};
 
 const notifyCoordinates = (coordinates: Position) => Notification.info(JSON.stringify(coordinates));
 

package/dist/docs/components/mapDraggableMarker.md

@@ -3,12 +3,23 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapDraggableMarker
-*Captured:* 2026-03-06T10:41:15.748Z
+*Captured:* 2026-04-27T14:58:51.354Z
 
 ## Draggable marker
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 Marker position {"lat":48.16,"lng":11.38}
 
 #### React (tsx)

package/dist/docs/components/mapGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapGettingStarted
-*Captured:* 2026-03-06T10:41:14.068Z
+*Captured:* 2026-04-27T14:58:37.102Z
 
 HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
 
@@ -13,6 +13,10 @@ HERE Maps credentials used in the UIKIT demo are not allowed to be used in any p
 
 ## HERE Maps credentials
 
+Need HERE Maps credentials? Please follow the guide on Confluence:
+
+Requesting HERE Maps credentials
+
 Please note that the usage of HERE Maps is not free. If you have any questions regarding license costs, please contact us.
 
 In case you want to use HERE Maps in production, please contact finance@rio.cloud.
@@ -36,4 +40,38 @@ As the UIKIT Map component relies on the map scripts from Here, we need to add t
 <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
 ```
 
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-harp.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;script src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js" type="text/javascript"&gt;
+
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /&gt;
+
 Map API VersionBy default, the map imports use the map version 3.1. However, this version is not a fixed version as it will be resolved to an internal version by Here. This means version 3.1 is treated as an evergreen version.If you encounter any instability or even bugs with the map itself, it is recommended to set the version fixed in the imports and check for a newer version on demand.More details can be found on the Here Developer PlatformFor example&lt;script src="https://js.api.here.com/v3/3.1.11.2/mapsjs-core.js"&gt;&lt;/script&gt;

package/dist/docs/components/mapInfoBubble.md

@@ -3,11 +3,138 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapInfoBubble
-*Captured:* 2026-03-06T10:41:19.613Z
+*Captured:* 2026-04-27T14:59:03.235Z
 
 ## InfoBubble
 
-### Example: Example 1
+### Example: Click the POI marker to open the InfoBubble.
+
+Terms of use © 1987–2026 HERE
+
+1 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Click the POI marker to open the InfoBubble.
+
+#### React (tsx)
+
+```tsx
+import { useRef, useState } from 'react';
+
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';
+import Map from '@rio-cloud/rio-uikit/Map';
+import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
+import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
+import Marker from '@rio-cloud/rio-uikit/Marker';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import type { MapApi } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+const mapCenter = { lat: 48.1398, lng: 11.582 };
+const poiPosition = { lat: 48.1274, lng: 11.593 };
+
+const PoiInfoBubbleContent = () => (
+    <div className='width-250 user-select-none'>
+        <div className='margin--15 padding-20 rounded'>
+            <div className='text-size-16 text-medium'>RIO Campus Munich</div>
+            <div className='text-color-dark'>80939 Munich, Germany</div>
+
+            <div className='margin-top-15 display-flex justify-content-between'>
+                <div className='text-medium'>Open 24/7</div>
+                <div className=''>
+                    <span className='label label-success label-condensed'>Available</span>
+                </div>
+            </div>
+            <div className='margin-top-10 text-color-darker line-height-20'>
+                Visitor parking, reception and charging stations directly on site.
+            </div>
+        </div>
+    </div>
+);
+
+export default () => {
+    const [showInfoBubble, setShowInfoBubble] = useState(false);
+    const mapApiRef = useRef<MapApi>();
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={mapCenter}
+                zoom={13}
+                height={420}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                {(api: MapApi) => {
+                    mapApiRef.current = api;
+
+                    return (
+                        <Marker
+                            position={poiPosition}
+                            icon={
+                                <SingleMapMarker
+                                    iconNames={['factory']}
+                                    markerColor='bg-map-marker-poi'
+                                    active={showInfoBubble}
+                                />
+                            }
+                            eventListenerMap={{
+                                [EventUtils.TAP]: () => setShowInfoBubble(true),
+                            }}
+                        />
+                    );
+                }}
+            </Map>
+            {showInfoBubble && (
+                <InfoBubble
+                    api={mapApiRef.current}
+                    position={poiPosition}
+                    markerOffset={{ x: 0, y: -50 }}
+                    content={<PoiInfoBubbleContent />}
+                    onClose={() => setShowInfoBubble(false)}
+                />
+            )}
+            <div className='margin-top-15 text-color-dark'>Click the POI marker to open the InfoBubble.</div>
+        </>
+    );
+};
+```
+
+### Example: Example 2
+
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Ansicht auswählen
+Kartenansicht
+Satellit
+
+Verkehrslage
+Verkehrsstörungen anzeigen
 
 Toggle info
 

package/dist/docs/components/mapLayerGroup.md

@@ -3,13 +3,22 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapLayerGroup
-*Captured:* 2026-03-06T10:41:17.241Z
+*Captured:* 2026-04-27T14:58:53.448Z
 
 ## MapLayerGroup
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 

package/dist/docs/components/mapMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
-*Captured:* 2026-03-06T10:41:21.198Z
+*Captured:* 2026-04-27T14:58:49.189Z
 
 Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
 
@@ -17,7 +17,16 @@ It's possible to share icon instances between different markers. This can be use
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
 
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)