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

package/components/map/utils/positions.js

@@ -1,37 +1,31 @@
-const BoundingBox = () => {
-    this.top = -Infinity;
-    this.right = -Infinity;
-    this.bottom = Infinity;
-    this.left = Infinity;
+const createBoundingBox = () => ({
+    top: Number.NEGATIVE_INFINITY,
+    right: Number.NEGATIVE_INFINITY,
+    bottom: Number.POSITIVE_INFINITY,
+    left: Number.POSITIVE_INFINITY,
+});
+export const isValidBoundingBox = (box) => {
+    return (box.top !== Number.NEGATIVE_INFINITY &&
+        box.bottom !== Number.POSITIVE_INFINITY &&
+        box.left !== Number.POSITIVE_INFINITY &&
+        box.right !== Number.NEGATIVE_INFINITY);
 };
-BoundingBox.prototype = {
-    isValid: () => {
-        return this.top !== -Infinity && this.bottom !== Infinity && this.left !== Infinity && this.right !== -Infinity;
-    },
-};
-const calculateBoundingBox = positions => {
+export const calculateBoundingBox = (positions) => {
     return positions.reduce((acc, cur) => {
-        if (cur.lat > acc.top) {
-            acc.top = cur.lat;
-        }
-        if (cur.lat < acc.bottom) {
-            acc.bottom = cur.lat;
-        }
-        if (cur.lng < acc.left) {
-            acc.left = cur.lng;
-        }
-        if (cur.lng > acc.right) {
-            acc.right = cur.lng;
-        }
-        return acc;
-    }, new BoundingBox());
+        return {
+            top: Math.max(acc.top, cur.lat),
+            right: Math.max(acc.right, cur.lng),
+            bottom: Math.min(acc.bottom, cur.lat),
+            left: Math.min(acc.left, cur.lng),
+        };
+    }, createBoundingBox());
 };
 const COORDS_REGEX = /^\s*(-?\d+(\.\d+)?)\s*[,\s]\s*(-?\d+(\.\d+)?)\s*$/;
