@rio-cloud/rio-uikit 1.0.0 → 1.1.0

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/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/utils/mapTypes.d.ts

@@ -161,6 +161,6 @@ export type IncidentDataPoint = {
     roadClosed: boolean;
     position: Position;
 };
-export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route"];
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger"];
 export type MarkerColor = (typeof markerColorOptions)[number];
 export declare const markerColorMapping: Record<MarkerColor, string>;

package/components/map/utils/mapTypes.js

@@ -15,10 +15,18 @@ export const markerColorOptions = [
     'bg-map-marker-poi',
     'bg-map-marker-geofence',
     'bg-map-marker-route',
+    'bg-map-marker-info',
+    'bg-map-marker-success',
+    'bg-map-marker-warning',
+    'bg-map-marker-danger',
 ];
 export const markerColorMapping = {
-    'bg-map-marker-asset': 'map-marker-type-asset',
-    'bg-map-marker-poi': 'map-marker-type-poi',
-    'bg-map-marker-geofence': 'map-marker-type-geofence',
-    'bg-map-marker-route': 'map-marker-type-route',
+    'bg-map-marker-asset': '--color-map-marker-asset',
+    'bg-map-marker-poi': '--color-map-marker-poi',
+    'bg-map-marker-geofence': '--color-map-marker-geofence',
+    'bg-map-marker-route': '--color-map-marker-route',
+    'bg-map-marker-info': '--color-map-marker-info',
+    'bg-map-marker-success': '--color-map-marker-success',
+    'bg-map-marker-warning': '--color-map-marker-warning',
+    'bg-map-marker-danger': '--color-map-marker-danger',
 };

package/components/mapMarker/ClusterMapMarker.d.ts

@@ -36,6 +36,10 @@ export type ClusterMapMarkerProps = {
      * - `bg-map-marker-poi`
      * - `bg-map-marker-geofence`
      * - `bg-map-marker-route`
+     * - `bg-map-marker-info`
+     * - `bg-map-marker-success`
+     * - `bg-map-marker-warning`
+     * - `bg-map-marker-danger`
      *
      * @default 'bg-map-marker-asset'
      */

package/components/mapMarker/ClusterMapMarker.js

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import { markerColorMapping } from '../map/utils/mapTypes';
 const ClusterMapMarker = (props) => {
     const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, } = props;
-    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
-    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active', markerColorMapping[markerColor]);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })) })) })));
+    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active');
+    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
+    const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
+    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));
 };
 export default ClusterMapMarker;

package/components/mapMarker/SingleMapMarker.d.ts

@@ -4,7 +4,7 @@ export type SingleMapMarkerProps = {
     /**
      * Defines the rotation of the arrow in deg.
      *
-     * @default 0
+     * @default 60
      */
     bearing?: number;
     /**
@@ -42,11 +42,21 @@ export type SingleMapMarkerProps = {
      */
     fixed?: boolean;
     /**
-     * Defines if marker is displayed with rounded corners.
+     * Defines whether the direction icon is displayed or not.
      *
      * @default false
      */
     moving?: boolean;
+    /**
+     * Optional icon that is shown in the state indicator and used instead of the moving direction arrow.
+     */
+    stateIconName?: string;
+    /**
+     * Defines if marker is displayed with pinging animation.
+     *
+     * @default false
+     */
+    pinging?: boolean;
     /**
      * List of rioglyph icon names.
      */
@@ -59,6 +69,10 @@ export type SingleMapMarkerProps = {
      * - `bg-map-marker-poi`
      * - `bg-map-marker-geofence`
      * - `bg-map-marker-route`
+     * - `bg-map-marker-info`
+     * - `bg-map-marker-success`
+     * - `bg-map-marker-warning`
+     * - `bg-map-marker-danger`
      *
      * @default 'bg-map-marker-asset'
      */
@@ -68,7 +82,11 @@ export type SingleMapMarkerProps = {
      */
     textColor?: string;
     /**
-     * Used to control the marker's size.
+     * @deprecated please use `anchorSize`
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Used to control the marker's anchor size.
      *
      * Possible values are:
      * - `md`
@@ -76,13 +94,26 @@ export type SingleMapMarkerProps = {
      *
      * @default 'md'
      */
-    size?: 'md' | 'lg';
+    anchorSize?: 'md' | 'lg';
+    /**
+     * @deprecated please use `markerOnHover`
+     */
+    visibleOnHover?: boolean;
     /**
      * Whether the marker is only visible on hover.
      *
      * @default false
      */
-    visibleOnHover?: boolean;
+    markerOnHover?: boolean;
+    /**
+     * Optional icon that is shown on the anchor of the DOM marker.
+     * Use this when no marker content is shown.
+     */
+    anchorIconName?: string;
+    /**
+     * Shows only the anchor without the rest of the marker.
+     */
+    anchorOnly?: boolean;
 };
 declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;

package/components/mapMarker/SingleMapMarker.js

@@ -1,14 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
 import { markerColorMapping } from '../map/utils/mapTypes';
-const MapDirection = ({ moving, bearing }) => (_jsx(_Fragment, { children: moving && _jsx("div", { className: 'rio-map-direction', style: { transform: `rotate(${bearing}deg)` } }) }));
+const DEFAULT_BEARING = 60;
+const MapStateIndicator = (props) => {
+    const { moving, bearing, stateIconName } = props;
+    if (!moving && !stateIconName) {
+        return null;
+    }
+    const stateClassName = classNames('rio-map-direction', // TODO: backwards-compatible - remove in future releases
+    'rio-map-marker-state', 'rioglyph', `rioglyph-${stateIconName || 'direction'}`);
+    const style = stateIconName ? {} : { transform: `rotate(${bearing}deg)` };
+    return _jsx("div", { className: stateClassName, style: style });
+};
 const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
-    const { bearing = 0, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, iconNames, markerColor = 'bg-map-marker-asset', textColor, size = 'md', visibleOnHover = false, } = props;
-    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center');
-    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', !clickable && 'pointer-events-none', textColor, size === 'lg' && 'rio-map-single-lg', visibleOnHover && 'rio-map-single-visible-on-hover', active && 'active', markerColorMapping[markerColor]);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapDirection, { moving: moving, bearing: bearing }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })), _jsx("div", { className: 'rio-map-position-arrow' }), _jsx("div", { className: `rio-map-position ${size === 'lg' ? 'rio-map-position-lg' : ''} cursor-pointer` })] })) })));
+    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, } = props;
+    const largeAnchor = anchorSize === 'lg';
+    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
+    const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '');
+    const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging');
+    const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
+    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };
 export default SingleMapMarker;

