@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/lib/es/components/map/components/constants.d.ts

@@ -1,12 +1,12 @@
-export const MAP_TYPE_DEFAULT: "DEFAULT";
-export const MAP_TYPE_FLEET_STYLE: "FLEET_STYLE";
-export const MAP_TYPE_SATELLITE: "SATELLITE";
-export const MAP_TYPE_TERRAIN: "TERRAIN";
-export const MAP_TYPE_NIGHT: "NIGHT";
-export const MAP_LAYER_INCIDENTS: "INCIDENTS";
-export const MAP_LAYER_TRAFFIC: "TRAFFIC";
-export const MAP_LAYER_ROAD_RESTRICTIONS: "ROAD_RESTRICTIONS";
-export const FORMAT: "png8";
-export const TILE_SIZE: 256;
-export const TILE_TYPE: "maptile";
-export const HIGH_RES_PPI: 320;
+export const MAP_TYPE_DEFAULT: "DEFAULT";
+export const MAP_TYPE_FLEET_STYLE: "FLEET_STYLE";
+export const MAP_TYPE_SATELLITE: "SATELLITE";
+export const MAP_TYPE_TERRAIN: "TERRAIN";
+export const MAP_TYPE_NIGHT: "NIGHT";
+export const MAP_LAYER_INCIDENTS: "INCIDENTS";
+export const MAP_LAYER_TRAFFIC: "TRAFFIC";
+export const MAP_LAYER_ROAD_RESTRICTIONS: "ROAD_RESTRICTIONS";
+export const FORMAT: "png8";
+export const TILE_SIZE: 256;
+export const TILE_TYPE: "maptile";
+export const HIGH_RES_PPI: 320;

package/lib/es/components/map/components/constants.js

@@ -1,15 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HIGH_RES_PPI = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
-exports.MAP_TYPE_DEFAULT = 'DEFAULT';
-exports.MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
-exports.MAP_TYPE_SATELLITE = 'SATELLITE';
-exports.MAP_TYPE_TERRAIN = 'TERRAIN';
-exports.MAP_TYPE_NIGHT = 'NIGHT';
-exports.MAP_LAYER_INCIDENTS = 'INCIDENTS';
-exports.MAP_LAYER_TRAFFIC = 'TRAFFIC';
-exports.MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
-exports.FORMAT = 'png8';
-exports.TILE_SIZE = 256;
-exports.TILE_TYPE = 'maptile';
-exports.HIGH_RES_PPI = 320;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HIGH_RES_PPI = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
+exports.MAP_TYPE_DEFAULT = 'DEFAULT';
+exports.MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
+exports.MAP_TYPE_SATELLITE = 'SATELLITE';
+exports.MAP_TYPE_TERRAIN = 'TERRAIN';
+exports.MAP_TYPE_NIGHT = 'NIGHT';
+exports.MAP_LAYER_INCIDENTS = 'INCIDENTS';
+exports.MAP_LAYER_TRAFFIC = 'TRAFFIC';
+exports.MAP_LAYER_ROAD_RESTRICTIONS = 'ROAD_RESTRICTIONS';
+exports.FORMAT = 'png8';
+exports.TILE_SIZE = 256;
+exports.TILE_TYPE = 'maptile';
+exports.HIGH_RES_PPI = 320;

package/lib/es/components/map/components/context.d.ts

@@ -1,2 +1,2 @@
-export const MapContext: import("react").Context<{}>;
-export const MapSettingsContext: import("react").Context<{}>;
+export const MapContext: import("react").Context<{}>;
+export const MapSettingsContext: import("react").Context<{}>;

package/lib/es/components/map/components/context.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MapSettingsContext = exports.MapContext = void 0;
-const react_1 = require("react");
-exports.MapContext = (0, react_1.createContext)({});
-exports.MapSettingsContext = (0, react_1.createContext)({});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapSettingsContext = exports.MapContext = void 0;
+const react_1 = require("react");
+exports.MapContext = (0, react_1.createContext)({});
+exports.MapSettingsContext = (0, react_1.createContext)({});

package/lib/es/components/map/components/features/ContextMenu.d.ts

