@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

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-20T12:54:47.861Z
 
 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-20T12:53:45.163Z
 
 ## 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-20T12:53:36.222Z
 
 ## 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-20T12:55:18.827Z
 
 ## 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-20T12:55:14.806Z
 
 ## 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)
@@ -140,6 +151,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)

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-20T12:55:26.951Z
 
 ## 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-20T12:55:16.462Z
 
 ## 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-20T12:55:02.170Z
 
 HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment!
 

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-20T12:55:25.012Z
 
 ## 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-20T12:55:16.979Z
 
 ## 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,21 +3,28 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
-*Captured:* 2026-03-06T10:41:21.198Z
+*Captured:* 2026-04-20T12:55:13.224Z
 
 Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.
 
 ## Marker
 
-> Note: The map zoom level does not affect the size of Markers.
-
 **Sharing icon between Markers**
 
 It's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.
 
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
 
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)