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

package/lib/es/components/listMenu/ListMenu.js

@@ -2,130 +2,77 @@
 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 react_1 = require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOnce"));
 const ClearableInput_1 = tslib_1.__importDefault(require("../clearableInput/ClearableInput"));
 const ExpanderPanel_1 = tslib_1.__importDefault(require("../expander/ExpanderPanel"));
-// @screen-ls: 480px;
-// @screen-sm: 768px;
-const RESIZE_THROTTELING = 10;
+const ListMenuGroup_1 = tslib_1.__importDefault(require("./ListMenuGroup"));
+const useEsc_1 = tslib_1.__importDefault(require("../../hooks/useEsc"));
+const useWindowResize_1 = tslib_1.__importDefault(require("../../hooks/useWindowResize"));
+const useKey_1 = tslib_1.__importDefault(require("../../hooks/useKey"));
+const RESIZE_THROTTLING = 10;
 const MOBILE_MAX_WIDTH = 580;
-const filterMenuItems = (items, value, filterKey) => {
-    return items.map(menuGroupItem => {
-        const groupItems = menuGroupItem.navItems;
-        const navItems = groupItems.filter(item => { var _a; return (_a = item[filterKey]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(value.toLowerCase()); });
-        return Object.assign(Object.assign({}, menuGroupItem), { navItems });
-    });
-};
-const ListMenuHeader = ({ group, className = '', groupNavItem }) => {
-    if (!group && !groupNavItem) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'ListMenuHeader' }, { children: groupNavItem ? groupNavItem : (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: group })) })));
-};
-const ListMenuItem = ({ disabled, isSubItem = false, children }) => {
-    const classes = (0, classnames_1.default)(disabled && 'disabled', isSubItem && 'subitem');
-    return (0, jsx_runtime_1.jsx)("li", Object.assign({ className: classes }, { children: children }));
-};
-const ListMenuGroup = ({ menuGroup, className }) => {
-    if (!menuGroup.navItems.length) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `ListMenuGroup ${className}` }, { children: [(0, jsx_runtime_1.jsx)(ListMenuHeader, Object.assign({}, menuGroup)), menuGroup.navItems.map(item => ((0, jsx_runtime_1.jsx)(ListMenuItem, Object.assign({ disabled: item.disabled, isSubItem: item.isSubItem }, { children: item.item }), item.key)))] })));
-};
-const NotFoundMessage = ({ notFoundMessage }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage })));
-const ListMenu = props => {
-    const { menuItems, focusFilter, enableFilter, filterPlaceholder, notFoundMessage, className, groupClassName, responsive, autoClose, filterKey } = props, remainingProps = tslib_1.__rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"]);
+const filterMenuItems = (items, value, filterKey) => items.map(item => (Object.assign(Object.assign({}, item), { navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())) })));
+const hasMenuItems = (items) => items.find(({ navItems }) => !(0, isEmpty_1.default)(navItems));
+const ListMenu = (props) => {
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key' } = props, remainingProps = tslib_1.__rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey"]);
     const [filterValue, setFilterValue] = (0, react_1.useState)('');
     const [isMobileMode, setIsMobileMode] = (0, react_1.useState)(false);
     const [isExpanderOpen, setIsExpanderOpen] = (0, react_1.useState)(false);
     const [mobileHeader, setMobileHeader] = (0, react_1.useState)('');
-    const inputRef = (0, react_1.useRef)();
-    const listRef = (0, react_1.useRef)();
+    const inputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
     const buildMobileHeader = () => {
         if (responsive && listRef.current) {
             const [activeElement] = listRef.current.getElementsByClassName('active');
-            setMobileHeader((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), (0, jsx_runtime_1.jsx)("span", { children: activeElement && activeElement.innerText })] })));
+            setMobileHeader((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), (0, jsx_runtime_1.jsx)("span", { children: activeElement === null || activeElement === void 0 ? void 0 : activeElement.innerText })] })));
         }
     };
