@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HIGH_RES_PPI = 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.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';
@@ -9,7 +9,13 @@ 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.HIGH_RES_PPI = 320;
+exports.NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
+// @ts-ignore-next-line
+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';

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

@@ -1,2 +1,14 @@
+/// <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;
+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;
-declare function ContextMenu(props: any): null;

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

@@ -1,80 +1,108 @@
 "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 context_1 = require("../context");
+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 = '<div class="flex-1-1 display-flex justify-content-center align-items-center"><div class="spinner"></div></div>';
-const getDOMMenuItems = () => document.getElementsByClassName(HERE_ITEM_CLASS);
+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 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(event.viewportX, event.viewportY);
+    const coord = targetPosition || map.screenToGeo(viewportX, event.viewportY);
     items.map((item, index) => {
         if (!item) {
             return;
         }
-        const { label, disabled, callback } = item.props;
+        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, map),
+            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 ContextMenu = props => {
-    const { api, onOpen, menuItems: items, contextMenuEvent, targetPosition } = props;
-    const mapContext = (0, react_1.useContext)(context_1.MapContext);
-    const { map: hereMap } = api || mapContext.api;
+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) => {
+    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-'));
+};
+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)(() => {
-        // 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 && contextMenuEvent !== hereMap && (0, isEmpty_1.default)(contextMenuEvent.items)) {
-            addItemsToEvent(items, contextMenuEvent, hereMap, targetPositionRef.current);
+        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);
+            // 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);
         }
