@rio-cloud/rio-uikit 1.12.0 → 1.13.0

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

@@ -1,221 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
-const constants_1 = require("./constants");
-const eventHandling_1 = require("../utils/eventHandling");
-const MapContext_1 = require("./MapContext");
-const mapUtils_1 = require("../utils/mapUtils");
-const mapUi_1 = require("../utils/mapUi");
-const useDarkMode_1 = tslib_1.__importDefault(require("../../../hooks/useDarkMode"));
-const MapZoom_1 = tslib_1.__importDefault(require("./features/MapZoom"));
-const MapOverlayLayers_1 = tslib_1.__importDefault(require("./features/layers/MapOverlayLayers"));
-const MapSize_1 = tslib_1.__importDefault(require("./MapSize"));
-const MapPosition_1 = tslib_1.__importDefault(require("./MapPosition"));
-const MapElements_1 = tslib_1.__importDefault(require("./MapElements"));
-const rendering_1 = require("../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, disableZoomMomentum = true, eventListenerMap, mapType = constants_1.MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, minZoom = constants_1.DEFAULT_MIN_ZOOM, maxZoom = constants_1.DEFAULT_MAX_ZOOM, } = props;
-    let safeMaxZoom = maxZoom;
-    if (minZoom > maxZoom) {
-        // Avoid crashing the map for invalid zoom limits
-        safeMaxZoom = constants_1.DEFAULT_MAX_ZOOM;
-        console.error('Invalid condition for zoom limits: min <= max)');
-    }
-    const mapRef = (0, react_1.useRef)(null);
-    const [isMapInitialized, setMapInitialized] = (0, react_1.useState)(false);
-    const [api, setApi] = (0, react_1.useState)();
-    const [baseLayer, setBaseLayer] = (0, react_1.useState)(mapType);
-    const [activeLayers, setActiveLayers] = (0, react_1.useState)(mapLayer);
-    const [showCluster, setShowCluster] = (0, react_1.useState)(externalShowCluster);
-    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
-    // Only short locale is supported by HERE Map
-    const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());
-    (0, react_1.useEffect)(() => {
-        let allMapObjects = [];
-        if (api?.map) {
-            allMapObjects = api.map.getObjects();
-            console.debug('re-initialize here map');
-        }
-        else {
-            console.debug('initialize here map');
-        }
-        if (api?.map) {
-            // Cleanup any previously initialized map before doing anything else
-            console.debug('disposing previous map');
-            (0, eventHandling_1.removeEventListenerMap)(api.map);
-            if (api.mapEvents) {
-                api.mapEvents.dispose();
-            }
-            api.map.dispose();
-        }
-        const bounds = boundingBox && (0, mapUtils_1.getMapBounds)(boundingBox);
-        // Initialize communication with the platform
-        const platform = (0, rendering_1.getPlatform)(credentials);
-        // Specify engine type. In this example, we use HARP rendering engine, which is capable
-        // of rendering vector data using the style configuration exported from the HERE Style Editor.
-        // HARP engine is not the default engine, and it's not included in the mapsjs-core.js module.
-        // To use this engine, you need to include mapsjs-harp.js file to your HTML page
-        const engineType = (0, rendering_1.getEngineType)(baseLayer, enableWebGL);
-        // Obtain the default map types from the platform object
-        // @ts-ignore-next-line: according to the Here docs, the engine type exists
-        // see https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html
-        const defaultLayers = platform.createDefaultLayers({ engineType, lg: language, pois: true });
-        (0, rendering_1.getBaseLayer)({
-            baseLayerName: baseLayer,
-            defaultLayers,
-            enableWebGL,
-            platform,
-            engineType,
-            vehicleRestrictions: activeLayers.includes(constants_1.MAP_LAYER_ROAD_RESTRICTIONS),
-            language,
-            minZoom,
-            maxZoom: safeMaxZoom,
-        }).then(defaultLayerMap => {
-            // Initialize the map
-            const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
-                zoom,
-                center,
-                bounds,
-                engineType,
-                pixelRatio: devicePixelRatio,
-                fixedCenter: true,
-            });
-            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.setBaseLayer(defaultLayerMap.baseLayer);
-                hereMap.addLayer(defaultLayerMap.overlayLayer);
-            }
-            setMapInitialized(true);
-            let hereMapEvents = false;
-            let hereBehavior;
-            if (!disableMapEvents) {
-                // Enable the map event system
-                hereMapEvents = new H.mapevents.MapEvents(hereMap);
-            }
-            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);
-                }
-            }
-            (0, eventHandling_1.addEventListenerMap)(hereMap, eventListenerMap, hereMap);
-            const hereUi = (0, mapUi_1.getHereUi)(hereMap, defaultLayers, showScaleBar, language);
-            // The api will be passed to services when using a render function.
-            // This allows the service to access the map internals
-            setApi({
-                credentials,
-                defaultLayers,
-                map: hereMap,
-                mapEvents: hereMapEvents,
-                behavior: hereBehavior,
-                platform,
-                ui: hereUi,
-                utils: (0, mapUtils_1.createUtils)(hereMap),
-                // Put settings back into the map API object so the invoking service
-                // can check on these settings for instance inside a test
-                settings: {
-                    enableWebGL,
-                    baseLayer,
-                    activeLayers,
-                    showCluster,
-                    minZoom,
-                    maxZoom: safeMaxZoom,
-                },
-            });
-            if (allMapObjects) {
-                // If the base layer changed, re-add all previous objects again,
-                // otherwise the map would be empty
-                hereMap.addObjects(allMapObjects);
-            }
-        });
-    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);
-    const isDarkMode = (0, useDarkMode_1.default)();
-    (0, react_1.useEffect)(() => {
-        // Toggle night map only if current map type is default
-        if (isDarkMode && baseLayer === constants_1.MAP_TYPE_DEFAULT) {
-            handleMapTypeChange(constants_1.MAP_TYPE_NIGHT);
-        }
-        // Toggle back to default map only if current map type is night
-        else if (!isDarkMode && baseLayer === constants_1.MAP_TYPE_NIGHT) {
-            handleMapTypeChange(constants_1.MAP_TYPE_DEFAULT);
-        }
-    }, [isDarkMode, language]);
-    // Update MapType from outside
-    (0, react_1.useEffect)(() => handleMapTypeChange(mapType), [mapType]);
-    // Update MapLayer from outside
-    const [previousMapLayer, setPreviousMapLayer] = (0, react_1.useState)(mapLayer);
-    if (!(0, isEqual_1.default)(mapLayer, previousMapLayer)) {
-        setActiveLayers(mapLayer);
-        setPreviousMapLayer(mapLayer);
-    }
-    // Update Cluster setting from outside
-    (0, react_1.useEffect)(() => setShowCluster(externalShowCluster), [externalShowCluster]);
-    const handleMapTypeChange = (newMapType) => {
-        setBaseLayer(newMapType);
-        onMapTypeChange(newMapType, mapType);
-    };
-    const handleMapLayerChange = (layer) => {
-        const removeLayer = (layerToRemove) => activeLayers.filter(item => item !== layerToRemove);
-        const newActiveLayers = activeLayers.includes(layer) ? removeLayer(layer) : [...activeLayers, layer];
-        setActiveLayers(newActiveLayers);
-        onMapLayerChange(newActiveLayers, activeLayers);
-    };
-    const handleShowClusterChange = (newShowCluster) => {
-        setShowCluster(newShowCluster);
-        onShowClusterChange(newShowCluster);
-    };
-    // Note: For performance reasons, we deactivate pointer events and hence CSS style recalculation for the
-    // the body. Having for instance many assets in the tree causes a performance loss when clicking on the map
-    // to move it and zoom in/out since the map triggers a style invalidation and recalculation and
-    // due to the nature of the AssetTree with it's hundreds DOM nodes, applying the CSS selectors
-    // takes time.
-    const handleMapInteractionStart = () => {
-        document.querySelector('.AssetTree')?.classList.add('pointer-events-none');
-    };
-    const handleMapInteractionEnd = () => {
-        document.querySelector('.AssetTree')?.classList.remove('pointer-events-none');
-    };
-    const style = {};
-    if (height) {
-        style.height = height;
-    }
-    if (width) {
-        style.width = width;
-    }
-    const autoHeightClass = (0, isEmpty_1.default)(style) ? 'height-100pct' : '';
-    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,
-                showCluster,
-                activeLayers,
-                baseLayer,
-                hideMapLayerSettings,
-                hideClusterSettings,
-                onMapTypeChange: handleMapTypeChange,
-                onMapLayerChange: handleMapLayerChange,
-                onShowClusterChange: handleShowClusterChange,
-                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, { api: api, children: children })] })) }));
-};
-Map.TYPE_DEFAULT = constants_1.MAP_TYPE_DEFAULT;
-Map.TYPE_FLEET_STYLE = constants_1.MAP_TYPE_FLEET_STYLE;
-Map.TYPE_SATELLITE = constants_1.MAP_TYPE_SATELLITE;
-Map.TYPE_TERRAIN = constants_1.MAP_TYPE_TERRAIN;
-Map.TYPE_NIGHT = constants_1.MAP_TYPE_NIGHT;
-Map.LAYER_INCIDENTS = constants_1.MAP_LAYER_INCIDENTS;
-Map.LAYER_TRAFFIC = constants_1.MAP_LAYER_TRAFFIC;
-Map.LAYER_ROAD_RESTRICTIONS = constants_1.MAP_LAYER_ROAD_RESTRICTIONS;
-exports.default = Map;

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