-    const handleMobileMode = () => setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
-    (0, useEffectOnce_1.default)(() => {
-        const handleKeyDown = event => {
-            // clear on esc
-            if (event.keyCode === 27 && enableFilter && inputRef.current === document.activeElement) {
-                setFilterValue('');
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    });
-    (0, useEffectOnce_1.default)(() => {
-        handleMobileMode();
-        const handleResize = (0, debounce_1.default)(RESIZE_THROTTELING)(() => {
-            handleMobileMode();
-            buildMobileHeader();
-        });
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
+    // clear filter input on esc
+    (0, useEsc_1.default)(() => {
+        if (enableFilter && inputRef.current === document.activeElement) {
+            setFilterValue('');
+        }
     });
-    (0, react_1.useLayoutEffect)(() => {
+    // Convert the menu to an expandable panel for smaller screens
+    const handleResize = (0, debounce_1.default)(RESIZE_THROTTLING)(() => {
         buildMobileHeader();
-    }, [menuItems]);
+        setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
+    });
+    (0, useWindowResize_1.default)(handleResize);
+    const focusInput = () => {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    (0, useKey_1.default)((event) => {
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            focusInput();
+        }
+    });
+    // Focus filter input if requested
     (0, useEffectOnce_1.default)(() => {
-        focusFilter && inputRef.current && inputRef.current.focus();
+        focusFilter && focusInput();
     });
-    const handleClear = () => focusFilter && inputRef.current && inputRef.current.focus();
-    const handleFilterChange = value => setFilterValue(value);
-    const hasMenuItems = items => items.find(menuGroup => !(0, isEmpty_1.default)(menuGroup.navItems));
+    (0, react_1.useLayoutEffect)(() => buildMobileHeader, [menuItems]);
+    const handleClear = () => focusFilter && focusInput();
+    const handleFilterChange = (value) => setFilterValue(value);
     const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
-    const handleExpanderBodyClick = event => {
-        const isListItem = event.target.parentElement.tagName.toLowerCase() === 'li';
-        autoClose && isListItem && setIsExpanderOpen(false);
+    const handleExpanderBodyClick = (event) => {
+        var _a;
+        const isListItem = ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'li';
+        if (autoClose && isListItem) {
+            setIsExpanderOpen(false);
+        }
     };
-    const formClassNames = (0, classnames_1.default)('form-group margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
-    const listMenu = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formClassNames }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear })] })) }))), !hasMenuItems(filteredMenuItems) && (0, jsx_runtime_1.jsx)(NotFoundMessage, { notFoundMessage: notFoundMessage }), filteredMenuItems.map((menuGroup, index) => ((0, jsx_runtime_1.jsx)(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, index)))] })));
+    const formClassNames = (0, classnames_1.default)('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    const listMenu = ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: formClassNames }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'input-group width-100pct' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), (0, jsx_runtime_1.jsx)(ClearableInput_1.default, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear })] })) }))), !hasMenuItems(filteredMenuItems) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => ((0, jsx_runtime_1.jsx)(ListMenuGroup_1.default, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
     if (responsive && isMobileMode) {
-        return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), mountOnEnter: false, unmountOnExit: false, className: 'shadow-default' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
+        return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
     }
     return listMenu;
 };
-ListMenu.defaultProps = {
-    menuItems: [],
-    enableFilter: false,
-    focusFilter: false,
-    className: '',
-    groupClassName: '',
-    responsive: true,
-    autoClose: true,
-    filterKey: 'key',
-};
-ListMenu.propTypes = {
-    menuItems: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        group: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        groupNavItem: prop_types_1.default.node,
-        navItems: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-            key: prop_types_1.default.string.isRequired,
-            item: prop_types_1.default.node.isRequired,
-            disabled: prop_types_1.default.bool,
-        })).isRequired,
-        isSubItem: prop_types_1.default.bool,
-    })).isRequired,
-    enableFilter: prop_types_1.default.bool,
-    focusFilter: prop_types_1.default.bool,
-    filterKey: prop_types_1.default.string,
-    filterPlaceholder: prop_types_1.default.string,
-    notFoundMessage: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    groupClassName: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-    responsive: prop_types_1.default.bool,
-    autoClose: prop_types_1.default.bool,
-};
 exports.default = ListMenu;

