@dynatrace/strato-geo 0.9.2 → 0.9.17

package/esm/map/MapView.js

@@ -10,11 +10,7 @@ import {
 import { useMergeRefs } from "@dynatrace/strato-components-preview/core";
 import { MapLegendRenderer } from "./components/legend/MapLegendRenderer.js";
 import { MapContent } from "./components/MapContent.js";
-import {
-  DEFAULT_LEGEND_SIZES,
-  DEFAULT_MAP_HEIGHT,
-  DEFAULT_MAP_LEGEND_RATIO
-} from "./constants.js";
+import { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from "./constants.js";
 import { LayerIdsContext } from "./contexts/layer-ids.context.js";
 import { MapConfigurationContext } from "./contexts/map-configuration.context.js";
 import { MapCountryCodeContext } from "./contexts/map-country-code.context.js";
@@ -57,15 +53,16 @@ const _MapView = forwardRef(
       }
     }));
     const config = iterateConfigSlots(children);
-    const hideLegend = !config.legend || config.legend.hidden;
+    const isLegendHidden = !config.legend || !!config.legend.hidden;
+    const legendPosition = config.legend?.position;
+    const legendRatio = config.legend?.ratio;
+    const legendOnRatioChange = config.legend?.onRatioChange;
     const { errorState } = getMapStatesTemplates(children);
     const {
       isLoading: isLoadingSettings,
       isMapEnabled,
       countryCode
     } = useMapSettings();
