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

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":"AAQA,OAAO,EACH,KAAK,kBAAkB,EAEvB,KAAK,kBAAkB,EAC1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACH,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACvB,KAAK,SAAS,EACd,KAAK,MAAM,EACX,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAI7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,OAAO,EACZ,KAAK,OAAO,EACZ,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,wBAAwB,EAChC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,4BAA4B,EACjC,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,aAAa,EAIrB,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAA4B,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEjG,MAAM,WAAW,uBAAwB,SAAQ,aAAa;IAC1D,OAAO,EAAE,kBAAkB,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,kBAAkB,CAAC;IAC5B,qBAAqB,CAAC,EAAE,GAAG,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,kBAAkB,EAAE,mBAAmB,CAAC;IACxC,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,oBAAoB,CAAC,EAAE,qBAAqB,CAAC;IAC7C,qBAAqB,CAAC,EAAE,WAAW,EAAE,CAAC;IACtC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B,CAAC,CAAC,cAAc,EAAE,uBAAuB,EAAE,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1G,gBAAgB,CAAC,CAAC,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IAEjD,6BAA6B,CAAC,IAAI,IAAI,CAAC;IAEvC,QAAQ,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACjD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,2BAA2B,CAAC,EAAE,4BAA4B,CAAC;IAC3D,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IAClC,YAAY,IAAI,kBAAkB,GAAG,IAAI,CAAC;IAC1C,aAAa,IAAI,kBAAkB,EAAE,GAAG,SAAS,CAAC;IAClD,8BAA8B,CAC1B,mBAAmB,EAAE,QAAQ,EAC7B,gBAAgB,EAAE,iBAAiB,GACpC,QAAQ,CAAC;CACf;AAyBD,eAAO,MAAM,iBAAiB,2HAsc7B,CAAC"}

package/esm/internal/components/BaseVisualization.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
-import { PureComponent, createRef } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { isEmpty, isEqual, omit } from "lodash-es";
 import { createRoot } from "react-dom/client";
 import { v4 as uuidv4 } from "uuid";
@@ -8,268 +8,310 @@ import { insightProperties, isInsight, visClassUrl, } from "@gooddata/sdk-model"
 import { ConfigPanelClassName, } from "../interfaces/Visualization.js";
 import { cleanupKeyDriverAnalysisOnMetrics, hideKeyDriverOnMetrics } from "../utils/keyDriverAnalysis.js";
 import { FullVisualizationCatalog } from "./VisualizationCatalog.js";