-const parsePositionFromString = value => {
+export const parsePositionFromString = (value) => {
     const match = COORDS_REGEX.exec(value);
     if (match) {
-        const lat = parseFloat(match[1]);
-        const lng = parseFloat(match[3]);
+        const lat = Number.parseFloat(match[1]);
+        const lng = Number.parseFloat(match[3]);
         if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
             return {
                 lat,
@@ -40,7 +34,38 @@ const parsePositionFromString = value => {
         }
     }
 };
-export const PositionUtils = {
-    calculateBoundingBox,
-    parsePositionFromString,
+/**
+ * Ease function that can be used to animate positions on the map.
+ *
+ * See: https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation
+ *
+ * @param   {H.geo.IPoint} startCoord   start geo coordinate
+ * @param   {H.geo.IPoint} endCoord     end geo coordinate
+ * @param   number durationMs           duration of animation between start & end coordinates
+ * @param   function onStep             callback executed each step
+ * @param   function onStep             callback executed at the end
+ */
+export const ease = (startCoord = { lat: 0, lng: 0 }, endCoord = { lat: 1, lng: 1 }, durationMs = 200, onStep = (pos) => { }, onComplete = () => { }) => {
+    const raf = window.requestAnimationFrame;
+    const stepCount = durationMs / 16;
+    const valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount;
+    const valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount;
+    const sinValueIncrement = Math.PI / stepCount;
+    let currentValueLat = startCoord.lat;
+    let currentValueLng = startCoord.lng;
+    let currentSinValue = 0;
+    const step = () => {
+        currentSinValue += sinValueIncrement;
+        currentValueLat += valueIncrementLat * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        currentValueLng += valueIncrementLng * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        if (currentSinValue < Math.PI) {
+            onStep({ lat: currentValueLat, lng: currentValueLng });
+            raf(step);
+        }
+        else {
+            onStep(endCoord);
+            onComplete();
+        }
+    };
+    raf(step);
 };

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

@@ -19,15 +19,15 @@ declare const positions: PropTypes.Requireable<(PropTypes.InferProps<{
     lat: PropTypes.Validator<number>;
     lng: PropTypes.Validator<number>;
 }> | null | undefined)[]>;
-declare const icon: PropTypes.Requireable<any>;
-declare const map: PropTypes.Requireable<any>;
-declare const group: PropTypes.Requireable<any>;
-declare const mapEvents: PropTypes.Requireable<any>;
+declare const icon: PropTypes.Requireable<H.map.DomIcon>;
+declare const map: PropTypes.Requireable<H.Map>;
+declare const group: PropTypes.Requireable<H.map.Group>;
+declare const mapEvents: PropTypes.Requireable<H.mapevents.MapEvents>;
 declare const api: PropTypes.Requireable<PropTypes.InferProps<{
-    map: PropTypes.Requireable<any>;
-    platform: PropTypes.Requireable<any>;
+    map: PropTypes.Requireable<H.Map>;
+    platform: PropTypes.Requireable<H.service.Platform>;
     defaultLayers: PropTypes.Requireable<object>;
-    group: PropTypes.Requireable<any>;
+    group: PropTypes.Requireable<NonNullable<H.Map | H.map.Group | null | undefined>>;
 }>>;
 declare const settings: PropTypes.Requireable<PropTypes.InferProps<{
     baseLayer: PropTypes.Requireable<string>;

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

@@ -0,0 +1,21 @@
+/// <reference types="heremaps" />
+import type { MapCredentials, MapType } from './mapTypes';
+export declare const getPPI: () => 100 | 200;
+export declare const isVectorBased: (enableWebGL: boolean, baseLayer: MapType) => boolean;
+export declare const getPlatform: (credentials: MapCredentials) => H.service.Platform;
+export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType) => H.map.layer.TileLayer;
+export declare const getBaseRasterTileService: (platform: H.service.Platform, style: string, features: string, lang: string) => any;
+export declare const getEngineType: (baseLayerName: string, enableWebGL: boolean) => any;
+export type BaseLayer = {
+    baseLayerName: string;
+    defaultLayers: H.service.DefaultLayers;
+    enableWebGL: boolean;
+    platform: H.service.Platform;
+    engineType: H.Map.EngineType;
+    language: string;
+    vehicleRestrictions: boolean;
+};
+export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }: BaseLayer) => {
+    baseLayer: H.map.layer.Layer;
+    overlayLayer?: H.map.layer.Layer;
+};

package/components/map/utils/rendering.js

@@ -0,0 +1,123 @@
+import { DEFAULT_RASTER_LAYER_FORMAT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_TERRAIN, ENGINE_TYPE_P2D, ENGINE_TYPE_HARP, MAP_TYPE_DEFAULT, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, } from '../components/constants';
+// https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#6-pixels-per-inch-ppi
+// Note: higher PPI image tiles result in larger label size and show more label on the map
+// HERE Raster Tile API v3: 100, 200, 200 or 400, 400
+export const getPPI = () => (window.devicePixelRatio >= 1.7 ? 200 : 100);
+// Even if webgl is enabled, some base layer cannot be rendered in HARP properly
+export const isVectorBased = (enableWebGL, baseLayer) => enableWebGL && baseLayer !== MAP_TYPE_TERRAIN && baseLayer !== MAP_TYPE_FLEET_STYLE;
+// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
+export const getPlatform = (credentials) => {
+    var _a;
+    // Initiate and authenticate your connection to the HERE platform:
+    return new H.service.Platform({
+        apikey: (_a = credentials.apikey) !== null && _a !== void 0 ? _a : '',
+        useHTTPS: location.protocol === 'https:' ? true : false,
+    });
+};
+export const getBaseTileLayer = (rasterTileService, engineType) => {
+    // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
+    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
+        engineType,
+        tileSize: 512,
+    });
+    return new H.map.layer.TileLayer(rasterTileProvider);
+};
+export const getBaseRasterTileService = (platform, style, features, lang) => {
+    // @ts-ignore-next-line "getRasterTileService" is newer that the types
+    return platform === null || platform === void 0 ? void 0 : platform.getRasterTileService({
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        queryParams: {
+            // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language
+            lang,
+            ppi: getPPI(),
+            style,
+            features,
+        },
+    });
+};
+export const getEngineType = (baseLayerName, enableWebGL) => {
+    switch (baseLayerName) {
+        case MAP_TYPE_FLEET_STYLE:
+        case MAP_TYPE_TERRAIN:
+            return ENGINE_TYPE_P2D;
+        default:
+            return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
+    }
+};
+export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }) => {
+    const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';
+    const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;
+    if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {
+        // const rasterTileService = platform?.getRasterTileService({
+        //     format: 'png', // 'png', // or jpg, png8
+        //     queryParams: {
+        //         lang: 'en',
+        //         ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
+        //         // style: 'explore.day',
+        //         features: 'environmental_zones:all',
+        //     },
+        // });
+        // const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
+        //     engineType: enableWebGL ? H.Map.EngineType['HARP'] : H.Map.EngineType['P2D'],
+        //     tileSize: 512,
+        // });
+        // const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
+        // const envLayer = rasterTileLayer;
+        // // create a service that calls the custom endpoint
+        // const service = platform.getOMVService({ path: 'v2/vectortiles/core/mc' });
+        // // create a provider and a layer that use the custom service and a custom style
+        // const provider = new H.service.omv.Provider(
+        //     service,
+        //     new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml')
+        // );
+        // const layer = new H.map.layer.TileLayer(provider, { max: 22 });
+        return {
+            baseLayer: defaultLayers === null || defaultLayers === void 0 ? void 0 : defaultLayers.vector.normal.map,
+            // baseLayer: layer,
+            // overlayLayer: envLayer,
+        };
+    }
+    switch (baseLayerName) {
+        case MAP_TYPE_SATELLITE: {
+            if (enableWebGL) {
+                return {
+                    // @ts-ignore-next-line "hybrid.liteday.raster" is newer that the types
+                    baseLayer: defaultLayers.hybrid.liteday.raster,
+                    // @ts-ignore-next-line "hybrid.day.vector" is newer that the types
+                    overlayLayer: defaultLayers.hybrid.day.vector,
+                };
+            }
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.satellite.day', features, language), engineType),
+            };
+        }
+        case MAP_TYPE_TERRAIN: {
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'topo.day', features, language), engineType),
+            };
+        }
+        case MAP_TYPE_FLEET_STYLE: {
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'logistics.day', features, language), ENGINE_TYPE_P2D),
+            };
+        }
+        case MAP_TYPE_NIGHT: {
+            if (enableWebGL) {
+                return {
+                    // @ts-ignore-next-line "vector.normal.mapnight" is newer that the types
+                    baseLayer: defaultLayers.vector.normal.mapnight,
+                };
+            }
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.night', features, language), engineType),
+            };
+        }
+        default: {
+            // As a replacement for "defaultLayers?.raster.normal.map" which uses the old and deprecated
+            // H.service.MapTileService, we use the Raster Tile Service v3 instead
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.day', features, language), engineType),
+            };
+        }
+    }
+};

