@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

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

@@ -0,0 +1,52 @@
+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({
+        baseUrl: baseTrafficUrl,
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        path: 'v3',
+        resource: 'flow',
+        queryParams: {
+            apikey: (_b = api.credentials) === null || _b === void 0 ? void 0 : _b.apikey,
+            lang: language,
+            ppi: 400,
+            style: 'explore.day',
+        },
+    });
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileProvider = new H.service.rasterTile.Provider(trafficTileService, {
+        engineType: ENGINE_TYPE_P2D,
+        tileSize: DEFAULT_TILE_SIZE,
+    });
+    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider);
+    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' }), 
+    // @ts-ignore-next-line
+    new H.map.render.harp.Style({}), { engineType: ENGINE_TYPE_HARP });
+    // @ts-ignore-next-line:
+    const trafficFlowLayer = new H.map.layer.TileLayer(providerTrafficFlow, { min: 2, max: 24 });
+    return trafficFlowLayer;
+};
+const TrafficLayer = (props) => {
+    const mapContext = useMapContext();
+    const layerCreator = isVectorBased(mapContext.enableWebGL, mapContext.baseLayer)
+        ? createVectorTrafficLayer
+        : createRasterTrafficLayer;
+    return _jsx(Layer, Object.assign({}, props, { createLayer: layerCreator }));
+};
+export default TrafficLayer;

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

@@ -1,20 +1,10 @@
+import React from 'react';
+export type MapSettingsItemProps = {
+    activeIcon?: JSX.Element;
+    inactiveIcon?: JSX.Element;
+    isActive?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const MapSettingsItem: (props: MapSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MapSettingsItem;
-declare function MapSettingsItem(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapSettingsItem {
-    namespace defaultProps {
-        const isActive: boolean;
-        const className: string;
-        function onClick(): void;
-    }
-    namespace propTypes {
-        export const activeIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export const inactiveIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const onClick_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onClick_1 as onClick };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,12 +1,11 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import getOr from 'lodash/fp/getOr';
-const MapSettingsItem = props => {
-    const { onClick, activeIcon, inactiveIcon, isActive, className } = props;
-    const activeIconClassNames = classNames('hover-scale-110', isActive ? 'display-block' : 'display-none', getOr('', 'props.className')(activeIcon));
-    const inactiveIconClassNames = classNames('hover-scale-110', isActive ? 'display-none' : 'display-block', getOr('', 'props.className')(inactiveIcon));
+import noop from 'lodash/fp/noop';
+const MapSettingsItem = (props) => {
+    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, className = '' } = props;
+    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) || '');
     return (_jsxs("div", Object.assign({ className: `MapSettingsItem ${className}`, onClick: onClick }, { children: [activeIcon &&
                 React.cloneElement(activeIcon, {
                     className: activeIconClassNames,
@@ -15,16 +14,4 @@ const MapSettingsItem = props => {
                     className: inactiveIconClassNames,
                 })] })));
 };
-MapSettingsItem.defaultProps = {
-    isActive: false,
-    className: '',
-    onClick: () => { },
-};
-MapSettingsItem.propTypes = {
-    activeIcon: PropTypes.node,
-    inactiveIcon: PropTypes.node,
-    isActive: PropTypes.bool,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-};
 export default MapSettingsItem;

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

@@ -1,12 +1,6 @@
+import { type PropsWithChildren } from 'react';
+export type MapSettingsPanelProps = {
+    className?: string;
+};
+declare const MapSettingsPanel: (props: PropsWithChildren<MapSettingsPanelProps>) => import("react/jsx-runtime").JSX.Element;
 export default MapSettingsPanel;
-declare function MapSettingsPanel(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapSettingsPanel {
-    namespace defaultProps {
-        const className: string;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,20 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
-const MapSettingsPanel = props => {
-    const { className, children } = props;
+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: {
             duration: 0.15,
             ease: 'easeInOut',
         }, className: panelClassNames }, { children: children })));
 };
-MapSettingsPanel.defaultProps = {
-    className: '',
-};
-MapSettingsPanel.propTypes = {
-    className: PropTypes.string,
-};
 export default MapSettingsPanel;

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

@@ -1,20 +1,13 @@
+import React from 'react';
+export type MapSettingsTileProps = {
+    onToggle?: () => void;
+    tooltip?: React.ReactNode;
+    panel?: React.ReactNode;
+    activeIcon?: JSX.Element;
+    inactiveIcon?: JSX.Element;
+    isActive?: boolean;
+    buttonClassName?: string;
+    className?: string;
+};
+declare const MapSettingsTile: (props: MapSettingsTileProps) => import("react/jsx-runtime").JSX.Element;
 export default MapSettingsTile;
-declare function MapSettingsTile(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapSettingsTile {
-    namespace defaultProps {
-        const className: string;
-        const buttonClassName: string;
-        function onToggle(): void;
-    }
-    namespace propTypes {
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const buttonClassName_1: PropTypes.Requireable<string>;
-        export { buttonClassName_1 as buttonClassName };
-        const onToggle_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onToggle_1 as onToggle };
-        export const tooltip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export const panel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -2,17 +2,16 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import getOr from 'lodash/fp/getOr';
+import noop from 'lodash/fp/noop';
 import OverlayTrigger from '../../../../overlay/OverlayTrigger';
 import Tooltip from '../../../../tooltip/Tooltip';
 import useClickOutside from '../../../../../hooks/useClickOutside';
 const getComponentWithTooltip = (component, tooltip) => {
-    return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.TOP, delay: { show: 1200 }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
+    return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.TOP, delay: { show: 1200, hide: 100 }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
 };
-const MapSettingsTile = props => {
-    const { onToggle, activeIcon, inactiveIcon, isActive, panel, className, buttonClassName, tooltip } = props, remainingProps = __rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "className", "buttonClassName", "tooltip"]);
+const MapSettingsTile = (props) => {
+    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, className, buttonClassName, tooltip } = props, remainingProps = __rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "className", "buttonClassName", "tooltip"]);
     const [isOpen, setIsOpen] = useState(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -30,8 +29,8 @@ const MapSettingsTile = props => {
     const buttonRef = useClickOutside(handleClosePanel);
     const wrapperClasses = classNames('MapSettingsTile', className);
     const buttonClasses = classNames('MapSettingsButton', buttonClassName);
-    const activeIconClassNames = classNames('hover-scale-110', isActive ? 'display-block' : 'display-none', getOr('', 'props.className')(activeIcon));
-    const inactiveIconClassNames = classNames('hover-scale-110', isActive ? 'display-none' : 'display-block', getOr('', 'props.className')(inactiveIcon));
+    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 &&
                 React.cloneElement(activeIcon, {
                     className: activeIconClassNames,
@@ -39,18 +38,6 @@ const MapSettingsTile = props => {
                 React.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
                 })] })));
