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

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/components/configurationControls/conditionalFormatting/ConditionEditor.d.ts

@@ -14,8 +14,10 @@ export interface IConditionEditorProps {
     dateSettings: ICfDateSettings | undefined;
     removable: boolean;
     slot: IReorderSlot;
+    /** A read-only rule may carry an operator/value the editor doesn't curate for this target. */
+    readOnly?: boolean;
     onChange: (condition: IConditionalFormattingCondition) => void;
     onRemove: () => void;
 }
-export declare function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, onChange, onRemove }: IConditionEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, readOnly, onChange, onRemove }: IConditionEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ConditionEditor.d.ts.map

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAiBzE,OAAO,EACH,KAAK,2BAA2B,EAEhC,KAAK,+BAA+B,EAEvC,MAAM,6BAA6B,CAAC;AAarC,OAAO,EAGH,KAAK,WAAW,EAChB,KAAK,eAAe,EAWvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAwXrD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,+BAA+B,CAAC;IAC3C,IAAI,EAAE,2BAA2B,CAAC,MAAM,CAAC,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,iBAAiB,EAAE,wBAAwB,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,eAAe,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,+BAA+B,KAAK,IAAI,CAAC;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACX,EAAE,qBAAqB,2CAoFvB"}
+{"version":3,"file":"ConditionEditor.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/configurationControls/conditionalFormatting/ConditionEditor.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAiBzE,OAAO,EACH,KAAK,2BAA2B,EAEhC,KAAK,+BAA+B,EAEvC,MAAM,6BAA6B,CAAC;AAarC,OAAO,EAGH,KAAK,WAAW,EAChB,KAAK,eAAe,EAavB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkYrD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,+BAA+B,CAAC;IAC3C,IAAI,EAAE,2BAA2B,CAAC,MAAM,CAAC,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,IAAI,EAAE,WAAW,GAAG,SAAS,CAAC;IAC9B,iBAAiB,EAAE,wBAAwB,GAAG,SAAS,CAAC;IACxD,YAAY,EAAE,eAAe,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,SAAS,EAAE,+BAA+B,KAAK,IAAI,CAAC;IAC/D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,IAAI,EACJ,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACX,EAAE,qBAAqB,2CA8FvB"}

package/esm/internal/components/configurationControls/conditionalFormatting/ConditionEditor.js

@@ -9,7 +9,7 @@ import { ColorDropdown } from "../colors/colorDropdown/ColorDropdown.js";
 import { CfDateValueDropdown } from "./CfDateValueDropdown.js";
 import { CfSelect } from "./CfSelect.js";
 import { CF_COLOR_PALETTE, colorToHex, hexToColor } from "./conditionalFormattingColors.js";
-import { displayToRawNumber, literalRaw, literalText, operatorIcon, operatorsForTarget, rangeRaw, rawToDisplayNumber, validateCondition, valueEditorKind, valueForOperator, } from "./conditionalFormattingModel.js";
+import { displayToRawNumber, literalRaw, literalText, operatorIcon, operatorsForTarget, rangeRaw, rawToDisplayNumber, rawValueText, validateCondition, valueEditorKind, valueForOperator, valueMatchesEditorKind, } from "./conditionalFormattingModel.js";
 // InputPure's own contract for the same error state.
 const inputErrorProps = ({ hasError, errorId, }) => hasError ? { hasError, accessibilityConfig: { ariaDescribedBy: errorId, ariaInvalid: true } } : {};
 function CfMeasureValueInput({ raw, isPercent, separators, placeholder, onChangeRaw, ...field }) {
@@ -58,7 +58,7 @@ function CfFieldError({ id, error }) {
             message: intl.formatMessage(FIELD_ERROR_MESSAGE[error]),
         }) }));
 }
-function ConditionValueInput({ condition, editorKind, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, onChange, }) {
+function ConditionValueInput({ condition, editorKind, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, readOnly, onChange, }) {
     const intl = useIntl();
     const errorId = useId();
     // Empty is only an error once the field has been visited, so authoring a rule top-down never reddens
@@ -77,6 +77,12 @@ function ConditionValueInput({ condition, editorKind, kind, isPercent, separator
         return { hasError, errorId: hasError ? errorId : undefined, onVisit: markVisited(field) };
     };
     const error = invalid ?? emptyIn("value") ?? emptyIn("from") ?? emptyIn("to");
+    // A read-only rule may pair a value shape its editor can't represent (e.g. a semantic-layer
+    // condition the pivot editor never authors) — fall back to raw text instead of a dead-ended
+    // control. Placed after every hook call above so it never changes the hooks called per render.
+    if (readOnly && !valueMatchesEditorKind(editorKind, condition.value)) {
+        return _jsx("span", { className: "gd-cf-condition__raw-value", children: rawValueText(condition.value) });
+    }
     const renderControl = () => {
         switch (editorKind) {
             case "none":
@@ -126,11 +132,19 @@ function FormatEditor({ format, onChange }) {
                     ] })
             ] })) }));
 }