package/components/mapMarker/ClusterMapMarker.d.ts

@@ -1,26 +1,49 @@
+import { type MarkerColor } from '../map/utils/mapTypes';
+export type ClusterMapMarkerProps = {
+    /**
+     * Number displayed in the center.
+     */
+    count?: number;
+    /**
+     * Displayed in the orange badge if more than 0.
+     *
+     * @default 0
+     */
+    warningCount?: number;
+    /**
+     * Displayed in the red badge if more than 0.
+     *
+     * @default 0
+     */
+    exceptionCount?: number;
+    /**
+     * Defines if marker is selected or not.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if marker is clickable or not.
+     *
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * Defines the color of the marker.
+     *
+     * Possible values are:
+     * - `bg-map-marker-asset`
+     * - `bg-map-marker-poi`
+     * - `bg-map-marker-geofence`
+     * - `bg-map-marker-route`
+     *
+     * @default 'bg-map-marker-asset'
+     */
+    markerColor?: MarkerColor;
+    /**
+     * Name of a rioglyph icon.
+     */
+    iconName?: string;
+};
+declare const ClusterMapMarker: (props: ClusterMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default ClusterMapMarker;
-declare function ClusterMapMarker(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ClusterMapMarker {
-    namespace defaultProps {
-        const warningCount: number;
-        const exceptionCount: number;
-        const active: boolean;
-        const markerColor: string;
-        const clickable: boolean;
-    }
-    namespace propTypes {
-        export const count: PropTypes.Requireable<number>;
-        const warningCount_1: PropTypes.Requireable<number>;
-        export { warningCount_1 as warningCount };
-        const exceptionCount_1: PropTypes.Requireable<number>;
-        export { exceptionCount_1 as exceptionCount };
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        const markerColor_1: PropTypes.Requireable<string>;
-        export { markerColor_1 as markerColor };
-        export const iconName: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/mapMarker/ClusterMapMarker.js

@@ -1,47 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import 'react';
 import classNames from 'classnames';
-const getColorMapping = markerColor => {
-    switch (markerColor) {
-        case 'bg-map-marker-asset':
-            return 'map-marker-type-asset';
-        case 'bg-map-marker-poi':
-            return 'map-marker-type-poi';
-        case 'bg-map-marker-geofence':
-            return 'map-marker-type-geofence';
-        case 'bg-map-marker-route':
-            return 'map-marker-type-route';
-        default:
-            return 'map-marker-type-asset';
-    }
-};
-const ClusterMapMarker = props => {
-    const { count, exceptionCount, markerColor, warningCount, active, clickable, iconName } = props;
+import { markerColorMapping } from '../map/utils/mapTypes';
+const ClusterMapMarker = (props) => {
+    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, } = props;
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
-    const clusterClasses = classNames('rio-map-cluster-cirlce');
-    const markerType = getColorMapping(markerColor);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: `${clusterClasses} ${markerType} ${active ? 'active' : ''}` }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })) })) })));
-};
-ClusterMapMarker.defaultProps = {
-    warningCount: 0,
-    exceptionCount: 0,
-    active: false,
-    markerColor: 'bg-map-marker-asset',
-    clickable: true,
-};
-ClusterMapMarker.propTypes = {
-    count: PropTypes.number,
-    warningCount: PropTypes.number,
-    exceptionCount: PropTypes.number,
-    clickable: PropTypes.bool,
-    active: PropTypes.bool,
-    markerColor: PropTypes.oneOf([
-        'bg-map-marker-asset',
-        'bg-map-marker-poi',
-        'bg-map-marker-route',
-        'bg-map-marker-geofence',
-    ]),
-    iconName: PropTypes.string,
+    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active', markerColorMapping[markerColor]);
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })) })) })));
 };
 export default ClusterMapMarker;

