@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/lib/es/src/components/listMenu/ListMenu.d.ts

@@ -0,0 +1,73 @@
+import React, { type ReactNode } from 'react';
+import { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';
+export type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';
+export type ListMenuProps<T extends ListMenuNavItem> = {
+    /**
+     * List of menu item groups to be shown.
+     */
+    menuItems: ListMenuItem<T>[];
+    /**
+     * Enables the filter.
+     *
+     * @default false
+     */
+    enableFilter?: boolean;
+    /**
+     * Focus the filter input.
+     *
+     * @default false
+     */
+    focusFilter?: boolean;
+    /**
+     * Define the attribute key for filtering.
+     *
+     * @default 'key'
+     */
+    filterKey?: keyof T;
+    /**
+     * The placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Gets called when the filter input changes.
+     *
+     * @param value
+     * @returns
+     */
+    onFilterChange?: (value: string) => void;
+    /**
+     * A localized message to be shown when the filter result is empty.
+     */
+    notFoundMessage?: string | ReactNode;
+    /**
+     * The menu uses collapses on smaller screens using an expander panel.
+     *
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Enables automatic closing of the expander panel.
+     *
+     * Only relevant when using the `responsive` flag. Note: Make sure to not stop the events from bubbling up when
+     * clicking on a list item!
+     *
+     * Using `event.stopPropagation()` will prevent the panel from closing.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * Additional classes to be set on the menu group element.
+     */
+    groupClassName?: string;
+    /**
+     * Additional addon for the input group.
+     */
+    trailingInputAddon?: React.ReactNode;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+declare const ListMenu: <T extends ListMenuNavItem>(props: ListMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ListMenu;

package/lib/es/src/components/listMenu/ListMenu.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// biome-ignore lint/style/useImportType: <explanation>
+const react_1 = require("react");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOnce"));
+const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
+const ExpanderPanel_1 = tslib_1.__importDefault(require("../expander/ExpanderPanel"));
+const ListMenuGroup_1 = tslib_1.__importDefault(require("./ListMenuGroup"));
+const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
+const useWindowResize_1 = tslib_1.__importDefault(require("../../hooks/useWindowResize"));
+const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
+const RESIZE_THROTTLING = 10;
+const MOBILE_MAX_WIDTH = 580;
+const filterMenuItems = (items, value, filterKey) => items.map(item => ({
+    ...item,
+    navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())),
+}));
+const hasMenuItems = (items) => items.find(({ navItems }) => !(0, isEmpty_1.default)(navItems));
+const ListMenu = (props) => {
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon, ...remainingProps } = props;
+    const [filterValue, setFilterValue] = (0, react_1.useState)('');
+    const [isMobileMode, setIsMobileMode] = (0, react_1.useState)(false);
+    const [isExpanderOpen, setIsExpanderOpen] = (0, react_1.useState)(false);
+    const [mobileHeader, setMobileHeader] = (0, react_1.useState)('');
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const buildMobileHeader = () => {
+        if (responsive && listRef.current) {
+            const [activeElement] = listRef.current.getElementsByClassName('active');
+            setMobileHeader((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex align-items-center', children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), (0, jsx_runtime_1.jsx)("span", { children: activeElement?.innerText })] }));
+        }
+    };
+    // clear filter input on esc
+    (0, useEsc_1.default)(() => {
+        if (enableFilter && inputRef.current === document.activeElement) {
+            setFilterValue('');
+        }
+    });
+    // Convert the menu to an expandable panel for smaller screens
+    const handleMobileSize = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
+        buildMobileHeader();
+        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
+    });
+    // Render a dropdown menu on mobile on mount
+    (0, react_1.useEffect)(handleMobileSize, []);
+    (0, useWindowResize_1.default)(handleMobileSize);
+    const focusInput = () => {
+        inputRef.current?.focus();
+    };
+    (0, useKey_1.default)((event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            focusInput();
+        }
+    });
+    // Focus filter input if requested
+    (0, useEffectOnce_1.default)(() => {
+        focusFilter && focusInput();
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => buildMobileHeader, [menuItems]);
+    const handleClear = () => focusFilter && focusInput();
+    const handleFilterChange = (value) => {
+        setFilterValue(value);
+        onFilterChange(value);
+    };
+    const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
+    const handleExpanderBodyClick = (event) => {
+        const isListItem = event.target.parentElement?.tagName.toLowerCase() === 'li';
+        if (autoClose && isListItem) {
+            setIsExpanderOpen(false);
+        }
+    };
+    const formClassNames = (0, classnames_1.default)('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0', 'z-index-1');
+    const listMenu = ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", { className: formClassNames, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [(0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] }) })), !hasMenuItems(filteredMenuItems) && ((0, jsx_runtime_1.jsx)("div", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map((menuGroup, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
+            (0, jsx_runtime_1.jsx)(ListMenuGroup_1.default, { className: groupClassName, menuGroup: menuGroup }, index)))] }));
+    if (responsive && isMobileMode) {
+        return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, { title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default', children: (0, jsx_runtime_1.jsx)("div", { onClick: handleExpanderBodyClick, children: listMenu }) }));
+    }
+    return listMenu;
+};
+exports.default = ListMenu;

