@rio-cloud/rio-uikit 1.6.0 → 1.7.0

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

@@ -11,19 +11,23 @@ const MapLayerGroup = (props) => {
     const [group, setGroup] = useState();
     const [childApi, setChildApi] = useState();
     useEffect(() => {
-        var _a;
         const newGroup = new H.map.Group({
             min: minZoom,
             max: maxZoom,
         });
         newGroup.setVisibility(isVisible);
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        api.map?.addObject(newGroup);
         setGroup(newGroup);
-        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        setChildApi({
+            ...context,
+            api: {
+                ...api,
+                group: newGroup,
+            },
+        });
         return () => {
-            var _a, _b;
-            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
-                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            if (api.map?.getObjects().includes(newGroup)) {
+                api.map?.removeObject(newGroup);
             }
             newGroup.dispose();
         };
@@ -33,6 +37,6 @@ const MapLayerGroup = (props) => {
             group.setVisibility(isVisible);
         }
     }, [isVisible]);
-    return (_jsx("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && _jsx(MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+    return (_jsx("div", { className: 'MapLayerGroup', children: childApi && _jsx(MapContext.Provider, { value: childApi, children: children }) }));
 };
 export default MapLayerGroup;

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import 'react';
 import map from 'lodash/fp/map';
 import { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';
 import IncidentsLayer from './overlayLayers/IncidentsLayer';

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

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import ClusterLayer from './clustering/ClusterLayer';
 import { wrapSimpleTheme } from '../../../utils/clustering';
 import { useMapContext } from '../../MapContext';
@@ -10,10 +7,13 @@ import { useMapContext } from '../../MapContext';
  */
 const MarkerLayer = (props) => {
     const mapContext = useMapContext();
-    const { simpleTheme, clusterDissolvable = true } = props, rest = __rest(props, ["simpleTheme", "clusterDissolvable"]);
+    const { simpleTheme, clusterDissolvable = true, ...rest } = props;
     // Norbert: Not an ideal solution
     const showCluster = !clusterDissolvable || mapContext.showCluster;
-    const newProps = Object.assign({ clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }, rest);
-    return _jsx(ClusterLayer, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
+    const newProps = {
+        clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme),
+        ...rest,
+    };
+    return _jsx(ClusterLayer, { ...newProps, minWeight: showCluster ? undefined : 1000000000 });
 };
 export default MarkerLayer;

package/components/map/components/features/layers/clustering/ClusterLayer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { EventListenerMap } from '../../../../utils/eventHandling';
 export type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
 export type ClusterTheme = H.clustering.ITheme;

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

@@ -44,7 +44,6 @@ const ClusterLayer = (props) => {
         //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>
         //     )
         // );
-        var _a;
         const clusterProviderOptions = {
             clusteringOptions: {
                 strategy: getClusterStrategy(clusterStrategy),
@@ -95,11 +94,10 @@ const ClusterLayer = (props) => {
         };
         const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);
         const objectLayer = new H.map.layer.ObjectLayer(newProvider);
-        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(objectLayer);
+        api.map?.addLayer(objectLayer);
         setProvider(newProvider);
         return () => {
-            var _a;
-            (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(objectLayer);
+            api.map?.removeLayer(objectLayer);
             objectLayer.dispose();
             newProvider.dispose();
         };

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

@@ -1,10 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import ClusterLayer from './ClusterLayer';
 import { wrapSimpleTheme } from '../../../../utils/clustering';
 const SimpleClusterLayer = (props) => {
-    const { simpleTheme } = props, rest = __rest(props, ["simpleTheme"]);
-    return _jsx(ClusterLayer, Object.assign({}, rest, { clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }));
+    const { simpleTheme, ...rest } = props;
+    return _jsx(ClusterLayer, { ...rest, clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) });
 };
 export default SimpleClusterLayer;

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

@@ -105,7 +105,6 @@ const IncidentsLayer = () => {
                         // Bind cluster data to the marker:
                         noiseMarker.setData(noisePoint);
                         noiseMarker.addEventListener('pointerenter', (event) => {
-                            var _a;
                             const tooltipContent = event.target.getData().getData().tooltipContent;
                             const point = event.target.getData().getPosition();
                             // Define the bubble arrow position
@@ -115,7 +114,7 @@ const IncidentsLayer = () => {
                             const bubble = new H.ui.InfoBubble(map.screenToGeo(screenPosition.x, screenPosition.y), {
                                 content: tooltipContent,
                             });
-                            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.addBubble(bubble);
+                            api.ui?.addBubble(bubble);
                         });
                         noiseMarker.addEventListener('pointerleave', (event) => {
                             clearBubbles();
@@ -125,11 +124,10 @@ const IncidentsLayer = () => {
                 },
             });
             fetchIncidents = () => {
-                var _a;
                 clearBubbles();
                 clusteredDataProvider.setDataPoints(dataPoints);
                 // HERE Maps API for JavaScript 3.1
-                const bbox = (_a = map.getViewModel().getLookAtData().bounds) === null || _a === void 0 ? void 0 : _a.getBoundingBox();
+                const bbox = map.getViewModel().getLookAtData().bounds?.getBoundingBox();
                 const center = map.getViewModel().getLookAtData().position;
                 if (bbox && center) {
                     getTrafficIncidents(clusteredDataProvider, bbox, center, language);
@@ -139,25 +137,23 @@ const IncidentsLayer = () => {
             fetchIncidents();
             // Re-fetch incidents when map view changes as it shows a different part of the map
             // where incidents may become visible or hidden
-            map === null || map === void 0 ? void 0 : map.addEventListener('mapviewchangeend', fetchIncidents);
+            map?.addEventListener('mapviewchangeend', fetchIncidents);
             incidentsLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
             map.addLayer(incidentsLayer);
             console.log(`add layer - ${MAP_LAYER_INCIDENTS}`);
         }
         return () => {
-            var _a;
             if (incidentsLayer) {
-                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(incidentsLayer);
+                api.map?.removeLayer(incidentsLayer);
                 incidentsLayer.dispose();
                 console.log(`remove layer - ${MAP_LAYER_INCIDENTS}`);
             }
             if (fetchIncidents) {
-                map === null || map === void 0 ? void 0 : map.removeEventListener('mapviewchangeend', fetchIncidents);
+                map?.removeEventListener('mapviewchangeend', fetchIncidents);
             }
         };
     }, [api.map]);
     const getTrafficIncidents = (clusteredDataProvider, bbox, center, lang) => {
-        var _a;
         // 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');
@@ -168,7 +164,7 @@ const IncidentsLayer = () => {
             'https://data.traffic.hereapi.com/v7/incidents?in=',
             `bbox:${area}`,
             '&locationReferencing=shape',
-            `&apiKey=${(_a = api.credentials) === null || _a === void 0 ? void 0 : _a.apikey}`,
+            `&apiKey=${api.credentials?.apikey}`,
         ].join('');
         fetch(url)
             .then(response => response.json())
@@ -255,17 +251,18 @@ const IncidentsLayer = () => {
                 return getIncidentClosedSvg(color);
             case 'construction':
                 return getIncidentConstructionSvg(color);
-            case 'other' && noisePoint.getData().roadClosed:
-                return getIncidentClosedSvg(color);
+            case 'other':
+                if (noisePoint.getData().roadClosed) {
+                    return getIncidentClosedSvg(color);
+                }
+                return getIncidentGenericSvg(color);
             default:
                 return getIncidentGenericSvg(color);
         }
     };
     const clearBubbles = () => {
-        var _a;
-        (_a = api.ui) === null || _a === void 0 ? void 0 : _a.getBubbles().forEach(bubble => {
-            var _a;
-            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.removeBubble(bubble);
+        api.ui?.getBubbles().forEach(bubble => {
+            api.ui?.removeBubble(bubble);
         });
     };
     return null;

package/components/map/components/features/layers/overlayLayers/Layer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { MapApi } from '../../../../utils/mapTypes';
 export type LayerProps = {
     id: string;

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

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useMapContext } from '../../../MapContext';
-import '../../../constants';
 const Layer = (props) => {
-    var _a;
     const { id, createLayer } = props;
     const [currentLayers, setCurrentLayers] = useState([]);
     const currentLayerRef = useRef([]);
@@ -18,10 +16,9 @@ const Layer = (props) => {
     //     currentLayerRef.current = [];
     //     // setPreviousBaseLayer(baseLayer);
     // }, [baseLayer]);
-    const mapLayers = (_a = api.map) === null || _a === void 0 ? void 0 : _a.getLayers();
-    console.log({ mapLayers: mapLayers === null || mapLayers === void 0 ? void 0 : mapLayers.asArray() });
+    const mapLayers = api.map?.getLayers();
+    console.log({ mapLayers: mapLayers?.asArray() });
     useEffect(() => {
-        var _a;
         const newLayer = createLayer(api, enableWebGL, baseLayer, language);
         // console.log({ currentLayers: currentLayerRef.current });
         // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });
@@ -38,15 +35,14 @@ const Layer = (props) => {
             // console.log({ mapLayers: mapLayers?.asArray() });
             // const hasLayer = mapLayers?.asArray().includes(newLayer);
             // console.log({ hasLayer });
-            (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(newLayer);
+            api.map?.addLayer(newLayer);
             // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);
             // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];
             // console.log({ currentLayers: currentLayerRef.current });
         }
         return () => {
-            var _a;
             if (newLayer) {
-                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(newLayer);
+                api.map?.removeLayer(newLayer);
                 newLayer.dispose();
                 console.log(`remove layer - ${id}`);
                 // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);

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

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 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';
 // Layer for rendering truck road signs
 const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
-    var _a;
     // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+    const trafficTileService = api.platform?.getRasterTileService({
         resource: 'blank',
         format: DEFAULT_RASTER_LAYER_FORMAT,
         queryParams: {
@@ -32,6 +29,6 @@ const RoadRestrictionLayer = (props) => {
     const { enableWebGL, baseLayer, devicePixelRatio } = useMapContext();
     const engineType = isVectorBased(enableWebGL, baseLayer) ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
     const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
-    return _jsx(Layer, Object.assign({}, props, { createLayer: restrictionLayerCreator }));
+    return _jsx(Layer, { ...props, createLayer: restrictionLayerCreator });
 };
 export default RoadRestrictionLayer;

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

@@ -1,22 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 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';
 const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
-    var _a, _b;
     // Traffic
     const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');
     // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+    const trafficTileService = api.platform?.getRasterTileService({
         baseUrl: baseTrafficUrl,
         format: DEFAULT_RASTER_LAYER_FORMAT,
         path: 'v3',
         resource: 'flow',
         queryParams: {
-            apikey: (_b = api.credentials) === null || _b === void 0 ? void 0 : _b.apikey,
+            apikey: api.credentials?.apikey,
             lang: language,
             ppi: 400,
             style: 'explore.day',
@@ -31,11 +28,10 @@ const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
     return trafficTileLayer;
 };
 const createVectorTrafficLayer = (api, useWebGL, baseLayerName) => {
-    var _a;
     // @ts-ignore-next-line
     const providerTrafficFlow = new H.service.trafficVectorTile.Provider(
     // @ts-ignore-next-line
-    (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getTrafficVectorTileService({ layer: 'flow' }), 
+    api.platform?.getTrafficVectorTileService({ layer: 'flow' }), 
     // @ts-ignore-next-line
     new H.map.render.harp.Style({}), { engineType: ENGINE_TYPE_HARP });
     // @ts-ignore-next-line:
@@ -47,6 +43,6 @@ const TrafficLayer = (props) => {
     const layerCreator = isVectorBased(mapContext.enableWebGL, mapContext.baseLayer)
         ? createVectorTrafficLayer
         : createRasterTrafficLayer;
-    return _jsx(Layer, Object.assign({}, props, { createLayer: layerCreator }));
+    return _jsx(Layer, { ...props, createLayer: layerCreator });
 };
 export default TrafficLayer;

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

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 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 === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
-    const inactiveIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
+    const activeIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
     const defaultIcon = activeIcon &&
         React.cloneElement(activeIcon, {
             className: activeIconClassNames,
@@ -15,6 +15,6 @@ const MapSettingsItem = (props) => {
             className: inactiveIconClassNames,
         });
     const mapSettingsItemClassNames = classNames('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
-    return (_jsxs("div", Object.assign({ className: mapSettingsItemClassNames, onClick: onClick }, { children: [label && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'margin-left--5' }, { children: [highlightedIcon, defaultIcon] })), _jsx("div", Object.assign({ className: 'flex-1-1 line-height-16 padding-right-5' }, { children: label }))] })), !label && (_jsxs(_Fragment, { children: [highlightedIcon, defaultIcon] }))] })));
+    return (_jsxs("div", { className: mapSettingsItemClassNames, onClick: onClick, children: [label && (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'margin-left--5', children: [highlightedIcon, defaultIcon] }), _jsx("div", { className: 'flex-1-1 line-height-16 padding-right-5', children: label })] })), !label && (_jsxs(_Fragment, { children: [highlightedIcon, defaultIcon] }))] }));
 };
 export default MapSettingsItem;

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

@@ -1,14 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 const MapSettingsPanel = (props) => {
     const { className = '', children } = props;
     const panelClassNames = classNames('MapSettingsPanel', className);
-    return (_jsx(motion.div, Object.assign({ initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
             duration: 0.15,
             ease: 'easeInOut',
-        }, className: panelClassNames }, { children: children })));
+        }, className: panelClassNames, children: children }));
 };
 export default MapSettingsPanel;

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
@@ -14,10 +13,10 @@ import { isMobileScreen } from '../../../../../utils/deviceUtils';
 const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
 const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
 const getComponentWithTooltip = (component, tooltip) => {
-    return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
+    return (_jsx(OverlayTrigger, { placement: Tooltip.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: _jsx(Tooltip, { id: 'tooltip', width: 'auto', children: tooltip }), children: component }));
 };
 const MapSettingsTile = (props) => {
-    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip } = props, remainingProps = __rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "items", "className", "buttonClassName", "tooltip"]);
+    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip, ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -49,7 +48,7 @@ const MapSettingsTile = (props) => {
             : [],
     });
     const dropdownWrapperRef = useClickOutside((event) => {
-        if (toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.contains(event.target)) {
+        if (toggleRef?.contains(event.target)) {
             return;
         }
         if (isOpen) {
@@ -59,20 +58,20 @@ const MapSettingsTile = (props) => {
     });
     const wrapperClasses = classNames('MapSettingsTile', className);
     const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);
-    const activeIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
-    const inactiveIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
-    const button = (_jsxs("div", Object.assign({ className: buttonClasses, onClick: handleToggle }, { children: [activeIcon &&
+    const activeIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
+    const inactiveIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
+    const button = (_jsxs("div", { className: buttonClasses, onClick: handleToggle, children: [activeIcon &&
                 React.cloneElement(activeIcon, {
                     className: activeIconClassNames,
                 }), inactiveIcon &&
                 React.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
-                })] })));
-    return (_jsxs("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [!items && (_jsxs(_Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", Object.assign({ className: 'overflow-hidden' }, { children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) }))] })), items && (_jsxs("div", Object.assign({ className: 'MapSettingsTile-inner position-relative', ref: setToggleRef }, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx(AnimatePresence, { children: _jsx("div", Object.assign({ className: 'dropdown', ref: dropdownWrapperRef }, { children: isOpen && items && (_jsx(MenuItemList, Object.assign({ className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: Object.assign(Object.assign({}, styles.popper), { minWidth: '180px' }) }, attributes.popper, { children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                })] }));
+    return (_jsxs("div", { className: wrapperClasses, ref: buttonRef, ...remainingProps, children: [!items && (_jsxs(_Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", { className: 'overflow-hidden', children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) })] })), items && (_jsxs("div", { className: 'MapSettingsTile-inner position-relative', ref: setToggleRef, children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx(AnimatePresence, { children: _jsx("div", { className: 'dropdown', ref: dropdownWrapperRef, children: isOpen && items && (_jsx(MenuItemList, { className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: { ...styles.popper, minWidth: '180px' }, ...attributes.popper, children: items?.map((item, index) => {
                                     if (item.type.isMapSettingsDropdownHeader) {
                                         return item;
                                     }
                                     return _jsx(MenuItem, { value: item }, index);
-                                }) }))) })) })] })))] })));
+                                }) })) }) })] }))] }));
 };
 export default MapSettingsTile;

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