package/components/mapMarker/MarkerColor.d.ts

@@ -0,0 +1,3 @@
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route"];
+export type MarkerColor = (typeof markerColorOptions)[number];
+export declare const markerColorMapping: Record<MarkerColor, string>;

package/components/mapMarker/MarkerColor.js

@@ -0,0 +1,12 @@
+export const markerColorOptions = [
+    'bg-map-marker-asset',
+    'bg-map-marker-poi',
+    'bg-map-marker-geofence',
+    'bg-map-marker-route',
+];
+export const markerColorMapping = {
+    'bg-map-marker-asset': 'map-marker-type-asset',
+    'bg-map-marker-poi': 'map-marker-type-poi',
+    'bg-map-marker-geofence': 'map-marker-type-geofence',
+    'bg-map-marker-route': 'map-marker-type-route',
+};

package/components/mapMarker/SingleMapMarker.d.ts

@@ -1,35 +1,88 @@
+import { type ReactNode } from 'react';
+import { type MarkerColor } from '../map/utils/mapTypes';
+export type SingleMapMarkerProps = {
+    /**
+     * Defines the rotation of the arrow in deg.
+     *
+     * @default 0
+     */
+    bearing?: number;
+    /**
+     * Text for the marker.
+     */
+    name?: string | ReactNode;
+    /**
+     * Displayed in the orange badge if more than 0.
+     *
+     * @default 0
+     */
+    warningCount?: number;
+    /**
+     * Displayed in the red badge if more than 0.
+     *
+     * @default 0
+     */
+    exceptionCount?: number;
+    /**
+     * Defines if marker is selected.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if marker is clickable or not.
+     *
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * Defines if marker is fixed and has no centering point.
+     *
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Defines if marker is displayed with rounded corners.
+     *
+     * @default false
+     */
+    moving?: boolean;
+    /**
+     * List of rioglyph icon names.
+     */
+    iconNames?: string[];
+    /**
+     * Defines the color of the marker.
+     *
+     * Possible values are:
+     * - `bg-map-marker-asset`
+     * - `bg-map-marker-poi`
+     * - `bg-map-marker-geofence`
+     * - `bg-map-marker-route`
+     *
+     * @default 'bg-map-marker-asset'
+     */
+    markerColor?: MarkerColor;
+    /**
+     * Can be used to add a text-color class to the marker div.
+     */
+    textColor?: string;
+    /**
+     * Used to control the marker's size.
+     *
+     * Possible values are:
+     * - `md`
+     * - `lg`
+     *
+     * @default 'md'
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Whether the marker is only visible on hover.
+     *
+     * @default false
+     */
+    visibleOnHover?: boolean;
+};
+declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;
-declare function SingleMapMarker(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SingleMapMarker {
-    namespace defaultProps {
-        const warningCount: number;
-        const exceptionCount: number;
-        const active: boolean;
-        const markerColor: string;
-        const clickable: boolean;
-        const size: string;
-        const visibleOnHover: boolean;
-    }
-    namespace propTypes {
-        export const bearing: PropTypes.Requireable<number>;
-        export const name: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const warningCount_1: PropTypes.Requireable<number>;
-        export { warningCount_1 as warningCount };
-        const exceptionCount_1: PropTypes.Requireable<number>;
-        export { exceptionCount_1 as exceptionCount };
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        export const fixed: PropTypes.Requireable<boolean>;
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        export const iconNames: PropTypes.Requireable<(string | null | undefined)[]>;
-        export const moving: PropTypes.Requireable<boolean>;
-        const markerColor_1: PropTypes.Requireable<string>;
-        export { markerColor_1 as markerColor };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        const visibleOnHover_1: PropTypes.Requireable<boolean>;
-        export { visibleOnHover_1 as visibleOnHover };
-    }
-}
-import PropTypes from "prop-types";

package/components/mapMarker/SingleMapMarker.js

@@ -1,62 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef } from 'react';
-import PropTypes from 'prop-types';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
-const getIcons = iconNames => {
-    return iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
-};
-const getColorMapping = markerColor => {
-    switch (markerColor) {
-        case 'bg-map-marker-asset':
-            return 'map-marker-type-asset';
-        case 'bg-map-marker-poi':
-            return 'map-marker-type-poi';
-        case 'bg-map-marker-geofence':
-            return 'map-marker-type-geofence';
-        case 'bg-map-marker-route':
-            return 'map-marker-type-route';
-        default:
-            return 'map-marker-type-asset';
-    }
-};
-const getMapDirection = (moving, bearing, rotationStyle) => moving && typeof bearing === 'number' ? _jsx("div", { className: 'rio-map-direction', style: rotationStyle }) : '';
-const SingleMapMarker = props => {
-    const { active, bearing, exceptionCount, iconNames, markerColor, moving, clickable, name, textColor, warningCount, fixed, size, visibleOnHover, } = props;
+import { markerColorMapping } from '../map/utils/mapTypes';
+const MapDirection = ({ moving, bearing }) => (_jsx(_Fragment, { children: moving && _jsx("div", { className: 'rio-map-direction', style: { transform: `rotate(${bearing}deg)` } }) }));
+const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
+const SingleMapMarker = (props) => {
+    const { bearing = 0, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, iconNames, markerColor = 'bg-map-marker-asset', textColor, size = 'md', visibleOnHover = false, } = props;
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center');
-    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', !clickable && 'pointer-events-none', textColor, size === 'lg' && 'rio-map-single-lg', visibleOnHover && 'rio-map-single-visible-on-hover');
-    const rotationStyle = {
-        transform: `rotate(${bearing}deg)`,
-    };
-    const mapDirection = getMapDirection(moving, bearing, rotationStyle);
-    const markerType = getColorMapping(markerColor);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [_jsxs("div", Object.assign({ className: `${singleClasses} ${markerType} ${active ? 'active' : ''}` }, { children: [mapDirection, iconNames && getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name && name })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })), _jsx("div", { className: 'rio-map-position-arrow' }), _jsx("div", { className: `rio-map-position ${size === 'lg' ? 'rio-map-position-lg' : ''} cursor-pointer` })] })) })));
-};
-SingleMapMarker.defaultProps = {
-    warningCount: 0,
-    exceptionCount: 0,
-    active: false,
-    markerColor: 'bg-map-marker-asset',
-    clickable: true,
-    size: 'md',
-    visibleOnHover: false,
-};
-SingleMapMarker.propTypes = {
-    bearing: PropTypes.number,
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    warningCount: PropTypes.number,
-    exceptionCount: PropTypes.number,
-    active: PropTypes.bool,
-    fixed: PropTypes.bool,
-    clickable: PropTypes.bool,
-    iconNames: PropTypes.arrayOf(PropTypes.string),
-    moving: PropTypes.bool,
-    markerColor: PropTypes.oneOf([
-        'bg-map-marker-asset',
-        'bg-map-marker-poi',
-        'bg-map-marker-route',
-        'bg-map-marker-geofence',
-    ]),
-    size: PropTypes.oneOf(['md', 'lg']),
-    visibleOnHover: PropTypes.bool,
+    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', !clickable && 'pointer-events-none', textColor, size === 'lg' && 'rio-map-single-lg', visibleOnHover && 'rio-map-single-visible-on-hover', active && 'active', markerColorMapping[markerColor]);
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapDirection, { moving: moving, bearing: bearing }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })), _jsx("div", { className: 'rio-map-position-arrow' }), _jsx("div", { className: `rio-map-position ${size === 'lg' ? 'rio-map-position-lg' : ''} cursor-pointer` })] })) })));
 };
 export default SingleMapMarker;