package/lib/es/src/components/listMenu/ListMenuGroup.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+export type ListMenuNavItem = {
+    /**
+     * The name or key of the menu nav item.
+     *
+     * This key will be used for filtering, hence it should match the translated menu item name.
+     */
+    key: string;
+    /**
+     * The menu nav item itself.
+     *
+     * This can be a simple `a`, `NavLink`, `Link`, `span` or even a `FormattedMessage`.
+     */
+    item: string | ReactNode;
+    /**
+     * Disables the list item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the current menu item is a child of another menu item.
+     */
+    isSubItem?: boolean;
+} & {
+    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;
+};
+export type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {
+    /**
+     * The optional group header to be shown.
+     *
+     * This can also be a component such as a `FormattedMessage`.
+     */
+    group?: string | ReactNode;
+    /**
+     * The optional group header link to be shown.
+     *
+     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this
+     * case, the `group` prop can be omitted.
+     */
+    groupNavItem?: string | ReactNode;
+    /**
+     * The optional badge displayed alongside the group or nav items.
+     *
+     * This can be text or a React node for additional flexibility.
+     */
+    badge?: string | ReactNode;
+    /**
+     * The type of badge to display.
+     *
+     * Determines the visual style of the badge. Available types include:
+     * - `muted`: A subdued badge style.
+     * - `success`: Indicates a successful state.
+     * - `info`: Represents informational content.
+     * - `warning`: Warns of potential issues.
+     * - `danger`: Highlights a critical state.
+     */
+    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * The list of all menu items of a group.
+     */
+    navItems: T[];
+};
+type ListMenuGroupProps<T extends ListMenuNavItem> = {
+    menuGroup: ListMenuItem<T>;
+    className: string;
+};
+declare const ListMenuGroup: <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export default ListMenuGroup;

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

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

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

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

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

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

package/lib/es/src/components/loadMore/LoadMoreButton.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { type ProgressBarStyle } from './LoadMoreProgress';
+type LoadMoreButtonProps = {
+    /**
+     * The number of already loaded elements. If set to 0 the progress bar will not be shown.
+     * @default 0
+     */
+    loaded?: number;
+    /**
+     * The number of all elements. If set to 0 the progress bar will not be shown.
+     * @default 100
+     */
+    total?: number;
+    /**
+     * The message that will be shown when everything is loaded.
+     */
+    noMoreMessage?: string | ReactNode;
+    /**
+     * The text for the load more button.
+     */
+    loadMoreMessage?: string | ReactNode;
+    /**
+     * If set to `false`, the button will not be rendered. The loadMoreMessage will be shown as text.
+     * @default true
+     */
+    isInteractive?: boolean;
+    /**
+     * Callback fired when clicking on the load more button.
+     */
+    onLoadMore?: VoidFunction;
+    /**
+     * In case the component is used on white background, set the progress bar style to `gray`.
+     * @default 'white'
+     */
+    progressBarStyle?: ProgressBarStyle;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+export declare const LoadMoreButton: (props: LoadMoreButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default LoadMoreButton;

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

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

package/lib/es/src/components/loadMore/LoadMoreProgress.d.ts

@@ -0,0 +1,12 @@
+declare const STYLE: {
+    readonly WHITE: "white";
+    readonly GRAY: "gray";
+};
+export type ProgressBarStyle = (typeof STYLE)[keyof typeof STYLE];
+type LoadMoreProgressProps = {
+    loaded: number;
+    total: number;
+    progressBarStyle?: ProgressBarStyle;
+};
+export declare const LoadMoreProgress: ({ loaded, total, progressBarStyle }: LoadMoreProgressProps) => import("react/jsx-runtime").JSX.Element | null;
+export default LoadMoreProgress;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadMoreProgress = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const STYLE = {
+    WHITE: 'white',
+    GRAY: 'gray',
+};
+const LoadMoreProgress = ({ loaded = 0, total = 0, progressBarStyle = STYLE.WHITE }) => {
+    if (!loaded || !total) {
+        return null;
+    }
+    const width = `${(loaded / total) * 100}%`;
+    const progressClassName = (0, classnames_1.default)('progress', 'height-2 margin-bottom-10', progressBarStyle === STYLE.GRAY ? 'bg-lighter' : 'bg-white');
+    const progressBarClassName = (0, classnames_1.default)('progress-bar', progressBarStyle === STYLE.GRAY &&
+        width !== '100%' &&
+        'border border-right-only border-color-white border-width-2');
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'text-center margin-bottom-3', children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: loaded }), (0, jsx_runtime_1.jsx)("span", { className: 'margin-left-5 margin-right-5', children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: 'text-medium', children: total })] }), (0, jsx_runtime_1.jsx)("div", { className: progressClassName, children: (0, jsx_runtime_1.jsx)("div", { className: progressBarClassName, style: { width } }) })] }));
+};
+exports.LoadMoreProgress = LoadMoreProgress;
+exports.default = exports.LoadMoreProgress;

package/lib/es/src/components/map/components/Map.d.ts

@@ -0,0 +1,13 @@
+import type { MapProps, MapType } from '../utils/mapTypes';
+declare const Map: {
+    (props: MapProps): import("react/jsx-runtime").JSX.Element;
+    TYPE_DEFAULT: MapType;
+    TYPE_FLEET_STYLE: MapType;
+    TYPE_SATELLITE: MapType;
+    TYPE_TERRAIN: MapType;
+    TYPE_NIGHT: MapType;
+    LAYER_INCIDENTS: string;
+    LAYER_TRAFFIC: string;
+    LAYER_ROAD_RESTRICTIONS: string;
+};
+export default Map;

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

@@ -0,0 +1,221 @@
+"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, pixelRatio = constants_1.DEFAULT_PIXEL_RATIO, 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 || pixelRatio : pixelRatio;
+    // 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/src/components/map/components/MapContext.d.ts

@@ -0,0 +1,20 @@
+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/src/components/map/components/MapContext.js

@@ -0,0 +1,18 @@
+"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/src/components/map/components/MapElements.d.ts

@@ -0,0 +1,6 @@
+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;