@rio-cloud/rio-uikit 1.0.0 → 1.2.0

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/actionBarItem/ActionBarItemListItem.js

@@ -5,9 +5,9 @@ import 'react';
 import classNames from 'classnames';
 const ActionBarItemListItem = (props) => {
     const { hasLink, icon, onClick, className, children } = props, remainingProps = __rest(props, ["hasLink", "icon", "onClick", "className", "children"]);
-    const classes = classNames('ActionBarItemListItem', className);
+    const classes = classNames('ActionBarItemListItem', hasLink && 'has-link', className);
     const iconClasses = classNames('ActionBarItemListItemIcon', 'rioglyph', icon);
     const btnClasses = classNames('ActionBarItemListItemButton');
-    return (_jsxs("li", Object.assign({}, remainingProps, { className: classes }, { children: [icon && _jsx("span", { className: iconClasses }), hasLink && !onClick && _jsx("span", { children: children }), onClick && (_jsx("div", Object.assign({ className: btnClasses, onClick: onClick }, { children: children }))), !hasLink && !onClick && children] })));
+    return (_jsxs("li", Object.assign({}, remainingProps, { className: classes, onClick: onClick }, { children: [icon && _jsx("span", { className: iconClasses }), hasLink && !onClick && _jsx("span", { children: children }), onClick && _jsx("div", Object.assign({ className: btnClasses }, { children: children })), !hasLink && !onClick && children] })));
 };
 export default ActionBarItemListItem;

package/components/assetTree/AssetTree.js

@@ -47,9 +47,10 @@ const AssetTree = memo(forwardRef((props, ref) => {
     if (previousWidth !== width) {
         setTreeWidth(width);
     }
-    const previousMode = usePrevious(fly);
+    const [previousMode, setPreviousMode] = useState(fly);
     if (previousMode !== fly) {
         setSidebarMode(getSidebarMode(fly));
+        setPreviousMode(fly);
     }
     const childrenArray = React.Children.toArray(children);
     // check for children type of TreeCategory and throw error in case

package/components/assetTree/Tree.d.ts

@@ -181,6 +181,10 @@ export type TreeProps = {
      * Component to offer customization options for the tree.
      */
     treeOptions?: React.ReactNode[];
+    /**
+     * Tooltip content for the tree options dropdown.
+     */
+    treeOptionsTooltip?: React.ReactNode;
     /**
      * Disables animation when filtering or using search
      *

package/components/assetTree/Tree.js

@@ -38,7 +38,7 @@ const filterProps = omit([
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(filterProps(prevProps), filterProps(nextProps));
 const Tree = React.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "disableAnimation"]);
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "treeOptionsTooltip", "disableAnimation"]);
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -275,6 +275,6 @@ const Tree = React.memo((props) => {
     const hasCustomSearch = !isNil(search);
     return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
                                     ? summary || (_jsx(TreeSummary, { children: map((typeCounter) => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
-                                    : null })), _jsx(TreeOptions, { treeOptions: treeOptions })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
+                                    : null })), _jsx(TreeOptions, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
 }, customCompare);
 export default Tree;

package/components/assetTree/TreeOptions.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type TreeOptionsProps = {
     treeOptions?: React.ReactNode[];
+    treeOptionsTooltip?: React.ReactNode;
     className?: string;
 };
 declare const TreeOptions: (props: TreeOptionsProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/assetTree/TreeOptions.js

@@ -4,13 +4,27 @@ import 'react';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import ButtonDropdown from '../dropdown/ButtonDropdown';
+import SimpleTooltip from '../tooltip/SimpleTooltip';
 const TreeOptions = (props) => {
-    const { treeOptions = [], className } = props;
+    const { treeOptions = [], treeOptionsTooltip, className } = props;
     if (isEmpty(treeOptions)) {
         return null;
     }
     const dropdownClasses = classNames('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = _jsx("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
-    return (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
+    const dropdown = (_jsx(ButtonDropdown, { title: _jsx("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions', pullRight: true, iconOnly: true }));
+    if (treeOptionsTooltip) {
+        return (_jsx(SimpleTooltip, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-20, 10],
+                        },
+                    },
+                ],
+            } }, { children: dropdown })));
+    }
+    return dropdown;
 };
 export default TreeOptions;

package/components/assetTree/TreeSidebarCategories.js

@@ -25,7 +25,7 @@ const TreeSidebarCategories = (props) => {
             const category = (_jsx("li", Object.assign({ onClick: handleSelectCategory, className: statusClassName }, { children: _jsx("div", Object.assign({ className: 'selection-bubble' }, { children: _jsx("span", { className: `rioglyph ${icon}` }) })) }), id));
             if (label) {
                 const tooltip = _jsx("span", { children: label });
-                return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.RIGHT, delay: TOOLTIP_DELAY, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: category }), `category-tooltip-${id}`));
+                return (_jsx(OverlayTrigger, Object.assign({ placement: Tooltip.RIGHT, delay: { show: TOOLTIP_DELAY, hide: 0 }, overlay: _jsx(Tooltip, Object.assign({ id: 'tooltip', width: 'auto' }, { children: tooltip })) }, { children: category }), `category-tooltip-${id}`));
             }
             return category;
         }) }));

package/components/calendarStripe/CalendarStripe.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import noop from 'lodash/noop';
@@ -54,7 +54,7 @@ const CalendarStripe = forwardRef((props, ref) => {
     useAfterMount(() => {
         setEnableInitialAnimation(true);
     }, []);
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (!columnWrapperRef.current) {
             return;
         }

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/basics/Marker.js

@@ -24,7 +24,7 @@ const setupMarker = (props, api) => {
     const { position, customData, icon, draggable, eventListenerMap } = props;
     const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
     const marker = new MarkerConstructor(position, {
-        icon: getOrCreateIcon(icon),
+        icon: icon && getOrCreateIcon(icon),
     });
     marker.setData(customData);
     marker.draggable = !!draggable;

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: 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;