@dynatrace/strato-geo 1.5.1 → 1.7.2

package/esm/map/MapView.js

@@ -11,7 +11,8 @@ import { MapUnavailable } from "./components/MapUnavailable.js";
 import {
   DEFAULT_LEGEND_SIZES,
   DEFAULT_MAP_HEIGHT,
-  DEFAULT_TRUNCATION_MODE
+  DEFAULT_TRUNCATION_MODE,
+  MAP_VIEW_ARIA_LABEL
 } from "./constants.js";
 import { FormatterContext } from "./contexts/formatter.context.js";
 import { LayerIdsContext } from "./contexts/layer-ids.context.js";
@@ -66,6 +67,8 @@ const _MapView = forwardRef(
         style: containerStyles,
         className: customerClassNames,
         "data-testid": "mapview-container",
+        role: "img",
+        "aria-label": MAP_VIEW_ARIA_LABEL,
         // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response
         children: mapUnavailable ? /* @__PURE__ */ jsx(
           MapUnavailable,

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isFetchingFeatures={isFetchingFeatures}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider\n                              categories={categories}\n                              dataMax={legendDomain[1]}\n                            >\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        onMapLoad={() => setIsMapLoaded(true)}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useState } from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n  _useAutoLegendRefresh as useAutoLegendRefresh,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { MapUnavailable } from './components/MapUnavailable.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_TRUNCATION_MODE,\n  MAP_VIEW_ARIA_LABEL,\n} from './constants.js';\nimport { FormatterContext } from './contexts/formatter.context.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapBaseLayerFeaturesContext } from './contexts/map-base-layer.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { MapTruncationModeContext } from './contexts/map-truncation-mode.context.js';\nimport { useLoadMapBaseLayer } from './hooks/use-load-map-base-layer.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\nimport { extractLayersData } from './utils/extract-layers-data.js';\nimport { getMapStatesTemplates } from './utils/get-map-states-template.js';\nimport { iterateConfigSlots } from './utils/iterate-config-slots.js';\nimport { setLayersId } from './utils/set-layers-id.js';\n\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      formatter,\n      truncationMode,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren, valueAccessors } = setLayersId(children);\n\n    const {\n      flattenData: layersData,\n      categories,\n      legendDomain,\n    } = extractLayersData(parsedChildren, valueAccessors);\n\n    const config = iterateConfigSlots(children, legendDomain);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\n    const [isMapLoaded, setIsMapLoaded] = useState<boolean>(false);\n    const { errorState } = getMapStatesTemplates(children);\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    const chartLayoutRef = useAutoLegendRefresh(layersData);\n    const mapUnavailable = (!isFetchingFeatures && !isMapEnabled) || error;\n\n    const isLoading = isFetchingFeatures || !isMapLoaded;\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n        role=\"img\"\n        aria-label={MAP_VIEW_ARIA_LABEL}\n      >\n        {\n          // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response\n          mapUnavailable ? (\n            <MapUnavailable\n              isFetchingFeatures={isFetchingFeatures}\n              isDisabled={!isMapEnabled}\n              chartHeight={chartHeight}\n              error={error}\n            />\n          ) : (\n            <MapLoadingContext.Provider value={loading}>\n              <MapBaseLayerFeaturesContext.Provider\n                value={baseFeatureCollection}\n              >\n                <MapConfigurationContext.Provider value={config}>\n                  <LayerIdsContext.Provider value={layerIds}>\n                    <MapTruncationModeContext.Provider\n                      value={truncationMode ?? DEFAULT_TRUNCATION_MODE}\n                    >\n                      <FormatterContext.Provider value={formatter}>\n                        <MapRawDataContext.Provider value={layersData}>\n                          <MapStoreProvider>\n                            <ColorScaleProvider\n                              categories={categories}\n                              dataMax={legendDomain[1]}\n                            >\n                              <LayerColorStrategyProvider>\n                                <ChartLayout\n                                  ref={chartLayoutRef}\n                                  chartHeight={chartHeight}\n                                  errorState={errorState}\n                                  showLoader={loading || isLoading}\n                                >\n                                  <ChartLayout.Graph>\n                                    {baseFeatureCollection && (\n                                      <MapContent\n                                        ref={forwardedRef}\n                                        onMapLoad={() => setIsMapLoaded(true)}\n                                        {...remaining}\n                                      >\n                                        {parsedChildren}\n                                      </MapContent>\n                                    )}\n                                  </ChartLayout.Graph>\n                                  {!isLegendHidden && (\n                                    <ChartLayout.Legend\n                                      position={legendPosition}\n                                      ratio={legendRatio}\n                                      ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                      onResize={legendOnRatioChange}\n                                    >\n                                      <MapLegendRenderer />\n                                    </ChartLayout.Legend>\n                                  )}\n                                </ChartLayout>\n                              </LayerColorStrategyProvider>\n                            </ColorScaleProvider>\n                          </MapStoreProvider>\n                        </MapRawDataContext.Provider>\n                      </FormatterContext.Provider>\n                    </MapTruncationModeContext.Provider>\n                  </LayerIdsContext.Provider>\n                </MapConfigurationContext.Provider>\n              </MapBaseLayerFeaturesContext.Provider>\n            </MapLoadingContext.Provider>\n          )\n        }\n      </div>\n    );\n  },\n);\n\n(_MapView as typeof _MapView & { displayName: string })['displayName'] =\n  'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @public\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { sortBy } from "lodash-es";
 import { useRef } from "react";
 import {
   _ChartTooltip as ChartTooltip,
@@ -19,7 +20,7 @@ const BubbleLayerTooltip = (props) => {
   const tooltipRef = useRef(null);
   const { hoveredLayerId, data, position, visible, enabled } = useMapTooltipState();
   const pinned = useMapTooltipPinnedState();
-  const closestPoint = useRef();
+  const closestPoint = useRef(null);
   const remainingPoints = useRef([]);
   const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
   if (!tooltipTemplate || forceHideTooltip || !position) {
@@ -38,8 +39,9 @@ const BubbleLayerTooltip = (props) => {
         data: customData
       };
     });
-    closestPoint.current = sanitizedData[0];
-    remainingPoints.current = sanitizedData.slice(1);
+    const sortedBubbles = sortBy(sanitizedData, ({ radius }) => radius);
+    closestPoint.current = sortedBubbles[0];
+    remainingPoints.current = sortedBubbles.slice(1);
   }
   return /* @__PURE__ */ jsx(
     ChartTooltip,

package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayerTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const tooltipRef = useRef<HTMLDivElement | null>(null);\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<BubbleTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const closestPoint = useRef<BubbleLayerTooltipData>();\n  const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const sanitizedData = data.map((bubbleProps) => {\n      const {\n        __color: color,\n        __radius: radius,\n        data: customData,\n      } = bubbleProps;\n\n      return {\n        color,\n        radius,\n        data: customData,\n      };\n    });\n\n    closestPoint.current = sanitizedData[0];\n    remainingPoints.current = sanitizedData.slice(1);\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      ref={tooltipRef}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {closestPoint.current\n        ? tooltipTemplate(closestPoint.current, remainingPoints.current)\n        : null}\n    </ChartTooltip>\n  );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
-  "mappings": "AA0EI;AA1EJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA8C;AAChD,QAAM,SAAS,yBAAyB;AAExC,QAAM,eAAe,OAA+B;AACpD,QAAM,kBAAkB,OAAiC,CAAC,CAAC;AAE3D,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,gBAAgB,KAAK,IAAI,CAAC,gBAAgB;AAC9C,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MACR,IAAI;AAEJ,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAED,iBAAa,UAAU,cAAc,CAAC;AACtC,oBAAgB,UAAU,cAAc,MAAM,CAAC;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,uBAAa,UACV,gBAAgB,aAAa,SAAS,gBAAgB,OAAO,IAC7D;AAAA;AAAA,EACN;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { sortBy } from 'lodash-es';\nimport { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __radius: number;\n  __lat: number;\n  data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const tooltipRef = useRef<HTMLDivElement | null>(null);\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<BubbleTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const closestPoint = useRef<BubbleLayerTooltipData | null>(null);\n  const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const sanitizedData = data.map((bubbleProps) => {\n      const {\n        __color: color,\n        __radius: radius,\n        data: customData,\n      } = bubbleProps;\n\n      return {\n        color,\n        radius,\n        data: customData,\n      };\n    });\n\n    const sortedBubbles = sortBy(sanitizedData, ({ radius }) => radius);\n    closestPoint.current = sortedBubbles[0];\n    remainingPoints.current = sortedBubbles.slice(1);\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      ref={tooltipRef}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {closestPoint.current\n        ? tooltipTemplate(closestPoint.current, remainingPoints.current)\n        : null}\n    </ChartTooltip>\n  );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
+  "mappings": "AA4EI;AA5EJ,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA8C;AAChD,QAAM,SAAS,yBAAyB;AAExC,QAAM,eAAe,OAAsC,IAAI;AAC/D,QAAM,kBAAkB,OAAiC,CAAC,CAAC;AAE3D,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,gBAAgB,KAAK,IAAI,CAAC,gBAAgB;AAC9C,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MACR,IAAI;AAEJ,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAED,UAAM,gBAAgB,OAAO,eAAe,CAAC,EAAE,OAAO,MAAM,MAAM;AAClE,iBAAa,UAAU,cAAc,CAAC;AACtC,oBAAgB,UAAU,cAAc,MAAM,CAAC;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,uBAAa,UACV,gBAAgB,aAAa,SAAS,gBAAgB,OAAO,IAC7D;AAAA;AAAA,EACN;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/ChoroplethLayer/ChoroplethLayerTooltip.js