-    return (_jsxs("div", Object.assign({ className: wrapperClasses, height: 40, width: 40, ref: buttonRef }, remainingProps, { children: [tooltip ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", Object.assign({ className: 'overflow-hidden' }, { children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) }))] })));
-};
-MapSettingsTile.defaultProps = {
-    className: '',
-    buttonClassName: '',
-    onToggle: () => { },
-};
-MapSettingsTile.propTypes = {
-    className: PropTypes.string,
-    buttonClassName: PropTypes.string,
-    onToggle: PropTypes.func,
-    tooltip: PropTypes.node,
-    panel: PropTypes.node,
+    return (_jsxs("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [tooltip ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", Object.assign({ className: 'overflow-hidden' }, { children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) }))] })));
 };
 export default MapSettingsTile;

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

@@ -1,12 +1,7 @@
+import React from 'react';
+export type ZoomButtonsProps = {
+    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const ZoomButtons: ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default ZoomButtons;
-declare function ZoomButtons({ onZoomIn, onZoomOut }: {
-    onZoomIn: any;
-    onZoomOut: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace ZoomButtons {
-    namespace propTypes {
-        const onZoomIn: PropTypes.Requireable<(...args: any[]) => any>;
-        const onZoomOut: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MapIcon, ZOOM_IN, ZOOM_OUT } from '../../../icons/MapIcon';
+// @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 }) }))] })));
 };
-ZoomButtons.propTypes = {
-    onZoomIn: PropTypes.func,
-    onZoomOut: PropTypes.func,
-};
 export default ZoomButtons;

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

@@ -1,19 +1,9 @@
+import React from 'react';
+export type MapClusterSettingsProps = {
+    onToggle?: (setShowCluster: boolean) => void;
+    onShowClusterChange?: (setShowCluster: boolean) => boolean;
+    showCluster?: boolean;
+    tooltip?: string | React.ReactNode;
+};
+declare const MapClusterSettings: (props: MapClusterSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapClusterSettings;
-declare function MapClusterSettings(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapClusterSettings {
-    const displayName: string;
-    namespace defaultProps {
-        function onShowClusterChange(): void;
-        const showCluster: boolean;
-        function onToggle(): void;
-    }
-    namespace propTypes {
-        const onShowClusterChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onShowClusterChange_1 as onShowClusterChange };
-        const showCluster_1: PropTypes.Requireable<boolean>;
-        export { showCluster_1 as showCluster };
-        const onToggle_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onToggle_1 as onToggle };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,28 +1,18 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import noop from 'lodash/fp/noop';
 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';
-const MapClusterSettings = props => {
-    const { showCluster, onShowClusterChange, onToggle } = props, remainingProps = __rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
-    const handleShowCluster = setShowCluster => {
+const MapClusterSettings = (props) => {
+    const { showCluster = true, onShowClusterChange = noop, onToggle = noop } = props, remainingProps = __rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
+    const handleShowCluster = (setShowCluster) => {
         onShowClusterChange(setShowCluster);
         onToggle(setShowCluster);
     };
     return (_jsx(MapSettingsTile, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), panel: _jsxs(MapSettingsPanel, { children: [_jsx(MapSettingsItem, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }) }), _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' }) })] }) }, remainingProps)));
 };
-MapClusterSettings.displayName = 'MapClusterSettings';
-MapClusterSettings.defaultProps = {
-    onShowClusterChange: () => { },
-    showCluster: true,
-    onToggle: () => { },
-};
-MapClusterSettings.propTypes = {
-    onShowClusterChange: PropTypes.func,
-    showCluster: PropTypes.bool,
-    onToggle: PropTypes.func,
-};
 export default MapClusterSettings;

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

@@ -1,22 +1,10 @@
+import React from 'react';
+export type MapLayerSettingsProps = {
+    activeBuiltinLayers?: string[];
+    activeLayers?: string[];
+    onMapLayerChange?: () => string;
+    layers?: JSX.Element[];
+    tooltip?: string | React.ReactNode;
+};
+declare const MapLayerSettings: (props: MapLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapLayerSettings;
-declare function MapLayerSettings(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapLayerSettings {
-    const displayName: string;
-    namespace defaultProps {
-        function onMapLayerChange(): void;
-        const activeBuiltinLayers: never[];
-        const activeLayers: never[];
-        const layers: never[];
-    }
-    namespace propTypes {
-        const onMapLayerChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onMapLayerChange_1 as onMapLayerChange };
-        const activeBuiltinLayers_1: PropTypes.Requireable<(string | null | undefined)[]>;
-        export { activeBuiltinLayers_1 as activeBuiltinLayers };
-        const activeLayers_1: PropTypes.Requireable<(string | null | undefined)[]>;
-        export { activeLayers_1 as activeLayers };
-        const layers_1: PropTypes.Requireable<any[]>;
-        export { layers_1 as layers };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,35 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import PropTypes from 'prop-types';
 import isEmpty from 'lodash/fp/isEmpty';
 import map from 'lodash/fp/map';
 import union from 'lodash/fp/union';
-import uniqueId from 'lodash/fp/uniqueId';
-import { getKeyOrDefault } from '../../../../utils/validation';
+import noop from 'lodash/fp/noop';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, LAYER_ACTIVE, LAYER_INACTIVE } from '../../../../icons/MapIcon';
-const MapLayerSettings = props => {
-    const { activeBuiltinLayers, activeLayers, onMapLayerChange, layers } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "onMapLayerChange", "layers"]);
+const MapLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "layers", "onMapLayerChange"]);
     const allActiveLayer = union(activeBuiltinLayers, activeLayers);
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: _jsx(MapIcon, { name: LAYER_ACTIVE, className: 'MapLayerIcon' }), inactiveIcon: _jsx(MapIcon, { name: LAYER_INACTIVE, className: 'MapLayerIconInactive' }), panel: _jsx(MapSettingsPanel, { children: map(layer => React.cloneElement(layer, {
-                key: getKeyOrDefault(uniqueId('MapLayerSettings_'), layer),
-                activeBuiltinLayers,
-                onMapLayerChange,
-            }), layers) }) }, remainingProps)));
-};
-MapLayerSettings.displayName = 'MapLayerSettings';
-MapLayerSettings.defaultProps = {
-    onMapLayerChange: () => { },
-    activeBuiltinLayers: [],
-    activeLayers: [],
-    layers: [],
-};
-MapLayerSettings.propTypes = {
-    onMapLayerChange: PropTypes.func,
-    activeBuiltinLayers: PropTypes.arrayOf(PropTypes.string),
-    activeLayers: PropTypes.arrayOf(PropTypes.string),
-    layers: PropTypes.array,
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: _jsx(MapIcon, { name: LAYER_ACTIVE, className: 'MapLayerIcon' }), inactiveIcon: _jsx(MapIcon, { name: LAYER_INACTIVE, className: 'MapLayerIconInactive' }), panel: _jsx(MapSettingsPanel, { children: 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) }) }, remainingProps)));
 };
 export default MapLayerSettings;

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