@@ -1,2 +1,2 @@
-export default ContextMenu;
-declare function ContextMenu(props: any): null;
+export default ContextMenu;
+declare function ContextMenu(props: any): null;

package/lib/es/components/map/components/features/ContextMenu.js

@@ -1,118 +1,118 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
-const react_1 = require("react");
-const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
-const context_1 = require("../context");
-const HERE_ITEM_CLASS = 'H_context_menu_item';
-const centeredSpinner = '<div class="flex-1-1 display-flex justify-content-center align-items-center"><div class="spinner"></div></div>';
-const getDOMMenuItems = () => document.getElementsByClassName(HERE_ITEM_CLASS);
-// Query DOM nodes for "H_context_menu_item" and update label when children label has changed.
-// This function allows to use HTML markup for the menu items in the second render
-const updateMenuItemLabels = (nodes = [], items = []) => {
-    setTimeout(() => {
-        Array.from(nodes).forEach((itemNode, index) => {
-            const item = items[index];
-            if (!item) {
-                return;
-            }
-            const { hasSpinner, className, labelClassName = '', icon, label } = item.props;
-            const contentLabel = `<span class="${labelClassName}">${label}</span>`;
-            const labelWithIcon = `<span class="rioglyph ${icon} margin-right-5"></span>${contentLabel}`;
-            const content = icon ? labelWithIcon : contentLabel;
-            if (hasSpinner) {
-                itemNode.innerHTML = centeredSpinner;
-            }
-            else {
-                itemNode.innerHTML = content;
-            }
-            const wrapperClassList = itemNode.classList;
-            // Since classList.add() does not allow for space separated multiple classes, we have to add them separately
-            if (className) {
-                className.split(' ').map(singleClassName => wrapperClassList.add(singleClassName));
-            }
-        });
-    }, 0);
-};
-const addItemsToEvent = (items, event, map, targetPosition) => {
-    const amount = items.length - 1;
-    // Get geo coordinates from the screen coordinates or use a fixed set to be returned when
-    // clicking the menu item.
-    const coord = targetPosition || map.screenToGeo(event.viewportX, event.viewportY);
-    items.map((item, index) => {
-        if (!item) {
-            return;
-        }
-        const { label, disabled, callback } = item.props;
-        event.items.push(new H.util.ContextItem({
-            label,
-            disabled,
-            callback: () => callback(coord, map),
-        }));
-        // add separator but for last element
-        if (index < amount) {
-            event.items.push(H.util.ContextItem.SEPARATOR);
-        }
-    });
-};
-const ContextMenu = props => {
-    const { api, onOpen, menuItems: items, contextMenuEvent, targetPosition } = props;
-    const mapContext = (0, react_1.useContext)(context_1.MapContext);
-    const { map: hereMap } = api || mapContext.api;
-    // Use a ref to store the target position used when a map object was clicked with a fixed
-    // position to return that position in the onOpen callback instead of the dynamic map position
-    const targetPositionRef = (0, react_1.useRef)();
-    targetPositionRef.current = targetPosition;
-    (0, react_1.useLayoutEffect)(() => {
-        // Add the context menu item to the target event and not to the map event itself
-        // as every element on the map need to have context menu items added to the event they
-        // are triggered from
-        if (contextMenuEvent && contextMenuEvent !== hereMap && (0, isEmpty_1.default)(contextMenuEvent.items)) {
-            addItemsToEvent(items, contextMenuEvent, hereMap, targetPositionRef.current);
-        }
-        updateMenuItemLabels(getDOMMenuItems(), items);
-    }, [items, contextMenuEvent, targetPositionRef.current]);
-    const handleMapContextMenu = event => {
-        if (event.type !== 'contextmenu') {
-            return;
-        }
-        // "contextmenu" event might be triggered not only by a pointer,
-        // but a keyboard button as well. That's why ContextMenuEvent
-        // doesn't have a "currentPointer" property.
-        // Instead it has "viewportX" and "viewportY" properties
-        // for the associates position.
-        // Reset previous target positions when the map was clicked
-        if (event.target === hereMap) {
-            targetPositionRef.current = undefined;
-        }
-        // Get geo coordinates from the screen coordinates.
-        const coord = targetPositionRef.current || hereMap.screenToGeo(event.viewportX, event.viewportY);
-        onOpen(coord);
-        // As we already handle contextmenu event callback on map object separately,
-        // we don't do anything if target is different than the map.
-        if (event.target !== hereMap) {
-            return;
-        }
-        if (!items) {
-            return;
-        }
-        if ((0, isEmpty_1.default)(event.items)) {
-            addItemsToEvent(items, event, hereMap, targetPosition);
-            updateMenuItemLabels(getDOMMenuItems(), items);
-        }
-    };
-    // The contextmenu event handler has to be registered in any case to handle context menu events and to
-    // trigger the callback when the menu opens.
-    (0, react_1.useLayoutEffect)(() => {
-        if (!hereMap) {
-            return;
-        }
-        hereMap.addEventListener('contextmenu', handleMapContextMenu);
-        return () => {
-            hereMap.removeEventListener('contextmenu', handleMapContextMenu);
-        };
-    }, []);
-    return null;
-};
-exports.default = ContextMenu;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable no-undef */
+const react_1 = require("react");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const context_1 = require("../context");
+const HERE_ITEM_CLASS = 'H_context_menu_item';
+const centeredSpinner = '<div class="flex-1-1 display-flex justify-content-center align-items-center"><div class="spinner"></div></div>';
+const getDOMMenuItems = () => document.getElementsByClassName(HERE_ITEM_CLASS);
+// Query DOM nodes for "H_context_menu_item" and update label when children label has changed.
+// This function allows to use HTML markup for the menu items in the second render
+const updateMenuItemLabels = (nodes = [], items = []) => {
+    setTimeout(() => {
+        Array.from(nodes).forEach((itemNode, index) => {
+            const item = items[index];
+            if (!item) {
+                return;
+            }
+            const { hasSpinner, className, labelClassName = '', icon, label } = item.props;
+            const contentLabel = `<span class="${labelClassName}">${label}</span>`;
+            const labelWithIcon = `<span class="rioglyph ${icon} margin-right-5"></span>${contentLabel}`;
+            const content = icon ? labelWithIcon : contentLabel;
+            if (hasSpinner) {
+                itemNode.innerHTML = centeredSpinner;
+            }
+            else {
+                itemNode.innerHTML = content;
+            }
+            const wrapperClassList = itemNode.classList;
+            // Since classList.add() does not allow for space separated multiple classes, we have to add them separately
+            if (className) {
+                className.split(' ').map(singleClassName => wrapperClassList.add(singleClassName));
+            }
+        });
+    }, 0);
+};
+const addItemsToEvent = (items, event, map, targetPosition) => {
+    const amount = items.length - 1;
+    // Get geo coordinates from the screen coordinates or use a fixed set to be returned when
+    // clicking the menu item.
+    const coord = targetPosition || map.screenToGeo(event.viewportX, event.viewportY);
+    items.map((item, index) => {
+        if (!item) {
+            return;
+        }
+        const { label, disabled, callback } = item.props;
+        event.items.push(new H.util.ContextItem({
+            label,
+            disabled,
+            callback: () => callback(coord, map),
+        }));
+        // add separator but for last element
+        if (index < amount) {
+            event.items.push(H.util.ContextItem.SEPARATOR);
+        }
+    });
+};
+const ContextMenu = props => {
+    const { api, onOpen, menuItems: items, contextMenuEvent, targetPosition } = props;
+    const mapContext = (0, react_1.useContext)(context_1.MapContext);
+    const { map: hereMap } = api || mapContext.api;
+    // Use a ref to store the target position used when a map object was clicked with a fixed
+    // position to return that position in the onOpen callback instead of the dynamic map position
+    const targetPositionRef = (0, react_1.useRef)();
+    targetPositionRef.current = targetPosition;
+    (0, react_1.useLayoutEffect)(() => {
+        // Add the context menu item to the target event and not to the map event itself
+        // as every element on the map need to have context menu items added to the event they
+        // are triggered from
+        if (contextMenuEvent && contextMenuEvent !== hereMap && (0, isEmpty_1.default)(contextMenuEvent.items)) {
+            addItemsToEvent(items, contextMenuEvent, hereMap, targetPositionRef.current);
+        }
+        updateMenuItemLabels(getDOMMenuItems(), items);
+    }, [items, contextMenuEvent, targetPositionRef.current]);
+    const handleMapContextMenu = event => {
+        if (event.type !== 'contextmenu') {
+            return;
+        }
+        // "contextmenu" event might be triggered not only by a pointer,
+        // but a keyboard button as well. That's why ContextMenuEvent
+        // doesn't have a "currentPointer" property.
+        // Instead it has "viewportX" and "viewportY" properties
+        // for the associates position.
+        // Reset previous target positions when the map was clicked
+        if (event.target === hereMap) {
+            targetPositionRef.current = undefined;
+        }
+        // Get geo coordinates from the screen coordinates.
+        const coord = targetPositionRef.current || hereMap.screenToGeo(event.viewportX, event.viewportY);
+        onOpen(coord);
+        // As we already handle contextmenu event callback on map object separately,
+        // we don't do anything if target is different than the map.
+        if (event.target !== hereMap) {
+            return;
+        }
+        if (!items) {
+            return;
+        }
+        if ((0, isEmpty_1.default)(event.items)) {
+            addItemsToEvent(items, event, hereMap, targetPosition);
+            updateMenuItemLabels(getDOMMenuItems(), items);
+        }
+    };
+    // The contextmenu event handler has to be registered in any case to handle context menu events and to
+    // trigger the callback when the menu opens.
+    (0, react_1.useLayoutEffect)(() => {
+        if (!hereMap) {
+            return;
+        }
+        hereMap.addEventListener('contextmenu', handleMapContextMenu);
+        return () => {
+            hereMap.removeEventListener('contextmenu', handleMapContextMenu);
+        };
+    }, []);
+    return null;
+};
+exports.default = ContextMenu;

