@rio-cloud/rio-uikit 1.0.0 → 1.2.0

package/components/states/StateButton.js

@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
-const StateButton = ({ text, className, onClick = () => { }, href }) => {
-    const buttonClassNames = classNames('btn btn-primary', 'margin-top-10', className && className);
-    // In case a href is given, render a link button instead
+const StateButton = (props) => {
+    const { text, bsStyle = 'primary', className, onClick = () => { }, href } = props;
+    // In case a href is given, render a link instead
     if (href) {
-        return (_jsx("a", Object.assign({ className: buttonClassNames, href: href, onClick: onClick }, { children: text })));
+        return (_jsx("a", Object.assign({ className: classNames('margin-top-15', className), href: href, onClick: onClick }, { children: text })));
     }
+    const buttonClassNames = classNames('btn', 'margin-top-10', `btn-${bsStyle}`, className);
     return (_jsx("button", Object.assign({ className: buttonClassNames, type: 'button', onClick: onClick }, { children: text })));
 };
 export default StateButton;

package/hooks/useAfterMount.js

@@ -6,12 +6,16 @@ import { useEffect, useRef } from 'react';
  * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
  */
 const useAfterMount = (callback, deps) => {
-    const componentJustMountedRef = useRef(true);
+    const hasMountedRef = useRef(false);
     useEffect(() => {
-        if (!componentJustMountedRef.current) {
-            return callback();
+        if (hasMountedRef.current) {
+            // Run the callback only after the first render and
+            // whenever the dependencies change afterwards
+            callback();
+        }
+        else {
+            hasMountedRef.current = true;
         }
-        componentJustMountedRef.current = false;
     }, deps);
 };
 export default useAfterMount;

package/lib/es/DropdownHeader.d.ts

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

package/lib/es/DropdownHeader.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var DropdownHeader_1 = require("./components/selects/DropdownHeader");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(DropdownHeader_1).default; } });
+tslib_1.__exportStar(require("./components/selects/DropdownHeader"), exports);

package/lib/es/FeedbackInlineButtons.d.ts

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

package/lib/es/FeedbackInlineButtons.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackInlineButtons_1 = require("./components/feedback/FeedbackInlineButtons");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackInlineButtons_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackInlineButtons"), exports);

package/lib/es/FeedbackRating.d.ts

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

package/lib/es/FeedbackRating.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackRating_1 = require("./components/feedback/FeedbackRating");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackRating_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackRating"), exports);

package/lib/es/FeedbackReactions.d.ts

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

package/lib/es/FeedbackReactions.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FeedbackReactions_1 = require("./components/feedback/FeedbackReactions");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FeedbackReactions_1).default; } });
+tslib_1.__exportStar(require("./components/feedback/FeedbackReactions"), exports);

package/lib/es/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/lib/es/MapAdditionalLayerSettings.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var MapAdditionalLayerSettings_1 = require("./components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(MapAdditionalLayerSettings_1).default; } });
+tslib_1.__exportStar(require("./components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings"), exports);

package/lib/es/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/lib/es/MapSettingsDropdownHeader.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var MapSettingsDropdownHeader_1 = require("./components/map/components/features/settings/items/MapSettingsDropdownHeader");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(MapSettingsDropdownHeader_1).default; } });
+tslib_1.__exportStar(require("./components/map/components/features/settings/items/MapSettingsDropdownHeader"), exports);

package/lib/es/SmoothScrollbars.d.ts

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

package/lib/es/SmoothScrollbars.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var SmoothScrollbars_1 = require("./components/smoothScrollbars/SmoothScrollbars");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(SmoothScrollbars_1).default; } });
+tslib_1.__exportStar(require("./components/smoothScrollbars/SmoothScrollbars"), exports);

package/lib/es/components/actionBarItem/ActionBarItemListItem.js

@@ -7,9 +7,9 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const ActionBarItemListItem = (props) => {
     const { hasLink, icon, onClick, className, children } = props, remainingProps = tslib_1.__rest(props, ["hasLink", "icon", "onClick", "className", "children"]);
-    const classes = (0, classnames_1.default)('ActionBarItemListItem', className);
+    const classes = (0, classnames_1.default)('ActionBarItemListItem', hasLink && 'has-link', className);
     const iconClasses = (0, classnames_1.default)('ActionBarItemListItemIcon', 'rioglyph', icon);
     const btnClasses = (0, classnames_1.default)('ActionBarItemListItemButton');
-    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, remainingProps, { className: classes }, { children: [icon && (0, jsx_runtime_1.jsx)("span", { className: iconClasses }), hasLink && !onClick && (0, jsx_runtime_1.jsx)("span", { children: children }), onClick && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: btnClasses, onClick: onClick }, { children: children }))), !hasLink && !onClick && children] })));
+    return ((0, jsx_runtime_1.jsxs)("li", Object.assign({}, remainingProps, { className: classes, onClick: onClick }, { children: [icon && (0, jsx_runtime_1.jsx)("span", { className: iconClasses }), hasLink && !onClick && (0, jsx_runtime_1.jsx)("span", { children: children }), onClick && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: btnClasses }, { children: children })), !hasLink && !onClick && children] })));
 };
 exports.default = ActionBarItemListItem;

