@dynatrace/strato-geo 0.11.53 → 0.11.73

package/esm/map/MapView.js

@@ -7,20 +7,24 @@ import {
 import { MapLegendRenderer } from "./components/legend/MapLegendRenderer.js";
 import { MapContent } from "./components/MapContent.js";
 import { MapUnavailable } from "./components/MapUnavailable.js";
-import { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from "./constants.js";
+import {
+  DEFAULT_LEGEND_SIZES,
+  DEFAULT_MAP_HEIGHT,
+  DEFAULT_TRUNCATION_MODE
+} from "./constants.js";
+import { FormatterContext } from "./contexts/formatter.context.js";
 import { LayerIdsContext } from "./contexts/layer-ids.context.js";
 import { MapBaseLayerFeaturesContext } from "./contexts/map-base-layer.context.js";
 import { MapConfigurationContext } from "./contexts/map-configuration.context.js";
-import { MapDataBoundingBoxContext } from "./contexts/map-data-bounding-box.context.js";
 import { MapLoadingContext } from "./contexts/map-loading.context.js";
 import { MapRawDataContext } from "./contexts/map-raw-data.context.js";
+import { MapTruncationModeContext } from "./contexts/map-truncation-mode.context.js";
 import { useLoadMapBaseLayer } from "./hooks/use-load-map-base-layer.js";
 import { ColorScaleProvider } from "./providers/color-scale.provider.js";
 import { LayerColorStrategyProvider } from "./providers/layer-color-strategy.provider.js";
 import { ErrorStateSlot } from "./slots/states/ErrorStateSlot.js";
 import { MapStoreProvider } from "./store/map-store.provider.js";
 import { extractLayersData } from "./utils/extract-layers-data.js";
-import { getDataLayersBoundingBox } from "./utils/get-data-layers-bounding-box.js";
 import { getMapStatesTemplates } from "./utils/get-map-states-template.js";
 import { iterateConfigSlots } from "./utils/iterate-config-slots.js";
 import { setLayersId } from "./utils/set-layers-id.js";
@@ -32,11 +36,15 @@ const _MapView = forwardRef(
       loading = false,
       style: costumerStyle,
       className: customerClassNames,
+      formatter,
+      truncationMode,
       ...remaining
     } = props;
-    const { layerIds, parsedChildren } = setLayersId(children);
-    const layersData = extractLayersData(parsedChildren);
-    const dataLayersBBox = getDataLayersBoundingBox(children);
+    const { layerIds, parsedChildren, valueAccessor } = setLayersId(children);
+    const { flattenData: layersData, categories } = extractLayersData(
+      parsedChildren,
+      valueAccessor
+    );
     const config = iterateConfigSlots(children);
     const isLegendHidden = !config.legend || !!config.legend.hidden;
     const legendPosition = config.legend?.position;
@@ -69,12 +77,12 @@ const _MapView = forwardRef(
         {
           value: baseFeatureCollection
         },
-        /* @__PURE__ */ React.createElement(MapConfigurationContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(LayerIdsContext.Provider, { value: layerIds }, /* @__PURE__ */ React.createElement(MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ React.createElement(
-          MapDataBoundingBoxContext.Provider,
+        /* @__PURE__ */ React.createElement(MapConfigurationContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(LayerIdsContext.Provider, { value: layerIds }, /* @__PURE__ */ React.createElement(
+          MapTruncationModeContext.Provider,
           {
-            value: dataLayersBBox
+            value: truncationMode ?? DEFAULT_TRUNCATION_MODE
           },
-          /* @__PURE__ */ React.createElement(MapStoreProvider, null, /* @__PURE__ */ React.createElement(ColorScaleProvider, null, /* @__PURE__ */ React.createElement(LayerColorStrategyProvider, null, /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement(FormatterContext.Provider, { value: formatter }, /* @__PURE__ */ React.createElement(MapRawDataContext.Provider, { value: layersData }, /* @__PURE__ */ React.createElement(MapStoreProvider, null, /* @__PURE__ */ React.createElement(ColorScaleProvider, { categories }, /* @__PURE__ */ React.createElement(LayerColorStrategyProvider, null, /* @__PURE__ */ React.createElement(
             ChartLayout,
             {
               ref: chartLayoutRef,
@@ -100,8 +108,8 @@ const _MapView = forwardRef(
               },
               /* @__PURE__ */ React.createElement(MapLegendRenderer, null)
             )
-          ))))
-        ))))
+          ))))))
+        )))
       ))
     );
   }

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren } 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 { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from './constants.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 { MapDataBoundingBoxContext } from './contexts/map-data-bounding-box.context.js';\nimport { MapLoadingContext } from './contexts/map-loading.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.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 { getDataLayersBoundingBox } from './utils/get-data-layers-bounding-box.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// 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      ...remaining\n    } = props;\n    const { layerIds, parsedChildren } = setLayersId(children);\n\n    const layersData = extractLayersData(parsedChildren);\n    const dataLayersBBox = getDataLayersBoundingBox(children);\n\n    const config = iterateConfigSlots(children);\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, isLoading, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\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 = (!isLoading && !isMapEnabled) || error;\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              isLoading={isLoading}\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                    <MapRawDataContext.Provider value={layersData}>\n                      <MapDataBoundingBoxContext.Provider\n                        value={dataLayersBBox}\n                      >\n                        <MapStoreProvider>\n                          <ColorScaleProvider>\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                                      {...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                      </MapDataBoundingBoxContext.Provider>\n                    </MapRawDataContext.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 * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { forwardRef, type PropsWithChildren } 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, valueAccessor } = setLayersId(children);\n\n    const { flattenData: layersData, categories } = extractLayersData(\n      parsedChildren,\n      valueAccessor,\n    );\n\n    const config = iterateConfigSlots(children);\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, isLoading, baseFeatureCollection, error } =\n      useLoadMapBaseLayer(config.baseLayer);\n\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 = (!isLoading && !isMapEnabled) || error;\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              isLoading={isLoading}\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 categories={categories}>\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                                        {...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 * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/components/DefaultTooltip/DefaultTooltip.js

@@ -3,6 +3,7 @@ import React from "react";
 import { _ChartTooltip as ChartTooltip } from "@dynatrace/strato-components-preview/charts";
 import { getDefaultActions } from "./utils/get-default-actions.js";
 import { handleCopyToClipboard } from "./utils/handle-copy-to-clipboard.js";
+import { useTruncationMode } from "../../hooks/use-truncation-mode.js";
 import { isConnection, isRegion } from "../../utils/tooltip-type-guards.js";
 const isChoroplethTooltip = (props) => isRegion(props.closestPoint);
 const isConnectionTooltip = (props) => isConnection(props.closestPoint);
@@ -10,6 +11,7 @@ const isBubbleTooltip = (props) => !isNil(props.layerData);
 const isDotTooltip = (props) => true;
 const DefaultTooltip = (props) => {
   let locations = [];
+  const truncationMode = useTruncationMode();
   if (isChoroplethTooltip(props)) {
     const { closestPoint } = props;
     return /* @__PURE__ */ React.createElement(ChartTooltip.Body, { "data-testid": "default-tooltip-template" }, /* @__PURE__ */ React.createElement(
@@ -17,6 +19,7 @@ const DefaultTooltip = (props) => {
       {
         color: closestPoint.color,
         name: closestPoint.name,
+        truncationMode,
         value: closestPoint.data.value && closestPoint.data.value.toString() ? closestPoint.data.value.toString() : void 0
       }
     ));

package/esm/map/components/DefaultTooltip/DefaultTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/DefaultTooltip/DefaultTooltip.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport React from 'react';\n\nimport { _ChartTooltip as ChartTooltip } from '@dynatrace/strato-components-preview/charts';\n\nimport { getDefaultActions } from './utils/get-default-actions.js';\nimport { handleCopyToClipboard } from './utils/handle-copy-to-clipboard.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  DotLayerTooltipData,\n  LayerTooltipData,\n} from '../../types/tooltip.js';\nimport { ChoroplethLayerTooltipData } from '../../types/tooltip.js';\nimport { isConnection, isRegion } from '../../utils/tooltip-type-guards.js';\n\nconst isChoroplethTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ChoroplethLayerTooltipData;\n} => isRegion(props.closestPoint);\nconst isConnectionTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ConnectionLayerTooltipData;\n} => isConnection(props.closestPoint);\nconst isBubbleTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: BubbleLayerTooltipData;\n  layerData: BubbleLayerTooltipData[];\n} => !isNil(props.layerData);\n\nconst isDotTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: DotLayerTooltipData;\n} => true; // if it's not any of the other tooltips, it will be Dot\n\ninterface DefaultTooltipProps {\n  closestPoint: LayerTooltipData;\n  layerData?: LayerTooltipData[];\n}\n\nexport const DefaultTooltip = (props: DefaultTooltipProps) => {\n  let locations: Location[] = [];\n\n  if (isChoroplethTooltip(props)) {\n    const { closestPoint } = props;\n\n    return (\n      <ChartTooltip.Body data-testid=\"default-tooltip-template\">\n        <ChartTooltip.SeriesItem\n          color={closestPoint.color}\n          name={closestPoint.name}\n          value={\n            closestPoint.data.value && closestPoint.data.value.toString()\n              ? closestPoint.data.value.toString()\n              : undefined\n          }\n        />\n      </ChartTooltip.Body>\n    );\n  } else if (isConnectionTooltip(props)) {\n    locations = props.closestPoint.data.path;\n  } else if (isBubbleTooltip(props)) {\n    const { closestPoint, layerData } = props;\n    locations =\n      layerData === undefined || layerData === null || layerData.length === 0\n        ? [closestPoint.data]\n        : layerData.map((point) => point.data);\n  } else if (isDotTooltip(props)) {\n    locations = [props.closestPoint.data];\n  }\n\n  return (\n    <ChartTooltip.Body\n      data-testid=\"default-tooltip-template\"\n      virtualization={false}\n    >\n      {locations.map((location) => (\n        <ChartTooltip.GeoItem\n          key={`${location.latitude}-${location.longitude}`}\n          latitude={location.latitude}\n          longitude={location.longitude}\n          actions={() =>\n            getDefaultActions(() => handleCopyToClipboard(location))\n          }\n        ></ChartTooltip.GeoItem>\n      ))}\n    </ChartTooltip.Body>\n  );\n};\n\nDefaultTooltip['displayName'] = 'DefaultTooltip';\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,iBAAiB,oBAAoB;AAE9C,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AAStC,SAAS,cAAc,gBAAgB;AAEvC,MAAM,sBAAsB,CAC1B,UAGG,SAAS,MAAM,YAAY;AAChC,MAAM,sBAAsB,CAC1B,UAGG,aAAa,MAAM,YAAY;AACpC,MAAM,kBAAkB,CACtB,UAIG,CAAC,MAAM,MAAM,SAAS;AAE3B,MAAM,eAAe,CACnB,UAGG;AAOE,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,MAAI,YAAwB,CAAC;AAE7B,MAAI,oBAAoB,KAAK,GAAG;AAC9B,UAAM,EAAE,aAAa,IAAI;AAEzB,WACE,oCAAC,aAAa,MAAb,EAAkB,eAAY,8BAC7B;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,aAAa;AAAA,QACpB,MAAM,aAAa;AAAA,QACnB,OACE,aAAa,KAAK,SAAS,aAAa,KAAK,MAAM,SAAS,IACxD,aAAa,KAAK,MAAM,SAAS,IACjC;AAAA;AAAA,IAER,CACF;AAAA,EAEJ,WAAW,oBAAoB,KAAK,GAAG;AACrC,gBAAY,MAAM,aAAa,KAAK;AAAA,EACtC,WAAW,gBAAgB,KAAK,GAAG;AACjC,UAAM,EAAE,cAAc,UAAU,IAAI;AACpC,gBACE,cAAc,UAAa,cAAc,QAAQ,UAAU,WAAW,IAClE,CAAC,aAAa,IAAI,IAClB,UAAU,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,EAC3C,WAAW,aAAa,KAAK,GAAG;AAC9B,gBAAY,CAAC,MAAM,aAAa,IAAI;AAAA,EACtC;AAEA,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,IAEf,UAAU,IAAI,CAAC,aACd;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,KAAK,GAAG,SAAS,QAAQ,IAAI,SAAS,SAAS;AAAA,QAC/C,UAAU,SAAS;AAAA,QACnB,WAAW,SAAS;AAAA,QACpB,SAAS,MACP,kBAAkB,MAAM,sBAAsB,QAAQ,CAAC;AAAA;AAAA,IAE1D,CACF;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport React from 'react';\n\nimport { _ChartTooltip as ChartTooltip } from '@dynatrace/strato-components-preview/charts';\n\nimport { getDefaultActions } from './utils/get-default-actions.js';\nimport { handleCopyToClipboard } from './utils/handle-copy-to-clipboard.js';\nimport { useTruncationMode } from '../../hooks/use-truncation-mode.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  BubbleLayerTooltipData,\n  ConnectionLayerTooltipData,\n  DotLayerTooltipData,\n  LayerTooltipData,\n} from '../../types/tooltip.js';\nimport { ChoroplethLayerTooltipData } from '../../types/tooltip.js';\nimport { isConnection, isRegion } from '../../utils/tooltip-type-guards.js';\n\nconst isChoroplethTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ChoroplethLayerTooltipData;\n} => isRegion(props.closestPoint);\nconst isConnectionTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: ConnectionLayerTooltipData;\n} => isConnection(props.closestPoint);\nconst isBubbleTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: BubbleLayerTooltipData;\n  layerData: BubbleLayerTooltipData[];\n} => !isNil(props.layerData);\n\nconst isDotTooltip = (\n  props: DefaultTooltipProps,\n): props is {\n  closestPoint: DotLayerTooltipData;\n} => true; // if it's not any of the other tooltips, it will be Dot\n\ninterface DefaultTooltipProps {\n  closestPoint: LayerTooltipData;\n  layerData?: LayerTooltipData[];\n}\n\nexport const DefaultTooltip = (props: DefaultTooltipProps) => {\n  let locations: Location[] = [];\n  const truncationMode = useTruncationMode();\n\n  if (isChoroplethTooltip(props)) {\n    const { closestPoint } = props;\n\n    return (\n      <ChartTooltip.Body data-testid=\"default-tooltip-template\">\n        <ChartTooltip.SeriesItem\n          color={closestPoint.color}\n          name={closestPoint.name}\n          truncationMode={truncationMode}\n          value={\n            closestPoint.data.value && closestPoint.data.value.toString()\n              ? closestPoint.data.value.toString()\n              : undefined\n          }\n        />\n      </ChartTooltip.Body>\n    );\n  } else if (isConnectionTooltip(props)) {\n    locations = props.closestPoint.data.path;\n  } else if (isBubbleTooltip(props)) {\n    const { closestPoint, layerData } = props;\n    locations =\n      layerData === undefined || layerData === null || layerData.length === 0\n        ? [closestPoint.data]\n        : layerData.map((point) => point.data);\n  } else if (isDotTooltip(props)) {\n    locations = [props.closestPoint.data];\n  }\n\n  return (\n    <ChartTooltip.Body\n      data-testid=\"default-tooltip-template\"\n      virtualization={false}\n    >\n      {locations.map((location) => (\n        <ChartTooltip.GeoItem\n          key={`${location.latitude}-${location.longitude}`}\n          latitude={location.latitude}\n          longitude={location.longitude}\n          actions={() =>\n            getDefaultActions(() => handleCopyToClipboard(location))\n          }\n        />\n      ))}\n    </ChartTooltip.Body>\n  );\n};\n\nDefaultTooltip['displayName'] = 'DefaultTooltip';\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,OAAO,WAAW;AAElB,SAAS,iBAAiB,oBAAoB;AAE9C,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AASlC,SAAS,cAAc,gBAAgB;AAEvC,MAAM,sBAAsB,CAC1B,UAGG,SAAS,MAAM,YAAY;AAChC,MAAM,sBAAsB,CAC1B,UAGG,aAAa,MAAM,YAAY;AACpC,MAAM,kBAAkB,CACtB,UAIG,CAAC,MAAM,MAAM,SAAS;AAE3B,MAAM,eAAe,CACnB,UAGG;AAOE,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,MAAI,YAAwB,CAAC;AAC7B,QAAM,iBAAiB,kBAAkB;AAEzC,MAAI,oBAAoB,KAAK,GAAG;AAC9B,UAAM,EAAE,aAAa,IAAI;AAEzB,WACE,oCAAC,aAAa,MAAb,EAAkB,eAAY,8BAC7B;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,aAAa;AAAA,QACpB,MAAM,aAAa;AAAA,QACnB;AAAA,QACA,OACE,aAAa,KAAK,SAAS,aAAa,KAAK,MAAM,SAAS,IACxD,aAAa,KAAK,MAAM,SAAS,IACjC;AAAA;AAAA,IAER,CACF;AAAA,EAEJ,WAAW,oBAAoB,KAAK,GAAG;AACrC,gBAAY,MAAM,aAAa,KAAK;AAAA,EACtC,WAAW,gBAAgB,KAAK,GAAG;AACjC,UAAM,EAAE,cAAc,UAAU,IAAI;AACpC,gBACE,cAAc,UAAa,cAAc,QAAQ,UAAU,WAAW,IAClE,CAAC,aAAa,IAAI,IAClB,UAAU,IAAI,CAAC,UAAU,MAAM,IAAI;AAAA,EAC3C,WAAW,aAAa,KAAK,GAAG;AAC9B,gBAAY,CAAC,MAAM,aAAa,IAAI;AAAA,EACtC;AAEA,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,eAAY;AAAA,MACZ,gBAAgB;AAAA;AAAA,IAEf,UAAU,IAAI,CAAC,aACd;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,KAAK,GAAG,SAAS,QAAQ,IAAI,SAAS,SAAS;AAAA,QAC/C,UAAU,SAAS;AAAA,QACnB,WAAW,SAAS;AAAA,QACpB,SAAS,MACP,kBAAkB,MAAM,sBAAsB,QAAQ,CAAC;AAAA;AAAA,IAE3D,CACD;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/MapContent.js

@@ -15,9 +15,9 @@ import {
 } from "../constants.js";
 import { MapToolbar } from "./toolbar/MapToolbar.js";
 import { LayerIdsContext } from "../contexts/layer-ids.context.js";
+import { MapDataBoundingBoxContext } from "../contexts/map-data-bounding-box.context.js";
 import { useActiveInteraction } from "../hooks/use-active-interaction.js";
 import { useHoverInteraction } from "../hooks/use-hover-interaction.js";
-import { useInitialViewState } from "../hooks/use-initial-view-state.js";
 import { useMapBaseLayerFeatures } from "../hooks/use-map-base-layer-features.js";
 import { useMapConfig } from "../hooks/use-map-config.js";
 import { useMapLoading } from "../hooks/use-map-loading.js";
@@ -27,6 +27,7 @@ import { useTooltipEventListeners } from "../hooks/use-tooltip-event-listeners.j
 import { defaultStyle } from "../map-styles/default-style.js";
 import { MapViewImperativeHandler } from "../providers/imperative-handler.provider.js";
 import { getColorFromToken } from "../utils/get-color-from-token.js";
+import { getDataLayersBoundingBox } from "../utils/get-data-layers-bounding-box.js";
 import { toMapBoxInitialViewState } from "../utils/to-mapbox-initial-view-state.js";
 import { useSetMapInitialConfiguration } from "../utils/use-set-map-initial-configuration.js";
 const lineLayer = {
@@ -77,6 +78,11 @@ const MapContent = forwardRef((props, forwardedRef) => {
     mapContainerRef,
     forwardedRef
   ]);
+  const baseFeatureCollection = useMapBaseLayerFeatures();
+  const dataLayersBBox = getDataLayersBoundingBox(
+    children,
+    baseFeatureCollection?.features
+  );
   useTooltipEventListeners();
   const { toolbar: toolbarConfig, interactions: interactionsConfig } = useMapConfig();
   const layerIds = useContext(LayerIdsContext);
@@ -90,7 +96,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
     handleZoom,
     handleDrag
   } = useOverlayEvents();
-  const initialViewState = useInitialViewState(initialViewStateProp);
+  const initialViewState = initialViewStateProp ?? dataLayersBBox;
   const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -128,7 +134,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
         interactive: true,
         ...remaining
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(MapDataBoundingBoxContext.Provider, { value: dataLayersBBox }, /* @__PURE__ */ React.createElement(
         MapViewImperativeHandler,
         {
           forwardedRef,
@@ -136,7 +142,7 @@ const MapContent = forwardRef((props, forwardedRef) => {
         },
         /* @__PURE__ */ React.createElement(MapSource, null),
         loading ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MapInteractions, null, children), shouldRenderToolbar ? /* @__PURE__ */ React.createElement(MapToolbar, null) : null)
-      )
+      ))
     )
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/MapContent.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport React, {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\nimport { Layer, type LayerProps, Map, Source } from 'react-map-gl/maplibre';\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  DEFAULT_COUNTRIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n} from '../constants.js';\nimport { MapToolbar } from './toolbar/MapToolbar.js';\nimport { LayerIdsContext } from '../contexts/layer-ids.context.js';\nimport { useActiveInteraction } from '../hooks/use-active-interaction.js';\nimport { useHoverInteraction } from '../hooks/use-hover-interaction.js';\nimport { useInitialViewState } from '../hooks/use-initial-view-state.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 { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type { MapViewProps, MapViewRef } from '../types/map-view.js';\nimport { getColorFromToken } from '../utils/get-color-from-token.js';\nimport { toMapBoxInitialViewState } from '../utils/to-mapbox-initial-view-state.js';\nimport { useSetMapInitialConfiguration } from '../utils/use-set-map-initial-configuration.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    <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n      <Layer\n        {...fillLayer}\n        paint={{\n          'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n        }}\n      ></Layer>\n      <Layer\n        {...lineLayer}\n        paint={{\n          'line-color': getColorFromToken(DEFAULT_COUNTRIES_BORDER_COLOR),\n        }}\n      ></Layer>\n    </Source>\n  );\n};\n\nconst MapInteractions = ({ children }: PropsWithChildren) => {\n  useHoverInteraction();\n  useActiveInteraction();\n\n  return children;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapViewProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs<MapViewRef | HTMLDivElement>([\n    mapContainerRef,\n    forwardedRef,\n  ]);\n\n  useTooltipEventListeners();\n\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n  const layerIds = useContext(LayerIdsContext);\n  const shouldRenderToolbar =\n    !isUndefined(toolbarConfig) || !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 = useInitialViewState(initialViewStateProp);\n\n  const { onLoadHandler, onRenderHandler } = useMapPerformance(mapContainerRef);\n\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={toMapBoxInitialViewState(initialViewState)}\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        RTLTextPlugin={false}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onDrag={handleDrag}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={() => onLoadHandler && onLoadHandler()}\n        ref={useSetMapInitialConfiguration()}\n        interactive\n        {...remaining}\n      >\n        <MapViewImperativeHandler\n          forwardedRef={forwardedRef}\n          containerRef={mapContainerRef}\n        >\n          <MapSource />\n          {loading ? null : (\n            <>\n              <MapInteractions>{children}</MapInteractions>\n              {shouldRenderToolbar ? <MapToolbar /> : null}\n            </>\n          )}\n        </MapViewImperativeHandler>\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 { isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport React, {\n  forwardRef,\n  type PropsWithChildren,\n  useContext,\n  useRef,\n} from 'react';\nimport { Layer, type LayerProps, Map, Source } from 'react-map-gl/maplibre';\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  DEFAULT_COUNTRIES_BORDER_COLOR,\n  DEFAULT_COUNTRIES_FILL_COLOR,\n} from '../constants.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 { defaultStyle } from '../map-styles/default-style.js';\nimport { MapViewImperativeHandler } from '../providers/imperative-handler.provider.js';\nimport type { MapViewProps, MapViewRef } 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';\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    <Source id=\"data\" type=\"geojson\" data={baseLayerFeatures}>\n      <Layer\n        {...fillLayer}\n        paint={{\n          'fill-color': getColorFromToken(DEFAULT_COUNTRIES_FILL_COLOR),\n        }}\n      ></Layer>\n      <Layer\n        {...lineLayer}\n        paint={{\n          'line-color': getColorFromToken(DEFAULT_COUNTRIES_BORDER_COLOR),\n        }}\n      ></Layer>\n    </Source>\n  );\n};\n\nconst MapInteractions = ({ children }: PropsWithChildren) => {\n  useHoverInteraction();\n  useActiveInteraction();\n\n  return children;\n};\n\nexport const MapContent = forwardRef<\n  MapViewRef,\n  PropsWithChildren<MapViewProps>\n>((props, forwardedRef) => {\n  const {\n    initialViewState: initialViewStateProp,\n    children,\n    style,\n    mapStyle = defaultStyle,\n    onViewStateChange,\n    ...remaining\n  } = props;\n\n  const loading = useMapLoading();\n\n  const mapContainerRef = useRef<HTMLDivElement>(null);\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  const shouldRenderToolbar =\n    !isUndefined(toolbarConfig) || !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\n  return (\n    <div\n      data-testid=\"map-container\"\n      ref={mergedRefs}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <Map\n        onMove={(evt) => {\n          onViewStateChange?.(evt.viewState);\n        }}\n        initialViewState={toMapBoxInitialViewState(initialViewState)}\n        style={{\n          width: graphWidth,\n          height: `${graphHeight}px`,\n          ...style,\n        }}\n        mapStyle={mapStyle}\n        dragRotate={false}\n        fadeDuration={0}\n        RTLTextPlugin={false}\n        renderWorldCopies={false}\n        interactiveLayerIds={layerIds}\n        onMouseMove={(e) => handleMouseMove(e as MapLayerMouseEvent)}\n        onClick={(e) => handleMouseClick(e as MapLayerMouseEvent)}\n        onZoom={handleZoom}\n        onDrag={handleDrag}\n        onRender={() => onRenderHandler && onRenderHandler()}\n        onLoad={() => onLoadHandler && onLoadHandler()}\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>{children}</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

@@ -6,6 +6,7 @@ import {
   _useChartLayoutOrientation as useChartLayoutOrientation
 } from "@dynatrace/strato-components-preview/charts";
 import { useColorScale } from "../../hooks/use-color-scale.js";
+import { useTruncationMode } from "../../hooks/use-truncation-mode.js";
 import { useSetStateSelection } from "../../store/store.js";
 const CategoricalLegendRenderer = () => {
   const { orientation: layoutOrientation } = useChartLayoutOrientation();
@@ -13,6 +14,7 @@ const CategoricalLegendRenderer = () => {
   const updateStateSelection = useSetStateSelection();
   const orientation = getLegendOrientation(layoutOrientation);
   const items = buildCategoricalItemsFromScale(scale);
+  const truncationMode = useTruncationMode();
   const handleHover = (items2) => {
     updateStateSelection({ highlightedSeries: items2 });
   };
@@ -25,7 +27,8 @@ const CategoricalLegendRenderer = () => {
       items,
       orientation,
       onClick: handleClick,
-      onHover: handleHover
+      onHover: handleHover,
+      truncationMode
     }
   );
 };

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';\nimport React from 'react';\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 { 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\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    />\n  );\n};\n"],
-  "mappings": "AACA,OAAO,WAAW;AAGlB;AAAA,EACE,mCAAmC;AAAA,EACnC,gBAAgB;AAAA,EAChB,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,OACzB;AAEP,SAAS,qBAAqB;AAC9B,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;AAElD,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;AAAA,EACX;AAEJ;",
+  "sourcesContent": ["import type { ScaleOrdinal } from 'd3-scale';\nimport React from 'react';\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": "AACA,OAAO,WAAW;AAGlB;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;",
   "names": ["items"]
 }

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

@@ -1,13 +1,14 @@
 import { isUndefined } from "lodash-es";
 import React from "react";
 import {
-  _RangeLegend as RangeLegend,
   _buildQuantizedRangeItems as buildQuantizedRangeItems,
   _getLegendOrientation as getLegendOrientation,
   _getTickFormatterMethod as getTickFormatterMethod,
+  _RangeLegend as RangeLegend,
   _useChartLayoutOrientation as useChartLayoutOrientation
 } from "@dynatrace/strato-components-preview/charts";
 import { useColorScale } from "../../hooks/use-color-scale.js";
+import { useFormatterContext } from "../../hooks/use-formatter-context.js";
 const buildLegendTicks = (scale) => [
   ...scale.domain(),
   ...scale.thresholds()
@@ -15,18 +16,20 @@ const buildLegendTicks = (scale) => [
 const SequentialLegendRenderer = () => {
   const { orientation: layoutOrientation } = useChartLayoutOrientation();
   const scale = useColorScale();
+  const configuredFormatter = useFormatterContext();
   if (isUndefined(scale)) {
     return null;
   }
   const orientation = getLegendOrientation(layoutOrientation);
   const items = buildQuantizedRangeItems(scale);
   const domain = buildLegendTicks(scale);
+  const formatter = configuredFormatter ?? getTickFormatterMethod(domain);
   return /* @__PURE__ */ React.createElement(
     RangeLegend,
     {
       items,
       orientation,
-      formatter: getTickFormatterMethod(domain)
+      formatter
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/legend/SequentialLegendRenderer.tsx"],
-  "sourcesContent": ["import type { ScaleQuantize } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\nimport React from 'react';\n\nimport {\n  _RangeLegend as RangeLegend,\n  _buildQuantizedRangeItems as buildQuantizedRangeItems,\n  _getLegendOrientation as getLegendOrientation,\n  _getTickFormatterMethod as getTickFormatterMethod,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { useColorScale } from '../../hooks/use-color-scale.js';\n\nconst buildLegendTicks = (scale: ScaleQuantize<string>) => [\n  ...scale.domain(),\n  ...scale.thresholds(),\n];\n\nexport const SequentialLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const scale = useColorScale() as ScaleQuantize<string>;\n\n  if (isUndefined(scale)) {\n    return null;\n  }\n\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildQuantizedRangeItems(scale);\n\n  const domain = buildLegendTicks(scale);\n\n  return (\n    <RangeLegend\n      items={items}\n      orientation={orientation}\n      formatter={getTickFormatterMethod(domain)}\n    />\n  );\n};\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,OAAO,WAAW;AAElB;AAAA,EACE,gBAAgB;AAAA,EAChB,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,2BAA2B;AAAA,EAC3B,8BAA8B;AAAA,OACzB;AAEP,SAAS,qBAAqB;AAE9B,MAAM,mBAAmB,CAAC,UAAiC;AAAA,EACzD,GAAG,MAAM,OAAO;AAAA,EAChB,GAAG,MAAM,WAAW;AACtB;AAEO,MAAM,2BAA2B,MAAM;AAC5C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,QAAQ,cAAc;AAE5B,MAAI,YAAY,KAAK,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,yBAAyB,KAAK;AAE5C,QAAM,SAAS,iBAAiB,KAAK;AAErC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,uBAAuB,MAAM;AAAA;AAAA,EAC1C;AAEJ;",
+  "sourcesContent": ["import type { ScaleQuantize } from 'd3-scale';\nimport { isUndefined } from 'lodash-es';\nimport React from 'react';\n\nimport {\n  _buildQuantizedRangeItems as buildQuantizedRangeItems,\n  _getLegendOrientation as getLegendOrientation,\n  _getTickFormatterMethod as getTickFormatterMethod,\n  _RangeLegend as RangeLegend,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { useColorScale } from '../../hooks/use-color-scale.js';\nimport { useFormatterContext } from '../../hooks/use-formatter-context.js';\n\nconst buildLegendTicks = (scale: ScaleQuantize<string>) => [\n  ...scale.domain(),\n  ...scale.thresholds(),\n];\n\nexport const SequentialLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const scale = useColorScale() as ScaleQuantize<string>;\n  const configuredFormatter = useFormatterContext();\n\n  if (isUndefined(scale)) {\n    return null;\n  }\n\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildQuantizedRangeItems(scale);\n  const domain = buildLegendTicks(scale);\n  const formatter = configuredFormatter ?? getTickFormatterMethod(domain);\n\n  return (\n    <RangeLegend\n      items={items}\n      orientation={orientation}\n      formatter={formatter}\n    />\n  );\n};\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAC5B,OAAO,WAAW;AAElB;AAAA,EACE,6BAA6B;AAAA,EAC7B,yBAAyB;AAAA,EACzB,2BAA2B;AAAA,EAC3B,gBAAgB;AAAA,EAChB,8BAA8B;AAAA,OACzB;AAEP,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AAEpC,MAAM,mBAAmB,CAAC,UAAiC;AAAA,EACzD,GAAG,MAAM,OAAO;AAAA,EAChB,GAAG,MAAM,WAAW;AACtB;AAEO,MAAM,2BAA2B,MAAM;AAC5C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,QAAQ,cAAc;AAC5B,QAAM,sBAAsB,oBAAoB;AAEhD,MAAI,YAAY,KAAK,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,yBAAyB,KAAK;AAC5C,QAAM,SAAS,iBAAiB,KAAK;AACrC,QAAM,YAAY,uBAAuB,uBAAuB,MAAM;AAEtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -6,19 +6,22 @@ import {
   _useChartLayoutOrientation as useChartLayoutOrientation
 } from "@dynatrace/strato-components-preview/charts";
 import { DEFAULT_FORMATTER } from "../../constants.js";
+import { useFormatterContext } from "../../hooks/use-formatter-context.js";
 import { useMapConfig } from "../../hooks/use-map-config.js";
 const ThresholdLegendRenderer = () => {
   const { orientation: layoutOrientation } = useChartLayoutOrientation();
+  const configuredFormatter = useFormatterContext();
   const { legend } = useMapConfig();
   const { ranges } = legend;
   const orientation = getLegendOrientation(layoutOrientation);
   const items = buildLegendItemsFromRange(ranges);
+  const formatter = configuredFormatter ?? DEFAULT_FORMATTER;
   return /* @__PURE__ */ React.createElement(
     RangeLegend,
     {
       items,
       orientation,
-      formatter: DEFAULT_FORMATTER
+      formatter
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/legend/ThresholdLegendRenderer.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport {\n  _buildLegendItemsFromRange as buildLegendItemsFromRange,\n  _getLegendOrientation as getLegendOrientation,\n  _RangeLegend as RangeLegend,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { DEFAULT_FORMATTER } from '../../constants.js';\nimport { useMapConfig } from '../../hooks/use-map-config.js';\nimport type { ThresholdLegendConfig } from '../../types/legend.js';\n\nexport const ThresholdLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n\n  const { legend } = useMapConfig();\n\n  const { ranges } = legend as ThresholdLegendConfig;\n\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildLegendItemsFromRange(ranges);\n\n  return (\n    <RangeLegend\n      items={items}\n      orientation={orientation}\n      formatter={DEFAULT_FORMATTER}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB;AAAA,EACE,8BAA8B;AAAA,EAC9B,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,8BAA8B;AAAA,OACzB;AAEP,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAGtB,MAAM,0BAA0B,MAAM;AAC3C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AAErE,QAAM,EAAE,OAAO,IAAI,aAAa;AAEhC,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,0BAA0B,MAAM;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;",
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  _buildLegendItemsFromRange as buildLegendItemsFromRange,\n  _getLegendOrientation as getLegendOrientation,\n  _RangeLegend as RangeLegend,\n  _useChartLayoutOrientation as useChartLayoutOrientation,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { DEFAULT_FORMATTER } from '../../constants.js';\nimport { useFormatterContext } from '../../hooks/use-formatter-context.js';\nimport { useMapConfig } from '../../hooks/use-map-config.js';\nimport type { ThresholdLegendConfig } from '../../types/legend.js';\n\nexport const ThresholdLegendRenderer = () => {\n  const { orientation: layoutOrientation } = useChartLayoutOrientation();\n  const configuredFormatter = useFormatterContext();\n\n  const { legend } = useMapConfig();\n\n  const { ranges } = legend as ThresholdLegendConfig;\n\n  const orientation = getLegendOrientation(layoutOrientation);\n  const items = buildLegendItemsFromRange(ranges);\n  const formatter = configuredFormatter ?? DEFAULT_FORMATTER;\n\n  return (\n    <RangeLegend\n      items={items}\n      orientation={orientation}\n      formatter={formatter}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB;AAAA,EACE,8BAA8B;AAAA,EAC9B,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,8BAA8B;AAAA,OACzB;AAEP,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAGtB,MAAM,0BAA0B,MAAM;AAC3C,QAAM,EAAE,aAAa,kBAAkB,IAAI,0BAA0B;AACrE,QAAM,sBAAsB,oBAAoB;AAEhD,QAAM,EAAE,OAAO,IAAI,aAAa;AAEhC,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,cAAc,qBAAqB,iBAAiB;AAC1D,QAAM,QAAQ,0BAA0B,MAAM;AAC9C,QAAM,YAAY,uBAAuB;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/toolbar/MapToolbar.js

@@ -37,7 +37,8 @@ const MapToolbar = () => {
       placement: toolbarConfig?.placement ?? defaultToolbarPlacement,
       initialA11yState: initialA11yToolbarTabIndexContext,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      menuDisplayMode: "never"
     },
     isZoomEnabled && /* @__PURE__ */ React.createElement(MapZoomInOutButtons, null),
     isZoomEnabled && /* @__PURE__ */ React.createElement(MapResetButton, null),

package/esm/map/components/toolbar/MapToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/toolbar/MapToolbar.tsx"],
-  "sourcesContent": ["import React from 'react';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\n\nimport { MapDownloadDataButton } from './buttons/MapDownloadDataButton.js';\nimport { MapResetButton } from './buttons/MapResetButton.js';\nimport { MapZoomInOutButtons } from './buttons/MapZoomInOutButtons.js';\nimport { MapZoomToFitButton } from './buttons/MapZoomToFitButton.js';\nimport { initialA11yToolbarTabIndexContext } from './constants.js';\nimport { useMapConfig } from '../../hooks/use-map-config.js';\nimport { MapInitialViewProvider } from '../../providers/map-initial-view.provider.js';\nimport { useMapOverlayState } from '../../store/selectors.js';\nimport { useSetStateTooltip } from '../../store/store.js';\n\nconst defaultToolbarPlacement = 'top-right';\n\nexport const MapToolbar = () => {\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n\n  const { mouseInBounds } = useMapOverlayState();\n  const setTooltipState = useSetStateTooltip();\n\n  const isZoomEnabled = interactionsConfig?.zoom?.enabled ?? false;\n  const isZoomToFitEnabled = interactionsConfig?.zoomToFit?.enabled ?? false;\n  const isDownloadDataEnabled = toolbarConfig?.downloadData ?? false;\n\n  const hasControls =\n    isZoomEnabled || isZoomToFitEnabled || isDownloadDataEnabled;\n\n  const handleMouseEnter = () => {\n    setTooltipState({\n      enabled: false,\n    });\n  };\n\n  const handleMouseLeave = () => {\n    setTooltipState({\n      enabled: true,\n    });\n  };\n\n  return hasControls ? (\n    <MapInitialViewProvider>\n      <ChartToolbarRenderer\n        visible={mouseInBounds}\n        collapsed={toolbarConfig?.collapsed}\n        draggable={toolbarConfig?.draggable}\n        placement={toolbarConfig?.placement ?? defaultToolbarPlacement}\n        initialA11yState={initialA11yToolbarTabIndexContext}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {isZoomEnabled && <MapZoomInOutButtons />}\n        {isZoomEnabled && <MapResetButton />}\n        {isZoomToFitEnabled && <MapZoomToFitButton />}\n        {isDownloadDataEnabled && <MapDownloadDataButton />}\n      </ChartToolbarRenderer>\n    </MapInitialViewProvider>\n  ) : null;\n};\n\nMapToolbar['displayName'] = 'MapToolbar';\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,yBAAyB,4BAA4B;AAE9D,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yCAAyC;AAClD,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,MAAM,0BAA0B;AAEzB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,SAAS,eAAe,cAAc,mBAAmB,IAC/D,aAAa;AAEf,QAAM,EAAE,cAAc,IAAI,mBAAmB;AAC7C,QAAM,kBAAkB,mBAAmB;AAE3C,QAAM,gBAAgB,oBAAoB,MAAM,WAAW;AAC3D,QAAM,qBAAqB,oBAAoB,WAAW,WAAW;AACrE,QAAM,wBAAwB,eAAe,gBAAgB;AAE7D,QAAM,cACJ,iBAAiB,sBAAsB;AAEzC,QAAM,mBAAmB,MAAM;AAC7B,oBAAgB;AAAA,MACd,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AAEA,QAAM,mBAAmB,MAAM;AAC7B,oBAAgB;AAAA,MACd,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AAEA,SAAO,cACL,oCAAC,8BACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,eAAe;AAAA,MAC1B,WAAW,eAAe;AAAA,MAC1B,WAAW,eAAe,aAAa;AAAA,MACvC,kBAAkB;AAAA,MAClB,cAAc;AAAA,MACd,cAAc;AAAA;AAAA,IAEb,iBAAiB,oCAAC,yBAAoB;AAAA,IACtC,iBAAiB,oCAAC,oBAAe;AAAA,IACjC,sBAAsB,oCAAC,wBAAmB;AAAA,IAC1C,yBAAyB,oCAAC,2BAAsB;AAAA,EACnD,CACF,IACE;AACN;AAEA,WAAW,aAAa,IAAI;",
+  "sourcesContent": ["import React from 'react';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\n\nimport { MapDownloadDataButton } from './buttons/MapDownloadDataButton.js';\nimport { MapResetButton } from './buttons/MapResetButton.js';\nimport { MapZoomInOutButtons } from './buttons/MapZoomInOutButtons.js';\nimport { MapZoomToFitButton } from './buttons/MapZoomToFitButton.js';\nimport { initialA11yToolbarTabIndexContext } from './constants.js';\nimport { useMapConfig } from '../../hooks/use-map-config.js';\nimport { MapInitialViewProvider } from '../../providers/map-initial-view.provider.js';\nimport { useMapOverlayState } from '../../store/selectors.js';\nimport { useSetStateTooltip } from '../../store/store.js';\n\nconst defaultToolbarPlacement = 'top-right';\n\nexport const MapToolbar = () => {\n  const { toolbar: toolbarConfig, interactions: interactionsConfig } =\n    useMapConfig();\n\n  const { mouseInBounds } = useMapOverlayState();\n  const setTooltipState = useSetStateTooltip();\n\n  const isZoomEnabled = interactionsConfig?.zoom?.enabled ?? false;\n  const isZoomToFitEnabled = interactionsConfig?.zoomToFit?.enabled ?? false;\n  const isDownloadDataEnabled = toolbarConfig?.downloadData ?? false;\n\n  const hasControls =\n    isZoomEnabled || isZoomToFitEnabled || isDownloadDataEnabled;\n\n  const handleMouseEnter = () => {\n    setTooltipState({\n      enabled: false,\n    });\n  };\n\n  const handleMouseLeave = () => {\n    setTooltipState({\n      enabled: true,\n    });\n  };\n\n  return hasControls ? (\n    <MapInitialViewProvider>\n      <ChartToolbarRenderer\n        visible={mouseInBounds}\n        collapsed={toolbarConfig?.collapsed}\n        draggable={toolbarConfig?.draggable}\n        placement={toolbarConfig?.placement ?? defaultToolbarPlacement}\n        initialA11yState={initialA11yToolbarTabIndexContext}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        menuDisplayMode={'never'}\n      >\n        {isZoomEnabled && <MapZoomInOutButtons />}\n        {isZoomEnabled && <MapResetButton />}\n        {isZoomToFitEnabled && <MapZoomToFitButton />}\n        {isDownloadDataEnabled && <MapDownloadDataButton />}\n      </ChartToolbarRenderer>\n    </MapInitialViewProvider>\n  ) : null;\n};\n\nMapToolbar['displayName'] = 'MapToolbar';\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,yBAAyB,4BAA4B;AAE9D,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,yCAAyC;AAClD,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,MAAM,0BAA0B;AAEzB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,SAAS,eAAe,cAAc,mBAAmB,IAC/D,aAAa;AAEf,QAAM,EAAE,cAAc,IAAI,mBAAmB;AAC7C,QAAM,kBAAkB,mBAAmB;AAE3C,QAAM,gBAAgB,oBAAoB,MAAM,WAAW;AAC3D,QAAM,qBAAqB,oBAAoB,WAAW,WAAW;AACrE,QAAM,wBAAwB,eAAe,gBAAgB;AAE7D,QAAM,cACJ,iBAAiB,sBAAsB;AAEzC,QAAM,mBAAmB,MAAM;AAC7B,oBAAgB;AAAA,MACd,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AAEA,QAAM,mBAAmB,MAAM;AAC7B,oBAAgB;AAAA,MACd,SAAS;AAAA,IACX,CAAC;AAAA,EACH;AAEA,SAAO,cACL,oCAAC,8BACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,eAAe;AAAA,MAC1B,WAAW,eAAe;AAAA,MAC1B,WAAW,eAAe,aAAa;AAAA,MACvC,kBAAkB;AAAA,MAClB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,iBAAiB;AAAA;AAAA,IAEhB,iBAAiB,oCAAC,yBAAoB;AAAA,IACtC,iBAAiB,oCAAC,oBAAe;AAAA,IACjC,sBAAsB,oCAAC,wBAAmB;AAAA,IAC1C,yBAAyB,oCAAC,2BAAsB;AAAA,EACnD,CACF,IACE;AACN;AAEA,WAAW,aAAa,IAAI;",
   "names": []
 }

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

@@ -28,7 +28,8 @@ const MapDownloadDataButton = () => {
       testId: "map-toolbar-download",
       onKeyDown: handleDownloadDataKeyboard,
       onClick: handleDownloadDataToolbar,
-      tabIndex
+      tabIndex,
+      placement: "toolbar"
     }
   );
 };

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 React, { useRef } 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: KeyboardEvent) => {\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    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,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,UAAyB;AAC3D,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,oCAAC,kBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useRef } 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: React.KeyboardEvent) => {\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": "AAAA,OAAO,SAAS,cAAc;AAC9B,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,UAA+B;AACjE,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,oCAAC,kBAAa;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.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/toolbar/buttons/MapResetButton.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\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 { 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\n  const resetButtonRef = useRef<HTMLButtonElement>();\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\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    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,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;AAErB,QAAM,iBAAiB,OAA0B;AACjD,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AAAA,EAC1D;AAEA,QAAM,gBAAgB,CAAC,UAAyB;AAC9C,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,eAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\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 { 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\n  const resetButtonRef = useRef<HTMLButtonElement>();\n  const tabIndex = useA11yToolbarTabIndex('reset');\n\n  const handleReset = () => {\n    map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\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    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,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;AAErB,QAAM,iBAAiB,OAA0B;AACjD,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AAAA,EAC1D;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,eAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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 React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\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 isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();\n  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();\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: KeyboardEvent,\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={isMaxZoom}\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={isMinZoom}\n      />\n    </>\n  );\n};\n"],
+  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\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 isMaxZoom = map && map?.getMaxZoom() === map?.getZoom();\n  const isMinZoom = map && map?.getMinZoom() === map?.getZoom();\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: React.KeyboardEvent,\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={isMaxZoom}\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={isMinZoom}\n      />\n    </>\n  );\n};\n"],
   "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAC5D,QAAM,YAAY,OAAO,KAAK,WAAW,MAAM,KAAK,QAAQ;AAE5D,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,0DACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,gBAAW;AAAA,MACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,MACjE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,MAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,MAClD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,GACA;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,iBAAY;AAAA,MACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,MAClE,QAAO;AAAA,MACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,MAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,MACnD,UAAU;AAAA,MACV,UAAU;AAAA;AAAA,EACZ,CACF;AAEJ;",
   "names": []
 }

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 React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\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 { 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 handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent) => {\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    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
-  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,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,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAAA,EAChD;AAEA,QAAM,gBAAgB,CAAC,UAAyB;AAC9C,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,mBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import React, { useRef } from 'react';\nimport { useIntl } from 'react-intl';\nimport { useMap } from 'react-map-gl/maplibre';\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 { 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 handleZoomToFit = () => {\n    map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\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    />\n  );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
+  "mappings": "AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,eAAe;AACxB,SAAS,cAAc;AAEvB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,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,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAAA,EAChD;AAEA,QAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oCAAC,mBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/constants.js

@@ -16,7 +16,7 @@ const WHOLE_WORLD_VIEW_BOUNDARIES = [
 const DEFAULT_COUNTRY_CODE = "default";
 const FIT_BOUNDS_OPTIONS = { padding: 20 };
 const DEFAULT_MAP_HEIGHT = 400;
-const DEFAULT_MAP_LEGEND_RATIO = 12;
+const DEFAULT_MAP_LEGEND_RATIO = "auto";
 const DEFAULT_MAP_POSITION = "auto";
 const DEFAULT_INPUT_ICON_SIZE = 20;
 const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;
@@ -26,7 +26,8 @@ const BASE_LAYER_IDS = [BASE_LAYER_LINE_ID, BASE_LAYER_FILL_ID];
 const SHAPE_OPACITY = 1;
 const DEFAULT_SYMBOL_SIZE = 32;
 const FALLBACK_SYMBOL_SIZE = 1;
-const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v002/";
+const DEFAULT_TRUNCATION_MODE = "middle";
+const CDN_BASE_PATH = "https://dt-cdn.net/scripts/data/worldmap/maps/v003/";
 const INCLUDE_ALL_WILDCARD_RULE = "*";
 const DEFAULT_BASIC_SHAPE_COLOR_TOKEN = Colors.Charts.CategoricalThemed.PurpleRain.Color01;
 const DEFAULT_LEGEND_SIZES = {
@@ -120,6 +121,7 @@ export {
   DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,
   DEFAULT_SHAPE_COLOR,
   DEFAULT_SYMBOL_SIZE,
+  DEFAULT_TRUNCATION_MODE,
   DIRECTION_ICON_OUTPUT_SIZE,
   DIRECTION_ICON_SHRINK_RATIO,
   FALLBACK_SYMBOL_SIZE,