@rio-cloud/rio-uikit 1.8.0 → 1.9.1

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeScrollPosition = void 0;
+const react_1 = require("react");
+const useTreeScrollPosition = (virtualizer, scrollElementRef) => {
+    const scrollOffsetRef = (0, react_1.useRef)(0);
+    const scrollToTop = (0, react_1.useCallback)(() => {
+        if (scrollElementRef.current) {
+            requestAnimationFrame(() => {
+                // Reset scroll position to top
+                scrollElementRef.current.scrollTop(0);
+                // Also reset the stored scroll offset
+                scrollOffsetRef.current = 0;
+                // Force virtualizer to sync
+                if (virtualizer) {
+                    virtualizer.scrollToOffset(0);
+                }
+            });
+        }
+    }, [scrollElementRef, virtualizer]);
+    return { scrollToTop };
+};
+exports.useTreeScrollPosition = useTreeScrollPosition;

package/lib/es/components/assetTree/useTreeVirtualization.d.ts

@@ -0,0 +1,17 @@
+import type { TreeItem, GroupedItem } from './Tree';
+type VirtualizedItem = {
+    type: 'group';
+    data: GroupedItem;
+    id: string;
+    isExpanded: boolean;
+} | {
+    type: 'leaf';
+    data: TreeItem;
+    id: string;
+    groupId: string;
+};
+export declare const useTreeVirtualization: (groupedItems: GroupedItem[], flatItems: TreeItem[], hasSearchValue: boolean, hasGroups: boolean, internalExpandedGroups: string[] | undefined, scrollElementRef: React.RefObject<HTMLDivElement>, overscan: number) => {
+    virtualizedItems: VirtualizedItem[];
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<any, Element>;
+};
+export {};

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeVirtualization = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups, scrollElementRef, overscan) => {
+    const virtualizedItems = (0, react_1.useMemo)(() => {
+        // When there's a search value, always show flat items (no groups)
+        if (hasSearchValue) {
+            return flatItems.map((item) => ({
+                type: 'leaf',
+                data: item,
+                id: item.id,
+            }));
+        }
+        // Virtualize grouped list, when there's no search value and we have groups
+        if (hasGroups) {
+            const flatList = [];
+            (0, map_1.default)((group) => {
+                const isExpanded = internalExpandedGroups?.includes(group.id) ?? false;
+                // Add the group header
+                flatList.push({
+                    type: 'group',
+                    data: group,
+                    id: group.id,
+                    isExpanded,
+                });
+                // Add expanded items
+                if (isExpanded) {
+                    group.items.forEach((item) => {
+                        flatList.push({
+                            type: 'leaf',
+                            data: item,
+                            id: item.id,
+                            groupId: group.id,
+                        });
+                    });
+                }
+            })(groupedItems);
+            return flatList;
+        }
+        // Virtualize flat list when no groups are provided initially
+        return flatItems.map((item) => ({
+            type: 'leaf',
+            data: item,
+            id: item.id,
+        }));
+    }, [groupedItems, flatItems, hasSearchValue, hasGroups, internalExpandedGroups]);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: virtualizedItems.length,
+        // getScrollElement: () => scrollElementRef.current,
+        getScrollElement: () => {
+            // For SmoothScrollbars, we need to get the actual scroll container
+            if (scrollElementRef.current) {
+                // SmoothScrollbars exposes the scroll container through its view
+                const scrollbarsInstance = scrollElementRef.current;
+                // Access the internal scroll container
+                // This depends on how react-custom-scrollbars-2 exposes its internals
+                return scrollbarsInstance?.view;
+            }
+            return null;
+        },
+        estimateSize: () => 41, // typical single line height without line-break
+        measureElement: element => {
+            // This will measure the actual rendered height for more accuracy
+            return element?.children[0].clientHeight ?? 41;
+        },
+        overscan, // Render 10 extra items above and below visible area
+        // Add this to enable more aggressive remeasurement
+        lanes: 1,
+    });
+    return { virtualizedItems, virtualizer };
+};
+exports.useTreeVirtualization = useTreeVirtualization;