@@ -1,20 +0,0 @@
-import type { MapApi, MapIncidents, MapLayer, MapType } from '../utils/mapTypes';
-export type MapContextType = {
-    api: MapApi;
-    language: string;
-    enableWebGL: boolean;
-    baseLayer: MapType;
-    activeLayers: MapLayer[];
-    showCluster: boolean;
-    devicePixelRatio: number;
-    onMapTypeChange?: (type: MapType) => void;
-    onMapLayerChange?: (layer: MapLayer) => void;
-    onShowClusterChange?: (showCluster: boolean) => void;
-    mapSettingsTooltip?: string | React.ReactNode;
-    hideMapLayerSettings?: boolean;
-    hideClusterSettings?: boolean;
-    onIncidentsChange: (incidentsResult: MapIncidents) => void;
-};
-export declare const defaultMapContext: MapContextType;
-export declare const MapContext: import("react").Context<MapContextType>;
-export declare const useMapContext: () => MapContextType;

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

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMapContext = exports.MapContext = exports.defaultMapContext = void 0;
-const react_1 = require("react");
-const constants_1 = require("./constants");
-exports.defaultMapContext = {
-    api: {},
-    language: 'en',
-    enableWebGL: true,
-    baseLayer: constants_1.MAP_TYPE_DEFAULT,
-    activeLayers: [],
-    showCluster: true,
-    devicePixelRatio: 1,
-    onIncidentsChange: () => { },
-};
-exports.MapContext = (0, react_1.createContext)(exports.defaultMapContext);
-const useMapContext = () => (0, react_1.useContext)(exports.MapContext);
-exports.useMapContext = useMapContext;

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

