@rio-cloud/uikit-mcp 1.1.10 → 1.1.12

package/dist/docs/components/mapViewportHistory.md

@@ -0,0 +1,287 @@
+# Map viewport history
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#/components/mapViewportHistory
+*Captured:* 2026-05-06T12:14:52.242Z
+
+Viewport history stores relevant map movements and exposes a settings button that jumps back to the previous center and zoom. The button is only rendered when a previous viewport exists.
+
+## Map viewport history
+
+Use the buttons below to trigger programmatic map changes, pause or resume the moving truck asset, or pan and zoom manually. When the asset lock is active, the map follows the truck and the history button is hidden because returning to a previous viewport would immediately conflict with the locked asset.
+
+### Example: Current center:N49° 8.106′ E10° 34.920′Zoom: 7Animation: offAsset lock: off
+
+Terms of use © 1987–2026 HERE
+
+50 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Select depot Select customer Reset map Enable animation Enable asset movement Current center: N49° 8.106′ E10° 34.920′ Zoom: 7 Animation: off Asset lock: off
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import EventUtils, { type EventListenerMap } from '@rio-cloud/rio-uikit/EventUtils';
+import Map from '@rio-cloud/rio-uikit/Map';
+import MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';
+import MapPreviousViewportButton from '@rio-cloud/rio-uikit/MapPreviousViewportButton';
+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 Position from '@rio-cloud/rio-uikit/Position';
+import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
+import type { MapEvent, Position as MapPosition } from '@rio-cloud/rio-uikit/mapTypes';
+
+import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
+
+const INITIAL_ZOOM = 7;
+
+const initialPosition: MapPosition = { lat: 49.1351, lng: 10.582 };
+const depotPosition: MapPosition = { lat: 48.7758, lng: 9.1829 };
+const customerPosition: MapPosition = { lat: 49.4521, lng: 11.0767 };
+
+const assetRoute: MapPosition[] = [
+    { lat: 48.1351, lng: 11.582 },
+    { lat: 48.144, lng: 11.596 },
+    { lat: 48.151, lng: 11.612 },
+    { lat: 48.159, lng: 11.628 },
+    { lat: 48.167, lng: 11.645 },
+    { lat: 48.154, lng: 11.626 },
+    { lat: 48.142, lng: 11.604 },
+];
+
+const isSameViewport = (
+    currentCenter: MapPosition,
+    currentZoom: number,
+    targetCenter: MapPosition,
+    targetZoom: number
+) =>
+    Math.abs(currentCenter.lat - targetCenter.lat) < 0.0001 &&
+    Math.abs(currentCenter.lng - targetCenter.lng) < 0.0001 &&
+    Math.abs(currentZoom - targetZoom) < 0.1;
+
+const MapViewportHistoryExample = () => {
+    const [center, setCenter] = useState(initialPosition);
+    const [zoom, setZoom] = useState(INITIAL_ZOOM);
+    const [zoomAnimation, setZoomAnimation] = useState(false);
+    const [assetPositionIndex, setAssetPositionIndex] = useState(0);
+    const [isAssetMovementEnabled, setIsAssetMovementEnabled] = useState(false);
+    const [isAssetLocked, setIsAssetLocked] = useState(false);
+
+    const pendingViewportRef = useRef<{ center: MapPosition; zoom: number }>();
+
+    const assetPosition = assetRoute[assetPositionIndex];
+
+    useEffect(() => {
+        if (!isAssetMovementEnabled) {
+            return;
+        }
+
+        const intervalId = window.setInterval(() => {
+            setAssetPositionIndex(currentIndex => (currentIndex + 1) % assetRoute.length);
+        }, 5000);
+
+        return () => window.clearInterval(intervalId);
+    }, [isAssetMovementEnabled]);
+
+    const setMapView = (position: MapPosition, nextZoom: number) => {
+        pendingViewportRef.current = isSameViewport(center, zoom, position, nextZoom)
+            ? undefined
+            : { center: position, zoom: nextZoom };
+
+        setCenter(position);
+        setZoom(nextZoom);
+    };
+
+    const setMapCenter = (position: MapPosition) => {
+        pendingViewportRef.current = isSameViewport(center, zoom, position, zoom)
+            ? undefined
+            : { center: position, zoom };
+
+        setCenter(position);
+    };
+
+    useEffect(() => {
+        if (isAssetLocked) {
+            setMapCenter(assetPosition);
+        }
+    }, [assetPosition, isAssetLocked]);
+
+    const eventListenerMap: EventListenerMap = {
+        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {
+            const target = event.currentTarget as H.Map;
+            const updatedCenter = target.getCenter();
+            const updatedZoom = target.getZoom();
+
+            if (!updatedCenter) {
+                return;
+            }
+
+            const pendingViewport = pendingViewportRef.current;
+            if (pendingViewport) {
+                if (!isSameViewport(updatedCenter, updatedZoom, pendingViewport.center, pendingViewport.zoom)) {
+                    return;
+                }
+
+                pendingViewportRef.current = undefined;
+            }
+
+            setCenter(updatedCenter);
+            setZoom(updatedZoom);
+        },
+    };
+
+    const mapSettingsButtons = [
+        <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'
+        />,
+        <MapLockMarkerButton
+            key='mapLockAssetButton'
+            tooltip={isAssetLocked ? 'Unlock asset' : 'Lock asset'}
+            isActive={isAssetLocked}
+            onToggle={() => setIsAssetLocked(!isAssetLocked)}
+        />,
+    ];
+
+    if (!isAssetLocked) {
+        mapSettingsButtons.push(
+            <MapPreviousViewportButton key='mapPreviousViewportButton' tooltip='Back to previous map position' />
+        );
+    }
+
+    return (
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={center}
+                zoom={zoom}
+                height={400}
+                eventListenerMap={eventListenerMap}
+                zoomAnimation={zoomAnimation}
+                mapSettings={<MapSettings options={mapSettingsButtons} />}
+            >
+                <Marker
+                    position={assetPosition}
+                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' name='Asset' />}
+                />
+                <Marker
+                    position={depotPosition}
+                    icon={<SingleMapMarker iconNames={['warehouse']} markerColor='bg-map-marker-poi' name='Depot' />}
+                />
+                <Marker
+                    position={customerPosition}
+                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-route' name='Customer' />}
+                />
+            </Map>
+
+            <ButtonToolbar className='margin-top-15'>
+                <Button onClick={() => setMapView(depotPosition, 12)}>Select depot</Button>
+                <Button onClick={() => setMapView(customerPosition, 13)}>Select customer</Button>
+                <Button onClick={() => setMapView(initialPosition, INITIAL_ZOOM)}>Reset map</Button>
+                <Button onClick={() => setZoomAnimation(!zoomAnimation)}>
+                    {zoomAnimation ? 'Disable animation' : 'Enable animation'}
+                </Button>
+                <Button onClick={() => setIsAssetMovementEnabled(!isAssetMovementEnabled)}>
+                    {isAssetMovementEnabled ? 'Pause asset movement' : 'Enable asset movement'}
+                </Button>
+                <div className='text-size-12 text-color-dark display-flex align-items-center gap-10'>
+                    <span>Current center:</span>
+                    <Position latitude={center.lat} longitude={center.lng} />
+                    <span>Zoom: {Math.round(zoom)}</span>
+                    <span>Animation: {zoomAnimation ? 'on' : 'off'}</span>
+                    <span>Asset lock: {isAssetLocked ? 'on' : 'off'}</span>
+                </div>
+            </ButtonToolbar>
+        </>
+    );
+};
+
+export default MapViewportHistoryExample;
+```
+
+#### Props: Map
+
+### Map
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| credentials | MapCredentials | — | HERE credentials used to initialize the map platform. |
+| height | number | — | Height of the map container. |
+| width | number | — | Width of the map container. |
+| language | string | 'en' | Language used for HERE map labels and controls. |
+| center | Position | — | Initial center position of the map. |
+| zoom | number | — | Initial or controlled zoom level of the map. |
+| boundingBox | BoundingBox | — | Bounding box that should be fitted by the map view. |
+| disableMapEvents | boolean | — | Disables HERE map events entirely. |
+| disableBehavior | boolean | false | Disables the default HERE map behavior such as pan and zoom interaction. |
+| disableZoomMomentum | boolean | true | Disables HERE zoom momentum to reduce scroll inertia on zoom. |
+| eventListenerMap | EventListenerMap | — | Event listeners attached to the HERE map instance. |
+| hideMapSettings | boolean | — | Legacy prop for hiding map settings. |
+| hideClusterSettings | boolean | false | Hides the cluster settings entry in the map settings UI. |
+| hideMapLayerSettings | boolean | false | Hides the map layer settings entry in the map settings UI. |
+| mapType | MapType | Map.TYPE_DEFAULT | Base map type to render. |
+| mapLayer | MapLayer[] | [] | Active overlay layers such as traffic or incidents. |
+| showCluster | boolean | true | Controls whether marker clustering is enabled. |
+| showScaleBar | boolean | false | Shows the HERE scale bar. |
+| onMapTypeChange | (type: MapType, previousType?: MapType) => void | — | Callback fired when the map type changes. |
+| onMapLayerChange | (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void | — | Callback fired when the active map layers change. |
+| onShowClusterChange | (show: boolean) => void | — | Callback fired when the cluster visibility changes. |
+| onZoomIn | (zoom: number) => void | — | Callback fired when zooming in via the built-in zoom controls. |
+| onZoomOut | (zoom: number) => void | — | Callback fired when zooming out via the built-in zoom controls. |
+| onIncidentsChange | (incidentsResult: MapIncidents) => void | — | Callback used by incidents overlays to report fetched incidents. |
+| mapSettingsTooltip | string \| React.ReactNode | — | Tooltip content for the map settings entry. |
+| mapSettings | React.ReactNode | — | Custom settings UI rendered on top of the map. |
+| zoomAnimation | boolean | false | Enables animation when zoom or center changes are applied programmatically. |
+| maxViewportHistoryEntries | number | 5 | Maximum number of previous map viewports stored for viewport history. |
+| enableWebGL | boolean | true | Enables the WebGL/HARP rendering engine where supported. |
+| enableDevicePixelRatio | boolean | true | Uses window.devicePixelRatio for map rendering. |
+| enableMarkerIconCache | boolean | true | Enables caching for generated marker icons. |
+| enableFractionalZoom | boolean | false | Keeps HERE fractional zoom enabled for smoother trackpad and wheel zoom interaction. |
+| disableMarkerPointerEventsWhileZooming | boolean | false | Temporarily disables marker pointer events during zoom interactions to reduce DOM hit-testing overhead. |
+| pixelRatio | number | — | Fallback pixel ratio used when device pixel ratio support is disabled. |
+| minZoom | number | — | Minimum allowed zoom level. |
+| maxZoom | number | — | Maximum allowed zoom level. |
+| children | React.ReactNode \| ((api: MapApi, incidents?: MapIncidents) => React.ReactNode) | — | Map content or a render function receiving the map API. |
+
+#### Props: MapPreviousViewportButton
+
+### MapPreviousViewportButton
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onGoBack | () => void | — | Callback fired after the map viewport history jumps back to the previous viewport. |
+
+#### Props: MapSettingsTile
+
+### MapSettingsTile
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| onToggle | (newState: boolean) => void | — | Callback fired when the settings tile opens or closes. |
+| tooltip | React.ReactNode | — | Tooltip shown while the settings tile is closed. |
+| panel | React.ReactNode | — | Custom panel rendered below the settings tile when it is open. |
+| items | JSX.Element[] \| undefined | — | Dropdown menu items rendered when the settings tile is open. |
+| activeIcon | JSX.Element \| undefined | — | Icon shown when the tile is active. |
+| inactiveIcon | JSX.Element \| undefined | — | Icon shown when the tile is inactive. |
+| isActive | boolean | — | Controls whether the active or inactive icon is shown. |
+| buttonClassName | string | — | Additional class name for the clickable settings button. |
+| className | string | — | Additional class name for the settings tile wrapper. |

package/dist/docs/components/multiselects.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#/components/multiselects
-*Captured:* 2026-04-20T12:54:02.436Z
+*Captured:* 2026-05-06T12:13:40.306Z
 
 The Multiselect component is a form control and is intended to be used within forms. It's designed to be used instead of native HTML Select which cannot be styled and are rendered by each browser differently.
 
@@ -617,6 +617,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -789,6 +790,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -1020,6 +1022,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -1183,6 +1186,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -1653,6 +1657,7 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
@@ -1944,6 +1949,171 @@ export default () => (
 | pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
 | autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
 | bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
+| disabled | Boolean | false | Option to disable the opening of the option list. |
+| tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
+| hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |
+| useFilter | Boolean | false | Defines whether the component should be filterable. |
+| noItemMessage | String / Node | — | Text that shall be shown when not match was found when filtering. |
+| counterMessage | Object | — | Object that will render the number of selected items instead of individual items. Using this prop will disable the filter functionality. { one: 'item selected', many: 'items selected' } |
+| └one | String / Node | — | Text that will be used when a single item is selected. |
+| └many | String / Node | — | Text that will be used when multiple item are selected. |
+| renderCounterMessage | Function | — | Optional render function that is used to render the message how many items have been selected. The total amount of selected items will be passed into that function. Using this prop will disable the filter functionality. |
+| multiline | boolean | false | Defines whether the selected items wrap around within the dropdown toggle. |
+| showSelectedItemIcon | Boolean | false | Set to show only the icon and not the label of selected item. |
+| showUnselectedItemIcons | Boolean | false | Set to show all item icons within the toggle element. Selected items are highlighted and unselected items are shown as inactive. |
+| inputAddon | String \| ReactNode | — | Option to add an icon as a leading input addon to the select component. |
+| errorMessage | String | — | Input error message. |
+| warningMessage | String | — | Input warning message. |
+| messageWhiteSpace | 'normal' \| 'prewrap' \| 'nowrap' | 'normal' | Optional warning message white-space setting. |
+| dropdownClassName | String | — | Additional classes to be set to the dropdown. |
+| btnClassName | String | — | Additional classes to be set to the select/input. |
+| className | String | — | Additional classes to be set to the select wrapper. |
+
+### Example: Example 7
+
+Multiselect with incrementally loaded options Please select shipment states No matching shipment state
+
+Load options in two steps Reset
+No options loaded
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+
+import Button from '@rio-cloud/rio-uikit/Button';
+import Multiselect, { type MultiselectOption } from '@rio-cloud/rio-uikit/Multiselect';
+
+const firstOptionBatch: MultiselectOption[] = [
+    { id: 'shipment-open', label: 'Open' },
+    { id: 'shipment-planned', label: 'Planned' },
+    { id: 'shipment-in-transit', label: 'In transit' },
+    { id: 'shipment-at-border', label: 'At border' },
+];
+
+const secondOptionBatch: MultiselectOption[] = [
+    { id: 'shipment-delayed', label: 'Delayed' },
+    { id: 'shipment-delivered', label: 'Delivered' },
+    { id: 'shipment-cancelled', label: 'Cancelled' },
+    { id: 'shipment-on-hold', label: 'On hold' },
+];
+
+const MultiselectIncrementalOptionsExample = () => {
+    const [options, setOptions] = useState<MultiselectOption[]>([]);
+    const [selectedOptionIds, setSelectedOptionIds] = useState<string[]>([]);
+    const [loadStep, setLoadStep] = useState(0);
+    const timeoutRef = useRef<number | undefined>();
+
+    useEffect(() => () => window.clearTimeout(timeoutRef.current), []);
+
+    const handleStartLoading = () => {
+        window.clearTimeout(timeoutRef.current);
+
+        setSelectedOptionIds([]);
+        setOptions(firstOptionBatch);
+        setLoadStep(1);
+
+        timeoutRef.current = window.setTimeout(() => {
+            setOptions([...firstOptionBatch, ...secondOptionBatch]);
+            setLoadStep(2);
+        }, 3_000);
+    };
+
+    const handleReset = () => {
+        window.clearTimeout(timeoutRef.current);
+
+        setSelectedOptionIds([]);
+        setOptions([]);
+        setLoadStep(0);
+    };
+
+    const statusText =
+        loadStep === 0
+            ? 'No options loaded'
+            : `${options.length} of ${firstOptionBatch.length + secondOptionBatch.length} options loaded`;
+
+    return (
+        <div className='max-width-400'>
+            <label htmlFor='multiselectIncrementalOptions'>Multiselect with incrementally loaded options</label>
+            <Multiselect
+                id='multiselectIncrementalOptions'
+                placeholder='Please select shipment states'
+                options={options}
+                value={selectedOptionIds}
+                useFilter
+                useClear
+                noItemMessage='No matching shipment state'
+                onChange={setSelectedOptionIds}
+            />
+            <div className='display-flex gap-10 align-items-center margin-top-10'>
+                <Button onClick={handleStartLoading}>Load options in two steps</Button>
+                <Button bsStyle='default' onClick={handleReset}>
+                    Reset
+                </Button>
+            </div>
+            <div className='text-size-12 text-color-gray margin-top-10'>{statusText}</div>
+        </div>
+    );
+};
+
+export default MultiselectIncrementalOptionsExample;
+```
+
+#### HTML (html)
+
+```html
+<div class="max-width-400">
+    <label for="multiselectIncrementalOptions">Multiselect with incrementally loaded options</label>
+    <div class="select multiselect dropdown">
+        <button type="button" id="multiselectIncrementalOptions" class="dropdown-toggle form-control text-left" data-toggle="dropdown" tabindex="0" aria-haspopup="true" aria-expanded="false">
+            <span class="placeholder">Please select shipment states</span>
+            <span class="select-toggle-actions">
+                <span class="clearButton hide pointer-events-none">
+                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                    </span>
+                </span>
+                <span class="caret">
+                </span>
+            </span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+            <li class="no-item-message disabled" role="presentation">
+                <a role="menuitem">
+                    <i>No matching shipment state</i>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="display-flex gap-10 align-items-center margin-top-10">
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Load options in two steps</button>
+        <button type="button" class="btn btn-default btn-component" tabindex="0">Reset</button>
+    </div>
+    <div class="text-size-12 text-color-gray margin-top-10">No options loaded</div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | String | — | Passed through as HTML attribute to the toggle button. |
+| id | String | — | Passed through as HTML attribute to the toggle button. Uses the value given to name if not provided explicitly. |
+| options | Array of Objects | [] | Items to display in the dropdown menu. |
+| └id | String | — | Used to identify an option |
+| └label | String / Node | — | The option item text |
+| └icon | Node | — | Icon to be displayed in front of the label |
+| └selected | Boolean | false | Defines whether the menu item is selected. |
+| └disabled | Boolean | false | Setting "disabled" to true will disable the respective item. |
+| └header | Boolean | false | Will treat the given value as a menu header. |
+| value | Array | — | Sets the ids of the selected options when the component is already mounted. |
+| onChange | Function | () => {} | Callback function triggered when an item is selected. |
+| placeholder | String / Node | — | Text to display when nothing is selected. |
+| dropup | Boolean | false | Defines whether the dropdown opens upwards. Set to "true" additionally disables autoDrop feature. |
+| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown toggle. Set to "true" additionally disables autoDrop feature. |
+| autoDropDirection | Boolean | true | Enables or disables the autoDrop positioning feature. When enabled, the option list opens below or above the input depending on the surrounding space. |
+| bsSize | String | md | Defines the size of the select to be rendered. Possible values are: 'sm', 'md' and 'lg' |
+| variant | 'default' \| 'blank' | 'default' | Defines the visual variant of the select. |
 | disabled | Boolean | false | Option to disable the opening of the option list. |
 | tabIndex | Number | 0 | The tabindex attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation. See tabIndex |
 | hasError | Boolean | false | Defines whether the Bootstrap error classes shall be added to the toggle element. |

package/dist/docs/components/noData.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/noData
-*Captured:* 2026-04-20T12:54:27.724Z
+*Captured:* 2026-05-06T12:14:03.855Z
 
 ## NoData
 

package/dist/docs/components/notifications.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/notifications
-*Captured:* 2026-04-20T12:54:49.548Z
+*Captured:* 2026-05-06T12:14:25.481Z
 
 Hint:Notifications need to be wrapped by a NotificationsContainer inside your application layout body.
 

package/dist/docs/components/numbercontrol.md

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

package/dist/docs/components/onboarding.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Misc
 *Source:* https://uikit.developers.rio.cloud/#/components/onboarding
-*Captured:* 2026-04-20T12:54:49.651Z
+*Captured:* 2026-05-06T12:14:25.513Z
 
 Useful when you want to control a single tooltip that highlights a portion of the UI.
 

package/dist/docs/components/page.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Content
 *Source:* https://uikit.developers.rio.cloud/#/components/page
-*Captured:* 2026-04-20T12:54:28.928Z
+*Captured:* 2026-05-06T12:14:05.520Z
 
 ## Page
 

package/dist/docs/components/pager.md

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