@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/listMenu/ListMenuGroup.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ListMenuHeader_1 = tslib_1.__importDefault(require("./ListMenuHeader"));
 const ListMenuGroup = ({ menuGroup, className }) => {
     if (!menuGroup.navItems.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `ListMenuGroup ${className}` }, { children: [(0, jsx_runtime_1.jsx)(ListMenuHeader_1.default, Object.assign({}, menuGroup)), menuGroup.navItems.map(item => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)({ disabled: item.disabled, subitem: item.isSubItem }) }, { children: item.item }), item.key)))] })));
+    return ((0, jsx_runtime_1.jsxs)("ul", { className: `ListMenuGroup ${className}`, children: [(0, jsx_runtime_1.jsx)(ListMenuHeader_1.default, { ...menuGroup }), menuGroup.navItems.map(item => ((0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)({ disabled: item.disabled, subitem: item.isSubItem }), children: item.item }, item.key)))] }));
 };
 exports.default = ListMenuGroup;

package/lib/es/components/listMenu/ListMenuHeader.d.ts

@@ -1,8 +1,10 @@
 import { type ReactNode } from 'react';
 type ListMenuHeaderProps = {
     group?: string | ReactNode;
+    badge?: string | ReactNode;
+    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';
     groupNavItem?: string | ReactNode;
     className?: string;
 };
-declare const ListMenuHeader: ({ group, groupNavItem, className }: ListMenuHeaderProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ListMenuHeader: ({ group, badge, badgeType, groupNavItem, className }: ListMenuHeaderProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ListMenuHeader;

package/lib/es/components/listMenu/ListMenuHeader.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
-const ListMenuHeader = ({ group, groupNavItem, className = '' }) => {
+const ListMenuHeader = ({ group, badge, badgeType = 'muted', groupNavItem, className = '' }) => {
     if (!group && !groupNavItem) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'ListMenuHeader' }, { children: groupNavItem ? groupNavItem : (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: group })) })));
+    return ((0, jsx_runtime_1.jsxs)("li", { className: 'ListMenuHeader', children: [groupNavItem ? groupNavItem : (0, jsx_runtime_1.jsx)("span", { className: className, children: group }), badge && (0, jsx_runtime_1.jsx)("span", { className: `badge badge-${badgeType}`, children: badge })] }));
 };
 exports.default = ListMenuHeader;

package/lib/es/components/loadMore/LoadMoreButton.js

@@ -3,15 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadMoreButton = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const LoadMoreProgress_1 = require("./LoadMoreProgress");
 const LoadMoreButton = (props) => {
-    const { loaded = 0, total = 100, onLoadMore = () => { }, loadMoreMessage = '', noMoreMessage = '', isInteractive = true, progressBarStyle, className = '' } = props, remainingProps = tslib_1.__rest(props, ["loaded", "total", "onLoadMore", "loadMoreMessage", "noMoreMessage", "isInteractive", "progressBarStyle", "className"]);
+    const { loaded = 0, total = 100, onLoadMore = () => { }, loadMoreMessage = '', noMoreMessage = '', isInteractive = true, progressBarStyle, className = '', ...remainingProps } = props;
     const wrapperClassNames = (0, classnames_1.default)('LoadMoreButton', 'align-items-center', 'display-flex', 'justify-content-center', 'margin-top-25', 'margin-bottom-25', 'non-printable', className);
     const hasMoreToLoad = loaded > 0 && total > 0 && loaded < total;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'min-width-150' }, { children: [(0, jsx_runtime_1.jsx)(LoadMoreProgress_1.LoadMoreProgress, { loaded: loaded, total: total, progressBarStyle: progressBarStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-center' }, { children: [hasMoreToLoad && isInteractive && ((0, jsx_runtime_1.jsxs)("button", Object.assign({ className: 'btn btn-link padding-right-20 margin-top--5', type: 'button', onClick: onLoadMore }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-down' }), loadMoreMessage] }))), hasMoreToLoad && !isInteractive && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: loadMoreMessage }))), !hasMoreToLoad && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: noMoreMessage }))] }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: wrapperClassNames, children: (0, jsx_runtime_1.jsxs)("div", { className: 'min-width-150', children: [(0, jsx_runtime_1.jsx)(LoadMoreProgress_1.LoadMoreProgress, { loaded: loaded, total: total, progressBarStyle: progressBarStyle }), (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex justify-content-center', children: [hasMoreToLoad && isInteractive && ((0, jsx_runtime_1.jsxs)("button", { className: 'btn btn-link padding-right-20 margin-top--5', type: 'button', onClick: onLoadMore, children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-arrow-down' }), loadMoreMessage] })), hasMoreToLoad && !isInteractive && ((0, jsx_runtime_1.jsx)("span", { className: 'padding-top-4 padding-bottom-10', children: loadMoreMessage })), !hasMoreToLoad && (0, jsx_runtime_1.jsx)("span", { className: 'padding-top-4 padding-bottom-10', children: noMoreMessage })] })] }) }));
 };
 exports.LoadMoreButton = LoadMoreButton;
 exports.default = exports.LoadMoreButton;