package/components/menuItems/MenuItem.d.ts

@@ -3,9 +3,25 @@ export type MenuItemProps = {
     index?: number;
     value?: string | React.ReactNode;
     active?: boolean;
+    /**
+     * Setting "disabled" to true will disable the respective item.
+     *
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Will add a divider line between the items inside the dropdown.
+     *
+     * @default false
+     */
     divider?: boolean;
     header?: boolean;
+    /**
+     * Callback function triggered when an item is selected.
+     * @param value
+     * @param event
+     * @returns
+     */
     onSelect?: (value: number | undefined, event: React.MouseEvent<HTMLLIElement>) => void;
     closeMenu?: VoidFunction;
     onMouseEnter?: (event: React.MouseEvent<HTMLLIElement>) => void;

package/components/menuItems/MenuItem.js

@@ -12,7 +12,6 @@ const MenuItem = (props) => {
     }
     const role = divider ? 'separator' : 'presentation';
     const classes = classNames(divider && 'divider pointer-events-none', disabled && 'disabled', active && 'active');
-    const menuLink = _jsx("a", Object.assign({ role: 'menuitem' }, { children: value }));
     const handleSelectItem = (event) => {
         if (!disabled) {
             onSelect(index, event);
@@ -29,6 +28,6 @@ const MenuItem = (props) => {
     if (header) {
         return _jsx(DropdownHeader, { label: value, center: false });
     }
-    return (_jsx("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: header ? value : menuLink })));
+    return (_jsx("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: _jsx("a", Object.assign({ role: 'menuitem' }, { children: value })) })));
 };
 export default MenuItem;