@@ -1,10 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';
 const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
     const buttonClasses = classNames('ZoomButtons');
-    return (_jsxs("div", Object.assign({ className: buttonClasses }, { children: [_jsx("div", Object.assign({ 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", Object.assign({ className: 'MapSettingsTile', onClick: onZoomOut }, { children: _jsx(MapIcon, { name: ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) }))] })));
+    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 }) })] }));
 };
 export default ZoomButtons;

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

@@ -1,15 +1,12 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import union from 'lodash/fp/union';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon } from '../../../../icons/MapIcon';
 const MapAdditionalLayerSettings = (props) => {
-    const { activeBuiltinLayers = [], activeLayers = [], layers = [] } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "layers"]);
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], ...remainingProps } = props;
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);
     const isActive = !isEmpty(allActiveLayer);
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapAdditionalLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers }, remainingProps)));
+    return (_jsx(MapSettingsTile, { className: 'MapAdditionalLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers, ...remainingProps }));
 };
 export default MapAdditionalLayerSettings;

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

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import noop from 'lodash/fp/noop';
 import compact from 'lodash/fp/compact';
 import MapSettingsPanel from '../MapSettingsPanel';
@@ -10,7 +7,7 @@ import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, CLUSTER_ACTIVE, CLUSTER_INACTIVE, NO_CLUSTER_ACTIVE, NO_CLUSTER_INACTIVE, } from '../../../../icons/MapIcon';
 import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
 const MapClusterSettings = (props) => {
-    const { showCluster = true, onShowClusterChange = noop, onToggle = noop, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText } = props, remainingProps = __rest(props, ["showCluster", "onShowClusterChange", "onToggle", "clusterEnabledLabel", "clusterDisabledLabel", "dropdownHeaderText"]);
+    const { showCluster = true, onShowClusterChange = noop, onToggle = noop, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText, ...remainingProps } = props;
     const handleShowCluster = (setShowCluster) => {
         onShowClusterChange(setShowCluster);
         onToggle(setShowCluster);
@@ -19,6 +16,6 @@ const MapClusterSettings = (props) => {
     const dropdownHeader = dropdownHeaderText && (_jsx(MapSettingsDropdownHeader, { label: dropdownHeaderText }, 'mapClusterDropdownHeader'));
     const enableClusterButtons = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }), label: clusterEnabledLabel }, 'enableClusterButtons'));
     const disableClusterButton = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: _jsx(MapIcon, { name: NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }), label: clusterDisabledLabel }, 'disableClusterButton'));
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), items: hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableClusterButtons, disableClusterButton] })) }, remainingProps)));
+    return (_jsx(MapSettingsTile, { className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), items: hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableClusterButtons, disableClusterButton] })), ...remainingProps }));
 };
 export default MapClusterSettings;

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -9,21 +8,17 @@ import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon } from '../../../../icons/MapIcon';
 const MapLayerSettings = (props) => {
-    var _a;
-    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "layers", "onMapLayerChange"]);
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop, ...remainingProps } = props;
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);
-    const hasLabels = !!((_a = layers.at(0)) === null || _a === void 0 ? void 0 : _a.props.label);
+    const hasLabels = !!layers.at(0)?.props.label;
     const isActive = !isEmpty(allActiveLayer);
     // Inject onMapLayerChange from the MapContext which will be handled
     // in the main Map component.
