@rio-cloud/rio-uikit 1.4.0 → 1.5.0

package/components/dropdown/ButtonDropdown.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+// biome-ignore lint/style/useImportType: <explanation>
+import { useState, useEffect, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import classNames from 'classnames';
@@ -25,8 +26,8 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = (props) => {
-    const { id = Math.random().toString(36).substr(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
+const ButtonDropdown = forwardRef((props, ref) => {
+    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '' } = props, remainingProps = __rest(props, ["id", "items", "bsSize", "bsStyle", "variant", "disabled", "iconOnly", "title", "splitButton", "customDropdown", "open", "dropup", "pullRight", "noCaret", "onOpen", "onClose", "onLabelButtonClick", "usePortal", "popperConfig", "toggleClassName", "dropdownClassName", "className"]);
     const [internalOpen, setInternalOpen] = useState(open);
     const [refDropdownToggle, setRefDropdownToggle] = useState(null);
     const [refDropdownMenu, setRefDropdownMenu] = useState(null);
@@ -89,6 +90,6 @@ const ButtonDropdown = (props) => {
     const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
     const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
     const dropdownMenu = (_jsx(MenuItemList, Object.assign({ className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper }, attributes.popper, { children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
-};
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: wrapperRef }, { children: [_jsx(DropdownToggleButton, Object.assign({ id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName }, { children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) })), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] })));
+});
 export default ButtonDropdown;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -9,6 +9,7 @@ export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
+    outerRef?: React.Ref<HTMLButtonElement>;
     className?: string;
 };
 declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/dropdown/DropdownToggleButton.js

@@ -3,9 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Button from '../button/Button';
+import useMergeRefs from '../../hooks/useMergeRefs';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const toggleRef = useMergeRefs(outerRef, ref);
     const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
 });
 export default DropdownToggleButton;

package/components/fade/FadeExpander.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+type FadeExpanderProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Allows customization of animation duration.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Delay in seconds before starting the animation.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const FadeExpander: (props: PropsWithChildren<FadeExpanderProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeExpander;

package/components/fade/FadeExpander.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+const THRESHOLD_TIMEOUT_MS = 200;
+const FadeExpander = (props) => {
+    const { children, show = false, duration = 0.2, delay = 0, className = '' } = props;
+    const [isVisible, setIsVisible] = useState(show);
+    const [overflow, setOverflow] = useState('hidden'); // Start with hidden overflow
+    const durationRef = useRef(duration);
+    // Effect to manage visibility based on show prop
+    useEffect(() => {
+        if (show) {
+            // Set to visible when show is true
+            setIsVisible(true);
+        }
+        else {
+            // Set overflow to hidden immediately when show is false
+            setOverflow('hidden');
+            // Delay setting isVisible to false so the overflow can change before
+            setTimeout(() => {
+                setIsVisible(false);
+            }, 0);
+        }
+    }, [show]);
+    const handleAnimationComplete = () => {
+        if (show) {
+            // Set overflow to visible after animation is done
+            setTimeout(() => setOverflow('visible'), durationRef.current * 1000 + THRESHOLD_TIMEOUT_MS);
+        }
+    };
+    return (
+    // @ts-ignore
+    _jsx(AnimatePresence, Object.assign({ onExitComplete: () => setOverflow('hidden') }, { children: isVisible && (_jsx(motion.div, Object.assign({ initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+                height: { duration, delay },
+                opacity: { duration, delay },
+                ease: 'easeIn',
+            }, 
+            // To ensures smooth height transition, the overflow should be "hidden" during the animation
+            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className }, { children: children }))) })));
+};
+export default FadeExpander;

package/components/fade/FadeUp.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+type FadeUpProps = Omit<ComponentProps<'div'>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    /**
+     * Defines the time the animation should wait until it starts.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Defines the duration in seconds of the fade up animation.
+     *
+     * @default 0.4
+     */
+    duration?: number;
+    /**
+     * Defines the y offset from the bottom where the element starts to fade in.
+     *
+     * @default 15
+     */
+    offset?: number;
+    /**
+     * Additional classes names added to the motion div wrapper.
+     */
+    className?: string;
+};
+declare const FadeUp: (props: PropsWithChildren<FadeUpProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeUp;

package/components/fade/FadeUp.js

@@ -0,0 +1,28 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import useOnScreen from '../../hooks/useOnScreen';
+const FadeUp = (props) => {
+    const { delay = 0, duration = 0.4, className = '', offset = 15, children } = props, remainingProps = __rest(props, ["delay", "duration", "className", "offset", "children"]);
+    const ref = useRef(null);
+    const isInView = useOnScreen(ref);
+    const [isVisible, setIsVisible] = useState(false);
+    const variants = {
+        hidden: {
+            opacity: 0,
+            y: offset,
+        },
+        visible: {
+            opacity: 1,
+            y: 0,
+        },
+    };
+    useEffect(() => {
+        if (isInView && !isVisible) {
+            setIsVisible(true);
+        }
+    }, [isInView, isVisible]);
+    return (_jsx(motion.div, Object.assign({ ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration } }, remainingProps, { className: className }, { children: children })));
+};
+export default FadeUp;