@@ -1,17 +1,10 @@
+import React from 'react';
+import type { MapType } from '../../../../utils/mapTypes';
+export type MapTypeSettingsProps = {
+    mapType?: string;
+    enableNightMap?: boolean;
+    onMapTypeChange?: () => MapType;
+    tooltip?: string | React.ReactNode;
+};
+declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapTypeSettings;
-declare function MapTypeSettings(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapTypeSettings {
-    const displayName: string;
-    namespace defaultProps {
-        function onMapTypeChange(): void;
-        const enableNightMap: boolean;
-    }
-    namespace propTypes {
-        export const mapType: PropTypes.Requireable<string>;
-        const enableNightMap_1: PropTypes.Requireable<boolean>;
-        export { enableNightMap_1 as enableNightMap };
-        const onMapTypeChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onMapTypeChange_1 as onMapTypeChange };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,14 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+import noop from 'lodash/fp/noop';
 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_SATELITE_ACTIVE, MAP_TYPE_SATELITE_INACTIVE, MAP_TYPE_TERRAIN_ACTIVE, MAP_TYPE_TERRAIN_INACTIVE, MAP_TYPE_NIGHT_ACTIVE, MAP_TYPE_NIGHT_INACTIVE, } from '../../../../icons/MapIcon';
-const MapTypeSettings = props => {
-    const { mapType, onMapTypeChange, enableNightMap } = props, remainingProps = __rest(props, ["mapType", "onMapTypeChange", "enableNightMap"]);
+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';
+const MapTypeSettings = (props) => {
+    const { mapType, onMapTypeChange = noop, enableNightMap = true } = props, remainingProps = __rest(props, ["mapType", "onMapTypeChange", "enableNightMap"]);
     const type = useMemo(() => ({
         isDefault: mapType === MAP_TYPE_DEFAULT,
         isFleetStyle: mapType === MAP_TYPE_FLEET_STYLE,
@@ -16,7 +16,7 @@ const MapTypeSettings = props => {
         isSatellite: mapType === MAP_TYPE_SATELLITE,
         isNight: mapType === MAP_TYPE_NIGHT,
     }), [mapType]);
-    const getIcon = currentType => {
+    const getIcon = (currentType) => {
         if (currentType.isDefault) {
             return _jsx(MapIcon, { name: MAP_TYPE_FLAT_INACTIVE });
         }
@@ -27,22 +27,12 @@ const MapTypeSettings = props => {
             return _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE });
         }
         if (currentType.isSatellite) {
-            return _jsx(MapIcon, { name: MAP_TYPE_SATELITE_INACTIVE });
+            return _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE });
         }
         if (currentType.isNight) {
             return _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE });
         }
     };
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), panel: _jsxs(MapSettingsPanel, { children: [enableNightMap && (_jsx(MapSettingsItem, { className: 'MapTypeNight', onClick: () => onMapTypeChange(MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE }) })), _jsx(MapSettingsItem, { className: 'MapTypeSatelite', onClick: () => onMapTypeChange(MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELITE_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELITE_INACTIVE }) }), _jsx(MapSettingsItem, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE }) }), _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 }) }), _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 }) })] }) }, remainingProps)));
-};
-MapTypeSettings.displayName = 'MapTypeSettings';
-MapTypeSettings.defaultProps = {
-    onMapTypeChange: () => { },
-    enableNightMap: true,
-};
-MapTypeSettings.propTypes = {
-    mapType: PropTypes.string,
-    enableNightMap: PropTypes.bool,
-    onMapTypeChange: PropTypes.func,
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), panel: _jsxs(MapSettingsPanel, { children: [enableNightMap && (_jsx(MapSettingsItem, { className: 'MapTypeNight', onClick: () => onMapTypeChange(MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_NIGHT_INACTIVE }) })), _jsx(MapSettingsItem, { className: 'MapTypeSatelite', onClick: () => onMapTypeChange(MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_SATELLITE_INACTIVE }) }), _jsx(MapSettingsItem, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: _jsx(MapIcon, { name: MAP_TYPE_TERRAIN_INACTIVE }) }), _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 }) }), _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 }) })] }) }, remainingProps)));
 };
 export default MapTypeSettings;

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

