@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

package/components/map/components/features/layers/MapOverlayLayers.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import map from 'lodash/fp/map';
-import { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';
-import IncidentsLayer from './overlayLayers/IncidentsLayer';
-import RoadRestrictionLayer from './overlayLayers/RoadRestrictionLayer';
-import TrafficLayer from './overlayLayers/TrafficLayer';
+import { map } from 'es-toolkit/compat';
+import { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from "../../constants.js";
+import IncidentsLayer from "./overlayLayers/IncidentsLayer.js";
+import RoadRestrictionLayer from "./overlayLayers/RoadRestrictionLayer.js";
+import TrafficLayer from "./overlayLayers/TrafficLayer.js";
 const MapOverlayLayers = (props) => {
     const { layers } = props;
-    const layersToRender = map(layer => {
+    const layersToRender = map(layers, layer => {
         switch (layer) {
             case MAP_LAYER_TRAFFIC:
                 return _jsx(TrafficLayer, { id: MAP_LAYER_TRAFFIC }, layer);
@@ -17,7 +17,7 @@ const MapOverlayLayers = (props) => {
             default:
                 return null;
         }
-    }, layers);
+    });
     return _jsx(_Fragment, { children: layersToRender });
 };
 export default MapOverlayLayers;

package/components/map/components/features/layers/MarkerLayer.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';
 export type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {
     simpleTheme?: ClusterTheme;

package/components/map/components/features/layers/MarkerLayer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ClusterLayer from './clustering/ClusterLayer';
-import { wrapSimpleTheme } from '../../../utils/clustering';
-import { useMapContext } from '../../MapContext';
+import ClusterLayer from "./clustering/ClusterLayer.js";
+import { wrapSimpleTheme } from "../../../utils/clustering.js";
+import { useMapContext } from "../../MapContext.js";
 /*
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useLayoutEffect } from 'react';
 // import ReactDomServer from 'react-dom/server';
-import { useMapContext } from '../../../MapContext';
-import { useUpdateProp, useUpdateEventListenerMap } from '../../../../utils/hooks';
+import { useMapContext } from "../../../MapContext.js";
+import { useUpdateProp, useUpdateEventListenerMap } from "../../../../utils/hooks.js";
 const DEFAULT_DATA_CONVERTER = (pos, index) => new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);
 const convertData = (data, converterFunc = DEFAULT_DATA_CONVERTER) => data.map((value, index) => converterFunc(value, index));
 const DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();

package/components/map/components/features/layers/clustering/SimpleClusterLayer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ClusterLayer from './ClusterLayer';
-import { wrapSimpleTheme } from '../../../../utils/clustering';
+import ClusterLayer from "./ClusterLayer.js";
+import { wrapSimpleTheme } from "../../../../utils/clustering.js";
 const SimpleClusterLayer = (props) => {
     const { simpleTheme, ...rest } = props;
     return _jsx(ClusterLayer, { ...rest, clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) });

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js

@@ -1,9 +1,8 @@
 /* eslint-disable max-len */
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useState } from 'react';
-import { useMapContext } from '../../../MapContext';
-import { MAP_LAYER_INCIDENTS } from '../../../constants';
+import { useMapContext } from "../../../MapContext.js";
+import { MAP_LAYER_INCIDENTS } from "../../../constants.js";
 export const CLUSTER_ICON_WIDTH = 34;
 export const CLUSTER_ICON_HEIGHT = 38;
 export const MARKER_ICON_WIDTH = 26;
@@ -116,7 +115,7 @@ const IncidentsLayer = () => {
                             });
                             api.ui?.addBubble(bubble);
                         });
-                        noiseMarker.addEventListener('pointerleave', (event) => {
+                        noiseMarker.addEventListener('pointerleave', (_event) => {
                             clearBubbles();
                         });
                         return noiseMarker;
@@ -153,7 +152,7 @@ const IncidentsLayer = () => {
             }
         };
     }, [api.map]);