package/components/states/CustomState.js

@@ -1,5 +1,5 @@
 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";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import classNames from 'classnames';
@@ -11,23 +11,36 @@ const justify = {
     center: 'justify-content-center',
     right: 'justify-content-end',
 };
+const renderButtons = (buttons) => {
+    if (isEmpty(buttons)) {
+        return;
+    }
+    if (buttons.length === 1) {
+        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: _jsx(StateButton, Object.assign({}, buttons[0])) })));
+    }
+    if (buttons.length === 2) {
+        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: [_jsx(StateButton, Object.assign({}, buttons[0]), '1'), _jsx(StateButton, Object.assign({}, buttons[1]), '2')] })), _jsx("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
+                    return index > 1 && _jsx(StateButton, Object.assign({}, buttonProps), index);
+                }) }))] }));
+};
 const CustomState = (props) => {
-    const { icon = 'rioglyph-rio', icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
-    const hasCustomInnerPadding = innerClassName && innerClassName.includes('padding');
-    const hasCustomOuterPadding = outerClassName && outerClassName.includes('padding');
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const hasCustomInnerPadding = innerClassName === null || innerClassName === void 0 ? void 0 : innerClassName.includes('padding');
+    const hasCustomOuterPadding = outerClassName === null || outerClassName === void 0 ? void 0 : outerClassName.includes('padding');
     const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasCustomOuterPadding && condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
     const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasCustomInnerPadding && condensed ? 'padding-15' : 'padding-25', innerClassName && innerClassName);
     const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
-    const headlineClassNames = classNames(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-sm', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct');
-    const renderButtons = (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
+    const headlineClassNames = classNames(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');
     const renderIcon = (_jsx("div", Object.assign({ className: iconClasses }, { children: _jsx(StateIcon, { name: icon }) })));
     const renderIcons = (_jsx("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => (_jsx(StateIcon, Object.assign({}, iconProps), index))) })));
     const renderChildren = _jsx("div", Object.assign({ className: 'width-500 max-width-100pct margin-top-25' }, { children: children }));
     const renderHeadline = _jsx("div", Object.assign({ className: headlineClassNames }, { children: headline }));
-    const renderMessage = _jsx("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct' }, { children: message }));
+    const renderMessage = (_jsx("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance' }, { children: message })));
     const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;
     const imageOrIcon = image ? image : singleOrMultiIcon;
-    return (_jsx("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: _jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, !isEmpty(buttons) && renderButtons, children && renderChildren] })) })) })));
+    return (_jsx("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: _jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] })) })) })));
 };
 export default CustomState;

package/components/states/StateButton.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { BUTTON_STYLE } from '../../Button';
 export type StateButtonProps = {
     /**
      * The button text.
@@ -18,10 +19,16 @@ export type StateButtonProps = {
      * This way it will render a link button instead.
      */
     href?: string;
+    /**
+     * The style of the button.
+     *
+     * @default 'primary'
+     */
+    bsStyle?: BUTTON_STYLE;
     /**
      * Additional classes assigned to the button.
      */
     className?: string;
 };
-declare const StateButton: ({ text, className, onClick, href }: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const StateButton: (props: StateButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default StateButton;

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/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/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/utils/mapTypes.d.ts

@@ -161,6 +161,6 @@ export type IncidentDataPoint = {
     roadClosed: boolean;
     position: Position;
 };
-export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route"];
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger"];
 export type MarkerColor = (typeof markerColorOptions)[number];
 export declare const markerColorMapping: Record<MarkerColor, string>;