@@ -1,6 +0,0 @@
-import type { MapApi, MapProps } from '../utils/mapTypes';
-export type MapElementsProps = Pick<MapProps, 'children'> & {
-    api?: MapApi;
-};
-declare const MapElements: (props: MapElementsProps) => import("react/jsx-runtime").JSX.Element | null;
-export default MapElements;

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

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const isFunction_1 = tslib_1.__importDefault(require("lodash/fp/isFunction"));
-const MapContext_1 = require("./MapContext");
-const enrichChildrenWithApi = (children, api) => react_1.default.Children.map(children, child => {
-    if (child) {
-        return react_1.default.cloneElement(child, {
-            api,
-        });
-    }
-});
-const MapElements = (props) => {
-    const { children } = props;
-    const { api } = (0, MapContext_1.useMapContext)();
-    if (!children) {
-        return null;
-    }
-    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.d.ts

@@ -1,6 +0,0 @@
-import type { MapApi, MapProps } from '../utils/mapTypes';
-export type MapPositionProps = Pick<MapProps, 'boundingBox' | 'center' | 'zoomAnimation'> & {
-    api: MapApi;
-};
-declare const MapPosition: (props: MapPositionProps) => null;
-export default MapPosition;

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

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const MapPosition = (props) => {
-    const { api, boundingBox, center, zoomAnimation = false } = props;
-    // Update BoundingBox from outside
-    (0, react_1.useEffect)(() => {
-        if (api && boundingBox) {
-            const { top, left, bottom, right } = boundingBox;
-            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)(() => {
-        if (!(api && center)) {
-            return;
-        }
-        const currentMapCenter = api.utils?.getCenter();
-        if (currentMapCenter) {
-            if (currentMapCenter.lat !== center.lat || currentMapCenter.lng !== center.lng) {
-                api.utils?.setCenter(center, zoomAnimation);
-            }
-        }
-    }, [center]);
-    return null;
-};
-exports.default = MapPosition;

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

@@ -1,5 +0,0 @@
-import type { MapApi } from '../utils/mapTypes';
-declare const MapSize: ({ api }: {
-    api: MapApi;
-}) => null;
-export default MapSize;

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
-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 = () => api?.map?.getViewPort().resize();
-        window.addEventListener('resize', resizeMap, { passive: true });
-        return () => {
-            window.removeEventListener('resize', resizeMap);
-        };
-    }, [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, () => api?.map?.getViewPort().resize()), { passive: true }, window);
-    return null;
-};
-exports.default = MapSize;

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