-    const getTrafficIncidents = (clusteredDataProvider, bbox, center, lang) => {
+    const getTrafficIncidents = (clusteredDataProvider, bbox, _center, lang) => {
         // NOTE: API traffic doesn't provide information for a bounding box got from a zoom level lower than 11
         if (map && map.getZoom() < 11) {
             console.log('Too much incidents to show, please zoom in');
@@ -183,7 +182,7 @@ const IncidentsLayer = () => {
             sourceUpdated: incidents.sourceUpdated,
             results: [],
         };
-        incidents.results.map(incident => {
+        incidents.results.forEach(incident => {
             const lat = incident.location.shape.links[0].points[0].lat;
             const lng = incident.location.shape.links[0].points[0].lng;
             const incidentData = {

package/components/map/components/features/layers/overlayLayers/Layer.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { useMapContext } from '../../../MapContext';
+import { useMapContext } from "../../../MapContext.js";
 const Layer = (props) => {
     const { id, createLayer } = props;
     const [currentLayers, setCurrentLayers] = useState([]);

package/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D, } from '../../../constants';
-import Layer from './Layer';
-import { useMapContext } from '../../../MapContext';
-import { isVectorBased } from '../../../../utils/rendering';
+import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D } from "../../../constants.js";
+import Layer from "./Layer.js";
+import { useMapContext } from "../../../MapContext.js";
+import { isVectorBased } from "../../../../utils/rendering.js";
 // Layer for rendering truck road signs
 const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
     // @ts-ignore-next-line: according to the Here docs, the engine type exists

package/components/map/components/features/layers/overlayLayers/TrafficLayer.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D, } from '../../../constants';
-import Layer from './Layer';
-import { useMapContext } from '../../../MapContext';
-import { isVectorBased } from '../../../../utils/rendering';
+import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D } from "../../../constants.js";
+import Layer from "./Layer.js";
+import { useMapContext } from "../../../MapContext.js";
+import { isVectorBased } from "../../../../utils/rendering.js";
 const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
     // Traffic
     const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');

package/components/map/components/features/settings/MapSettingsItem.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 const MapSettingsItem = (props) => {
     const { onClick = noop, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
     const activeIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');

package/components/map/components/features/settings/MapSettingsPanel.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export type MapSettingsPanelProps = {
     className?: string;
 };

package/components/map/components/features/settings/MapSettingsPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 const MapSettingsPanel = (props) => {
     const { className = '', children } = props;
     const panelClassNames = classNames('MapSettingsPanel', className);

package/components/map/components/features/settings/MapSettingsTile.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type MapSettingsTileProps = {
-    onToggle?: () => void;
+    onToggle?: (newState: boolean) => void;
     tooltip?: React.ReactNode;
     panel?: React.ReactNode;
     items?: JSX.Element[] | undefined;

package/components/map/components/features/settings/MapSettingsTile.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import classNames from 'classnames';
-import noop from 'lodash/fp/noop';
+import { noop } from 'es-toolkit/function';
 import { usePopper } from 'react-popper';
-import OverlayTrigger from '../../../../overlay/OverlayTrigger';
-import Tooltip from '../../../../tooltip/Tooltip';
-import useClickOutside from '../../../../../hooks/useClickOutside';
-import MenuItemList from '../../../../menuItems/MenuItemList';
-import MenuItem from '../../../../menuItems/MenuItem';
-import { isMobileScreen } from '../../../../../utils/deviceUtils';
+import OverlayTrigger from "../../../../overlay/OverlayTrigger.js";
+import Tooltip from "../../../../tooltip/Tooltip.js";
+import useClickOutside from "../../../../../hooks/useClickOutside.js";
+import MenuItemList from "../../../../menuItems/MenuItemList.js";
+import MenuItem from "../../../../menuItems/MenuItem.js";
+import { isMobileScreen } from "../../../../../utils/deviceUtils.js";
 const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
 const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
 const getComponentWithTooltip = (component, tooltip) => {
@@ -48,7 +48,8 @@ const MapSettingsTile = (props) => {
             : [],
     });
     const dropdownWrapperRef = useClickOutside((event) => {
-        if (toggleRef?.contains(event.target)) {
+        const target = event.target instanceof Node ? event.target : null;
+        if (target && toggleRef?.contains(target)) {
             return;
         }
         if (isOpen) {

package/components/map/components/features/settings/ZoomButtons.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type ZoomButtonsProps = {
     onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;
     onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;

package/components/map/components/features/settings/ZoomButtons.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';
+import { MapIcon, ZOOM_IN, ZOOM_OUT } from "../../../icons/MapIcon.js";
 const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
     const buttonClasses = classNames('ZoomButtons');
     return (_jsxs("div", { className: buttonClasses, children: [_jsx("div", { className: 'MapSettingsTile', onClick: onZoomIn, children: _jsx(MapIcon, { name: ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) }), _jsx("div", { className: 'MapSettingsTileSpacer' }), _jsx("div", { className: 'MapSettingsTile', onClick: onZoomOut, children: _jsx(MapIcon, { name: ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) })] }));

package/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type MapAdditionalLayerSettingsProps = {
     activeBuiltinLayers?: string[];
     activeLayers?: string[];

package/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import isEmpty from 'lodash/fp/isEmpty';
-import union from 'lodash/fp/union';
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon } from '../../../../icons/MapIcon';
+import { isEmpty } from 'es-toolkit/compat';
+import { union } from 'es-toolkit/array';
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon } from "../../../../icons/MapIcon.js";
 const MapAdditionalLayerSettings = (props) => {
     const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export type MapClusterSettingsProps = {
     onToggle?: (setShowCluster: boolean) => void;
     onShowClusterChange?: (setShowCluster: boolean) => boolean;

package/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import compact from 'lodash/fp/compact';
-import MapSettingsPanel from '../MapSettingsPanel';
-import MapSettingsItem from '../MapSettingsItem';
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, CLUSTER_ACTIVE, CLUSTER_INACTIVE, NO_CLUSTER_ACTIVE, NO_CLUSTER_INACTIVE, } from '../../../../icons/MapIcon';
-import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
+import { noop } from 'es-toolkit/function';
+import { compact } from 'es-toolkit/compat';
+import MapSettingsPanel from "../MapSettingsPanel.js";
+import MapSettingsItem from "../MapSettingsItem.js";
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon, CLUSTER_ACTIVE, CLUSTER_INACTIVE, NO_CLUSTER_ACTIVE, NO_CLUSTER_INACTIVE, } from "../../../../icons/MapIcon.js";
+import MapSettingsDropdownHeader from "../items/MapSettingsDropdownHeader.js";
 const MapClusterSettings = (props) => {
     const { showCluster = true, onShowClusterChange = noop, onToggle = noop, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText, ...remainingProps } = props;
     const handleShowCluster = (setShowCluster) => {

package/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import isEmpty from 'lodash/fp/isEmpty';
-import map from 'lodash/fp/map';
-import union from 'lodash/fp/union';
-import noop from 'lodash/fp/noop';
-import MapSettingsPanel from '../MapSettingsPanel';
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon } from '../../../../icons/MapIcon';
+import { isEmpty, map, union } from 'es-toolkit/compat';
+import { noop } from 'es-toolkit/function';
+import MapSettingsPanel from "../MapSettingsPanel.js";
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon } from "../../../../icons/MapIcon.js";
 const MapLayerSettings = (props) => {
     const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop, ...remainingProps } = props;
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);
@@ -14,11 +12,11 @@ const MapLayerSettings = (props) => {
     const isActive = !isEmpty(allActiveLayer);
     // Inject onMapLayerChange from the MapContext which will be handled
     // in the main Map component.
-    const enrichedLayers = map(layer => React.cloneElement(layer, {
+    const enrichedLayers = map(layers, layer => React.cloneElement(layer, {
         key: layer?.key ?? `MapLayerSettings_${crypto.randomUUID()}`,
         activeBuiltinLayers,
         onMapLayerChange,
-    }), layers);
+    }));
     return (_jsx(MapSettingsTile, { className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && _jsx(MapSettingsPanel, { children: enrichedLayers }), ...remainingProps }));
 };
 export default MapLayerSettings;

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { MapType } from '../../../../utils/mapTypes';
 export type MapTypeSettingsProps = {
     mapType?: string;

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import noop from 'lodash/fp/noop';
-import compact from 'lodash/fp/compact';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, } from '../../../constants';
-import MapSettingsPanel from '../MapSettingsPanel';
-import MapSettingsItem from '../MapSettingsItem';
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELLITE_ACTIVE, MAP_TYPE_SATELLITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE, } from '../../../../icons/MapIcon';
-import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
+import { noop } from 'es-toolkit/function';
+import { compact } from 'es-toolkit/compat';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, } from "../../../constants.js";
+import MapSettingsPanel from "../MapSettingsPanel.js";
+import MapSettingsItem from "../MapSettingsItem.js";
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon, MAP_TYPE_FLAT_ACTIVE, MAP_TYPE_FLAT_INACTIVE, MAP_TYPE_FLAT_TRUCK_ACTIVE, MAP_TYPE_FLAT_TRUCK_INACTIVE, MAP_TYPE_SATELLITE_ACTIVE, MAP_TYPE_SATELLITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE, } from "../../../../icons/MapIcon.js";
+import MapSettingsDropdownHeader from "../items/MapSettingsDropdownHeader.js";
 const MapTypeSettings = (props) => {
     const { mapType, onMapTypeChange = noop, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText, ...remainingProps } = props;
     const type = useMemo(() => ({

package/components/map/components/features/settings/buttons/MapBoundingBoxButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import MapSettingsTile from '../MapSettingsTile';
 export type MapBoundingBoxButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
     onToggle?: () => void;

package/components/map/components/features/settings/buttons/MapBoundingBoxButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, BOUNDING_BOX_ACTIVE, BOUNDING_BOX_INACTIVE } from '../../../../icons/MapIcon';
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon, BOUNDING_BOX_ACTIVE, BOUNDING_BOX_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapBoundingBoxButton = (props) => {
     const { isActive = false, onToggle, ...remainingProps } = props;
     return (_jsx(MapSettingsTile, { className: 'MapBoundingBoxButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: BOUNDING_BOX_ACTIVE, className: 'MapBoundingBoxButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: BOUNDING_BOX_INACTIVE, className: 'MapBoundingBoxButtonIconInactive' }), onToggle: onToggle, ...remainingProps }));

package/components/map/components/features/settings/buttons/MapCenterMarkerButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon } from '../../../../icons/MapIcon';
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon } from "../../../../icons/MapIcon.js";
 const MapCenterMarkerButton = (props) => {
     const { isActive = false, onToggle, ...remainingProps } = props;
     return (_jsx(MapSettingsTile, { className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle, ...remainingProps }));

package/components/map/components/features/settings/buttons/MapLockMarkerButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import MapSettingsTile from '../MapSettingsTile';
 export type MapLockMarkerButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
     onToggle?: () => void;

package/components/map/components/features/settings/buttons/MapLockMarkerButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import MapSettingsTile from '../MapSettingsTile';
-import { MapIcon, LOCK_ACTIVE, LOCK_INACTIVE } from '../../../../icons/MapIcon';
+import MapSettingsTile from "../MapSettingsTile.js";
+import { MapIcon, LOCK_ACTIVE, LOCK_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapLockMarkerButton = (props) => {
     const { isActive = false, onToggle, ...remainingProps } = props;
     return (_jsx(MapSettingsTile, { className: 'MapLockMarkerButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: LOCK_ACTIVE, className: 'MapLockMarkerButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: LOCK_INACTIVE, className: 'MapLockMarkerButtonIconInactive' }), onToggle: onToggle, ...remainingProps }));

package/components/map/components/features/settings/items/MapCustomerPoiSettingsItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import MapSettingsItem from '../MapSettingsItem';
-import { MapIcon, SYSTEM_POIS_ACTIVE, SYSTEM_POIS_INACTIVE } from '../../../../icons/MapIcon';
+import { noop } from 'es-toolkit/function';
+import MapSettingsItem from "../MapSettingsItem.js";
+import { MapIcon, SYSTEM_POIS_ACTIVE, SYSTEM_POIS_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapCustomerPoiSettingsItem = (props) => {
     const { isActive, onToggle = noop, ...remainingProps } = props;
     const handleToggle = (setIsShown) => onToggle(setIsShown);

package/components/map/components/features/settings/items/MapLayerIncidentsItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import { MAP_LAYER_INCIDENTS } from '../../../constants';
-import MapSettingsItem from '../MapSettingsItem';
-import { MapIcon, CONSTRUCTION_ACTIVE, CONSTRUCTION_INACTIVE } from '../../../../icons/MapIcon';
+import { noop } from 'es-toolkit/function';
+import { MAP_LAYER_INCIDENTS } from "../../../constants.js";
+import MapSettingsItem from "../MapSettingsItem.js";
+import { MapIcon, CONSTRUCTION_ACTIVE, CONSTRUCTION_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapLayerIncidentsItem = (props) => {
     const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
     const handleToggle = () => {

package/components/map/components/features/settings/items/MapLayerRoadRestrictionsItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import { MAP_LAYER_ROAD_RESTRICTIONS } from '../../../constants';
-import MapSettingsItem from '../MapSettingsItem';
-import { MapIcon, ROAD_RESTRICTIONS_ACTIVE, ROAD_RESTRICTIONS_INACTIVE } from '../../../../icons/MapIcon';
+import { noop } from 'es-toolkit/function';
+import { MAP_LAYER_ROAD_RESTRICTIONS } from "../../../constants.js";
+import MapSettingsItem from "../MapSettingsItem.js";
+import { MapIcon, ROAD_RESTRICTIONS_ACTIVE, ROAD_RESTRICTIONS_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapLayerRoadRestrictionsItem = (props) => {
     const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
     const handleToggle = () => {

package/components/map/components/features/settings/items/MapLayerTrafficItem.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import { MAP_LAYER_TRAFFIC } from '../../../constants';
-import MapSettingsItem from '../MapSettingsItem';
-import { MapIcon, TRAFFIC_ACTIVE, TRAFFIC_INACTIVE } from '../../../../icons/MapIcon';
+import { noop } from 'es-toolkit/function';
+import { MAP_LAYER_TRAFFIC } from "../../../constants.js";
+import MapSettingsItem from "../MapSettingsItem.js";
+import { MapIcon, TRAFFIC_ACTIVE, TRAFFIC_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapLayerTrafficItem = (props) => {
     const { activeBuiltinLayers = [], onMapLayerChange = noop, onToggle = noop, ...remainingProps } = props;
     const handleToggle = () => {

package/components/map/components/features/settings/items/MapSettingsDropdownHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownHeader from '../../../../../selects/DropdownHeader';
+import DropdownHeader from "../../../../../selects/DropdownHeader.js";
 const MapSettingsDropdownHeader = (props) => {
     const { ...remainingProps } = props;
     return _jsx(DropdownHeader, { className: 'MapSettingsDropdownHeader', ...remainingProps });

package/components/map/components/features/settings/items/MapWorkshopPoiSettingsItem.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import noop from 'lodash/fp/noop';
-import MapSettingsItem from '../MapSettingsItem';
-import { MapIcon, WORKSHOP_POIS_ACTIVE, WORKSHOP_POIS_INACTIVE } from '../../../../icons/MapIcon';
+import { noop } from 'es-toolkit/function';
+import MapSettingsItem from "../MapSettingsItem.js";
+import { MapIcon, WORKSHOP_POIS_ACTIVE, WORKSHOP_POIS_INACTIVE } from "../../../../icons/MapIcon.js";
 const MapWorkshopPoiSettingsItem = (props) => {
     const { isActive = false, onToggle = noop, ...remainingProps } = props;
     const handleToggle = (setIsShown) => onToggle(setIsShown);

package/components/map/utils/clustering.js

@@ -1,4 +1,4 @@
-import { getOrCreateIcon, isDomMakerNeeded } from '../components/features/basics/Marker';
+import { getOrCreateIcon, isDomMakerNeeded } from "../components/features/basics/Marker.js";
 const getBoundingBoxForCluster = (cluster) => {
     let minLat = null;
     let minLng = null;

package/components/map/utils/hooks.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useMapContext } from '../components/MapContext';
-import { addEventListenerMap, removeEventListenerMap } from './eventHandling';
+import { useMapContext } from "../components/MapContext.js";
+import { addEventListenerMap, removeEventListenerMap } from "./eventHandling.js";
 export const useUpdateProp = (mapObject, propSetter, value) => {
     useEffect(() => {
         if (mapObject) {

package/components/map/utils/localization.js

@@ -384,7 +384,7 @@ export const mapToLongLocale = (locale) => {
     if (threeToTwoMapping[key]) {
         return key;
     }
-    else if (twoToThreeMapping[key]) {
+    if (twoToThreeMapping[key]) {
         return twoToThreeMapping[key];
     }
     return 'eng';
@@ -395,7 +395,7 @@ export const mapToShortLocale = (locale) => {
     if (twoToThreeMapping[key]) {
         return key;
     }
-    else if (threeToTwoMapping[key]) {
+    if (threeToTwoMapping[key]) {
         return threeToTwoMapping[key];
     }
     return 'en';

package/components/map/utils/mapUtils.js

@@ -1,13 +1,10 @@
-import flatMap from 'lodash/fp/flatMap';
-import filter from 'lodash/fp/filter';
-import flow from 'lodash/fp/flow';
-import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';
+import { filter, flatMap, flow } from 'es-toolkit/compat';
+import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from "./positions.js";
 // Internal use for setting the map to a given bounding box
 export const getMapBounds = (boundingBox) => {
     const { top, left, bottom, right } = boundingBox;
     return new H.geo.Rect(top, left, bottom, right);
 };
-// biome-ignore lint/suspicious/noExplicitAny: <explanation>
 const typeFilterFunction = (hereType) => (obj) => obj instanceof hereType;
 const markerFilterFunction = typeFilterFunction(H.map.AbstractMarker);
 const groupFilterFunction = typeFilterFunction(H.map.Group);
@@ -68,8 +65,8 @@ export const createUtils = (mapApi) => {
         getObjects: () => mapApi.getObjects(),
         getLayers: () => mapApi.getLayers().asArray(),
         getBaseLayer: () => mapApi.getBaseLayer(),
-        getGroups: () => filter(groupFilterFunction)(mapApi.getObjects()),
-        getMarkers: () => filter(markerFilterFunction)(mapApi.getObjects()),
+        getGroups: () => filter(mapApi.getObjects(), groupFilterFunction),
+        getMarkers: () => filter(mapApi.getObjects(), markerFilterFunction),
         getRoutePolylines: () => flow(filter(groupFilterFunction), flatMap((group) => group.getObjects()), filter(polylineFilterFunction))(mapApi.getObjects()),
         getPosition,
         calculateBoundingBox,

package/components/map/utils/rendering.js

@@ -1,4 +1,4 @@
-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';
+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.js";
 // 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

package/components/mapMarker/ClusterMapMarker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { markerColorMapping } from '../map/utils/mapTypes';
+import { markerColorMapping } from "../map/utils/mapTypes.js";
 const ClusterMapMarker = (props) => {
     const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, cursor = 'cursor-pointer', } = props;
     const clusterClasses = classNames('rio-map-cluster-circle', active && 'active', cursor);

package/components/mapMarker/SingleMapMarker.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { type MarkerColor } from '../map/utils/mapTypes';
 export type SingleMapMarkerProps = ComponentProps<'div'> & {
     /**
@@ -82,10 +82,6 @@ export type SingleMapMarkerProps = ComponentProps<'div'> & {
      * Can be used to add a text-color class to the marker div.
      */
     textColor?: string;
-    /**
-     * @deprecated please use `anchorSize`
-     */
-    size?: 'md' | 'lg';
     /**
      * Used to control the marker's anchor size.
      *
@@ -96,10 +92,6 @@ export type SingleMapMarkerProps = ComponentProps<'div'> & {
      * @default 'md'
      */
     anchorSize?: 'md' | 'lg';
-    /**
-     * @deprecated please use `markerOnHover`
-     */
-    visibleOnHover?: boolean;
     /**
      * Whether the marker is only visible on hover.
      *

package/components/mapMarker/SingleMapMarker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import { markerColorMapping } from '../map/utils/mapTypes';
+import { markerColorMapping } from "../map/utils/mapTypes.js";
 const DEFAULT_BEARING = 60;
 const MapStateIndicator = (props) => {
     const { moving, bearing, stateIconName } = props;