@@ -18,7 +18,7 @@ const ChoroplethLayerTooltip = (props) => {
   } = useChartActionsMenu();
   const { hoveredLayerId, position, data, visible, enabled } = useMapTooltipState();
   const pinned = useMapTooltipPinnedState();
-  const regionData = useRef();
+  const regionData = useRef(null);
   const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
   if (!tooltipTemplate || forceHideTooltip || !position) {
     return null;

package/esm/map/components/ChoroplethLayer/ChoroplethLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayerTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type {\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface ChoroplethTooltipStatePayload {\n  name: string;\n  __color: string;\n  __hoveredColor: string;\n  data: Record<string, unknown>;\n}\n\nexport interface ChoroplethLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ChoroplethLayerTooltipHandler;\n}\n\nexport const ChoroplethLayerTooltip = (props: ChoroplethLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const { hoveredLayerId, position, data, visible, enabled } =\n    useMapTooltipState<ChoroplethTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const regionData = useRef<ChoroplethLayerTooltipData>();\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { name, __color: color, data: customData } = data[0];\n\n    regionData.current = { data: customData, name, color };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {regionData.current ? tooltipTemplate(regionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nChoroplethLayerTooltip['displayName'] = 'ChoroplethLayerTooltip';\n"],
-  "mappings": "AAyDI;AAzDJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAkBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,EAAE,gBAAgB,UAAU,MAAM,SAAS,QAAQ,IACvD,mBAAkD;AACpD,QAAM,SAAS,yBAAyB;AAExC,QAAM,aAAa,OAAmC;AAEtD,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,MAAM,SAAS,OAAO,MAAM,WAAW,IAAI,KAAK,CAAC;AAEzD,eAAW,UAAU,EAAE,MAAM,YAAY,MAAM,MAAM;AAAA,EACvD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,qBAAW,UAAU,gBAAgB,WAAW,OAAO,IAAI;AAAA;AAAA,EAC9D;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type {\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface ChoroplethTooltipStatePayload {\n  name: string;\n  __color: string;\n  __hoveredColor: string;\n  data: Record<string, unknown>;\n}\n\nexport interface ChoroplethLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ChoroplethLayerTooltipHandler;\n}\n\nexport const ChoroplethLayerTooltip = (props: ChoroplethLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const { hoveredLayerId, position, data, visible, enabled } =\n    useMapTooltipState<ChoroplethTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const regionData = useRef<ChoroplethLayerTooltipData | null>(null);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { name, __color: color, data: customData } = data[0];\n\n    regionData.current = { data: customData, name, color };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {regionData.current ? tooltipTemplate(regionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nChoroplethLayerTooltip['displayName'] = 'ChoroplethLayerTooltip';\n"],
+  "mappings": "AAyDI;AAzDJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAkBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,EAAE,gBAAgB,UAAU,MAAM,SAAS,QAAQ,IACvD,mBAAkD;AACpD,QAAM,SAAS,yBAAyB;AAExC,QAAM,aAAa,OAA0C,IAAI;AAEjE,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,MAAM,SAAS,OAAO,MAAM,WAAW,IAAI,KAAK,CAAC;AAEzD,eAAW,UAAU,EAAE,MAAM,YAAY,MAAM,MAAM;AAAA,EACvD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,qBAAW,UAAU,gBAAgB,WAAW,OAAO,IAAI;AAAA;AAAA,EAC9D;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/ConnectionLayer/ConnectionLayerTooltip.js

@@ -18,7 +18,9 @@ const ConnectionLayerTooltip = (props) => {
   } = useChartActionsMenu();
   const { hoveredLayerId, data, position, visible, enabled } = useMapTooltipState();
   const pinned = useMapTooltipPinnedState();
-  const connectionData = useRef();
+  const connectionData = useRef(
+    null
+  );
   const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
   if (!tooltipTemplate || forceHideTooltip || !position) {
     return null;

package/esm/map/components/ConnectionLayer/ConnectionLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Connection } from '../../types/connection-layer.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ntype ConnectionTooltipStatePayload = {\n  path: Location[];\n  __lineColor: string;\n  __lineWidth: number;\n};\n\nexport interface ConnectionLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<ConnectionTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const connectionData = useRef<ConnectionLayerTooltipData<Connection>>();\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n\n    connectionData.current = { color, thickness, data: rest };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {connectionData.current ? tooltipTemplate(connectionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
-  "mappings": "AAyDI;AAzDJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAAkD;AACpD,QAAM,SAAS,yBAAyB;AAExC,QAAM,iBAAiB,OAA+C;AAEtE,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AAEtE,mBAAe,UAAU,EAAE,OAAO,WAAW,MAAM,KAAK;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,UAAU,gBAAgB,eAAe,OAAO,IAAI;AAAA;AAAA,EACtE;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Connection } from '../../types/connection-layer.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ntype ConnectionTooltipStatePayload = {\n  path: Location[];\n  __lineColor: string;\n  __lineWidth: number;\n};\n\nexport interface ConnectionLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<ConnectionTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const connectionData = useRef<ConnectionLayerTooltipData<Connection> | null>(\n    null,\n  );\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n\n    connectionData.current = { color, thickness, data: rest };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {connectionData.current ? tooltipTemplate(connectionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
+  "mappings": "AA2DI;AA3DJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAAkD;AACpD,QAAM,SAAS,yBAAyB;AAExC,QAAM,iBAAiB;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AAEtE,mBAAe,UAAU,EAAE,OAAO,WAAW,MAAM,KAAK;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,UAAU,gBAAgB,eAAe,OAAO,IAAI;AAAA;AAAA,EACtE;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/DefaultTooltip/utils/get-default-actions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/DefaultTooltip/utils/get-default-actions.tsx"],
-  "sourcesContent": ["import { type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ChartSeriesAction } from '@dynatrace/strato-components-preview/charts';\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../constants.js';\n\nexport const getDefaultActions = (\n  onSelectCallback: () => void,\n): ReactElement => (\n  <ChartSeriesAction>\n    <ChartSeriesAction.Item key={'default-action'} onSelect={onSelectCallback}>\n      <ChartSeriesAction.ItemIcon>\n        <CopyIcon />\n      </ChartSeriesAction.ItemIcon>\n      <FormattedMessage {...COPY_TO_CLIPBOARD_MESSAGES.copyActionCoords} />\n    </ChartSeriesAction.Item>\n  </ChartSeriesAction>\n);\n"],
+  "sourcesContent": ["import { type PropsWithChildren, type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ChartSeriesAction } from '@dynatrace/strato-components-preview/charts';\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../constants.js';\n\nexport const getDefaultActions = (\n  onSelectCallback: () => void,\n): ReactElement<PropsWithChildren> => (\n  <ChartSeriesAction>\n    <ChartSeriesAction.Item key={'default-action'} onSelect={onSelectCallback}>\n      <ChartSeriesAction.ItemIcon>\n        <CopyIcon />\n      </ChartSeriesAction.ItemIcon>\n      <FormattedMessage {...COPY_TO_CLIPBOARD_MESSAGES.copyActionCoords} />\n    </ChartSeriesAction.Item>\n  </ChartSeriesAction>\n);\n"],
   "mappings": "AAYI,SAEI,KAFJ;AAXJ,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAEpC,MAAM,oBAAoB,CAC/B,qBAEA,oBAAC,qBACC,+BAAC,kBAAkB,MAAlB,EAA8C,UAAU,kBACvD;AAAA,sBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,EACA,oBAAC,oBAAkB,GAAG,2BAA2B,kBAAkB;AAAA,KAJxC,gBAK7B,GACF;",
   "names": []
 }

package/esm/map/components/DotLayer/DotLayerTooltip.js

@@ -18,7 +18,7 @@ const DotLayerTooltip = (props) => {
   } = useChartActionsMenu();
   const { hoveredLayerId, data, position, visible, enabled } = useMapTooltipState();
   const pinned = useMapTooltipPinnedState();
-  const dotData = useRef();
+  const dotData = useRef(null);
   const forceHideTooltip = !pinned && (hoveredLayerId !== layerId || !visible || !enabled);
   if (!tooltipTemplate || forceHideTooltip || !position) {
     return null;

package/esm/map/components/DotLayer/DotLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DotLayer/DotLayerTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  DotLayerTooltipData,\n  DotLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface DotTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __bearing: number;\n  data: Location;\n}\n\nexport interface DotLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: DotLayerTooltipHandler;\n}\n\nexport const DotLayerTooltip = (props: DotLayerTooltipProps) => {\n  const { tooltipTemplate, layerId } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<DotTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const dotData = useRef<DotLayerTooltipData>();\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __color: color, __bearing: bearing, data: customData } = data[0];\n\n    dotData.current = {\n      color,\n      bearing,\n      data: customData,\n    };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {dotData.current ? tooltipTemplate(dotData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nDotLayerTooltip['displayName'] = 'DotLayerTooltip';\n"],
-  "mappings": "AA8DI;AA9DJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmBA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,iBAAiB,QAAQ,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA2C;AAC7C,QAAM,SAAS,yBAAyB;AAExC,QAAM,UAAU,OAA4B;AAE5C,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,SAAS,OAAO,WAAW,SAAS,MAAM,WAAW,IAAI,KAAK,CAAC;AAEvE,YAAQ,UAAU;AAAA,MAChB;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,kBAAQ,UAAU,gBAAgB,QAAQ,OAAO,IAAI;AAAA;AAAA,EACxD;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  DotLayerTooltipData,\n  DotLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface DotTooltipStatePayload {\n  __color: string;\n  __hoveredColor: string;\n  __bearing: number;\n  data: Location;\n}\n\nexport interface DotLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: DotLayerTooltipHandler;\n}\n\nexport const DotLayerTooltip = (props: DotLayerTooltipProps) => {\n  const { tooltipTemplate, layerId } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<DotTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const dotData = useRef<DotLayerTooltipData | null>(null);\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __color: color, __bearing: bearing, data: customData } = data[0];\n\n    dotData.current = {\n      color,\n      bearing,\n      data: customData,\n    };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {dotData.current ? tooltipTemplate(dotData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nDotLayerTooltip['displayName'] = 'DotLayerTooltip';\n"],
+  "mappings": "AA8DI;AA9DJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmBA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,iBAAiB,QAAQ,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA2C;AAC7C,QAAM,SAAS,yBAAyB;AAExC,QAAM,UAAU,OAAmC,IAAI;AAEvD,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,SAAS,OAAO,WAAW,SAAS,MAAM,WAAW,IAAI,KAAK,CAAC;AAEvE,YAAQ,UAAU;AAAA,MAChB;AAAA,MACA;AAAA,MACA,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,kBAAQ,UAAU,gBAAgB,QAAQ,OAAO,IAAI;AAAA;AAAA,EACxD;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/toolbar/buttons/MapDownloadDataButton.js

@@ -8,7 +8,7 @@ import { buildAndDownloadCsv } from "../../../utils/build-and-download-csv.js";
 import { TOOLBAR_MESSAGES } from "../constants.js";
 import { useA11yToolbarTabIndex } from "../hooks/use-a11y-toolbar-tab-index.js";
 const MapDownloadDataButton = () => {
-  const downloadDataButtonRef = useRef();
+  const downloadDataButtonRef = useRef(null);
   const intl = useIntl();
   const tabIndex = useA11yToolbarTabIndex("download-data");
   const data = useMapRawData();

package/esm/map/components/toolbar/buttons/MapDownloadDataButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapDownloadDataButton.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { useMapRawData } from '../../../hooks/use-map-raw-data.js';\nimport { buildAndDownloadCsv } from '../../../utils/build-and-download-csv.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapDownloadDataButton = () => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement>();\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex('download-data');\n  const data = useMapRawData();\n\n  /** Handles the download button when event keydown.*/\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      buildAndDownloadCsv(data);\n    }\n  };\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(data);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.downloadData)}\n      testId=\"map-toolbar-download\"\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      placement=\"toolbar\"\n    />\n  );\n};\n"],
-  "mappings": "AAgCkB;AAhClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,wBAAwB,MAAM;AACzC,QAAM,wBAAwB,OAA0B;AACxD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,eAAe;AACvD,QAAM,OAAO,cAAc;AAG3B,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,4BAA4B,MAAM;AACtC,wBAAoB,IAAI;AAAA,EAC1B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { useMapRawData } from '../../../hooks/use-map-raw-data.js';\nimport { buildAndDownloadCsv } from '../../../utils/build-and-download-csv.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapDownloadDataButton = () => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement | null>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex('download-data');\n  const data = useMapRawData();\n\n  /** Handles the download button when event keydown.*/\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      buildAndDownloadCsv(data);\n    }\n  };\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(data);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.downloadData)}\n      testId=\"map-toolbar-download\"\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      placement=\"toolbar\"\n    />\n  );\n};\n"],
+  "mappings": "AAgCkB;AAhClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,wBAAwB,MAAM;AACzC,QAAM,wBAAwB,OAAiC,IAAI;AACnE,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,eAAe;AACvD,QAAM,OAAO,cAAc;AAG3B,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,4BAA4B,MAAM;AACtC,wBAAoB,IAAI;AAAA,EAC1B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

package/esm/map/components/toolbar/buttons/MapResetButton.js

@@ -14,7 +14,7 @@ const MapResetButton = () => {
   const intl = useIntl();
   const { resetEnabled } = useMapZoomState();
   const setZoomState = useSetStateZoom();
-  const resetButtonRef = useRef();
+  const resetButtonRef = useRef(null);
   const tabIndex = useA11yToolbarTabIndex("reset");
   const handleReset = () => {
     map?.flyTo({ center: [longitude, latitude], zoom });

package/esm/map/components/toolbar/buttons/MapResetButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapResetButton.tsx"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n  const { current: map } = useMap();\n  const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n  const intl = useIntl();\n  const { resetEnabled } = useMapZoomState();\n  const setZoomState = useSetStateZoom();\n\n  const resetButtonRef = useRef<HTMLButtonElement>();\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n    setZoomState({ zoomToFitEnabled: true, resetEnabled: false });\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleReset();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n      testId=\"map-toolbar-reset\"\n      onKeyDown={handleKeyDown}\n      onClick={handleReset}\n      tabIndex={tabIndex}\n      disabled={!resetEnabled}\n    />\n  );\n};\n"],
-  "mappings": "AAoCkB;AApClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,iBAAiB,OAA0B;AACjD,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AACxD,iBAAa,EAAE,kBAAkB,MAAM,cAAc,MAAM,CAAC;AAAA,EAC9D;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n  const { current: map } = useMap();\n  const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n  const intl = useIntl();\n  const { resetEnabled } = useMapZoomState();\n  const setZoomState = useSetStateZoom();\n\n  const resetButtonRef = useRef<HTMLButtonElement | null>(null);\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n    setZoomState({ zoomToFitEnabled: true, resetEnabled: false });\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleReset();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n      testId=\"map-toolbar-reset\"\n      onKeyDown={handleKeyDown}\n      onClick={handleReset}\n      tabIndex={tabIndex}\n      disabled={!resetEnabled}\n    />\n  );\n};\n"],
+  "mappings": "AAoCkB;AApClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,iBAAiB,OAAiC,IAAI;AAC5D,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AACxD,iBAAa,EAAE,kBAAkB,MAAM,cAAc,MAAM,CAAC;AAAA,EAC9D;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;",
   "names": []
 }