@@ -1,19 +0,0 @@
-import type { MapType } from '../utils/mapTypes';
-export declare const MAP_TYPE_DEFAULT: MapType;
-export declare const MAP_TYPE_FLEET_STYLE: MapType;
-export declare const MAP_TYPE_SATELLITE: MapType;
-export declare const MAP_TYPE_TERRAIN: MapType;
-export declare const MAP_TYPE_NIGHT: MapType;
-export declare const MAP_LAYER_INCIDENTS = "INCIDENTS";
-export declare const MAP_LAYER_TRAFFIC = "TRAFFIC";
-export declare const MAP_LAYER_ROAD_RESTRICTIONS = "ROAD_RESTRICTIONS";
-export declare const FORMAT = "png8";
-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.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/lib/es/components/map/components/constants.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MAX_ZOOM = exports.DEFAULT_MIN_ZOOM = exports.DEFAULT_RASTER_LAYER_FORMAT = exports.DEFAULT_TILE_SIZE = exports.ENGINE_TYPE_P2D = exports.ENGINE_TYPE_HARP = exports.NO_CREDENTIALS_ERROR_MESSAGE = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
-exports.MAP_TYPE_DEFAULT = 'DEFAULT';
-exports.MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
-exports.MAP_TYPE_SATELLITE = 'SATELLITE';
-exports.MAP_TYPE_TERRAIN = 'TERRAIN';
-exports.MAP_TYPE_NIGHT = 'NIGHT';
-exports.MAP_LAYER_INCIDENTS = 'INCIDENTS';
-exports.MAP_LAYER_TRAFFIC = 'TRAFFIC';
-exports.MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
-// outdated?
-exports.FORMAT = 'png8';
-exports.TILE_SIZE = 256;
-exports.TILE_TYPE = 'maptile';
-exports.NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
-// @ts-ignore-next-line
-// biome-ignore lint/complexity/useLiteralKeys: <explanation>
-exports.ENGINE_TYPE_HARP = H.Map.EngineType['HARP'];
-exports.ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
-exports.DEFAULT_TILE_SIZE = 512;
-exports.DEFAULT_RASTER_LAYER_FORMAT = 'png'; // 'jpeg';
-exports.DEFAULT_MIN_ZOOM = 3;
-exports.DEFAULT_MAX_ZOOM = 20;

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

@@ -1,12 +0,0 @@
-import type { ContextMenuItemProps as ContextMenuItem } from './ContextMenuItem';
-import type { Position } from '../../utils/mapTypes';
-export declare const isContextMenuEvent: (event: H.mapevents.ContextMenuEvent) => boolean;
-export declare const isMapTarget: (event: H.mapevents.ContextMenuEvent, map: H.Map) => any;
-export type ContextMenuProps = {
-    onOpen?: (menuPosition: Position) => void;
-    menuItems?: React.ReactElement<ContextMenuItem>[];
-    contextMenuEvent?: H.mapevents.ContextMenuEvent;
-    targetPosition?: Position;
-};
-declare const ContextMenu: (props: ContextMenuProps) => null;
-export default ContextMenu;

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

