@dynatrace/strato-geo 2.13.2 → 2.15.1

package/esm/map/components/DefaultTooltip/utils/handle-copy-to-clipboard.js

@@ -1,4 +1,11 @@
-const handleCopyToClipboard = (location) => navigator.clipboard.writeText(`${location.latitude}, ${location.longitude}`);
+const handleCopyToClipboard = async (location) => {
+  try {
+    await navigator.clipboard.writeText(
+      `${location.latitude}, ${location.longitude}`
+    );
+  } catch {
+  }
+};
 export {
   handleCopyToClipboard
 };

package/esm/map/components/DefaultTooltip/utils/handle-copy-to-clipboard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/DefaultTooltip/utils/handle-copy-to-clipboard.ts"],
-  "sourcesContent": ["import type { Location } from '../../../types/location.js';\n\nexport const handleCopyToClipboard = (location: Location) =>\n  navigator.clipboard.writeText(`${location.latitude}, ${location.longitude}`);\n"],
-  "mappings": "AAEO,MAAM,wBAAwB,CAAC,aACpC,UAAU,UAAU,UAAU,GAAG,SAAS,QAAQ,KAAK,SAAS,SAAS,EAAE;",
+  "sourcesContent": ["import type { Location } from '../../../types/location.js';\n\nexport const handleCopyToClipboard = async (location: Location) => {\n  try {\n    await navigator.clipboard.writeText(\n      `${location.latitude}, ${location.longitude}`,\n    );\n  } catch {\n    // For now, we silently ignore clipboard write errors.\n  }\n};\n"],
+  "mappings": "AAEO,MAAM,wBAAwB,OAAO,aAAuB;AACjE,MAAI;AACF,UAAM,UAAU,UAAU;AAAA,MACxB,GAAG,SAAS,QAAQ,KAAK,SAAS,SAAS;AAAA,IAC7C;AAAA,EACF,QAAQ;AAAA,EAER;AACF;",
   "names": []
 }

package/esm/map/components/MapContent.js

@@ -169,6 +169,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
       setZoomState(zoomState);
     }
   };
