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

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/esm/internal/translations/de-DE.localization-bundle.d.ts

@@ -628,6 +628,7 @@ export declare const de_DE: {
     "objectShare.selfRestrict.title": string;
     "objectShare.selfRestrict.warning": string;
     "objectShare.workspaceLevel.inherited": string;
+    "objectShare.granteeRemove.inherited": string;
     "objectShare.grantee.you": string;
     "objectShare.adminTag.label": string;
     "objectShare.adminTag.tooltip": string;
@@ -641,12 +642,15 @@ export declare const de_DE: {
     "properties.conditionalFormatting.empty": string;
     "properties.conditionalFormatting.rulesLabel": string;
     "properties.conditionalFormatting.addRule": string;
+    "properties.conditionalFormatting.semanticLabel": string;
     "properties.conditionalFormatting.rule.invalid": string;
     "properties.conditionalFormatting.rule.invalidValue": string;
     "properties.conditionalFormatting.rule.edit": string;
     "properties.conditionalFormatting.rule.delete": string;
+    "properties.conditionalFormatting.rule.view": string;
     "properties.conditionalFormatting.dialog.addTitle": string;
     "properties.conditionalFormatting.dialog.editTitle": string;
+    "properties.conditionalFormatting.dialog.viewTitle": string;
     "properties.conditionalFormatting.dialog.target": string;
     "properties.conditionalFormatting.dialog.selectTarget": string;
     "properties.conditionalFormatting.dialog.condition": string;

package/esm/internal/translations/de-DE.localization-bundle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"de-DE.localization-bundle.d.ts","sourceRoot":"","sources":["../../../src/internal/translations/de-DE.localization-bundle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAurBjB,CAAC"}
+{"version":3,"file":"de-DE.localization-bundle.d.ts","sourceRoot":"","sources":["../../../src/internal/translations/de-DE.localization-bundle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2rBjB,CAAC"}

package/esm/internal/translations/de-DE.localization-bundle.js

@@ -630,6 +630,7 @@ export const de_DE = {
     "objectShare.selfRestrict.title": "Ihren Zugriff beschränken?",
     "objectShare.selfRestrict.warning": "Sie können für sich selbst keine höheren Berechtigungen festlegen.",
     "objectShare.workspaceLevel.inherited": "Diese Berechtigung wird von einem übergeordneten Workspace gewährt und kann hier nicht herabgestuft werden.",
+    "objectShare.granteeRemove.inherited": "Dieser Zugriff wird von einer Gruppe oder einem übergeordneten Workspace geerbt und kann hier nicht entfernt werden.",
     "objectShare.grantee.you": "{name} (Sie)",
     "objectShare.adminTag.label": "Administrator",
     "objectShare.adminTag.tooltip": "Sie und andere Administratoren haben vollen Zugriff auf dieses Objekt.",
@@ -643,12 +644,15 @@ export const de_DE = {
     "properties.conditionalFormatting.empty": "Heben Sie Zellen oder Zeilen hervor, die einer Regel entsprechen.",
     "properties.conditionalFormatting.rulesLabel": "Regeln",
     "properties.conditionalFormatting.addRule": "Hinzufügen",
+    "properties.conditionalFormatting.semanticLabel": "Aus der semantischen Ebene",
     "properties.conditionalFormatting.rule.invalid": "Spalte nicht gefunden",
     "properties.conditionalFormatting.rule.invalidValue": "Ungültiger Wert",
     "properties.conditionalFormatting.rule.edit": "Regel bearbeiten",
     "properties.conditionalFormatting.rule.delete": "Regel löschen",
+    "properties.conditionalFormatting.rule.view": "Regel anzeigen",
     "properties.conditionalFormatting.dialog.addTitle": "Regel hinzufügen",
     "properties.conditionalFormatting.dialog.editTitle": "Regel bearbeiten",
+    "properties.conditionalFormatting.dialog.viewTitle": "Regel anzeigen",
     "properties.conditionalFormatting.dialog.target": "Wann",
     "properties.conditionalFormatting.dialog.selectTarget": "Messwert oder Attribut auswählen",
     "properties.conditionalFormatting.dialog.condition": "Bedingung",