@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/iconList.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* CSS Only
 *Source:* https://uikit.developers.rio.cloud/#/components/iconList
-*Captured:* 2026-04-20T12:55:01.950Z
+*Captured:* 2026-05-06T12:14:37.537Z
 
 The timeline component is a pure CSS component.
 
@@ -68,13 +68,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget ma
         </div>
         <ul class="icon-list margin-bottom-0">
             <li>
-                <span class="rioglyph rioglyph-truck margin-top--1">
+                <span class="rioglyph rioglyph-driver margin-top--1">
                 </span>
                 <span>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>
             </li>
             <li>
-                <span class="rioglyph rioglyph-car margin-top--1">
+                <span class="rioglyph rioglyph-businessman margin-top--1">
                 </span>
                 <span>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis.</span>

package/dist/docs/components/imagePreloader.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/imagePreloader
-*Captured:* 2026-04-20T12:54:45.477Z
+*Captured:* 2026-05-06T12:14:21.377Z
 
 Use the preloader for controlling the various states when fetching the image. It allows to handle the failure case as well.
 

package/dist/docs/components/labeledElement.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/labeledElement
-*Captured:* 2026-04-20T12:54:25.777Z
+*Captured:* 2026-05-06T12:14:02.548Z
 
 A simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements by using the FormLabelcomponent internally. For more flexibility, you can also use it directly when needed.
 

package/dist/docs/components/licensePlate.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/licensePlate
-*Captured:* 2026-04-20T12:54:47.307Z
+*Captured:* 2026-05-06T12:14:23.218Z
 
 The LicensePlate component is designed to display license plate information with various customization options. It is built with container queries, which ensure that design elements are shown or hidden based on the available space.
 

package/dist/docs/components/lineCharts.md

@@ -3,10 +3,12 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/lineCharts
-*Captured:* 2026-04-20T12:55:35.100Z
+*Captured:* 2026-05-06T12:15:10.536Z
 
 ## LineChart
 
+> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
+
 ### Example: Example 1
 
 Simple LineChart
@@ -124,7 +126,7 @@ const data: CustomData[] = [
                     <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
                             <g class="recharts-layer recharts-shape">
-                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="15.8298px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
+                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="11.3402px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
                                 </path>
                             </g>
                         </g>
@@ -447,7 +449,7 @@ const data: CustomData[] = [
                     <g tabindex="-1" class="recharts-zIndex-layer_400">
                         <g class="recharts-layer recharts-line">
                             <g class="recharts-layer recharts-shape">
-                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="47.5256px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
+                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="46.2336px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
                                 </path>
                             </g>
                         </g>
@@ -1444,7 +1446,7 @@ const data: CustomData[] = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(443.758px, 138px);">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                         <p class="recharts-tooltip-label" style="margin: 0px;">
                         </p>

package/dist/docs/components/listMenu.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/listMenu
-*Captured:* 2026-04-20T12:54:47.861Z
+*Captured:* 2026-05-06T12:14:23.723Z
 
 A simple list menu that supports grouping and filter.
 

package/dist/docs/components/loadMore.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Interaction
 *Source:* https://uikit.developers.rio.cloud/#/components/loadMore
-*Captured:* 2026-04-20T12:53:45.163Z
+*Captured:* 2026-05-06T12:13:21.560Z
 
 ## LoadMoreButton
 

package/dist/docs/components/mainNavigation.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Navigation
 *Source:* https://uikit.developers.rio.cloud/#/components/mainNavigation
-*Captured:* 2026-04-20T12:53:36.222Z
+*Captured:* 2026-05-06T12:13:12.974Z
 
 ## MainNavigation
 

package/dist/docs/components/mapCircle.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCircle
-*Captured:* 2026-04-20T12:55:18.827Z
+*Captured:* 2026-05-06T12:14:56.394Z
 
 ## Circle
 

package/dist/docs/components/mapCluster.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapCluster
-*Captured:* 2026-04-20T12:55:14.806Z
+*Captured:* 2026-05-06T12:14:47.928Z
 
 ## Clusters
 
@@ -67,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)}
@@ -221,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,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapContext
-*Captured:* 2026-04-20T12:55:26.951Z
+*Captured:* 2026-05-06T12:15:03.241Z
 
 ## Map
 

package/dist/docs/components/mapDraggableMarker.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapDraggableMarker
-*Captured:* 2026-04-20T12:55:16.462Z
+*Captured:* 2026-05-06T12:14:54.125Z
 
 ## Draggable marker
 

