@rio-cloud/rio-uikit 1.1.0 → 1.2.0

package/lib/es/components/feedback/FeedbackReactions.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const useHover_1 = tslib_1.__importDefault(require("../../hooks/useHover"));
+const FeedbackReactions = (props) => {
+    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName } = props, remainingProps = tslib_1.__rest(props, ["headline", "animated", "labelUp", "labelDown", "labelPosition", "size", "colorFillUp", "colorFillDown", "colorHoverUp", "colorHoverDown", "onVoteUp", "onVoteDown", "itemClassName"]);
+    const hasLabels = !!labelUp || !!labelDown;
+    const wrapperClassName = (0, classnames_1.default)(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), (0, jsx_runtime_1.jsx)(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] })));
+};
+const FeedbackItem = (props) => {
+    const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
+    const ref = (0, react_1.useRef)(null);
+    const isHover = (0, useHover_1.default)(ref);
+    const iconClasses = (0, classnames_1.default)(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
+    const wrapperClassName = (0, classnames_1.default)('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
+    const isUp = iconName.includes('up');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName, onClick: onClick }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: iconClasses }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
+                        duration: 0.6,
+                        repeat: isHover ? Number.POSITIVE_INFINITY : 0,
+                        repeatType: 'loop',
+                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}` }, { children: text }))] })));
+};
+exports.default = FeedbackReactions;

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';
 export type ListMenuProps<T extends ListMenuNavItem> = {
     /**
@@ -52,6 +52,10 @@ export type ListMenuProps<T extends ListMenuNavItem> = {
      * Additional classes to be set on the menu group element.
      */
     groupClassName?: string;
+    /**
+     * Additional addon for the input group.
+     */
+    trailingInputAddon?: React.ReactNode;
     /**
      * Additional classes to be set on the wrapper element.
      */

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

@@ -18,7 +18,7 @@ const MOBILE_MAX_WIDTH = 580;
 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 { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon } = props, remainingProps = tslib_1.__rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
     const [filterValue, setFilterValue] = (0, react_1.useState)('');
     const [isMobileMode, setIsMobileMode] = (0, react_1.useState)(false);
     const [isExpanderOpen, setIsExpanderOpen] = (0, react_1.useState)(false);
@@ -69,7 +69,7 @@ const ListMenu = (props) => {
         }
     };
     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())))] })));
+    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 }), trailingInputAddon && trailingInputAddon] })) }))), !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), unmountOnExit: false, className: 'shadow-default' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
     }

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

@@ -4,6 +4,7 @@ export type MapSettingsItemProps = {
     inactiveIcon?: JSX.Element;
     isActive?: boolean;
     className?: string;
+    label?: string | JSX.Element;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
 declare const MapSettingsItem: (props: MapSettingsItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,15 +6,18 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 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,
-                }), inactiveIcon &&
-                react_1.default.cloneElement(inactiveIcon, {
-                    className: inactiveIconClassNames,
-                })] })));
+    const { onClick = noop_1.default, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
+    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && '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', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
+    const defaultIcon = activeIcon &&
+        react_1.default.cloneElement(activeIcon, {
+            className: activeIconClassNames,
+        });
+    const highlightedIcon = inactiveIcon &&
+        react_1.default.cloneElement(inactiveIcon, {
+            className: inactiveIconClassNames,
+        });
+    const mapSettingsItemClassNames = (0, classnames_1.default)('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: mapSettingsItemClassNames, onClick: onClick }, { children: [label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'margin-left--5' }, { children: [highlightedIcon, defaultIcon] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 line-height-16 padding-right-5' }, { children: label }))] })), !label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [highlightedIcon, defaultIcon] }))] })));
 };
 exports.default = MapSettingsItem;

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

@@ -3,8 +3,9 @@ export type MapSettingsTileProps = {
     onToggle?: () => void;
     tooltip?: React.ReactNode;
     panel?: React.ReactNode;
-    activeIcon?: JSX.Element;
-    inactiveIcon?: JSX.Element;
+    items?: JSX.Element[] | undefined;
+    activeIcon?: JSX.Element | undefined;
+    inactiveIcon?: JSX.Element | undefined;
     isActive?: boolean;
     buttonClassName?: string;
     className?: string;

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

@@ -6,14 +6,20 @@ const react_1 = tslib_1.__importStar(require("react"));
 const framer_motion_1 = require("framer-motion");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const react_popper_1 = require("react-popper");
 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 MenuItemList_1 = tslib_1.__importDefault(require("../../../../menuItems/MenuItemList"));
+const MenuItem_1 = tslib_1.__importDefault(require("../../../../menuItems/MenuItem"));
+const deviceUtils_1 = require("../../../../../utils/deviceUtils");
+const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
+const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
 const getComponentWithTooltip = (component, tooltip) => {
-    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 })));
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: Tooltip_1.default.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
 };
 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 { onToggle = noop_1.default, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip } = props, remainingProps = tslib_1.__rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "items", "className", "buttonClassName", "tooltip"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -29,8 +35,32 @@ const MapSettingsTile = (props) => {
         }
     };
     const buttonRef = (0, useClickOutside_1.default)(handleClosePanel);
+    const [toggleRef, setToggleRef] = (0, react_1.useState)(null);
+    const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
+    const { styles, attributes } = (0, react_popper_1.usePopper)(toggleRef, refDropdownMenu, {
+        placement: 'top-end',
+        modifiers: (0, deviceUtils_1.isMobileScreen)()
+            ? [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [-60, -60],
+                    },
+                },
+            ]
+            : [],
+    });
+    const dropdownWrapperRef = (0, useClickOutside_1.default)((event) => {
+        if (toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.contains(event.target)) {
+            return;
+        }
+        if (isOpen) {
+            setIsOpen(false);
+            onToggle(false);
+        }
+    });
     const wrapperClasses = (0, classnames_1.default)('MapSettingsTile', className);
-    const buttonClasses = (0, classnames_1.default)('MapSettingsButton', buttonClassName);
+    const buttonClasses = (0, classnames_1.default)('MapSettingsButton', isOpen && 'active', buttonClassName);
     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 &&
@@ -40,6 +70,11 @@ const MapSettingsTile = (props) => {
                 react_1.default.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
                 })] })));
-    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 }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [!items && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tooltip && !isOpen ? 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 }) }))] })), items && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'MapSettingsTile-inner position-relative', ref: setToggleRef }, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'dropdown', ref: dropdownWrapperRef }, { children: isOpen && items && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, Object.assign({ className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: Object.assign(Object.assign({}, styles.popper), { minWidth: '180px' }) }, attributes.popper, { children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                    if (item.type.name === 'MapSettingsDropdownHeader') {
+                                        return item;
+                                    }
+                                    return (0, jsx_runtime_1.jsx)(MenuItem_1.default, { value: item }, index);
+                                }) }))) })) })] })))] })));
 };
 exports.default = MapSettingsTile;

package/lib/es/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type MapAdditionalLayerSettingsProps = {
+    activeBuiltinLayers?: string[];
+    activeLayers?: string[];
+    layers?: JSX.Element[];
+    tooltip?: string | React.ReactNode;
+};
+declare const MapAdditionalLayerSettings: (props: MapAdditionalLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapAdditionalLayerSettings;

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

@@ -0,0 +1,17 @@
+"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 isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const union_1 = tslib_1.__importDefault(require("lodash/fp/union"));
+const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"));
+const MapIcon_1 = require("../../../../icons/MapIcon");
+const MapAdditionalLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [] } = props, remainingProps = tslib_1.__rest(props, ["activeBuiltinLayers", "activeLayers", "layers"]);
+    const allActiveLayer = (0, union_1.default)(activeBuiltinLayers, activeLayers);
+    const isActive = !(0, isEmpty_1.default)(allActiveLayer);
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapAdditionalLayerSettings', isActive: !(0, isEmpty_1.default)(allActiveLayer), activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers }, remainingProps)));
+};
+exports.default = MapAdditionalLayerSettings;

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

@@ -3,6 +3,9 @@ export type MapClusterSettingsProps = {
     onToggle?: (setShowCluster: boolean) => void;
     onShowClusterChange?: (setShowCluster: boolean) => boolean;
     showCluster?: boolean;
+    clusterEnabledLabel?: string | JSX.Element;
+    clusterDisabledLabel?: string | JSX.Element;
+    dropdownHeaderText?: string | JSX.Element;
     tooltip?: string | React.ReactNode;
 };
 declare const MapClusterSettings: (props: MapClusterSettingsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,16 +5,22 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
 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 MapSettingsDropdownHeader_1 = tslib_1.__importDefault(require("../items/MapSettingsDropdownHeader"));
 const MapClusterSettings = (props) => {
-    const { showCluster = true, onShowClusterChange = noop_1.default, onToggle = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
+    const { showCluster = true, onShowClusterChange = noop_1.default, onToggle = noop_1.default, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText } = props, remainingProps = tslib_1.__rest(props, ["showCluster", "onShowClusterChange", "onToggle", "clusterEnabledLabel", "clusterDisabledLabel", "dropdownHeaderText"]);
     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)));
+    const hasLabels = !!clusterEnabledLabel || !!clusterDisabledLabel;
+    const dropdownHeader = dropdownHeaderText && ((0, jsx_runtime_1.jsx)(MapSettingsDropdownHeader_1.default, { label: dropdownHeaderText }, 'mapClusterDropdownHeader'));
+    const enableClusterButtons = ((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' }), label: clusterEnabledLabel }, 'enableClusterButtons'));
+    const disableClusterButton = ((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' }), label: clusterDisabledLabel }, 'disableClusterButton'));
+    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 }), items: hasLabels ? (0, compact_1.default)([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableClusterButtons, disableClusterButton] })) }, remainingProps)));
 };
 exports.default = MapClusterSettings;

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

@@ -11,15 +11,21 @@ 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) => {
+    var _a;
     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 => {
-                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)));
+    const hasLabels = !!((_a = layers.at(0)) === null || _a === void 0 ? void 0 : _a.props.label);
+    const isActive = !(0, isEmpty_1.default)(allActiveLayer);
+    // Inject onMapLayerChange from the MapContext which will be handled
+    // in the main Map component.
+    const enrichedLayers = (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);
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapLayerSettings', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-primary', className: 'MapLayerIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-construction text-color-gray', className: 'MapLayerIconInactive' })) : undefined, items: hasLabels ? enrichedLayers : undefined, panel: !hasLabels && (0, jsx_runtime_1.jsx)(MapSettingsPanel_1.default, { children: enrichedLayers }) }, remainingProps)));
 };
 exports.default = MapLayerSettings;

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

@@ -4,7 +4,13 @@ export type MapTypeSettingsProps = {
     mapType?: string;
     enableNightMap?: boolean;
     onMapTypeChange?: () => MapType;
+    defaultTypeLabel?: string | JSX.Element;
+    truckTypeLabel?: string | JSX.Element;
+    terrainTypeLabel?: string | JSX.Element;
+    satelliteTypeLabel?: string | JSX.Element;
+    nightTypeLabel?: string | JSX.Element;
     tooltip?: string | React.ReactNode;
+    dropdownHeaderText?: string | JSX.Element;
 };
 declare const MapTypeSettings: (props: MapTypeSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export default MapTypeSettings;

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

@@ -4,13 +4,15 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const compact_1 = tslib_1.__importDefault(require("lodash/fp/compact"));
 const constants_1 = require("../../../constants");
 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 MapSettingsDropdownHeader_1 = tslib_1.__importDefault(require("../items/MapSettingsDropdownHeader"));
 const MapTypeSettings = (props) => {
-    const { mapType, onMapTypeChange = noop_1.default, enableNightMap = true } = props, remainingProps = tslib_1.__rest(props, ["mapType", "onMapTypeChange", "enableNightMap"]);
+    const { mapType, onMapTypeChange = noop_1.default, enableNightMap = true, defaultTypeLabel, truckTypeLabel, terrainTypeLabel, satelliteTypeLabel, nightTypeLabel, dropdownHeaderText } = props, remainingProps = tslib_1.__rest(props, ["mapType", "onMapTypeChange", "enableNightMap", "defaultTypeLabel", "truckTypeLabel", "terrainTypeLabel", "satelliteTypeLabel", "nightTypeLabel", "dropdownHeaderText"]);
     const type = (0, react_1.useMemo)(() => ({
         isDefault: mapType === constants_1.MAP_TYPE_DEFAULT,
         isFleetStyle: mapType === constants_1.MAP_TYPE_FLEET_STYLE,
@@ -35,6 +37,22 @@ const MapTypeSettings = (props) => {
             return (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_NIGHT_INACTIVE });
         }
     };
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), panel: (0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableNightMap && ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeNight', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_NIGHT_INACTIVE }) })), (0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeSatelite', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_SATELLITE_INACTIVE }) }), (0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_TERRAIN_INACTIVE }) }), (0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_INACTIVE }) }), (0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_INACTIVE }) })] }) }, remainingProps)));
+    const dropdownHeader = dropdownHeaderText && ((0, jsx_runtime_1.jsx)(MapSettingsDropdownHeader_1.default, { label: dropdownHeaderText }, 'mapTypeDropdownHeader'));
+    const mapTypeNight = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeNight', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_NIGHT), isActive: type.isNight, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_NIGHT_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_NIGHT_INACTIVE }), label: nightTypeLabel }, 'MapTypeNight'));
+    const mapTypeSatellite = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeSatellite', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_SATELLITE), isActive: type.isSatellite, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_SATELLITE_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_SATELLITE_INACTIVE }), label: satelliteTypeLabel }, 'MapTypeSatellite'));
+    const mapTypeTerrain = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeTerrain', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_TERRAIN), isActive: type.isTerrain, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_TERRAIN_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_TERRAIN_INACTIVE }), label: terrainTypeLabel }, 'MapTypeTerrain'));
+    const mapTypeTruck = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlatTruck', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_FLEET_STYLE), isActive: type.isFleetStyle, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_TRUCK_INACTIVE }), label: truckTypeLabel }, 'MapTypeFlatTruck'));
+    const mapTypeDefault = ((0, jsx_runtime_1.jsx)(MapSettingsItem_1.default, { className: 'MapTypeFlat', onClick: () => onMapTypeChange(constants_1.MAP_TYPE_DEFAULT), isActive: type.isDefault, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_ACTIVE }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.MAP_TYPE_FLAT_INACTIVE }), label: defaultTypeLabel }, 'MapTypeFlat'));
+    const hasLabels = !!defaultTypeLabel || !!truckTypeLabel || !!terrainTypeLabel || !!satelliteTypeLabel || !!nightTypeLabel;
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapTypeSettings', inactiveIcon: getIcon(type), items: hasLabels
+            ? (0, compact_1.default)([
+                dropdownHeader,
+                mapTypeNight,
+                mapTypeSatellite,
+                mapTypeTerrain,
+                mapTypeTruck,
+                mapTypeDefault,
+            ])
+            : undefined, panel: !hasLabels && ((0, jsx_runtime_1.jsxs)(MapSettingsPanel_1.default, { children: [enableNightMap && mapTypeNight, mapTypeSatellite, mapTypeTerrain, mapTypeTruck, mapTypeDefault] })) }, remainingProps)));
 };
 exports.default = MapTypeSettings;

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

@@ -8,6 +8,6 @@ const MapSettingsTile_1 = tslib_1.__importDefault(require("../MapSettingsTile"))
 const MapIcon_1 = require("../../../../icons/MapIcon");
 const MapCenterMarkerButton = (props) => {
     const { isActive = false, onToggle } = props, remainingProps = tslib_1.__rest(props, ["isActive", "onToggle"]);
-    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CENTER_MARKER_ACTIVE, className: 'MapCenterMarkerButtonIcon' }), inactiveIcon: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.CENTER_MARKER_INACTIVE, className: 'MapCenterMarkerButtonIconInactive' }), onToggle: onToggle }, remainingProps)));
+    return ((0, jsx_runtime_1.jsx)(MapSettingsTile_1.default, Object.assign({ className: 'MapCenterMarkerButton', isActive: isActive, activeIcon: isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-primary', className: 'MapCenterMarkerButtonIcon' })) : undefined, inactiveIcon: !isActive ? ((0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: 'rioglyph-position text-color-gray', className: 'MapCenterMarkerButtonIconInactive' })) : undefined, onToggle: onToggle }, remainingProps)));
 };
 exports.default = MapCenterMarkerButton;

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

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export type MapCustomerPoiSettingsItemProps = {
     onToggle?: (setIsShown: boolean) => void;
     isActive?: boolean;
+    label?: string | JSX.Element;
 };
 declare const MapCustomerPoiSettingsItem: (props: MapCustomerPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MapCustomerPoiSettingsItem;

package/lib/es/components/map/components/features/settings/items/MapLayerIncidentsItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerIncidentsItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/lib/es/components/map/components/features/settings/items/MapLayerRoadRestrictionsItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerRoadRestrictionsItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/lib/es/components/map/components/features/settings/items/MapLayerTrafficItem.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 export type MapLayerTrafficItemProps = {
     activeBuiltinLayers?: string[];
+    label?: string | JSX.Element;
     onToggle?: () => void;
     onMapLayerChange?: (layer: string) => string;
 };

package/lib/es/components/map/components/features/settings/items/MapSettingsDropdownHeader.d.ts

@@ -0,0 +1,4 @@
+import { type DropdownHeaderProps } from '../../../../../selects/DropdownHeader';
+export type MapSettingsDropdownHeaderProps = DropdownHeaderProps & {};
+declare const MapSettingsDropdownHeader: (props: MapSettingsDropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default MapSettingsDropdownHeader;

package/lib/es/components/map/components/features/settings/items/MapSettingsDropdownHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const DropdownHeader_1 = tslib_1.__importDefault(require("../../../../../selects/DropdownHeader"));
+const MapSettingsDropdownHeader = (props) => {
+    const remainingProps = tslib_1.__rest(props, []);
+    return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, Object.assign({ className: 'MapSettingsDropdownHeader' }, remainingProps));
+};
+exports.default = MapSettingsDropdownHeader;

package/lib/es/components/map/components/features/settings/items/MapWorkshopPoiSettingsItem.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 export type MapWorkshopPoiSettingsItemProps = {
     onToggle?: (setIsShown: boolean) => void;
     isActive?: boolean;
+    label?: string | JSX.Element;
 };
 declare const MapWorkshopPoiSettingsItem: (props: MapWorkshopPoiSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MapWorkshopPoiSettingsItem;

package/lib/es/components/map/icons/MapIcon.d.ts

@@ -1,11 +1,10 @@
-import React from 'react';
 export type MapIconProps = {
     name?: string;
     height?: number;
     width?: number;
     className?: string;
 };
-export declare const MapIcon: (props: MapIconProps) => React.FunctionComponentElement<any>;
+export declare const MapIcon: (props: MapIconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ZOOM_IN = "zoomIn";
 export declare const ZOOM_OUT = "zoomOut";
 export declare const BOUNDING_BOX_ACTIVE = "boundingBoxActive";

package/lib/es/components/map/icons/MapIcon.js

@@ -7,7 +7,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const MapIcon = (props) => {
     const { className = '', name = '', height = 40, width = 40 } = props;
-    // const fillColor = active ? '#30B4C0' : '#A7AFBB';
+    if (name.includes('rioglyph')) {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110' }, { children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${name} text-size-200pct` }) })));
+    }
     return react_1.default.cloneElement(icons[name], {
         className,
         height,

package/lib/es/components/mapMarker/ClusterMapMarker.d.ts

@@ -48,6 +48,10 @@ export type ClusterMapMarkerProps = {
      * Name of a rioglyph icon.
      */
     iconName?: string;
+    /**
+     * Marker cursor
+     */
+    cursor?: 'cursor-pointer' | 'cursor-grab' | 'cursor-not-allowed';
 };
 declare const ClusterMapMarker: (props: ClusterMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default ClusterMapMarker;

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -6,8 +6,8 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const mapTypes_1 = require("../map/utils/mapTypes");
 const ClusterMapMarker = (props) => {
-    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, } = props;
-    const clusterClasses = (0, classnames_1.default)('rio-map-cluster-circle', active && 'active');
+    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, cursor = 'cursor-pointer', } = props;
+    const clusterClasses = (0, classnames_1.default)('rio-map-cluster-circle', active && 'active', cursor);
     const classes = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-cluster' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: clusterClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && (0, jsx_runtime_1.jsx)("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));

package/lib/es/components/mapMarker/SingleMapMarker.d.ts

@@ -114,6 +114,10 @@ export type SingleMapMarkerProps = {
      * Shows only the anchor without the rest of the marker.
      */
     anchorOnly?: boolean;
+    /**
+     * Marker cursor
+     */
+    cursor?: 'cursor-pointer' | 'cursor-grab' | 'cursor-not-allowed';
 };
 declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -19,11 +19,11 @@ const MapStateIndicator = (props) => {
 };
 const getIcons = (iconNames = []) => iconNames.map((name, index) => ((0, jsx_runtime_1.jsx)("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
-    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, } = props;
+    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', } = props;
     const largeAnchor = anchorSize === 'lg';
     const classes = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
-    const anchorClasses = (0, classnames_1.default)('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '');
-    const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging');
+    const anchorClasses = (0, classnames_1.default)('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
+    const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: singleClasses }, { children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };

package/lib/es/components/selects/DropdownHeader.d.ts

@@ -3,6 +3,7 @@ export type DropdownHeaderProps = {
     icon?: React.ReactNode;
     center?: boolean;
     label: string | React.ReactNode;
+    className?: string;
 };
 declare const DropdownHeader: (props: DropdownHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownHeader;

package/lib/es/components/selects/DropdownHeader.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
 require("react");
 const DropdownHeader = (props) => {
-    const { icon, label, center = true } = props;
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
+    const { icon, label, center = true, className = '' } = props;
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''} ${className}` }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
 };
 exports.default = DropdownHeader;

package/lib/es/components/selects/Multiselect.js

@@ -77,7 +77,7 @@ const Multiselect = (props) => {
         const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = (0, isEmpty_1.default)(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
-        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? (0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }) : renderSelection(), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
+        const toggleButton = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] })));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }

package/lib/es/components/selects/MultiselectToggleFilter.js

@@ -8,7 +8,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const MultiselectToggleFilter = (props) => {
     const { isActive, selectedItemIds, filterValue, multiline, onFilterChange } = props;
-    const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active', multiline && 'padding-left-0');
+    const inputClasses = (0, classnames_1.default)('multiselect-filter-input', (0, isEmpty_1.default)(selectedItemIds) && 'multiselect-filter-input-placeholder', isActive && 'multiselect-filter-input-active');
     return ((0, jsx_runtime_1.jsx)("input", { type: 'text', role: 'searchbox', className: inputClasses, 
         // biome-ignore lint/a11y/noAutofocus: autofocus is intentionally set to allow instant typing to filter
         autoFocus: true, onChange: onFilterChange, defaultValue: filterValue }));