package/components/listMenu/ListMenu.d.ts

@@ -27,6 +27,13 @@ export type ListMenuProps<T extends ListMenuNavItem> = {
      * The placeholder text for the filter input.
      */
     filterPlaceholder?: string;
+    /**
+     * Gets called when the filter input changes.
+     *
+     * @param value
+     * @returns
+     */
+    onFilterChange?: (value: string) => void;
     /**
      * A localized message to be shown when the filter result is empty.
      */

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', trailingInputAddon } = props, remainingProps = __rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon } = props, remainingProps = __rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "onFilterChange", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
     const [filterValue, setFilterValue] = useState('');
     const [isMobileMode, setIsMobileMode] = useState(false);
     const [isExpanderOpen, setIsExpanderOpen] = useState(false);
@@ -57,7 +57,10 @@ const ListMenu = (props) => {
     });
     useLayoutEffect(() => buildMobileHeader, [menuItems]);
     const handleClear = () => focusFilter && focusInput();
-    const handleFilterChange = (value) => setFilterValue(value);
+    const handleFilterChange = (value) => {
+        setFilterValue(value);
+        onFilterChange(value);
+    };
     const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
     const handleExpanderBodyClick = (event) => {
         var _a;
@@ -66,7 +69,7 @@ const ListMenu = (props) => {
             setIsExpanderOpen(false);
         }
     };
-    const formClassNames = classNames('form-group', 'margin-top-5', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
+    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 }), 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/Route.d.ts

@@ -1,10 +1,20 @@
 /// <reference types="react" />
+import { type ArrowStyle } from './basics/Polyline';
 import type { Position } from '../../utils/mapTypes';
 import type { EventListenerMap } from '../../utils/eventHandling';
 export declare const MISSING_POSITIONS_EXCEPTION_MSG = "Route requires a minimum of 1 positions";
 export declare const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = "If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth";
+export declare const DEFAULT_LINE_STROKE_COLOR = "rgba(48, 194, 255, 1)";
+export declare const DEFAULT_LINE_STROKE_COLOR_REDUCED = "rgba(48, 194, 255, 0.5)";
+export declare const DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = "rgb(200, 243, 247)";
+export declare const DEFAULT_BORDER_STROKE_COLOR = "rgba(22, 100, 141, 1)";
+export declare const DEFAULT_BORDER_STROKE_COLOR_REDUCED = "rgba(255, 255, 255, 0)";
+export declare const ROUTE_COLOR_DANGER = "#e22837";
+export declare const ROUTE_COLOR_WARNING = "#ff8e3c";
+export declare const ROUTE_COLOR_SUCCESS = "#5cb85c";
+export declare const ROUTE_COLOR_WHITE = "rgba(255, 255, 255, 1)";
 export type RouteStyle = {
-    width: number;
+    width?: number;
     color?: string;
     borderWidth?: number;
     borderColor?: string;
@@ -12,7 +22,7 @@ export type RouteStyle = {
     lineDash?: number[];
 };
 export type RouteProps = {
-    arrowStyle?: object;
+    arrowStyle?: ArrowStyle;
     hasArrows?: boolean;
     positions: Position[];
     style?: RouteStyle;
@@ -23,6 +33,7 @@ export type RouteProps = {
     middleIcon?: JSX.Element;
     endIcon?: JSX.Element;
     markers?: JSX.Element[];
+    customData?: object;
 };
 declare const Route: (props: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Route;

package/components/map/components/features/Route.js

@@ -7,21 +7,29 @@ import Marker from './basics/Marker';
 import MapException from '../../exceptions/MapException';
 export const MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 positions';
 export const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
-const LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
-const LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
-const BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+export const DEFAULT_LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
+export const DEFAULT_LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
+export const DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = 'rgb(200, 243, 247)';
+export const DEFAULT_BORDER_STROKE_COLOR = 'rgba(22, 100, 141, 1)';
+export const DEFAULT_BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+// Both works, rgb or hex - keep in mind that these state colors may change
+// so use this constants instead of actual color values in the service
+export const ROUTE_COLOR_DANGER = '#e22837';
+export const ROUTE_COLOR_WARNING = '#ff8e3c';
+export const ROUTE_COLOR_SUCCESS = '#5cb85c';
+export const ROUTE_COLOR_WHITE = 'rgba(255, 255, 255, 1)';
 const DEFAULT_WIDTH = 5;
 const DEFAULT_BORDER_WIDTH = 2;
 const defaultStyle = {
     width: DEFAULT_WIDTH,
-    color: LINE_STROKE_COLOR,
+    color: DEFAULT_LINE_STROKE_COLOR,
     borderWidth: DEFAULT_BORDER_WIDTH,
-    borderColor: 'rgba(54, 144, 174, 1)',
+    borderColor: DEFAULT_BORDER_STROKE_COLOR,
     isBorderIncludedInWidth: false,
 };
-const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: 'rgb(218,253,255)' });
+const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE });
 const Route = (props) => {
-    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], eventListenerMap, } = props;
+    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], customData, eventListenerMap, } = props;
     const [lineString, setLineString] = useState();
     const [routeStyle, setRouteStyle] = useState();
     const [borderStyle, setBorderStyle] = useState();
