@gooddata/sdk-ui-geo 11.53.0-alpha.0 → 11.53.0-alpha.2

package/esm/core/CoreGeoChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoreGeoChart.d.ts","sourceRoot":"","sources":["../../src/core/CoreGeoChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAKxD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAatE;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,qBAAqB,2CAM7E"}
+{"version":3,"file":"CoreGeoChart.d.ts","sourceRoot":"","sources":["../../src/core/CoreGeoChart.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAKxD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAStE;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,qBAAqB,2CAM7E"}

package/esm/core/CoreGeoChart.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { withEntireDataView } from "@gooddata/sdk-ui";
-import { ThemeContextProvider, withTheme } from "@gooddata/sdk-ui-theme-provider";
+import { ThemeContextProvider } from "@gooddata/sdk-ui-theme-provider";
 import { GeoChartOptionsWrapper } from "./geoChart/GeoChartOptionsWrapper.js";
 import { geoValidatorHOC } from "./geoChart/GeoValidatorHOC.js";
 import { withMapboxToken } from "./MapboxTokenProvider.js";
-const WrappedCoreGeoChart = withTheme(withMapboxToken(geoValidatorHOC(withEntireDataView(GeoChartOptionsWrapper))));
+const WrappedCoreGeoChart = withMapboxToken(geoValidatorHOC(withEntireDataView(GeoChartOptionsWrapper)));
 /**
  * @internal
  */

package/esm/core/geoChart/GeoChartInner.d.ts

@@ -1,4 +1,4 @@
-import { PureComponent, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import { type WrappedComponentProps } from "react-intl";
 import { type IColorPalette, type ITheme } from "@gooddata/sdk-model";
 import { type IColorAssignment, type IDataVisualizationProps, type ILoadingInjectedProps } from "@gooddata/sdk-ui";
@@ -40,30 +40,20 @@ export interface IGeoChartInnerOptions {
     colorPalette: IColorPalette;
 }
 /**
- * Geo Chart react component
+ * Geo Chart react component.
+ *
+ * Renders the map itself (through `chartRenderer`) together with its legend (through `legendRenderer`),
+ * laid out according to the resolved legend position, and keeps the visibility of the individual legend
+ * items in sync with the chart. It is the innermost piece of the core geo chart: it expects an already
+ * resolved data view and the derived {@link IGeoChartInnerOptions} in its props, so it neither triggers
+ * an execution nor validates the data on its own.
+ *
+ * @param props - {@link IGeoChartInnerProps}; on top of the core geo chart props (`config`, `dataView`,
+ *  `height`, `documentObj`, `chartRenderer`, `legendRenderer`, the `onCenterPositionChanged` /
+ *  `onZoomChanged` / `onDrill` / `pushData` callbacks) it requires `geoChartOptions` prepared by
+ *  `GeoChartOptionsWrapper` and `intl` injected by the wrapping HOC.
+ *
+ * @internal
  */
-export declare class GeoChartInner extends PureComponent<IGeoChartInnerProps, IGeoChartInnerState> {
-    static getDerivedStateFromProps(nextProps: IGeoChartInnerProps, prevState: IGeoChartInnerState): Partial<IGeoChartInnerState> | null;
-    private readonly throttledOnWindowResize;
-    private readonly containerId;
-    constructor(props: IGeoChartInnerProps);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    render(): ReactElement;
-    private renderVisualizationContent;
-    private syncWithLegendItemStates;
-    private getContainerClassName;
-    private getFlexDirection;
-    private isFluidLegend;
-    private onLegendItemClick;
-    private getLegendPosition;
-    private getLegendDetails;
-    private getLegendProps;
-    private getChartProps;
-    private renderChart;
-    private renderLegend;
-    private onWindowResize;
-    private updateConfigurationPanel;
-}
+export declare function GeoChartInner(props: IGeoChartInnerProps): ReactElement;
 //# sourceMappingURL=GeoChartInner.d.ts.map

package/esm/core/geoChart/GeoChartInner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeoChartInner.d.ts","sourceRoot":"","sources":["../../../src/core/geoChart/GeoChartInner.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GeoChartInner.d.ts","sourceRoot":"","sources":["../../../src/core/geoChart/GeoChartInner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAA+C,MAAM,OAAO,CAAC;AAKvF,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAKxD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EACH,KAAK,gBAAgB,EACrB,KAAK,uBAAuB,EAE5B,KAAK,qBAAqB,EAK7B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACH,KAAK,cAAc,EAGnB,KAAK,0BAA0B,EAMlC,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAA0B,KAAK,4BAA4B,EAAE,MAAM,6BAA6B,CAAC;AACxG,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAoCpE;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IAC/D,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,YAAY,CAAC;IACvE,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAErG,MAAM,WAAW,mBAAmB;IAChC,kBAAkB,EAAE,OAAO,EAAE,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,mBAAmB,EAAE,gBAAgB,EAAE,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,QAAQ,CAAC;IAClB,aAAa,EAAE,0BAA0B,EAAE,CAAC;IAC5C,aAAa,EAAE,cAAc,CAAC;IAC9B,YAAY,EAAE,aAAa,CAAC;CAC/B;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CA4UtE"}

package/esm/core/geoChart/GeoChartInner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
-import { PureComponent, Suspense, lazy } from "react";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import cx from "classnames";
 import { defaultImport } from "default-import";
 import { throttle } from "lodash-es";
@@ -20,83 +20,102 @@ const GeoChartRendererLazy = lazy(() => import("./GeoChartRenderer.js").then((mo
 // In ESM, default exports of CJS modules are wrapped in default properties instead of being exposed directly.
 // https://github.com/microsoft/TypeScript/issues/52086#issuecomment-1385978414
 const Measure = defaultImport(ReactMeasure);
-function renderChart(props) {
+function defaultChartRenderer(props) {
     return (_jsx(Suspense, { fallback: null, children: _jsx(GeoChartRendererLazy, { ...props }) }));
 }
-function renderLegend(props) {
+function defaultLegendRenderer(props) {
     return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(IntlTranslationsProvider, { children: (translationProps) => (_jsx(GeoChartLegendRenderer, { ...props, numericSymbols: translationProps.numericSymbols })) }) }));
 }
 const DefaultGeoConfig = {
     mapboxToken: "",
 };
 /**
- * Geo Chart react component
+ * Geo Chart react component.
+ *
+ * Renders the map itself (through `chartRenderer`) together with its legend (through `legendRenderer`),
+ * laid out according to the resolved legend position, and keeps the visibility of the individual legend
+ * items in sync with the chart. It is the innermost piece of the core geo chart: it expects an already
+ * resolved data view and the derived {@link IGeoChartInnerOptions} in its props, so it neither triggers
+ * an execution nor validates the data on its own.
+ *
+ * @param props - {@link IGeoChartInnerProps}; on top of the core geo chart props (`config`, `dataView`,
+ *  `height`, `documentObj`, `chartRenderer`, `legendRenderer`, the `onCenterPositionChanged` /
+ *  `onZoomChanged` / `onDrill` / `pushData` callbacks) it requires `geoChartOptions` prepared by
+ *  `GeoChartOptionsWrapper` and `intl` injected by the wrapping HOC.
+ *
+ * @internal
  */
-export class GeoChartInner extends PureComponent {
-    static getDerivedStateFromProps(nextProps, prevState) {
-        const { geoChartOptions } = nextProps;
-        if (!geoChartOptions) {
-            return null;
-        }
-        const { categoryItems, colorStrategy } = geoChartOptions;
+export function GeoChartInner(props) {
+    const { config, geoChartOptions: geoChartOptionsProp, height } = props;
+    // lazily initialized so that v4() is called just once per instance and not on every render
+    const [containerId] = useState(() => `geo-${v4()}`);
+    // keeps the latest documentObj available to the throttled resize handler without re-creating it;
+    // written in an effect so that a render discarded by React cannot mutate it
+    const documentObjRef = useRef(props.documentObj);
+    useEffect(() => {
+        documentObjRef.current = props.documentObj;
+    });
+    const [state, setState] = useState(() => ({
+        enabledLegendItems: [],
+        showFluidLegend: shouldShowFluid(props.documentObj ?? document),
+        colorAssignmentItem: [],
+    }));
+    // replacement of getDerivedStateFromProps: adjusting the state during render is the sanctioned way
+    // of keeping the state in sync with the props; the value merged here is used by this very render
+    let currentState = state;
+    if (geoChartOptionsProp) {
+        const { categoryItems, colorStrategy } = geoChartOptionsProp;
         const colorAssignmentItem = colorStrategy.getColorAssignment();
-        if (!isColorAssignmentItemChanged(prevState.colorAssignmentItem, colorAssignmentItem)) {
-            return null;
+        if (isColorAssignmentItemChanged(state.colorAssignmentItem, colorAssignmentItem)) {
+            const enabledLegendItems = new Array(categoryItems.length).fill(true);
+            currentState = { ...state, enabledLegendItems, colorAssignmentItem };
+            setState((prev) => ({ ...prev, enabledLegendItems, colorAssignmentItem }));
         }
-        return {
-            enabledLegendItems: new Array(categoryItems.length).fill(true),
-            colorAssignmentItem,
-        };
     }
-    throttledOnWindowResize;
-    containerId = `geo-${v4()}`;
-    constructor(props) {
-        super(props);
-        const { documentObj = document } = this.props;
-        this.state = {
-            enabledLegendItems: [],
-            showFluidLegend: shouldShowFluid(documentObj),
-            colorAssignmentItem: [],
+    const { enabledLegendItems, showFluidLegend } = currentState;
+    const updateConfigurationPanel = (geoChartOptions) => {
+        invariant(geoChartOptions, "illegal state - updating config with no geo options");
+        const { pushData } = props;
+        const { categoryItems, geoData, colorStrategy, colorPalette } = geoChartOptions;
+        const { hasCategoryLegend, hasColorLegend, hasSizeLegend } = getAvailableLegends(categoryItems, geoData);
+        const isLegendVisible = hasCategoryLegend || hasColorLegend || hasSizeLegend;
+        pushData?.({
+            propertiesMeta: {
+                // toggle legend section
+                legend_enabled: isLegendVisible,
+            },
+            colors: {
+                colorAssignments: colorStrategy.getColorAssignment(),
+                colorPalette,
+            },
+        });
+    };
+    // runs after every commit, matching the original componentDidMount + componentDidUpdate
+    useEffect(() => {
+        updateConfigurationPanel(geoChartOptionsProp);
+    });
+    // the throttled handler is created inside the effect so that it is guaranteed to live exactly as long as
+    // the registered listener does - unlike a useMemo cache, which React may throw away at any time
+    useEffect(() => {
+        const throttledOnWindowResize = throttle(() => {
+            setState((prev) => ({
+                ...prev,
+                showFluidLegend: shouldShowFluid(documentObjRef.current ?? document),
+            }));
+        }, 100);
+        window.addEventListener("resize", throttledOnWindowResize);
+        return () => {
+            throttledOnWindowResize.cancel();
+            window.removeEventListener("resize", throttledOnWindowResize);
         };
-        this.throttledOnWindowResize = throttle(this.onWindowResize, 100);
-    }
-    componentDidMount() {
-        this.updateConfigurationPanel(this.props.geoChartOptions);
-        window.addEventListener("resize", this.throttledOnWindowResize);
-    }
-    componentDidUpdate() {
-        this.updateConfigurationPanel(this.props.geoChartOptions);
-    }
-    componentWillUnmount() {
-        this.throttledOnWindowResize.cancel();
-        window.removeEventListener("resize", this.throttledOnWindowResize);
-    }
-    render() {
-        const { height, config } = this.props;
-        if (height !== undefined && !isAutoPositionWithPopup(config?.legend?.responsive)) {
-            return this.renderVisualizationContent(undefined, height);
-        }
-        return (_jsx(Measure, { client: true, children: ({ measureRef, contentRect }) => {
-                const { client: contentRectClient } = contentRect;
-                return this.renderVisualizationContent(measureRef, contentRectClient?.height ?? 0, contentRect);
-            } }));
-    }
-    renderVisualizationContent(measureRef, height, contentRect) {
-        const { geoChartOptions: geoChartOptionsProp } = this.props;
-        const geoChartOptions = this.syncWithLegendItemStates(geoChartOptionsProp);
-        const legendDetails = this.getLegendDetails(this.getLegendPosition(), contentRect);
-        const position = legendDetails ? legendDetails.position : LegendPosition["TOP"];
-        const classes = this.getContainerClassName(position);
-        const isLegendRenderedFirst = position === LegendPosition["TOP"] ||
-            (position === LegendPosition["LEFT"] &&
-                (!this.state.showFluidLegend || !!this.props.config?.respectLegendPosition));
-        const legendComponent = this.renderLegend(height, position, geoChartOptions, contentRect);
-        return (_jsxs("div", { className: classes, ref: measureRef, children: [isLegendRenderedFirst ? legendComponent : null, this.renderChart(geoChartOptions), isLegendRenderedFirst ? null : legendComponent] }));
-    }
-    syncWithLegendItemStates(geoChartOptions) {
+    }, []);
+    const responsiveInfo = getResponsiveInfo(config?.legend?.responsive);
+    const isFluidLegend = isAutoPositionWithPopup(responsiveInfo)
+        ? false
+        : isFluidLegendEnabled(responsiveInfo, showFluidLegend);
+    const syncWithLegendItemStates = (geoChartOptions) => {
         invariant(geoChartOptions, "illegal state - trying to sync legend with no geo options");
         const { categoryItems } = geoChartOptions;
-        const { enabledLegendItems } = this.state;
         const withLegendItemStates = categoryItems.map((item, index) => ({
             ...item,
             isVisible: enabledLegendItems[index],
@@ -105,63 +124,53 @@ export class GeoChartInner extends PureComponent {
             ...geoChartOptions,
             categoryItems: withLegendItemStates,
         };
-    }
-    getContainerClassName(position) {
-        const responsive = getResponsiveInfo(this.props?.config?.legend?.responsive) === true;
-        const flexDirection = this.getFlexDirection(position);
+    };
+    const getFlexDirection = (position) => {
+        if (position === LegendPosition["TOP"] || position === LegendPosition["BOTTOM"] || isFluidLegend) {
+            return "column";
+        }
+        return "row";
+    };
+    const getContainerClassName = (position) => {
+        const responsive = getResponsiveInfo(config?.legend?.responsive) === true;
+        const flexDirection = getFlexDirection(position);
         return cx("viz-line-family-chart-wrap", "gd-geo-component", "s-gd-geo-component", {
             "responsive-legend": responsive,
             "non-responsive-legend": !responsive,
             [`flex-direction-${flexDirection}`]: true,
             "legend-position-bottom": position === LegendPosition["BOTTOM"],
-        }, this.containerId);
-    }
-    getFlexDirection(position) {
-        const isFluidLegend = this.isFluidLegend();
-        if (position === LegendPosition["TOP"] || position === LegendPosition["BOTTOM"] || isFluidLegend) {
-            return "column";
-        }
-        return "row";
-    }
-    isFluidLegend() {
-        const { showFluidLegend } = this.state;
-        const responsive = getResponsiveInfo(this.props?.config?.legend?.responsive);
-        return isAutoPositionWithPopup(responsive)
-            ? false
-            : isFluidLegendEnabled(responsive, showFluidLegend);
-    }
-    onLegendItemClick = (item) => {
-        const enabledLegendItems = this.state.enabledLegendItems.map((legendItem, index) => {
-            if (index === item.legendIndex) {
-                return !legendItem;
-            }
-            return legendItem;
-        });
-        this.setState({ enabledLegendItems });
+        }, containerId);
+    };
+    const onLegendItemClick = (item) => {
+        setState((prev) => ({
+            ...prev,
+            enabledLegendItems: prev.enabledLegendItems.map((legendItem, index) => {
+                if (index === item.legendIndex) {
+                    return !legendItem;
+                }
+                return legendItem;
+            }),
+        }));
     };
-    getLegendPosition() {
-        const position = this.props.config?.legend?.position ?? LegendPosition["TOP"];
+    const getLegendPosition = () => {
+        const position = config?.legend?.position ?? LegendPosition["TOP"];
         const isSupportedLegend = SupportedLegendPositions.indexOf(position) > -1;
         return isSupportedLegend ? position : LegendPosition["TOP"];
-    }
-    getLegendDetails(position, contentRect) {
-        const { geoChartOptions: geoChartOptionsProp, config } = this.props;
-        const geoChartOptions = this.syncWithLegendItemStates(geoChartOptionsProp);
+    };
+    const getLegendDetails = (position, contentRect) => {
+        const geoChartOptions = syncWithLegendItemStates(geoChartOptionsProp);
         const { geoData } = geoChartOptions;
         const legendLabel = geoData?.segment?.name;
-        const isFluidLegend = this.isFluidLegend();
         const legendDetailOptions = {
             showFluidLegend: isFluidLegend,
             contentRect,
             legendLabel,
         };
         return getCommonVisLegendDetails(position, getResponsiveInfo(config?.legend?.responsive), legendDetailOptions, config?.respectLegendPosition);
-    }
-    getLegendProps(height, position, geoChartOptions, contentRect) {
-        const responsive = this.props.config?.legend?.responsive;
-        const { locale } = this.props;
-        const { enabledLegendItems } = this.state;
-        const isFluidLegend = this.isFluidLegend();
+    };
+    const getLegendProps = (height, position, geoChartOptions, contentRect) => {
+        const responsive = config?.legend?.responsive;
+        const { locale } = props;
         const { geoData, colorStrategy, categoryItems } = geoChartOptions;
         const { segment } = geoData;
         const colorFormat = geoData.color?.format;
@@ -171,16 +180,16 @@ export class GeoChartInner extends PureComponent {
             geoData,
         };
         const colorLegendValue = colorStrategy.getColorByIndex(0);
-        const legendDetails = this.getLegendDetails(position, contentRect);
+        const legendDetails = getLegendDetails(position, contentRect);
         let legendProps = {
             height,
             locale,
             position,
             responsive,
             isFluidLegend,
-            onItemClick: this.onLegendItemClick,
+            onItemClick: onLegendItemClick,
             contentRect,
-            containerId: this.containerId,
+            containerId,
         };
         if (legendDetails) {
             legendProps = {
@@ -203,9 +212,9 @@ export class GeoChartInner extends PureComponent {
             ...propsFromData,
             colorLegendValue,
         };
-    }
-    getChartProps(geoChartOptions) {
-        const { config = DefaultGeoConfig, dataView, drillableItems = [], afterRender = () => { }, onCenterPositionChanged = () => { }, onDrill = () => { }, onZoomChanged = () => { }, intl, onError, } = this.props;
+    };
+    const getChartProps = (geoChartOptions) => {
+        const { config: configWithDefault = DefaultGeoConfig, dataView, drillableItems = [], afterRender = () => { }, onCenterPositionChanged = () => { }, onDrill = () => { }, onZoomChanged = () => { }, intl, onError, } = props;
         invariant(dataView, "invalid state - trying to render geo chart but there is no data to visualize");
         const { geoData, colorStrategy, categoryItems } = geoChartOptions;
         const segmentIndex = geoChartOptions.geoData.segment?.index;
@@ -213,7 +222,7 @@ export class GeoChartInner extends PureComponent {
         const drillConfig = { dataView, onDrill };
         const chartProps = {
             colorStrategy,
-            config,
+            config: configWithDefault,
             dataView,
             drillableItems: drillablePredicates,
             drillConfig,
@@ -230,46 +239,40 @@ export class GeoChartInner extends PureComponent {
                 .map((item) => item.uri);
             return {
                 ...chartProps,
-                config: { ...config, selectedSegmentItems },
+                config: { ...configWithDefault, selectedSegmentItems },
             };
         }
         return chartProps;
-    }
-    renderChart = (geoChartOptions) => {
-        const { chartRenderer = renderChart } = this.props;
-        const chartProps = this.getChartProps(geoChartOptions);
+    };
+    const renderChart = (geoChartOptions) => {
+        const { chartRenderer = defaultChartRenderer } = props;
+        const chartProps = getChartProps(geoChartOptions);
         return chartRenderer(chartProps);
     };
-    renderLegend = (height, position, geoChartOptions, contentRect) => {
-        const enabled = this.props.config?.legend?.enabled ?? true;
-        const { legendRenderer = renderLegend } = this.props;
+    const renderLegend = (height, position, geoChartOptions, contentRect) => {
+        const enabled = config?.legend?.enabled ?? true;
+        const { legendRenderer = defaultLegendRenderer } = props;
         if (!enabled) {
             return null;
         }
-        const legendProps = this.getLegendProps(height, position, geoChartOptions, contentRect);
+        const legendProps = getLegendProps(height, position, geoChartOptions, contentRect);
         return legendRenderer(legendProps);
     };
-    onWindowResize = () => {
-        const { documentObj = document } = this.props;
-        this.setState({
-            showFluidLegend: shouldShowFluid(documentObj),
-        });
+    const renderVisualizationContent = (measureRef, height, contentRect) => {
+        const geoChartOptions = syncWithLegendItemStates(geoChartOptionsProp);
+        const legendDetails = getLegendDetails(getLegendPosition(), contentRect);
+        const position = legendDetails ? legendDetails.position : LegendPosition["TOP"];
+        const classes = getContainerClassName(position);
+        const isLegendRenderedFirst = position === LegendPosition["TOP"] ||
+            (position === LegendPosition["LEFT"] && (!showFluidLegend || !!config?.respectLegendPosition));
+        const legendComponent = renderLegend(height, position, geoChartOptions, contentRect);
+        return (_jsxs("div", { className: classes, ref: measureRef, children: [isLegendRenderedFirst ? legendComponent : null, renderChart(geoChartOptions), isLegendRenderedFirst ? null : legendComponent] }));
     };
-    updateConfigurationPanel(geoChartOptions) {
-        invariant(geoChartOptions, "illegal state - updating config with no geo options");
-        const { pushData } = this.props;
-        const { categoryItems, geoData, colorStrategy, colorPalette } = geoChartOptions;
-        const { hasCategoryLegend, hasColorLegend, hasSizeLegend } = getAvailableLegends(categoryItems, geoData);
-        const isLegendVisible = hasCategoryLegend || hasColorLegend || hasSizeLegend;
-        pushData?.({
-            propertiesMeta: {
-                // toggle legend section
-                legend_enabled: isLegendVisible,
-            },
-            colors: {
-                colorAssignments: colorStrategy.getColorAssignment(),
-                colorPalette,
-            },
-        });
+    if (height !== undefined && !isAutoPositionWithPopup(config?.legend?.responsive)) {
+        return renderVisualizationContent(undefined, height);
     }
+    return (_jsx(Measure, { client: true, children: ({ measureRef, contentRect }) => {
+            const { client: contentRectClient } = contentRect;
+            return renderVisualizationContent(measureRef, contentRectClient?.height ?? 0, contentRect);
+        } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-geo",
-  "version": "11.53.0-alpha.0",
+  "version": "11.53.0-alpha.2",
   "description": "GoodData.UI SDK - Geo Charts",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -43,12 +43,12 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "uuid": "11.1.1",
-    "@gooddata/sdk-model": "11.53.0-alpha.0",
-    "@gooddata/sdk-backend-spi": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui-kit": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.0",
-    "@gooddata/sdk-ui-vis-commons": "11.53.0-alpha.0"
+    "@gooddata/sdk-backend-spi": "11.53.0-alpha.2",
+    "@gooddata/sdk-model": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-kit": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-vis-commons": "11.53.0-alpha.2"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -91,10 +91,10 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.53.0-alpha.0",
-    "@gooddata/oxlint-config": "11.53.0-alpha.0",
-    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.0",
-    "@gooddata/stylelint-config": "11.53.0-alpha.0"
+    "@gooddata/eslint-config": "11.53.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.2",
+    "@gooddata/stylelint-config": "11.53.0-alpha.2",
+    "@gooddata/oxlint-config": "11.53.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",