-export function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, onChange, onRemove, }) {
+export function ConditionEditor({ condition, kind, isPercent, separators, suggestions, date, dateFilterOptions, dateSettings, removable, slot, readOnly = false, onChange, onRemove, }) {
     const intl = useIntl();
     const isDate = date !== undefined;
+    const curatedOperators = operatorsForTarget(kind, isDate);
+    // A read-only rule may carry an operator the editor doesn't curate for this target (e.g. a
+    // semantic-layer rule the pivot editor can't author); keep it selectable so its real label shows
+    // instead of leaving the picker blank. Gated on readOnly: sanitizeRuleForEditing normalizes the
+    // operator on the editable path, so this must never offer an uncurated choice a user could pick.
+    const operators = readOnly && !curatedOperators.includes(condition.operator)
+        ? [...curatedOperators, condition.operator]
+        : curatedOperators;
     // Date operators render label-only (per design), so no icon lookup on that path.
-    const operatorItems = operatorsForTarget(kind, isDate).map((operator) => ({
+    const operatorItems = operators.map((operator) => ({
         value: operator,
         title: intl.formatMessage((isDate ? conditionalFormattingDateOperatorMessages[operator] : undefined) ??
             conditionalFormattingOperatorMessages[operator]),
@@ -143,13 +157,13 @@ export function ConditionEditor({ condition, kind, isPercent, separators, sugges
         ...(condition.format.backgroundColor ? { backgroundColor: condition.format.backgroundColor } : {}),
     };
     return (_jsxs("div", { className: cx("gd-cf-condition", slot.className), ...slot.rootProps, children: [slot.handle, _jsxs("div", { className: "gd-cf-condition__header", children: [
-                    _jsx("span", { className: "gd-cf-condition__title", children: intl.formatMessage(conditionalFormattingMessages.dialogCondition) }), removable ? (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-cross", accessibilityConfig: {
+                    _jsx("span", { className: "gd-cf-condition__title", children: intl.formatMessage(conditionalFormattingMessages.dialogCondition) }), removable ? (_jsx(Button, { className: "gd-button-link gd-button-icon-only gd-icon-cross gd-cf-condition__delete", accessibilityConfig: {
                             ariaLabel: intl.formatMessage(conditionalFormattingMessages.dialogRemoveCondition),
                         }, onClick: onRemove })) : null] }), _jsx(CfSelect, { value: condition.operator, items: operatorItems, onSelect: (operator) => onChange({
                     ...condition,
                     operator,
                     value: valueForOperator(operator, condition.value, isDate),
-                }) }), _jsx(ConditionValueInput, { condition: condition, editorKind: editorKind, kind: kind, isPercent: isPercent, separators: separators, suggestions: suggestions, date: date, dateFilterOptions: dateFilterOptions, dateSettings: dateSettings, onChange: onChange }, editorKind), _jsxs("div", { className: "gd-cf-condition__format-row", children: [
+                }) }), _jsx(ConditionValueInput, { condition: condition, editorKind: editorKind, kind: kind, isPercent: isPercent, separators: separators, suggestions: suggestions, date: date, dateFilterOptions: dateFilterOptions, dateSettings: dateSettings, readOnly: readOnly, onChange: onChange }, editorKind), _jsxs("div", { className: "gd-cf-condition__format-row", children: [
                     _jsx("span", { className: "gd-cf-dialog__label", children: intl.formatMessage(conditionalFormattingMessages.dialogFormat) }), _jsx("div", { className: "gd-cf-preview", children: condition.format.scope === "row" ? (ROW_PREVIEW_SAMPLE.map((sample, index) => (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: sample }, index)))) : (_jsx("span", { className: "gd-cf-preview__cell", style: previewStyle, children: PREVIEW_SAMPLE[kind] })) }), _jsx(FormatEditor, { format: condition.format, onChange: setFormat })
                 ] })
         ] }));