@rio-cloud/rio-uikit 1.7.1 → 1.9.0

package/components/dropdown/DropdownToggleButton.js

@@ -4,9 +4,17 @@ import classNames from 'classnames';
 import Button from '../button/Button';
 import useMergeRefs from '../../hooks/useMergeRefs';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef, ...remainingProps } = props;
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, toggleButtonType = 'button', className = '', children, outerRef, iconOnly, ...remainingProps } = props;
     const toggleRef = useMergeRefs(outerRef, ref);
-    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses, children: children }));
+    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
+    const labelClasses = classNames('dropdown-toggle', 'label', `label-${bsStyle}`, 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    const tagClasses = classNames('dropdown-toggle', 'tag', 'clickable height-auto', bsSize === 'sm' && 'tag-small', 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    if (toggleButtonType === 'tag') {
+        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: tagClasses, children: children }));
+    }
+    if (toggleButtonType === 'label') {
+        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: labelClasses, children: children }));
+    }
+    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, iconOnly: iconOnly, className: buttonClasses, children: children }));
 });
 export default DropdownToggleButton;

package/components/formLabel/FormLabel.d.ts

@@ -1,9 +1,9 @@
-import { type PropsWithChildren, type ComponentProps } from 'react';
+import React, { type PropsWithChildren, type ComponentProps } from 'react';
 export type FormLabelProps = ComponentProps<'label'> & {
     /**
      * Additional supporting text displayed next to the label.
      */
-    supportingText?: string;
+    supportingText?: string | React.ReactElement;
     /**
      * Additional classes set to the outer element.
      */

package/components/formLabel/FormLabel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 const FormLabel = (props) => {

package/components/listMenu/ListMenu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: <explanation>
 import { useEffect, useRef, useState } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import debounce from 'lodash/fp/debounce';
@@ -73,7 +74,9 @@ const ListMenu = (props) => {
         }
     };
     const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0', 'z-index-1');
-    const listMenu = (_jsxs("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && (_jsx("div", { className: formClassNames, children: _jsxs("div", { className: 'input-group width-100pct', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] }) })), !hasMenuItems(filteredMenuItems) && (_jsx("div", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] }));
+    const listMenu = (_jsxs("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && (_jsx("div", { className: formClassNames, children: _jsxs("div", { className: 'input-group width-100pct', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] }) })), !hasMenuItems(filteredMenuItems) && (_jsx("div", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map((menuGroup, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
+            _jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, index)))] }));
     if (responsive && isMobileMode) {
         return (_jsx(ExpanderPanel, { title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default', children: _jsx("div", { onClick: handleExpanderBodyClick, children: listMenu }) }));
     }

package/components/map/components/Map.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import isEqual from 'lodash/fp/isEqual';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, } from './constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, DEFAULT_MIN_ZOOM, DEFAULT_MAX_ZOOM, } from './constants';
 import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';
 import { MapContext } from './MapContext';
 import { createUtils, getMapBounds } from '../utils/mapUtils';
@@ -16,7 +16,13 @@ import MapElements from './MapElements';
 import { getPlatform, getEngineType, getBaseLayer } from '../utils/rendering';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 const Map = (props) => {
-    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, eventListenerMap, mapType = MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, } = props;
+    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, disableZoomMomentum = true, eventListenerMap, mapType = MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, minZoom = DEFAULT_MIN_ZOOM, maxZoom = DEFAULT_MAX_ZOOM, } = props;
+    let safeMaxZoom = maxZoom;
+    if (minZoom > maxZoom) {
+        // Avoid crashing the map for invalid zoom limits
+        safeMaxZoom = DEFAULT_MAX_ZOOM;
+        console.error('Invalid condition for zoom limits: min <= max)');
+    }
     const mapRef = useRef(null);
     const [isMapInitialized, setMapInitialized] = useState(false);
     const [api, setApi] = useState();
@@ -25,7 +31,7 @@ const Map = (props) => {
     const [showCluster, setShowCluster] = useState(externalShowCluster);
     const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
     // Only short locale is supported by HERE Map
-    const language = lang.split('-')[0];
+    const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());
     useEffect(() => {
         let allMapObjects = [];
         if (api?.map) {
@@ -55,6 +61,8 @@ const Map = (props) => {
             engineType,
             vehicleRestrictions: activeLayers.includes(MAP_LAYER_ROAD_RESTRICTIONS),
             language,
+            minZoom,
+            maxZoom: safeMaxZoom,
         });
         // Initialize the map
         const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
@@ -65,8 +73,8 @@ const Map = (props) => {
             pixelRatio: devicePixelRatio,
             fixedCenter: true,
         });
-        // Render street labels and road signs as well as additional pois as vector data
         if (defaultLayerMap.overlayLayer) {
+            // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data
             hereMap.addLayer(defaultLayerMap.overlayLayer);
         }
         setMapInitialized(true);
@@ -76,11 +84,16 @@ const Map = (props) => {
         if (!disableMapEvents) {
             hereMapEvents = new H.mapevents.MapEvents(hereMap);
         }
-        // Enable map interaction (pan, zoom, pinch-to-zoom)
         if (!(disableMapEvents || disableBehavior)) {
             hereBehavior = new H.mapevents.Behavior(hereMapEvents);
             // @ts-ignore-next-line
             hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+            if (disableZoomMomentum) {
+                // Disable the inertia that occurs on WebGL maps when scrolling/zooming.
+                // This resulted in a very high scroll sensitivity.
+                // @ts-ignore-next-line
+                hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);
+            }
         }
         addEventListenerMap(hereMap, eventListenerMap, hereMap);
         const hereUi = getHereUi(hereMap, defaultLayers, showScaleBar, language);
@@ -102,6 +115,8 @@ const Map = (props) => {
                 baseLayer,
                 activeLayers,
                 showCluster,
+                minZoom,
+                maxZoom: safeMaxZoom,
             },
         });
         // If the base layer changed, re-add all previous objects again,