-    const { position: legendPosition } = config.legend ?? { position: "auto" };
-    const legendRatio = config?.legend?.type === "sequential" || config?.legend?.type === "threshold" ? DEFAULT_MAP_LEGEND_RATIO : void 0;
     const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;
     const containerStyles = { width: "100%", ...costumerStyle };
     return /* @__PURE__ */ React.createElement(
@@ -83,12 +80,13 @@ const _MapView = forwardRef(
           showLoader: loading || isLoadingSettings
         },
         /* @__PURE__ */ React.createElement(ChartLayout.Graph, null, !isLoadingSettings && /* @__PURE__ */ React.createElement(MapContent, { ref: rootRef, ...remaining }, parsedChildren)),
-        !hideLegend && /* @__PURE__ */ React.createElement(
+        !isLegendHidden && /* @__PURE__ */ React.createElement(
           ChartLayout.Legend,
           {
             position: legendPosition,
             ratio: legendRatio,
-            ratioBoundaries: DEFAULT_LEGEND_SIZES
+            ratioBoundaries: DEFAULT_LEGEND_SIZES,
+            onResize: legendOnRatioChange
           },
           /* @__PURE__ */ React.createElement(MapLegendRenderer, null)
         )

package/esm/map/MapView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/MapView.tsx"],
-  "sourcesContent": ["import React, {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n} from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport {\n  DEFAULT_LEGEND_SIZES,\n  DEFAULT_MAP_HEIGHT,\n  DEFAULT_MAP_LEGEND_RATIO,\n} from './constants.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapCountryCodeContext } from './contexts/map-country-code.context.js';\nimport { MapDataBoundingBoxContext } from './contexts/map-data-bounding-box.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { buildAndDownloadCsv } from './functions/build-and-download-csv.js';\nimport { extractLayersData } from './functions/extract-layers-data.js';\nimport { getDataLayersBoundingBox } from './functions/get-data-layers-bounding-box.js';\nimport { getMapStatesTemplates } from './functions/get-map-states-template.js';\nimport { iterateConfigSlots } from './functions/iterate-config-slots.js';\nimport { setLayersId } from './functions/set-layers-id.js';\nimport { useMapSettings } from './hooks/use-map-settings.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { DisabledState } from './slots/states/DisabledState.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren } = setLayersId(children);\n\n    const layersData = extractLayersData(parsedChildren);\n    const dataLayersBBox = getDataLayersBoundingBox(children);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<MapViewRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(forwardedRef, () => ({\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(layersData);\n      },\n    }));\n\n    const config = iterateConfigSlots(children);\n\n    const hideLegend = !config.legend || config.legend.hidden;\n\n    const { errorState } = getMapStatesTemplates(children);\n\n    const {\n      isLoading: isLoadingSettings,\n      isMapEnabled,\n      countryCode,\n    } = useMapSettings();\n\n    // TODO @Polaris missing onRatioChange props on API\n    const { position: legendPosition } = config.legend ?? { position: 'auto' };\n\n    const legendRatio =\n      config?.legend?.type === 'sequential' ||\n      config?.legend?.type === 'threshold'\n        ? DEFAULT_MAP_LEGEND_RATIO\n        : undefined;\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {!isLoadingSettings && !isMapEnabled ? (\n          <DisabledState height={chartHeight} />\n        ) : (\n          <MapCountryCodeContext.Provider value={countryCode}>\n            <MapConfigurationContext.Provider value={config}>\n              <LayerIdsContext.Provider value={layerIds}>\n                <MapRawDataContext.Provider value={layersData}>\n                  <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n                    <MapStoreProvider>\n                      <ColorScaleProvider>\n                        <LayerColorStrategyProvider>\n                          <ChartLayout\n                            chartHeight={chartHeight}\n                            errorState={errorState}\n                            showLoader={loading || isLoadingSettings}\n                          >\n                            <ChartLayout.Graph>\n                              {!isLoadingSettings && (\n                                <MapContent ref={rootRef} {...remaining}>\n                                  {parsedChildren}\n                                </MapContent>\n                              )}\n                            </ChartLayout.Graph>\n                            {!hideLegend && (\n                              <ChartLayout.Legend\n                                position={legendPosition}\n                                ratio={legendRatio}\n                                ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                              >\n                                <MapLegendRenderer />\n                              </ChartLayout.Legend>\n                            )}\n                          </ChartLayout>\n                        </LayerColorStrategyProvider>\n                      </ColorScaleProvider>\n                    </MapStoreProvider>\n                  </MapDataBoundingBoxContext.Provider>\n                </MapRawDataContext.Provider>\n              </LayerIdsContext.Provider>\n            </MapConfigurationContext.Provider>\n          </MapCountryCodeContext.Provider>\n        )}\n      </div>\n    );\n  },\n);\n\n_MapView['displayName'] = 'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  _ChartLayout as ChartLayout,\n  _coerceSizeValue as coerceSizeValue,\n} from '@dynatrace/strato-components-preview/charts';\nimport { useMergeRefs } from '@dynatrace/strato-components-preview/core';\n\nimport { MapLegendRenderer } from './components/legend/MapLegendRenderer.js';\nimport { MapContent } from './components/MapContent.js';\nimport { DEFAULT_LEGEND_SIZES, DEFAULT_MAP_HEIGHT } from './constants.js';\nimport { LayerIdsContext } from './contexts/layer-ids.context.js';\nimport { MapConfigurationContext } from './contexts/map-configuration.context.js';\nimport { MapCountryCodeContext } from './contexts/map-country-code.context.js';\nimport { MapDataBoundingBoxContext } from './contexts/map-data-bounding-box.context.js';\nimport { MapRawDataContext } from './contexts/map-raw-data.context.js';\nimport { buildAndDownloadCsv } from './functions/build-and-download-csv.js';\nimport { extractLayersData } from './functions/extract-layers-data.js';\nimport { getDataLayersBoundingBox } from './functions/get-data-layers-bounding-box.js';\nimport { getMapStatesTemplates } from './functions/get-map-states-template.js';\nimport { iterateConfigSlots } from './functions/iterate-config-slots.js';\nimport { setLayersId } from './functions/set-layers-id.js';\nimport { useMapSettings } from './hooks/use-map-settings.js';\nimport { ColorScaleProvider } from './providers/color-scale.provider.js';\nimport { LayerColorStrategyProvider } from './providers/layer-color-strategy.provider.js';\nimport { DisabledState } from './slots/states/DisabledState.js';\nimport { ErrorStateSlot } from './slots/states/ErrorStateSlot.js';\nimport { MapStoreProvider } from './store/map-store.provider.js';\n// eslint-disable-next-line no-restricted-imports\nimport './styles/react-mapgl-styles.css';\nimport type { MapViewProps, MapViewRef } from './types/map-view.js';\n\n/**\n * MapView Component\n */\nconst _MapView = forwardRef<MapViewRef, PropsWithChildren<MapViewProps>>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      loading = false,\n      style: costumerStyle,\n      className: customerClassNames,\n      ...remaining\n    } = props;\n    const { layerIds, parsedChildren } = setLayersId(children);\n\n    const layersData = extractLayersData(parsedChildren);\n    const dataLayersBBox = getDataLayersBoundingBox(children);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs<MapViewRef | HTMLDivElement>([\n      forwardedRef,\n      containerRef,\n    ]);\n\n    useImperativeHandle(forwardedRef, () => ({\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(layersData);\n      },\n    }));\n\n    const config = iterateConfigSlots(children);\n\n    const isLegendHidden = !config.legend || !!config.legend.hidden;\n    const legendPosition = config.legend?.position;\n    const legendRatio = config.legend?.ratio;\n    const legendOnRatioChange = config.legend?.onRatioChange;\n\n    const { errorState } = getMapStatesTemplates(children);\n\n    const {\n      isLoading: isLoadingSettings,\n      isMapEnabled,\n      countryCode,\n    } = useMapSettings();\n\n    const chartHeight = coerceSizeValue(props.height) || DEFAULT_MAP_HEIGHT;\n\n    const containerStyles = { width: '100%', ...costumerStyle };\n\n    return (\n      <div\n        style={containerStyles}\n        className={customerClassNames}\n        data-testid=\"mapview-container\"\n      >\n        {!isLoadingSettings && !isMapEnabled ? (\n          <DisabledState height={chartHeight} />\n        ) : (\n          <MapCountryCodeContext.Provider value={countryCode}>\n            <MapConfigurationContext.Provider value={config}>\n              <LayerIdsContext.Provider value={layerIds}>\n                <MapRawDataContext.Provider value={layersData}>\n                  <MapDataBoundingBoxContext.Provider value={dataLayersBBox}>\n                    <MapStoreProvider>\n                      <ColorScaleProvider>\n                        <LayerColorStrategyProvider>\n                          <ChartLayout\n                            chartHeight={chartHeight}\n                            errorState={errorState}\n                            showLoader={loading || isLoadingSettings}\n                          >\n                            <ChartLayout.Graph>\n                              {!isLoadingSettings && (\n                                <MapContent ref={rootRef} {...remaining}>\n                                  {parsedChildren}\n                                </MapContent>\n                              )}\n                            </ChartLayout.Graph>\n                            {!isLegendHidden && (\n                              <ChartLayout.Legend\n                                position={legendPosition}\n                                ratio={legendRatio}\n                                ratioBoundaries={DEFAULT_LEGEND_SIZES}\n                                onResize={legendOnRatioChange}\n                              >\n                                <MapLegendRenderer />\n                              </ChartLayout.Legend>\n                            )}\n                          </ChartLayout>\n                        </LayerColorStrategyProvider>\n                      </ColorScaleProvider>\n                    </MapStoreProvider>\n                  </MapDataBoundingBoxContext.Provider>\n                </MapRawDataContext.Provider>\n              </LayerIdsContext.Provider>\n            </MapConfigurationContext.Provider>\n          </MapCountryCodeContext.Provider>\n        )}\n      </div>\n    );\n  },\n);\n\n_MapView['displayName'] = 'MapView';\n\n/**\n * The `MapView` is a component that renders a map with various geospatial data layers.\n * @beta\n */\nexport const MapView = Object.assign(_MapView, {\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/constants.js

@@ -15,8 +15,9 @@ const WHOLE_WORLD_VIEW_BOUNDARIES = [
 ];
 const DEFAULT_COUNTRY_CODE = "default";
 const FIT_BOUNDS_OPTIONS = { padding: 20 };
-const DEFAULT_MAP_HEIGHT = 300;
+const DEFAULT_MAP_HEIGHT = 400;
 const DEFAULT_MAP_LEGEND_RATIO = 12;
+const DEFAULT_MAP_POSITION = "auto";
 const DEFAULT_INPUT_ICON_SIZE = 20;
 const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;
 const BASE_LAYER_IDS = ["geojson-line", "geojson-fill"];
@@ -62,7 +63,7 @@ const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];
 const MIN_LINE_THICKNESS = 1;
 const MAX_LINE_THICKNESS = 64;
 const DIRECTION_ICON_OUTPUT_SIZE = 128;
-const DIRECTION_ICON_SHRINK_RATIO = 1 / 24;
+const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;
 const ACTIVE_STATE_BORDERS_WIDTH = 1.8;
 const DEFAULT_CHOROPLETH_COLOR = Colors.Charts.Sequential.Blue.Color05.Default;
 const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({
@@ -99,6 +100,7 @@ export {
   DEFAULT_LINE_THICKNESS,
   DEFAULT_MAP_HEIGHT,
   DEFAULT_MAP_LEGEND_RATIO,
+  DEFAULT_MAP_POSITION,
   DEFAULT_RADIUS,
   DEFAULT_RADIUS_EXPRESSION,
   DEFAULT_RANGE_COLOR,

package/esm/map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/map/constants.ts"],
-  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR = Colors.Theme.Neutral['50'];\nexport const DEFAULT_COUNTRIES_BORDER_COLOR = Colors.Background.Surface.Default;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\nexport const MAX_LATITUDE = 90;\nexport const MIN_LATITUDE = -90;\nexport const MAX_LONGITUDE = 180;\nexport const MIN_LONGITUDE = -180;\nexport const WHOLE_WORLD_VIEW_BOUNDARIES: [number, number, number, number] = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 300;\nexport const DEFAULT_MAP_LEGEND_RATIO = 12;\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;\nexport const BASE_LAYER_IDS = ['geojson-line', 'geojson-fill'];\nexport const SHAPE_OPACITY = 1;\nexport const DEFAULT_SYMBOL_SIZE = 32;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Field.Neutral.Disabled;\nexport const LEGEND_DIM_OPACITY = 0.2;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 24;\n//endregion\n\n//region CHOROPLETH LAYER\n\nexport const ACTIVE_STATE_BORDERS_WIDTH = 1.8;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAE/B,OAAO,YAAY;AAGZ,MAAM,+BAA+B,OAAO,MAAM,QAAQ,IAAI;AAC9D,MAAM,iCAAiC,OAAO,WAAW,QAAQ;AACjE,MAAM,2BAA2B;AACjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,8BAAgE;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAC3C,MAAM,iBAAiB,CAAC,gBAAgB,cAAc;AACtD,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAI5B,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,MAAM,QAAQ;AAC5D,MAAM,qBAAqB;AAC3B,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAKxC,MAAM,6BAA6B;AAEnC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "sourcesContent": ["import type { ExpressionSpecification } from '@maplibre/maplibre-gl-style-spec';\nimport { defineMessages } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\n//region GENERAL\nexport const DEFAULT_COUNTRIES_FILL_COLOR = Colors.Theme.Neutral['50'];\nexport const DEFAULT_COUNTRIES_BORDER_COLOR = Colors.Background.Surface.Default;\nexport const TRANSPARENT_BORDER_COLOR = '#00000000';\nexport const MAX_LATITUDE = 90;\nexport const MIN_LATITUDE = -90;\nexport const MAX_LONGITUDE = 180;\nexport const MIN_LONGITUDE = -180;\nexport const WHOLE_WORLD_VIEW_BOUNDARIES: [number, number, number, number] = [\n  MAX_LONGITUDE,\n  MAX_LATITUDE,\n  MIN_LONGITUDE,\n  MIN_LATITUDE,\n];\nexport const DEFAULT_COUNTRY_CODE = 'default';\nexport const FIT_BOUNDS_OPTIONS = { padding: 20 };\nexport const DEFAULT_MAP_HEIGHT = 400;\nexport const DEFAULT_MAP_LEGEND_RATIO = 12;\nexport const DEFAULT_MAP_POSITION = 'auto';\nexport const DEFAULT_INPUT_ICON_SIZE = 20;\nexport const ACTIVE_COLOR = Colors.Border.Neutral.AccentActive;\nexport const BASE_LAYER_IDS = ['geojson-line', 'geojson-fill'];\nexport const SHAPE_OPACITY = 1;\nexport const DEFAULT_SYMBOL_SIZE = 32;\n//endregion\n\n//region LEGEND\nexport const DEFAULT_BASIC_SHAPE_COLOR_TOKEN =\n  Colors.Charts.CategoricalThemed.PurpleRain.Color01;\nexport const DEFAULT_LEGEND_SIZES = {\n  // Minimum size in which the legend can be resized (vertical layout)\n  minWidth: 0.1,\n  // Minimum size in which the legend can be resized (horizontal layout)\n  minHeight: 0.1,\n  // Maximum size in which the legend can be resized (vertical layout). 80% represent 4 / 5ths of the container.\n  maxWidth: 0.8,\n  // Maximum size in which the legend can be resized (horizontal layout). 80% represent 4 / 5ths of the container.\n  maxHeight: 0.8,\n};\nexport const DEFAULT_FORMATTER = {\n  maximumFractionDigits: 1,\n};\nexport const DEFAULT_RANGE_COLOR = Colors.Background.Field.Neutral.Disabled;\nexport const LEGEND_DIM_OPACITY = 0.2;\nexport const DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE = 'blue';\n//endregion\n\n//region DOT LAYER\nexport const ICON_BACKGROUND_OPACITY = 0.7;\nexport const ICON_BACKGROUND_RADIUS = 16;\nexport const DEFAULT_ICON_BACKGROUND_COLOR =\n  Colors.Background.Container.Neutral.Subdued;\nexport const DEFAULT_ICON_SIZE_RATIO = 0.6;\nexport const DEFAULT_SHAPE_COLOR = Colors.Charts.Categorical.Color15.Default;\nexport const DEFAULT_ICON_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region BUBBLE LAYER\nexport const DEFAULT_BUBBLE_COLOR = Colors.Charts.Categorical.Color07.Default;\nexport const DEFAULT_RADIUS = 12;\nexport const BUBBLE_DEFAULT_OPACITY = 0.4;\nexport const BUBBLE_STROKE = 1;\nexport const BUBBLE_OUTLINE_STROKE = 1;\nexport const DEFAULT_RADIUS_EXPRESSION: ExpressionSpecification = [\n  'get',\n  '__radius',\n];\n//endregion\n\n//region CONNECTION LAYER\nexport const DEFAULT_LINE_JOIN: 'bevel' | 'round' | 'miter' = 'miter';\nexport const DEFAULT_LINE_CAP: 'butt' | 'round' | 'square' = 'butt';\nexport const DEFAULT_LINE_THICKNESS = 2;\nexport const DEFAULT_LINE_COLOR = Colors.Charts.Categorical.Color03.Default;\nexport const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];\nexport const MIN_LINE_THICKNESS = 1;\nexport const MAX_LINE_THICKNESS = 64;\nexport const DIRECTION_ICON_OUTPUT_SIZE = 128;\nexport const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;\n//endregion\n\n//region CHOROPLETH LAYER\n\nexport const ACTIVE_STATE_BORDERS_WIDTH = 1.8;\n\nexport const DEFAULT_CHOROPLETH_COLOR =\n  Colors.Charts.Sequential.Blue.Color05.Default;\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionCoords: {\n    id: 'g2qESM+ibB5sUyjf',\n    defaultMessage: 'Copy coordinates',\n    description:\n      'Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates',\n  },\n});\n//endregion\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAE/B,OAAO,YAAY;AAGZ,MAAM,+BAA+B,OAAO,MAAM,QAAQ,IAAI;AAC9D,MAAM,iCAAiC,OAAO,WAAW,QAAQ;AACjE,MAAM,2BAA2B;AACjC,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,8BAAgE;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AACO,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB,EAAE,SAAS,GAAG;AACzC,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,eAAe,OAAO,OAAO,QAAQ;AAC3C,MAAM,iBAAiB,CAAC,gBAAgB,cAAc;AACtD,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAI5B,MAAM,kCACX,OAAO,OAAO,kBAAkB,WAAW;AACtC,MAAM,uBAAuB;AAAA;AAAA,EAElC,UAAU;AAAA;AAAA,EAEV,WAAW;AAAA;AAAA,EAEX,UAAU;AAAA;AAAA,EAEV,WAAW;AACb;AACO,MAAM,oBAAoB;AAAA,EAC/B,uBAAuB;AACzB;AACO,MAAM,sBAAsB,OAAO,WAAW,MAAM,QAAQ;AAC5D,MAAM,qBAAqB;AAC3B,MAAM,0CAA0C;AAIhD,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAC/B,MAAM,gCACX,OAAO,WAAW,UAAU,QAAQ;AAC/B,MAAM,0BAA0B;AAChC,MAAM,sBAAsB,OAAO,OAAO,YAAY,QAAQ;AAC9D,MAAM,qBAAqB,OAAO,KAAK,QAAQ;AAI/C,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAC/D,MAAM,iBAAiB;AACvB,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,wBAAwB;AAC9B,MAAM,4BAAqD;AAAA,EAChE;AAAA,EACA;AACF;AAIO,MAAM,oBAAiD;AACvD,MAAM,mBAAgD;AACtD,MAAM,yBAAyB;AAC/B,MAAM,qBAAqB,OAAO,OAAO,YAAY,QAAQ;AAC7D,MAAM,0BAA0B,CAAC,GAAG,GAAG;AACvC,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAC3B,MAAM,6BAA6B;AACnC,MAAM,8BAA8B,IAAI;AAKxC,MAAM,6BAA6B;AAEnC,MAAM,2BACX,OAAO,OAAO,WAAW,KAAK,QAAQ;AAEjC,MAAM,6BAA6B,eAAe;AAAA,EACvD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
   "names": []
 }

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

@@ -1,7 +1,11 @@
 import React from "react";
 import { isElement } from "react-is";
 import { ChartToolbar } from "@dynatrace/strato-components-preview/charts";
-import { DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE } from "../constants.js";
+import {
+  DEFAULT_MAP_LEGEND_RATIO,
+  DEFAULT_MAP_POSITION,
+  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE
+} from "../constants.js";
 import { CategoricalLegend } from "../slots/CategoricalLegend.js";
 import { ChartInteractions } from "../slots/ChartInteractions.js";
 import { SequentialLegend } from "../slots/SequentialLegend.js";
@@ -46,6 +50,8 @@ const iterateConfigSlots = (children) => {
             legend: {
               type: "sequential",
               colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,
+              position: DEFAULT_MAP_POSITION,
+              ratio: DEFAULT_MAP_LEGEND_RATIO,
               ...legend
             }
           };
@@ -57,6 +63,7 @@ const iterateConfigSlots = (children) => {
             ...slots,
             legend: {
               type: "categorical",
+              position: DEFAULT_MAP_POSITION,
               ...legend
             }
           };
@@ -68,6 +75,8 @@ const iterateConfigSlots = (children) => {
             ...slots,
             legend: {
               type: "threshold",
+              position: DEFAULT_MAP_POSITION,
+              ratio: DEFAULT_MAP_LEGEND_RATIO,
               ...legend
             }
           };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/functions/iterate-config-slots.ts"],
-  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport { DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE } from '../constants.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type { ChartInteractionsConfig } from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (children: React.ReactNode) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ChartInteractions: {\n          const { children, ...previousInteractions } = child.props;\n\n          const interactions = iterateChartInteractionsSlots(children);\n\n          slots = {\n            ...slots,\n            interactions: {\n              ...previousInteractions,\n              ...interactions,\n            },\n          };\n          break;\n        }\n\n        case ChartToolbar: {\n          const { children, ...toolbar } = child.props;\n          const childrenToolbar = iterateChartToolbarSlots(children);\n\n          slots = {\n            ...slots,\n            toolbar: {\n              ...toolbar,\n              ...childrenToolbar,\n            },\n          };\n          break;\n        }\n\n        case SequentialLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'sequential',\n              colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case CategoricalLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'categorical',\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case ThresholdLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'threshold',\n              ...legend,\n            },\n          };\n          break;\n        }\n      }\n    }\n  });\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: React.ReactElement[]) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  React.Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        case ChartInteractions.Zoom:\n          interactions = { ...interactions, zoom: { enabled: true } };\n          break;\n        case ChartInteractions.ZoomToFit:\n          interactions = { ...interactions, zoomToFit: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: React.ReactElement[]) => {\n  let toolbar = {};\n\n  React.Children.forEach(children, (childToolbar) => {\n    if (\n      isElement(childToolbar) &&\n      childToolbar.type === ChartToolbar.DownloadData\n    ) {\n      toolbar = {\n        ...toolbar,\n        downloadData: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAE7B,SAAS,+CAA+C;AACxD,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AASzB,MAAM,qBAAqB,CAAC,aAA8B;AAC/D,MAAI,QAAmB;AAAA,IACrB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,EACV;AAEA,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK,mBAAmB;AACtB,gBAAM,EAAE,UAAAA,WAAU,GAAG,qBAAqB,IAAI,MAAM;AAEpD,gBAAM,eAAe,8BAA8BA,SAAQ;AAE3D,kBAAQ;AAAA,YACN,GAAG;AAAA,YACH,cAAc;AAAA,cACZ,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UACF;AACA;AAAA,QACF;AAAA,QAEA,KAAK,cAAc;AACjB,gBAAM,EAAE,UAAAA,WAAU,GAAG,QAAQ,IAAI,MAAM;AACvC,gBAAM,kBAAkB,yBAAyBA,SAAQ;AAEzD,kBAAQ;AAAA,YACN,GAAG;AAAA,YACH,SAAS;AAAA,cACP,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UACF;AACA;AAAA,QACF;AAAA,QAEA,KAAK,kBAAkB;AACrB,gBAAM,EAAE,UAAAA,WAAU,GAAG,OAAO,IAAI,MAAM;AAEtC,kBAAQ;AAAA,YACN,GAAG;AAAA,YACH,QAAQ;AAAA,cACN,MAAM;AAAA,cACN,cAAc;AAAA,cACd,GAAG;AAAA,YACL;AAAA,UACF;AACA;AAAA,QACF;AAAA,QAEA,KAAK,mBAAmB;AACtB,gBAAM,EAAE,UAAAA,WAAU,GAAG,OAAO,IAAI,MAAM;AAEtC,kBAAQ;AAAA,YACN,GAAG;AAAA,YACH,QAAQ;AAAA,cACN,MAAM;AAAA,cACN,GAAG;AAAA,YACL;AAAA,UACF;AACA;AAAA,QACF;AAAA,QAEA,KAAK,iBAAiB;AACpB,gBAAM,EAAE,UAAAA,WAAU,GAAG,OAAO,IAAI,MAAM;AAEtC,kBAAQ;AAAA,YACN,GAAG;AAAA,YACH,QAAQ;AAAA,cACN,MAAM;AAAA,cACN,GAAG;AAAA,YACL;AAAA,UACF;AACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,gCAAgC,CAAC,aAAmC;AACxE,MAAI,eAAwC,CAAC;AAE7C,QAAM,SAAS,QAAQ,UAAU,CAAC,sBAAsB;AACtD,QAAI,UAAU,iBAAiB,GAAG;AAChC,cAAQ,kBAAkB,MAAM;AAAA,QAC9B,KAAK,kBAAkB;AACrB,yBAAe,EAAE,GAAG,cAAc,MAAM,EAAE,SAAS,KAAK,EAAE;AAC1D;AAAA,QACF,KAAK,kBAAkB;AACrB,yBAAe,EAAE,GAAG,cAAc,WAAW,EAAE,SAAS,KAAK,EAAE;AAC/D;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOA,MAAM,2BAA2B,CAAC,aAAmC;AACnE,MAAI,UAAU,CAAC;AAEf,QAAM,SAAS,QAAQ,UAAU,CAAC,iBAAiB;AACjD,QACE,UAAU,YAAY,KACtB,aAAa,SAAS,aAAa,cACnC;AACA,gBAAU;AAAA,QACR,GAAG;AAAA,QACH,cAAc,EAAE,SAAS,KAAK;AAAA,MAChC;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type { ChartInteractionsConfig } from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (children: React.ReactNode) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ChartInteractions: {\n          const { children, ...previousInteractions } = child.props;\n\n          const interactions = iterateChartInteractionsSlots(children);\n\n          slots = {\n            ...slots,\n            interactions: {\n              ...previousInteractions,\n              ...interactions,\n            },\n          };\n          break;\n        }\n\n        case ChartToolbar: {\n          const { children, ...toolbar } = child.props;\n          const childrenToolbar = iterateChartToolbarSlots(children);\n\n          slots = {\n            ...slots,\n            toolbar: {\n              ...toolbar,\n              ...childrenToolbar,\n            },\n          };\n          break;\n        }\n\n        case SequentialLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'sequential',\n              colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case CategoricalLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'categorical',\n              position: DEFAULT_MAP_POSITION,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case ThresholdLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'threshold',\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n            },\n          };\n          break;\n        }\n      }\n    }\n  });\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: React.ReactElement[]) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  React.Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        case ChartInteractions.Zoom:\n          interactions = { ...interactions, zoom: { enabled: true } };\n          break;\n        case ChartInteractions.ZoomToFit:\n          interactions = { ...interactions, zoomToFit: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: React.ReactElement[]) => {\n  let toolbar = {};\n\n  React.Children.forEach(children, (childToolbar) => {\n    if (\n      isElement(childToolbar) &&\n      childToolbar.type === ChartToolbar.DownloadData\n    ) {\n      toolbar = {\n        ...toolbar,\n        downloadData: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
+  "mappings": "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",
   "names": ["children"]
 }

package/esm/map/functions/set-layers-id.js

@@ -34,6 +34,7 @@ const setLayersId = (children) => {
           };
           return {
             ...child,
+            key: layerId,
             props: newProps,
             type: layer?.component
           };

package/esm/map/functions/set-layers-id.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/functions/set-layers-id.ts"],
-  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { BubbleLayer as _BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer as _ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer as _ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer as _DotLayer } from '../components/DotLayer/DotLayer.js';\nimport { BubbleLayer } from '../slots/BubbleLayer.js';\nimport { ChoroplethLayer } from '../slots/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../slots/ConnectionLayer.js';\nimport { DotLayer } from '../slots/DotLayer.js';\nimport type { InternalBubbleLayerProps } from '../types/bubble-layer.js';\nimport type { InternalChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport type { InternalConnectionLayerProps } from '../types/connection-layer.js';\nimport type { InternalDotLayerProps } from '../types/dot-layer.js';\n\nconst layers = new WeakMap<\n  React.JSXElementConstructor<never>,\n  { prefix: string; component: React.JSXElementConstructor<never> }\n>([\n  [BubbleLayer, { component: _BubbleLayer, prefix: 'bubble' }],\n  [DotLayer, { component: _DotLayer, prefix: 'dot' }],\n  [ChoroplethLayer, { component: _ChoroplethLayer, prefix: 'choropleth' }],\n  [ConnectionLayer, { component: _ConnectionLayer, prefix: 'connection' }],\n]);\n\n/**\n * Set layers id to layer slots provided by the consumer.\n * @param children - MapView children\n * @returns An array with all the layers IDs and the children using the layer component\n */\nexport const setLayersId = (children: React.ReactNode) => {\n  const layerIds: string[] = [];\n  let index = 0;\n\n  const parsedChildren = React.Children.map(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case BubbleLayer:\n        case ConnectionLayer:\n        case ChoroplethLayer:\n        case DotLayer: {\n          const layer = layers.get(child.type);\n\n          const layerId = `${layer?.prefix}-${index}`;\n          index += 1;\n\n          layerIds.push(layerId);\n\n          const newProps: React.PropsWithChildren<\n            | InternalBubbleLayerProps<never>\n            | InternalConnectionLayerProps<never>\n            | InternalDotLayerProps<never>\n            | InternalChoroplethLayerProps<never>\n          > = {\n            ...child.props,\n            layerId,\n          };\n\n          return {\n            ...child,\n            props: newProps,\n            type: layer?.component,\n          };\n        }\n        default: {\n          return child;\n        }\n      }\n    }\n\n    return child;\n  }) as React.ReactNode;\n\n  return { layerIds, parsedChildren };\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAE1B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,YAAY,iBAAiB;AACtC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMzB,MAAM,SAAS,IAAI,QAGjB;AAAA,EACA,CAAC,aAAa,EAAE,WAAW,cAAc,QAAQ,SAAS,CAAC;AAAA,EAC3D,CAAC,UAAU,EAAE,WAAW,WAAW,QAAQ,MAAM,CAAC;AAAA,EAClD,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AAAA,EACvE,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AACzE,CAAC;AAOM,MAAM,cAAc,CAAC,aAA8B;AACxD,QAAM,WAAqB,CAAC;AAC5B,MAAI,QAAQ;AAEZ,QAAM,iBAAiB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC7D,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,UAAU;AACb,gBAAM,QAAQ,OAAO,IAAI,MAAM,IAAI;AAEnC,gBAAM,UAAU,GAAG,OAAO,MAAM,IAAI,KAAK;AACzC,mBAAS;AAET,mBAAS,KAAK,OAAO;AAErB,gBAAM,WAKF;AAAA,YACF,GAAG,MAAM;AAAA,YACT;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,OAAO;AAAA,YACP,MAAM,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,UAAU,eAAe;AACpC;",
+  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { BubbleLayer as _BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer as _ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer as _ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer as _DotLayer } from '../components/DotLayer/DotLayer.js';\nimport { BubbleLayer } from '../slots/BubbleLayer.js';\nimport { ChoroplethLayer } from '../slots/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../slots/ConnectionLayer.js';\nimport { DotLayer } from '../slots/DotLayer.js';\nimport type { InternalBubbleLayerProps } from '../types/bubble-layer.js';\nimport type { InternalChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport type { InternalConnectionLayerProps } from '../types/connection-layer.js';\nimport type { InternalDotLayerProps } from '../types/dot-layer.js';\n\nconst layers = new WeakMap<\n  React.JSXElementConstructor<never>,\n  { prefix: string; component: React.JSXElementConstructor<never> }\n>([\n  [BubbleLayer, { component: _BubbleLayer, prefix: 'bubble' }],\n  [DotLayer, { component: _DotLayer, prefix: 'dot' }],\n  [ChoroplethLayer, { component: _ChoroplethLayer, prefix: 'choropleth' }],\n  [ConnectionLayer, { component: _ConnectionLayer, prefix: 'connection' }],\n]);\n\n/**\n * Set layers id to layer slots provided by the consumer.\n * @param children - MapView children\n * @returns An array with all the layers IDs and the children using the layer component\n */\nexport const setLayersId = (children: React.ReactNode) => {\n  const layerIds: string[] = [];\n  let index = 0;\n\n  const parsedChildren = React.Children.map(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case BubbleLayer:\n        case ConnectionLayer:\n        case ChoroplethLayer:\n        case DotLayer: {\n          const layer = layers.get(child.type);\n\n          const layerId = `${layer?.prefix}-${index}`;\n          index += 1;\n\n          layerIds.push(layerId);\n\n          const newProps: React.PropsWithChildren<\n            | InternalBubbleLayerProps<never>\n            | InternalConnectionLayerProps<never>\n            | InternalDotLayerProps<never>\n            | InternalChoroplethLayerProps<never>\n          > = {\n            ...child.props,\n            layerId,\n          };\n\n          return {\n            ...child,\n            key: layerId,\n            props: newProps,\n            type: layer?.component,\n          };\n        }\n        default: {\n          return child;\n        }\n      }\n    }\n\n    return child;\n  }) as React.ReactNode;\n\n  return { layerIds, parsedChildren };\n};\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAE1B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,YAAY,iBAAiB;AACtC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMzB,MAAM,SAAS,IAAI,QAGjB;AAAA,EACA,CAAC,aAAa,EAAE,WAAW,cAAc,QAAQ,SAAS,CAAC;AAAA,EAC3D,CAAC,UAAU,EAAE,WAAW,WAAW,QAAQ,MAAM,CAAC;AAAA,EAClD,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AAAA,EACvE,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AACzE,CAAC;AAOM,MAAM,cAAc,CAAC,aAA8B;AACxD,QAAM,WAAqB,CAAC;AAC5B,MAAI,QAAQ;AAEZ,QAAM,iBAAiB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC7D,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,UAAU;AACb,gBAAM,QAAQ,OAAO,IAAI,MAAM,IAAI;AAEnC,gBAAM,UAAU,GAAG,OAAO,MAAM,IAAI,KAAK;AACzC,mBAAS;AAET,mBAAS,KAAK,OAAO;AAErB,gBAAM,WAKF;AAAA,YACF,GAAG,MAAM;AAAA,YACT;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,UAAU,eAAe;AACpC;",
   "names": []
 }

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