package/dist/docs/components/mapGettingStarted.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapGettingStarted
-*Captured:* 2026-04-20T12:55:02.170Z
+*Captured:* 2026-05-06T12:14:37.871Z
 
 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,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapInfoBubble
-*Captured:* 2026-04-20T12:55:25.012Z
+*Captured:* 2026-05-06T12:15:02.675Z
 
 ## InfoBubble
 

package/dist/docs/components/mapLayerGroup.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapLayerGroup
-*Captured:* 2026-04-20T12:55:16.979Z
+*Captured:* 2026-05-06T12:14:54.411Z
 
 ## MapLayerGroup
 

package/dist/docs/components/mapMarker.md

@@ -3,12 +3,14 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapMarker
-*Captured:* 2026-04-20T12:55:13.224Z
+*Captured:* 2026-05-06T12:14:45.960Z
 
 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.

package/dist/docs/components/mapPolygon.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapPolygon
-*Captured:* 2026-04-20T12:55:30.672Z
+*Captured:* 2026-05-06T12:15:07.846Z
 
 Polygons and isolines support click and hover interactions. A typical hover effect can be created by changing the outline via strokeColor and lineWidth in the hoverStyle.
 

package/dist/docs/components/mapRoute.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapRoute
-*Captured:* 2026-04-20T12:55:44.414Z
+*Captured:* 2026-05-06T12:15:16.815Z
 
 There are currently 3 different route styles built-in into the map component.
 

package/dist/docs/components/mapSettings.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapSettings
-*Captured:* 2026-04-20T12:55:23.037Z
+*Captured:* 2026-05-06T12:14:55.819Z
 
 ## Map settings
 
@@ -82,6 +82,7 @@ import MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';
 import MapBoundingBoxButton from '@rio-cloud/rio-uikit/MapBoundingBoxButton';
 import MapCenterMarkerButton from '@rio-cloud/rio-uikit/MapCenterMarkerButton';
 import MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';
+import MapPreviousViewportButton from '@rio-cloud/rio-uikit/MapPreviousViewportButton';
 import Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';
 import Multiselect from '@rio-cloud/rio-uikit/Multiselect';
 import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
@@ -138,7 +139,7 @@ const mapLayerOptions: SelectOption[] = [
 ];
 
 const languageOptions: SelectOption[] = [
-    { id: 'en', label: 'English' },
+    { id: 'en-GB', label: 'English' },
     { id: 'de-DE', label: 'German' },
     { id: 'pl', label: 'Polish' },
 ];
@@ -154,7 +155,7 @@ const FullSettingsExample = () => {
     const [center, setCenter] = useState(initialPosition);
     const [enableWebGL, setEnableWebGL] = useState(true);
     const [enableDevicePixelRatio, setEnableDevicePixelRatio] = useState(true);
-    const [language, setLanguage] = useState('en');
+    const [language, setLanguage] = useState('en-GB');
 
     const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);
     const [maxZoom, setMaxZoom] = useState(DEFAULT_MAX_ZOOM);
@@ -386,6 +387,10 @@ const FullSettingsExample = () => {
                                     tooltip='Center current Marker'
                                 />,
                                 <MapLockMarkerButton key='mapLockMarkerButton' />,
+                                <MapPreviousViewportButton
+                                    key='mapPreviousViewportButton'
+                                    tooltip='Back to previous map position'
+                                />,
                             ]}
                         />
                     }
