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

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

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const MapContext_1 = require("../../../MapContext");
+require("../../../constants");
+const Layer = (props) => {
+    var _a;
+    const { id, createLayer } = props;
+    const [currentLayers, setCurrentLayers] = (0, react_1.useState)([]);
+    const currentLayerRef = (0, react_1.useRef)([]);
+    const { api, enableWebGL, language, baseLayer } = (0, MapContext_1.useMapContext)();
+    // const [previousBaseLayer, setPreviousBaseLayer] = useState<string>();
+    // useEffect(() => {
+    //     // setCurrentLayers([]);
+    //     currentLayerRef.current.forEach(item => {
+    //         console.log('cleanup');
+    //         api.map?.removeLayer(item.layer);
+    //         item.layer.dispose();
+    //     });
+    //     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() });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const newLayer = createLayer(api, enableWebGL, baseLayer, language);
+        // console.log({ currentLayers: currentLayerRef.current });
+        // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });
+        // const trafficLayer = api.map?.getLayers().get(20);
+        // const roadRestrictionLayer = api.map?.getLayers().get(30);
+        // console.log({ trafficLayer, roadRestrictionLayer });
+        // const hasLayer = currentLayerRef.current.find((item: any) => item.id === id);
+        // console.log({ hasLayer });
+        // if (newLayer && !hasLayer) {
+        // if (newLayer && api.map?.getLayers().getLength() === 0) {
+        if (newLayer) {
+            console.log(`add layer - ${id}`);
+            // const mapLayers = api.map?.getLayers();
+            // 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);
+            // 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);
+                newLayer.dispose();
+                console.log(`remove layer - ${id}`);
+                // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);
+                // setCurrentLayers([]);
+                // currentLayerRef.current = [...currentLayerRef.current.filter((item: any) => item.id !== id)];
+            }
+        };
+    }, [api.map]);
+    return null;
+};
+exports.default = Layer;

package/lib/es/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Layer from './Layer';
+export type RoadRestrictionLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};
+declare const RoadRestrictionLayer: (props: RoadRestrictionLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default RoadRestrictionLayer;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const constants_1 = require("../../../constants");
+const Layer_1 = tslib_1.__importDefault(require("./Layer"));
+const MapContext_1 = require("../../../MapContext");
+const rendering_1 = require("../../../../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({
+        resource: 'blank',
+        format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
+        queryParams: {
+            lang: language,
+            // Increase size of road sign for pixel maps and high resolutions, otherwise the icons are too small
+            ppi: engineType === constants_1.ENGINE_TYPE_P2D && devicePixelRatio > 1 ? 200 : 100,
+            features: 'vehicle_restrictions:active_and_inactive',
+        },
+    });
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileProvider1 = new H.service.rasterTile.Provider(trafficTileService, {
+        engineType,
+        tileSize: constants_1.DEFAULT_TILE_SIZE,
+    });
+    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider1);
+    console.log('createRoadRestrictionLayer');
+    return trafficTileLayer;
+};
+const RoadRestrictionLayer = (props) => {
+    const { enableWebGL, baseLayer, devicePixelRatio } = (0, MapContext_1.useMapContext)();
+    const engineType = (0, rendering_1.isVectorBased)(enableWebGL, baseLayer) ? constants_1.ENGINE_TYPE_HARP : constants_1.ENGINE_TYPE_P2D;
+    const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
+    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, props, { createLayer: restrictionLayerCreator }));
+};
+exports.default = RoadRestrictionLayer;

package/lib/es/components/map/components/features/layers/overlayLayers/TrafficLayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Layer from './Layer';
+export type TrafficLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};
+declare const TrafficLayer: (props: TrafficLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default TrafficLayer;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const constants_1 = require("../../../constants");
+const Layer_1 = tslib_1.__importDefault(require("./Layer"));
+const MapContext_1 = require("../../../MapContext");
+const rendering_1 = require("../../../../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: constants_1.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: constants_1.ENGINE_TYPE_P2D,
+        tileSize: constants_1.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: constants_1.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 = (0, MapContext_1.useMapContext)();
+    const layerCreator = (0, rendering_1.isVectorBased)(mapContext.enableWebGL, mapContext.baseLayer)
+        ? createVectorTrafficLayer
+        : createRasterTrafficLayer;
+    return (0, jsx_runtime_1.jsx)(Layer_1.default, Object.assign({}, props, { createLayer: layerCreator }));
+};
+exports.default = TrafficLayer;

package/lib/es/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/lib/es/components/map/components/features/settings/MapSettingsItem.js

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
-const MapSettingsItem = props => {
-    const { onClick, activeIcon, inactiveIcon, isActive, className } = props;
-    const activeIconClassNames = (0, classnames_1.default)('hover-scale-110', isActive ? 'display-block' : 'display-none', (0, getOr_1.default)('', 'props.className')(activeIcon));
-    const inactiveIconClassNames = (0, classnames_1.default)('hover-scale-110', isActive ? 'display-none' : 'display-block', (0, getOr_1.default)('', 'props.className')(inactiveIcon));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const MapSettingsItem = (props) => {
+    const { onClick = noop_1.default, activeIcon, inactiveIcon, isActive = false, className = '' } = props;
+    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
+    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `MapSettingsItem ${className}`, onClick: onClick }, { children: [activeIcon &&
                 react_1.default.cloneElement(activeIcon, {
                     className: activeIconClassNames,
@@ -18,16 +17,4 @@ const MapSettingsItem = props => {
                     className: inactiveIconClassNames,
                 })] })));
 };
