@rio-cloud/rio-uikit 1.1.0 → 1.2.1

package/DropdownHeader.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/selects/DropdownHeader';
+export * from './components/selects/DropdownHeader';

package/DropdownHeader.js

@@ -0,0 +1,2 @@
+export { default } from './components/selects/DropdownHeader';
+export * from './components/selects/DropdownHeader';

package/FeedbackInlineButtons.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackInlineButtons';
+export * from './components/feedback/FeedbackInlineButtons';

package/FeedbackInlineButtons.js

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackInlineButtons';
+export * from './components/feedback/FeedbackInlineButtons';

package/FeedbackRating.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackRating';
+export * from './components/feedback/FeedbackRating';

package/FeedbackRating.js

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackRating';
+export * from './components/feedback/FeedbackRating';

package/FeedbackReactions.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackReactions';
+export * from './components/feedback/FeedbackReactions';

package/FeedbackReactions.js

@@ -0,0 +1,2 @@
+export { default } from './components/feedback/FeedbackReactions';
+export * from './components/feedback/FeedbackReactions';

package/MapAdditionalLayerSettings.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';
+export * from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';

package/MapAdditionalLayerSettings.js

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';
+export * from './components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings';

package/MapSettingsDropdownHeader.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/items/MapSettingsDropdownHeader';
+export * from './components/map/components/features/settings/items/MapSettingsDropdownHeader';

package/MapSettingsDropdownHeader.js

@@ -0,0 +1,2 @@
+export { default } from './components/map/components/features/settings/items/MapSettingsDropdownHeader';
+export * from './components/map/components/features/settings/items/MapSettingsDropdownHeader';

package/SmoothScrollbars.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/smoothScrollbars/SmoothScrollbars';
+export * from './components/smoothScrollbars/SmoothScrollbars';

package/SmoothScrollbars.js

@@ -0,0 +1,2 @@
+export { default } from './components/smoothScrollbars/SmoothScrollbars';
+export * from './components/smoothScrollbars/SmoothScrollbars';

package/components/assetTree/TreeLeaf.js

@@ -8,6 +8,6 @@ import RadioButton from '../radiobutton/RadioButton';
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsx("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: _jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName', onClick: onActiveItem }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] }))] })));
 });
 export default TreeLeaf;

package/components/assetTree/TreeNode.js

@@ -6,6 +6,6 @@ const TreeNode = React.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", Object.assign({ className: 'TreeLabel' }, { children: [_jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", Object.assign({ className: 'TreeLabelNameText' }, { children: _jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), _jsx("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length }))] })), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
+    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id) }, { children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", Object.assign({ className: 'TreeLabel TreeLabelName' }, { children: [node.icon && _jsx("span", { className: `rioglyph ${node.icon}` }), _jsx("span", Object.assign({ className: 'TreeLabelNameText' }, { children: _jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: node.name })) })), _jsx("span", Object.assign({ className: 'TreeLabelCount label label-muted label-filled label-condensed' }, { children: node.items.length })), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] }))] })));
 });
 export default TreeNode;

package/components/assetTree/TreeRoot.js

@@ -4,7 +4,7 @@ import 'react';
 import classNames from 'classnames';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
-    const treeRootClasses = classNames('TreeRoot', 'user-select-none overflow-hidden');
+    const treeRootClasses = classNames('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
     const [parent, enableAnimations] = useAutoAnimate();
     enableAnimations(!disableAnimation);
     return (_jsx("div", Object.assign({ ref: parent, className: treeRootClasses, style: { maxHeight } }, { children: children })));

package/components/checkbox/Checkbox.js

@@ -51,7 +51,7 @@ const Checkbox = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", Object.assign({ className: 'checkbox-text' }, { children: _jsx("span", { children: text }) }))), renderCustomContent && children] })));
+    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, htmlFor: id, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { id: id, name: name, type: 'checkbox', checked: checked, required: required, defaultChecked: defaultChecked, disabled: disabled, className: inputClassnames, onClick: onClick, onChange: onChange, ref: inputRef }), renderCustomIcon && (_jsx(CheckboxIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && _jsx("span", Object.assign({ className: 'checkbox-text' }, { children: text && _jsx("span", { children: text }) })), renderCustomContent && children] })));
 };
 Checkbox.ICON_LABEL_VERTICAL = ICON_LABEL_VERTICAL;
 Checkbox.ICON_LABEL_HORIZONTAL = ICON_LABEL_HORIZONTAL;

