@gooddata/sdk-ui-ext 11.53.0-alpha.1 → 11.53.0-alpha.3

package/NOTICE

@@ -7,9 +7,9 @@
 
 The following 3rd-party software packages may be used by or distributed with gooddata-ui-sdk. Any information relevant to third-party vendors listed below are collected using common, reasonable means.
 
-Date generated: 2026-8-13
+Date generated: 2026-8-17
 
-Revision ID: 03b276147864f291b2ed2694a19ccbfa1d69ce6b
+Revision ID: a87db0e8382a288c7d652219ae8787851fb066a3
 
 ================================================================================
 ================================================================================
@@ -375,7 +375,7 @@ Revision ID: 03b276147864f291b2ed2694a19ccbfa1d69ce6b
 - balanced-match (2.0.0) [MIT]
 - balanced-match (4.0.4) [MIT]
 - base64-js (1.5.1) [MIT]
-- baseline-browser-mapping (2.11.13) [Apache-2.0]
+- baseline-browser-mapping (2.11.14) [Apache-2.0]
 - batch (0.6.1) [MIT]
 - binary-extensions (2.3.0) [MIT]
 - bl (4.1.0) [MIT]
@@ -5303,9 +5303,9 @@ MIT
 
 
 --------------------------------------------------------------------------------
-Package Title: baseline-browser-mapping (2.11.13)
+Package Title: baseline-browser-mapping (2.11.14)
 
-Package Locator: npm+baseline-browser-mapping$2.11.13
+Package Locator: npm+baseline-browser-mapping$2.11.14
 
 Package Depth: Transitive
 --------------------------------------------------------------------------------
@@ -29407,4 +29407,4 @@ POSSIBILITY OF SUCH DAMAGE.
 --------------------------------------------------------------------------------
 --------------------------------------------------------------------------------
 
-Report Generated by FOSSA on 2026-8-13
+Report Generated by FOSSA on 2026-8-17

package/esm/insightView/InsightRenderer.d.ts

@@ -1,4 +1,3 @@
-import { type WrappedComponentProps } from "react-intl";
 import { type IUserWorkspaceSettings } from "@gooddata/sdk-backend-spi";
 import { type IColorPalette, type IInsightDefinition, type IInsightWidget, type ITheme, type IWorkspacePermissions } from "@gooddata/sdk-model";
 import { type ILocale, type ITranslations, type OnError } from "@gooddata/sdk-ui";
@@ -21,17 +20,15 @@ export interface IInsightRendererProps extends Omit<IInsightViewProps, "insight"
      */
     widget?: IInsightWidget;
 }