@@ -573,6 +578,7 @@ const FullSettingsExample = () => {
                 <IncidentsList
                     mapLayer={mapLayerOptionIds}
                     incidents={incidents}
+                    language={language}
                     api={mapApiRef.current}
                     onIncidentSelect={(pos: MapPosition) => {
                         // at zoom level 16 the incident cluster is dissolved
@@ -597,7 +603,7 @@ type IncidentItemProps = {
 
 const IncidentItem = (props: IncidentItemProps) => {
     const { api, incident, onClick } = props;
-    const { id, description, position, tooltipContent } = incident;
+    const { id, comment, description, position, summary, tooltipContent } = incident;
 
     const [showInfo, setShowInfo] = useState(false);
 
@@ -611,8 +617,23 @@ const IncidentItem = (props: IncidentItemProps) => {
             onMouseEnter={() => setShowInfo(true)}
             onMouseLeave={() => setShowInfo(false)}
         >
-            <div className='line-height-125rel margin-bottom-5'>{description.value}</div>
-            <div className='text-size-12 text-dark text-italic text-color-dark'>{JSON.stringify(position)}</div>
+            <div className='line-height-125rel margin-bottom-5 text-medium'>{description.value}</div>
+            <div className='display-flex flex-column gap-5 margin-bottom-5 text-size-12'>
+                <div>
+                    <div className='text-color-dark text-medium'>Description</div>
+                    <div className='text-color-darker'>{description.value}</div>
+                </div>
+                <div>
+                    <div className='text-color-dark text-medium'>Summary</div>
+                    <div className='text-color-darker'>{summary.value}</div>
+                </div>
+                {comment && (
+                    <div>
+                        <div className='text-color-dark text-medium'>Comment</div>
+                        <div className='text-color-darker'>{comment}</div>
+                    </div>
+                )}
+            </div>
             {showInfo && (
                 <InfoBubble api={api} position={position} content={tooltipContent} markerOffset={{ x: 0, y: -31 }} />
             )}
@@ -623,13 +644,14 @@ const IncidentItem = (props: IncidentItemProps) => {
 type IncidentsListProps = {
     mapLayer: string[];
     incidents?: MapIncidents | undefined;
+    language: string;
     api?: MapApi;
     onIncidentSelect: (position: MapPosition) => void;
     onPositionChange: (position: MapPosition, zoom: number) => void;
 };
 
 const IncidentsList = (props: IncidentsListProps) => {
-    const { mapLayer, incidents, api, onIncidentSelect, onPositionChange } = props;
+    const { mapLayer, incidents, language, api, onIncidentSelect, onPositionChange } = props;
 
     const [previousPosition, setPreviousPosition] = useState<MapPosition | undefined>();
     const [previousZoom, setPreviousZoom] = useState<number | undefined>();
@@ -652,9 +674,14 @@ const IncidentsList = (props: IncidentsListProps) => {
     };
 
     return (
-        <div className='max-width-300-lg min-width-300-lg'>
+        <div className='max-width-400-lg min-width-400-lg'>
             <div className='display-flex justify-content-between align-items-end'>
-                <label>Incidents</label>
+                <label>
+                    Incidents
+                    <span className='text-normal text-size-12 text-color-dark margin-left-5'>
+                        HERE lang: {language}
+                    </span>
+                </label>
                 {previousPosition ? (
                     <div className='btn btn-link btn-link-inline margin-bottom-5' onClick={handleGoBack}>
                         <span className='rioglyph rioglyph-arrow-left' />

package/dist/docs/components/mapUtils.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapUtils
-*Captured:* 2026-04-20T12:55:26.933Z
+*Captured:* 2026-05-06T12:15:03.957Z
 
 ## Map utils
 
@@ -24,4 +24,67 @@ return (
 mapApiRef . current = api ; // if needed, render cluster or marker layer here or return null return null ; } }
 </ Map >
 );
-};
+};
+
+#### Code (text)
+
+```text
+import { useRef, useState } from 'react';
+import { isEqual } from 'es-toolkit/compat';
+
+import Map from '@rio-cloud/rio-uikit/Map';
+import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
+import type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+
+export default () => {
+    const [zoom, setZoom] = useState(10);
+    const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });
+    const mapApiRef = useRef<MapApi>();
+
+    const eventListenerMap = {
+        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+            // Access the Map ViewModel to retrieve its' LookAtData
+            // The View model contains all relevant map data like zoom, position or bounding box.
+            // Note: Working with the ViewModel directly requires to round zoom values or to exclude
+            // other props from position object. Better, use map utils instead.
+            const target = event.currentTarget as H.Map;
+            const lookAtData = target.getViewModel().getLookAtData();
+
+            console.log({ lookAtData });
+
+            // Accessing map utils to retrieve map position, zoom and bounding box.
+            // This way, you don't have to deal with here map internals or round zoom values etc.
+            const api = mapApiRef.current;
+            const mapCenter = api?.utils?.getCenter();
+            const mapZoom = api?.utils?.getZoom();
+            const mapBoundingBox = api?.utils?.getBounds();
+
+            console.log({ mapCenter, mapZoom, mapBoundingBox });
+
+            // Check for changed values to update local state or to perform other actions
+            const isEqualZoom = isEqual(zoom, mapZoom);
+            const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);
+
+            if (!(isEqualPosition && isEqualZoom)) {
+                // ... perform some actions
+            }
+        },
+    };
+
+    return (
+        <Map
+            eventListenerMap={eventListenerMap}
+            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+            // ... other map properties
+        >
+            {api => {
+                mapApiRef.current = api;
+
+                // if needed, render cluster or marker layer here or return null
+                return null;
+            }}
+        </Map>
+    );
+};
+```