@@ -1,14 +1,8 @@
+import React from 'react';
+import MapSettingsTile from '../MapSettingsTile';
+export type MapBoundingBoxButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
+    onToggle?: () => void;
+    isActive?: boolean;
+};
+declare const MapBoundingBoxButton: (props: MapBoundingBoxButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default MapBoundingBoxButton;
-declare function MapBoundingBoxButton(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapBoundingBoxButton {
-    const displayName: string;
-    namespace defaultProps {
-        const isActive: boolean;
-    }
-    namespace propTypes {
-        export const onToggle: PropTypes.Requireable<(...args: any[]) => any>;
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,19 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @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, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
+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)));
 };
-MapBoundingBoxButton.displayName = 'MapBoundingBoxButton';
-MapBoundingBoxButton.defaultProps = {
-    isActive: false,
-};
-MapBoundingBoxButton.propTypes = {
-    onToggle: PropTypes.func,
-    isActive: PropTypes.bool,
-};
 export default MapBoundingBoxButton;

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

@@ -1,14 +1,8 @@
+import React from 'react';
+import MapSettingsTile from '../MapSettingsTile';
+export type MapCenterMarkerButtonProps = React.ComponentProps<typeof MapSettingsTile> & {
+    onToggle?: () => void;
+    isActive?: boolean;
+};
+declare const MapCenterMarkerButton: (props: MapCenterMarkerButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default MapCenterMarkerButton;
-declare function MapCenterMarkerButton(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MapCenterMarkerButton {
-    const displayName: string;
-    namespace defaultProps {
-        const isActive: boolean;
-    }
-    namespace propTypes {
-        export const onToggle: PropTypes.Requireable<(...args: any[]) => any>;
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,19 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, CENTER_MARKER_ACTIVE, CENTER_MARKER_INACTIVE } from '../../../../icons/MapIcon';
-const MapCenterMarkerButton = props => {
-    const { isActive, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
+const MapCenterMarkerButton = (props) => {
+    const { isActive = false, onToggle } = props, remainingProps = __rest(props, ["isActive", "onToggle"]);
     return (_jsx(MapSettingsTile, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: _jsx(MapIcon, { name: CENTER_MARKER_ACTIVE, className: 'MapCenterMarkerButtonIcon' }), inactiveIcon: _jsx(MapIcon, { name: CENTER_MARKER_INACTIVE, className: 'MapCenterMarkerButtonIconInactive' }), onToggle: onToggle }, remainingProps)));
 };
-MapCenterMarkerButton.displayName = 'MapCenterMarkerButton';
-MapCenterMarkerButton.defaultProps = {
-    isActive: false,
-};
-MapCenterMarkerButton.propTypes = {
-    onToggle: PropTypes.func,
-    isActive: PropTypes.bool,
-};
 export default MapCenterMarkerButton;