-        updateMenuItemLabels(getDOMMenuItems(), items);
-    }, [items, contextMenuEvent, targetPositionRef.current]);
-    const handleMapContextMenu = event => {
-        if (event.type !== 'contextmenu') {
+    }, [menuItems, contextMenuEvent, targetPositionRef.current]);
+    const handleMapContextMenu = (event) => {
+        if (!(0, exports.isContextMenuEvent)(event) || !hereMap) {
             return;
         }
         // "contextmenu" event might be triggered not only by a pointer,
@@ -83,27 +111,36 @@ const ContextMenu = props => {
         // Instead it has "viewportX" and "viewportY" properties
         // for the associates position.
         // Reset previous target positions when the map was clicked
-        if (event.target === hereMap) {
+        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(event.viewportX, event.viewportY);
-        onOpen(coord);
-        // As we already handle contextmenu event callback on map object separately,
+        const coord = targetPositionRef.current || (hereMap === null || hereMap === void 0 ? void 0 : 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 (event.target !== hereMap) {
+        if (!(0, exports.isMapTarget)(event, hereMap)) {
             return;
         }
-        if (!items) {
+        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(items, event, hereMap, targetPosition);
-            updateMenuItemLabels(getDOMMenuItems(), 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.
+    // 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;
@@ -112,7 +149,7 @@ const ContextMenu = props => {
         return () => {
             hereMap.removeEventListener('contextmenu', handleMapContextMenu);
         };
-    }, []);
+    }, [baseLayer, hereMap]);
     return null;
 };
 exports.default = ContextMenu;

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

@@ -1,28 +1,13 @@
+/// <reference types="heremaps" />
+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;
-declare function ContextMenuItem(props: any): any;
-declare namespace ContextMenuItem {
-    namespace defaultProps {
-        const label: string;
-        const disabled: boolean;
-        function callback(): void;
-        const hasSpinner: boolean;
-        const className: string;
-        const labelClassName: string;
-    }
-    namespace propTypes {
-        const label_1: PropTypes.Validator<string>;
-        export { label_1 as label };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const callback_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { callback_1 as callback };
-        const hasSpinner_1: PropTypes.Requireable<boolean>;
-        export { hasSpinner_1 as hasSpinner };
-        export const icon: PropTypes.Requireable<string>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const labelClassName_1: PropTypes.Requireable<string>;
-        export { labelClassName_1 as labelClassName };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,32 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const ContextMenuItem = props => {
+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, callback } = props;
+    const { label = '', disabled = false, callback = noop_1.default,
+    // hasSpinner = false,
+    // className = '',
+    // labelClassName = '',
+     } = props;
     return new H.util.ContextItem({
         label,
         disabled,
-        callback,
+        callback: callback,
     });
 };
-ContextMenuItem.defaultProps = {
-    label: '',
-    disabled: false,
-    callback: () => { },
-    hasSpinner: false,
-    className: '',
-    labelClassName: '',
-};
-ContextMenuItem.propTypes = {
-    label: prop_types_1.default.string.isRequired,
-    disabled: prop_types_1.default.bool,
-    callback: prop_types_1.default.func,
-    hasSpinner: prop_types_1.default.bool,
-    icon: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-    labelClassName: prop_types_1.default.string,
-};
 exports.default = ContextMenuItem;

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

@@ -1,22 +1,7 @@
+/// <reference types="react" />
+export type MapSettingsProps = {
+    options?: JSX.Element[];
+    className?: string;
+};
+declare const MapSettings: (props: MapSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapSettings;
-declare function MapSettings(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapSettings {
-    namespace defaultProps {
-        const showCluster: boolean;
-        const className: string;
-    }
-    namespace propTypes {
-        export const onMapTypeChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onMapLayerChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onShowClusterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const mapType: PropTypes.Requireable<string>;
-        export const activeBuiltinLayers: PropTypes.Requireable<(string | null | undefined)[]>;
-        const showCluster_1: PropTypes.Requireable<boolean>;
-        export { showCluster_1 as showCluster };
-        export const mapSettingsTooltip: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const options: PropTypes.Requireable<any[]>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -2,66 +2,46 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
-const get_1 = tslib_1.__importDefault(require("lodash/fp/get"));
-const uniqueId_1 = tslib_1.__importDefault(require("lodash/fp/uniqueId"));
-const validation_1 = require("../../utils/validation");
-const context_1 = require("../context");
 const MapTypeSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapTypeSettings"));
 const MapLayerSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapLayerSettings"));
 const MapClusterSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapClusterSettings"));
-const getDisplayname = (0, get_1.default)('type.displayName');
-const isMapTypeSettings = option => option.type === MapTypeSettings_1.default;
-const isMapLayerSettings = option => option.type === MapLayerSettings_1.default;
-const isMapClusterSettings = option => option.type === MapClusterSettings_1.default;
-const MapSettings = props => {
-    const settingsContext = (0, react_1.useContext)(context_1.MapSettingsContext);
-    const { mapType, activeBuiltinLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = settingsContext;
-    const { options, className } = props;
+const MapContext_1 = require("../MapContext");
+const isMapTypeSettings = (option) => option.type === MapTypeSettings_1.default;
+const isMapLayerSettings = (option) => option.type === MapLayerSettings_1.default;
+const isMapClusterSettings = (option) => option.type === MapClusterSettings_1.default;
+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;
             if (isMapTypeSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
-                    mapType,
+                    key: (_a = option === null || option === void 0 ? void 0 : option.key) !== null && _a !== void 0 ? _a : crypto.randomUUID(),
+                    mapType: baseLayer,
                     onMapTypeChange,
                 });
             }
             if (isMapLayerSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
-                    activeBuiltinLayers,
+                    key: (_b = option === null || option === void 0 ? void 0 : option.key) !== null && _b !== void 0 ? _b : crypto.randomUUID(),
+                    activeBuiltinLayers: activeLayers,
                     onMapLayerChange,
                 });
             }
             if (isMapClusterSettings(option)) {
                 return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
+                    key: (_c = option === null || option === void 0 ? void 0 : option.key) !== null && _c !== void 0 ? _c : crypto.randomUUID(),
                     showCluster,
                     onShowClusterChange,
                 });
             }
             return react_1.default.cloneElement(option, {
-                key: (0, validation_1.getKeyOrDefault)((0, uniqueId_1.default)('MapSettingsOption_'), option),
+                key: (_d = option === null || option === void 0 ? void 0 : option.key) !== null && _d !== void 0 ? _d : `MapSettingsOption_${crypto.randomUUID()}`,
             });
         }, options) })));
 };
-MapSettings.defaultProps = {
-    showCluster: true,
-    className: '',
-};
-MapSettings.propTypes = {
-    onMapTypeChange: prop_types_1.default.func,
-    onMapLayerChange: prop_types_1.default.func,
-    onShowClusterChange: prop_types_1.default.func,
-    mapType: prop_types_1.default.string,
-    activeBuiltinLayers: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    showCluster: prop_types_1.default.bool,
-    mapSettingsTooltip: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    options: prop_types_1.default.array,
-    className: prop_types_1.default.string,
-};
 exports.default = MapSettings;

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

