@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/listMenu/ListMenuGroup.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import ListMenuHeader from './ListMenuHeader';
 const ListMenuGroup = ({ menuGroup, className }) => {
     if (!menuGroup.navItems.length) {
         return null;
     }
-    return (_jsxs("ul", Object.assign({ className: `ListMenuGroup ${className}` }, { children: [_jsx(ListMenuHeader, Object.assign({}, menuGroup)), menuGroup.navItems.map(item => (_jsx("li", Object.assign({ className: classNames({ disabled: item.disabled, subitem: item.isSubItem }) }, { children: item.item }), item.key)))] })));
+    return (_jsxs("ul", { className: `ListMenuGroup ${className}`, children: [_jsx(ListMenuHeader, { ...menuGroup }), menuGroup.navItems.map(item => (_jsx("li", { className: classNames({ disabled: item.disabled, subitem: item.isSubItem }), children: item.item }, item.key)))] }));
 };
 export default ListMenuGroup;

package/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/components/listMenu/ListMenuHeader.js

@@ -1,10 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-const ListMenuHeader = ({ group, groupNavItem, className = '' }) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ListMenuHeader = ({ group, badge, badgeType = 'muted', groupNavItem, className = '' }) => {
     if (!group && !groupNavItem) {
         return null;
     }
-    return (_jsx("li", Object.assign({ className: 'ListMenuHeader' }, { children: groupNavItem ? groupNavItem : _jsx("span", Object.assign({ className: className }, { children: group })) })));
+    return (_jsxs("li", { className: 'ListMenuHeader', children: [groupNavItem ? groupNavItem : _jsx("span", { className: className, children: group }), badge && _jsx("span", { className: `badge badge-${badgeType}`, children: badge })] }));
 };
 export default ListMenuHeader;

package/components/loadMore/LoadMoreButton.js

@@ -1,13 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { LoadMoreProgress } from './LoadMoreProgress';
 export const LoadMoreButton = (props) => {
-    const { loaded = 0, total = 100, onLoadMore = () => { }, loadMoreMessage = '', noMoreMessage = '', isInteractive = true, progressBarStyle, className = '' } = props, remainingProps = __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 = classNames('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 (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: _jsxs("div", Object.assign({ className: 'min-width-150' }, { children: [_jsx(LoadMoreProgress, { loaded: loaded, total: total, progressBarStyle: progressBarStyle }), _jsxs("div", Object.assign({ className: 'display-flex justify-content-center' }, { children: [hasMoreToLoad && isInteractive && (_jsxs("button", Object.assign({ className: 'btn btn-link padding-right-20 margin-top--5', type: 'button', onClick: onLoadMore }, { children: [_jsx("span", { className: 'rioglyph rioglyph-arrow-down' }), loadMoreMessage] }))), hasMoreToLoad && !isInteractive && (_jsx("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: loadMoreMessage }))), !hasMoreToLoad && _jsx("span", Object.assign({ className: 'padding-top-4 padding-bottom-10' }, { children: noMoreMessage }))] }))] })) })));
+    return (_jsx("div", { ...remainingProps, className: wrapperClassNames, children: _jsxs("div", { className: 'min-width-150', children: [_jsx(LoadMoreProgress, { loaded: loaded, total: total, progressBarStyle: progressBarStyle }), _jsxs("div", { className: 'display-flex justify-content-center', children: [hasMoreToLoad && isInteractive && (_jsxs("button", { className: 'btn btn-link padding-right-20 margin-top--5', type: 'button', onClick: onLoadMore, children: [_jsx("span", { className: 'rioglyph rioglyph-arrow-down' }), loadMoreMessage] })), hasMoreToLoad && !isInteractive && (_jsx("span", { className: 'padding-top-4 padding-bottom-10', children: loadMoreMessage })), !hasMoreToLoad && _jsx("span", { className: 'padding-top-4 padding-bottom-10', children: noMoreMessage })] })] }) }));
 };
 export default LoadMoreButton;

package/components/loadMore/LoadMoreProgress.js

@@ -14,6 +14,6 @@ export const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STY
     const progressBarClassName = classNames('progress-bar', progressBarStyle === STYLE.GRAY &&
         width !== '100%' &&
         'border border-right-only border-color-white border-width-2');
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: 'text-center margin-bottom-3' }, { children: [_jsx("span", Object.assign({ className: 'text-medium' }, { children: loaded })), _jsx("span", Object.assign({ className: 'margin-left-5 margin-right-5' }, { children: "/" })), _jsx("span", Object.assign({ className: 'text-medium' }, { children: total }))] })), _jsx("div", Object.assign({ className: progressClassName }, { children: _jsx("div", { className: progressBarClassName, style: { width } }) }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: 'text-center margin-bottom-3', children: [_jsx("span", { className: 'text-medium', children: loaded }), _jsx("span", { className: 'margin-left-5 margin-right-5', children: "/" }), _jsx("span", { className: 'text-medium', children: total })] }), _jsx("div", { className: progressClassName, children: _jsx("div", { className: progressBarClassName, style: { width } }) })] }));
 };
 export default LoadMoreProgress;