@@ -51,17 +59,17 @@ const Route = (props) => {
     };
     const updateStyle = (updatedStyle, isReducedStyle, isRouteAlternativeStyle) => {
         const mergedStyle = Object.assign(Object.assign({}, (isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle)), updatedStyle);
-        const { color, width, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
+        const { color, width = DEFAULT_WIDTH, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
         setBorderWidth(isReducedStyle ? 0 : mergedBorderWidth);
         if (isBorderIncludedInWidth && mergedBorderWidth >= width) {
             throw new MapException(TO_LESS_LINE_WIDTH_EXCEPTION_MSG);
         }
-        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
-        setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? DEFAULT_LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
     };
     if (!lineString) {
         return null;
     }
-    return (_jsxs("div", { children: [borderWidth > 0 && (_jsx(Polyline, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle })), _jsx(Polyline, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle }), startIcon && _jsx(Marker, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && (_jsx(Marker, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && _jsx(Marker, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), isArray(markers) && markers.map(marker => marker)] }));
+    return (_jsxs("div", { children: [borderWidth > 0 && (_jsx(Polyline, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle, customData: customData })), _jsx(Polyline, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle, customData: customData }), startIcon && _jsx(Marker, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && (_jsx(Marker, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && _jsx(Marker, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), isArray(markers) && markers.map(marker => marker)] }));
 };
 export default Route;

package/components/map/components/features/basics/Polygon.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="heremaps" />
 import type { Position } from '../../../utils/mapTypes';
 import type { EventListenerMap } from '../../../utils/eventHandling';
+export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
 export type PolygonPoints = Position[] & Record<string, any>;
 export type PolygonProps = {
     points: PolygonPoints;

package/components/map/components/features/basics/Polygon.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import isNil from 'lodash/fp/isNil';
 import { useMapContext } from '../../MapContext';
 import { useUpdateProp, useUpdateEventListenerMap } from '../../../utils/hooks';
+export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
 const createGeometry = (points) => {
     const lineString = new H.geo.LineString();
     points.forEach(p => {

package/components/map/components/features/basics/Polyline.d.ts

@@ -2,11 +2,13 @@
 import { type EventListenerMap } from '../../../utils/eventHandling';
 export declare const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: Polyline without geometry makes no sense";
 export declare const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: property geometry must be of type H.geo.LineString";
+export type ArrowStyle = H.map.Polyline.Options;
 export type PolylineProps = {
     hasArrows?: boolean;
-    arrowStyle?: object;
+    arrowStyle?: ArrowStyle;
     geometry: H.geo.LineString;
     style?: H.map.SpatialStyle;
+    customData?: object;
     eventListenerMap?: EventListenerMap;
 };
 declare const Polyline: (props: PolylineProps) => null;

package/components/map/components/features/basics/Polyline.js

@@ -7,7 +7,7 @@ import { isVectorBased } from '../../../utils/rendering';
 export const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 export const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
 const Polyline = (props) => {
-    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, customData, eventListenerMap, } = props;
     const { api, enableWebGL, baseLayer } = useMapContext();
     const [polyline, setPolyline] = useState();
     if (!geometry) {
@@ -18,32 +18,21 @@ const Polyline = (props) => {
     }
     useEffect(() => {
         var _a;
-        const lineGroup = new H.map.Group();
+        const lineGroup = new H.map.Group({ data: customData });
         const line = new H.map.Polyline(geometry, { style });
         if (hasArrows) {
             let routeArrows;
             if (isVectorBased(enableWebGL, baseLayer)) {
                 // WebGL way - Create a patterned polyline
                 routeArrows = new H.map.Polyline(geometry, {
-                    style: {
-                        strokeColor: 'rgba(42, 55, 64, 1)',
-                        lineWidth: 5,
-                        lineDash: [1.8, 4],
+                    style: Object.assign({ strokeColor: 'rgba(42, 55, 64, 1)', lineWidth: 5, lineDash: [1.8, 4], 
                         // @ts-ignore-next-line - the types are outdated here
-                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
-                    },
+                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW }, arrowStyle),
                 });
             }
             else {
                 // Pixel map way - Create a patterned polyline
-                const defaultArrowStyle = {
-                    lineWidth: 2,
-                    fillColor: 'rgba(42, 55, 64, 1)',
-                    strokeColor: 'rgba(0, 0, 0, 0.8)',
-                    lineDash: [0, 4],
-                    lineTailCap: 'arrow-tail',
-                    lineHeadCap: 'arrow-head',
-                };
+                const defaultArrowStyle = Object.assign({ lineWidth: 2, fillColor: 'rgba(42, 55, 64, 1)', strokeColor: 'rgba(0, 0, 0, 0.8)', lineDash: [0, 4], lineTailCap: 'arrow-tail', lineHeadCap: 'arrow-head' }, arrowStyle);
                 const arrowLineStyle = new H.map.SpatialStyle({
                     lineWidth: 10,
                     strokeColor: 'rgba(255, 255, 255, 0)',