package/lib/es/components/loadMore/LoadMoreProgress.js

@@ -18,7 +18,7 @@ const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHIT
     const progressBarClassName = (0, classnames_1.default)('progress-bar', progressBarStyle === STYLE.GRAY &&
         width !== '100%' &&
         'border border-right-only border-color-white border-width-2');
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'text-center margin-bottom-3' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-medium' }, { children: loaded })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-left-5 margin-right-5' }, { children: "/" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-medium' }, { children: total }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: progressClassName }, { children: (0, jsx_runtime_1.jsx)("div", { className: progressBarClassName, style: { width } }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'text-center margin-bottom-3', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: loaded }), (0, jsx_runtime_1.jsx)("span", { className: 'margin-left-5 margin-right-5', children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: total })] }), (0, jsx_runtime_1.jsx)("div", { className: progressClassName, children: (0, jsx_runtime_1.jsx)("div", { className: progressBarClassName, style: { width } }) })] }));
 };
 exports.LoadMoreProgress = LoadMoreProgress;
 exports.default = exports.LoadMoreProgress;

package/lib/es/components/map/components/Map.js

@@ -31,7 +31,7 @@ const Map = (props) => {
     const language = lang.split('-')[0];
     (0, react_1.useEffect)(() => {
         let allMapObjects = [];
-        if (api === null || api === void 0 ? void 0 : api.map) {
+        if (api?.map) {
             allMapObjects = api.map.getObjects();
             console.debug('re-initialize here map');
         }
@@ -163,12 +163,10 @@ const Map = (props) => {
     // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors
     // takes time.
     const handleMapInteractionStart = () => {
-        var _a;
-        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.add('pointer-events-none');
+        document.querySelector('.AssetTree')?.classList.add('pointer-events-none');
     };
     const handleMapInteractionEnd = () => {
-        var _a;
-        (_a = document.querySelector('.AssetTree')) === null || _a === void 0 ? void 0 : _a.classList.remove('pointer-events-none');
+        document.querySelector('.AssetTree')?.classList.remove('pointer-events-none');
     };
     const style = {};
     if (height) {
@@ -178,7 +176,7 @@ const Map = (props) => {
         style.width = width;
     }
     const autoHeightClass = (0, isEmpty_1.default)(style) ? 'height-100pct' : '';
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`, style: style, ref: mapRef, onTouchStart: handleMapInteractionStart, onTouchEnd: handleMapInteractionEnd, onMouseEnter: handleMapInteractionStart, onMouseOut: handleMapInteractionEnd, onBlur: handleMapInteractionEnd }, { children: isMapInitialized && api && ((0, jsx_runtime_1.jsxs)(MapContext_1.MapContext.Provider, Object.assign({ value: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `Map position-relative map-type-${baseLayer.toLowerCase()} ${autoHeightClass}`, style: style, ref: mapRef, onTouchStart: handleMapInteractionStart, onTouchEnd: handleMapInteractionEnd, onMouseEnter: handleMapInteractionStart, onMouseOut: handleMapInteractionEnd, onBlur: handleMapInteractionEnd, children: isMapInitialized && api && ((0, jsx_runtime_1.jsxs)(MapContext_1.MapContext.Provider, { value: {
                 api,
                 language,
                 enableWebGL,
@@ -193,7 +191,7 @@ const Map = (props) => {
                 mapSettingsTooltip,
                 onIncidentsChange,
                 devicePixelRatio,
-            } }, { children: [(0, jsx_runtime_1.jsx)(MapPosition_1.default, { api: api, boundingBox: boundingBox, center: center, zoomAnimation: zoomAnimation }), (0, jsx_runtime_1.jsx)(MapSize_1.default, { api: api }), (0, jsx_runtime_1.jsx)(MapZoom_1.default, { zoom: zoom, hideZoomButtons: disableBehavior, onZoomIn: onZoomIn, onZoomOut: onZoomOut, zoomAnimation: zoomAnimation }), mapSettings && mapSettings, (0, jsx_runtime_1.jsx)(MapOverlayLayers_1.default, { layers: activeLayers }), (0, jsx_runtime_1.jsx)(MapElements_1.default, Object.assign({ api: api }, { children: children }))] }))) })));
+            }, children: [(0, jsx_runtime_1.jsx)(MapPosition_1.default, { api: api, boundingBox: boundingBox, center: center, zoomAnimation: zoomAnimation }), (0, jsx_runtime_1.jsx)(MapSize_1.default, { api: api }), (0, jsx_runtime_1.jsx)(MapZoom_1.default, { zoom: zoom, hideZoomButtons: disableBehavior, onZoomIn: onZoomIn, onZoomOut: onZoomOut, zoomAnimation: zoomAnimation }), mapSettings && mapSettings, (0, jsx_runtime_1.jsx)(MapOverlayLayers_1.default, { layers: activeLayers }), (0, jsx_runtime_1.jsx)(MapElements_1.default, { api: api, children: children })] })) }));
 };
 Map.TYPE_DEFAULT = constants_1.MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = constants_1.MAP_TYPE_FLEET_STYLE;

package/lib/es/components/map/components/MapContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MapApi, MapIncidents, MapLayer, MapType } from '../utils/mapTypes';
 export type MapContextType = {
     api: MapApi;

package/lib/es/components/map/components/MapElements.js

@@ -18,6 +18,6 @@ const MapElements = (props) => {
     if (!children) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapElements' }, { children: (0, isFunction_1.default)(children) ? children(api) : enrichChildrenWithApi(children, api) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'MapElements', children: (0, isFunction_1.default)(children) ? children(api) : enrichChildrenWithApi(children, api) }));
 };
 exports.default = MapElements;

package/lib/es/components/map/components/MapPosition.js

@@ -5,22 +5,20 @@ const MapPosition = (props) => {
     const { api, boundingBox, center, zoomAnimation = false } = props;
     // Update BoundingBox from outside
     (0, react_1.useEffect)(() => {
-        var _a;
         if (api && boundingBox) {
             const { top, left, bottom, right } = boundingBox;
-            (_a = api.map) === null || _a === void 0 ? void 0 : _a.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);
+            api.map?.getViewModel().setLookAtData({ bounds: new H.geo.Rect(top, left, bottom, right) }, zoomAnimation);
         }
     }, [boundingBox]);
     // Update Lat & Lng from outside if value is different
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (!(api && center)) {
             return;
         }
-        const currentMapCenter = (_a = api.utils) === null || _a === void 0 ? void 0 : _a.getCenter();
+        const currentMapCenter = api.utils?.getCenter();
         if (currentMapCenter) {
             if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
-                (_b = api.utils) === null || _b === void 0 ? void 0 : _b.setCenter(center, zoomAnimation);
+                api.utils?.setCenter(center, zoomAnimation);
             }
         }
     }, [center]);

package/lib/es/components/map/components/MapSize.js

@@ -7,14 +7,14 @@ const useEvent_1 = tslib_1.__importDefault(require("../../../useEvent"));
 const RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
 const MapSize = ({ api }) => {
     (0, react_1.useEffect)(() => {
-        const resizeMap = () => { var _a; return (_a = api === null || api === void 0 ? void 0 : api.map) === null || _a === void 0 ? void 0 : _a.getViewPort().resize(); };
+        const resizeMap = () => api?.map?.getViewPort().resize();
         window.addEventListener('resize', resizeMap, { passive: true });
         return () => {
             window.removeEventListener('resize', resizeMap);
         };
-    }, [api === null || api === void 0 ? void 0 : api.map]);
+    }, [api?.map]);
     // Add a orientationchange listener to make sure that the map occupies the whole container on mobile
-    (0, useEvent_1.default)('orientationchange', (0, throttle_1.default)(RESIZE_THROTTLE, () => { var _a; return (_a = api === null || api === void 0 ? void 0 : api.map) === null || _a === void 0 ? void 0 : _a.getViewPort().resize(); }), { passive: true }, window);
+    (0, useEvent_1.default)('orientationchange', (0, throttle_1.default)(RESIZE_THROTTLE, () => api?.map?.getViewPort().resize()), { passive: true }, window);
     return null;
 };
 exports.default = MapSize;

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

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { MapType } from '../utils/mapTypes';
 export declare const MAP_TYPE_DEFAULT: MapType;
 export declare const MAP_TYPE_FLEET_STYLE: MapType;
@@ -13,6 +12,6 @@ export declare const TILE_SIZE = 256;
 export declare const TILE_TYPE = "maptile";
 export declare const NO_CREDENTIALS_ERROR_MESSAGE = "Cannot instantiate the Map. Missing credentials property.";
 export declare const ENGINE_TYPE_HARP: any;
-export declare const ENGINE_TYPE_P2D: H.Map.EngineType;
+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";

package/lib/es/components/map/components/features/ContextMenu.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="heremaps" />
-/// <reference types="react" />
 import type { ContextMenuItemProps as ContextMenuItem } from './ContextMenuItem';
 import type { Position } from '../../utils/mapTypes';
 export declare const isContextMenuEvent: (event: H.mapevents.ContextMenuEvent) => boolean;

package/lib/es/components/map/components/features/ContextMenu.js

@@ -76,8 +76,7 @@ exports.isContextMenuEvent = isContextMenuEvent;
 // source_layer: "buildings", "landuse", "pois", "roads", "water", "places"
 // source_name: 'H-107';
 const isMapTarget = (event, map) => {
-    var _a, _b, _c;
-    return event.target === map || ((_c = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.source_name) === null || _c === void 0 ? void 0 : _c.startsWith('H-'));
+    return event.target === map || event.target?.data?.source_name?.startsWith('H-');
 };
 exports.isMapTarget = isMapTarget;
 const ContextMenu = (props) => {
@@ -91,7 +90,7 @@ const ContextMenu = (props) => {
     (0, react_1.useLayoutEffect)(() => {
         if (menuItems && hereMap) {
             // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
-            const hasNoEventItems = (0, isEmpty_1.default)(contextMenuEvent === null || contextMenuEvent === void 0 ? void 0 : contextMenuEvent.items);
+            const hasNoEventItems = (0, isEmpty_1.default)(contextMenuEvent?.items);
             // Add the context menu item to the target event and not to the map event itself
             // as every element on the map need to have context menu items added to the event they
             // are triggered from
@@ -119,7 +118,7 @@ const ContextMenu = (props) => {
         // it is a number
         const viewportX = event.viewportX;
         // Get geo coordinates from the screen coordinates.
-        const coord = targetPositionRef.current || (hereMap === null || hereMap === void 0 ? void 0 : hereMap.screenToGeo(viewportX, event.viewportY));
+        const coord = targetPositionRef.current || hereMap?.screenToGeo(viewportX, event.viewportY);
         if (coord) {
             onOpen(coord);
         }

package/lib/es/components/map/components/features/ContextMenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { Position } from '../../utils/mapTypes';
 export type ContextMenuItemProps = {
     label: string;

package/lib/es/components/map/components/features/MapSettings.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type MapSettingsProps = {
     options?: JSX.Element[];
     className?: string;

package/lib/es/components/map/components/features/MapSettings.js

@@ -16,32 +16,31 @@ const MapSettings = (props) => {
     const { options, className = '' } = props;
     const { baseLayer, activeLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = (0, MapContext_1.useMapContext)();
     const mapSettingsClasses = (0, classnames_1.default)('MapSettingsWrapper', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: mapSettingsClasses }, { children: (0, map_1.default)(option => {
-            var _a, _b, _c, _d;
+    return ((0, jsx_runtime_1.jsx)("div", { className: mapSettingsClasses, children: (0, map_1.default)(option => {
             if (isMapTypeSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (_a = option === null || option === void 0 ? void 0 : option.key) !== null && _a !== void 0 ? _a : crypto.randomUUID(),
+                    key: option?.key ?? crypto.randomUUID(),
                     mapType: baseLayer,
                     onMapTypeChange,
                 });
             }
             if (isMapLayerSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (_b = option === null || option === void 0 ? void 0 : option.key) !== null && _b !== void 0 ? _b : crypto.randomUUID(),
+                    key: option?.key ?? crypto.randomUUID(),
                     activeBuiltinLayers: activeLayers,
                     onMapLayerChange,
                 });
             }
             if (isMapClusterSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (_c = option === null || option === void 0 ? void 0 : option.key) !== null && _c !== void 0 ? _c : crypto.randomUUID(),
+                    key: option?.key ?? crypto.randomUUID(),
                     showCluster,
                     onShowClusterChange,
                 });
             }
             return react_1.default.cloneElement(option, {
-                key: (_d = option === null || option === void 0 ? void 0 : option.key) !== null && _d !== void 0 ? _d : `MapSettingsOption_${crypto.randomUUID()}`,
+                key: option?.key ?? `MapSettingsOption_${crypto.randomUUID()}`,
             });
-        }, options) })));
+        }, options) }));
 };
 exports.default = MapSettings;

package/lib/es/components/map/components/features/MapZoom.js

@@ -10,28 +10,25 @@ const MapZoom = (props) => {
     const { api } = (0, MapContext_1.useMapContext)();
     // Update Zoom from outside if value is different
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         if (!api) {
             return;
         }
-        const currentMapZoom = (_a = api.utils) === null || _a === void 0 ? void 0 : _a.getZoom();
+        const currentMapZoom = api.utils?.getZoom();
         if (zoom && currentMapZoom !== zoom) {
-            (_b = api.utils) === null || _b === void 0 ? void 0 : _b.setZoom(zoom, zoomAnimation);
+            api.utils?.setZoom(zoom, zoomAnimation);
         }
     }, [zoom]);
     const handleZoomIn = () => {
-        var _a, _b, _c;
-        const currentZoom = (_b = (_a = api === null || api === void 0 ? void 0 : api.utils) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0;
+        const currentZoom = api?.utils?.getZoom() ?? 0;
         const newZoom = currentZoom + 1;
         onZoomIn(newZoom);
-        (_c = api === null || api === void 0 ? void 0 : api.utils) === null || _c === void 0 ? void 0 : _c.setZoom(newZoom, zoomAnimation);
+        api?.utils?.setZoom(newZoom, zoomAnimation);
     };
     const handleZoomOut = () => {
-        var _a, _b, _c;
-        const currentZoom = (_b = (_a = api === null || api === void 0 ? void 0 : api.utils) === null || _a === void 0 ? void 0 : _a.getZoom()) !== null && _b !== void 0 ? _b : 0;
+        const currentZoom = api?.utils?.getZoom() ?? 0;
         const newZoom = currentZoom - 1;
         onZoomOut(newZoom);
-        (_c = api === null || api === void 0 ? void 0 : api.utils) === null || _c === void 0 ? void 0 : _c.setZoom(newZoom, zoomAnimation);
+        api?.utils?.setZoom(newZoom, zoomAnimation);
     };
     if (hideZoomButtons) {
         return null;

package/lib/es/components/map/components/features/Route.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ArrowStyle } from './basics/Polyline';
 import type { Position } from '../../utils/mapTypes';
 import type { EventListenerMap } from '../../utils/eventHandling';
@@ -13,6 +12,7 @@ export declare const ROUTE_COLOR_DANGER = "#e22837";
 export declare const ROUTE_COLOR_WARNING = "#ff8e3c";
 export declare const ROUTE_COLOR_SUCCESS = "#5cb85c";
 export declare const ROUTE_COLOR_WHITE = "rgba(255, 255, 255, 1)";
+export declare const ARROW_COLOR_WARNING = "rgba(167, 83, 25, 1)";
 export type RouteStyle = {
     width?: number;
     color?: string;

package/lib/es/components/map/components/features/Route.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROUTE_COLOR_WHITE = exports.ROUTE_COLOR_SUCCESS = exports.ROUTE_COLOR_WARNING = exports.ROUTE_COLOR_DANGER = exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED = exports.DEFAULT_BORDER_STROKE_COLOR = exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = exports.DEFAULT_LINE_STROKE_COLOR_REDUCED = exports.DEFAULT_LINE_STROKE_COLOR = exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = exports.MISSING_POSITIONS_EXCEPTION_MSG = void 0;
+exports.ARROW_COLOR_WARNING = exports.ROUTE_COLOR_WHITE = exports.ROUTE_COLOR_SUCCESS = exports.ROUTE_COLOR_WARNING = exports.ROUTE_COLOR_DANGER = exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED = exports.DEFAULT_BORDER_STROKE_COLOR = exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = exports.DEFAULT_LINE_STROKE_COLOR_REDUCED = exports.DEFAULT_LINE_STROKE_COLOR = exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = exports.MISSING_POSITIONS_EXCEPTION_MSG = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -22,6 +22,7 @@ exports.ROUTE_COLOR_DANGER = '#e22837';
 exports.ROUTE_COLOR_WARNING = '#ff8e3c';
 exports.ROUTE_COLOR_SUCCESS = '#5cb85c';
 exports.ROUTE_COLOR_WHITE = 'rgba(255, 255, 255, 1)';
+exports.ARROW_COLOR_WARNING = 'rgba(167, 83, 25, 1)';
 const DEFAULT_WIDTH = 5;
 const DEFAULT_BORDER_WIDTH = 2;
 const defaultStyle = {
@@ -31,7 +32,10 @@ const defaultStyle = {
     borderColor: exports.DEFAULT_BORDER_STROKE_COLOR,
     isBorderIncludedInWidth: false,
 };
-const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE });
+const alternativeRouteStyle = {
+    ...defaultStyle,
+    color: exports.DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE,
+};
 const Route = (props) => {
     const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], customData, eventListenerMap, } = props;
     const [lineString, setLineString] = (0, react_1.useState)();
@@ -62,14 +66,29 @@ const Route = (props) => {
         setLineString(lineStringData);
     };
     const updateStyle = (updatedStyle, isReducedStyle, isRouteAlternativeStyle) => {
-        const mergedStyle = Object.assign(Object.assign({}, (isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle)), updatedStyle);
+        const mergedStyle = {
+            ...(isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle),
+            ...updatedStyle,
+        };
         const { color, width = DEFAULT_WIDTH, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
         setBorderWidth(isReducedStyle ? 0 : mergedBorderWidth);
         if (isBorderIncludedInWidth && mergedBorderWidth >= width) {
             throw new MapException_1.default(exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG);
         }
-        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? exports.DEFAULT_LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
-        setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setRouteStyle(new H.map.SpatialStyle({
+            strokeColor: isReducedStyle ? exports.DEFAULT_LINE_STROKE_COLOR_REDUCED : color,
+            lineWidth: isReducedStyle ? mergedBorderWidth + width : width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
+        setBorderStyle(new H.map.SpatialStyle({
+            strokeColor: isReduced ? exports.DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor,
+            lineWidth: mergedBorderWidth + width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
     };
     if (!lineString) {
         return null;

package/lib/es/components/map/components/features/basics/Circle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { Position } from '../../../utils/mapTypes';
 import type { EventListenerMap } from '../../../utils/eventHandling';
 export type CirclePosition = Position & Record<string, any>;

package/lib/es/components/map/components/features/basics/Circle.js

@@ -11,14 +11,12 @@ const Circle = (props) => {
     // The map instance may change due to rendering changes like webgl vs raster.
     // In this case, add the circle to the new map instance otherwise it will be gone.
     (0, react_1.useEffect)(() => {
-        var _a;
         const newCircle = new H.map.Circle(position, radius, { style, precision });
         setCircle(newCircle);
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newCircle);
+        api.map?.addObject(newCircle);
         return () => {
-            var _a, _b;
-            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newCircle)) {
-                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newCircle);
+            if (api.map?.getObjects().includes(newCircle)) {
+                api.map?.removeObject(newCircle);
             }
             newCircle.dispose();
         };

package/lib/es/components/map/components/features/basics/InfoBubble.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { MapApi, Position } from '../../../utils/mapTypes';
 export type InfoBubbleProps = {
     api: MapApi | undefined;

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

@@ -16,13 +16,12 @@ const InfoBubble = (props) => {
         }
     };
     (0, react_1.useEffect)(() => {
-        var _a, _b;
         let infoBubble;
-        if ((api === null || api === void 0 ? void 0 : api.map) && (api === null || api === void 0 ? void 0 : api.ui)) {
+        if (api?.map && api?.ui) {
             // Fix the position so the info bubble doesn't overlap the marker
             const screenPosition = api.map.geoToScreen(position);
-            screenPosition.x += (_a = markerOffset === null || markerOffset === void 0 ? void 0 : markerOffset.x) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET_X;
-            screenPosition.y += (_b = markerOffset === null || markerOffset === void 0 ? void 0 : markerOffset.y) !== null && _b !== void 0 ? _b : DEFAULT_OFFSET_Y;
+            screenPosition.x += markerOffset?.x ?? DEFAULT_OFFSET_X;
+            screenPosition.y += markerOffset?.y ?? DEFAULT_OFFSET_Y;
             infoBubble = new H.ui.InfoBubble(api.map.screenToGeo(screenPosition.x, screenPosition.y), {
                 onStateChange: handleStateChange,
                 content: react_1.default.isValidElement(content)
@@ -32,10 +31,9 @@ const InfoBubble = (props) => {
             api.ui.addBubble(infoBubble);
         }
         return () => {
-            var _a;
             if (infoBubble) {
                 try {
-                    (_a = api === null || api === void 0 ? void 0 : api.ui) === null || _a === void 0 ? void 0 : _a.removeBubble(infoBubble);
+                    api?.ui?.removeBubble(infoBubble);
                 }
                 catch (error) {
                     // silence error that is cased when switching map types and the bubble cannot be removed

package/lib/es/components/map/components/features/basics/Marker.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="heremaps" />
 import React from 'react';
 import { type EventListenerMap } from '../../../utils/eventHandling';
 import type { Position } from '../../../utils/mapTypes';
 export type MarkerIcon = string | React.ReactElement;
-export declare const isHMapIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => boolean;
+export declare const isHMapIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => icon is H.map.Icon;
 export declare const isDomMakerNeeded: (icon: MarkerIcon | H.map.DomIcon | undefined) => boolean;
-export declare const getOrCreateIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => H.map.DomIcon;
+export declare const getOrCreateIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => H.map.DomIcon | H.map.Icon;
 export type MarkerProps = {
     position: Position;
     icon?: MarkerIcon;

package/lib/es/components/map/components/features/basics/Marker.js

@@ -27,7 +27,6 @@ const getOrCreateIcon = (icon) => {
 };
 exports.getOrCreateIcon = getOrCreateIcon;
 const setupMarker = (props, api) => {
-    var _a;
     const { position, customData, icon, draggable, eventListenerMap } = props;
     const MarkerConstructor = (0, exports.isDomMakerNeeded)(icon) ? H.map.DomMarker : H.map.Marker;
     const marker = new MarkerConstructor(position, {
@@ -35,14 +34,13 @@ const setupMarker = (props, api) => {
     });
     marker.setData(customData);
     marker.draggable = !!draggable;
-    (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(marker);
+    api.map?.addObject(marker);
     (0, eventHandling_1.addEventListenerMap)(marker, eventListenerMap, api.map);
     return marker;
 };
 const destroyMarker = (marker, api) => {
-    var _a;
     (0, eventHandling_1.removeEventListenerMap)(marker);
-    if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(marker)) {
+    if (api.map?.getObjects().includes(marker)) {
         api.map.removeObject(marker);
     }
     marker.dispose();

package/lib/es/components/map/components/features/basics/Polygon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { Position } from '../../../utils/mapTypes';
 import type { EventListenerMap } from '../../../utils/eventHandling';
 export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';

package/lib/es/components/map/components/features/basics/Polygon.js

@@ -30,14 +30,12 @@ const Polygon = (props) => {
     const { api } = (0, MapContext_1.useMapContext)();
     const [polygon, setPolygon] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        var _a;
         const newPolygon = new H.map.Polygon(createGeometry(points), { style });
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newPolygon);
+        api.map?.addObject(newPolygon);
         setPolygon(newPolygon);
         return () => {
-            var _a, _b;
-            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newPolygon)) {
-                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newPolygon);
+            if (api.map?.getObjects().includes(newPolygon)) {
+                api.map?.removeObject(newPolygon);
             }
             newPolygon.dispose();
         };

package/lib/es/components/map/components/features/basics/Polyline.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import { type EventListenerMap } from '../../../utils/eventHandling';
 export declare const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: Polyline without geometry makes no sense";
 export declare const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: property geometry must be of type H.geo.LineString";

package/lib/es/components/map/components/features/basics/Polyline.js

@@ -21,7 +21,6 @@ const Polyline = (props) => {
         throw new MapException_1.default(exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);
     }
     (0, react_1.useEffect)(() => {
-        var _a;
         const lineGroup = new H.map.Group({ data: customData });
         const line = new H.map.Polyline(geometry, { style });
         if (hasArrows) {
@@ -29,14 +28,27 @@ const Polyline = (props) => {
             if ((0, rendering_1.isVectorBased)(enableWebGL, baseLayer)) {
                 // WebGL way - Create a patterned polyline
                 routeArrows = new H.map.Polyline(geometry, {
-                    style: Object.assign({ strokeColor: 'rgba(42, 55, 64, 1)', lineWidth: 5, lineDash: [1.8, 4], 
+                    style: {
+                        strokeColor: 'rgba(42, 55, 64, 1)',
+                        lineWidth: 5,
+                        lineDash: [1.8, 4],
                         // @ts-ignore-next-line - the types are outdated here
-                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW }, arrowStyle),
+                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
+                        ...arrowStyle,
+                    },
                 });
             }
             else {
                 // Pixel map way - Create a patterned polyline
-                const defaultArrowStyle = Object.assign({ lineWidth: 2, fillColor: 'rgba(42, 55, 64, 1)', strokeColor: 'rgba(0, 0, 0, 0.8)', lineDash: [0, 4], lineTailCap: 'arrow-tail', lineHeadCap: 'arrow-head' }, arrowStyle);
+                const defaultArrowStyle = {
+                    lineWidth: 2,
+                    fillColor: 'rgba(42, 55, 64, 1)',
+                    strokeColor: 'rgba(0, 0, 0, 0.8)',
+                    lineDash: [0, 4],
+                    lineTailCap: 'arrow-tail',
+                    lineHeadCap: 'arrow-head',
+                    ...arrowStyle,
+                };
                 const arrowLineStyle = new H.map.SpatialStyle({
                     lineWidth: 10,
                     strokeColor: 'rgba(255, 255, 255, 0)',
@@ -50,16 +62,15 @@ const Polyline = (props) => {
         else {
             lineGroup.addObjects([line]);
         }
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(lineGroup);
+        api.map?.addObject(lineGroup);
         setPolyline(lineGroup);
         return () => {
-            var _a;
             (0, eventHandling_1.removeEventListenerMap)(lineGroup);
             lineGroup.forEach(singleLine => {
                 lineGroup.removeObject(singleLine);
                 singleLine.dispose();
             });
-            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(lineGroup)) {
+            if (api.map?.getObjects().includes(lineGroup)) {
                 api.map.removeObject(lineGroup);
             }
             lineGroup.dispose();

package/lib/es/components/map/components/features/basics/TextMarker.js

@@ -3,13 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.wrongTypeException = exports.emptyTextException = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const Marker_1 = tslib_1.__importDefault(require("./Marker"));
 exports.emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
 exports.wrongTypeException = 'Error in TextMarker: property text must be string type';
 const TextMarker = (props) => {
-    const { text } = props, remainingProps = tslib_1.__rest(props, ["text"]);
-    return ((0, jsx_runtime_1.jsx)(Marker_1.default, Object.assign({}, remainingProps, { icon: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'bg-white padding-x-10 padding-y-5 rounded border border-color-light shadow-default user-select-none cursor-default' }, { children: text })) })));
+    const { text, ...remainingProps } = props;
+    return ((0, jsx_runtime_1.jsx)(Marker_1.default, { ...remainingProps, icon: (0, jsx_runtime_1.jsx)("div", { className: 'bg-white padding-x-10 padding-y-5 rounded border border-color-light shadow-default user-select-none cursor-default', children: text }) }));
 };
 exports.default = TextMarker;