@@ -118,7 +133,7 @@ const Map = (props) => {
                 hereMap.dispose();
             }
         };
-    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer]);
+    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);
     const isDarkMode = useDarkMode();
     useEffect(() => {
         // Toggle night map only if current map type is default

package/components/map/components/constants.d.ts

@@ -15,3 +15,5 @@ export declare const ENGINE_TYPE_HARP: any;
 export declare const ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
 export declare const DEFAULT_TILE_SIZE = 512;
 export declare const DEFAULT_RASTER_LAYER_FORMAT = "png";
+export declare const DEFAULT_MIN_ZOOM = 3;
+export declare const DEFAULT_MAX_ZOOM = 20;

package/components/map/components/constants.js

@@ -12,7 +12,10 @@ export const TILE_SIZE = 256;
 export const TILE_TYPE = 'maptile';
 export const NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 // @ts-ignore-next-line
+// biome-ignore lint/complexity/useLiteralKeys: <explanation>
 export const ENGINE_TYPE_HARP = H.Map.EngineType['HARP'];
 export const ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
 export const DEFAULT_TILE_SIZE = 512;
 export const DEFAULT_RASTER_LAYER_FORMAT = 'png'; // 'jpeg';
+export const DEFAULT_MIN_ZOOM = 3;
+export const DEFAULT_MAX_ZOOM = 20;

package/components/map/components/features/basics/InfoBubble.js

@@ -1,4 +1,4 @@
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React, { useEffect } from 'react';
 import ReactDomServer from 'react-dom/server';
 import noop from 'lodash/fp/noop';

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useState } from 'react';
 import { useMapContext } from '../../../MapContext';
 import { MAP_LAYER_INCIDENTS } from '../../../constants';

package/components/map/utils/mapTypes.d.ts

@@ -57,6 +57,7 @@ export type MapProps = {
     boundingBox?: BoundingBox;
     disableMapEvents?: boolean;
     disableBehavior?: boolean;
+    disableZoomMomentum?: boolean;
     eventListenerMap?: EventListenerMap;
     hideMapSettings?: boolean;
     hideClusterSettings?: boolean;
@@ -76,6 +77,8 @@ export type MapProps = {
     zoomAnimation?: boolean;
     enableWebGL?: boolean;
     enableDevicePixelRatio?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
     children?: React.ReactNode | ((api: MapApi, incidents?: MapIncidents) => React.ReactNode);
 };
 export type MapApi = {
@@ -93,6 +96,8 @@ export type MapApi = {
         baseLayer?: MapType;
         activeLayers?: MapLayer[];
         showCluster?: boolean;
+        minZoom?: number;
+        maxZoom?: number;
     };
 };
 export type MapIncidents = {

package/components/map/utils/rendering.d.ts

@@ -2,7 +2,7 @@ import type { MapCredentials, MapType } from './mapTypes';
 export declare const getPPI: () => 100 | 200;
 export declare const isVectorBased: (enableWebGL: boolean, baseLayer: MapType) => boolean;
 export declare const getPlatform: (credentials: MapCredentials) => H.service.Platform;
-export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType) => H.map.layer.TileLayer;
+export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType, minZoom: number, maxZoom: number) => H.map.layer.TileLayer;
 export declare const getBaseRasterTileService: (platform: H.service.Platform, style: string, features: string, lang: string) => any;
 export declare const getEngineType: (baseLayerName: string, enableWebGL: boolean) => any;
 export type BaseLayer = {
@@ -13,8 +13,11 @@ export type BaseLayer = {
     engineType: H.Map.EngineType;
     language: string;
     vehicleRestrictions: boolean;
+    minZoom: number;
+    maxZoom: number;
 };
-export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }: BaseLayer) => {
+export type BaseLayerResponse = {
     baseLayer: H.map.layer.Layer;
     overlayLayer?: H.map.layer.Layer;
 };
+export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }: BaseLayer) => BaseLayerResponse;