package/esm/map/components/toolbar/buttons/MapZoomInOutButtons.js

@@ -10,8 +10,8 @@ import { useA11yToolbarTabIndex } from "../hooks/use-a11y-toolbar-tab-index.js";
 const MapZoomInOutButtons = () => {
   const { current: map } = useMap();
   const { zoomInEnabled, zoomOutEnabled } = useMapZoomState();
-  const zoomInButtonRef = useRef();
-  const zoomButtonOutRef = useRef();
+  const zoomInButtonRef = useRef(null);
+  const zoomButtonOutRef = useRef(null);
   const intl = useIntl();
   const tabIndexIn = useA11yToolbarTabIndex("zoom-in");
   const tabIndexOut = useA11yToolbarTabIndex("zoom-out");

package/esm/map/components/toolbar/buttons/MapZoomInOutButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomInOutButtons.tsx"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useMapZoomState } from '../../../store/selectors.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n  const { current: map } = useMap();\n  const { zoomInEnabled, zoomOutEnabled } = useMapZoomState();\n\n  const zoomInButtonRef = useRef<HTMLButtonElement>();\n  const zoomButtonOutRef = useRef<HTMLButtonElement>();\n  const intl = useIntl();\n  const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n  const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n  const handleZoomKeyboardMode = (\n    event: ReactKeyboardEvent,\n    zoomBehavior: ZoomBehavior,\n  ) => {\n    if (event.code === 'Enter') {\n      handleZoomStepToolbarMode(zoomBehavior);\n    }\n  };\n\n  const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n    if (zoomBehavior === 'zoom-in') {\n      map?.zoomIn();\n    }\n    if (zoomBehavior === 'zoom-out') {\n      map?.zoomOut();\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n        testId=\"map-toolbar-zoom-in\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n        onClick={() => handleZoomStepToolbarMode('zoom-in')}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomButtonOutRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n        testId=\"map-toolbar-zoom-out\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n        onClick={() => handleZoomStepToolbarMode('zoom-out')}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n      />\n    </>\n  );\n};\n"],
-  "mappings": "AAyCI,mBAGgB,KAHhB;AAzCJ,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,eAAe,eAAe,IAAI,gBAAgB;AAE1D,QAAM,kBAAkB,OAA0B;AAClD,QAAM,mBAAmB,OAA0B;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,cAAc,uBAAuB,UAAU;AAErD,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAA0B,YAAY;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,4BAA4B,CAAC,iBAA+B;AAChE,QAAI,iBAAiB,WAAW;AAC9B,WAAK,OAAO;AAAA,IACd;AACA,QAAI,iBAAiB,YAAY;AAC/B,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,QACjE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,QAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,QAClD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,QAClE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,QAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,QACnD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useMapZoomState } from '../../../store/selectors.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n  const { current: map } = useMap();\n  const { zoomInEnabled, zoomOutEnabled } = useMapZoomState();\n\n  const zoomInButtonRef = useRef<HTMLButtonElement | null>(null);\n  const zoomButtonOutRef = useRef<HTMLButtonElement | null>(null);\n  const intl = useIntl();\n  const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n  const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n  const handleZoomKeyboardMode = (\n    event: ReactKeyboardEvent,\n    zoomBehavior: ZoomBehavior,\n  ) => {\n    if (event.code === 'Enter') {\n      handleZoomStepToolbarMode(zoomBehavior);\n    }\n  };\n\n  const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n    if (zoomBehavior === 'zoom-in') {\n      map?.zoomIn();\n    }\n    if (zoomBehavior === 'zoom-out') {\n      map?.zoomOut();\n    }\n  };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        ref={zoomInButtonRef}\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n        testId=\"map-toolbar-zoom-in\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n        onClick={() => handleZoomStepToolbarMode('zoom-in')}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n      />\n      <ChartToolbarRenderer.Control\n        ref={zoomButtonOutRef}\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n        testId=\"map-toolbar-zoom-out\"\n        onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n        onClick={() => handleZoomStepToolbarMode('zoom-out')}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "AAyCI,mBAGgB,KAHhB;AAzCJ,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,eAAe,eAAe,IAAI,gBAAgB;AAE1D,QAAM,kBAAkB,OAAiC,IAAI;AAC7D,QAAM,mBAAmB,OAAiC,IAAI;AAC9D,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,cAAc,uBAAuB,UAAU;AAErD,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAA0B,YAAY;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,4BAA4B,CAAC,iBAA+B;AAChE,QAAI,iBAAiB,WAAW;AAC9B,WAAK,OAAO;AAAA,IACd;AACA,QAAI,iBAAiB,YAAY;AAC/B,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,QACjE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,QAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,QAClD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,QAClE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,QAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,QACnD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/map/components/toolbar/buttons/MapZoomToFitButton.js