-    const enrichedLayers = map(layer => {
-        var _a;
-        return React.cloneElement(layer, {
-            key: (_a = layer === null || layer === void 0 ? void 0 : layer.key) !== null && _a !== void 0 ? _a : `MapLayerSettings_${crypto.randomUUID()}`,
-            activeBuiltinLayers,
-            onMapLayerChange,
-        });
-    }, layers);
-    return (_jsx(MapSettingsTile, Object.assign({ 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)));
+    const enrichedLayers = map(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.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import noop from 'lodash/fp/noop';
@@ -10,7 +9,7 @@ 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';
 const MapTypeSettings = (props) => {
-    const { mapType, onMapTypeChange = noop, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText } = props, remainingProps = __rest(props, ["mapType", "onMapTypeChange", "enableNightMap", "defaultTypeLabel", "truckTypeLabel", "terrainTypeLabel", "satelliteTypeLabel", "nightTypeLabel", "dropdownHeaderText"]);
+    const { mapType, onMapTypeChange = noop, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText, ...remainingProps } = props;
     const type = useMemo(() => ({
         isDefault: mapType === MAP_TYPE_DEFAULT,
         isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
@@ -42,7 +41,7 @@ const MapTypeSettings = (props) => {
     const mapTypeTruck = (_jsx(MapSettingsItem, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_TRUCK_INACTIVE }), label: truckTypeLabel }, 'MapTypeFlatTruck'));
     const mapTypeDefault = (_jsx(MapSettingsItem, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE }), label: defaultTypeLabel }, 'MapTypeFlat'));
     const hasLabels = !!defaultTypeLabel || !!truckTypeLabel || !!terrainTypeLabel || !!satelliteTypeLabel || !!nightTypeLabel;
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
+    return (_jsx(MapSettingsTile, { className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
             ? compact([
                 dropdownHeader,
                 mapTypeNight,
@@ -51,6 +50,6 @@ const MapTypeSettings = (props) => {
                 mapTypeTruck,
                 mapTypeDefault,
             ])
-            : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })) }, remainingProps)));
+            : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })), ...remainingProps }));
 };
 export default MapTypeSettings;

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