package/lib/es/components/listMenu/ListMenuGroup.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+export type ListMenuNavItem = {
+    /**
+     * The name or key of the menu nav item.
+     *
+     * This key will be used for filtering, hence it should match the translated menu item name.
+     */
+    key: string;
+    /**
+     * The menu nav item itself.
+     *
+     * This can be a simple `a`, `NavLink`, `Link`, `span` or even a `FormattedMessage`.
+     */
+    item: string | ReactNode;
+    /**
+     * Disables the list item.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the current menu item is a child of another menu item.
+     */
+    isSubItem?: boolean;
+} & {
+    [otherFilterKey: Exclude<string, 'key' | 'item' | 'disabled' | 'isSubItem'>]: unknown;
+};
+export type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {
+    /**
+     * The optional group header to be shown.
+     *
+     * This can also be a component such as a `FormattedMessage`.
+     */
+    group?: string | ReactNode;
+    /**
+     * The optional group header link to be shown.
+     *
+     * This can be a link component such as `NavLink` or `Link`. This way, the header can be a link itself. In this
+     * case, the `group` prop can be omitted.
+     */
+    groupNavItem?: string | ReactNode;
+    /**
+     * The list of all menu items of a group.
+     */
+    navItems: T[];
+};
+type ListMenuGroupProps<T extends ListMenuNavItem> = {
+    menuGroup: ListMenuItem<T>;
+    className: string;
+};
+declare const ListMenuGroup: <T extends ListMenuNavItem>({ menuGroup, className }: ListMenuGroupProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export default ListMenuGroup;

package/lib/es/components/listMenu/ListMenuGroup.js

@@ -0,0 +1,15 @@
+"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 classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ListMenuHeader_1 = tslib_1.__importDefault(require("./ListMenuHeader"));
+const ListMenuGroup = ({ menuGroup, className }) => {
+    if (!menuGroup.navItems.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `ListMenuGroup ${className}` }, { children: [(0, jsx_runtime_1.jsx)(ListMenuHeader_1.default, Object.assign({}, menuGroup)), menuGroup.navItems.map(item => ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: (0, classnames_1.default)({ disabled: item.disabled, subitem: item.isSubItem }) }, { children: item.item }), item.key)))] })));
+};
+exports.default = ListMenuGroup;

package/lib/es/components/listMenu/ListMenuHeader.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+type ListMenuHeaderProps = {
+    group?: string | ReactNode;
+    groupNavItem?: string | ReactNode;
+    className?: string;
+};
+declare const ListMenuHeader: ({ group, groupNavItem, className }: ListMenuHeaderProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ListMenuHeader;

package/lib/es/components/listMenu/ListMenuHeader.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const ListMenuHeader = ({ group, groupNavItem, className = '' }) => {
+    if (!group && !groupNavItem) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: 'ListMenuHeader' }, { children: groupNavItem ? groupNavItem : (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: group })) })));
+};
+exports.default = ListMenuHeader;

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

@@ -1,99 +1,13 @@
-export const NO_CREDENTIALS_ERROR_MESSAGE: "Cannot instantiate the Map. Missing credentials property.";
+import type { MapProps, MapType } from '../utils/mapTypes';
+declare const Map: {
+    (props: MapProps): import("react/jsx-runtime").JSX.Element;
+    TYPE_DEFAULT: MapType;
+    TYPE_FLEET_STYLE: MapType;
+    TYPE_SATELLITE: MapType;
+    TYPE_TERRAIN: MapType;
+    TYPE_NIGHT: MapType;
+    LAYER_INCIDENTS: string;
+    LAYER_TRAFFIC: string;
+    LAYER_ROAD_RESTRICTIONS: string;
+};
 export default Map;