@@ -10,7 +10,7 @@ import { useMapZoomState, useSetStateZoom } from "../../../store/store.js";
 import { TOOLBAR_MESSAGES } from "../constants.js";
 import { useA11yToolbarTabIndex } from "../hooks/use-a11y-toolbar-tab-index.js";
 const MapZoomToFitButton = () => {
-  const resetButtonRef = useRef();
+  const resetButtonRef = useRef(null);
   const { current: map } = useMap();
   const tabIndex = useA11yToolbarTabIndex("zoom-to-fit");
   const intl = useIntl();

package/esm/map/components/toolbar/buttons/MapZoomToFitButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomToFitButton.tsx"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n  const resetButtonRef = useRef();\n  const { current: map } = useMap();\n  const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n  const intl = useIntl();\n  const boundingBox = useDataBoundingBox();\n  const { zoomToFitEnabled } = useMapZoomState();\n  const setZoomState = useSetStateZoom();\n  const handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n    setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleZoomToFit();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ZoomToFitIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n      testId=\"map-toolbar-zoom-to-fit\"\n      onKeyDown={handleKeyDown}\n      onClick={handleZoomToFit}\n      tabIndex={tabIndex}\n      disabled={!zoomToFitEnabled}\n    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
-  "mappings": "AAmCkB;AAnClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,OAAO;AAC9B,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,WAAW,uBAAuB,aAAa;AACrD,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,mBAAmB;AACvC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB;AAC7C,QAAM,eAAe,gBAAgB;AACrC,QAAM,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAC9C,iBAAa,EAAE,kBAAkB,OAAO,qBAAqB,KAAK,CAAC;AAAA,EACrE;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n  const resetButtonRef = useRef<HTMLButtonElement | null>(null);\n  const { current: map } = useMap();\n  const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n  const intl = useIntl();\n  const boundingBox = useDataBoundingBox();\n  const { zoomToFitEnabled } = useMapZoomState();\n  const setZoomState = useSetStateZoom();\n  const handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n    setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      handleZoomToFit();\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={resetButtonRef}\n      prefixIcon={<ZoomToFitIcon />}\n      tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n      testId=\"map-toolbar-zoom-to-fit\"\n      onKeyDown={handleKeyDown}\n      onClick={handleZoomToFit}\n      tabIndex={tabIndex}\n      disabled={!zoomToFitEnabled}\n    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
+  "mappings": "AAmCkB;AAnClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,OAAiC,IAAI;AAC5D,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,WAAW,uBAAuB,aAAa;AACrD,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,mBAAmB;AACvC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB;AAC7C,QAAM,eAAe,gBAAgB;AACrC,QAAM,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAC9C,iBAAa,EAAE,kBAAkB,OAAO,qBAAqB,KAAK,CAAC;AAAA,EACrE;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/constants.js

@@ -89,6 +89,7 @@ const DEFAULT_BASE_LAYER_RULES = {
 const BOUNDING_BOX_PRECISION = 6;
 const VIEW_STATE_PRECISION = 4;
 const MAX_BOUNDS_PRECISION = 2;
+const MAP_VIEW_ARIA_LABEL = "Map View";
 export {
   ACTIVE_BORDER_WIDTH_INNER,
   ACTIVE_BORDER_WIDTH_OUTER,
@@ -138,6 +139,7 @@ export {
   ICON_BACKGROUND_OPACITY,
   ICON_BACKGROUND_RADIUS,
   INCLUDE_ALL_WILDCARD_RULE,
+  MAP_VIEW_ARIA_LABEL,
   MAX_BOUNDS_PRECISION,
   MAX_LATITUDE,
   MAX_LINE_THICKNESS,

package/esm/map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/constants.ts"],
-  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport type { _TruncationMode as TruncationMode } from '@dynatrace/strato-components/typography';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { BaseLayerRules } from './types/base-layer.js';\nimport type { BoundingBoxCoords } from './types/map-view.js';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR =\n  Colors.Background.Container.Neutral.Default;\nexport const DEFAULT_BOUNDARIES_BORDER_COLOR = Colors.Border.Neutral.Default;\nexport const COUNTRY_BORDER_WIDTH = 1;\nexport const REGION_BORDER_WIDTH = 0.4;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\n\n// region Map max bounds:\n// These bounds hide the space used by Antarctica and some portion of the North Pole\nexport const MAX_LATITUDE = 85;\nexport const MIN_LATITUDE = -60;\nexport const MAX_LONGITUDE = 179.99;\nexport const MIN_LONGITUDE = -179.99;\n// endregion\n\nexport const WORLD_VIEW_MAX_BOUNDARIES: BoundingBoxCoords = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 400;\nexport const DEFAULT_MAP_LEGEND_RATIO = 'auto';\nexport const DEFAULT_MAP_POSITION = 'auto';\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.Accent;\n\nexport const BASE_LAYER_FILL_ID = 'geojson-fill';\nexport const BASE_LAYER_LINE_ID = 'geojson-line';\nexport const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];\nexport const SHAPE_OPACITY_DEFAULT = 1;\nexport const SHAPE_OPACITY_DIMMED = 0.2;\n\nexport const DEFAULT_SYMBOL_SIZE = 32;\nexport const FALLBACK_SYMBOL_SIZE = 1;\nexport const DEFAULT_TRUNCATION_MODE = 'middle' as TruncationMode;\n\nexport const CDN_BASE_PATH =\n  'https://dt-cdn.net/scripts/data/worldmap/maps/v004/' as const;\nexport const INCLUDE_ALL_WILDCARD_RULE = '*' as const;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Container.Neutral.Accent;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;\n//endregion\n\n//region CHOROPLETH LAYER\nexport const ACTIVE_BORDER_WIDTH_OUTER = 3;\nexport const ACTIVE_BORDER_WIDTH_INNER = 1;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n\n//region BASE LAYER RULES\nexport const DEFAULT_BASE_LAYER_RULES = {\n  include: [INCLUDE_ALL_WILDCARD_RULE],\n  exclude: [],\n} as const as BaseLayerRules;\n\n//endregion\n\n//region Zoom state comparison precision\nexport const BOUNDING_BOX_PRECISION = 6;\nexport const VIEW_STATE_PRECISION = 4;\nexport const MAX_BOUNDS_PRECISION = 2;\n//endregion\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAG/B,OAAO,YAAY;AAMZ,MAAM,+BACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,kCAAkC,OAAO,OAAO,QAAQ;AAC9D,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,2BAA2B;AAIjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAGtB,MAAM,4BAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAE3C,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB,CAAC,oBAAoB,kBAAkB;AAC9D,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAE7B,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAEhC,MAAM,gBACX;AACK,MAAM,4BAA4B;AAIlC,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,UAAU,QAAQ;AAChE,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAIxC,MAAM,4BAA4B;AAClC,MAAM,4BAA4B;AAElC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;AAIM,MAAM,2BAA2B;AAAA,EACtC,SAAS,CAAC,yBAAyB;AAAA,EACnC,SAAS,CAAC;AACZ;AAKO,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;",
+  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport type { _TruncationMode as TruncationMode } from '@dynatrace/strato-components/typography';\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { BaseLayerRules } from './types/base-layer.js';\nimport type { BoundingBoxCoords } from './types/map-view.js';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR =\n  Colors.Background.Container.Neutral.Default;\nexport const DEFAULT_BOUNDARIES_BORDER_COLOR = Colors.Border.Neutral.Default;\nexport const COUNTRY_BORDER_WIDTH = 1;\nexport const REGION_BORDER_WIDTH = 0.4;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\n\n// region Map max bounds:\n// These bounds hide the space used by Antarctica and some portion of the North Pole\nexport const MAX_LATITUDE = 85;\nexport const MIN_LATITUDE = -60;\nexport const MAX_LONGITUDE = 179.99;\nexport const MIN_LONGITUDE = -179.99;\n// endregion\n\nexport const WORLD_VIEW_MAX_BOUNDARIES: BoundingBoxCoords = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 400;\nexport const DEFAULT_MAP_LEGEND_RATIO = 'auto';\nexport const DEFAULT_MAP_POSITION = 'auto';\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.Accent;\n\nexport const BASE_LAYER_FILL_ID = 'geojson-fill';\nexport const BASE_LAYER_LINE_ID = 'geojson-line';\nexport const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];\nexport const SHAPE_OPACITY_DEFAULT = 1;\nexport const SHAPE_OPACITY_DIMMED = 0.2;\n\nexport const DEFAULT_SYMBOL_SIZE = 32;\nexport const FALLBACK_SYMBOL_SIZE = 1;\nexport const DEFAULT_TRUNCATION_MODE = 'middle' as TruncationMode;\n\nexport const CDN_BASE_PATH =\n  'https://dt-cdn.net/scripts/data/worldmap/maps/v004/' as const;\nexport const INCLUDE_ALL_WILDCARD_RULE = '*' as const;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Container.Neutral.Accent;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;\n//endregion\n\n//region CHOROPLETH LAYER\nexport const ACTIVE_BORDER_WIDTH_OUTER = 3;\nexport const ACTIVE_BORDER_WIDTH_INNER = 1;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n\n//region BASE LAYER RULES\nexport const DEFAULT_BASE_LAYER_RULES = {\n  include: [INCLUDE_ALL_WILDCARD_RULE],\n  exclude: [],\n} as const as BaseLayerRules;\n\n//endregion\n\n//region Zoom state comparison precision\nexport const BOUNDING_BOX_PRECISION = 6;\nexport const VIEW_STATE_PRECISION = 4;\nexport const MAX_BOUNDS_PRECISION = 2;\n//endregion\n\nexport const MAP_VIEW_ARIA_LABEL = 'Map View';\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAG/B,OAAO,YAAY;AAMZ,MAAM,+BACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,kCAAkC,OAAO,OAAO,QAAQ;AAC9D,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAC5B,MAAM,2BAA2B;AAIjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAGtB,MAAM,4BAA+C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAE3C,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,iBAAiB,CAAC,oBAAoB,kBAAkB;AAC9D,MAAM,wBAAwB;AAC9B,MAAM,uBAAuB;AAE7B,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAEhC,MAAM,gBACX;AACK,MAAM,4BAA4B;AAIlC,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,UAAU,QAAQ;AAChE,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAIxC,MAAM,4BAA4B;AAClC,MAAM,4BAA4B;AAElC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;AAIM,MAAM,2BAA2B;AAAA,EACtC,SAAS,CAAC,yBAAyB;AAAA,EACnC,SAAS,CAAC;AACZ;AAKO,MAAM,yBAAyB;AAC/B,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAG7B,MAAM,sBAAsB;",
   "names": []
 }

package/esm/map/hooks/use-active-interaction.js

@@ -2,6 +2,7 @@ import { useMap } from "@vis.gl/react-maplibre";
 import { isNil, isUndefined } from "lodash-es";
 import { useCallback, useEffect } from "react";
 import { BASE_LAYER_IDS } from "../constants.js";
+import { getMinValueFeature } from "../utils/get-min-value-feature.js";
 const useActiveInteraction = () => {
   const map = useMap().current;
   let featureId;
@@ -20,8 +21,9 @@ const useActiveInteraction = () => {
             { active: false }
           );
         }
-        featureId = features[0].id;
-        sourceId = features[0].layer.source;
+        const minFeature = getMinValueFeature(features);
+        featureId = minFeature.id;
+        sourceId = minFeature.layer.source;
         const activeState = features[0].state.active;
         map.setFeatureState(
           { source: sourceId, id: featureId },

package/esm/map/hooks/use-active-interaction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-active-interaction.ts"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\n\nexport const useActiveInteraction = () => {\n  const map = useMap().current!;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n  const handleClick = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      const features = map.queryRenderedFeatures(point);\n      const allFeatures = map.queryRenderedFeatures();\n\n      const layerId = features?.[0]?.layer?.id;\n\n      const hasHoveredFeatures =\n        !isNil(features) && features.length > 0 && !isUndefined(layerId);\n      const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n      if (hasHoveredFeatures && !isBaseLayer) {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // if there's already an active feature, remove the active state\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n        }\n\n        featureId = features[0].id;\n        sourceId = features[0].layer.source;\n        const activeState = features[0].state.active;\n\n        // add the active state to the closest feature\n        map.setFeatureState(\n          { source: sourceId, id: featureId },\n          { active: !activeState },\n        );\n        allFeatures.forEach((feature) => {\n          if (feature.id !== undefined && feature.layer.source !== undefined) {\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: !activeState },\n            );\n          }\n        }); //TODO: change to inactive\n      } else {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // remove the active state from the last active feature\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n          allFeatures.forEach((feature) => {\n            if (\n              feature.id !== undefined &&\n              feature.layer.source !== undefined\n            ) {\n              map.setFeatureState(\n                { source: feature.layer.source, id: feature.id },\n                { isAnyActive: false },\n              );\n            }\n          });\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    return () => {\n      map.off('click', handleClick);\n    };\n  }, []);\n};\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAExB,MAAM,uBAAuB,MAAM;AACxC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AACJ,QAAM,cAAc;AAAA,IAClB,CAAC,EAAE,MAAM,MAA0B;AACjC,YAAM,WAAW,IAAI,sBAAsB,KAAK;AAChD,YAAM,cAAc,IAAI,sBAAsB;AAE9C,YAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,YAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,YAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,UAAI,sBAAsB,CAAC,aAAa;AACtC,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAEA,oBAAY,SAAS,CAAC,EAAE;AACxB,mBAAW,SAAS,CAAC,EAAE,MAAM;AAC7B,cAAM,cAAc,SAAS,CAAC,EAAE,MAAM;AAGtC,YAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,UAClC,EAAE,QAAQ,CAAC,YAAY;AAAA,QACzB;AACA,oBAAY,QAAQ,CAAC,YAAY;AAC/B,cAAI,QAAQ,OAAO,UAAa,QAAQ,MAAM,WAAW,QAAW;AAClE,gBAAI;AAAA,cACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,cAC/C,EAAE,aAAa,CAAC,YAAY;AAAA,YAC9B;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AACL,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AACA,sBAAY,QAAQ,CAAC,YAAY;AAC/B,gBACE,QAAQ,OAAO,UACf,QAAQ,MAAM,WAAW,QACzB;AACA,kBAAI;AAAA,gBACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,gBAC/C,EAAE,aAAa,MAAM;AAAA,cACvB;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,QAAI,GAAG,SAAS,WAAW;AAC3B,WAAO,MAAM;AACX,UAAI,IAAI,SAAS,WAAW;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\nexport const useActiveInteraction = () => {\n  const map = useMap().current!;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n  const handleClick = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      const features = map.queryRenderedFeatures(point);\n      const allFeatures = map.queryRenderedFeatures();\n\n      const layerId = features?.[0]?.layer?.id;\n\n      const hasHoveredFeatures =\n        !isNil(features) && features.length > 0 && !isUndefined(layerId);\n      const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n      if (hasHoveredFeatures && !isBaseLayer) {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // if there's already an active feature, remove the active state\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n        }\n\n        const minFeature = getMinValueFeature(features);\n\n        featureId = minFeature.id;\n        sourceId = minFeature.layer.source;\n        const activeState = features[0].state.active;\n\n        // add the active state to the closest feature\n        map.setFeatureState(\n          { source: sourceId, id: featureId },\n          { active: !activeState },\n        );\n        allFeatures.forEach((feature) => {\n          if (feature.id !== undefined && feature.layer.source !== undefined) {\n            map.setFeatureState(\n              { source: feature.layer.source, id: feature.id },\n              { isAnyActive: !activeState },\n            );\n          }\n        }); //TODO: change to inactive\n      } else {\n        if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n          // remove the active state from the last active feature\n          map.setFeatureState(\n            { source: sourceId, id: featureId },\n            { active: false },\n          );\n          allFeatures.forEach((feature) => {\n            if (\n              feature.id !== undefined &&\n              feature.layer.source !== undefined\n            ) {\n              map.setFeatureState(\n                { source: feature.layer.source, id: feature.id },\n                { isAnyActive: false },\n              );\n            }\n          });\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map.on('click', handleClick);\n    return () => {\n      map.off('click', handleClick);\n    };\n  }, []);\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAE5B,MAAM,uBAAuB,MAAM;AACxC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AACJ,QAAM,cAAc;AAAA,IAClB,CAAC,EAAE,MAAM,MAA0B;AACjC,YAAM,WAAW,IAAI,sBAAsB,KAAK;AAChD,YAAM,cAAc,IAAI,sBAAsB;AAE9C,YAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,YAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,YAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,UAAI,sBAAsB,CAAC,aAAa;AACtC,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAEA,cAAM,aAAa,mBAAmB,QAAQ;AAE9C,oBAAY,WAAW;AACvB,mBAAW,WAAW,MAAM;AAC5B,cAAM,cAAc,SAAS,CAAC,EAAE,MAAM;AAGtC,YAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,UAClC,EAAE,QAAQ,CAAC,YAAY;AAAA,QACzB;AACA,oBAAY,QAAQ,CAAC,YAAY;AAC/B,cAAI,QAAQ,OAAO,UAAa,QAAQ,MAAM,WAAW,QAAW;AAClE,gBAAI;AAAA,cACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,cAC/C,EAAE,aAAa,CAAC,YAAY;AAAA,YAC9B;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AACL,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AACA,sBAAY,QAAQ,CAAC,YAAY;AAC/B,gBACE,QAAQ,OAAO,UACf,QAAQ,MAAM,WAAW,QACzB;AACA,kBAAI;AAAA,gBACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,gBAC/C,EAAE,aAAa,MAAM;AAAA,cACvB;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,QAAI,GAAG,SAAS,WAAW;AAC3B,WAAO,MAAM;AACX,UAAI,IAAI,SAAS,WAAW;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
   "names": []
 }

package/esm/map/hooks/use-hover-interaction.js

@@ -7,6 +7,7 @@ import {
   hasAssociatedFeatures,
   isAssociatedFeature
 } from "../utils/associated-features.js";
+import { getMinValueFeature } from "../utils/get-min-value-feature.js";
 const featureExists = (map, source, id) => {
   const isSourcePresent = map.getSource(source) !== void 0;
   return isSourcePresent && map.getFeatureState({
@@ -73,8 +74,9 @@ const useHoverInteraction = () => {
           if (!isUndefined(featureId) && !isUndefined(sourceId)) {
             blurFeature(map, sourceId, featureId);
           }
-          featureId = features[0].id;
-          sourceId = features[0].layer.source;
+          const minFeature = getMinValueFeature(features);
+          featureId = minFeature.id;
+          sourceId = minFeature.layer.source;
           if (!isUndefined(featureId)) {
             hoverFeature(map, sourceId, featureId);
           }

package/esm/map/hooks/use-hover-interaction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-hover-interaction.ts"],
-  "sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n  getAssociatedFeatures,\n  hasAssociatedFeatures,\n  isAssociatedFeature,\n} from '../utils/associated-features.js';\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n  map: MapRef,\n  source: string,\n  id: string | number,\n): boolean => {\n  const isSourcePresent = map.getSource(source) !== undefined;\n\n  return (\n    isSourcePresent &&\n    map.getFeatureState({\n      source,\n      id,\n    }) !== undefined\n  );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: false });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: associatedSource, id: associatedId },\n          {\n            hover: false,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: true });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n          {\n            hover: true,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position\n */\nexport const useHoverInteraction = () => {\n  const map = useMap().current;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n\n  const handleMouseOut = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {\n        blurFeature(map, sourceId, featureId);\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  const handleMouseMove = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map)) {\n        const features = map\n          .queryRenderedFeatures(point)\n          .filter((feature) => !isAssociatedFeature(feature.properties.id)); // associated features should only have hover state when the main feature is hovered\n\n        map.getCanvas().style.cursor = 'grab';\n        const layerId = features?.[0]?.layer?.id;\n\n        const hasHoveredFeatures =\n          !isNil(features) && features.length > 0 && !isUndefined(layerId);\n        const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n        if (hasHoveredFeatures && !isBaseLayer) {\n          map.getCanvas().style.cursor = 'pointer';\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // if there's already a hovered feature, remove the hover state\n            blurFeature(map, sourceId, featureId);\n          }\n\n          featureId = features[0].id;\n          sourceId = features[0].layer.source;\n\n          // add the hover state to the closest feature\n          if (!isUndefined(featureId)) {\n            hoverFeature(map, sourceId, featureId);\n          }\n        } else {\n          map.getCanvas().style.cursor = 'grab';\n\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // remove the active state from the last hovered feature\n            blurFeature(map, sourceId, featureId);\n          }\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map?.on('mousemove', handleMouseMove);\n    map?.on('mouseout', handleMouseOut);\n    return () => {\n      map?.off('mousemove', handleMouseMove);\n      map?.off('mouseout', handleMouseOut);\n    };\n  }, []);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n  getAssociatedFeatures,\n  hasAssociatedFeatures,\n  isAssociatedFeature,\n} from '../utils/associated-features.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n  map: MapRef,\n  source: string,\n  id: string | number,\n): boolean => {\n  const isSourcePresent = map.getSource(source) !== undefined;\n\n  return (\n    isSourcePresent &&\n    map.getFeatureState({\n      source,\n      id,\n    }) !== undefined\n  );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: false });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: associatedSource, id: associatedId },\n          {\n            hover: false,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n  map.setFeatureState({ source, id }, { hover: true });\n\n  if (isString(id) && hasAssociatedFeatures(id)) {\n    for (const associatedFeature of getAssociatedFeatures('connection')) {\n      const associatedSource = `${source}-direction`;\n      const associatedId = `${id}-${associatedFeature}`;\n\n      if (featureExists(map, associatedSource, associatedId)) {\n        map.setFeatureState(\n          { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n          {\n            hover: true,\n          },\n        );\n      }\n    }\n  }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position\n */\nexport const useHoverInteraction = () => {\n  const map = useMap().current;\n\n  let featureId: string | number | undefined;\n  let sourceId: string | undefined;\n\n  const handleMouseOut = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {\n        blurFeature(map, sourceId, featureId);\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  const handleMouseMove = useCallback(\n    ({ point }: MapLayerMouseEvent) => {\n      if (!isNil(map)) {\n        const features = map\n          .queryRenderedFeatures(point)\n          .filter((feature) => !isAssociatedFeature(feature.properties.id)); // associated features should only have hover state when the main feature is hovered\n\n        map.getCanvas().style.cursor = 'grab';\n        const layerId = features?.[0]?.layer?.id;\n\n        const hasHoveredFeatures =\n          !isNil(features) && features.length > 0 && !isUndefined(layerId);\n        const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n        if (hasHoveredFeatures && !isBaseLayer) {\n          map.getCanvas().style.cursor = 'pointer';\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // if there's already a hovered feature, remove the hover state\n            blurFeature(map, sourceId, featureId);\n          }\n\n          const minFeature = getMinValueFeature(features);\n\n          featureId = minFeature!.id;\n          sourceId = minFeature!.layer.source;\n\n          // add the hover state to the closest feature\n          if (!isUndefined(featureId)) {\n            hoverFeature(map, sourceId, featureId);\n          }\n        } else {\n          map.getCanvas().style.cursor = 'grab';\n\n          if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n            // remove the active state from the last hovered feature\n            blurFeature(map, sourceId, featureId);\n          }\n        }\n      }\n    },\n    [featureId, sourceId, map],\n  );\n\n  useEffect(() => {\n    map?.on('mousemove', handleMouseMove);\n    map?.on('mouseout', handleMouseOut);\n    return () => {\n      map?.off('mousemove', handleMouseMove);\n      map?.off('mouseout', handleMouseOut);\n    };\n  }, []);\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/hooks/use-map-performance.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-map-performance.ts"],
-  "sourcesContent": ["import { useEffect, useRef, type RefObject } from 'react';\n\nexport const useMapPerformance = (\n  mapContainerRef: RefObject<HTMLDivElement>,\n) => {\n  const isDev = process.env.NODE_ENV === 'development';\n  const isRendered = useRef(false);\n  let startTime: number | null;\n\n  const onRenderHandler = isDev\n    ? () => {\n        if (!isRendered.current) {\n          if (!startTime) {\n            startTime = performance.now();\n          } else {\n            mapContainerRef.current?.setAttribute(\n              'data-render',\n              (performance.now() - startTime).toString(),\n            );\n          }\n        }\n      }\n    : undefined;\n\n  const onLoadHandler = isDev\n    ? () => {\n        startTime = null;\n        isRendered.current = true;\n      }\n    : undefined;\n\n  useEffect(\n    () => () => {\n      if (isDev) {\n        isRendered.current = false;\n      }\n    },\n    [isDev],\n  );\n\n  return {\n    onLoadHandler,\n    onRenderHandler,\n  };\n};\n"],
+  "sourcesContent": ["import { useEffect, useRef, type RefObject } from 'react';\n\nexport const useMapPerformance = (\n  mapContainerRef: RefObject<HTMLDivElement | null>,\n) => {\n  const isDev = process.env.NODE_ENV === 'development';\n  const isRendered = useRef(false);\n  let startTime: number | null;\n\n  const onRenderHandler = isDev\n    ? () => {\n        if (!isRendered.current) {\n          if (!startTime) {\n            startTime = performance.now();\n          } else {\n            mapContainerRef.current?.setAttribute(\n              'data-render',\n              (performance.now() - startTime).toString(),\n            );\n          }\n        }\n      }\n    : undefined;\n\n  const onLoadHandler = isDev\n    ? () => {\n        startTime = null;\n        isRendered.current = true;\n      }\n    : undefined;\n\n  useEffect(\n    () => () => {\n      if (isDev) {\n        isRendered.current = false;\n      }\n    },\n    [isDev],\n  );\n\n  return {\n    onLoadHandler,\n    onRenderHandler,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,WAAW,cAA8B;AAE3C,MAAM,oBAAoB,CAC/B,oBACG;AACH,QAAM,QAAQ;AACd,QAAM,aAAa,OAAO,KAAK;AAC/B,MAAI;AAEJ,QAAM,kBAAkB,QACpB,MAAM;AACJ,QAAI,CAAC,WAAW,SAAS;AACvB,UAAI,CAAC,WAAW;AACd,oBAAY,YAAY,IAAI;AAAA,MAC9B,OAAO;AACL,wBAAgB,SAAS;AAAA,UACvB;AAAA,WACC,YAAY,IAAI,IAAI,WAAW,SAAS;AAAA,QAC3C;AAAA,MACF;AAAA,IACF;AAAA,EACF,IACA;AAEJ,QAAM,gBAAgB,QAClB,MAAM;AACJ,gBAAY;AACZ,eAAW,UAAU;AAAA,EACvB,IACA;AAEJ;AAAA,IACE,MAAM,MAAM;AACV,UAAI,OAAO;AACT,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/map/hooks/use-tooltip-template.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
-import { Children } from "react";
-import { isElement } from "react-is";
+import {
+  Children,
+  isValidElement
+} from "react";
 import { DefaultTooltip } from "../components/DefaultTooltip/DefaultTooltip.js";
 function useTooltipTemplate(children, layerType) {
   let template = void 0;
   Children.forEach(children, (child) => {
-    if (isElement(child) && child.type === layerType) {
+    if (isValidElement(child) && child.type === layerType) {
       const defaultTooltipHandler = (closestPoint, layerData) => /* @__PURE__ */ jsx(DefaultTooltip, { closestPoint, layerData });
       template = isNil(child.props.children) ? defaultTooltipHandler : child.props.children;
     }