@dynatrace/strato-geo 3.0.1 → 3.1.0

package/esm/map/MapView.js

@@ -4,7 +4,8 @@ import {
   _ChartLayout as ChartLayout,
   _coerceSizeValue as coerceSizeValue,
   _useAutoLegendRefresh as useAutoLegendRefresh
-} from "@dynatrace/strato-components-preview/charts";
+} from "@dynatrace/strato-components/charts";
+import { _useBehavioralTrackingProps as useBehavioralTrackingProps } from "@dynatrace/strato-components/core";
 import { MapLegendRenderer } from "./components/legend/MapLegendRenderer.js";
 import { MapContent } from "./components/MapContent.js";
 import { MapUnavailable } from "./components/MapUnavailable.js";
@@ -37,6 +38,7 @@ import { setLayersId } from "./utils/set-layers-id.js";
 import "./styles/react-mapgl-styles.css";
 const _MapView = forwardRef(
   (props, forwardedRef) => {
+    const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
     const {
       children,
       loading = false,
@@ -85,6 +87,7 @@ const _MapView = forwardRef(
         "data-testid": dataTestId,
         role: "img",
         "aria-label": MAP_VIEW_ARIA_LABEL,
+        ...behavioralTrackingProps,
         // TODO: Error boundaries global fix needed - this error state only purpose is to make map not rendering when there error in response
         children: mapUnavailable ? /* @__PURE__ */ jsx(
           MapUnavailable,

package/esm/map/MapView.js.map

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

package/esm/map/components/BaseLayerDataError.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { FormattedMessage } from "react-intl";
-import { _EmptyState as EmptyState } from "@dynatrace/strato-components-preview/charts";
+import { _EmptyState as EmptyState } from "@dynatrace/strato-components/charts";
 const BaseLayerDataError = ({ height }) => {
   const messageNode = /* @__PURE__ */ jsx(
     FormattedMessage,

package/esm/map/components/BaseLayerDataError.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/components/BaseLayerDataError.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { _EmptyState as EmptyState } from '@dynatrace/strato-components-preview/charts';\n\ninterface BaseLayerDataErrorProps {\n  height: number | string;\n}\n\nexport const BaseLayerDataError = ({ height }: BaseLayerDataErrorProps) => {\n  const messageNode: ReactNode = (\n    <FormattedMessage\n      id=\"tS7epcIvtrbIhuBy\"\n      defaultMessage=\"An error occurred: Failed to load map data.\"\n      description=\"Message to display when an error occurred while getting map data.\"\n    />\n  );\n\n  return <EmptyState height={height}>{messageNode}</EmptyState>;\n};\n\nBaseLayerDataError.displayName = 'BaseLayerDataError';\n"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { _EmptyState as EmptyState } from '@dynatrace/strato-components/charts';\n\ninterface BaseLayerDataErrorProps {\n  height: number | string;\n}\n\nexport const BaseLayerDataError = ({ height }: BaseLayerDataErrorProps) => {\n  const messageNode: ReactNode = (\n    <FormattedMessage\n      id=\"tS7epcIvtrbIhuBy\"\n      defaultMessage=\"An error occurred: Failed to load map data.\"\n      description=\"Message to display when an error occurred while getting map data.\"\n    />\n  );\n\n  return <EmptyState height={height}>{messageNode}</EmptyState>;\n};\n\nBaseLayerDataError.displayName = 'BaseLayerDataError';\n"],
   "mappings": "AAWI;AAVJ,SAAS,wBAAwB;AAEjC,SAAS,eAAe,kBAAkB;AAMnC,MAAM,qBAAqB,CAAC,EAAE,OAAO,MAA+B;AACzE,QAAM,cACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAe;AAAA,MACf,aAAY;AAAA;AAAA,EACd;AAGF,SAAO,oBAAC,cAAW,QAAiB,uBAAY;AAClD;AAEA,mBAAmB,cAAc;",
   "names": []
 }

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

@@ -11,7 +11,8 @@ import {
 } from "../../constants.js";
 const BubbleCircleLayer = ({
   id,
-  source
+  source,
+  ...behavioralTrackingProps
 }) => {
   const sizeInterpolation = useSizeInterpolation();
   const radiusExpression = sizeInterpolation === "fixed" ? DEFAULT_RADIUS_EXPRESSION : buildCircleStickToDistanceExpression();
@@ -48,7 +49,8 @@ const BubbleCircleLayer = ({
           SHAPE_OPACITY_DEFAULT,
           SHAPE_OPACITY_DIMMED
         ]
-      }
+      },
+      ...behavioralTrackingProps
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleCircleLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n}: {\n  id: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AA2BI;AA3BJ,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport type { BehaviorTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { buildCircleStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  BUBBLE_DEFAULT_OPACITY,\n  BUBBLE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\n\nexport const BubbleCircleLayer = ({\n  id,\n  source,\n  ...behavioralTrackingProps\n}: {\n  id: string;\n  source: string;\n} & BehaviorTrackingProps) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const radiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_RADIUS_EXPRESSION\n      : buildCircleStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      id={id}\n      source={source}\n      paint={{\n        'circle-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-radius': radiusExpression,\n        'circle-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          BUBBLE_DEFAULT_OPACITY,\n          SHAPE_OPACITY_DIMMED,\n        ],\n        'circle-stroke-width': BUBBLE_STROKE,\n        'circle-stroke-color': [\n          'case',\n          ['boolean', ['feature-state', 'hover'], false],\n          ['get', '__hoveredColor'],\n          ['get', '__color'],\n        ],\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'legendHover'], true],\n          SHAPE_OPACITY_DEFAULT,\n          SHAPE_OPACITY_DIMMED,\n        ],\n      }}\n      {...behavioralTrackingProps}\n    />\n  );\n};\n"],
+  "mappings": "AA8BI;AA9BJ,SAAS,aAAa;AAItB,SAAS,4BAA4B;AACrC,SAAS,4CAA4C;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAG8B;AAC5B,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,mBACJ,sBAAsB,UAClB,4BACA,qCAAqC;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,UACd;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,UAChB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,QACA,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,UACrB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,UAC7C,CAAC,OAAO,gBAAgB;AAAA,UACxB,CAAC,OAAO,SAAS;AAAA,QACnB;AAAA,QACA,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,UAClD;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Source } from "@vis.gl/react-maplibre";
+import { _useBehavioralTrackingProps as useBehavioralTrackingProps } from "@dynatrace/strato-components/core";
 import { BubbleCircleLayer } from "./BubbleCircleLayer.js";
 import { BubbleLayerTooltip } from "./BubbleLayerTooltip.js";
 import { BubbleOutlineLayer } from "./BubbleOutlineLayer.js";
@@ -19,6 +20,7 @@ import {
 import { isBubbleTooltipTemplate } from "../../utils/tooltip-type-guards.js";
 import { TooltipWrapper } from "../TooltipWrapper.js";
 const BubbleLayer = (props) => {
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const {
     data,
     layerId,
@@ -48,7 +50,14 @@ const BubbleLayer = (props) => {
   );
   const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);
   return /* @__PURE__ */ jsx(SizeInterpolationContext.Provider, { value: sizeInterpolation, children: /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true, children: [
-    /* @__PURE__ */ jsx(BubbleCircleLayer, { id: layerId, source: sourceId }),
+    /* @__PURE__ */ jsx(
+      BubbleCircleLayer,
+      {
+        id: layerId,
+        source: sourceId,
+        ...behavioralTrackingProps
+      }
+    ),
     /* @__PURE__ */ jsx(BubbleOutlineLayer, { beforeId: layerId, source: sourceId }),
     /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
       BubbleLayerTooltip,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayer.tsx"],
-  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <SizeInterpolationContext.Provider value={sizeInterpolation}>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <BubbleCircleLayer id={layerId} source={sourceId} />\n        <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <BubbleLayerTooltip\n            tooltipTemplate={\n              isBubbleTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    </SizeInterpolationContext.Provider>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
-  "mappings": "AAgEM,SACE,KADF;AAhEN,SAAS,cAAc;AAGvB,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,cAAc,CACzB,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,+BAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA,wBAAC,qBAAkB,IAAI,SAAS,QAAQ,UAAU;AAAA,IAClD,oBAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU;AAAA,IACzD,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,wBAAwB,eAAe,IACnC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { BubbleCircleLayer } from './BubbleCircleLayer.js';\nimport { BubbleLayerTooltip } from './BubbleLayerTooltip.js';\nimport { BubbleOutlineLayer } from './BubbleOutlineLayer.js';\nimport { SizeInterpolationContext } from './contexts/size-interpolation.context.js';\nimport { buildRadiusScale } from './utils/build-radius-scale.js';\nimport { parseBubbleDataToGeoJSON } from './utils/parse-bubble-data-to-geo-json.js';\nimport { DEFAULT_BUBBLE_COLOR, DEFAULT_RADIUS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveLocationColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { BubbleLayerTooltip as BubbleLayerTooltipSlot } from '../../slots/BubbleLayerTooltip.js';\nimport {\n  type InternalBubbleLayerProps,\n  isScaleRadius,\n} from '../../types/bubble-layer.js';\nimport type { Location } from '../../types/location.js';\nimport { isBubbleTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const BubbleLayer = <T extends Location>(\n  props: PropsWithChildren<InternalBubbleLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    radius = DEFAULT_RADIUS,\n    children,\n    sizeInterpolation = 'fixed',\n  } = props;\n  const colorParser = useLayerColoringStrategy();\n  const bubbleColor = useResolveLocationColor(\n    DEFAULT_BUBBLE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  let radiusScale = (value: number) => value;\n\n  if (isScaleRadius(props)) {\n    const { radiusRange = [10, 100], radius, scale = 'linear' } = props;\n\n    radiusScale = buildRadiusScale(data, radius, scale, radiusRange);\n  }\n\n  const dataGeoJson = parseBubbleDataToGeoJSON(\n    data,\n    bubbleColor,\n    radius,\n    radiusScale,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(children, BubbleLayerTooltipSlot);\n\n  return (\n    <SizeInterpolationContext.Provider value={sizeInterpolation}>\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJson} generateId>\n        <BubbleCircleLayer\n          id={layerId}\n          source={sourceId}\n          {...behavioralTrackingProps}\n        />\n        <BubbleOutlineLayer beforeId={layerId} source={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <BubbleLayerTooltip\n            tooltipTemplate={\n              isBubbleTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    </SizeInterpolationContext.Provider>\n  );\n};\n\nBubbleLayer['displayName'] = 'BubbleLayer';\n"],
+  "mappings": "AAoEM,SACE,KADF;AApEN,SAAS,cAAc;AAGvB,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB,sBAAsB;AACrD,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB,8BAA8B;AAC7D;AAAA,EAEE;AAAA,OACK;AAEP,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,cAAc,CACzB,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAClC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,MAAI,cAAc,CAAC,UAAkB;AAErC,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,cAAc,CAAC,IAAI,GAAG,GAAG,QAAAA,SAAQ,QAAQ,SAAS,IAAI;AAE9D,kBAAc,iBAAiB,MAAMA,SAAQ,OAAO,WAAW;AAAA,EACjE;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,mBAAmB,UAAU,sBAAsB;AAE3E,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACxC,+BAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,sBAAmB,UAAU,SAAS,QAAQ,UAAU;AAAA,IACzD,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,wBAAwB,eAAe,IACnC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": ["radius"]
 }

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

@@ -4,7 +4,7 @@ import { useRef } from "react";
 import {
   _ChartTooltip as ChartTooltip,
   _useChartActionsMenu as useChartActionsMenu
-} from "@dynatrace/strato-components-preview/charts";
+} from "@dynatrace/strato-components/charts";
 import { useGetPosition } from "../../hooks/use-get-position.js";
 import {
   useMapTooltipPinnedState,

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

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

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Layer } from "@vis.gl/react-maplibre";
-import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
+import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components/charts";
 import { useSizeInterpolation } from "./hooks/use-size-interpolation.js";
 import { addOutlineSize } from "./utils/add-outline-size.js";
 import { buildOutlineStickToDistanceExpression } from "./utils/build-stick-to-distance-expressions.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/BubbleLayer/BubbleOutlineLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { useSizeInterpolation } from './hooks/use-size-interpolation.js';\nimport { addOutlineSize } from './utils/add-outline-size.js';\nimport { buildOutlineStickToDistanceExpression } from './utils/build-stick-to-distance-expressions.js';\nimport {\n  ACTIVE_COLOR,\n  BUBBLE_OUTLINE_STROKE,\n  DEFAULT_RADIUS_EXPRESSION,\n} from '../../constants.js';\n\nconst DEFAULT_OUTLINE_RADIUS_EXPRESSION = addOutlineSize(\n  DEFAULT_RADIUS_EXPRESSION,\n);\n\nexport const BubbleOutlineLayer = ({\n  beforeId,\n  source,\n}: {\n  beforeId: string;\n  source: string;\n}) => {\n  const sizeInterpolation = useSizeInterpolation();\n\n  const outlineRadiusExpression =\n    sizeInterpolation === 'fixed'\n      ? DEFAULT_OUTLINE_RADIUS_EXPRESSION\n      : buildOutlineStickToDistanceExpression();\n\n  return (\n    <Layer\n      type=\"circle\"\n      beforeId={beforeId}\n      source={source}\n      paint={{\n        'circle-radius': outlineRadiusExpression,\n        'circle-opacity': 0,\n        'circle-stroke-width': BUBBLE_OUTLINE_STROKE,\n        'circle-stroke-color': getCanvasColor(ACTIVE_COLOR),\n        'circle-stroke-opacity': [\n          'case',\n          ['boolean', ['feature-state', 'active'], false],\n          1,\n          0,\n        ],\n      }}\n    />\n  );\n};\n"],
   "mappings": "AAgCI;AAhCJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,6CAA6C;AACtD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oCAAoC;AAAA,EACxC;AACF;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAGM;AACJ,QAAM,oBAAoB,qBAAqB;AAE/C,QAAM,0BACJ,sBAAsB,UAClB,oCACA,sCAAsC;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,uBAAuB;AAAA,QACvB,uBAAuB,eAAe,YAAY;AAAA,QAClD,yBAAyB;AAAA,UACvB;AAAA,UACA,CAAC,WAAW,CAAC,iBAAiB,QAAQ,GAAG,KAAK;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js

@@ -1,4 +1,4 @@
-import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
+import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components/charts";
 import { defineRadius } from "./define-radius.js";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";

package/esm/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n    features: data.map((feature) => {\n      const { longitude, latitude, ...properties } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
+  "sourcesContent": ["import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';\nimport type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport { defineRadius } from './define-radius.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\ntype RadiusScale =\n  | ScaleLinear<number, number>\n  | ScaleLogarithmic<number, number>\n  | ((value: number) => number);\n\nexport const parseBubbleDataToGeoJSON = <T extends Location>(\n  data: T[],\n  color: string | ((item: T) => string),\n  radius: number | ((item: T) => number),\n  scale: RadiusScale,\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n    features: data.map((feature) => {\n      const { longitude, latitude, ...properties } = feature;\n      const canvasColor = getCanvasColor(defineColor(color, feature));\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const scaledRadius = scale(defineRadius(radius, feature));\n\n      return {\n        type: 'Feature',\n        properties: {\n          data: feature,\n          ...properties,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n          __radius: scaledRadius,\n          __lat: latitude,\n        },\n        geometry: { type: 'Point', coordinates: [longitude, latitude] },\n      };\n    }),\n  };\n};\n"],
   "mappings": "AAGA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAOrB,MAAM,2BAA2B,CACtC,MACA,OACA,QACA,UAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU,KAAK,IAAI,CAAC,YAAY;AAC9B,YAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,YAAM,cAAc,eAAe,YAAY,OAAO,OAAO,CAAC;AAC9D,YAAM,eAAe,sBAAsB,WAAW;AACtD,YAAM,eAAe,MAAM,aAAa,QAAQ,OAAO,CAAC;AAExD,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,UAAU,EAAE,MAAM,SAAS,aAAa,CAAC,WAAW,QAAQ,EAAE;AAAA,MAChE;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Layer, Source } from "@vis.gl/react-maplibre";
+import { _useBehavioralTrackingProps as useBehavioralTrackingProps } from "@dynatrace/strato-components/core";
 import { ChoroplethLayerTooltip } from "./ChoroplethLayerTooltip.js";
 import { ChoroplethOutlineLayer } from "./ChoroplethOutlineLayer.js";
 import { parseRegionDataToGeoJSON } from "./utils/parse-region-data-to-geo-json.js";
@@ -19,6 +20,7 @@ import { isChoroplethTooltipTemplate } from "../../utils/tooltip-type-guards.js"
 import { TooltipWrapper } from "../TooltipWrapper.js";
 const ChoroplethLayer = (props) => {
   const { layerId, data, regionAccessor, children } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const mapSource = useMapBaseLayerFeatures();
   const colorParser = useLayerColoringStrategy();
   const choroplethColor = useResolveChoroplethColor(
@@ -57,7 +59,8 @@ const ChoroplethLayer = (props) => {
             SHAPE_OPACITY_DIMMED,
             SHAPE_OPACITY_DEFAULT
           ]
-        }
+        },
+        ...behavioralTrackingProps
       }
     ),
     /* @__PURE__ */ jsx(ChoroplethOutlineLayer, { sourceId }),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethLayer.tsx"],
-  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { ChoroplethOutlineLayer } from './ChoroplethOutlineLayer.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  DEFAULT_CHOROPLETH_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useMapBaseLayerFeatures } from '../../hooks/use-map-base-layer-features.js';\nimport { useResolveChoroplethColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n  const mapSource = useMapBaseLayerFeatures();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveChoroplethColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    dataGeoJSON && (\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          source={sourceId}\n          type=\"fill\"\n          paint={{\n            'fill-color': ['get', '__color'],\n            'fill-opacity': [\n              'case',\n              ['==', ['feature-state', 'legendHover'], false],\n              SHAPE_OPACITY_DIMMED,\n              ['==', ['feature-state', 'active'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'hover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'isAnyActive'], true],\n              SHAPE_OPACITY_DIMMED,\n              SHAPE_OPACITY_DEFAULT,\n            ],\n          }}\n        />\n        <ChoroplethOutlineLayer sourceId={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <ChoroplethLayerTooltip\n            tooltipTemplate={\n              isChoroplethTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
-  "mappings": "AAiDM,SACE,KADF;AAjDN,SAAS,OAAO,cAAc;AAG9B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAErE,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AACpD,QAAM,YAAY,wBAAwB;AAE1C,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,WAAW,QAAQ,QAAQ,SAAS,QAAQ;AAClD,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cACJ,aACA,yBAAyB,WAAW,MAAM,gBAAgB,eAAe;AAE3E,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,eACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,KAAK;AAAA,YAC9C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,0BAAuB,UAAoB;AAAA,IAC5C,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF;AAGN;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { ChoroplethLayerTooltip } from './ChoroplethLayerTooltip.js';\nimport { ChoroplethOutlineLayer } from './ChoroplethOutlineLayer.js';\nimport { parseRegionDataToGeoJSON } from './utils/parse-region-data-to-geo-json.js';\nimport {\n  DEFAULT_CHOROPLETH_COLOR,\n  SHAPE_OPACITY_DIMMED,\n  SHAPE_OPACITY_DEFAULT,\n} from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useMapBaseLayerFeatures } from '../../hooks/use-map-base-layer-features.js';\nimport { useResolveChoroplethColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ChoroplethLayerTooltip as ChoroplethLayerTooltipSlot } from '../../slots/ChoroplethLayerTooltip.js';\nimport type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';\nimport { isChoroplethTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ChoroplethLayer = <T extends Record<string, unknown>>(\n  props: PropsWithChildren<InternalChoroplethLayerProps<T>>,\n) => {\n  const { layerId, data, regionAccessor, children } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const mapSource = useMapBaseLayerFeatures();\n\n  const colorParser = useLayerColoringStrategy();\n  const choroplethColor = useResolveChoroplethColor(\n    DEFAULT_CHOROPLETH_COLOR,\n    props,\n    colorParser,\n  );\n  const sourceId = layerId.replace('layer', 'source');\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const dataGeoJSON =\n    mapSource &&\n    parseRegionDataToGeoJSON(mapSource, data, regionAccessor, choroplethColor);\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ChoroplethLayerTooltipSlot,\n  );\n\n  return (\n    dataGeoJSON && (\n      <Source id={sourceId} type=\"geojson\" data={dataGeoJSON} generateId>\n        <Layer\n          id={layerId}\n          source={sourceId}\n          type=\"fill\"\n          paint={{\n            'fill-color': ['get', '__color'],\n            'fill-opacity': [\n              'case',\n              ['==', ['feature-state', 'legendHover'], false],\n              SHAPE_OPACITY_DIMMED,\n              ['==', ['feature-state', 'active'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'hover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'legendHover'], true],\n              SHAPE_OPACITY_DEFAULT,\n              ['==', ['feature-state', 'isAnyActive'], true],\n              SHAPE_OPACITY_DIMMED,\n              SHAPE_OPACITY_DEFAULT,\n            ],\n          }}\n          {...behavioralTrackingProps}\n        />\n        <ChoroplethOutlineLayer sourceId={sourceId} />\n        <TooltipWrapper layerId={layerId}>\n          <ChoroplethLayerTooltip\n            tooltipTemplate={\n              isChoroplethTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </Source>\n    )\n  );\n};\n\nChoroplethLayer['displayName'] = 'ChoroplethLayer';\n"],
+  "mappings": "AAoDM,SACE,KADF;AApDN,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAErE,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,SAAS,MAAM,gBAAgB,SAAS,IAAI;AACpD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAClE,QAAM,YAAY,wBAAwB;AAE1C,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,WAAW,QAAQ,QAAQ,SAAS,QAAQ;AAClD,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cACJ,aACA,yBAAyB,WAAW,MAAM,gBAAgB,eAAe;AAE3E,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,eACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,YAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc,CAAC,OAAO,SAAS;AAAA,UAC/B,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,KAAK;AAAA,YAC9C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAC7C;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA,oBAAC,0BAAuB,UAAoB;AAAA,IAC5C,oBAAC,kBAAe,SACd;AAAA,MAAC;AAAA;AAAA,QACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,IAER,GACF;AAAA,KACF;AAGN;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { useRef } from "react";
 import {
   _ChartTooltip as ChartTooltip,
   _useChartActionsMenu as useChartActionsMenu
-} from "@dynatrace/strato-components-preview/charts";
+} from "@dynatrace/strato-components/charts";
 import { useGetPosition } from "../../hooks/use-get-position.js";
 import {
   useMapTooltipPinnedState,

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

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

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Layer } from "@vis.gl/react-maplibre";
-import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
+import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components/charts";
 import {
   ACTIVE_COLOR,
   ACTIVE_BORDER_WIDTH_OUTER,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ChoroplethLayer/ChoroplethOutlineLayer.tsx"],
-  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\n} from '../../constants.js';\n\nexport const ChoroplethOutlineLayer = (props: { sourceId: string }) => {\n  const { sourceId } = props;\n  const activeColor = getCanvasColor(ACTIVE_COLOR);\n  const defaultBoundariesBorderColor = getCanvasColor(\n    DEFAULT_BOUNDARIES_BORDER_COLOR,\n  );\n  const transparentBorderColor = getCanvasColor(TRANSPARENT_BORDER_COLOR);\n\n  return (\n    <>\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            defaultBoundariesBorderColor,\n            ['==', ['feature-state', 'hover'], true],\n            defaultBoundariesBorderColor,\n            defaultBoundariesBorderColor,\n          ],\n          'line-width': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            ACTIVE_BORDER_WIDTH_OUTER,\n            ['==', ['feature-state', 'hover'], true],\n            ACTIVE_BORDER_WIDTH_OUTER,\n            ['==', ['get', 'region_type'], 'REGION'],\n            REGION_BORDER_WIDTH,\n            COUNTRY_BORDER_WIDTH,\n          ],\n        }}\n      />\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            activeColor,\n            ['==', ['feature-state', 'hover'], true],\n            activeColor,\n            transparentBorderColor,\n          ],\n          'line-width': ACTIVE_BORDER_WIDTH_INNER,\n        }}\n      />\n    </>\n  );\n};\n"],
+  "sourcesContent": ["import { Layer } from '@vis.gl/react-maplibre';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\n\nimport {\n  ACTIVE_COLOR,\n  ACTIVE_BORDER_WIDTH_OUTER,\n  COUNTRY_BORDER_WIDTH,\n  REGION_BORDER_WIDTH,\n  DEFAULT_BOUNDARIES_BORDER_COLOR,\n  TRANSPARENT_BORDER_COLOR,\n  ACTIVE_BORDER_WIDTH_INNER,\n} from '../../constants.js';\n\nexport const ChoroplethOutlineLayer = (props: { sourceId: string }) => {\n  const { sourceId } = props;\n  const activeColor = getCanvasColor(ACTIVE_COLOR);\n  const defaultBoundariesBorderColor = getCanvasColor(\n    DEFAULT_BOUNDARIES_BORDER_COLOR,\n  );\n  const transparentBorderColor = getCanvasColor(TRANSPARENT_BORDER_COLOR);\n\n  return (\n    <>\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            defaultBoundariesBorderColor,\n            ['==', ['feature-state', 'hover'], true],\n            defaultBoundariesBorderColor,\n            defaultBoundariesBorderColor,\n          ],\n          'line-width': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            ACTIVE_BORDER_WIDTH_OUTER,\n            ['==', ['feature-state', 'hover'], true],\n            ACTIVE_BORDER_WIDTH_OUTER,\n            ['==', ['get', 'region_type'], 'REGION'],\n            REGION_BORDER_WIDTH,\n            COUNTRY_BORDER_WIDTH,\n          ],\n        }}\n      />\n      <Layer\n        source={sourceId}\n        type=\"line\"\n        paint={{\n          'line-color': [\n            'case',\n            ['==', ['feature-state', 'active'], true],\n            activeColor,\n            ['==', ['feature-state', 'hover'], true],\n            activeColor,\n            transparentBorderColor,\n          ],\n          'line-width': ACTIVE_BORDER_WIDTH_INNER,\n        }}\n      />\n    </>\n  );\n};\n"],
   "mappings": "AAuBI,mBACE,KADF;AAvBJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB,sBAAsB;AAElD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,yBAAyB,CAAC,UAAgC;AACrE,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,cAAc,eAAe,YAAY;AAC/C,QAAM,+BAA+B;AAAA,IACnC;AAAA,EACF;AACA,QAAM,yBAAyB,eAAe,wBAAwB;AAEtE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA,CAAC,MAAM,CAAC,OAAO,aAAa,GAAG,QAAQ;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,QAAQ,GAAG,IAAI;AAAA,YACxC;AAAA,YACA,CAAC,MAAM,CAAC,iBAAiB,OAAO,GAAG,IAAI;AAAA,YACvC;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.js

@@ -1,5 +1,5 @@
-import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components-preview/charts";
-import { _accessValue as accessValue } from "@dynatrace/strato-components-preview/core";
+import { _getCanvasColor as getCanvasColor } from "@dynatrace/strato-components/charts";
+import { _accessValue as accessValue } from "@dynatrace/strato-components/core";
 import { calculateHoveredColor } from "../../../utils/calculate-hovered-color.js";
 import { defineColor } from "../../../utils/define-color.js";
 const parseRegionDataToGeoJSON = (mapSource, data, regionAccessor, color) => {

package/esm/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/ChoroplethLayer/utils/parse-region-data-to-geo-json.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\nimport { _accessValue as accessValue } from '@dynatrace/strato-components-preview/core';\n\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseRegionDataToGeoJSON = <T extends Record<string, unknown>>(\n  mapSource: GeoJSON.FeatureCollection,\n  data: T[],\n  regionAccessor: string | ((i: T) => string),\n  color: string | ((i: T) => string),\n): GeoJSON.FeatureCollection => {\n  const features = data.reduce((features: GeoJSON.Feature[], item) => {\n    let id: string | undefined = '';\n\n    if (typeof regionAccessor === 'function') {\n      id = regionAccessor(item);\n    } else {\n      id = accessValue<string>(item, regionAccessor);\n    }\n\n    const feature = mapSource.features.find((region) => region.id === id);\n    if (feature !== undefined) {\n      const regionColor = defineColor(color, item);\n      const canvasColor = getCanvasColor(regionColor);\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const { name, region_type } = feature.properties as {\n        name: string;\n        region_type: string;\n      };\n      const feat = {\n        ...feature,\n        properties: {\n          name,\n          region_type,\n          data: item,\n          ...item,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n        },\n      };\n\n      features.push(feat);\n    }\n\n    return features;\n  }, []);\n\n  return {\n    type: 'FeatureCollection',\n    features,\n  };\n};\n"],
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components/charts';\nimport { _accessValue as accessValue } from '@dynatrace/strato-components/core';\n\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nexport const parseRegionDataToGeoJSON = <T extends Record<string, unknown>>(\n  mapSource: GeoJSON.FeatureCollection,\n  data: T[],\n  regionAccessor: string | ((i: T) => string),\n  color: string | ((i: T) => string),\n): GeoJSON.FeatureCollection => {\n  const features = data.reduce((features: GeoJSON.Feature[], item) => {\n    let id: string | undefined = '';\n\n    if (typeof regionAccessor === 'function') {\n      id = regionAccessor(item);\n    } else {\n      id = accessValue<string>(item, regionAccessor);\n    }\n\n    const feature = mapSource.features.find((region) => region.id === id);\n    if (feature !== undefined) {\n      const regionColor = defineColor(color, item);\n      const canvasColor = getCanvasColor(regionColor);\n      const hoveredColor = calculateHoveredColor(canvasColor);\n      const { name, region_type } = feature.properties as {\n        name: string;\n        region_type: string;\n      };\n      const feat = {\n        ...feature,\n        properties: {\n          name,\n          region_type,\n          data: item,\n          ...item,\n          __color: canvasColor,\n          __hoveredColor: hoveredColor,\n        },\n      };\n\n      features.push(feat);\n    }\n\n    return features;\n  }, []);\n\n  return {\n    type: 'FeatureCollection',\n    features,\n  };\n};\n"],
   "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,gBAAgB,mBAAmB;AAE5C,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAErB,MAAM,2BAA2B,CACtC,WACA,MACA,gBACA,UAC8B;AAC9B,QAAM,WAAW,KAAK,OAAO,CAACA,WAA6B,SAAS;AAClE,QAAI,KAAyB;AAE7B,QAAI,OAAO,mBAAmB,YAAY;AACxC,WAAK,eAAe,IAAI;AAAA,IAC1B,OAAO;AACL,WAAK,YAAoB,MAAM,cAAc;AAAA,IAC/C;AAEA,UAAM,UAAU,UAAU,SAAS,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AACpE,QAAI,YAAY,QAAW;AACzB,YAAM,cAAc,YAAY,OAAO,IAAI;AAC3C,YAAM,cAAc,eAAe,WAAW;AAC9C,YAAM,eAAe,sBAAsB,WAAW;AACtD,YAAM,EAAE,MAAM,YAAY,IAAI,QAAQ;AAItC,YAAM,OAAO;AAAA,QACX,GAAG;AAAA,QACH,YAAY;AAAA,UACV;AAAA,UACA;AAAA,UACA,MAAM;AAAA,UACN,GAAG;AAAA,UACH,SAAS;AAAA,UACT,gBAAgB;AAAA,QAClB;AAAA,MACF;AAEA,MAAAA,UAAS,KAAK,IAAI;AAAA,IACpB;AAEA,WAAOA;AAAA,EACT,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,EACF;AACF;",
   "names": ["features"]
 }

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

@@ -1,4 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { _useBehavioralTrackingProps as useBehavioralTrackingProps } from "@dynatrace/strato-components/core";
 import { ConnectionLayerDirection } from "./ConnectionLayerDirection.js";
 import { ConnectionLayerLine } from "./ConnectionLayerLine.js";
 import { ConnectionLayerTooltip } from "./ConnectionLayerTooltip.js";
@@ -13,6 +14,7 @@ import { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from "../../slot
 import { isConnectionTooltipTemplate } from "../../utils/tooltip-type-guards.js";
 import { TooltipWrapper } from "../TooltipWrapper.js";
 const ConnectionLayer = (props) => {
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const {
     data,
     layerId,
@@ -49,6 +51,7 @@ const ConnectionLayer = (props) => {
         layerId,
         sourceId,
         line,
+        ...behavioralTrackingProps,
         children: /* @__PURE__ */ jsx(TooltipWrapper, { layerId, children: /* @__PURE__ */ jsx(
           ConnectionLayerTooltip,
           {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayer.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { ConnectionLayerDirection } from './ConnectionLayerDirection.js';\nimport { ConnectionLayerLine } from './ConnectionLayerLine.js';\nimport { ConnectionLayerTooltip } from './ConnectionLayerTooltip.js';\nimport { parseConnectionDataToGeoJSON } from './utils/parse-connection-data-to-geo-json.js';\nimport { DEFAULT_LINE_COLOR, DEFAULT_LINE_THICKNESS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveConnectionColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from '../../slots/ConnectionLayerTooltip.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\nimport { isConnectionTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n  const colorParser = useLayerColoringStrategy();\n  const connectionColor = useResolveConnectionColor(\n    DEFAULT_LINE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const geoJsonData = parseConnectionDataToGeoJSON(\n    data,\n    thickness,\n    connectionColor,\n    curve,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ConnectionLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <ConnectionLayerLine\n        geoJsonData={geoJsonData}\n        layerId={layerId}\n        sourceId={sourceId}\n        line={line}\n      >\n        <TooltipWrapper layerId={layerId}>\n          <ConnectionLayerTooltip\n            tooltipTemplate={\n              isConnectionTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </ConnectionLayerLine>\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
-  "mappings": "AAyDI,mBAQM,KARN;AAvDJ,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAKrE,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAElC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,8BAAC,kBAAe,SACd;AAAA,UAAC;AAAA;AAAA,YACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,QAER,GACF;AAAA;AAAA,IACF;AAAA,IAEC,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport { ConnectionLayerDirection } from './ConnectionLayerDirection.js';\nimport { ConnectionLayerLine } from './ConnectionLayerLine.js';\nimport { ConnectionLayerTooltip } from './ConnectionLayerTooltip.js';\nimport { parseConnectionDataToGeoJSON } from './utils/parse-connection-data-to-geo-json.js';\nimport { DEFAULT_LINE_COLOR, DEFAULT_LINE_THICKNESS } from '../../constants.js';\nimport { useLayerColoringStrategy } from '../../hooks/use-layer-coloring-strategy.js';\nimport { useLegendInteractionHighlighting } from '../../hooks/use-legend-interaction-highlighting.js';\nimport { useLegendInteractionVisibility } from '../../hooks/use-legend-interaction-visibility.js';\nimport { useResolveConnectionColor } from '../../hooks/use-resolve-color.js';\nimport { useTooltipTemplate } from '../../hooks/use-tooltip-template.js';\nimport { ConnectionLayerTooltip as ConnectionLayerTooltipSlot } from '../../slots/ConnectionLayerTooltip.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\nimport { isConnectionTooltipTemplate } from '../../utils/tooltip-type-guards.js';\nimport { TooltipWrapper } from '../TooltipWrapper.js';\n\nexport const ConnectionLayer = <T extends Connection>(\n  props: PropsWithChildren<InternalConnectionLayerProps<T>>,\n) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const {\n    data,\n    layerId,\n    children,\n    curve,\n    directionIndicator,\n    line,\n    thickness = DEFAULT_LINE_THICKNESS,\n  } = props;\n  const colorParser = useLayerColoringStrategy();\n  const connectionColor = useResolveConnectionColor(\n    DEFAULT_LINE_COLOR,\n    props,\n    colorParser,\n  );\n\n  const sourceId = `source-${layerId}`;\n\n  useLegendInteractionHighlighting(props, sourceId);\n  useLegendInteractionVisibility(props, layerId);\n\n  const geoJsonData = parseConnectionDataToGeoJSON(\n    data,\n    thickness,\n    connectionColor,\n    curve,\n  );\n\n  const tooltipTemplate = useTooltipTemplate(\n    children,\n    ConnectionLayerTooltipSlot,\n  );\n\n  return (\n    <>\n      <ConnectionLayerLine\n        geoJsonData={geoJsonData}\n        layerId={layerId}\n        sourceId={sourceId}\n        line={line}\n        {...behavioralTrackingProps}\n      >\n        <TooltipWrapper layerId={layerId}>\n          <ConnectionLayerTooltip\n            tooltipTemplate={\n              isConnectionTooltipTemplate(tooltipTemplate)\n                ? tooltipTemplate\n                : undefined\n            }\n          />\n        </TooltipWrapper>\n      </ConnectionLayerLine>\n\n      {directionIndicator && (\n        <ConnectionLayerDirection\n          geoJsonData={geoJsonData}\n          layerId={layerId}\n          directionIndicator={directionIndicator}\n        />\n      )}\n    </>\n  );\n};\n\nConnectionLayer['displayName'] = 'ConnectionLayer';\n"],
+  "mappings": "AA6DI,mBASM,KATN;AA3DJ,SAAS,+BAA+B,kCAAkC;AAE1E,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,gCAAgC;AACzC,SAAS,wCAAwC;AACjD,SAAS,sCAAsC;AAC/C,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,0BAA0B,kCAAkC;AAKrE,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,cAAc,yBAAyB;AAC7C,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WAAW,UAAU,OAAO;AAElC,mCAAiC,OAAO,QAAQ;AAChD,iCAA+B,OAAO,OAAO;AAE7C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,kBAAe,SACd;AAAA,UAAC;AAAA;AAAA,YACC,iBACE,4BAA4B,eAAe,IACvC,kBACA;AAAA;AAAA,QAER,GACF;AAAA;AAAA,IACF;AAAA,IAEC,sBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Layer, Source } from "@vis.gl/react-maplibre";
+import { _useBehavioralTrackingProps as useBehavioralTrackingProps } from "@dynatrace/strato-components/core";
 import {
   DEFAULT_LINE_CAP,
   DEFAULT_LINE_DASH_ARRAY,
@@ -8,7 +9,8 @@ import {
   SHAPE_OPACITY_DIMMED
 } from "../../constants.js";
 const ConnectionLayerLine = (props) => {
-  const { geoJsonData, layerId, sourceId, line } = props;
+  const { geoJsonData, layerId, sourceId, line, children, ...restProps } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(restProps);
   return /* @__PURE__ */ jsxs(Source, { id: sourceId, type: "geojson", data: geoJsonData, promoteId: "id", children: [
     /* @__PURE__ */ jsx(
       Layer,
@@ -34,10 +36,11 @@ const ConnectionLayerLine = (props) => {
           ],
           "line-width": ["get", "__lineWidth"],
           ...line && line === "dashed" ? { "line-dasharray": DEFAULT_LINE_DASH_ARRAY } : null
-        }
+        },
+        ...behavioralTrackingProps
       }
     ),
-    props.children
+    children
   ] });
 };
 ConnectionLayerLine["displayName"] = "ConnectionLayerLine";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerLine.tsx"],
-  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport type { PropsWithChildren } from 'react';\n\nimport {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerLineProps<T extends Connection>\n  extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {\n  geoJsonData: GeoJSON.FeatureCollection;\n  sourceId: string;\n  line: 'dashed' | 'solid' | undefined;\n}\n\nexport const ConnectionLayerLine = <T extends Connection>(\n  props: PropsWithChildren<ConnectionLayerLineProps<T>>,\n) => {\n  const { geoJsonData, layerId, sourceId, line } = props;\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={geoJsonData} promoteId=\"id\">\n      <Layer\n        type=\"line\"\n        id={layerId}\n        layout={{\n          'line-cap': DEFAULT_LINE_CAP,\n          'line-join': DEFAULT_LINE_JOIN,\n        }}\n        paint={{\n          'line-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'line-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n          'line-width': ['get', '__lineWidth'],\n          ...(line && line === 'dashed'\n            ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n            : null),\n        }}\n      />\n      {props.children}\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
-  "mappings": "AA4BI,SACE,KADF;AA5BJ,SAAS,OAAO,cAAc;AAG9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaA,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,KAAK,IAAI;AAEjD,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA;AAAA,IACF;AAAA,IACC,MAAM;AAAA,KACT;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { Layer, Source } from '@vis.gl/react-maplibre';\nimport type { PropsWithChildren } from 'react';\n\nimport { _useBehavioralTrackingProps as useBehavioralTrackingProps } from '@dynatrace/strato-components/core';\n\nimport {\n  DEFAULT_LINE_CAP,\n  DEFAULT_LINE_DASH_ARRAY,\n  DEFAULT_LINE_JOIN,\n  SHAPE_OPACITY_DEFAULT,\n  SHAPE_OPACITY_DIMMED,\n} from '../../constants.js';\nimport type {\n  Connection,\n  InternalConnectionLayerProps,\n} from '../../types/connection-layer.js';\n\ninterface ConnectionLayerLineProps<T extends Connection>\n  extends Required<Pick<InternalConnectionLayerProps<T>, 'layerId'>> {\n  geoJsonData: GeoJSON.FeatureCollection;\n  sourceId: string;\n  line: 'dashed' | 'solid' | undefined;\n}\n\nexport const ConnectionLayerLine = <T extends Connection>(\n  props: PropsWithChildren<ConnectionLayerLineProps<T>>,\n) => {\n  const { geoJsonData, layerId, sourceId, line, children, ...restProps } =\n    props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(restProps);\n\n  return (\n    <Source id={sourceId} type=\"geojson\" data={geoJsonData} promoteId=\"id\">\n      <Layer\n        type=\"line\"\n        id={layerId}\n        layout={{\n          'line-cap': DEFAULT_LINE_CAP,\n          'line-join': DEFAULT_LINE_JOIN,\n        }}\n        paint={{\n          'line-color': [\n            'case',\n            ['boolean', ['feature-state', 'hover'], false],\n            ['get', '__lineHoveredColor'],\n            ['get', '__lineColor'],\n          ],\n          'line-opacity': [\n            'case',\n            ['boolean', ['feature-state', 'legendHover'], true],\n            SHAPE_OPACITY_DEFAULT,\n            SHAPE_OPACITY_DIMMED,\n          ],\n          'line-width': ['get', '__lineWidth'],\n          ...(line && line === 'dashed'\n            ? { 'line-dasharray': DEFAULT_LINE_DASH_ARRAY }\n            : null),\n        }}\n        {...behavioralTrackingProps}\n      />\n      {children}\n    </Source>\n  );\n};\n\nConnectionLayerLine['displayName'] = 'ConnectionLayerLine';\n"],
+  "mappings": "AAgCI,SACE,KADF;AAhCJ,SAAS,OAAO,cAAc;AAG9B,SAAS,+BAA+B,kCAAkC;AAE1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAaA,MAAM,sBAAsB,CACjC,UACG;AACH,QAAM,EAAE,aAAa,SAAS,UAAU,MAAM,UAAU,GAAG,UAAU,IACnE;AACF,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,SAAS;AAEtE,SACE,qBAAC,UAAO,IAAI,UAAU,MAAK,WAAU,MAAM,aAAa,WAAU,MAChE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,QAAQ;AAAA,UACN,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,OAAO;AAAA,UACL,cAAc;AAAA,YACZ;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,OAAO,GAAG,KAAK;AAAA,YAC7C,CAAC,OAAO,oBAAoB;AAAA,YAC5B,CAAC,OAAO,aAAa;AAAA,UACvB;AAAA,UACA,gBAAgB;AAAA,YACd;AAAA,YACA,CAAC,WAAW,CAAC,iBAAiB,aAAa,GAAG,IAAI;AAAA,YAClD;AAAA,YACA;AAAA,UACF;AAAA,UACA,cAAc,CAAC,OAAO,aAAa;AAAA,UACnC,GAAI,QAAQ,SAAS,WACjB,EAAE,kBAAkB,wBAAwB,IAC5C;AAAA,QACN;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

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

@@ -3,7 +3,7 @@ import { useRef } from "react";
 import {
   _ChartTooltip as ChartTooltip,
   _useChartActionsMenu as useChartActionsMenu
-} from "@dynatrace/strato-components-preview/charts";
+} from "@dynatrace/strato-components/charts";
 import { restoreNullProps } from "./utils/restore-null-props.js";
 import { useGetPosition } from "../../hooks/use-get-position.js";
 import {