-declare function Map(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace Map {
-    export { MAP_TYPE_DEFAULT as TYPE_DEFAULT };
-    export { MAP_TYPE_FLEET_STYLE as TYPE_FLEET_STYLE };
-    export { MAP_TYPE_SATELLITE as TYPE_SATELLITE };
-    export { MAP_TYPE_TERRAIN as TYPE_TERRAIN };
-    export { MAP_TYPE_NIGHT as TYPE_NIGHT };
-    export { MAP_LAYER_INCIDENTS as LAYER_INCIDENTS };
-    export { MAP_LAYER_TRAFFIC as LAYER_TRAFFIC };
-    export { MAP_LAYER_ROAD_RESTRICTIONS as LAYER_ROAD_RESTRICTIONS };
-    export namespace defaultProps {
-        export const language: string;
-        export const zoomAnimation: boolean;
-        export const hideMapSettings: boolean;
-        export const hideClusterSettings: boolean;
-        export const hideMapLayerSettings: boolean;
-        export { MAP_TYPE_DEFAULT as mapType };
-        export const mapLayer: never[];
-        export const showCluster: boolean;
-        export const showScaleBar: boolean;
-        export function onMapTypeChange(): void;
-        export function onMapLayerChange(): void;
-        export function onShowClusterChange(): void;
-        export function onZoomIn(): void;
-        export function onZoomOut(): void;
-        export const enableWebGL: boolean;
-        export const enableDevicePixelRatio: boolean;
-        export const darkMode: boolean;
-    }
-    export namespace propTypes {
-        export const credentials: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            app_id: PropTypes.Requireable<string>;
-            app_code: PropTypes.Requireable<string>;
-            api_key: PropTypes.Requireable<string>;
-            apikey: PropTypes.Requireable<string>;
-        }>>>;
-        export const height: PropTypes.Requireable<number>;
-        export const width: PropTypes.Requireable<number>;
-        const language_1: PropTypes.Requireable<string>;
-        export { language_1 as language };
-        export const zoom: PropTypes.Requireable<number>;
-        export const center: PropTypes.Requireable<PropTypes.InferProps<{
-            lat: PropTypes.Validator<number>;
-            lng: PropTypes.Validator<number>;
-        }>>;
-        export const boundingBox: PropTypes.Requireable<PropTypes.InferProps<{
-            top: PropTypes.Validator<number>;
-            bottom: PropTypes.Validator<number>;
-            left: PropTypes.Validator<number>;
-            right: PropTypes.Validator<number>;
-        }>>;
-        export const disableMapEvents: PropTypes.Requireable<boolean>;
-        export const disableBehavior: PropTypes.Requireable<boolean>;
-        export const eventListenerMap: PropTypes.Requireable<object>;
-        const hideMapSettings_1: PropTypes.Requireable<boolean>;
-        export { hideMapSettings_1 as hideMapSettings };
-        const hideClusterSettings_1: PropTypes.Requireable<boolean>;
-        export { hideClusterSettings_1 as hideClusterSettings };
-        const hideMapLayerSettings_1: PropTypes.Requireable<boolean>;
-        export { hideMapLayerSettings_1 as hideMapLayerSettings };
-        export const mapType: PropTypes.Requireable<string>;
-        const mapLayer_1: PropTypes.Requireable<(string | null | undefined)[]>;
-        export { mapLayer_1 as mapLayer };
-        const showCluster_1: PropTypes.Requireable<boolean>;
-        export { showCluster_1 as showCluster };
-        const showScaleBar_1: PropTypes.Requireable<boolean>;
-        export { showScaleBar_1 as showScaleBar };
-        const onMapTypeChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onMapTypeChange_1 as onMapTypeChange };
-        const onMapLayerChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onMapLayerChange_1 as onMapLayerChange };
-        const onShowClusterChange_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onShowClusterChange_1 as onShowClusterChange };
-        const onZoomIn_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onZoomIn_1 as onZoomIn };
-        const onZoomOut_1: PropTypes.Requireable<(...args: any[]) => any>;
-        export { onZoomOut_1 as onZoomOut };
-        export const getApi: PropTypes.Requireable<(...args: any[]) => any>;
-        export const mapSettingsTooltip: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export const mapSettings: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const enableWebGL_1: PropTypes.Requireable<boolean>;
-        export { enableWebGL_1 as enableWebGL };
-        const enableDevicePixelRatio_1: PropTypes.Requireable<boolean>;
-        export { enableDevicePixelRatio_1 as enableDevicePixelRatio };
-        const darkMode_1: PropTypes.Requireable<boolean>;
-        export { darkMode_1 as darkMode };
-    }
-}
-import { MAP_TYPE_DEFAULT } from "./constants";
-import { MAP_TYPE_FLEET_STYLE } from "./constants";
-import { MAP_TYPE_SATELLITE } from "./constants";
-import { MAP_TYPE_TERRAIN } from "./constants";
-import { MAP_TYPE_NIGHT } from "./constants";
-import { MAP_LAYER_INCIDENTS } from "./constants";
-import { MAP_LAYER_TRAFFIC } from "./constants";
-import { MAP_LAYER_ROAD_RESTRICTIONS } from "./constants";
-import PropTypes from "prop-types";