package/lib/es/components/barList/BarList.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { type SortDirectionType } from '../../utils/SortUtils';
+export type BarListRow<T> = T & {
+    key?: string;
+    href?: string;
+    value: number;
+    name: string;
+    color?: string;
+    barColor?: string;
+    background?: string;
+};
+/**
+ * Props for the BarList component.
+ *
+ * @template T - The type of the custom data associated with each bar row.
+ */
+type BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Array of bar row data to be rendered.
+     */
+    data: BarListRow<T>[];
+    /**
+     * Optional function to format the numeric value displayed on the right side of each bar.
+     * Can return a string or a React element.
+     *
+     * @example
+     * valueFormatter={(value) => `${value}%`}
+     */
+    valueFormatter?: (value: number) => string | React.ReactElement;
+    /**
+     * A reference value used to calculate relative widths.
+     * If not provided, the maximum value in `data` will be used.
+     *
+     * @default max(data.value)
+     */
+    referenceValue?: number;
+    /**
+     * Whether to animate the bar width transitions using Framer Motion.
+     *
+     * @default false
+     */
+    showAnimation?: boolean;
+    /**
+     * Callback fired when a bar is clicked.
+     *
+     * @param payload - The full data object of the clicked bar.
+     */
+    onSelectRow?: (payload: BarListRow<T>) => void;
+    /**
+     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.
+     *
+     * @default 'none'
+     */
+    sortOrder?: SortDirectionType | 'none';
+    /**
+     * Height of each bar row in pixels.
+     *
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * Opacity applied to non-hovered bars (between 0 and 1).
+     *
+     * @default 0.5
+     */
+    opacity?: number;
+    /**
+     * CSS color string used for the active/progress portion of each bar.
+     *
+     * @default 'bg-highlight-light'
+     */
+    barColor?: string;
+    /**
+     * CSS color string used for the text labels.
+     *
+     * @default 'text-color-darker'
+     */
+    labelColor?: string;
+    /**
+     * CSS color string used for the bar background.
+     *
+     * @default 'bg-transparent'
+     */
+    background?: string;
+    /**
+     * Additional className added to the wrapper element.
+     */
+    className?: string;
+};
+declare const BarListInner: {
+    <T>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BarList: <T>(props: BarListProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof BarListInner>;
+export default BarList;

package/lib/es/components/barList/BarList.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const SortUtils_1 = require("../../utils/SortUtils");
+const useSortedBars_1 = require("./useSortedBars");
+// Animation variants
+const containerVariants = {
+    animate: {
+        transition: {
+            staggerChildren: 0.1,
+        },
+    },
+};
+const barVariants = {
+    initial: { width: 0 },
+    animate: (width) => ({
+        width: `${width}%`,
+        transition: { duration: 0.8, ease: 'easeOut' },
+    }),
+};
+const DEFAULT_ROW_HEIGHT = 25;
+const DEFAULT_OPACITY = 0.5;
+const BarListInner = (props, forwardedRef) => {
+    const { data = [], valueFormatter = value => value.toString(), showAnimation = false, onSelectRow, referenceValue, sortOrder = SortUtils_1.SortDirection.DESCENDING, barColor = 'bg-highlight-light', labelColor = 'text-color-darker', background = 'bg-transparent', rowHeight = DEFAULT_ROW_HEIGHT, opacity = DEFAULT_OPACITY, className = '', ...remainingProps } = props;
+    const sortedData = (0, useSortedBars_1.useSortedBars)(data, sortOrder, item => item.value);
+    const [hoveredIndex, setHoveredIndex] = react_1.default.useState(null);
+    const widths = (0, react_1.useMemo)(() => {
+        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);
+        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));
+    }, [sortedData, referenceValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, ref: forwardedRef, className: (0, classnames_1.default)('display-flex justify-content-between gap-15', className), children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { variants: showAnimation ? containerVariants : undefined, initial: 'initial', animate: 'animate', className: 'width-100pct space-y-5', children: sortedData.map((item, index) => {
+                    const width = widths[index];
+                    const itemLabelColor = item.color ?? labelColor;
+                    const itemBarColor = item.barColor ?? barColor;
+                    const itemBackground = item.background ?? background;
+                    return ((0, jsx_runtime_1.jsxs)("div", { onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => onSelectRow?.(item), className: (0, classnames_1.default)('position-relative width-100pct rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBackground, onSelectRow && 'cursor-pointer', hoveredIndex === index && 'bg-lightest'), children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { custom: width, variants: showAnimation ? barVariants : undefined, className: (0, classnames_1.default)('display-flex align-items-center rounded-small', 'transition-all transition-ease-in-out transition-duration-01', itemBarColor), style: { height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }, role: 'presentation' }), (0, jsx_runtime_1.jsx)("div", { className: 'position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10', children: item.href ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, className: itemLabelColor, target: '_blank', rel: 'noreferrer', onClick: event => event.stopPropagation(), children: item.name })) : ((0, jsx_runtime_1.jsx)("div", { className: itemLabelColor, children: item.name })) })] }, item.key ?? item.name));
+                }) }), (0, jsx_runtime_1.jsx)("div", { className: 'space-y-5', children: sortedData.map(item => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('display-flex align-items-center justify-content-end'), style: { height: `${rowHeight}px` }, children: (0, jsx_runtime_1.jsx)("div", { className: 'text-color-darkest', children: valueFormatter(item.value) }) }, item.key ?? item.name))) })] }));
+};
+BarListInner.displayName = 'BarList';
+const BarList = react_1.default.forwardRef(BarListInner);
+exports.default = BarList;