package/components/map/components/Map.js

@@ -28,7 +28,7 @@ const Map = (props) => {
     const language = lang.split('-')[0];
     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');
         }
@@ -160,12 +160,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) {
@@ -175,7 +173,7 @@ const Map = (props) => {
         style.width = width;
     }
     const autoHeightClass = isEmpty(style) ? 'height-100pct' : '';
-    return (_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 && (_jsxs(MapContext.Provider, Object.assign({ value: {
+    return (_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 && (_jsxs(MapContext.Provider, { value: {
                 api,
                 language,
                 enableWebGL,
@@ -190,7 +188,7 @@ const Map = (props) => {
                 mapSettingsTooltip,
                 onIncidentsChange,
                 devicePixelRatio,
-            } }, { children: [_jsx(MapPosition, { api: api, boundingBox: boundingBox, center: center, zoomAnimation: zoomAnimation }), _jsx(MapSize, { api: api }), _jsx(MapZoom, { zoom: zoom, hideZoomButtons: disableBehavior, onZoomIn: onZoomIn, onZoomOut: onZoomOut, zoomAnimation: zoomAnimation }), mapSettings && mapSettings, _jsx(MapOverlayLayers, { layers: activeLayers }), _jsx(MapElements, Object.assign({ api: api }, { children: children }))] }))) })));
+            }, children: [_jsx(MapPosition, { api: api, boundingBox: boundingBox, center: center, zoomAnimation: zoomAnimation }), _jsx(MapSize, { api: api }), _jsx(MapZoom, { zoom: zoom, hideZoomButtons: disableBehavior, onZoomIn: onZoomIn, onZoomOut: onZoomOut, zoomAnimation: zoomAnimation }), mapSettings && mapSettings, _jsx(MapOverlayLayers, { layers: activeLayers }), _jsx(MapElements, { api: api, children: children })] })) }));
 };
 Map.TYPE_DEFAULT = MAP_TYPE_DEFAULT;
 Map.TYPE_FLEET_STYLE = MAP_TYPE_FLEET_STYLE;

package/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/components/map/components/MapElements.js

@@ -15,6 +15,6 @@ const MapElements = (props) => {
     if (!children) {
         return null;
     }
-    return (_jsx("div", Object.assign({ className: 'MapElements' }, { children: isFunction(children) ? children(api) : enrichChildrenWithApi(children, api) })));
+    return (_jsx("div", { className: 'MapElements', children: isFunction(children) ? children(api) : enrichChildrenWithApi(children, api) }));
 };
 export default MapElements;

package/components/map/components/MapPosition.js