package/components/map/utils/rendering.js

@@ -10,15 +10,19 @@ export const getPlatform = (credentials) =>
 // Initiate and authenticate your connection to the HERE platform:
 new H.service.Platform({
     apikey: credentials.apikey ?? '',
-    useHTTPS: location.protocol === 'https:' ? true : false,
+    useHTTPS: location.protocol === 'https:',
 });
-export const getBaseTileLayer = (rasterTileService, engineType) => {
+export const getBaseTileLayer = (rasterTileService, engineType, minZoom, maxZoom) => {
     // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
     const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
         engineType,
         tileSize: 512,
     });
-    return new H.map.layer.TileLayer(rasterTileProvider);
+    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
+    // force the tile layer minimum zoom (furthest away possible) and maximum zoom (nearest) to the desired level
+    rasterTileLayer.setMin(minZoom);
+    rasterTileLayer.setMax(maxZoom);
+    return rasterTileLayer;
 };
 export const getBaseRasterTileService = (platform, style, features, lang) => {
     // @ts-ignore-next-line "getRasterTileService" is newer that the types
@@ -42,79 +46,82 @@ export const getEngineType = (baseLayerName, enableWebGL) => {
             return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
     }
 };
-export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }) => {
+export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }) => {
     const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';
     const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;
     if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {
-        // const rasterTileService = platform?.getRasterTileService({
-        //     format: 'png', // 'png', // or jpg, png8
-        //     queryParams: {
-        //         lang: 'en',
-        //         ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
-        //         // style: 'explore.day',
-        //         features: 'environmental_zones:all',
-        //     },
-        // });
-        // const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
-        //     engineType: enableWebGL ? H.Map.EngineType['HARP'] : H.Map.EngineType['P2D'],
-        //     tileSize: 512,
-        // });
-        // const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
-        // const envLayer = rasterTileLayer;
-        // // create a service that calls the custom endpoint
-        // const service = platform.getOMVService({ path: 'v2/vectortiles/core/mc' });
-        // // create a provider and a layer that use the custom service and a custom style
-        // const provider = new H.service.omv.Provider(
-        //     service,
-        //     new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml')
-        // );
-        // const layer = new H.map.layer.TileLayer(provider, { max: 22 });
+        defaultLayers?.vector.normal.map.setMin(minZoom);
+        defaultLayers?.vector.normal.map.setMax(maxZoom);
         return {
             baseLayer: defaultLayers?.vector.normal.map,
-            // baseLayer: layer,
-            // overlayLayer: envLayer,
         };
     }
     switch (baseLayerName) {
         case MAP_TYPE_SATELLITE: {
             if (enableWebGL) {
+                // This is a workaround for setting the min and max zoom limit for satellite map
+                // since the setMin/setMax cannot be set on the "defaultLayers.hybrid.liteday.raster".
+                // The HERE support suggests to create a hybrid layer for that and set the zoom limits
+                // on the two layers.
+                const hybridStyleConfig = {
+                    base: {
+                        style: 'oslo',
+                        scheme: 'hybrid.day',
+                    },
+                };
+                let baseLayer;
+                let overlayLayer;
+                // This method creates hybrid map layers. A hybrid map consists of raster satellite base layer and vector layers on top.
+                // Layers created by this method can be used only when the Map is instantiated with H.Map.EngineType.HARP engineType.
+                // See https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.service.Platform_4.html#createHybridLayers
+                // @ts-ignore-next-line
+                platform.createHybridLayers(hybridStyleConfig, (layers) => {
+                    layers.raster.setMin(minZoom);
+                    layers.raster.setMax(maxZoom);
+                    layers.vector.setMin(minZoom);
+                    layers.vector.setMax(maxZoom);
+                    baseLayer = layers.raster;
+                    overlayLayer = layers.vector;
+                }, console.error);
                 return {
-                    // @ts-ignore-next-line "hybrid.liteday.raster" is newer that the types
-                    baseLayer: defaultLayers.hybrid.liteday.raster,
-                    // @ts-ignore-next-line "hybrid.day.vector" is newer that the types
-                    overlayLayer: defaultLayers.hybrid.day.vector,
+                    baseLayer,
+                    overlayLayer,
                 };
             }
             return {
-                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.satellite.day', features, language), engineType),
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.satellite.day', features, language), engineType, minZoom, maxZoom),
             };
         }
         case MAP_TYPE_TERRAIN: {
             return {
-                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'topo.day', features, language), engineType),
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'topo.day', features, language), engineType, minZoom, maxZoom),
             };
         }
         case MAP_TYPE_FLEET_STYLE: {
             return {
-                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'logistics.day', features, language), ENGINE_TYPE_P2D),
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'logistics.day', features, language), ENGINE_TYPE_P2D, minZoom, maxZoom),
             };
         }
         case MAP_TYPE_NIGHT: {
             if (enableWebGL) {
+                // @ts-ignore-next-line "setMin" is working on "vector.normal.mapnight"
+                defaultLayers?.vector.normal.mapnight.setMin(minZoom);
+                // @ts-ignore-next-line "setMax" is working on "vector.normal.mapnight"
+                defaultLayers?.vector.normal.mapnight.setMax(maxZoom);
                 return {
-                    // @ts-ignore-next-line "vector.normal.mapnight" is newer that the types
+                    // @ts-ignore-next-line "vector.normal.mapnight" is newer than the types
                     baseLayer: defaultLayers.vector.normal.mapnight,
                 };
             }
             return {
-                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.night', features, language), engineType),
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.night', features, language), engineType, minZoom, maxZoom),
             };
         }
         default: {
             // As a replacement for "defaultLayers?.raster.normal.map" which uses the old and deprecated
             // H.service.MapTileService, we use the Raster Tile Service v3 instead
             return {
-                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.day', features, language), engineType),
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.day', features, language), engineType, minZoom, maxZoom),
             };
         }
     }