package/lib/es/components/barList/useSortedBars.d.ts

@@ -0,0 +1,2 @@
+import { type SortDirectionType } from '../../utils/SortUtils';
+export declare function useSortedBars<T>(data: T[], sortOrder: SortDirectionType | 'none', getValue: (item: T) => number): T[];

package/lib/es/components/barList/useSortedBars.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSortedBars = useSortedBars;
+const react_1 = require("react");
+const SortUtils_1 = require("../../utils/SortUtils");
+function useSortedBars(data, sortOrder, getValue) {
+    return (0, react_1.useMemo)(() => {
+        if (sortOrder === 'none') {
+            return data;
+        }
+        return [...data].sort((a, b) => {
+            const aVal = getValue(a);
+            const bVal = getValue(b);
+            return sortOrder === SortUtils_1.SortDirection.ASCENDING ? aVal - bVal : bVal - aVal;
+        });
+    }, [data, sortOrder, getValue]);
+}

package/lib/es/components/charts/PieChart.js

@@ -17,7 +17,7 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
 };
 const PieChart = (props) => {
     const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = (0, jsx_runtime_1.jsx)(recharts_1.Legend, {}), tooltip = true, pieOptions, containerOptions, ...remainingProps } = props;
-    // biome-ignore lint/suspicious/noExplicitAny:
+    // biome-ignore lint/suspicious/noExplicitAny: unknown type
     const renderLabels = (entry) => `${(0, isFunction_1.default)(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = (0, isObject_1.default)(tooltip) ? tooltip.props : {};

package/lib/es/components/clearableInput/ClearableInput.js

@@ -140,7 +140,7 @@ const ClearableInput = (0, react_1.forwardRef)((props, ref) => {
         maxLength: hasMask ? undefined : maxLength,
         tabIndex,
     };
-    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { ...inputProps, ref: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : ((0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef || ref }));
+    const input = hasMask ? ((0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : ((0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef || ref }));
     return ((0, jsx_runtime_1.jsxs)("div", { className: classes, children: [children && (0, isFunction_1.default)(children) ? children(inputProps) : input, (0, jsx_runtime_1.jsx)("span", { className: clearButtonClassNames, onClick: clearInputValue, children: (0, jsx_runtime_1.jsx)("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 exports.default = ClearableInput;

package/lib/es/components/formLabel/FormLabel.d.ts

@@ -1,9 +1,9 @@
-import { type PropsWithChildren, type ComponentProps } from 'react';
+import React, { type PropsWithChildren, type ComponentProps } from 'react';
 export type FormLabelProps = ComponentProps<'label'> & {
     /**
      * Additional supporting text displayed next to the label.
      */
-    supportingText?: string;
+    supportingText?: string | React.ReactElement;
     /**
      * Additional classes set to the outer element.
      */

package/lib/es/components/listMenu/ListMenu.js

@@ -77,7 +77,9 @@ 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', 'z-index-1');
-    const listMenu = ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", { className: formClassNames, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [(0, jsx_runtime_1.jsx)("span", { 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", { 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", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && ((0, jsx_runtime_1.jsx)("div", { className: formClassNames, children: (0, jsx_runtime_1.jsxs)("div", { className: 'input-group width-100pct', children: [(0, jsx_runtime_1.jsx)("span", { 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", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map((menuGroup, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: using a random key would re-render the list every time the parent updates
+            (0, jsx_runtime_1.jsx)(ListMenuGroup_1.default, { className: groupClassName, menuGroup: menuGroup }, index)))] }));
     if (responsive && isMobileMode) {
         return ((0, jsx_runtime_1.jsx)(ExpanderPanel_1.default, { title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default', children: (0, jsx_runtime_1.jsx)("div", { onClick: handleExpanderBodyClick, children: listMenu }) }));
     }

package/lib/es/components/map/components/Map.js

@@ -19,7 +19,13 @@ const MapElements_1 = tslib_1.__importDefault(require("./MapElements"));
 const rendering_1 = require("../utils/rendering");
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 const Map = (props) => {
-    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, eventListenerMap, mapType = constants_1.MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, } = props;
+    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, disableZoomMomentum = true, eventListenerMap, mapType = constants_1.MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, minZoom = constants_1.DEFAULT_MIN_ZOOM, maxZoom = constants_1.DEFAULT_MAX_ZOOM, } = props;
+    let safeMaxZoom = maxZoom;
+    if (minZoom > maxZoom) {
+        // Avoid crashing the map for invalid zoom limits
+        safeMaxZoom = constants_1.DEFAULT_MAX_ZOOM;
+        console.error('Invalid condition for zoom limits: min <= max)');
+    }
     const mapRef = (0, react_1.useRef)(null);
     const [isMapInitialized, setMapInitialized] = (0, react_1.useState)(false);
     const [api, setApi] = (0, react_1.useState)();
@@ -58,6 +64,8 @@ const Map = (props) => {
             engineType,
             vehicleRestrictions: activeLayers.includes(constants_1.MAP_LAYER_ROAD_RESTRICTIONS),
             language,
+            minZoom,
+            maxZoom: safeMaxZoom,
         });
         // Initialize the map
         const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
@@ -68,8 +76,8 @@ const Map = (props) => {
             pixelRatio: devicePixelRatio,
             fixedCenter: true,
         });
-        // Render street labels and road signs as well as additional pois as vector data
         if (defaultLayerMap.overlayLayer) {
+            // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data
             hereMap.addLayer(defaultLayerMap.overlayLayer);
         }
         setMapInitialized(true);
@@ -79,11 +87,16 @@ const Map = (props) => {
         if (!disableMapEvents) {
             hereMapEvents = new H.mapevents.MapEvents(hereMap);
         }
-        // Enable map interaction (pan, zoom, pinch-to-zoom)
         if (!(disableMapEvents || disableBehavior)) {
             hereBehavior = new H.mapevents.Behavior(hereMapEvents);
             // @ts-ignore-next-line
             hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+            if (disableZoomMomentum) {
+                // Disable the inertia that occurs on WebGL maps when scrolling/zooming.
+                // This resulted in a very high scroll sensitivity.
+                // @ts-ignore-next-line
+                hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);
+            }
         }
         (0, eventHandling_1.addEventListenerMap)(hereMap, eventListenerMap, hereMap);
         const hereUi = (0, mapUi_1.getHereUi)(hereMap, defaultLayers, showScaleBar, language);
@@ -105,6 +118,8 @@ const Map = (props) => {
                 baseLayer,
                 activeLayers,
                 showCluster,
+                minZoom,
+                maxZoom: safeMaxZoom,
             },
         });
         // If the base layer changed, re-add all previous objects again,
@@ -121,7 +136,7 @@ const Map = (props) => {
                 hereMap.dispose();
             }
         };
-    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer]);
+    }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);
     const isDarkMode = (0, useDarkMode_1.default)();
     (0, react_1.useEffect)(() => {
         // Toggle night map only if current map type is default

package/lib/es/components/map/components/constants.d.ts

@@ -15,3 +15,5 @@ export declare const ENGINE_TYPE_HARP: any;
 export declare const ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
 export declare const DEFAULT_TILE_SIZE = 512;
 export declare const DEFAULT_RASTER_LAYER_FORMAT = "png";
+export declare const DEFAULT_MIN_ZOOM = 3;
+export declare const DEFAULT_MAX_ZOOM = 20;

package/lib/es/components/map/components/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_RASTER_LAYER_FORMAT = exports.DEFAULT_TILE_SIZE = exports.ENGINE_TYPE_P2D = exports.ENGINE_TYPE_HARP = exports.NO_CREDENTIALS_ERROR_MESSAGE = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
+exports.DEFAULT_MAX_ZOOM = exports.DEFAULT_MIN_ZOOM = exports.DEFAULT_RASTER_LAYER_FORMAT = exports.DEFAULT_TILE_SIZE = exports.ENGINE_TYPE_P2D = exports.ENGINE_TYPE_HARP = exports.NO_CREDENTIALS_ERROR_MESSAGE = exports.TILE_TYPE = exports.TILE_SIZE = exports.FORMAT = exports.MAP_LAYER_ROAD_RESTRICTIONS = exports.MAP_LAYER_TRAFFIC = exports.MAP_LAYER_INCIDENTS = exports.MAP_TYPE_NIGHT = exports.MAP_TYPE_TERRAIN = exports.MAP_TYPE_SATELLITE = exports.MAP_TYPE_FLEET_STYLE = exports.MAP_TYPE_DEFAULT = void 0;
 exports.MAP_TYPE_DEFAULT = 'DEFAULT';
 exports.MAP_TYPE_FLEET_STYLE = 'FLEET_STYLE';
 exports.MAP_TYPE_SATELLITE = 'SATELLITE';
@@ -15,7 +15,10 @@ exports.TILE_SIZE = 256;
 exports.TILE_TYPE = 'maptile';
 exports.NO_CREDENTIALS_ERROR_MESSAGE = 'Cannot instantiate the Map. Missing credentials property.';
 // @ts-ignore-next-line
+// biome-ignore lint/complexity/useLiteralKeys: <explanation>
 exports.ENGINE_TYPE_HARP = H.Map.EngineType['HARP'];
 exports.ENGINE_TYPE_P2D = H.Map.EngineType.P2D;
 exports.DEFAULT_TILE_SIZE = 512;
 exports.DEFAULT_RASTER_LAYER_FORMAT = 'png'; // 'jpeg';
+exports.DEFAULT_MIN_ZOOM = 3;
+exports.DEFAULT_MAX_ZOOM = 20;

package/lib/es/components/map/utils/mapTypes.d.ts

@@ -57,6 +57,7 @@ export type MapProps = {
     boundingBox?: BoundingBox;
     disableMapEvents?: boolean;
     disableBehavior?: boolean;
+    disableZoomMomentum?: boolean;
     eventListenerMap?: EventListenerMap;
     hideMapSettings?: boolean;
     hideClusterSettings?: boolean;
@@ -76,6 +77,8 @@ export type MapProps = {
     zoomAnimation?: boolean;
     enableWebGL?: boolean;
     enableDevicePixelRatio?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
     children?: React.ReactNode | ((api: MapApi, incidents?: MapIncidents) => React.ReactNode);
 };
 export type MapApi = {
@@ -93,6 +96,8 @@ export type MapApi = {
         baseLayer?: MapType;
         activeLayers?: MapLayer[];
         showCluster?: boolean;
+        minZoom?: number;
+        maxZoom?: number;
     };
 };
 export type MapIncidents = {

package/lib/es/components/map/utils/rendering.d.ts

@@ -2,7 +2,7 @@ import type { MapCredentials, MapType } from './mapTypes';
 export declare const getPPI: () => 100 | 200;
 export declare const isVectorBased: (enableWebGL: boolean, baseLayer: MapType) => boolean;
 export declare const getPlatform: (credentials: MapCredentials) => H.service.Platform;
-export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType) => H.map.layer.TileLayer;
+export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType, minZoom: number, maxZoom: number) => H.map.layer.TileLayer;
 export declare const getBaseRasterTileService: (platform: H.service.Platform, style: string, features: string, lang: string) => any;
 export declare const getEngineType: (baseLayerName: string, enableWebGL: boolean) => any;
 export type BaseLayer = {
@@ -13,8 +13,11 @@ export type BaseLayer = {
     engineType: H.Map.EngineType;
     language: string;
     vehicleRestrictions: boolean;
+    minZoom: number;
+    maxZoom: number;
 };
-export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }: BaseLayer) => {
+export type BaseLayerResponse = {
     baseLayer: H.map.layer.Layer;
     overlayLayer?: H.map.layer.Layer;
 };
+export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }: BaseLayer) => BaseLayerResponse;

package/lib/es/components/map/utils/rendering.js

@@ -15,16 +15,20 @@ const getPlatform = (credentials) =>
 // Initiate and authenticate your connection to the HERE platform:
 new H.service.Platform({
     apikey: credentials.apikey ?? '',
-    useHTTPS: location.protocol === 'https:' ? true : false,
+    useHTTPS: location.protocol === 'https:',
 });
 exports.getPlatform = getPlatform;
-const getBaseTileLayer = (rasterTileService, engineType) => {
+const getBaseTileLayer = (rasterTileService, engineType, minZoom, maxZoom) => {
     // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
     const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
         engineType,
         tileSize: 512,
     });
-    return new H.map.layer.TileLayer(rasterTileProvider);
+    const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
+    // force the tile layer minimum zoom (furthest away possible) and maximum zoom (nearest) to the desired level
+    rasterTileLayer.setMin(minZoom);
+    rasterTileLayer.setMax(maxZoom);
+    return rasterTileLayer;
 };
 exports.getBaseTileLayer = getBaseTileLayer;
 const getBaseRasterTileService = (platform, style, features, lang) => {
@@ -51,79 +55,82 @@ const getEngineType = (baseLayerName, enableWebGL) => {
     }
 };
 exports.getEngineType = getEngineType;
-const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }) => {
+const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }) => {
     const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';
     const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;
     if (enableWebGL && baseLayerName === constants_1.MAP_TYPE_DEFAULT) {
-        // const rasterTileService = platform?.getRasterTileService({
-        //     format: 'png', // 'png', // or jpg, png8
-        //     queryParams: {
-        //         lang: 'en',
-        //         ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
-        //         // style: 'explore.day',
-        //         features: 'environmental_zones:all',
-        //     },
-        // });
-        // const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
-        //     engineType: enableWebGL ? H.Map.EngineType['HARP'] : H.Map.EngineType['P2D'],
-        //     tileSize: 512,
-        // });
-        // const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
-        // const envLayer = rasterTileLayer;
-        // // create a service that calls the custom endpoint
-        // const service = platform.getOMVService({ path: 'v2/vectortiles/core/mc' });
-        // // create a provider and a layer that use the custom service and a custom style
-        // const provider = new H.service.omv.Provider(
-        //     service,
-        //     new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml')
-        // );
-        // const layer = new H.map.layer.TileLayer(provider, { max: 22 });
+        defaultLayers?.vector.normal.map.setMin(minZoom);
+        defaultLayers?.vector.normal.map.setMax(maxZoom);
         return {
             baseLayer: defaultLayers?.vector.normal.map,
-            // baseLayer: layer,
-            // overlayLayer: envLayer,
         };
     }
     switch (baseLayerName) {
         case constants_1.MAP_TYPE_SATELLITE: {
             if (enableWebGL) {
+                // This is a workaround for setting the min and max zoom limit for satellite map
+                // since the setMin/setMax cannot be set on the "defaultLayers.hybrid.liteday.raster".
+                // The HERE support suggests to create a hybrid layer for that and set the zoom limits
+                // on the two layers.
+                const hybridStyleConfig = {
+                    base: {
+                        style: 'oslo',
+                        scheme: 'hybrid.day',
+                    },
+                };
+                let baseLayer;
+                let overlayLayer;
+                // This method creates hybrid map layers. A hybrid map consists of raster satellite base layer and vector layers on top.
+                // Layers created by this method can be used only when the Map is instantiated with H.Map.EngineType.HARP engineType.
+                // See https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.service.Platform_4.html#createHybridLayers
+                // @ts-ignore-next-line
+                platform.createHybridLayers(hybridStyleConfig, (layers) => {
+                    layers.raster.setMin(minZoom);
+                    layers.raster.setMax(maxZoom);
+                    layers.vector.setMin(minZoom);
+                    layers.vector.setMax(maxZoom);
+                    baseLayer = layers.raster;
+                    overlayLayer = layers.vector;
+                }, console.error);
                 return {
-                    // @ts-ignore-next-line "hybrid.liteday.raster" is newer that the types
-                    baseLayer: defaultLayers.hybrid.liteday.raster,
-                    // @ts-ignore-next-line "hybrid.day.vector" is newer that the types
-                    overlayLayer: defaultLayers.hybrid.day.vector,
+                    baseLayer,
+                    overlayLayer,
                 };
             }
             return {
-                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.satellite.day', features, language), engineType),
+                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.satellite.day', features, language), engineType, minZoom, maxZoom),
             };
         }
         case constants_1.MAP_TYPE_TERRAIN: {
             return {
-                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'topo.day', features, language), engineType),
+                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'topo.day', features, language), engineType, minZoom, maxZoom),
             };
         }
         case constants_1.MAP_TYPE_FLEET_STYLE: {
             return {
-                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'logistics.day', features, language), constants_1.ENGINE_TYPE_P2D),
+                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'logistics.day', features, language), constants_1.ENGINE_TYPE_P2D, minZoom, maxZoom),
             };
         }
         case constants_1.MAP_TYPE_NIGHT: {
             if (enableWebGL) {
+                // @ts-ignore-next-line "setMin" is working on "vector.normal.mapnight"
+                defaultLayers?.vector.normal.mapnight.setMin(minZoom);
+                // @ts-ignore-next-line "setMax" is working on "vector.normal.mapnight"
+                defaultLayers?.vector.normal.mapnight.setMax(maxZoom);
                 return {
-                    // @ts-ignore-next-line "vector.normal.mapnight" is newer that the types
+                    // @ts-ignore-next-line "vector.normal.mapnight" is newer than the types
                     baseLayer: defaultLayers.vector.normal.mapnight,
                 };
             }
             return {
-                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.night', features, language), engineType),
+                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.night', features, language), engineType, minZoom, maxZoom),
             };
         }
         default: {
             // As a replacement for "defaultLayers?.raster.normal.map" which uses the old and deprecated
             // H.service.MapTileService, we use the Raster Tile Service v3 instead
             return {
-                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.day', features, language), engineType),
+                baseLayer: (0, exports.getBaseTileLayer)((0, exports.getBaseRasterTileService)(platform, 'explore.day', features, language), engineType, minZoom, maxZoom),
             };
         }
     }

package/lib/es/components/overlay/OverlayTrigger.js

@@ -35,7 +35,7 @@ const OverlayTrigger = (props) => {
     const handleShow = () => {
         timeout.clear();
         hoverStateRef.current = 'show';
-        if (typeof delay === 'number' || !delay?.show) {
+        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {
             setShow(true);
             return;
         }
@@ -56,7 +56,7 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'hide') {
                 setShow(false);
             }
-        }, typeof delay === 'number' ? delay : delay?.hide);
+        }, delay?.hide);
     };
     const handleFocus = (0, react_1.useCallback)((...args) => {
         handleShow();