@@ -1,18 +1,3 @@
-/**
- * @license
- * Copyright 2023 Dynatrace LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 import { useEffect, useRef } from "react";
 const useMapPerformance = (mapContainerRef) => {
   const isDev = true;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-map-performance.ts"],
-  "sourcesContent": ["/**\n * @license\n * Copyright 2023 Dynatrace LLC\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useRef } from 'react';\n\nexport const useMapPerformance = (\n  mapContainerRef: React.RefObject<HTMLDivElement>,\n) => {\n  const isDev = process.env.NODE_ENV === 'development';\n  const isRendered = useRef(false);\n  let startTime: number | null;\n\n  const onRenderHandler = isDev\n    ? () => {\n        if (!isRendered.current) {\n          if (!startTime) {\n            startTime = performance.now();\n          } else {\n            mapContainerRef.current?.setAttribute(\n              'data-render',\n              (performance.now() - startTime).toString(),\n            );\n          }\n        }\n      }\n    : undefined;\n\n  const onLoadHandler = isDev\n    ? () => {\n        startTime = null;\n        isRendered.current = true;\n      }\n    : undefined;\n\n  useEffect(\n    () => () => {\n      if (isDev) {\n        isRendered.current = false;\n      }\n    },\n    [isDev],\n  );\n\n  return {\n    onLoadHandler,\n    onRenderHandler,\n  };\n};\n"],
-  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA,SAAS,WAAW,cAAc;AAE3B,MAAM,oBAAoB,CAC/B,oBACG;AACH,QAAM,QAAQ;AACd,QAAM,aAAa,OAAO,KAAK;AAC/B,MAAI;AAEJ,QAAM,kBAAkB,QACpB,MAAM;AACJ,QAAI,CAAC,WAAW,SAAS;AACvB,UAAI,CAAC,WAAW;AACd,oBAAY,YAAY,IAAI;AAAA,MAC9B,OAAO;AACL,wBAAgB,SAAS;AAAA,UACvB;AAAA,WACC,YAAY,IAAI,IAAI,WAAW,SAAS;AAAA,QAC3C;AAAA,MACF;AAAA,IACF;AAAA,EACF,IACA;AAEJ,QAAM,gBAAgB,QAClB,MAAM;AACJ,gBAAY;AACZ,eAAW,UAAU;AAAA,EACvB,IACA;AAEJ;AAAA,IACE,MAAM,MAAM;AACV,UAAI,OAAO;AACT,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\n\nexport const useMapPerformance = (\n  mapContainerRef: React.RefObject<HTMLDivElement>,\n) => {\n  const isDev = process.env.NODE_ENV === 'development';\n  const isRendered = useRef(false);\n  let startTime: number | null;\n\n  const onRenderHandler = isDev\n    ? () => {\n        if (!isRendered.current) {\n          if (!startTime) {\n            startTime = performance.now();\n          } else {\n            mapContainerRef.current?.setAttribute(\n              'data-render',\n              (performance.now() - startTime).toString(),\n            );\n          }\n        }\n      }\n    : undefined;\n\n  const onLoadHandler = isDev\n    ? () => {\n        startTime = null;\n        isRendered.current = true;\n      }\n    : undefined;\n\n  useEffect(\n    () => () => {\n      if (isDev) {\n        isRendered.current = false;\n      }\n    },\n    [isDev],\n  );\n\n  return {\n    onLoadHandler,\n    onRenderHandler,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,WAAW,cAAc;AAE3B,MAAM,oBAAoB,CAC/B,oBACG;AACH,QAAM,QAAQ;AACd,QAAM,aAAa,OAAO,KAAK;AAC/B,MAAI;AAEJ,QAAM,kBAAkB,QACpB,MAAM;AACJ,QAAI,CAAC,WAAW,SAAS;AACvB,UAAI,CAAC,WAAW;AACd,oBAAY,YAAY,IAAI;AAAA,MAC9B,OAAO;AACL,wBAAgB,SAAS;AAAA,UACvB;AAAA,WACC,YAAY,IAAI,IAAI,WAAW,SAAS;AAAA,QAC3C;AAAA,MACF;AAAA,IACF;AAAA,EACF,IACA;AAEJ,QAAM,gBAAgB,QAClB,MAAM;AACJ,gBAAY;AACZ,eAAW,UAAU;AAAA,EACvB,IACA;AAEJ;AAAA,IACE,MAAM,MAAM;AACV,UAAI,OAAO;AACT,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/map/MapView.js

@@ -78,15 +78,16 @@ const _MapView = (0, import_react.forwardRef)(
       }
     }));
     const config = (0, import_iterate_config_slots.iterateConfigSlots)(children);
-    const hideLegend = !config.legend || config.legend.hidden;
+    const isLegendHidden = !config.legend || !!config.legend.hidden;
+    const legendPosition = config.legend?.position;
+    const legendRatio = config.legend?.ratio;
+    const legendOnRatioChange = config.legend?.onRatioChange;
     const { errorState } = (0, import_get_map_states_template.getMapStatesTemplates)(children);
     const {
       isLoading: isLoadingSettings,
       isMapEnabled,
       countryCode
     } = (0, import_use_map_settings.useMapSettings)();
-    const { position: legendPosition } = config.legend ?? { position: "auto" };
-    const legendRatio = config?.legend?.type === "sequential" || config?.legend?.type === "threshold" ? import_constants.DEFAULT_MAP_LEGEND_RATIO : void 0;
     const chartHeight = (0, import_charts._coerceSizeValue)(props.height) || import_constants.DEFAULT_MAP_HEIGHT;
     const containerStyles = { width: "100%", ...costumerStyle };
     return /* @__PURE__ */ import_react.default.createElement(
@@ -104,12 +105,13 @@ const _MapView = (0, import_react.forwardRef)(
           showLoader: loading || isLoadingSettings
         },
         /* @__PURE__ */ import_react.default.createElement(import_charts._ChartLayout.Graph, null, !isLoadingSettings && /* @__PURE__ */ import_react.default.createElement(import_MapContent.MapContent, { ref: rootRef, ...remaining }, parsedChildren)),
-        !hideLegend && /* @__PURE__ */ import_react.default.createElement(
+        !isLegendHidden && /* @__PURE__ */ import_react.default.createElement(
           import_charts._ChartLayout.Legend,
           {
             position: legendPosition,
             ratio: legendRatio,
-            ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES
+            ratioBoundaries: import_constants.DEFAULT_LEGEND_SIZES,
+            onResize: legendOnRatioChange
           },
           /* @__PURE__ */ import_react.default.createElement(import_MapLegendRenderer.MapLegendRenderer, null)
         )

package/map/constants.d.ts

@@ -11,8 +11,9 @@ export declare const DEFAULT_COUNTRY_CODE = "default";
 export declare const FIT_BOUNDS_OPTIONS: {
     padding: number;
 };
-export declare const DEFAULT_MAP_HEIGHT = 300;
+export declare const DEFAULT_MAP_HEIGHT = 400;
 export declare const DEFAULT_MAP_LEGEND_RATIO = 12;
+export declare const DEFAULT_MAP_POSITION = "auto";
 export declare const DEFAULT_INPUT_ICON_SIZE = 20;
 export declare const ACTIVE_COLOR: string;
 export declare const BASE_LAYER_IDS: string[];

package/map/constants.js

@@ -53,6 +53,7 @@ __export(constants_exports, {
   DEFAULT_LINE_THICKNESS: () => DEFAULT_LINE_THICKNESS,
   DEFAULT_MAP_HEIGHT: () => DEFAULT_MAP_HEIGHT,
   DEFAULT_MAP_LEGEND_RATIO: () => DEFAULT_MAP_LEGEND_RATIO,
+  DEFAULT_MAP_POSITION: () => DEFAULT_MAP_POSITION,
   DEFAULT_RADIUS: () => DEFAULT_RADIUS,
   DEFAULT_RADIUS_EXPRESSION: () => DEFAULT_RADIUS_EXPRESSION,
   DEFAULT_RANGE_COLOR: () => DEFAULT_RANGE_COLOR,
@@ -93,8 +94,9 @@ const WHOLE_WORLD_VIEW_BOUNDARIES = [
 ];
 const DEFAULT_COUNTRY_CODE = "default";
 const FIT_BOUNDS_OPTIONS = { padding: 20 };
-const DEFAULT_MAP_HEIGHT = 300;
+const DEFAULT_MAP_HEIGHT = 400;
 const DEFAULT_MAP_LEGEND_RATIO = 12;
+const DEFAULT_MAP_POSITION = "auto";
 const DEFAULT_INPUT_ICON_SIZE = 20;
 const ACTIVE_COLOR = import_colors.default.Border.Neutral.AccentActive;
 const BASE_LAYER_IDS = ["geojson-line", "geojson-fill"];
@@ -140,7 +142,7 @@ const DEFAULT_LINE_DASH_ARRAY = [5, 2.5];
 const MIN_LINE_THICKNESS = 1;
 const MAX_LINE_THICKNESS = 64;
 const DIRECTION_ICON_OUTPUT_SIZE = 128;
-const DIRECTION_ICON_SHRINK_RATIO = 1 / 24;
+const DIRECTION_ICON_SHRINK_RATIO = 1 / 15;
 const ACTIVE_STATE_BORDERS_WIDTH = 1.8;
 const DEFAULT_CHOROPLETH_COLOR = import_colors.default.Charts.Sequential.Blue.Color05.Default;
 const COPY_TO_CLIPBOARD_MESSAGES = (0, import_react_intl.defineMessages)({

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

@@ -78,6 +78,8 @@ const iterateConfigSlots = (children) => {
             legend: {
               type: "sequential",
               colorPalette: import_constants.DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,
+              position: import_constants.DEFAULT_MAP_POSITION,
+              ratio: import_constants.DEFAULT_MAP_LEGEND_RATIO,
               ...legend
             }
           };
@@ -89,6 +91,7 @@ const iterateConfigSlots = (children) => {
             ...slots,
             legend: {
               type: "categorical",
+              position: import_constants.DEFAULT_MAP_POSITION,
               ...legend
             }
           };
@@ -100,6 +103,8 @@ const iterateConfigSlots = (children) => {
             ...slots,
             legend: {
               type: "threshold",
+              position: import_constants.DEFAULT_MAP_POSITION,
+              ratio: import_constants.DEFAULT_MAP_LEGEND_RATIO,
               ...legend
             }
           };

package/map/functions/set-layers-id.js

@@ -66,6 +66,7 @@ const setLayersId = (children) => {
           };
           return {
             ...child,
+            key: layerId,
             props: newProps,
             type: layer?.component
           };

package/map/hooks/use-map-performance.d.ts

@@ -1,18 +1,3 @@
-/**
- * @license
- * Copyright 2023 Dynatrace LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 export declare const useMapPerformance: (mapContainerRef: React.RefObject<HTMLDivElement>) => {
     onLoadHandler: (() => void) | undefined;
     onRenderHandler: (() => void) | undefined;

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

@@ -21,21 +21,6 @@ __export(use_map_performance_exports, {
 });
 module.exports = __toCommonJS(use_map_performance_exports);
 var import_react = require("react");
-/**
- * @license
- * Copyright 2023 Dynatrace LLC
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 const useMapPerformance = (mapContainerRef) => {
   const isDev = true;
   const isRendered = (0, import_react.useRef)(false);

package/map/types/legend.d.ts

@@ -1,17 +1,6 @@
-import type { ColoredRange, ColorPalette, LegendPosition } from '@dynatrace/strato-components-preview/charts';
+import type { ColoredRange, ColorPalette, LegendProps } from '@dynatrace/strato-components-preview/charts';
 /** The props common to all different legends */
-export interface BaseLegendProps {
-    /**
-     * The legend position relative to the map
-     * @defaultValue 'auto'
-     */
-    position?: LegendPosition;
-    /**
-     * Hides the legend while keeping the coloring
-     * @defaultValue false
-     */
-    hidden?: boolean;
-}
+export type BaseLegendProps = Omit<LegendProps, 'resizable'>;
 /** The sequential legend props */
 export interface SequentialLegendProps extends BaseLegendProps {
     /** The min boundary */
@@ -34,18 +23,7 @@ export interface ThresholdLegendProps extends BaseLegendProps {
     ranges: ColoredRange[];
 }
 /** The internal configs common to all different legends */
-export interface BaseLegendConfig {
-    /**
-     * The legend position relative to the map
-     * @defaultValue 'auto'
-     */
-    position: LegendPosition;
-    /**
-     * Hides the legend while keeping the coloring
-     * @defaultValue 'false'
-     */
-    hidden: boolean;
-}
+export type BaseLegendConfig = Omit<LegendProps, 'resizable'>;
 /** The sequential legend internal config */
 export interface SequentialLegendConfig extends BaseLegendConfig {
     type: 'sequential';

package/map/types/map-view.d.ts

@@ -61,7 +61,7 @@ export interface MapViewBaseProps {
     loading?: boolean;
     /**
      * The height of the chart. If a number is passed, it will be treated as px
-     * @defaultValue 300px
+     * @defaultValue 400px
      */
     height?: number | string;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-geo",
-  "version": "0.9.2",
+  "version": "0.9.17",
   "private": false,
   "license": "Apache-2.0",
   "lang": "lang/uncompiled",
@@ -39,7 +39,7 @@
     "mapbox-gl": "npm:empty-npm-package@1.0.0",
     "maplibre-gl": "^3.1.0",
     "react-map-gl": "^7.1.7",
-    "@dynatrace/strato-design-tokens": "0.20.20",
+    "@dynatrace/strato-design-tokens": "0.20.30",
     "@dynatrace/strato-icons": "0.37.0"
   },
   "peerDependencies": {
@@ -49,7 +49,7 @@
     "react-dom": "^18.0.0",
     "react-intl": "^6.0.8",
     "react-is": "^18.0.0",
-    "@dynatrace/strato-components-preview": "~0.115.1"
+    "@dynatrace/strato-components-preview": "~0.115.17"
   },
   "sideEffects": [
     "./map/styles/react-mapgl-styles.css",