package/components/menuItems/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/notification/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import { toast, Slide } from 'react-toastify';
 export const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;

package/components/overlay/OverlayTrigger.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
@@ -32,7 +32,7 @@ const OverlayTrigger = (props) => {
     const handleShow = () => {
         timeout.clear();
         hoverStateRef.current = 'show';
-        if (typeof delay === 'number' || !delay?.show) {
+        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {
             setShow(true);
             return;
         }
@@ -53,7 +53,7 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'hide') {
                 setShow(false);
             }
-        }, typeof delay === 'number' ? delay : delay?.hide);
+        }, delay?.hide);
     };
     const handleFocus = useCallback((...args) => {
         handleShow();

package/components/saveableInput/SaveableDateInput.d.ts

@@ -0,0 +1,83 @@
+import { type HTMLAttributes } from 'react';
+import type { Moment } from 'moment';
+import { type DatePickerProps } from '../datepicker/DatePicker';
+export type SaveableDateInputProps = {
+    /**
+     * The input placeholder.
+     */
+    placeholder?: string;
+    /**
+     * The actual input value.
+     */
+    value?: Date | Moment | string;
+    /**
+     * Used to control the save button from the outside to disable it in case
+     * the entered value is not valid.
+     *
+     * @default true
+     */
+    isValid?: boolean;
+    /**
+     * Callback function triggered when the value changes and is saved.
+     * @param value
+     * @param previousValue
+     * @returns
+     */
+    onValueChanged?: (value: Moment | string, previousValue: Moment | string | Date) => void;
+    /**
+     * Callback function that gets triggered on every input change. Use this to control the component
+     * or when implementing key validation.
+     * @param keyValue the key value that has been entered
+     * @returns
+     */
+    onInputChange?: (value: Moment | string, isValid: boolean) => void;
+    /**
+     * Callback function that gets triggered when the input is in edit mode. Use this
+     * to control the component and to handle the previous value on the outside.
+     * @returns
+     */
+    onEnterEdit?: () => void;
+    /**
+     * Callback function that gets triggered when edit mode is exited (either saved or cancelled).
+     * @param wasSaved - true if value was saved, false if cancelled/reset
+     * @returns
+     */
+    onExitEdit?: (wasSaved: boolean) => void;
+    /**
+     * Callback function that gets triggered when the user aborts the edit mode. Use this
+     * to control the component and handle the resetting of previous value on the outside.
+     * @returns
+     */
+    onCancel?: () => void;
+    /**
+     * Behavior when trying to exit edit mode with invalid input:
+     * - 'stay-open': Keep edit mode open until valid input is provided
+     * - 'reset-and-close': Close edit mode and reset to initial value
+     *
+     * @default 'stay-open'
+     */
+    invalidExitBehavior?: 'stay-open' | 'reset-and-close';
+    /**
+     * Defines the button style: `default` or `primary`.
+     */
+    buttonStyle?: 'primary' | 'default';
+    /**
+     * Additional HTML attributes to be set on the input element.
+     */
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    datePickerProps?: DatePickerProps;
+    /**
+     * Disables the component so the user cannot enter the edit mode.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the input itself.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const SaveableDateInput: (props: SaveableDateInputProps) => import("react/jsx-runtime").JSX.Element;
+export default SaveableDateInput;

package/components/saveableInput/SaveableDateInput.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/fp/noop';
+import Button from '../../Button';
+import DatePicker from '../datepicker/DatePicker';
+import useIsFocusWithin from '../../hooks/useIsFocusWithin';
+import useEsc from '../../hooks/useEsc';
+const DEFAULT_BUTTON_STYLE = 'primary';
+// Validate date outside the component (via form library) if controlled usage
+// Use as controlled component: value, is Valid, and change callback
+// - if is valid, on save, call callback "onValueChanged"
+// - if not valid, keep edit mode open, outside is showing error message
+// - close edit mode only if date is valid - or close edit mode and reset to initial value -> customizable via prop
+// Keep picker open until user has clicked save, otherwise he might forget to click save if the dropdown closes automatically
+const SaveableDateInput = (props) => {
+    const { placeholder, value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, // for controlled usage
+    onEnterEdit = noop, onExitEdit = noop, onCancel = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, invalidExitBehavior = 'stay-open', datePickerProps = {}, disabled = false, className, ...remainingProps } = props;
+    // if callback is provided, assume it is controlled case
+    const isControlledCase = onInputChange !== undefined;
+    const [inputValue, setInputValue] = useState(externalValue);
+    const [editInput, setEditInput] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    const buttonRef = useRef(null);
+    const initialInputValueRef = useRef(inputValue);
+    useIsFocusWithin({
+        ref: wrapperRef,
+        onFocusWithin: () => {
+            setIsFocused(true);
+        },
+        onBlurWithin: () => {
+            setIsFocused(false);
+        },
+    });
+    // Handle escape key to cancel edit mode
+    useEsc(() => {
+        if (isFocused && editInput) {
+            handleCancelEdit();
+        }
+    });
+    // Update internal state in a controlled environment
+    const [previousExternalValue, setPreviousExternalValue] = useState(externalValue);
+    if (previousExternalValue !== externalValue) {
+        setInputValue(externalValue);
+        setPreviousExternalValue(externalValue);
+        // Update initial value ref when external value changes while not in edit mode
+        if (!editInput) {
+            initialInputValueRef.current = externalValue;
+        }
+    }
+    const handleToggleInput = () => {
+        if (!editInput) {
+            // Enter edit mode
+            setEditInput(true);
+            initialInputValueRef.current = inputValue;
+            // open the dropdown
+            setIsPickerOpen(true);
+            onEnterEdit();
+        }
+        else {
+            // Try to exit edit mode
+            handleSaveAttempt();
+        }
+    };
+    const handleSaveAttempt = () => {
+        if (isValid) {
+            // Save the value (only if valid)
+            setEditInput(false);
+            onValueChanged(inputValue, initialInputValueRef.current);
+            onExitEdit(true);
+            // close the dropdown
+            setIsPickerOpen(false);
+        }
+        else {
+            // Handle invalid input based on behavior setting
+            if (invalidExitBehavior === 'reset-and-close') {
+                handleCancelEdit();
+            }
+            // If 'stay-open', do nothing - keep edit mode open
+        }
+    };
+    const handleCancelEdit = () => {
+        setEditInput(false);
+        // Reset to initial value
+        if (isControlledCase) {
+            // In controlled mode, trigger change to reset to initial value
+            onInputChange(initialInputValueRef.current, true);
+        }
+        else {
+            setInputValue(initialInputValueRef.current);
+        }
+        // Close the dropdown
+        setIsPickerOpen(false);
+        onCancel();
+        onExitEdit(false);
+    };
+    const handleDateChange = (value, isValid) => {
+        if (isControlledCase) {
+            onInputChange(value, isValid);
+        }
+        else {
+            setInputValue(value);
+        }
+    };
+    const handleCloseDropdown = () => setIsPickerOpen(false);
+    const wrapperClasses = classNames('form-group', className);
+    const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
+    const dateInputClasses = classNames('margin-0 width-100pct', inputClassName);
+    // Button should be disabled if:
+    // - Component is disabled, OR
+    // - In edit mode and invalid input (and behavior is stay-open)
+    const disableButton = disabled || (editInput && !isValid && invalidExitBehavior === 'stay-open');
+    return (_jsx("div", { ref: wrapperRef, ...remainingProps, className: wrapperClasses, children: _jsxs("div", { className: 'input-group', children: [_jsx(DatePicker, { ...datePickerProps, open: isPickerOpen, className: dateInputClasses, inputProps: {
+                        ...inputProps,
+                        placeholder,
+                        disabled: !editInput,
+                        style: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+                    }, value: inputValue, onChange: handleDateChange, onClose: handleCloseDropdown }), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { ref: buttonRef, bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }) }));
+};
+export default SaveableDateInput;

package/components/selects/BaseSelectDropdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';