-export declare const IntlInsightRenderer: import("react").FC<import("react-intl").WithIntlProps<Omit<IInsightRendererProps & WrappedComponentProps & {
+type InsightRendererCoreProps = IInsightRendererProps & {
     messages: ITranslations;
-}, "theme" | "themeIsLoading" | "themeStatus">>> & {
-    WrappedComponent: import("react").ComponentType<Omit<IInsightRendererProps & WrappedComponentProps & {
-        messages: ITranslations;
-    }, "theme" | "themeIsLoading" | "themeStatus">>;
 };
+export declare const IntlInsightRenderer: import("react").ComponentType<InsightRendererCoreProps>;
 /**
  * Renders insight passed as a parameter.
  *
  * @internal
  */
 export declare function InsightRenderer(props: IInsightRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
 //# sourceMappingURL=InsightRenderer.d.ts.map

package/esm/insightView/InsightRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InsightRenderer.d.ts","sourceRoot":"","sources":["../../src/insightView/InsightRenderer.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,qBAAqB,EAAc,MAAM,YAAY,CAAC;AAOpE,OAAO,EAGH,KAAK,sBAAsB,EAC9B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,qBAAqB,EAM7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAKH,KAAK,OAAO,EACZ,KAAK,aAAa,EAGlB,KAAK,OAAO,EAMf,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAGH,KAAK,iBAAiB,EAIzB,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAC/C,iBAAiB,EACjB,SAAS,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,CACjE;IACG,OAAO,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,EAAE,aAAa,GAAG,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;CAC3B;AA+RD,eAAO,MAAM,mBAAmB;;;;;;CAA2D,CAAC;AAwB5F;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,qBAAqB,kDAuC3D"}
+{"version":3,"file":"InsightRenderer.d.ts","sourceRoot":"","sources":["../../src/insightView/InsightRenderer.tsx"],"names":[],"mappings":"AAYA,OAAO,EAGH,KAAK,sBAAsB,EAC9B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,qBAAqB,EAM7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAKH,KAAK,OAAO,EACZ,KAAK,aAAa,EAGlB,KAAK,OAAO,EAMf,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAGH,KAAK,iBAAiB,EAKzB,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAC/C,iBAAiB,EACjB,SAAS,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,CACjE;IACG,OAAO,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAC7C,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,YAAY,EAAE,aAAa,GAAG,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,KAAK,wBAAwB,GAAG,qBAAqB,GAAG;IAAE,QAAQ,EAAE,aAAa,CAAA;CAAE,CAAC;AAuXpF,eAAO,MAAM,mBAAmB,yDAAoC,CAAC;AAwBrE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,qBAAqB,kDAuC3D"}

package/esm/insightView/InsightRenderer.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
-import { PureComponent, createRef, useCallback, useEffect, useRef } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { isEqual } from "lodash-es";
 import { createRoot } from "react-dom/client";
-import { injectIntl } from "react-intl";
 import { v4 as uuidv4 } from "uuid";
 import { ExecutionFactoryUpgradingToExecByReference, ExecutionFactoryWithFixedFilters, } from "@gooddata/sdk-backend-base";
 import { insightProperties, insightSetProperties, insightTitle, insightVisualizationType, insightVisualizationUrl, } from "@gooddata/sdk-model";
 import { DefaultLocale, ErrorComponent, IntlWrapper, LoadingComponent, fillMissingFormats, fillMissingTitlesWithMessages, ignoreTitlesForSimpleMeasures, useResolveMessages, withContexts, } from "@gooddata/sdk-ui";
-import { withTheme } from "@gooddata/sdk-ui-theme-provider";
+import { useTheme } from "@gooddata/sdk-ui-theme-provider";
 import { DEFAULT_MESSAGES, FullVisualizationCatalog, resolveMessages, } from "../internal/index.js";
 const getElementId = () => `gd-vis-${uuidv4()}`;
 const visualizationUriRootStyle = {
@@ -17,58 +16,102 @@ const visualizationUriRootStyle = {
     flex: "1 1 auto",
     flexDirection: "column",
 };
-// this needs to be a pure component as it can happen that this might be rendered multiple times
+const noop = () => { };
+const defaultFilters = [];
+const defaultDrillableItems = [];
+/**
+ * Applies the defaults on the props. The values used as defaults are referentially stable so that they do not
+ * trigger any unnecessary work down the line.
+ */
+const resolveProps = (props) => ({
+    ...props,
+    ErrorComponent: props.ErrorComponent ?? ErrorComponent,
+    filters: props.filters ?? defaultFilters,
+    drillableItems: props.drillableItems ?? defaultDrillableItems,
+    LoadingComponent: props.LoadingComponent ?? LoadingComponent,
+    pushData: props.pushData ?? noop,
+    locale: props.locale ?? DefaultLocale,
+    afterRender: props.afterRender ?? noop,
+});
+// this needs to be a memoized component as it can happen that this might be rendered multiple times
 // with the same props (referentially) - this might make the rendered visualization behave unpredictably
 // and is bad for performance so we need to make sure the re-renders are performed only if necessary
-class InsightRendererCore extends PureComponent {
-    elementId = getElementId();
-    visualization;
-    containerRef = createRef();
+const InsightRendererCore = memo(function InsightRendererCore(props) {
+    const theme = useTheme();
+    const currentProps = { ...resolveProps(props), theme };
+    const [elementId] = useState(getElementId);
+    const visualizationRef = useRef(undefined);
+    const containerRef = useRef(null);
     /**
      * The component may render both visualization and config panel. In React18 we therefore need two
      * roots with their respective render methods. This Map holds the roots for both and provides
      * render and unmount methods whenever needed.
      */
-    reactRootsMap = new Map();
-    static defaultProps = {
-        ErrorComponent,
-        filters: [],
-        drillableItems: [],
-        LoadingComponent,
-        pushData: () => { },
-        locale: DefaultLocale,
-        afterRender: () => { },
-    };
-    unmountVisualization = () => {
-        if (this.visualization) {
-            this.visualization.unmount();
+    const reactRootsMapRef = useRef(new Map());
+    /**
+     * Whether the effects are currently torn down. Used to tell a real unmount apart from a teardown that is
+     * immediately followed by a new setup of the same component instance.
+     */
+    const isUnmountedRef = useRef(false);
+    /**
+     * The callbacks and element getters below outlive the render they were created in (the visualization
+     * instance only ever gets the ones from the render it was set up in). They therefore read the props from
+     * this ref to always see the current values - the very same way `this.props` did before.
+     *
+     * This effect must stay first so that the ref is up to date before any other effect runs. It is a layout
+     * effect so that it keeps the pre-paint semantics the class lifecycle methods had.
+     */
+    const propsRef = useRef(currentProps);
+    useLayoutEffect(() => {
+        propsRef.current = currentProps;
+    });
+    const unmountVisualization = useCallback(() => {
+        if (visualizationRef.current) {
+            visualizationRef.current.unmount();
         }
-        this.visualization = undefined;
-    };
-    updateVisualization = () => {
+        visualizationRef.current = undefined;
+    }, []);
+    const getExecutionFactory = useCallback(() => {
+        const { backend, workspace, executeByReference, filters } = propsRef.current;
+        const factory = backend.workspace(workspace).execution();
+        if (executeByReference) {
+            /*
+             * When executing by reference, decorate the original execution factory so that it
+             * transparently routes `forInsight` to `forInsightByRef` AND adds the filters
+             * from InsightView props.
+             *
+             * Code will pass this factory over to the pluggable visualizations - they will do execution
+             * `forInsight` and under the covers things will be routed and done differently without the
+             * plug viz knowing.
+             */
+            return new ExecutionFactoryUpgradingToExecByReference(new ExecutionFactoryWithFixedFilters(factory, filters));
+        }
+        return factory;
+    }, []);
+    const updateVisualization = useCallback(() => {
         // if the container no longer exists, update was called after unmount -> do nothing
-        if (!this.visualization || !this.containerRef.current) {
+        if (!visualizationRef.current || !containerRef.current) {
             return;
         }
+        const { insight: insightProp, config = {}, settings, locale, messages, widget, drillableItems, colorPalette, execConfig, theme, } = propsRef.current;
         // if there is no insight, bail early
-        if (!this.props.insight) {
+        if (!insightProp) {
             return;
         }
-        const { config = {} } = this.props;
-        const { responsiveUiDateFormat } = this.props.settings ?? {};
+        const { responsiveUiDateFormat } = settings ?? {};
         const visProps = {
-            locale: this.props.locale,
-            messages: this.props.messages,
+            locale,
+            messages,
             dateFormat: responsiveUiDateFormat,
-            a11yTitle: this.props.widget?.title,
-            a11yDescription: this.props.widget?.description,
+            a11yTitle: widget?.title,
+            a11yDescription: widget?.description,
             custom: {
-                drillableItems: this.props.drillableItems,
-                lastSavedVisClassUrl: insightVisualizationUrl(this.props.insight),
+                drillableItems,
+                lastSavedVisClassUrl: insightVisualizationUrl(insightProp),
             },
             config: {
                 separators: config.separators,
-                colorPalette: this.props.colorPalette,
+                colorPalette,
                 mapboxToken: config.mapboxToken,
                 agGridToken: config.agGridToken,
                 forceDisableDrillOnAxes: config.forceDisableDrillOnAxes,
@@ -76,13 +119,13 @@ class InsightRendererCore extends PureComponent {
                 isExportMode: config.isExportMode,
                 enableExecutionCancelling: config.enableExecutionCancelling,
             },
-            executionConfig: this.props.execConfig,
+            executionConfig: execConfig,
             customVisualizationConfig: config,
-            theme: this.props.theme,
+            theme,
             supportsChartFill: config.supportsChartFill,
         };
-        const visClass = insightVisualizationType(this.props.insight);
-        const filled = fillMissingTitlesWithMessages(this.props.insight, this.props.locale, this.props.messages, undefined);
+        const visClass = insightVisualizationType(insightProp);
+        const filled = fillMissingTitlesWithMessages(insightProp, locale, messages, undefined);
         let insight = fillMissingFormats(filled);
         /**
          * Ignore titles for simple measures in all visualizations except for repeater.
@@ -95,29 +138,60 @@ class InsightRendererCore extends PureComponent {
         if (visClass !== "repeater") {
             insight = ignoreTitlesForSimpleMeasures(insight);
         }
-        this.visualization?.update(visProps, insight, {}, this.getExecutionFactory());
-    };
-    setupVisualization = () => {
+        visualizationRef.current?.update(visProps, insight, {}, getExecutionFactory());
+    }, [getExecutionFactory]);
+    const reactRenderFunction = useCallback((children, element) => {
+        if (!element) {
+            return;
+        }
+        const htmlElement = element;
+        if (!reactRootsMapRef.current.get(htmlElement)) {
+            reactRootsMapRef.current.set(htmlElement, createRoot(htmlElement));
+        }
+        reactRootsMapRef.current.get(htmlElement).render(children);
+    }, []);
+    const reactUnmountFunction = useCallback(() => {
+        reactRootsMapRef.current.forEach((root) => root.render(null));
+    }, []);
+    const onExportReadyDecorator = useCallback((exportFunction) => {
+        const { onExportReady } = propsRef.current;
+        if (!onExportReady) {
+            return;
+        }
+        const decorator = (exportConfig) => {
+            const { insight } = propsRef.current;
+            if (exportConfig.title || !insight) {
+                return exportFunction(exportConfig);
+            }
+            return exportFunction({
+                ...exportConfig,
+                title: insightTitle(insight),
+            });
+        };
+        onExportReady(decorator);
+    }, []);
+    const setupVisualization = useCallback(() => {
+        const { insight, settings, backend, workspace, permissions, locale, messages, pushData, onDrill, onDataView, onLoadingChanged, afterRender, } = propsRef.current;
         // if there is no insight, bail early
-        if (!this.props.insight) {
+        if (!insight) {
             return;
         }
         // the visualization we may have from earlier is no longer valid -> get rid of it
-        this.unmountVisualization();
-        const visualizationFactory = FullVisualizationCatalog.forInsight(this.props.insight, this.props.settings?.enableNewPivotTable ?? true, this.props.settings?.enableNewGeoPushpin ?? false).getFactory();
-        this.visualization = visualizationFactory({
-            backend: this.props.backend,
+        unmountVisualization();
+        const visualizationFactory = FullVisualizationCatalog.forInsight(insight, settings?.enableNewPivotTable ?? true, settings?.enableNewGeoPushpin ?? false).getFactory();
+        visualizationRef.current = visualizationFactory({
+            backend: backend,
             callbacks: {
                 onError: (error) => {
-                    this.props.onError?.(error);
-                    this.props.onLoadingChanged?.({ isLoading: false });
+                    propsRef.current.onError?.(error);
+                    propsRef.current.onLoadingChanged?.({ isLoading: false });
                 },
-                onLoadingChanged: this.props.onLoadingChanged,
-                pushData: this.props.pushData,
-                onDrill: this.props.onDrill,
-                onDataView: this.props.onDataView,
-                onExportReady: this.onExportReadyDecorator,
-                afterRender: this.props.afterRender,
+                onLoadingChanged,
+                pushData,
+                onDrill,
+                onDataView,
+                onExportReady: onExportReadyDecorator,
+                afterRender,
             },
             // This renderer has no configuration panel of its own — it renders read-only insights.
             // It used to resolve the panel with a document-wide lookup of the well-known
@@ -130,107 +204,83 @@ class InsightRendererCore extends PureComponent {
             // fix STL-3184
             configPanelElement: () => null,
             element: () => {
-                const rootNode = this.containerRef.current?.getRootNode() ?? document;
-                return rootNode.querySelector(`#${this.elementId}`);
+                const rootNode = containerRef.current?.getRootNode() ?? document;
+                return rootNode.querySelector(`#${elementId}`);
             },
             environment: "dashboards", // TODO get rid of this
-            locale: this.props.locale,
-            messages: this.props.messages,
-            projectId: this.props.workspace,
-            visualizationProperties: insightProperties(this.props.insight),
-            featureFlags: this.props.settings,
-            permissions: this.props.permissions,
-            renderFun: this.getReactRenderFunction(),
-            unmountFun: this.getReactUnmountFunction(),
+            locale,
+            messages,
+            projectId: workspace,
+            visualizationProperties: insightProperties(insight),
+            featureFlags: settings,
+            permissions,
+            renderFun: reactRenderFunction,
+            unmountFun: reactUnmountFunction,
         });
-    };
-    getReactRenderFunction = () => {
-        return (children, element) => {
-            if (!element) {
-                return;
-            }
-            const htmlElement = element;
-            if (!this.reactRootsMap.get(htmlElement)) {
-                this.reactRootsMap.set(htmlElement, createRoot(htmlElement));
-            }
-            this.reactRootsMap.get(htmlElement).render(children);
-        };
-    };
-    getReactUnmountFunction = () => {
-        return () => this.reactRootsMap.forEach((root) => root.render(null));
-    };
-    onExportReadyDecorator = (exportFunction) => {
-        if (!this.props.onExportReady) {
+    }, [elementId, onExportReadyDecorator, reactRenderFunction, reactUnmountFunction, unmountVisualization]);
+    const prevPropsRef = useRef(undefined);
+    // componentDidMount & componentDidUpdate: intentionally without dependencies so that it runs after
+    // every render of this (memoized) component. A layout effect so that it keeps running before paint,
+    // the very same way the class lifecycle methods did.
+    useLayoutEffect(() => {
+        const prevProps = prevPropsRef.current;
+        prevPropsRef.current = currentProps;
+        if (!prevProps) {
+            setupVisualization();
+            updateVisualization();
             return;
         }
-        const decorator = (exportConfig) => {
-            if (exportConfig.title || !this.props.insight) {
-                return exportFunction(exportConfig);
-            }
-            return exportFunction({
-                ...exportConfig,
-                title: insightTitle(this.props.insight),
-            });
-        };
-        this.props.onExportReady(decorator);
-    };
-    getExecutionFactory = () => {
-        const factory = this.props.backend.workspace(this.props.workspace).execution();
-        if (this.props.executeByReference) {
-            /*
-             * When executing by reference, decorate the original execution factory so that it
-             * transparently routes `forInsight` to `forInsightByRef` AND adds the filters
-             * from InsightView props.
-             *
-             * Code will pass this factory over to the pluggable visualizations - they will do execution
-             * `forInsight` and under the covers things will be routed and done differently without the
-             * plug viz knowing.
-             */
-            return new ExecutionFactoryUpgradingToExecByReference(new ExecutionFactoryWithFixedFilters(factory, this.props.filters));
-        }
-        return factory;
-    };
-    componentDidMountInner = () => {
-        this.setupVisualization();
-        return this.updateVisualization();
-    };
-    componentDidMount() {
-        this.componentDidMountInner();
-    }
-    componentDidUpdateInner = (prevProps) => {
         /**
          * Ignore properties when comparing insights to determine if a new setup is needed: changes to properties
          * only will be handled using the updateVisualization without unnecessary new setup just fine.
          */
         const prevInsightForCompare = prevProps.insight && insightSetProperties(prevProps.insight, {});
-        const newInsightForCompare = this.props.insight && insightSetProperties(this.props.insight, {});
+        const newInsightForCompare = currentProps.insight && insightSetProperties(currentProps.insight, {});
         const needsNewSetup = !isEqual(newInsightForCompare, prevInsightForCompare) ||
-            !isEqual(this.props.filters, prevProps.filters) ||
-            !isEqual(this.props.settings, prevProps.settings) ||
-            this.props.workspace !== prevProps.workspace;
+            !isEqual(currentProps.filters, prevProps.filters) ||
+            !isEqual(currentProps.settings, prevProps.settings) ||
+            currentProps.workspace !== prevProps.workspace;
         if (needsNewSetup) {
-            this.setupVisualization();
+            setupVisualization();
         }
-        return this.updateVisualization();
-    };
-    componentDidUpdate(prevProps) {
-        this.componentDidUpdateInner(prevProps);
-    }
-    componentWillUnmount() {
-        this.unmountVisualization();
-        // In order to avoid race conditions when mounting and unmounting synchronously,
-        // we use timeout for React18.
-        // https://github.com/facebook/react/issues/25675
-        this.reactRootsMap.forEach((root) => setTimeout(() => root.unmount(), 0));
-    }
-    render() {
-        return (
-        // never ever dynamically change the props of this div, otherwise bad things will happen
-        // e.g. visualization being rendered multiple times, etc.
-        _jsx("div", { className: "visualization-uri-root", id: this.elementId, ref: this.containerRef, style: visualizationUriRootStyle }));
-    }
-}
-export const IntlInsightRenderer = injectIntl(withTheme(withContexts(InsightRendererCore)));
+        updateVisualization();
+    });
+    // componentWillUnmount
+    useEffect(() => {
+        const reactRootsMap = reactRootsMapRef.current;
+        isUnmountedRef.current = false;
+        return () => {
+            unmountVisualization();
+            /**
+             * Unlike componentWillUnmount, this cleanup also runs when the effects of this very component
+             * instance are torn down and set up again (StrictMode double-invoke in development, <Activity>
+             * hiding, Fast Refresh). The refs survive that, so the setup state has to be reset here -
+             * otherwise the next effect pass would see unchanged props, skip setupVisualization and leave
+             * an empty container behind.
+             */
+            prevPropsRef.current = undefined;
+            isUnmountedRef.current = true;
+            // In order to avoid race conditions when mounting and unmounting synchronously,
+            // we use timeout for React18.
+            // https://github.com/facebook/react/issues/25675
+            setTimeout(() => {
+                // the component was mounted again in the meantime, the roots are in use - keep them so
+                // that the visualization set up by the new effect pass is not torn down underneath it
+                if (!isUnmountedRef.current) {
+                    return;
+                }
+                reactRootsMap.forEach((root) => root.unmount());
+                // the roots above are gone; drop them so that a later remount creates fresh ones
+                reactRootsMap.clear();
+            }, 0);
+        };
+    }, [unmountVisualization]);
+    return (
+    // never ever dynamically change the props of this div, otherwise bad things will happen
+    // e.g. visualization being rendered multiple times, etc.
+    _jsx("div", { className: "visualization-uri-root", id: elementId, ref: containerRef, style: visualizationUriRootStyle }));
+});
+export const IntlInsightRenderer = withContexts(InsightRendererCore);
 /**
  * Updated callback (callback with a different reference) is not properly propagated to the "visualization" instance
  * (because it only takes the callbacks provided on the first render)

package/esm/internal/components/BaseVisualization.d.ts

@@ -1,4 +1,3 @@
-import { PureComponent } from "react";
 import { type IAnalyticalBackend, type IPreparedExecution } from "@gooddata/sdk-backend-spi";
 import { type IExecutionConfig, type IInsight, type IInsightDefinition, type ISettings, type ITheme, type IVisualizationClass, type IWorkspacePermissions } from "@gooddata/sdk-model";
 import { type ExplicitDrill, type ILocale, type OnError, type OnExportReady, type OnLoadingChanged, type VisualizationEnvironment } from "@gooddata/sdk-ui";
@@ -46,39 +45,13 @@ export interface IBaseVisualizationProps extends IVisCallbacks {
     configurationPanelRenderers?: IConfigurationPanelRenderers;
     supportsChartFill?: boolean;
 }
-export declare class BaseVisualization extends PureComponent<IBaseVisualizationProps> {
-    static defaultProps: Pick<IBaseVisualizationProps, "visualizationCatalog" | "newDerivedBucketItems" | "referencePoint" | "onExtendedReferencePointChanged" | "onNewDerivedBucketItemsPlaced" | "isMdObjectValid" | "configPanelClassName" | "featureFlags">;
-    private visElementId;
-    private visualization;
-    private executionFactory;
-    private containerRef;
-    /**
-     * The component may render both visualization and config panel. In React18 we therefore need two
-     * roots with their respective render methods. This Map holds the roots for both and provides
-     * render and unmount methods whenever needed.
-     */
-    private reactRootsMap;
-    constructor(props: IBaseVisualizationProps);
-    componentWillUnmount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: IBaseVisualizationProps): void;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    private getVisElementClassName;
-    private getClassName;
-    private setupVisualization;
-    private getReactRenderFunction;
-    private getReactUnmountFunction;
-    private updateVisualization;
-    private triggerPlaceNewDerivedBucketItems;
-    private triggerExtendedReferencePointChanged;
-    private triggerPropertiesChanged;
-    private static bucketReferencePointHasChanged;
-    private static propertiesControlsHasChanged;
-    private somePropertiesRelevantForReferencePointChanged;
-    private getVisualizationProps;
-    getInsightWithDrillDownApplied(sourceVisualization: IInsight, drillDownContext: IDrillDownContext): IInsight;
+/**
+ * Imperative API of the {@link BaseVisualization}, available through its ref.
+ */
+export interface IBaseVisualizationApi {
     getExecution(): IPreparedExecution | null;
     getExecutions(): IPreparedExecution[] | undefined;
+    getInsightWithDrillDownApplied(sourceVisualization: IInsight, drillDownContext: IDrillDownContext): IInsight;
 }
+export declare const BaseVisualization: import("react").ForwardRefExoticComponent<IBaseVisualizationProps & import("react").RefAttributes<IBaseVisualizationApi>>;
 //# sourceMappingURL=BaseVisualization.d.ts.map

package/esm/internal/components/BaseVisualization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseVisualization.d.ts","sourceRoot":"","sources":["../../../src/internal/components/BaseVisualization.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseVisualization.d.ts","sourceRoot":"","sources":["../../../src/internal/components/BaseVisualization.tsx"],"names":[],"mappings":"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"}