package/lib/es/components/map/components/features/ContextMenuItem.d.ts

@@ -1,28 +1,28 @@
-export default ContextMenuItem;
-declare function ContextMenuItem(props: any): any;
-declare namespace ContextMenuItem {
-    namespace defaultProps {
-        const label: string;
-        const disabled: boolean;
-        function callback(): void;
-        const hasSpinner: boolean;
-        const className: string;
-        const labelClassName: string;
-    }
-    namespace propTypes {
-        const label_1: PropTypes.Validator<string>;
-        export { label_1 as label };
-        const disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        const callback_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { callback_1 as callback };
-        const hasSpinner_1: PropTypes.Requireable<boolean>;
-        export { hasSpinner_1 as hasSpinner };
-        export const icon: PropTypes.Requireable<string>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        const labelClassName_1: PropTypes.Requireable<string>;
-        export { labelClassName_1 as labelClassName };
-    }
-}
-import PropTypes from "prop-types";
+export default ContextMenuItem;
+declare function ContextMenuItem(props: any): H.util.ContextItem;
+declare namespace ContextMenuItem {
+    namespace defaultProps {
+        const label: string;
+        const disabled: boolean;
+        function callback(): void;
+        const hasSpinner: boolean;
+        const className: string;
+        const labelClassName: string;
+    }
+    namespace propTypes {
+        const label_1: PropTypes.Validator<string>;
+        export { label_1 as label };
+        const disabled_1: PropTypes.Requireable<boolean>;
+        export { disabled_1 as disabled };
+        const callback_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { callback_1 as callback };
+        const hasSpinner_1: PropTypes.Requireable<boolean>;
+        export { hasSpinner_1 as hasSpinner };
+        export const icon: PropTypes.Requireable<string>;
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+        const labelClassName_1: PropTypes.Requireable<string>;
+        export { labelClassName_1 as labelClassName };
+    }
+}
+import PropTypes from "prop-types";