-MapSettingsItem.defaultProps = {
-    isActive: false,
-    className: '',
-    onClick: () => { },
-};
-MapSettingsItem.propTypes = {
-    activeIcon: prop_types_1.default.node,
-    inactiveIcon: prop_types_1.default.node,
-    isActive: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-    onClick: prop_types_1.default.func,
-};
 exports.default = MapSettingsItem;

package/lib/es/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/lib/es/components/map/components/features/settings/MapSettingsPanel.js

@@ -2,22 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
-const MapSettingsPanel = props => {
-    const { className, children } = props;
+const MapSettingsPanel = (props) => {
+    const { className = '', children } = props;
     const panelClassNames = (0, classnames_1.default)('MapSettingsPanel', className);
     return ((0, jsx_runtime_1.jsx)(framer_motion_1.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: prop_types_1.default.string,
-};
 exports.default = MapSettingsPanel;

package/lib/es/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/lib/es/components/map/components/features/settings/MapSettingsTile.js

@@ -4,17 +4,16 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../../overlay/OverlayTrigger"));
 const Tooltip_1 = tslib_1.__importDefault(require("../../../../tooltip/Tooltip"));
 const useClickOutside_1 = tslib_1.__importDefault(require("../../../../../hooks/useClickOutside"));
 const getComponentWithTooltip = (component, tooltip) => {
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: Tooltip_1.default.TOP, delay: { show: 1200 }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: Tooltip_1.default.TOP, delay: { show: 1200, hide: 100 }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
 };
-const MapSettingsTile = props => {
-    const { onToggle, activeIcon, inactiveIcon, isActive, panel, className, buttonClassName, tooltip } = props, remainingProps = tslib_1.__rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "className", "buttonClassName", "tooltip"]);
+const MapSettingsTile = (props) => {
+    const { onToggle = noop_1.default, activeIcon, inactiveIcon, isActive = false, panel, className, buttonClassName, tooltip } = props, remainingProps = tslib_1.__rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "className", "buttonClassName", "tooltip"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -32,8 +31,8 @@ const MapSettingsTile = props => {
     const buttonRef = (0, useClickOutside_1.default)(handleClosePanel);
     const wrapperClasses = (0, classnames_1.default)('MapSettingsTile', className);
     const buttonClasses = (0, classnames_1.default)('MapSettingsButton', buttonClassName);
-    const activeIconClassNames = (0, classnames_1.default)('hover-scale-110', isActive ? 'display-block' : 'display-none', (0, getOr_1.default)('', 'props.className')(activeIcon));
-    const inactiveIconClassNames = (0, classnames_1.default)('hover-scale-110', isActive ? 'display-none' : 'display-block', (0, getOr_1.default)('', 'props.className')(inactiveIcon));
+    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
+    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
     const button = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: buttonClasses, onClick: handleToggle }, { children: [activeIcon &&
                 react_1.default.cloneElement(activeIcon, {
                     className: activeIconClassNames,
@@ -41,18 +40,6 @@ const MapSettingsTile = props => {
                 react_1.default.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
                 })] })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses, height: 40, width: 40, ref: buttonRef }, remainingProps, { children: [tooltip ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'overflow-hidden' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && panel && panel }) }))] })));
-};
-MapSettingsTile.defaultProps = {
-    className: '',
-    buttonClassName: '',
-    onToggle: () => { },
-};
-MapSettingsTile.propTypes = {
-    className: prop_types_1.default.string,
-    buttonClassName: prop_types_1.default.string,
-    onToggle: prop_types_1.default.func,
-    tooltip: prop_types_1.default.node,
-    panel: prop_types_1.default.node,
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [tooltip ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'overflow-hidden' }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && panel && panel }) }))] })));
 };
 exports.default = MapSettingsTile;

package/lib/es/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/lib/es/components/map/components/features/settings/ZoomButtons.js