-export class BaseVisualization extends PureComponent {
-    static defaultProps = {
-        visualizationCatalog: FullVisualizationCatalog,
-        newDerivedBucketItems: [],
-        referencePoint: undefined,
-        onExtendedReferencePointChanged: () => { },
-        onNewDerivedBucketItemsPlaced: () => { },
-        isMdObjectValid: true,
-        configPanelClassName: ConfigPanelClassName,
-        featureFlags: {},
+const noop = () => { };
+function getVisualizationId(insight) {
+    return isInsight(insight) ? insight.insight.identifier : "__new_visualization__";
+}
+function bucketReferencePointHasChanged(currentReferencePoint, nextReferencePoint) {
+    return !isEqual(omit(currentReferencePoint, ["properties", "availableSorts"]), omit(nextReferencePoint, ["properties", "availableSorts"]));
+}
+function propertiesControlsHasChanged(currentReferencePoint, nextReferencePoint) {
+    return !isEqual(currentReferencePoint?.properties?.controls, nextReferencePoint?.properties?.controls);
+}
+export const BaseVisualization = forwardRef(function BaseVisualization(props, ref) {
+    const { visualizationCatalog = FullVisualizationCatalog, newDerivedBucketItems = [], referencePoint = undefined, onExtendedReferencePointChanged = noop, onNewDerivedBucketItemsPlaced = noop, isMdObjectValid = true, configPanelClassName = ConfigPanelClassName, featureFlags = {}, } = props;
+    /**
+     * Props with the defaults applied; the lifecycle handling below compares and passes them around
+     * the very same way the class component did with props defaulted by React.
+     */
+    const currentProps = {
+        ...props,
+        visualizationCatalog,
+        newDerivedBucketItems,
+        referencePoint,
+        onExtendedReferencePointChanged,
+        onNewDerivedBucketItemsPlaced,
+        isMdObjectValid,
+        configPanelClassName,
+        featureFlags,
     };
-    visElementId;
-    visualization;
-    executionFactory;
-    containerRef;
+    const [visElementId, setVisElementId] = useState(() => uuidv4());
+    /**
+     * Mirror of the visElementId state. The element lookups handed over to the pluggable visualization
+     * are lazy, so they must see the new id as soon as it is generated - that is, before the state
+     * update is processed and the container div is remounted under the new key.
+     */
+    const visElementIdRef = useRef(visElementId);
+    const visualization = 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();
-    constructor(props) {
-        super(props);
-        const { insight } = props;
-        let visualizationId;
-        if (isInsight(insight)) {
-            visualizationId = insight.insight.identifier;
-        }
-        else {
-            visualizationId = "__new_visualization__";
-        }
-        this.visElementId = uuidv4();
-        this.executionFactory = props.backend
-            .withCorrelation({ visualizationId })
+    const reactRootsMap = useRef(new Map());
+    const executionFactory = useRef(undefined);
+    if (!executionFactory.current) {
+        executionFactory.current = props.backend
+            .withCorrelation({ visualizationId: getVisualizationId(props.insight) })
             .workspace(props.projectId)
             .execution();
-        this.containerRef = createRef();
-    }
-    componentWillUnmount() {
-        if (this.visualization) {
-            this.visualization.unmount();
-        }
-        // 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));
-    }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const newDerivedBucketItemsChanged = !isEmpty(nextProps.newDerivedBucketItems) &&
-            !isEqual(nextProps.newDerivedBucketItems, this.props.newDerivedBucketItems);
-        if (newDerivedBucketItemsChanged) {
-            this.triggerPlaceNewDerivedBucketItems(nextProps);
-            return;
-        }
-        // buckets changed from within inner visualization logic
-        const bucketsToUpdate = this.visualization?.getBucketsToUpdate(this.props.referencePoint, nextProps.referencePoint);
-        if (bucketsToUpdate) {
-            this.triggerPlaceNewDerivedBucketItems(nextProps, bucketsToUpdate);
-            this.triggerExtendedReferencePointChanged(nextProps, this.props);
-            return;
-        }
-        const visualizationClassChanged = !isEqual(nextProps.visualizationClass, this.props.visualizationClass);
-        const referencePointChanged = BaseVisualization.bucketReferencePointHasChanged(this.props.referencePoint, nextProps.referencePoint);
-        const relevantPropertiesChanged = this.somePropertiesRelevantForReferencePointChanged(this.props.referencePoint, nextProps.referencePoint);
-        const labelsChanged = !isEqual(this.props.insight?.insight.attributeFilterConfigs, nextProps.insight?.insight.attributeFilterConfigs);
-        const propertiesControlsChanged = BaseVisualization.propertiesControlsHasChanged(this.props.referencePoint, nextProps.referencePoint);
-        if (visualizationClassChanged) {
-            this.visElementId = uuidv4();
-            this.setupVisualization(nextProps);
-        }
-        if (referencePointChanged ||
-            relevantPropertiesChanged ||
-            visualizationClassChanged ||
-            labelsChanged) {
-            this.triggerExtendedReferencePointChanged(nextProps, 
-            // only pass current props if the visualization class is the same (see getExtendedReferencePoint JSDoc)
-            visualizationClassChanged ? undefined : this.props);
-            // Some of the properties eg. stacking of measures, dual axes influence sorting
-        }
-        else if (propertiesControlsChanged) {
-            this.triggerPropertiesChanged(nextProps, this.props);
-        }
     }
-    componentDidMount() {
-        this.setupVisualization(this.props);
-        this.updateVisualization();
-        this.triggerExtendedReferencePointChanged(this.props);
-    }
-    componentDidUpdate() {
-        if (this.props.isMdObjectValid) {
-            this.updateVisualization();
-        }
-    }
-    render() {
-        return (_jsx("div", { "aria-label": "base-visualization", style: { height: "100%" }, className: this.getClassName(), ref: this.containerRef }, this.visElementId));
-    }
-    getVisElementClassName() {
-        return `gd-vis-${this.visElementId}`;
-    }
-    getClassName() {
-        return `gd-base-visualization ${this.getVisElementClassName()}`;
-    }
-    setupVisualization(props) {
-        const { insight, visualizationClass, environment, locale, featureFlags, permissions, projectId, configPanelClassName, renderer, unmount, } = props;
-        if (this.visualization) {
-            this.visualization.unmount();
+    const getVisElementClassName = () => `gd-vis-${visElementIdRef.current}`;
+    const getClassName = () => `gd-base-visualization ${getVisElementClassName()}`;
+    const getReactRenderFunction = () => {
+        return (children, element) => {
+            if (!element) {
+                return;
+            }
+            if (!reactRootsMap.current.get(element)) {
+                reactRootsMap.current.set(element, createRoot(element));
+            }
+            reactRootsMap.current.get(element).render(children);
+        };
+    };
+    const getReactUnmountFunction = () => {
+        return () => reactRootsMap.current.forEach((root) => root.render(null));
+    };
+    /**
+     * The `hostProps` are the equivalent of `this.props` of the original class component: the class
+     * picked the catalog and the messages from the props of the last completed render, which - when
+     * setting up on a visualization class change - were still the previous ones. Everything else is
+     * taken from the props the visualization is being set up for.
+     */
+    const setupVisualization = (setupProps, hostProps = setupProps) => {
+        const { insight, visualizationClass, environment, locale, featureFlags: setupFeatureFlags, permissions, projectId, configPanelClassName: setupConfigPanelClassName, renderer, unmount, } = setupProps;
+        if (visualization.current) {
+            visualization.current.unmount();
         }
         const visUri = visClassUrl(visualizationClass);
         let visFactory;
         try {
-            visFactory = this.props
-                .visualizationCatalog.forUri(visUri, featureFlags?.enableNewPivotTable ?? true, featureFlags?.enableNewGeoPushpin ?? false)
+            visFactory = hostProps
+                .visualizationCatalog.forUri(visUri, setupFeatureFlags?.enableNewPivotTable ?? true, setupFeatureFlags?.enableNewGeoPushpin ?? false)
                 .getFactory();
         }
         catch {
             console.error(`Error: unsupported visualization type - ${visUri}`);
         }
-        let visualizationId;
-        if (isInsight(insight)) {
-            visualizationId = insight.insight.identifier;
-        }
-        else {
-            visualizationId = "__new_visualization__";
-        }
         if (visFactory) {
             const constructorParams = {
                 projectId,
                 locale,
-                messages: this.props.messages,
+                messages: hostProps.messages,
                 environment,
-                backend: props.backend.withCorrelation({ visualizationId }),
+                backend: setupProps.backend.withCorrelation({
+                    visualizationId: getVisualizationId(insight),
+                }),
                 element: () => {
-                    const rootNode = this.containerRef.current?.getRootNode() ?? document;
-                    return rootNode.querySelector(`.${this.getVisElementClassName()}`);
+                    const rootNode = containerRef.current?.getRootNode() ?? document;
+                    return rootNode.querySelector(`.${getVisElementClassName()}`);
                 },
                 configPanelElement: () => {
-                    const rootNode = this.containerRef.current?.getRootNode() ?? document;
-                    return rootNode.querySelector(`.${configPanelClassName}`);
+                    const rootNode = containerRef.current?.getRootNode() ?? document;
+                    return rootNode.querySelector(`.${setupConfigPanelClassName}`);
                 },
                 callbacks: {
-                    afterRender: props.afterRender,
-                    onLoadingChanged: props.onLoadingChanged,
-                    onError: props.onError,
-                    onExportReady: props.onExportReady,
-                    pushData: props.pushData,
-                    onDrill: props.onDrill,
-                    onDataView: props.onDataView,
+                    afterRender: setupProps.afterRender,
+                    onLoadingChanged: setupProps.onLoadingChanged,
+                    onError: setupProps.onError,
+                    onExportReady: setupProps.onExportReady,
+                    pushData: setupProps.pushData,
+                    onDrill: setupProps.onDrill,
+                    onDataView: setupProps.onDataView,
                 },
-                featureFlags,
+                featureFlags: setupFeatureFlags,
                 permissions,
-                visualizationProperties: insightProperties(props.insight),
-                renderFun: (renderer ?? this.getReactRenderFunction()),
-                unmountFun: unmount ?? this.getReactUnmountFunction(),
+                visualizationProperties: insightProperties(setupProps.insight),
+                renderFun: (renderer ?? getReactRenderFunction()),
+                unmountFun: unmount ?? getReactUnmountFunction(),
             };
-            this.visualization = visFactory(constructorParams);
+            visualization.current = visFactory(constructorParams);
         }
-    }
-    getReactRenderFunction = () => {
-        return (children, element) => {
-            if (!element) {
-                return;
-            }
-            if (!this.reactRootsMap.get(element)) {
-                this.reactRootsMap.set(element, createRoot(element));
-            }
-            this.reactRootsMap.get(element).render(children);
-        };
     };
-    getReactUnmountFunction = () => {
-        return () => this.reactRootsMap.forEach((root) => root.render(null));
+    const getVisualizationProps = () => {
+        return {
+            locale: props.locale,
+            dateFormat: props.dateFormat,
+            dimensions: {
+                width: props.width,
+                height: props.height,
+            },
+            custom: {
+                drillableItems: props.drillableItems,
+                totalsEditAllowed: props.totalsEditAllowed,
+                lastSavedVisClassUrl: props.lastSavedVisClassUrl,
+                sourceInsightId: props.sourceInsightId,
+                configurationPanelRenderers: props.configurationPanelRenderers,
+            },
+            messages: props.messages,
+            config: props.config,
+            theme: props.theme,
+            referenceTheme: props.referenceTheme,
+            executionConfig: props.executionConfig,
+            supportsChartFill: props.supportsChartFill,
+        };
     };
-    updateVisualization() {
-        if (!this.visualization) {
+    const updateVisualization = () => {
+        if (!visualization.current) {
             return;
         }
-        this.visualization.update(this.getVisualizationProps(), this.props.insight, this.props.insightPropertiesMeta, this.executionFactory);
-    }
-    triggerPlaceNewDerivedBucketItems(props, newBucketItemsFromVisualization) {
-        const { newDerivedBucketItems, referencePoint, onNewDerivedBucketItemsPlaced } = props;
-        const newDerivedBucketItemsToPlace = newBucketItemsFromVisualization ?? newDerivedBucketItems;
-        if (this.visualization &&
-            referencePoint &&
+        visualization.current.update(getVisualizationProps(), props.insight, props.insightPropertiesMeta, executionFactory.current);
+    };
+    const triggerPlaceNewDerivedBucketItems = (triggerProps, newBucketItemsFromVisualization) => {
+        const { newDerivedBucketItems: triggerNewDerivedBucketItems, referencePoint: triggerReferencePoint, onNewDerivedBucketItemsPlaced: triggerOnNewDerivedBucketItemsPlaced, } = triggerProps;
+        const newDerivedBucketItemsToPlace = newBucketItemsFromVisualization ?? triggerNewDerivedBucketItems;
+        if (visualization.current &&
+            triggerReferencePoint &&
             newDerivedBucketItemsToPlace &&
-            onNewDerivedBucketItemsPlaced) {
-            void this.visualization
-                .addNewDerivedBucketItems(referencePoint, newDerivedBucketItemsToPlace)
-                .then(onNewDerivedBucketItemsPlaced);
+            triggerOnNewDerivedBucketItemsPlaced) {
+            void visualization.current
+                .addNewDerivedBucketItems(triggerReferencePoint, newDerivedBucketItemsToPlace)
+                .then(triggerOnNewDerivedBucketItemsPlaced);
         }
-    }
-    triggerExtendedReferencePointChanged(newProps, currentProps) {
-        const { referencePoint: newReferencePoint, onExtendedReferencePointChanged } = newProps;
-        if (this.visualization && newReferencePoint && onExtendedReferencePointChanged) {
-            void this.visualization
-                .getExtendedReferencePoint(newReferencePoint, currentProps?.referencePoint)
+    };
+    const triggerExtendedReferencePointChanged = (newProps, previousProps) => {
+        const { referencePoint: newReferencePoint, onExtendedReferencePointChanged: newOnExtendedReferencePointChanged, } = newProps;
+        if (visualization.current && newReferencePoint && newOnExtendedReferencePointChanged) {
+            void visualization.current
+                .getExtendedReferencePoint(newReferencePoint, previousProps?.referencePoint)
                 .then(async (extendedReferencePoint) => {
-                const sortConfig = await this.visualization.getSortConfig(extendedReferencePoint);
+                const sortConfig = await visualization.current.getSortConfig(extendedReferencePoint);
                 let updatedExtendedReferencePoint = cleanupKeyDriverAnalysisOnMetrics(extendedReferencePoint);
                 updatedExtendedReferencePoint = hideKeyDriverOnMetrics(updatedExtendedReferencePoint);
                 // new sort config needs to be sent together with new reference point to avoid double executions with old invalid sort until new one arrives by its own handler
-                onExtendedReferencePointChanged(updatedExtendedReferencePoint, sortConfig);
+                newOnExtendedReferencePointChanged(updatedExtendedReferencePoint, sortConfig);
             });
         }
-    }
-    triggerPropertiesChanged(newProps, currentProps) {
+    };
+    const triggerPropertiesChanged = (newProps, previousProps) => {
         const { referencePoint: newReferencePoint, onSortingChanged } = newProps;
         // Some of the properties eg. stacking of measures, dual axes influence sorting
-        if (this.visualization && newReferencePoint && onSortingChanged) {
-            void this.visualization
-                .getExtendedReferencePoint(newReferencePoint, currentProps?.referencePoint)
+        if (visualization.current && newReferencePoint && onSortingChanged) {
+            void visualization.current
+                .getExtendedReferencePoint(newReferencePoint, previousProps?.referencePoint)
                 .then((extendedRefPoint) => {
-                void this.visualization.getSortConfig(extendedRefPoint).then(onSortingChanged);
+                void visualization.current.getSortConfig(extendedRefPoint).then(onSortingChanged);
             });
         }
-    }
-    static bucketReferencePointHasChanged(currentReferencePoint, nextReferencePoint) {
-        return !isEqual(omit(currentReferencePoint, ["properties", "availableSorts"]), omit(nextReferencePoint, ["properties", "availableSorts"]));
-    }
-    static propertiesControlsHasChanged(currentReferencePoint, nextReferencePoint) {
-        return !isEqual(currentReferencePoint?.properties?.controls, nextReferencePoint?.properties?.controls);
-    }
-    somePropertiesRelevantForReferencePointChanged(currentReferencePoint, nextReferencePoint) {
-        if (this.visualization) {
-            return this.visualization.haveSomePropertiesRelevantForReferencePointChanged(currentReferencePoint, nextReferencePoint);
+    };
+    const somePropertiesRelevantForReferencePointChanged = (currentReferencePoint, nextReferencePoint) => {
+        if (visualization.current) {
+            return visualization.current.haveSomePropertiesRelevantForReferencePointChanged(currentReferencePoint, nextReferencePoint);
         }
         return false;
-    }
-    getVisualizationProps() {
-        return {
-            locale: this.props.locale,
-            dateFormat: this.props.dateFormat,
-            dimensions: {
-                width: this.props.width,
-                height: this.props.height,
-            },
-            custom: {
-                drillableItems: this.props.drillableItems,
-                totalsEditAllowed: this.props.totalsEditAllowed,
-                lastSavedVisClassUrl: this.props.lastSavedVisClassUrl,
-                sourceInsightId: this.props.sourceInsightId,
-                configurationPanelRenderers: this.props.configurationPanelRenderers,
-            },
-            messages: this.props.messages,
-            config: this.props.config,
-            theme: this.props.theme,
-            referenceTheme: this.props.referenceTheme,
-            executionConfig: this.props.executionConfig,
-            supportsChartFill: this.props.supportsChartFill,
-        };
-    }
-    getInsightWithDrillDownApplied(sourceVisualization, drillDownContext) {
-        return this.visualization.getInsightWithDrillDownApplied(sourceVisualization, drillDownContext, this.props.backend.capabilities.supportsElementUris ?? true);
-    }
-    getExecution() {
-        if (!this.visualization) {
-            this.setupVisualization(this.props);
+    };
+    const getInsightWithDrillDownApplied = (sourceVisualization, drillDownContext) => {
+        return visualization.current.getInsightWithDrillDownApplied(sourceVisualization, drillDownContext, props.backend.capabilities.supportsElementUris ?? true);
+    };
+    const getExecution = () => {
+        if (!visualization.current) {
+            setupVisualization(currentProps);
         }
-        return this.visualization.getExecution(this.getVisualizationProps(), this.props.insight, this.executionFactory);
-    }
-    getExecutions() {
-        if (!this.visualization) {
-            this.setupVisualization(this.props);
+        return visualization.current.getExecution(getVisualizationProps(), props.insight, executionFactory.current);
+    };
+    const getExecutions = () => {
+        if (!visualization.current) {
+            setupVisualization(currentProps);
         }
-        return this.visualization?.getExecutions?.(this.getVisualizationProps(), this.props.insight, this.executionFactory);
-    }
-}
+        return visualization.current?.getExecutions?.(getVisualizationProps(), props.insight, executionFactory.current);
+    };
+    useImperativeHandle(ref, () => ({
+        getExecution,
+        getExecutions,
+        getInsightWithDrillDownApplied,
+    }));
+    const prevPropsRef = useRef(currentProps);
+    const mountedRef = useRef(false);
+    /**
+     * Replacement of UNSAFE_componentWillReceiveProps. Runs before the mount & update effect below so
+     * that the derived bucket items and the reference point are handled before the visualization is
+     * updated, the same way the class did it in the pre-render phase.
+     *
+     * The effect intentionally has no dependency list - it has to see every single commit, exactly like
+     * the class lifecycle did; the props diff below decides what actually happens. The visElementId is
+     * regenerated only when the visualization class really changes, so there is no update loop.
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(() => {
+        const previousProps = prevPropsRef.current;
+        prevPropsRef.current = currentProps;
+        if (previousProps === currentProps) {
+            // the very first run, there is nothing to diff against yet
+            return;
+        }
+        const newDerivedBucketItemsChanged = !isEmpty(currentProps.newDerivedBucketItems) &&
+            !isEqual(currentProps.newDerivedBucketItems, previousProps.newDerivedBucketItems);
+        if (newDerivedBucketItemsChanged) {
+            triggerPlaceNewDerivedBucketItems(currentProps);
+            return;
+        }
+        // buckets changed from within inner visualization logic
+        const bucketsToUpdate = visualization.current?.getBucketsToUpdate(previousProps.referencePoint, currentProps.referencePoint);
+        if (bucketsToUpdate) {
+            triggerPlaceNewDerivedBucketItems(currentProps, bucketsToUpdate);
+            triggerExtendedReferencePointChanged(currentProps, previousProps);
+            return;
+        }
+        const visualizationClassChanged = !isEqual(currentProps.visualizationClass, previousProps.visualizationClass);
+        const referencePointChanged = bucketReferencePointHasChanged(previousProps.referencePoint, currentProps.referencePoint);
+        const relevantPropertiesChanged = somePropertiesRelevantForReferencePointChanged(previousProps.referencePoint, currentProps.referencePoint);
+        const labelsChanged = !isEqual(previousProps.insight?.insight.attributeFilterConfigs, currentProps.insight?.insight.attributeFilterConfigs);
+        const propertiesControlsChanged = propertiesControlsHasChanged(previousProps.referencePoint, currentProps.referencePoint);
+        if (visualizationClassChanged) {
+            const newVisElementId = uuidv4();
+            visElementIdRef.current = newVisElementId;
+            setVisElementId(newVisElementId);
+            setupVisualization(currentProps, previousProps);
+        }
+        if (referencePointChanged ||
+            relevantPropertiesChanged ||
+            visualizationClassChanged ||
+            labelsChanged) {
+            triggerExtendedReferencePointChanged(currentProps, 
+            // only pass current props if the visualization class is the same (see getExtendedReferencePoint JSDoc)
+            visualizationClassChanged ? undefined : previousProps);
+            // Some of the properties eg. stacking of measures, dual axes influence sorting
+        }
+        else if (propertiesControlsChanged) {
+            triggerPropertiesChanged(currentProps, previousProps);
+        }
+    });
+    /**
+     * Replacement of componentDidMount and componentDidUpdate.
+     */
+    useLayoutEffect(() => {
+        if (!mountedRef.current) {
+            mountedRef.current = true;
+            setupVisualization(currentProps);
+            updateVisualization();
+            triggerExtendedReferencePointChanged(currentProps);
+            return;
+        }
+        if (visElementId !== visElementIdRef.current) {
+            // the visualization class has just changed; the container div is about to be remounted
+            // under the new key, so postpone the update until it is in the DOM
+            return;
+        }
+        if (isMdObjectValid) {
+            updateVisualization();
+        }
+    });
+    /**
+     * Replacement of componentWillUnmount.
+     */
+    useEffect(() => {
+        const reactRoots = reactRootsMap.current;
+        return () => {
+            // a subsequent mount (React StrictMode remounts the tree in development) has to set the
+            // visualization up again, exactly like componentDidMount did
+            mountedRef.current = false;
+            visualization.current?.unmount();
+            // In order to avoid race conditions when mounting and unmounting synchronously,
+            // we use timeout for React18.
+            // https://github.com/facebook/react/issues/25675
+            reactRoots.forEach((root) => setTimeout(() => root.unmount(), 0));
+        };
+    }, []);
+    return (_jsx("div", { "aria-label": "base-visualization", style: { height: "100%" }, className: getClassName(), ref: containerRef }, visElementId));
+});

package/esm/internal/index.d.ts

@@ -8,7 +8,7 @@ export { ColorDropdown } from "./components/configurationControls/colors/colorDr
 export { ColoredItemContent } from "./components/configurationControls/colors/coloredItemsList/ColoredItemContent.js";
 export { LegendSection } from "./components/configurationControls/legend/LegendSection.js";
 export { MinMaxControl } from "./components/configurationControls/MinMaxControl.js";
-export { BaseVisualization, type IBaseVisualizationProps } from "./components/BaseVisualization.js";
+export { BaseVisualization, type IBaseVisualizationApi, type IBaseVisualizationProps, } from "./components/BaseVisualization.js";
 export { DefaultVisualizationCatalog, FullVisualizationCatalog, type IVisualizationCatalog, } from "./components/VisualizationCatalog.js";
 export { resolveMessages, DEFAULT_LANGUAGE, DEFAULT_MESSAGES } from "./utils/translations.js";
 export { createIntlMock } from "./tests/testIntlProvider.js";

package/esm/internal/index.d.ts.map

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

package/esm/internal/index.js

@@ -10,7 +10,7 @@ export { ColorDropdown } from "./components/configurationControls/colors/colorDr
 export { ColoredItemContent } from "./components/configurationControls/colors/coloredItemsList/ColoredItemContent.js";
 export { LegendSection } from "./components/configurationControls/legend/LegendSection.js";
 export { MinMaxControl } from "./components/configurationControls/MinMaxControl.js";
-export { BaseVisualization } from "./components/BaseVisualization.js";
+export { BaseVisualization, } from "./components/BaseVisualization.js";
 export { DefaultVisualizationCatalog, FullVisualizationCatalog, } from "./components/VisualizationCatalog.js";
 export { resolveMessages, DEFAULT_LANGUAGE, DEFAULT_MESSAGES } from "./utils/translations.js";
 export { createIntlMock } from "./tests/testIntlProvider.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-ext",
-  "version": "11.53.0-alpha.1",
+  "version": "11.53.0-alpha.2",
   "description": "GoodData.UI SDK - Extensions",
   "license": "LicenseRef-LICENSE",
   "author": "GoodData Corporation",
@@ -63,20 +63,20 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-base": "11.53.0-alpha.1",
-    "@gooddata/sdk-backend-spi": "11.53.0-alpha.1",
-    "@gooddata/sdk-embedding": "11.53.0-alpha.1",
-    "@gooddata/sdk-model": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-charts": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-geo": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-kit": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-semantic-search": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-pivot": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-vis-commons": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.1",
-    "@gooddata/util": "11.53.0-alpha.1",
-    "@gooddata/sdk-ui-filters": "11.53.0-alpha.1"
+    "@gooddata/sdk-backend-base": "11.53.0-alpha.2",
+    "@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-embedding": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-charts": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-geo": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-filters": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-kit": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-pivot": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-vis-commons": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-semantic-search": "11.53.0-alpha.2",
+    "@gooddata/util": "11.53.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.53.0-alpha.2"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -124,12 +124,12 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.53.0-alpha.1",
-    "@gooddata/oxlint-config": "11.53.0-alpha.1",
-    "@gooddata/reference-workspace": "11.53.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.1",
-    "@gooddata/stylelint-config": "11.53.0-alpha.1",
-    "@gooddata/i18n-toolkit": "11.53.0-alpha.1"
+    "@gooddata/eslint-config": "11.53.0-alpha.2",
+    "@gooddata/i18n-toolkit": "11.53.0-alpha.2",
+    "@gooddata/oxlint-config": "11.53.0-alpha.2",
+    "@gooddata/reference-workspace": "11.53.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.53.0-alpha.2",
+    "@gooddata/stylelint-config": "11.53.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",