package/lib/es/components/map/components/features/ContextMenuItem.js

@@ -1,32 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const ContextMenuItem = props => {
-    // Note: not all defined props are passed to the Here ContextItem are used in ContextMenu component
-    const { label, disabled, callback } = props;
-    return new H.util.ContextItem({
-        label,
-        disabled,
-        callback,
-    });
-};
-ContextMenuItem.defaultProps = {
-    label: '',
-    disabled: false,
-    callback: () => { },
-    hasSpinner: false,
-    className: '',
-    labelClassName: '',
-};
-ContextMenuItem.propTypes = {
-    label: prop_types_1.default.string.isRequired,
-    disabled: prop_types_1.default.bool,
-    callback: prop_types_1.default.func,
-    hasSpinner: prop_types_1.default.bool,
-    icon: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-    labelClassName: prop_types_1.default.string,
-};
-exports.default = ContextMenuItem;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable no-undef */
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const ContextMenuItem = props => {
+    // Note: not all defined props are passed to the Here ContextItem are used in ContextMenu component
+    const { label, disabled, callback } = props;
+    return new H.util.ContextItem({
+        label,
+        disabled,
+        callback,
+    });
+};
+ContextMenuItem.defaultProps = {
+    label: '',
+    disabled: false,
+    callback: () => { },
+    hasSpinner: false,
+    className: '',
+    labelClassName: '',
+};
+ContextMenuItem.propTypes = {
+    label: prop_types_1.default.string.isRequired,
+    disabled: prop_types_1.default.bool,
+    callback: prop_types_1.default.func,
+    hasSpinner: prop_types_1.default.bool,
+    icon: prop_types_1.default.string,
+    className: prop_types_1.default.string,
+    labelClassName: prop_types_1.default.string,
+};
+exports.default = ContextMenuItem;