@@ -2,16 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const MapIcon_1 = require("../../../icons/MapIcon");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const MapIcon_1 = require("../../../icons/MapIcon");
 const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
     const buttonClasses = (0, classnames_1.default)('ZoomButtons');
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: buttonClasses }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapSettingsTile', onClick: onZoomIn }, { children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) })), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTileSpacer' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'MapSettingsTile', onClick: onZoomOut }, { children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) }))] })));
 };
-ZoomButtons.propTypes = {
-    onZoomIn: prop_types_1.default.func,
-    onZoomOut: prop_types_1.default.func,
-};
 exports.default = ZoomButtons;

package/lib/es/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/lib/es/components/map/components/features/settings/builtinSettings/MapClusterSettings.js

@@ -2,29 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const MapSettingsPanel_1 = tslib_1.__importDefault(require("../MapSettingsPanel"));
 const MapSettingsItem_1 = tslib_1.__importDefault(require("../MapSettingsItem"));
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
-const MapClusterSettings = props => {
-    const { showCluster, onShowClusterChange, onToggle } = props, remainingProps = tslib_1.__rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
-    const handleShowCluster = setShowCluster => {
+const MapClusterSettings = (props) => {
+    const { showCluster = true, onShowClusterChange = noop_1.default, onToggle = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
+    const handleShowCluster = (setShowCluster) => {
         onShowClusterChange(setShowCluster);
         onToggle(setShowCluster);
     };
     return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_INACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_INACTIVE }), panel: (0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [(0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }) }), (0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }) })] }) }, remainingProps)));
 };
-MapClusterSettings.displayName = 'MapClusterSettings';
-MapClusterSettings.defaultProps = {
-    onShowClusterChange: () => { },
-    showCluster: true,
-    onToggle: () => { },
-};
-MapClusterSettings.propTypes = {
-    onShowClusterChange: prop_types_1.default.func,
-    showCluster: prop_types_1.default.bool,
-    onToggle: prop_types_1.default.func,
-};
 exports.default = MapClusterSettings;

package/lib/es/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/lib/es/components/map/components/features/settings/builtinSettings/MapLayerSettings.js

@@ -3,35 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
 const union_1 = tslib_1.__importDefault(require("lodash/fp/union"));
-const uniqueId_1 = tslib_1.__importDefault(require("lodash/fp/uniqueId"));
-const validation_1 = require("../../../../utils/validation");
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const MapSettingsPanel_1 = tslib_1.__importDefault(require("../MapSettingsPanel"));
 const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
 const MapIcon_1 = require("../../../../icons/MapIcon");
-const MapLayerSettings = props => {
-    const { activeBuiltinLayers, activeLayers, onMapLayerChange, layers } = props, remainingProps = tslib_1.__rest(props, ["activeBuiltinLayers", "activeLayers", "onMapLayerChange", "layers"]);
+const MapLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [], onMapLayerChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["activeBuiltinLayers", "activeLayers", "layers", "onMapLayerChange"]);
     const allActiveLayer = (0, union_1.default)(activeBuiltinLayers, activeLayers);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapLayerSettings', isActive: !(0, isEmpty_1.default)(allActiveLayer), activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.LAYER_ACTIVE, className: 'MapLayerIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.LAYER_INACTIVE, className: 'MapLayerIconInactive' }), panel: (0, jsx_runtime_1.jsx)(MapSettingsPanel_1.default, { children: (0, map_1.default)(layer => react_1.default.cloneElement(layer, {
-                key: (0, validation_1.getKeyOrDefault)((0, uniqueId_1.default)('MapLayerSettings_'), layer),
-                activeBuiltinLayers,
-                onMapLayerChange,
-            }), layers) }) }, remainingProps)));
-};
-MapLayerSettings.displayName = 'MapLayerSettings';
-MapLayerSettings.defaultProps = {
-    onMapLayerChange: () => { },
-    activeBuiltinLayers: [],
-    activeLayers: [],
-    layers: [],
-};
-MapLayerSettings.propTypes = {
-    onMapLayerChange: prop_types_1.default.func,
-    activeBuiltinLayers: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    activeLayers: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    layers: prop_types_1.default.array,
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapLayerSettings', isActive: !(0, isEmpty_1.default)(allActiveLayer), activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.LAYER_ACTIVE, className: 'MapLayerIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.LAYER_INACTIVE, className: 'MapLayerIconInactive' }), panel: (0, jsx_runtime_1.jsx)(MapSettingsPanel_1.default, { children: (0, map_1.default)(layer => {
+                var _a;
+                return react_1.default.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)));
 };
 exports.default = MapLayerSettings;

package/lib/es/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";