@@ -1,11 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, BOUNDING_BOX_ACTIVE, BOUNDING_BOX_INACTIVE } from '../../../../icons/MapIcon';
 const MapBoundingBoxButton = (props) => {
-    const { isActive = false, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
-    return (_jsx(MapSettingsTile, Object.assign({ 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)));
+    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 }));
 };
 export default MapBoundingBoxButton;

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

@@ -1,11 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon } from '../../../../icons/MapIcon';
 const MapCenterMarkerButton = (props) => {
-    const { isActive = false, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
-    return (_jsx(MapSettingsTile, Object.assign({ 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)));
+    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 }));
 };
 export default MapCenterMarkerButton;

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

@@ -1,11 +1,8 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, LOCK_ACTIVE, LOCK_INACTIVE } from '../../../../icons/MapIcon';
 const MapLockMarkerButton = (props) => {
-    const { isActive = false, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapLockMarkerButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: LOCK_ACTIVE, className: 'MapLockMarkerButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: LOCK_INACTIVE, className: 'MapLockMarkerButtonIconInactive' }), onToggle: onToggle }, remainingProps)));
+    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 }));
 };
 export default MapLockMarkerButton;

package/components/map/components/features/settings/items/MapCustomerPoiSettingsItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type MapCustomerPoiSettingsItemProps = {
     onToggle?: (setIsShown: boolean) => void;
     isActive?: boolean;