+  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -203,6 +204,10 @@ const MapContent = forwardRef((props, forwardedRef) => {
           onZoomEnd: handleZoomEnd,
           onDrag: handleDrag,
           onDragEnd: handleDragEnd,
+          boxZoom: isZoomEnabled,
+          keyboard: isZoomEnabled,
+          scrollZoom: isZoomEnabled,
+          doubleClickZoom: isZoomEnabled,
           attributionControl: false,
           onRender: () => onRenderHandler && onRenderHandler(),
           onLoad: (e) => {

package/esm/map/components/MapContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapContent.tsx"],
-  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { useWebGLContextError } from '../hooks/use-webgl-context-error.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n}>) => {\n  const [contextLostError, setContextLostError] = useState<Error | null>(null);\n\n  useHoverInteraction();\n  useActiveInteraction();\n  useWebGLContextError(() => {\n    onContextLostError?.();\n    setContextLostError(\n      new Error(\n        'Too many active maps. This is a browser limitation. Try reducing the number of map instances.',\n      ),\n    );\n  });\n\n  if (contextLostError) {\n    throw contextLostError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions onContextLostError={onContextLostError}>\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Layer,\n  type LayerProps,\n  Map,\n  Source,\n  type ViewStateChangeEvent,\n} from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n  useState,\n} from 'react';\n\nimport { _useGraphSize as useGraphSize } from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport {\n  BASE_LAYER_FILL_ID,\n  BASE_LAYER_LINE_ID,\n  COUNTRY_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n  MAX_LATITUDE,\n  MAX_LONGITUDE,\n  MIN_LATITUDE,\n  MIN_LONGITUDE,\n  REGION_BORDER_WIDTH,\n} from '../constants.js';\nimport { useMapZoomState, useSetStateZoom } from '../store/store.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { MapDataBoundingBoxContext } from '../contexts/map-data-bounding-box.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useMapBaseLayerFeatures } from '../hooks/use-map-base-layer-features.js';\nimport { useMapConfig } from '../hooks/use-map-config.js';\nimport { useMapLoading } from '../hooks/use-map-loading.js';\nimport { useMapPerformance } from '../hooks/use-map-performance.js';\nimport { useOverlayEvents } from '../hooks/use-overlay-events.js';\nimport { useTooltipEventListeners } from '../hooks/use-tooltip-event-listeners.js';\nimport { useWebGLContextError } from '../hooks/use-webgl-context-error.js';\nimport { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type {\n  MapViewProps,\n  MapViewRef,\n  ViewStateRequired,\n} from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { getDataLayersBoundingBox } from '../utils/get-data-layers-bounding-box.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.js';\nimport { generateNewZoomState } from './toolbar/utils/zoom-state-utils.js';\n\nconst lineLayer: LayerProps = {\n  id: BASE_LAYER_LINE_ID,\n  type: 'line',\n};\n\nconst fillLayer: LayerProps = {\n  id: BASE_LAYER_FILL_ID,\n  type: 'fill',\n};\n\nconst MapSource = () => {\n  const baseLayerFeatures = useMapBaseLayerFeatures();\n  return (\n    baseLayerFeatures && (\n      <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n        <Layer\n          {...fillLayer}\n          paint={{\n            'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n          }}\n        />\n        <Layer\n          {...lineLayer}\n          type=\"line\"\n          filter={[\n            'any',\n            ['==', 'region_type', 'COUNTRY'],\n            ['==', 'region_type', 'REGION'],\n          ]}\n          paint={{\n            'line-color': getColorFromToken(DEFAULT_BOUNDARIES_BORDER_COLOR),\n            'line-width': [\n              'case',\n              ['==', ['get', 'region_type'], 'REGION'],\n              REGION_BORDER_WIDTH,\n              COUNTRY_BORDER_WIDTH,\n            ],\n          }}\n        />\n      </Source>\n    )\n  );\n};\n\nconst MapInteractions = ({\n  children,\n  onContextLostError,\n}: PropsWithChildren<{\n  onContextLostError?: () => void;\n}>) => {\n  const [contextLostError, setContextLostError] = useState<Error | null>(null);\n\n  useHoverInteraction();\n  useActiveInteraction();\n  useWebGLContextError(() => {\n    onContextLostError?.();\n    setContextLostError(\n      new Error(\n        'Too many active maps. This is a browser limitation. Try reducing the number of map instances.',\n      ),\n    );\n  });\n\n  if (contextLostError) {\n    throw contextLostError;\n  }\n\n  return children;\n};\ntype MapContentProps = MapViewProps & {\n  onMapLoad: () => void;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapContentProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    onMapLoad,\n    onContextLostError,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n  const setZoomState = useSetStateZoom();\n  const [savedInitialViewState, setSavedInitialViewState] = useState<\n    ViewStateRequired | undefined\n  >();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  const baseFeatureCollection = useMapBaseLayerFeatures();\n\n  const dataLayersBBox = getDataLayersBoundingBox(\n    children,\n    baseFeatureCollection?.features,\n  );\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n\n  const shouldRenderToolbar =\n    (!isUndefined(toolbarConfig) && !toolbarConfig.hidden) ||\n    !isUndefined(interactionsConfig);\n\n  const { height: graphHeight, width: graphWidth } = useGraphSize();\n\n  const {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom,\n    handleDrag,\n  } = useOverlayEvents();\n\n  const initialViewState = initialViewStateProp ?? dataLayersBBox;\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n  const calculatedInitialViewState = toMapBoxInitialViewState(initialViewState);\n\n  const { zoomToFitInProgress } = useMapZoomState();\n\n  const handleZoomEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const handleDragEnd = (event: ViewStateChangeEvent) => {\n    if (savedInitialViewState) {\n      const zoomState = generateNewZoomState(\n        event,\n        savedInitialViewState,\n        zoomToFitInProgress,\n      );\n\n      setZoomState(zoomState);\n    }\n  };\n\n  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={calculatedInitialViewState}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        maxBounds={[\n          [MIN_LONGITUDE, MIN_LATITUDE],\n          [MAX_LONGITUDE, MAX_LATITUDE],\n        ]}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onZoomEnd={handleZoomEnd}\n        onDrag={handleDrag}\n        onDragEnd={handleDragEnd}\n        boxZoom={isZoomEnabled}\n        keyboard={isZoomEnabled}\n        scrollZoom={isZoomEnabled}\n        doubleClickZoom={isZoomEnabled}\n        attributionControl={false}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={(e) => {\n          onMapLoad();\n          onLoadHandler && onLoadHandler();\n\n          const initialCenter = e.target.getCenter();\n\n          setSavedInitialViewState({\n            latitude: initialCenter.lat,\n            longitude: initialCenter.lng,\n            zoom: e.target.getZoom(),\n          });\n        }}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n          <MapViewImperativeHandler\n            forwardedRef={forwardedRef}\n            containerRef={mapContainerRef}\n          >\n            <MapSource />\n            {loading ? null : (\n              <>\n                <MapInteractions onContextLostError={onContextLostError}>\n                  {children}\n                </MapInteractions>\n                {shouldRenderToolbar ? <MapToolbar /> : null}\n              </>\n            )}\n          </MapViewImperativeHandler>\n        </MapDataBoundingBoxContext.Provider>\n      </Map>\n    </div>\n  );\n});\n\n(MapContent as typeof MapContent & { displayName: string }).displayName =\n  'MapContent';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/components/legend/CategoricalLegendRenderer.js

@@ -15,8 +15,8 @@ const CategoricalLegendRenderer = () => {
   const orientation = getLegendOrientation(layoutOrientation);
   const items = buildCategoricalItemsFromScale(scale);
   const truncationMode = useTruncationMode();
-  const handleHover = (items2) => {
-    updateStateSelection({ highlightedSeries: items2 });
+  const handleHover = (item) => {
+    updateStateSelection({ highlightedSeries: item });
   };
   function handleClick(items2) {
     updateStateSelection({ visible: items2 });

package/esm/map/components/legend/CategoricalLegendRenderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/legend/CategoricalLegendRenderer.tsx"],
-  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\n\nimport type { _LegendItem as LegendItem } from '@dynatrace/strato-components-preview/charts';\nimport {\n  _buildCategoricalItemsFromScale as buildCategoricalItemsFromScale,\n  _ChartLegend as ChartLegend,\n  _getLegendOrientation as getLegendOrientation,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { useColorScale } from '../../hooks/use-color-scale.js';\nimport { useTruncationMode } from '../../hooks/use-truncation-mode.js';\nimport { useSetStateSelection } from '../../store/store.js';\n\nexport const CategoricalLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const scale = useColorScale() as ScaleOrdinal<string, string>;\n  const updateStateSelection = useSetStateSelection();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildCategoricalItemsFromScale(scale);\n  const truncationMode = useTruncationMode();\n\n  const handleHover = (items?: LegendItem[]) => {\n    updateStateSelection({ highlightedSeries: items });\n  };\n\n  function handleClick(items: LegendItem[]) {\n    updateStateSelection({ visible: items });\n  }\n\n  return (\n    <ChartLegend\n      items={items}\n      orientation={orientation}\n      onClick={handleClick}\n      onHover={handleHover}\n      truncationMode={truncationMode}\n    />\n  );\n};\n"],
-  "mappings": "AA+BI;AA5BJ;AAAA,EACE,mCAAmC;AAAA,EACnC,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,OACzB;AAEP,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAE9B,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,QAAQ,cAAc;AAC5B,QAAM,uBAAuB,qBAAqB;AAClD,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,+BAA+B,KAAK;AAClD,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,cAAc,CAACA,WAAyB;AAC5C,yBAAqB,EAAE,mBAAmBA,OAAM,CAAC;AAAA,EACnD;AAEA,WAAS,YAAYA,QAAqB;AACxC,yBAAqB,EAAE,SAASA,OAAM,CAAC;AAAA,EACzC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\n\nimport type { _LegendItem as LegendItem } from '@dynatrace/strato-components-preview/charts';\nimport {\n  _buildCategoricalItemsFromScale as buildCategoricalItemsFromScale,\n  _ChartLegend as ChartLegend,\n  _getLegendOrientation as getLegendOrientation,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { useColorScale } from '../../hooks/use-color-scale.js';\nimport { useTruncationMode } from '../../hooks/use-truncation-mode.js';\nimport { useSetStateSelection } from '../../store/store.js';\n\nexport const CategoricalLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const scale = useColorScale() as ScaleOrdinal<string, string>;\n  const updateStateSelection = useSetStateSelection();\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildCategoricalItemsFromScale(scale);\n  const truncationMode = useTruncationMode();\n\n  const handleHover = (item?: LegendItem) => {\n    updateStateSelection({ highlightedSeries: item });\n  };\n\n  function handleClick(items: LegendItem[]) {\n    updateStateSelection({ visible: items });\n  }\n\n  return (\n    <ChartLegend\n      items={items}\n      orientation={orientation}\n      onClick={handleClick}\n      onHover={handleHover}\n      truncationMode={truncationMode}\n    />\n  );\n};\n"],
+  "mappings": "AA+BI;AA5BJ;AAAA,EACE,mCAAmC;AAAA,EACnC,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,OACzB;AAEP,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAE9B,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,QAAQ,cAAc;AAC5B,QAAM,uBAAuB,qBAAqB;AAClD,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,+BAA+B,KAAK;AAClD,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,cAAc,CAAC,SAAsB;AACzC,yBAAqB,EAAE,mBAAmB,KAAK,CAAC;AAAA,EAClD;AAEA,WAAS,YAAYA,QAAqB;AACxC,yBAAqB,EAAE,SAASA,OAAM,CAAC;AAAA,EACzC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
   "names": ["items"]
 }

package/esm/map/contexts/tooltip.context.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/contexts/tooltip.context.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nexport const TooltipContext = createContext<{\n  markerRef: React.RefObject<maplibregl.Marker | undefined>;\n}>({\n  markerRef: { current: undefined },\n});\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAEvB,MAAM,iBAAiB,cAE3B;AAAA,EACD,WAAW,EAAE,SAAS,OAAU;AAClC,CAAC;",
+  "sourcesContent": ["import { createContext, type RefObject } from 'react';\n\nexport const TooltipContext = createContext<{\n  markerRef: RefObject<maplibregl.Marker | undefined>;\n}>({\n  markerRef: { current: undefined },\n});\n"],
+  "mappings": "AAAA,SAAS,qBAAqC;AAEvC,MAAM,iBAAiB,cAE3B;AAAA,EACD,WAAW,EAAE,SAAS,OAAU;AAClC,CAAC;",
   "names": []
 }

package/esm/map/hooks/use-legend-interaction-highlighting.js

@@ -29,9 +29,9 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
       );
     }
     if (highlightedSeries) {
-      const highlightedSeriesNames = highlightedSeries.map((s) => s.name);
+      const highlightedSeriesName = highlightedSeries.name;
       const hoveredByLegend2 = map.querySourceFeatures(sourceId, {
-        filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+        filter: ["!in", props.valueAccessor, highlightedSeriesName]
       });
       hoveredByLegend2?.map(
         (ft) => map.setFeatureState(
@@ -42,7 +42,7 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
       if (hasAssociatedFeatures(sourceId)) {
         const associatedId = `${sourceId}-direction`;
         const hoveredByLegend3 = map.querySourceFeatures(associatedId, {
-          filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+          filter: ["!in", props.valueAccessor, highlightedSeriesName]
         });
         hoveredByLegend3?.map(
           (ft) => map.setFeatureState(

package/esm/map/hooks/use-legend-interaction-highlighting.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-legend-interaction-highlighting.ts"],
-  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport type {\n  Connection,\n  ConnectionLayerProps,\n} from '../types/connection-layer.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\nimport { hasAssociatedFeatures } from '../utils/associated-features.js';\n\nexport const useLegendInteractionHighlighting = <\n  L extends Location,\n  C extends Connection,\n  R extends Record<string, unknown>,\n>(\n  props:\n    | DotLayerProps<L>\n    | BubbleLayerProps<L>\n    | ChoroplethLayerProps<R>\n    | ConnectionLayerProps<C>,\n  sourceId: string,\n) => {\n  const { highlightedSeries } = useMapSelectionState();\n\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    // Before highlight, we need to remove previous state (all highlighted symbols)\n    const hoveredByLegend = map.querySourceFeatures(sourceId, {\n      filter: ['all'],\n    });\n    hoveredByLegend?.map((ft) =>\n      map.setFeatureState(\n        { source: sourceId, id: ft.id },\n        { legendHover: true },\n      ),\n    );\n\n    if (hasAssociatedFeatures(sourceId)) {\n      const associatedId = `${sourceId}-direction`;\n\n      const hoveredByLegend = map.querySourceFeatures(associatedId, {\n        filter: ['all'],\n      });\n\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: associatedId, id: ft.id },\n          { legendHover: true },\n        ),\n      );\n    }\n\n    if (highlightedSeries) {\n      const highlightedSeriesNames = highlightedSeries.map((s) => s.name);\n      const hoveredByLegend = map.querySourceFeatures(sourceId, {\n        filter: ['!in', props.valueAccessor, ...highlightedSeriesNames],\n      });\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: sourceId, id: ft.id },\n          { legendHover: false },\n        ),\n      );\n\n      if (hasAssociatedFeatures(sourceId)) {\n        const associatedId = `${sourceId}-direction`;\n\n        const hoveredByLegend = map.querySourceFeatures(associatedId, {\n          filter: ['!in', props.valueAccessor, ...highlightedSeriesNames],\n        });\n\n        hoveredByLegend?.map((ft) =>\n          map.setFeatureState(\n            { source: associatedId, id: ft.id },\n            { legendHover: false },\n          ),\n        );\n      }\n    } else {\n      hoveredByLegend?.map((ft) =>\n        map.removeFeatureState({ source: sourceId, id: ft.id }, 'legendHover'),\n      );\n    }\n  }\n};\n"],
-  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAOjC,SAAS,6BAA6B;AAE/B,MAAM,mCAAmC,CAK9C,OAKA,aACG;AACH,QAAM,EAAE,kBAAkB,IAAI,qBAAqB;AAEnD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAEhD,UAAM,kBAAkB,IAAI,oBAAoB,UAAU;AAAA,MACxD,QAAQ,CAAC,KAAK;AAAA,IAChB,CAAC;AACD,qBAAiB;AAAA,MAAI,CAAC,OACpB,IAAI;AAAA,QACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,QAC9B,EAAE,aAAa,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,QAAI,sBAAsB,QAAQ,GAAG;AACnC,YAAM,eAAe,GAAG,QAAQ;AAEhC,YAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,QAC5D,QAAQ,CAAC,KAAK;AAAA,MAChB,CAAC;AAED,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,UAClC,EAAE,aAAa,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAEA,QAAI,mBAAmB;AACrB,YAAM,yBAAyB,kBAAkB,IAAI,CAAC,MAAM,EAAE,IAAI;AAClE,YAAMA,mBAAkB,IAAI,oBAAoB,UAAU;AAAA,QACxD,QAAQ,CAAC,OAAO,MAAM,eAAe,GAAG,sBAAsB;AAAA,MAChE,CAAC;AACD,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,UAC9B,EAAE,aAAa,MAAM;AAAA,QACvB;AAAA,MACF;AAEA,UAAI,sBAAsB,QAAQ,GAAG;AACnC,cAAM,eAAe,GAAG,QAAQ;AAEhC,cAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,UAC5D,QAAQ,CAAC,OAAO,MAAM,eAAe,GAAG,sBAAsB;AAAA,QAChE,CAAC;AAED,QAAAA,kBAAiB;AAAA,UAAI,CAAC,OACpB,IAAI;AAAA,YACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,YAClC,EAAE,aAAa,MAAM;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AACL,uBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI,mBAAmB,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG,GAAG,aAAa;AAAA,MACvE;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isUndefined } from 'lodash-es';\n\nimport { useMapSelectionState } from '../store/selectors.js';\nimport type { BubbleLayerProps } from '../types/bubble-layer.js';\nimport type { ChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport { isLegendColoring } from '../types/coloring.js';\nimport type {\n  Connection,\n  ConnectionLayerProps,\n} from '../types/connection-layer.js';\nimport type { DotLayerProps } from '../types/dot-layer.js';\nimport type { Location } from '../types/location.js';\nimport { hasAssociatedFeatures } from '../utils/associated-features.js';\n\nexport const useLegendInteractionHighlighting = <\n  L extends Location,\n  C extends Connection,\n  R extends Record<string, unknown>,\n>(\n  props:\n    | DotLayerProps<L>\n    | BubbleLayerProps<L>\n    | ChoroplethLayerProps<R>\n    | ConnectionLayerProps<C>,\n  sourceId: string,\n) => {\n  const { highlightedSeries } = useMapSelectionState();\n\n  const { current: map } = useMap();\n\n  if (isLegendColoring(props) && !isUndefined(map)) {\n    // Before highlight, we need to remove previous state (all highlighted symbols)\n    const hoveredByLegend = map.querySourceFeatures(sourceId, {\n      filter: ['all'],\n    });\n    hoveredByLegend?.map((ft) =>\n      map.setFeatureState(\n        { source: sourceId, id: ft.id },\n        { legendHover: true },\n      ),\n    );\n\n    if (hasAssociatedFeatures(sourceId)) {\n      const associatedId = `${sourceId}-direction`;\n\n      const hoveredByLegend = map.querySourceFeatures(associatedId, {\n        filter: ['all'],\n      });\n\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: associatedId, id: ft.id },\n          { legendHover: true },\n        ),\n      );\n    }\n\n    if (highlightedSeries) {\n      const highlightedSeriesName = highlightedSeries.name;\n      const hoveredByLegend = map.querySourceFeatures(sourceId, {\n        filter: ['!in', props.valueAccessor, highlightedSeriesName],\n      });\n      hoveredByLegend?.map((ft) =>\n        map.setFeatureState(\n          { source: sourceId, id: ft.id },\n          { legendHover: false },\n        ),\n      );\n\n      if (hasAssociatedFeatures(sourceId)) {\n        const associatedId = `${sourceId}-direction`;\n\n        const hoveredByLegend = map.querySourceFeatures(associatedId, {\n          filter: ['!in', props.valueAccessor, highlightedSeriesName],\n        });\n\n        hoveredByLegend?.map((ft) =>\n          map.setFeatureState(\n            { source: associatedId, id: ft.id },\n            { legendHover: false },\n          ),\n        );\n      }\n    } else {\n      hoveredByLegend?.map((ft) =>\n        map.removeFeatureState({ source: sourceId, id: ft.id }, 'legendHover'),\n      );\n    }\n  }\n};\n"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAGrC,SAAS,wBAAwB;AAOjC,SAAS,6BAA6B;AAE/B,MAAM,mCAAmC,CAK9C,OAKA,aACG;AACH,QAAM,EAAE,kBAAkB,IAAI,qBAAqB;AAEnD,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAEhC,MAAI,iBAAiB,KAAK,KAAK,CAAC,YAAY,GAAG,GAAG;AAEhD,UAAM,kBAAkB,IAAI,oBAAoB,UAAU;AAAA,MACxD,QAAQ,CAAC,KAAK;AAAA,IAChB,CAAC;AACD,qBAAiB;AAAA,MAAI,CAAC,OACpB,IAAI;AAAA,QACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,QAC9B,EAAE,aAAa,KAAK;AAAA,MACtB;AAAA,IACF;AAEA,QAAI,sBAAsB,QAAQ,GAAG;AACnC,YAAM,eAAe,GAAG,QAAQ;AAEhC,YAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,QAC5D,QAAQ,CAAC,KAAK;AAAA,MAChB,CAAC;AAED,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,UAClC,EAAE,aAAa,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAEA,QAAI,mBAAmB;AACrB,YAAM,wBAAwB,kBAAkB;AAChD,YAAMA,mBAAkB,IAAI,oBAAoB,UAAU;AAAA,QACxD,QAAQ,CAAC,OAAO,MAAM,eAAe,qBAAqB;AAAA,MAC5D,CAAC;AACD,MAAAA,kBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG;AAAA,UAC9B,EAAE,aAAa,MAAM;AAAA,QACvB;AAAA,MACF;AAEA,UAAI,sBAAsB,QAAQ,GAAG;AACnC,cAAM,eAAe,GAAG,QAAQ;AAEhC,cAAMA,mBAAkB,IAAI,oBAAoB,cAAc;AAAA,UAC5D,QAAQ,CAAC,OAAO,MAAM,eAAe,qBAAqB;AAAA,QAC5D,CAAC;AAED,QAAAA,kBAAiB;AAAA,UAAI,CAAC,OACpB,IAAI;AAAA,YACF,EAAE,QAAQ,cAAc,IAAI,GAAG,GAAG;AAAA,YAClC,EAAE,aAAa,MAAM;AAAA,UACvB;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AACL,uBAAiB;AAAA,QAAI,CAAC,OACpB,IAAI,mBAAmB,EAAE,QAAQ,UAAU,IAAI,GAAG,GAAG,GAAG,aAAa;AAAA,MACvE;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["hoveredByLegend"]
 }

package/esm/map/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/index.ts"],
-  "sourcesContent": ["export { ChartInteractions } from './slots/ChartInteractions.js';\nexport { MapView } from './MapView.js';\nexport { ConnectionLayer } from './slots/ConnectionLayer.js';\nexport { DotLayer } from './slots/DotLayer.js';\nexport { BubbleLayer } from './slots/BubbleLayer.js';\nexport { BaseLayer } from './slots/BaseLayer.js';\nexport { ChoroplethLayer } from './slots/ChoroplethLayer.js';\nexport { Tooltip, TooltipAtoms } from './slots/Tooltip.js';\nexport { DownloadCSV } from './slots/DownloadCSV.js';\n\nexport type {\n  MapViewProps,\n  MapViewBaseProps,\n  MapViewUncontrolledProps,\n  MapViewControlledProps,\n  DisallowAll,\n  ViewState,\n  MapViewRef,\n} from './types/map-view.js';\n\nexport type { BaseLayerProps } from './types/base-layer.js';\n\nexport type {\n  Connection,\n  ConnectionLayerBaseProps,\n  ConnectionLayerProps,\n  CurvedLine,\n} from './types/connection-layer.js';\n\nexport type { DotLayerBaseProps, DotLayerProps } from './types/dot-layer.js';\n\nexport type {\n  BubbleLayerBaseProps,\n  BubbleLayerProps,\n  ScaleNoneProps,\n  ScaleRadiusProps,\n} from './types/bubble-layer.js';\n\nexport type {\n  ChoroplethLayerBaseProps,\n  ChoroplethLayerProps,\n} from './types/choropleth-layer.js';\n\nexport type { Location } from './types/location.js';\nexport type { MapShape } from './types/shapes.js';\nexport type {\n  ChartInteractionsProps,\n  MapToolbarSlotProps,\n} from './types/toolbar.js';\nexport type { ErrorStateSlotProps } from './slots/states/ErrorStateSlot.js';\n\nexport type {\n  BaseLegendProps,\n  CategoricalLegendProps,\n  SequentialLegendProps,\n  ThresholdLegendProps,\n} from './types/legend.js';\n\nexport type {\n  LocationColorProps,\n  LegendColorLayerProps,\n  ChoroplethCustomColorProps,\n  ConnectionColorProps,\n} from './types/coloring.js';\n\nexport { SequentialLegend } from './slots/SequentialLegend.js';\nexport { ThresholdLegend } from './slots/ThresholdLegend.js';\nexport { CategoricalLegend } from './slots/CategoricalLegend.js';\n\nexport type {\n  BubbleLayerTooltipHandler,\n  BubbleLayerTooltipHandlerProps,\n  DotLayerTooltipHandler,\n  DotLayerTooltipHandlerProps,\n  ConnectionLayerTooltipHandler,\n  ConnectionLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandler,\n  ChartTooltip,\n  DotLayerTooltipData,\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  ChoroplethLayerTooltipData,\n} from './types/tooltip.js';\n\nexport { getAllCountries } from './utils/get-all-countries.js';\n"],
-  "mappings": "AAAA,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,SAAS,oBAAoB;AACtC,SAAS,mBAAmB;AAyD5B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAkBlC,SAAS,uBAAuB;",
+  "sourcesContent": ["/* eslint-disable-next-line @typescript-eslint/no-deprecated */\nexport { ChartInteractions } from './slots/ChartInteractions.js';\nexport { MapView } from './MapView.js';\nexport { ConnectionLayer } from './slots/ConnectionLayer.js';\nexport { DotLayer } from './slots/DotLayer.js';\nexport { BubbleLayer } from './slots/BubbleLayer.js';\nexport { BaseLayer } from './slots/BaseLayer.js';\nexport { ChoroplethLayer } from './slots/ChoroplethLayer.js';\nexport { Tooltip, TooltipAtoms } from './slots/Tooltip.js';\nexport { DownloadCSV } from './slots/DownloadCSV.js';\n\nexport type {\n  MapViewProps,\n  MapViewBaseProps,\n  MapViewUncontrolledProps,\n  MapViewControlledProps,\n  DisallowAll,\n  ViewState,\n  MapViewRef,\n} from './types/map-view.js';\n\nexport type { BaseLayerProps } from './types/base-layer.js';\n\nexport type { MapViewZoomSlotProps } from './slots/Zoom.js';\n\nexport type {\n  Connection,\n  ConnectionLayerBaseProps,\n  ConnectionLayerProps,\n  CurvedLine,\n} from './types/connection-layer.js';\n\nexport type { DotLayerBaseProps, DotLayerProps } from './types/dot-layer.js';\n\nexport type {\n  BubbleLayerBaseProps,\n  BubbleLayerProps,\n  ScaleNoneProps,\n  ScaleRadiusProps,\n} from './types/bubble-layer.js';\n\nexport type {\n  ChoroplethLayerBaseProps,\n  ChoroplethLayerProps,\n} from './types/choropleth-layer.js';\n\nexport type { Location } from './types/location.js';\nexport type { MapShape } from './types/shapes.js';\nexport type {\n  ChartInteractionsProps,\n  MapToolbarSlotProps,\n} from './types/toolbar.js';\nexport type { ErrorStateSlotProps } from './slots/states/ErrorStateSlot.js';\n\nexport type {\n  BaseLegendProps,\n  CategoricalLegendProps,\n  SequentialLegendProps,\n  ThresholdLegendProps,\n} from './types/legend.js';\n\nexport type {\n  LocationColorProps,\n  LegendColorLayerProps,\n  ChoroplethCustomColorProps,\n  ConnectionColorProps,\n} from './types/coloring.js';\n\nexport { SequentialLegend } from './slots/SequentialLegend.js';\nexport { ThresholdLegend } from './slots/ThresholdLegend.js';\nexport { CategoricalLegend } from './slots/CategoricalLegend.js';\n\nexport type {\n  BubbleLayerTooltipHandler,\n  BubbleLayerTooltipHandlerProps,\n  DotLayerTooltipHandler,\n  DotLayerTooltipHandlerProps,\n  ConnectionLayerTooltipHandler,\n  ConnectionLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandlerProps,\n  ChoroplethLayerTooltipHandler,\n  ChartTooltip,\n  DotLayerTooltipData,\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  ChoroplethLayerTooltipData,\n} from './types/tooltip.js';\n\nexport { getAllCountries } from './utils/get-all-countries.js';\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,SAAS,oBAAoB;AACtC,SAAS,mBAAmB;AA2D5B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAkBlC,SAAS,uBAAuB;",
   "names": []
 }

package/esm/map/slots/ChartInteractions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/slots/ChartInteractions.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { Zoom } from './Zoom.js';\nimport { ZoomToFit } from './ZoomToFit.js';\nimport type { ChartInteractionsProps } from '../types/toolbar.js';\n\n/**\n * ChartInteractions slot component.\n */\nconst ChartInteractionsRoot = (\n  props: PropsWithChildren<ChartInteractionsProps>,\n) => null;\n\nChartInteractionsRoot['displayName'] = 'ChartInteractions';\n\n/**\n * ChartInteractions interactions slot component\n * @public\n */\nexport const ChartInteractions = Object.assign(ChartInteractionsRoot, {\n  Zoom,\n  ZoomToFit,\n});\n"],
-  "mappings": "AAEA,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAM1B,MAAM,wBAAwB,CAC5B,UACG;AAEL,sBAAsB,aAAa,IAAI;AAMhC,MAAM,oBAAoB,OAAO,OAAO,uBAAuB;AAAA,EACpE;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { Zoom } from './Zoom.js';\nimport { ZoomToFit } from './ZoomToFit.js';\nimport type { ChartInteractionsProps } from '../types/toolbar.js';\n\n/**\n * ChartInteractions slot component.\n */\nconst ChartInteractionsRoot = (\n  props: PropsWithChildren<ChartInteractionsProps>,\n) => null;\n\nChartInteractionsRoot['displayName'] = 'ChartInteractions';\n\n/**\n * ChartInteractions interactions slot component. @deprecated ChartInteractions is deprecated, please use `<[MapView].Zoom/>` instead.\n * @public\n */\n\nexport const ChartInteractions = Object.assign(ChartInteractionsRoot, {\n  Zoom,\n  ZoomToFit,\n});\n"],
+  "mappings": "AAEA,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAM1B,MAAM,wBAAwB,CAC5B,UACG;AAEL,sBAAsB,aAAa,IAAI;AAOhC,MAAM,oBAAoB,OAAO,OAAO,uBAAuB;AAAA,EACpE;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/map/slots/Zoom.js

@@ -1,4 +1,4 @@
-const Zoom = () => null;
+const Zoom = (props) => null;
 Zoom["displayName"] = "Zoom";
 export {
   Zoom

package/esm/map/slots/Zoom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/slots/Zoom.tsx"],
-  "sourcesContent": ["/**\n * Zoom slot component.\n */\nexport const Zoom = () => null;\n\nZoom['displayName'] = 'Zoom';\n"],
-  "mappings": "AAGO,MAAM,OAAO,MAAM;AAE1B,KAAK,aAAa,IAAI;",
+  "sourcesContent": ["/**\n * Props for the Zoom slot component.\n * @public\n */\nexport interface MapViewZoomSlotProps {\n  /**\n   * Whether the zoom is disabled.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Zoom slot component.\n */\nexport const Zoom = (props: MapViewZoomSlotProps) => null;\n\nZoom['displayName'] = 'Zoom';\n"],
+  "mappings": "AAcO,MAAM,OAAO,CAAC,UAAgC;AAErD,KAAK,aAAa,IAAI;",
   "names": []
 }

package/esm/map/utils/iterate-config-slots.js

@@ -1,4 +1,4 @@
-import { isEmpty } from "lodash-es";
+import { isEmpty, isUndefined } from "lodash-es";
 import { Children } from "react";
 import { ChartToolbar } from "@dynatrace/strato-components-preview/charts";
 import {
@@ -97,7 +97,7 @@ const iterateConfigSlots = (children, legendDomain) => {
     } else if (isSlot(child, Zoom)) {
       slotMapToolbarConfig = {
         ...slotMapToolbarConfig,
-        zoom: { enabled: true }
+        zoom: { enabled: child.props.disabled !== true }
       };
     } else if (isSlot(child, BaseLayer)) {
       slots = {
@@ -109,6 +109,10 @@ const iterateConfigSlots = (children, legendDomain) => {
       };
     }
   });
+  const shouldEnableDefaultZoom = isUndefined(slotMapToolbarConfig.zoom) && !isEmpty(slotMapToolbarConfig) && slots.toolbar?.hidden !== true;
+  if (shouldEnableDefaultZoom) {
+    slotMapToolbarConfig.zoom = { enabled: true };
+  }
   if (!isEmpty(slotMapToolbarConfig)) {
     slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };
   }

package/esm/map/utils/iterate-config-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/iterate-config-slots.ts"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport { Children, type ReactNode } from 'react';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { isSlot } from './is-slot.js';\nimport { replaceInfiniteValuesInRanges } from './replace-infinite-values-in-ranges.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { DownloadCSV } from '../slots/DownloadCSV.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport { sanitizeProps, Toolbar } from '../slots/Toolbar.js';\nimport { Zoom } from '../slots/Zoom.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type {\n  ChartInteractionsConfig,\n  MapToolbarConfig,\n} from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @param legendDomain - Domain containing min and max value relevant for legend\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (\n  children: ReactNode,\n  legendDomain: [number, number],\n) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  let slotMapToolbarConfig: MapToolbarConfig = {};\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, ChartInteractions)) {\n      const { children, ...previousInteractions } = child.props;\n\n      const interactions = iterateChartInteractionsSlots(children);\n\n      slots = {\n        ...slots,\n        interactions: {\n          ...previousInteractions,\n          ...interactions,\n        },\n      };\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n      const childrenToolbar = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...toolbar,\n          ...childrenToolbar,\n        },\n      };\n    } else if (isSlot(child, SequentialLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'sequential',\n          colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          min: child.props.min ?? legendDomain[0],\n          max: child.props.max ?? legendDomain[1],\n        },\n      };\n    } else if (isSlot(child, CategoricalLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'categorical',\n          position: DEFAULT_MAP_POSITION,\n          ...child.props,\n        },\n      };\n    } else if (isSlot(child, ThresholdLegend)) {\n      const getDomainValue = (index: number, legendDomainValue: number) =>\n        Number.isFinite(legendDomainValue)\n          ? legendDomainValue\n          : child.props.ranges?.at(index)?.to ?? legendDomainValue;\n\n      const ranges = replaceInfiniteValuesInRanges(child.props.ranges, [\n        getDomainValue(0, legendDomain[0]),\n        getDomainValue(-1, legendDomain[1]),\n      ]);\n\n      slots = {\n        ...slots,\n        legend: {\n          type: 'threshold',\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          ranges,\n        },\n      };\n    } else if (isSlot(child, Toolbar)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        ...sanitizeProps(child.props),\n      };\n    } else if (isSlot(child, DownloadCSV)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        downloadCSV: { enabled: true },\n      };\n    } else if (isSlot(child, Zoom)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        zoom: { enabled: true },\n      };\n    } else if (isSlot(child, BaseLayer)) {\n      slots = {\n        ...slots,\n        baseLayer: {\n          ...slots.baseLayer,\n          ...child.props,\n        },\n      };\n    }\n  });\n  if (!isEmpty(slotMapToolbarConfig)) {\n    slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };\n  }\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isSlot(childInteractions, ChartInteractions.Zoom)) {\n      interactions = { ...interactions, zoom: { enabled: true } };\n    } else if (isSlot(childInteractions, ChartInteractions.ZoomToFit)) {\n      interactions = { ...interactions, zoomToFit: { enabled: true } };\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode) => {\n  let toolbar = {};\n\n  Children.forEach(children, (childToolbar) => {\n    if (isSlot(childToolbar, ChartToolbar.DownloadData)) {\n      toolbar = {\n        ...toolbar,\n        downloadCSV: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty, isUndefined } from 'lodash-es';\nimport { Children, type ReactNode } from 'react';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { isSlot } from './is-slot.js';\nimport { replaceInfiniteValuesInRanges } from './replace-infinite-values-in-ranges.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { DownloadCSV } from '../slots/DownloadCSV.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport { sanitizeProps, Toolbar } from '../slots/Toolbar.js';\nimport { Zoom } from '../slots/Zoom.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type {\n  ChartInteractionsConfig,\n  MapToolbarConfig,\n} from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @param legendDomain - Domain containing min and max value relevant for legend\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (\n  children: ReactNode,\n  legendDomain: [number, number],\n) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  let slotMapToolbarConfig: MapToolbarConfig = {};\n\n  Children.forEach(children, (child) => {\n    /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n    if (isSlot(child, ChartInteractions)) {\n      const { children, ...previousInteractions } = child.props;\n\n      const interactions = iterateChartInteractionsSlots(children);\n\n      slots = {\n        ...slots,\n        interactions: {\n          ...previousInteractions,\n          ...interactions,\n        },\n      };\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n      const childrenToolbar = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...toolbar,\n          ...childrenToolbar,\n        },\n      };\n    } else if (isSlot(child, SequentialLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'sequential',\n          colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          min: child.props.min ?? legendDomain[0],\n          max: child.props.max ?? legendDomain[1],\n        },\n      };\n    } else if (isSlot(child, CategoricalLegend)) {\n      slots = {\n        ...slots,\n        legend: {\n          type: 'categorical',\n          position: DEFAULT_MAP_POSITION,\n          ...child.props,\n        },\n      };\n    } else if (isSlot(child, ThresholdLegend)) {\n      const getDomainValue = (index: number, legendDomainValue: number) =>\n        Number.isFinite(legendDomainValue)\n          ? legendDomainValue\n          : child.props.ranges?.at(index)?.to ?? legendDomainValue;\n\n      const ranges = replaceInfiniteValuesInRanges(child.props.ranges, [\n        getDomainValue(0, legendDomain[0]),\n        getDomainValue(-1, legendDomain[1]),\n      ]);\n\n      slots = {\n        ...slots,\n        legend: {\n          type: 'threshold',\n          position: DEFAULT_MAP_POSITION,\n          ratio: DEFAULT_MAP_LEGEND_RATIO,\n          ...child.props,\n          ranges,\n        },\n      };\n    } else if (isSlot(child, Toolbar)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        ...sanitizeProps(child.props),\n      };\n    } else if (isSlot(child, DownloadCSV)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        downloadCSV: { enabled: true },\n      };\n    } else if (isSlot(child, Zoom)) {\n      slotMapToolbarConfig = {\n        ...slotMapToolbarConfig,\n        zoom: { enabled: child.props.disabled !== true },\n      };\n    } else if (isSlot(child, BaseLayer)) {\n      slots = {\n        ...slots,\n        baseLayer: {\n          ...slots.baseLayer,\n          ...child.props,\n        },\n      };\n    }\n  });\n\n  // Enable zoom by default if toolbar config exists, Zoom is not set, and toolbar is visible\n  const shouldEnableDefaultZoom =\n    isUndefined(slotMapToolbarConfig.zoom) &&\n    !isEmpty(slotMapToolbarConfig) &&\n    slots.toolbar?.hidden !== true;\n\n  if (shouldEnableDefaultZoom) {\n    slotMapToolbarConfig.zoom = { enabled: true };\n  }\n\n  if (!isEmpty(slotMapToolbarConfig)) {\n    slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };\n  }\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: ReactNode) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  Children.forEach(children, (childInteractions) => {\n    /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n    if (isSlot(childInteractions, ChartInteractions.Zoom)) {\n      interactions = { ...interactions, zoom: { enabled: true } };\n      /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n    } else if (isSlot(childInteractions, ChartInteractions.ZoomToFit)) {\n      interactions = { ...interactions, zoomToFit: { enabled: true } };\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode) => {\n  let toolbar = {};\n\n  Children.forEach(children, (childToolbar) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if (isSlot(childToolbar, ChartToolbar.DownloadData)) {\n      toolbar = {\n        ...toolbar,\n        downloadCSV: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
+  "mappings": "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",
   "names": ["children"]
 }

package/map/MapView.d.ts

@@ -16,7 +16,7 @@ export declare const MapView: ((props: PropsWithChildren<MapViewProps> & import(
         displayName: string;
     };
     Zoom: {
-        (): null;
+        (props: import("./slots/Zoom.js").MapViewZoomSlotProps): null;
         displayName: string;
     };
 };

package/map/components/DefaultTooltip/utils/handle-copy-to-clipboard.js

@@ -21,4 +21,11 @@ __export(handle_copy_to_clipboard_exports, {
   handleCopyToClipboard: () => handleCopyToClipboard
 });
 module.exports = __toCommonJS(handle_copy_to_clipboard_exports);
-const handleCopyToClipboard = (location) => navigator.clipboard.writeText(`${location.latitude}, ${location.longitude}`);
+const handleCopyToClipboard = async (location) => {
+  try {
+    await navigator.clipboard.writeText(
+      `${location.latitude}, ${location.longitude}`
+    );
+  } catch {
+  }
+};

package/map/components/MapContent.js

@@ -172,6 +172,7 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
       setZoomState(zoomState);
     }
   };
+  const isZoomEnabled = toolbarConfig?.zoom?.enabled !== false;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -206,6 +207,10 @@ const MapContent = (0, import_react.forwardRef)((props, forwardedRef) => {
           onZoomEnd: handleZoomEnd,
           onDrag: handleDrag,
           onDragEnd: handleDragEnd,
+          boxZoom: isZoomEnabled,
+          keyboard: isZoomEnabled,
+          scrollZoom: isZoomEnabled,
+          doubleClickZoom: isZoomEnabled,
           attributionControl: false,
           onRender: () => onRenderHandler && onRenderHandler(),
           onLoad: (e) => {

package/map/components/legend/CategoricalLegendRenderer.js

@@ -33,8 +33,8 @@ const CategoricalLegendRenderer = () => {
   const orientation = (0, import_charts._getLegendOrientation)(layoutOrientation);
   const items = (0, import_charts._buildCategoricalItemsFromScale)(scale);
   const truncationMode = (0, import_use_truncation_mode.useTruncationMode)();
-  const handleHover = (items2) => {
-    updateStateSelection({ highlightedSeries: items2 });
+  const handleHover = (item) => {
+    updateStateSelection({ highlightedSeries: item });
   };
   function handleClick(items2) {
     updateStateSelection({ visible: items2 });

package/map/contexts/tooltip.context.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 export declare const TooltipContext: import("react").Context<{
-    markerRef: React.RefObject<maplibregl.Marker | undefined>;
+    markerRef: RefObject<maplibregl.Marker | undefined>;
 }>;

package/map/hooks/use-legend-interaction-highlighting.js

@@ -52,9 +52,9 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
       );
     }
     if (highlightedSeries) {
-      const highlightedSeriesNames = highlightedSeries.map((s) => s.name);
+      const highlightedSeriesName = highlightedSeries.name;
       const hoveredByLegend2 = map.querySourceFeatures(sourceId, {
-        filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+        filter: ["!in", props.valueAccessor, highlightedSeriesName]
       });
       hoveredByLegend2?.map(
         (ft) => map.setFeatureState(
@@ -65,7 +65,7 @@ const useLegendInteractionHighlighting = (props, sourceId) => {
       if ((0, import_associated_features.hasAssociatedFeatures)(sourceId)) {
         const associatedId = `${sourceId}-direction`;
         const hoveredByLegend3 = map.querySourceFeatures(associatedId, {
-          filter: ["!in", props.valueAccessor, ...highlightedSeriesNames]
+          filter: ["!in", props.valueAccessor, highlightedSeriesName]
         });
         hoveredByLegend3?.map(
           (ft) => map.setFeatureState(

package/map/index.d.ts

@@ -9,6 +9,7 @@ export { Tooltip, TooltipAtoms } from './slots/Tooltip.js';
 export { DownloadCSV } from './slots/DownloadCSV.js';
 export type { MapViewProps, MapViewBaseProps, MapViewUncontrolledProps, MapViewControlledProps, DisallowAll, ViewState, MapViewRef, } from './types/map-view.js';
 export type { BaseLayerProps } from './types/base-layer.js';
+export type { MapViewZoomSlotProps } from './slots/Zoom.js';
 export type { Connection, ConnectionLayerBaseProps, ConnectionLayerProps, CurvedLine, } from './types/connection-layer.js';
 export type { DotLayerBaseProps, DotLayerProps } from './types/dot-layer.js';
 export type { BubbleLayerBaseProps, BubbleLayerProps, ScaleNoneProps, ScaleRadiusProps, } from './types/bubble-layer.js';

package/map/slots/ChartInteractions.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import type { ChartInteractionsProps } from '../types/toolbar.js';
 /**
- * ChartInteractions interactions slot component
+ * ChartInteractions interactions slot component. @deprecated ChartInteractions is deprecated, please use `<[MapView].Zoom/>` instead.
  * @public
  */
 export declare const ChartInteractions: {
@@ -9,7 +9,7 @@ export declare const ChartInteractions: {
     displayName: string;
 } & {
     Zoom: {
-        (): null;
+        (props: import("./Zoom.js").MapViewZoomSlotProps): null;
         displayName: string;
     };
     ZoomToFit: {

package/map/slots/Zoom.d.ts

@@ -1,7 +1,17 @@
+/**
+ * Props for the Zoom slot component.
+ * @public
+ */
+export interface MapViewZoomSlotProps {
+    /**
+     * Whether the zoom is disabled.
+     */
+    disabled?: boolean;
+}
 /**
  * Zoom slot component.
  */
 export declare const Zoom: {
-    (): null;
+    (props: MapViewZoomSlotProps): null;
     displayName: string;
 };

package/map/slots/Zoom.js

@@ -21,5 +21,5 @@ __export(Zoom_exports, {
   Zoom: () => Zoom
 });
 module.exports = __toCommonJS(Zoom_exports);
-const Zoom = () => null;
+const Zoom = (props) => null;
 Zoom["displayName"] = "Zoom";

package/map/types/state.d.ts

@@ -1,7 +1,7 @@
 import type { LngLat } from 'maplibre-gl';
 import type { _LegendItem as LegendItem } from '@dynatrace/strato-components-preview/charts';
 export interface MapSelectionState {
-    highlightedSeries: LegendItem[] | undefined;
+    highlightedSeries: LegendItem | undefined;
     visible: LegendItem[] | undefined;
 }
 export interface MapTooltipState<T> {

package/map/utils/iterate-config-slots.js

@@ -115,7 +115,7 @@ const iterateConfigSlots = (children, legendDomain) => {
     } else if ((0, import_is_slot.isSlot)(child, import_Zoom.Zoom)) {
       slotMapToolbarConfig = {
         ...slotMapToolbarConfig,
-        zoom: { enabled: true }
+        zoom: { enabled: child.props.disabled !== true }
       };
     } else if ((0, import_is_slot.isSlot)(child, import_BaseLayer.BaseLayer)) {
       slots = {
@@ -127,6 +127,10 @@ const iterateConfigSlots = (children, legendDomain) => {
       };
     }
   });
+  const shouldEnableDefaultZoom = (0, import_lodash_es.isUndefined)(slotMapToolbarConfig.zoom) && !(0, import_lodash_es.isEmpty)(slotMapToolbarConfig) && slots.toolbar?.hidden !== true;
+  if (shouldEnableDefaultZoom) {
+    slotMapToolbarConfig.zoom = { enabled: true };
+  }
   if (!(0, import_lodash_es.isEmpty)(slotMapToolbarConfig)) {
     slots.toolbar = { ...slots.toolbar, ...slotMapToolbarConfig };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-geo",
-  "version": "2.13.2",
+  "version": "2.15.1",
   "private": false,
   "license": "Apache-2.0",
   "keywords": [
@@ -42,26 +42,26 @@
     "@turf/midpoint": "^6.5.0",
     "@turf/projection": "^6.5.0",
     "@turf/rhumb-bearing": "^6.5.0",
-    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vis.gl/react-maplibre": "^8.0.0",
     "d3-array": "^3.2.4",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
-    "maplibre-gl": ">=5.0.0 <5.12.0"
+    "maplibre-gl": "~5.16.0"
   },
   "peerDependencies": {
-    "@dynatrace-sdk/client-classic-environment-v2": "^3.7.3",
+    "@dynatrace-sdk/client-classic-environment-v2": "^3.7.3 || ^4.0.0 || ^5.0.0",
     "@dynatrace-sdk/client-platform-management-service": "^1.7.0",
     "@dynatrace-sdk/units": "^1.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-intl": "^6.0.8 || ^7.0.0",
     "react-is": "^18.0.0",
-    "@dynatrace/strato-components": "^1.15.0",
-    "@dynatrace/strato-components-preview": "^2.13.2",
-    "@dynatrace/strato-design-tokens": "^1.3.0",
-    "@dynatrace/strato-icons": "^1.11.1"
+    "@dynatrace/strato-components": "^1.16.1",
+    "@dynatrace/strato-components-preview": "^2.15.1",
+    "@dynatrace/strato-design-tokens": "^1.3.1",
+    "@dynatrace/strato-icons": "^1.12.0"
   },
   "sideEffects": [
     "./map/styles/react-mapgl-styles.css",