@@ -1,154 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMapTarget = exports.isContextMenuEvent = void 0;
-const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
-const react_1 = require("react");
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const MapContext_1 = require("../MapContext");
-const HERE_ITEM_CLASS = 'H_context_menu_item';
-const centeredSpinner = 
-// eslint-disable-next-line max-len
-'<svg aria-labelledby="ggtrwic-aria" role="img" height="14" width="135px" class="ContentLoader  use-mix-blend-mode"><title id="ggtrwic-aria">Loading...</title><rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ggtrwic-diff)" style="fill: url(&quot;#ggtrwic-animated-diff&quot;);"></rect><defs><clipPath id="ggtrwic-diff"><rect width="100%" height="100%" rx="3" ry="3"></rect></clipPath><linearGradient id="ggtrwic-animated-diff"><stop offset="0%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="#aaaaaa" stop-opacity="1"><animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>';
-const getDOMMenuItems = () => [...document.getElementsByClassName(HERE_ITEM_CLASS)];
-// Query DOM nodes for "H_context_menu_item" and update label when children label has changed.
-// This function allows to use HTML markup for the menu items in the second render
-const updateMenuItemLabels = (nodes, items) => {
-    // setTimeout(() => {
-    Array.from(nodes).forEach((itemNode, index) => {
-        const item = items[index];
-        if (!item) {
-            return;
-        }
-        const { hasSpinner, className, labelClassName = '', icon, label } = item.props;
-        const contentLabel = `<span class="${labelClassName}">${label}</span>`;
-        const labelWithIcon = `<span class="rioglyph ${icon} margin-right-5"></span>${contentLabel}`;
-        const content = icon ? labelWithIcon : contentLabel;
-        if (hasSpinner) {
-            itemNode.innerHTML = centeredSpinner;
-        }
-        else {
-            itemNode.innerHTML = content;
-        }
-        const wrapperClassList = itemNode.classList;
-        // Since classList.add() does not allow for space separated multiple classes, we have to add them separately
-        if (className) {
-            className.split(' ').map((singleClassName) => wrapperClassList.add(singleClassName));
-        }
-    });
-    // }, 0);
-};
-const addItemsToEvent = (items, event, map, targetPosition) => {
-    const amount = items.length - 1;
-    // FIXME: The imported typing is wrong and according to
-    // https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.mapevents.ContextMenuEvent.html#viewportX
-    // it is a number
-    const viewportX = event.viewportX;
-    // Get geo coordinates from the screen coordinates or use a fixed set to be returned when
-    // clicking the menu item.
-    const coord = targetPosition || map.screenToGeo(viewportX, event.viewportY);
-    items.map((item, index) => {
-        if (!item) {
-            return;
-        }
-        const { label, disabled, callback = noop_1.default } = item.props;
-        // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
-        event.items.push(new H.util.ContextItem({
-            label,
-            disabled,
-            callback: () => callback(coord),
-        }));
-        // add separator but for last element
-        if (index < amount) {
-            // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
-            event.items.push(H.util.ContextItem.SEPARATOR);
-        }
-    });
-};
-const isContextMenuEvent = (event) => event.type === 'contextmenu';
-exports.isContextMenuEvent = isContextMenuEvent;
-// Depending on the click target, it may be the map itself or individual parts of the map layer.
-// To check if the context menu click happened on a marker or polygon or circle, we need to check where
-// the user has clicked.
-//
-// Some map layer sources may be:
-// source_layer: "buildings", "landuse", "pois", "roads", "water", "places"
-// source_name: 'H-107';
-const isMapTarget = (event, map) => {
-    return event.target === map || event.target?.data?.source_name?.startsWith('H-');
-};
-exports.isMapTarget = isMapTarget;
-const ContextMenu = (props) => {
-    const { onOpen = noop_1.default, menuItems, contextMenuEvent, targetPosition } = props;
-    const { api, baseLayer } = (0, MapContext_1.useMapContext)();
-    const { map: hereMap } = api;
-    // Use a ref to store the target position used when a map object was clicked with a fixed
-    // position to return that position in the onOpen callback instead of the dynamic map position
-    const targetPositionRef = (0, react_1.useRef)();
-    targetPositionRef.current = targetPosition;
-    (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?.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
-            if (contextMenuEvent && !(0, exports.isMapTarget)(contextMenuEvent, hereMap) && hasNoEventItems) {
-                addItemsToEvent(menuItems, contextMenuEvent, hereMap, targetPositionRef.current);
-            }
-            updateMenuItemLabels(getDOMMenuItems(), menuItems);
-        }
-    }, [menuItems, contextMenuEvent, targetPositionRef.current]);
-    const handleMapContextMenu = (event) => {
-        if (!(0, exports.isContextMenuEvent)(event) || !hereMap) {
-            return;
-        }
-        // "contextmenu" event might be triggered not only by a pointer,
-        // but a keyboard button as well. That's why ContextMenuEvent
-        // doesn't have a "currentPointer" property.
-        // Instead it has "viewportX" and "viewportY" properties
-        // for the associates position.
-        // Reset previous target positions when the map was clicked
-        if ((0, exports.isMapTarget)(event, hereMap)) {
-            targetPositionRef.current = undefined;
-        }
-        // FIXME: The imported typing is wrong and according to
-        // https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.mapevents.ContextMenuEvent.html#viewportX
-        // it is a number
-        const viewportX = event.viewportX;
-        // Get geo coordinates from the screen coordinates.
-        const coord = targetPositionRef.current || hereMap?.screenToGeo(viewportX, event.viewportY);
-        if (coord) {
-            onOpen(coord);
-        }
-        // As we already handle contextmenu event callback on map object like markers separately,
-        // we don't do anything if target is different than the map.
-        if (!(0, exports.isMapTarget)(event, hereMap)) {
-            return;
-        }
-        if (!menuItems) {
-            return;
-        }
-        // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
-        if ((0, isEmpty_1.default)(event.items)) {
-            addItemsToEvent(menuItems, event, hereMap, targetPosition);
-            updateMenuItemLabels(getDOMMenuItems(), menuItems);
-        }
-    };
-    // The contextmenu event handler has to be registered in any case to handle context menu events and to
-    // trigger the callback when the menu opens. Take care to remove and add the event listener when the
-    // base map layer changes as the map get re-initialized. Otherwise the context menu cannot be opened anymore
-    // when switching to another map view.
-    (0, react_1.useLayoutEffect)(() => {
-        if (!hereMap) {
-            return;
-        }
-        hereMap.addEventListener('contextmenu', handleMapContextMenu);
-        return () => {
-            hereMap.removeEventListener('contextmenu', handleMapContextMenu);
-        };
-    }, [baseLayer, hereMap]);
-    return null;
-};
-exports.default = ContextMenu;

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

@@ -1,12 +0,0 @@
-import type { Position } from '../../utils/mapTypes';
-export type ContextMenuItemProps = {
-    label: string;
-    disabled?: boolean;
-    callback?: (position: Position) => void;
-    hasSpinner?: boolean;
-    icon?: string;
-    className?: string;
-    labelClassName?: string;
-};
-declare const ContextMenuItem: (props: ContextMenuItemProps) => H.util.ContextItem;
-export default ContextMenuItem;

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

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const ContextMenuItem = (props) => {
-    // Note: not all defined props are passed to the Here ContextItem are used in ContextMenu component
-    const { label = '', disabled = false, callback = noop_1.default,
-    // hasSpinner = false,
-    // className = '',
-    // labelClassName = '',
-     } = props;
-    return new H.util.ContextItem({
-        label,
-        disabled,
-        callback: callback,
-    });
-};
-exports.default = ContextMenuItem;

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

@@ -1,6 +0,0 @@
-export type MapSettingsProps = {
-    options?: JSX.Element[];
-    className?: string;
-};
-declare const MapSettings: (props: MapSettingsProps) => import("react/jsx-runtime").JSX.Element;
-export default MapSettings;