@@ -3,22 +3,20 @@ const MapPosition = (props) => {
     const { api, boundingBox, center, zoomAnimation = false } = props;
     // Update BoundingBox from outside
     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
     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/components/map/components/MapSize.js

@@ -4,14 +4,14 @@ import useEvent from '../../../useEvent';
 const RESIZE_THROTTLE = 1100; // 100 more than the ApplicationLayout handler
 const MapSize = ({ api }) => {
     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
-    useEvent('orientationchange', throttle(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);
+    useEvent('orientationchange', throttle(RESIZE_THROTTLE, () => api?.map?.getViewPort().resize()), { passive: true }, window);
     return null;
 };
 export default MapSize;

package/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/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/components/map/components/features/ContextMenu.js

@@ -71,8 +71,7 @@ export const isContextMenuEvent = (event) => event.type === 'contextmenu';
 // source_layer: "buildings", "landuse", "pois", "roads", "water", "places"
 // source_name: 'H-107';
 export 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-');
 };
 const ContextMenu = (props) => {
     const { onOpen = noop, menuItems, contextMenuEvent, targetPosition } = props;
@@ -85,7 +84,7 @@ const ContextMenu = (props) => {
     useLayoutEffect(() => {
         if (menuItems && hereMap) {
             // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
-            const hasNoEventItems = isEmpty(contextMenuEvent === null || contextMenuEvent === void 0 ? void 0 : contextMenuEvent.items);
+            const hasNoEventItems = isEmpty(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
@@ -113,7 +112,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/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/components/map/components/features/MapSettings.d.ts

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

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

@@ -13,32 +13,31 @@ const MapSettings = (props) => {
     const { options, className = '' } = props;
     const { baseLayer, activeLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = useMapContext();
     const mapSettingsClasses = classNames('MapSettingsWrapper', className);
-    return (_jsx("div", Object.assign({ className: mapSettingsClasses }, { children: map(option => {
-            var _a, _b, _c, _d;
+    return (_jsx("div", { className: mapSettingsClasses, children: map(option => {
             if (isMapTypeSettings(option)) {
                 return React.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.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.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.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) }));
 };
 export default MapSettings;

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

@@ -7,28 +7,25 @@ const MapZoom = (props) => {
     const { api } = useMapContext();
     // Update Zoom from outside if value is different
     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/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/components/map/components/features/Route.js

@@ -18,6 +18,7 @@ export const ROUTE_COLOR_DANGER = '#e22837';
 export const ROUTE_COLOR_WARNING = '#ff8e3c';
 export const ROUTE_COLOR_SUCCESS = '#5cb85c';
 export const ROUTE_COLOR_WHITE = 'rgba(255, 255, 255, 1)';
+export const ARROW_COLOR_WARNING = 'rgba(167, 83, 25, 1)';
 const DEFAULT_WIDTH = 5;
 const DEFAULT_BORDER_WIDTH = 2;
 const defaultStyle = {
@@ -27,7 +28,10 @@ const defaultStyle = {
     borderColor: DEFAULT_BORDER_STROKE_COLOR,
     isBorderIncludedInWidth: false,
 };
-const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE });
+const alternativeRouteStyle = {
+    ...defaultStyle,
+    color: 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] = useState();
@@ -58,14 +62,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(TO_LESS_LINE_WIDTH_EXCEPTION_MSG);
         }
-        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? 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 ? DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setRouteStyle(new H.map.SpatialStyle({
+            strokeColor: isReducedStyle ? DEFAULT_LINE_STROKE_COLOR_REDUCED : color,
+            lineWidth: isReducedStyle ? mergedBorderWidth + width : width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
+        setBorderStyle(new H.map.SpatialStyle({
+            strokeColor: isReduced ? DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor,
+            lineWidth: mergedBorderWidth + width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
     };
     if (!lineString) {
         return null;

package/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/components/map/components/features/basics/Circle.js

@@ -9,14 +9,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.
     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/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/components/map/components/features/basics/InfoBubble.js

@@ -13,13 +13,12 @@ const InfoBubble = (props) => {
         }
     };
     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.isValidElement(content)
@@ -29,10 +28,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/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/components/map/components/features/basics/Marker.js

@@ -20,7 +20,6 @@ export const getOrCreateIcon = (icon) => {
     return new H.map.DomIcon(renderedIcon);
 };
 const setupMarker = (props, api) => {
-    var _a;
     const { position, customData, icon, draggable, eventListenerMap } = props;
     const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
     const marker = new MarkerConstructor(position, {
@@ -28,14 +27,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);
     addEventListenerMap(marker, eventListenerMap, api.map);
     return marker;
 };
 const destroyMarker = (marker, api) => {
-    var _a;
     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/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/components/map/components/features/basics/Polygon.js

@@ -18,14 +18,12 @@ const Polygon = (props) => {
     const { api } = useMapContext();
     const [polygon, setPolygon] = useState();
     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/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/components/map/components/features/basics/Polyline.js

@@ -17,7 +17,6 @@ const Polyline = (props) => {
         throw new MapException(WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);
     }
     useEffect(() => {
-        var _a;
         const lineGroup = new H.map.Group({ data: customData });
         const line = new H.map.Polyline(geometry, { style });
         if (hasArrows) {
@@ -25,14 +24,27 @@ const Polyline = (props) => {
             if (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)',
@@ -46,16 +58,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;
             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/components/map/components/features/basics/TextMarker.js

@@ -1,12 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import Marker from './Marker';
 export const emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
 export const wrongTypeException = 'Error in TextMarker: property text must be string type';
 const TextMarker = (props) => {
-    const { text } = props, remainingProps = __rest(props, ["text"]);
-    return (_jsx(Marker, Object.assign({}, remainingProps, { icon: _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 (_jsx(Marker, { ...remainingProps, icon: _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 }) }));
 };
 export default TextMarker;