package/components/feedback/FeedbackInlineButtons.d.ts

@@ -0,0 +1,13 @@
+import React, { type ComponentProps } from 'react';
+type FeedbackInlineButtonsProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline inlined with the buttons.
+     */
+    headline?: React.ReactNode;
+    /**
+     * List of buttons to be shown.
+     */
+    buttons?: React.ReactNode[];
+};
+declare const FeedbackInlineButtons: (props: FeedbackInlineButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackInlineButtons;

package/components/feedback/FeedbackInlineButtons.js

@@ -0,0 +1,9 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+const FeedbackInlineButtons = (props) => {
+    const { buttons = [], headline } = props, remainingProps = __rest(props, ["buttons", "headline"]);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none' }, { children: [headline && _jsx("div", Object.assign({ className: 'text-color-dark' }, { children: headline })), _jsx("div", Object.assign({ className: 'btn-toolbar gap-5' }, { children: buttons.map(button => button) }))] })));
+};
+export default FeedbackInlineButtons;

package/components/feedback/FeedbackRating.d.ts

@@ -0,0 +1,65 @@
+import React, { type ComponentProps } from 'react';
+import type { BUTTON_SIZE, BUTTON_STYLE, BUTTON_VARIANT } from '../button/Button';
+type FeedbackRatingProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline
+     */
+    headline?: React.ReactNode;
+    /**
+     * The amount of toggle buttons used to rate.
+     *
+     * @default 1
+     */
+    count: number;
+    /**
+     * Defines whether the buttons are round.
+     *
+     * @default false
+     */
+    circleButtons?: boolean;
+    /**
+     * Optional class names applied to all the buttons.
+     * If you need more control on styling individual buttons, see `buttonStyles`.
+     */
+    buttonClassName?: string;
+    /**
+     * Array of button labels that will be used instead of the index.
+     * There needs to be a label for each button defined.
+     */
+    buttonLabels?: React.ReactNode[];
+    /**
+     * Array of button styles to individually define the button size, style and variant.
+     * There needs to be a item for each button defined.
+     */
+    buttonStyles?: {
+        bsSize?: BUTTON_SIZE;
+        bsStyle?: BUTTON_STYLE;
+        variant?: BUTTON_VARIANT;
+        className?: string;
+    }[];
+    /**
+     * Left aligned label to name the lowest rating option.
+     */
+    leftLabel?: React.ReactNode;
+    /**
+     * Right aligned label to name the highest rating option.
+     */
+    rightLabel?: React.ReactNode;
+    /**
+     * Additional icon placed in front of the rating buttons.
+     */
+    leadingIcon?: React.ReactNode;
+    /**
+     * Additional icon placed after the rating buttons.
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * Callback triggered when the rating changes.
+     *
+     * @param rating The rating value. Undefined, when a toggle is unchecked.
+     * @returns
+     */
+    onRatingChanged?: (rating: number | undefined) => void;
+};
+declare const FeedbackRating: (props: FeedbackRatingProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackRating;

package/components/feedback/FeedbackRating.js

@@ -0,0 +1,23 @@
+import { __rest } from "tslib";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import ToggleButton from '../button/ToggleButton';
+const FeedbackRating = (props) => {
+    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { } } = props, remainingProps = __rest(props, ["headline", "count", "circleButtons", "buttonLabels", "buttonStyles", "buttonClassName", "leftLabel", "rightLabel", "leadingIcon", "trailingIcon", "onRatingChanged"]);
+    const [rating, setRating] = useState();
+    const handleRating = (value) => {
+        setRating(value);
+        onRatingChanged(value);
+    };
+    const hasSubLabels = !!leftLabel || !!rightLabel;
+    const buttonWrapperClasses = classNames('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
+    const leadingTrailingIconClasses = classNames('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: 'FeedbackRating' }, { children: [headline && _jsx("div", Object.assign({ className: 'text-medium text-size-16 margin-bottom-10' }, { children: headline })), _jsxs("div", Object.assign({ className: buttonWrapperClasses }, { children: [leadingIcon && _jsx("div", Object.assign({ className: leadingTrailingIconClasses }, { children: leadingIcon })), _jsxs("div", { children: [_jsx("div", Object.assign({ className: 'display-flex flex-wrap gap-10' }, { children: Array.from({ length: count }, (_, index) => {
+                                    var _a, _b;
+                                    const indexNumber = index + 1;
+                                    return (_createElement(ToggleButton, Object.assign({}, buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles[index], { key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${(_a = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles[index].className) !== null && _a !== void 0 ? _a : ''}` }), (_b = buttonLabels === null || buttonLabels === void 0 ? void 0 : buttonLabels[index]) !== null && _b !== void 0 ? _b : indexNumber));
+                                }) })), hasSubLabels && (_jsxs("div", Object.assign({ className: 'display-flex justify-content-between margin-top-5 gap-25' }, { children: [leftLabel ? _jsx("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: leftLabel })) : _jsx("div", {}), rightLabel ? _jsx("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: rightLabel })) : _jsx("div", {})] })))] }), trailingIcon && _jsx("div", Object.assign({ className: leadingTrailingIconClasses }, { children: trailingIcon }))] }))] })));
+};
+export default FeedbackRating;

package/components/feedback/FeedbackReactions.d.ts

@@ -0,0 +1,71 @@
+import React, { type ComponentProps } from 'react';
+type FeedbackReactionsProps = ComponentProps<'div'> & {
+    /**
+     * Optional headline inlined with the buttons.
+     */
+    headline?: React.ReactNode;
+    /**
+     * Size of the reaction buttons.
+     *
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Position of the reaction button labels.
+     *
+     * @default 'bottom'
+     */
+    labelPosition?: 'right' | 'bottom';
+    /**
+     * Label for the up button.
+     */
+    labelUp?: React.ReactNode;
+    /**
+     * Label for the down button.
+     */
+    labelDown?: React.ReactNode;
+    /**
+     * Custom fill color for the up button.
+     *
+     * @default 'bg-lightest'
+     */
+    colorFillUp?: string;
+    /**
+     * Custom fill color for the down button.
+     *
+     * @default 'bg-lightest'
+     */
+    colorFillDown?: string;
+    /**
+     * Custom hover color for the up button.
+     *
+     * @default 'primary'
+     */
+    colorHoverUp?: string;
+    /**
+     * Custom hover color for the down button.
+     *
+     * @default 'primary'
+     */
+    colorHoverDown?: string;
+    /**
+     * Callback function triggered on up vote.
+     */
+    onVoteUp?: VoidFunction;
+    /**
+     * Callback function triggered on down vote.
+     */
+    onVoteDown?: VoidFunction;
+    /**
+     * Additional classes applied to the individual reaction item (button and label).
+     */
+    itemClassName?: string;
+    /**
+     * Defines whether the reaction icon is animated.
+     *
+     * @default false
+     */
+    animated?: boolean;
+};
+declare const FeedbackReactions: (props: FeedbackReactionsProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackReactions;

package/components/feedback/FeedbackReactions.js

@@ -0,0 +1,26 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+import useHover from '../../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 = __rest(props, ["headline", "animated", "labelUp", "labelDown", "labelPosition", "size", "colorFillUp", "colorFillDown", "colorHoverUp", "colorHoverDown", "onVoteUp", "onVoteDown", "itemClassName"]);
+    const hasLabels = !!labelUp || !!labelDown;
+    const wrapperClassName = classNames(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassName }, { children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _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 = useRef(null);
+    const isHover = useHover(ref);
+    const iconClasses = classNames(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 = classNames('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
+    const isUp = iconName.includes('up');
+    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassName, onClick: onClick }, { children: [_jsx("div", Object.assign({ className: iconClasses }, { children: _jsx(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` }) })), _jsx("div", Object.assign({ className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}` }, { children: text }))] })));
+};
+export default FeedbackReactions;

package/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/components/listMenu/ListMenu.js

@@ -16,7 +16,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 }) => !isEmpty(navItems));
 const ListMenu = (props) => {
-    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key' } = props, remainingProps = __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 = __rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
     const [filterValue, setFilterValue] = useState('');
     const [isMobileMode, setIsMobileMode] = useState(false);
     const [isExpanderOpen, setIsExpanderOpen] = useState(false);
@@ -67,7 +67,7 @@ const ListMenu = (props) => {
         }
     };
     const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
-    const listMenu = (_jsxs("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && (_jsx("div", Object.assign({ className: formClassNames }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear })] })) }))), !hasMenuItems(filteredMenuItems) && (_jsx("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
+    const listMenu = (_jsxs("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && (_jsx("div", Object.assign({ className: formClassNames }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] })) }))), !hasMenuItems(filteredMenuItems) && (_jsx("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
     if (responsive && isMobileMode) {
         return (_jsx(ExpanderPanel, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: _jsx("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
     }

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

@@ -1,17 +1,20 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 const MapSettingsItem = (props) => {
-    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, className = '' } = props;
-    const activeIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
-    const inactiveIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
-    return (_jsxs("div", Object.assign({ className: `MapSettingsItem ${className}`, onClick: onClick }, { children: [activeIcon &&
-                React.cloneElement(activeIcon, {
-                    className: activeIconClassNames,
-                }), inactiveIcon &&
-                React.cloneElement(inactiveIcon, {
-                    className: inactiveIconClassNames,
-                })] })));
+    const { onClick = noop, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
+    const activeIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
+    const inactiveIconClassNames = classNames('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
+    const defaultIcon = activeIcon &&
+        React.cloneElement(activeIcon, {
+            className: activeIconClassNames,
+        });
+    const highlightedIcon = inactiveIcon &&
+        React.cloneElement(inactiveIcon, {
+            className: inactiveIconClassNames,
+        });
+    const mapSettingsItemClassNames = classNames('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
+    return (_jsxs("div", Object.assign({ className: mapSettingsItemClassNames, onClick: onClick }, { children: [label && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'margin-left--5' }, { children: [highlightedIcon, defaultIcon] })), _jsx("div", Object.assign({ className: 'flex-1-1 line-height-16 padding-right-5' }, { children: label }))] })), !label && (_jsxs(_Fragment, { children: [highlightedIcon, defaultIcon] }))] })));
 };
 export default MapSettingsItem;

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

@@ -1,17 +1,23 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
+import { usePopper } from 'react-popper';
 import OverlayTrigger from '../../../../overlay/OverlayTrigger';
 import Tooltip from '../../../../tooltip/Tooltip';
 import useClickOutside from '../../../../../hooks/useClickOutside';
+import MenuItemList from '../../../../menuItems/MenuItemList';
+import MenuItem from '../../../../menuItems/MenuItem';
+import { isMobileScreen } from '../../../../../utils/deviceUtils';
+const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
+const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
 const getComponentWithTooltip = (component, tooltip) => {
-    return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.TOP, delay: { show: 1200, hide: 100 }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
+    return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: component })));
 };
 const MapSettingsTile = (props) => {
-    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, className, buttonClassName, tooltip } = props, remainingProps = __rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "className", "buttonClassName", "tooltip"]);
+    const { onToggle = noop, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip } = props, remainingProps = __rest(props, ["onToggle", "activeIcon", "inactiveIcon", "isActive", "panel", "items", "className", "buttonClassName", "tooltip"]);
     const [isOpen, setIsOpen] = useState(false);
     const handleToggle = () => {
         const newState = !isOpen;
@@ -27,8 +33,32 @@ const MapSettingsTile = (props) => {
         }
     };
     const buttonRef = useClickOutside(handleClosePanel);
+    const [toggleRef, setToggleRef] = useState(null);
+    const [refDropdownMenu, setRefDropdownMenu] = useState(null);
+    const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {
+        placement: 'top-end',
+        modifiers: isOpen && isMobileScreen()
+            ? [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [-60, -60],
+                    },
+                },
+            ]
+            : [],
+    });
+    const dropdownWrapperRef = useClickOutside((event) => {
+        if (toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.contains(event.target)) {
+            return;
+        }
+        if (isOpen) {
+            setIsOpen(false);
+            onToggle(false);
+        }
+    });
     const wrapperClasses = classNames('MapSettingsTile', className);
-    const buttonClasses = classNames('MapSettingsButton', buttonClassName);
+    const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);
     const activeIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', (activeIcon === null || activeIcon === void 0 ? void 0 : activeIcon.props.className) || '');
     const inactiveIconClassNames = classNames('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', (inactiveIcon === null || inactiveIcon === void 0 ? void 0 : inactiveIcon.props.className) || '');
     const button = (_jsxs("div", Object.assign({ className: buttonClasses, onClick: handleToggle }, { children: [activeIcon &&
@@ -38,6 +68,11 @@ const MapSettingsTile = (props) => {
                 React.cloneElement(inactiveIcon, {
                     className: inactiveIconClassNames,
                 })] })));
-    return (_jsxs("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [tooltip ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", Object.assign({ className: 'overflow-hidden' }, { children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) }))] })));
+    return (_jsxs("div", Object.assign({ className: wrapperClasses, ref: buttonRef }, remainingProps, { children: [!items && (_jsxs(_Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx("div", Object.assign({ className: 'overflow-hidden' }, { children: _jsx(AnimatePresence, { children: isOpen && panel && panel }) }))] })), items && (_jsxs("div", Object.assign({ className: 'MapSettingsTile-inner position-relative', ref: setToggleRef }, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, _jsx(AnimatePresence, { children: _jsx("div", Object.assign({ className: 'dropdown', ref: dropdownWrapperRef }, { children: isOpen && items && (_jsx(MenuItemList, 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 _jsx(MenuItem, { value: item }, index);
+                                }) }))) })) })] })))] })));
 };
 export default MapSettingsTile;

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

@@ -0,0 +1,15 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import union from 'lodash/fp/union';
+import MapSettingsTile from '../MapSettingsTile';
+import { MapIcon } from '../../../../icons/MapIcon';
+const MapAdditionalLayerSettings = (props) => {
+    const { activeBuiltinLayers = [], activeLayers = [], layers = [] } = props, remainingProps = __rest(props, ["activeBuiltinLayers", "activeLayers", "layers"]);
+    const allActiveLayer = union(activeBuiltinLayers, activeLayers);
+    const isActive = !isEmpty(allActiveLayer);
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapAdditionalLayerSettings', isActive: !isEmpty(allActiveLayer), activeIcon: isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-primary', className: 'MapAdditionalLayerIcon' })) : undefined, inactiveIcon: !isActive ? (_jsx(MapIcon, { name: 'rioglyph-layer-pois text-color-gray', className: 'MapAdditionalLayerIconInactive' })) : undefined, items: layers }, remainingProps)));
+};
+export default MapAdditionalLayerSettings;

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

@@ -3,16 +3,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import noop from 'lodash/fp/noop';
+import compact from 'lodash/fp/compact';
 import MapSettingsPanel from '../MapSettingsPanel';
 import MapSettingsItem from '../MapSettingsItem';
 import MapSettingsTile from '../MapSettingsTile';
 import { MapIcon, CLUSTER_ACTIVE, CLUSTER_INACTIVE, NO_CLUSTER_ACTIVE, NO_CLUSTER_INACTIVE, } from '../../../../icons/MapIcon';
+import MapSettingsDropdownHeader from '../items/MapSettingsDropdownHeader';
 const MapClusterSettings = (props) => {
-    const { showCluster = true, onShowClusterChange = noop, onToggle = noop } = props, remainingProps = __rest(props, ["showCluster", "onShowClusterChange", "onToggle"]);
+    const { showCluster = true, onShowClusterChange = noop, onToggle = noop, clusterEnabledLabel, clusterDisabledLabel, dropdownHeaderText } = props, remainingProps = __rest(props, ["showCluster", "onShowClusterChange", "onToggle", "clusterEnabledLabel", "clusterDisabledLabel", "dropdownHeaderText"]);
     const handleShowCluster = (setShowCluster) => {
         onShowClusterChange(setShowCluster);
         onToggle(setShowCluster);
     };
-    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), panel: _jsxs(MapSettingsPanel, { children: [_jsx(MapSettingsItem, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }) }), _jsx(MapSettingsItem, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: _jsx(MapIcon, { name: NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }) })] }) }, remainingProps)));
+    const hasLabels = !!clusterEnabledLabel || !!clusterDisabledLabel;
+    const dropdownHeader = dropdownHeaderText && (_jsx(MapSettingsDropdownHeader, { label: dropdownHeaderText }, 'mapClusterDropdownHeader'));
+    const enableClusterButtons = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(true), isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_ACTIVE, className: 'MapClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE, className: 'MapClusterIconInactive' }), label: clusterEnabledLabel }, 'enableClusterButtons'));
+    const disableClusterButton = (_jsx(MapSettingsItem, { onClick: () => handleShowCluster(false), isActive: !showCluster, activeIcon: _jsx(MapIcon, { name: NO_CLUSTER_ACTIVE, className: 'MapNoClusterIcon' }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE, className: 'MapNoClusterIconInactive' }), label: clusterDisabledLabel }, 'disableClusterButton'));
+    return (_jsx(MapSettingsTile, Object.assign({ className: 'MapClusterSettings', isActive: showCluster, activeIcon: _jsx(MapIcon, { name: CLUSTER_INACTIVE }), inactiveIcon: _jsx(MapIcon, { name: NO_CLUSTER_INACTIVE }), items: hasLabels ? compact([dropdownHeader, enableClusterButtons, disableClusterButton]) : undefined, panel: !hasLabels && (_jsxs(MapSettingsPanel, { children: [enableClusterButtons, disableClusterButton] })) }, remainingProps)));
 };
 export default MapClusterSettings;