@@ -0,0 +1,9 @@
+export type MapZoomProps = {
+    zoom?: number;
+    hideZoomButtons: boolean;
+    zoomAnimation: boolean;
+    onZoomIn: (zoom: number) => void;
+    onZoomOut: (zoom: number) => void;
+};
+declare const MapZoom: (props: MapZoomProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapZoom;

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

@@ -0,0 +1,41 @@
+"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 ZoomButtons_1 = tslib_1.__importDefault(require("./settings/ZoomButtons"));
+const MapContext_1 = require("../MapContext");
+const MapZoom = (props) => {
+    const { zoom, hideZoomButtons, zoomAnimation, onZoomIn, onZoomOut } = 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();
+        if (zoom && currentMapZoom !== zoom) {
+            (_b = api.utils) === null || _b === void 0 ? void 0 : _b.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 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);
+    };
+    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 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);
+    };
+    if (hideZoomButtons) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(ZoomButtons_1.default, { onZoomIn: handleZoomIn, onZoomOut: handleZoomOut });
+};
+exports.default = MapZoom;

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

@@ -1,48 +1,28 @@
-export const MISSING_POSITIONS_EXCEPTION_MSG: "Route requires a minimum of 1 positions";
-export const TO_LESS_LINE_WIDTH_EXCEPTION_MSG: "If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth";
+/// <reference types="react" />
+import type { Position } from '../../utils/mapTypes';
+import type { EventListenerMap } from '../../utils/eventHandling';
+export declare const MISSING_POSITIONS_EXCEPTION_MSG = "Route requires a minimum of 1 positions";
+export declare const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = "If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth";
+export type RouteStyle = {
+    width: number;
+    color?: string;
+    borderWidth?: number;
+    borderColor?: string;
+    isBorderIncludedInWidth?: boolean;
+    lineDash?: number[];
+};
+export type RouteProps = {
+    arrowStyle?: object;
+    hasArrows?: boolean;
+    positions: Position[];
+    style?: RouteStyle;
+    eventListenerMap?: EventListenerMap;
+    isReduced?: boolean;
+    isRouteAlternative?: boolean;
+    startIcon?: JSX.Element;
+    middleIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    markers?: JSX.Element[];
+};
+declare const Route: (props: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Route;
-declare function Route(props: any): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Route {
-    namespace defaultProps {
-        const hasArrows: boolean;
-        const arrowStyle: {};
-        const isReduced: boolean;
-        const isRouteAlternative: boolean;
-        const markers: never[];
-    }
-    namespace propTypes {
-        const arrowStyle_1: PropTypes.Requireable<object>;
-        export { arrowStyle_1 as arrowStyle };
-        const hasArrows_1: PropTypes.Requireable<boolean>;
-        export { hasArrows_1 as hasArrows };
-        export const positions: PropTypes.Validator<(PropTypes.InferProps<{
-            lat: PropTypes.Validator<number>;
-            lng: PropTypes.Validator<number>;
-        }> | null | undefined)[]>;
-        export const style: PropTypes.Requireable<PropTypes.InferProps<{
-            width: PropTypes.Requireable<number>;
-            color: PropTypes.Requireable<string>;
-            borderWidth: PropTypes.Requireable<number>;
-            borderColor: PropTypes.Requireable<string>;
-            isBorderIncludedInWidth: PropTypes.Requireable<boolean>;
-            lineDash: PropTypes.Requireable<(number | null | undefined)[]>;
-        }>>;
-        export const eventListenerMap: PropTypes.Requireable<object>;
-        const isReduced_1: PropTypes.Requireable<boolean>;
-        export { isReduced_1 as isReduced };
-        const isRouteAlternative_1: PropTypes.Requireable<boolean>;
-        export { isRouteAlternative_1 as isRouteAlternative };
-        export const startIcon: PropTypes.Requireable<any>;
-        export const middleIcon: PropTypes.Requireable<any>;
-        export const endIcon: PropTypes.Requireable<object>;
-        const markers_1: PropTypes.Requireable<any[]>;
-        export { markers_1 as markers };
-        export const api: PropTypes.Requireable<PropTypes.InferProps<{
-            map: PropTypes.Requireable<any>;
-            platform: PropTypes.Requireable<any>;
-            defaultLayers: PropTypes.Requireable<object>;
-            group: PropTypes.Requireable<any>;
-        }>>;
-    }
-}
-import PropTypes from "prop-types";