package/lib/es/components/map/components/features/MapSettings.d.ts

@@ -1,22 +1,22 @@
-export default MapSettings;
-declare function MapSettings(props: any): JSX.Element;
-declare namespace MapSettings {
-    namespace defaultProps {
-        const showCluster: boolean;
-        const className: string;
-    }
-    namespace propTypes {
-        export const onMapTypeChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onMapLayerChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const onShowClusterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        export const mapType: PropTypes.Requireable<string>;
-        export const activeBuiltinLayers: PropTypes.Requireable<(string | null | undefined)[]>;
-        const showCluster_1: PropTypes.Requireable<boolean>;
-        export { showCluster_1 as showCluster };
-        export const mapSettingsTooltip: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const options: PropTypes.Requireable<any[]>;
-        const className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-    }
-}
-import PropTypes from "prop-types";
+export default MapSettings;
+declare function MapSettings(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace MapSettings {
+    namespace defaultProps {
+        const showCluster: boolean;
+        const className: string;
+    }
+    namespace propTypes {
+        export const onMapTypeChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onMapLayerChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onShowClusterChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const mapType: PropTypes.Requireable<string>;
+        export const activeBuiltinLayers: PropTypes.Requireable<(string | null | undefined)[]>;
+        const showCluster_1: PropTypes.Requireable<boolean>;
+        export { showCluster_1 as showCluster };
+        export const mapSettingsTooltip: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        export const options: PropTypes.Requireable<any[]>;
+        const className_1: PropTypes.Requireable<string>;
+        export { className_1 as className };
+    }
+}
+import PropTypes from "prop-types";

package/lib/es/components/map/components/features/MapSettings.js

@@ -1,67 +1,67 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
-const get_1 = tslib_1.__importDefault(require("lodash/fp/get"));
-const uniqueId_1 = tslib_1.__importDefault(require("lodash/fp/uniqueId"));
-const validation_1 = require("../../utils/validation");
-const context_1 = require("../context");
-const MapTypeSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapTypeSettings"));
-const MapLayerSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapLayerSettings"));
-const MapClusterSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapClusterSettings"));
-const getDisplayname = (0, get_1.default)('type.displayName');
-const isMapTypeSettings = option => option.type === MapTypeSettings_1.default;
-const isMapLayerSettings = option => option.type === MapLayerSettings_1.default;
-const isMapClusterSettings = option => option.type === MapClusterSettings_1.default;
-const MapSettings = props => {
-    const settingsContext = (0, react_1.useContext)(context_1.MapSettingsContext);
-    const { mapType, activeBuiltinLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = settingsContext;
-    const { options, className } = props;
-    const mapSettingsClasses = (0, classnames_1.default)('MapSettingsWrapper', className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: mapSettingsClasses }, { children: (0, map_1.default)(option => {
-            if (isMapTypeSettings(option)) {
-                return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
-                    mapType,
-                    onMapTypeChange,
-                });
-            }
-            if (isMapLayerSettings(option)) {
-                return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
-                    activeBuiltinLayers,
-                    onMapLayerChange,
-                });
-            }
-            if (isMapClusterSettings(option)) {
-                return react_1.default.cloneElement(option, {
-                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
-                    showCluster,
-                    onShowClusterChange,
-                });
-            }
-            return react_1.default.cloneElement(option, {
-                key: (0, validation_1.getKeyOrDefault)((0, uniqueId_1.default)('MapSettingsOption_'), option),
-            });
-        }, options) })));
-};
-MapSettings.defaultProps = {
-    showCluster: true,
-    className: '',
-};
-MapSettings.propTypes = {
-    onMapTypeChange: prop_types_1.default.func,
-    onMapLayerChange: prop_types_1.default.func,
-    onShowClusterChange: prop_types_1.default.func,
-    mapType: prop_types_1.default.string,
-    activeBuiltinLayers: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    showCluster: prop_types_1.default.bool,
-    mapSettingsTooltip: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    options: prop_types_1.default.array,
-    className: prop_types_1.default.string,
-};
-exports.default = MapSettings;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const get_1 = tslib_1.__importDefault(require("lodash/fp/get"));
+const uniqueId_1 = tslib_1.__importDefault(require("lodash/fp/uniqueId"));
+const validation_1 = require("../../utils/validation");
+const context_1 = require("../context");
+const MapTypeSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapTypeSettings"));
+const MapLayerSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapLayerSettings"));
+const MapClusterSettings_1 = tslib_1.__importDefault(require("./settings/builtinSettings/MapClusterSettings"));
+const getDisplayname = (0, get_1.default)('type.displayName');
+const isMapTypeSettings = option => option.type === MapTypeSettings_1.default;
+const isMapLayerSettings = option => option.type === MapLayerSettings_1.default;
+const isMapClusterSettings = option => option.type === MapClusterSettings_1.default;
+const MapSettings = props => {
+    const settingsContext = (0, react_1.useContext)(context_1.MapSettingsContext);
+    const { mapType, activeBuiltinLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = settingsContext;
+    const { options, className } = props;
+    const mapSettingsClasses = (0, classnames_1.default)('MapSettingsWrapper', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: mapSettingsClasses }, { children: (0, map_1.default)(option => {
+            if (isMapTypeSettings(option)) {
+                return react_1.default.cloneElement(option, {
+                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
+                    mapType,
+                    onMapTypeChange,
+                });
+            }
+            if (isMapLayerSettings(option)) {
+                return react_1.default.cloneElement(option, {
+                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
+                    activeBuiltinLayers,
+                    onMapLayerChange,
+                });
+            }
+            if (isMapClusterSettings(option)) {
+                return react_1.default.cloneElement(option, {
+                    key: (0, validation_1.getKeyOrDefault)(getDisplayname(option), option),
+                    showCluster,
+                    onShowClusterChange,
+                });
+            }
+            return react_1.default.cloneElement(option, {
+                key: (0, validation_1.getKeyOrDefault)((0, uniqueId_1.default)('MapSettingsOption_'), option),
+            });
+        }, options) })));
+};
+MapSettings.defaultProps = {
+    showCluster: true,
+    className: '',
+};
+MapSettings.propTypes = {
+    onMapTypeChange: prop_types_1.default.func,
+    onMapLayerChange: prop_types_1.default.func,
+    onShowClusterChange: prop_types_1.default.func,
+    mapType: prop_types_1.default.string,
+    activeBuiltinLayers: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    showCluster: prop_types_1.default.bool,
+    mapSettingsTooltip: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+    options: prop_types_1.default.array,
+    className: prop_types_1.default.string,
+};
+exports.default = MapSettings;