package/lib/es/components/assetTree/AssetTree.js

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

package/lib/es/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/lib/es/components/assetTree/Tree.js

@@ -43,7 +43,7 @@ const filterProps = (0, omit_1.default)([
 ]);
 const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
 const Tree = react_1.default.memo((props) => {
-    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], disableAnimation = false } = props, remainingProps = tslib_1.__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_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = props, remainingProps = tslib_1.__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] = (0, react_1.useReducer)(treeReducer_1.treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -280,6 +280,6 @@ const Tree = react_1.default.memo((props) => {
     const hasCustomSearch = !(0, isNil_1.default)(search);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && ((0, jsx_runtime_1.jsx)(TreeSearch_1.default, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: (0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
                                     ? summary || ((0, jsx_runtime_1.jsx)(TreeSummary_1.default, { children: (0, map_1.default)((typeCounter) => ((0, jsx_runtime_1.jsx)(TypeCounter_1.default, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
-                                    : null })), (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions })] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
+                                    : null })), (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { children: content }))] })));
 }, customCompare);
 exports.default = Tree;

package/lib/es/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/lib/es/components/assetTree/TreeOptions.js

@@ -7,13 +7,27 @@ require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const lodash_1 = require("lodash");
 const ButtonDropdown_1 = tslib_1.__importDefault(require("../dropdown/ButtonDropdown"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
 const TreeOptions = (props) => {
-    const { treeOptions = [], className } = props;
+    const { treeOptions = [], treeOptionsTooltip, className } = props;
     if ((0, lodash_1.isEmpty)(treeOptions)) {
         return null;
     }
     const dropdownClasses = (0, classnames_1.default)('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
     const customDropdown = (0, jsx_runtime_1.jsx)("div", Object.assign({ className: dropdownClasses }, { children: treeOptions }));
-    return ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.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 = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: treeOptionsTooltip, placement: 'bottom', delay: { show: 1000, hide: 0 }, popperConfig: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [-20, 10],
+                        },
+                    },
+                ],
+            } }, { children: dropdown })));
+    }
+    return dropdown;
 };
 exports.default = TreeOptions;

package/lib/es/components/assetTree/TreeSidebarCategories.js

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

package/lib/es/components/calendarStripe/CalendarStripe.js

@@ -57,7 +57,7 @@ const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
     (0, useAfterMount_1.default)(() => {
         setEnableInitialAnimation(true);
     }, []);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!columnWrapperRef.current) {
             return;
         }

package/lib/es/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/lib/es/components/feedback/FeedbackInlineButtons.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");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const FeedbackInlineButtons = (props) => {
+    const { buttons = [], headline } = props, remainingProps = tslib_1.__rest(props, ["buttons", "headline"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none' }, { children: [headline && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-dark' }, { children: headline })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn-toolbar gap-5' }, { children: buttons.map(button => button) }))] })));
+};
+exports.default = FeedbackInlineButtons;

package/lib/es/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/lib/es/components/feedback/FeedbackRating.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ToggleButton_1 = tslib_1.__importDefault(require("../button/ToggleButton"));
+const FeedbackRating = (props) => {
+    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { } } = props, remainingProps = tslib_1.__rest(props, ["headline", "count", "circleButtons", "buttonLabels", "buttonStyles", "buttonClassName", "leftLabel", "rightLabel", "leadingIcon", "trailingIcon", "onRatingChanged"]);
+    const [rating, setRating] = (0, react_2.useState)();
+    const handleRating = (value) => {
+        setRating(value);
+        onRatingChanged(value);
+    };
+    const hasSubLabels = !!leftLabel || !!rightLabel;
+    const buttonWrapperClasses = (0, classnames_1.default)('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
+    const leadingTrailingIconClasses = (0, classnames_1.default)('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: 'FeedbackRating' }, { children: [headline && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium text-size-16 margin-bottom-10' }, { children: headline })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: buttonWrapperClasses }, { children: [leadingIcon && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: leadingTrailingIconClasses }, { children: leadingIcon })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.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 ((0, react_1.createElement)(ToggleButton_1.default, 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 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between margin-top-5 gap-25' }, { children: [leftLabel ? (0, jsx_runtime_1.jsx)("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: leftLabel })) : (0, jsx_runtime_1.jsx)("div", {}), rightLabel ? (0, jsx_runtime_1.jsx)("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: rightLabel })) : (0, jsx_runtime_1.jsx)("div", {})] })))] }), trailingIcon && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: leadingTrailingIconClasses }, { children: trailingIcon }))] }))] })));
+};
+exports.default = FeedbackRating;

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

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

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;