@gooddata/sdk-ui-filters 11.40.0-alpha.5 → 11.40.0-alpha.6

package/esm/MeasureValueFilter/ComparisonInput.d.ts

@@ -10,6 +10,12 @@ interface IComparisonInputProps {
     hasError?: boolean;
     ariaDescribedBy?: string;
     separators?: ISeparators;
+    /**
+     * 1-based condition position. When set, it is appended to the accessible label so a filter
+     * with multiple conditions does not expose several identically-named inputs (WCAG 2.4.6) —
+     * a unique id alone is not enough, the checker compares the resolved name text.
+     */
+    conditionNumber?: number;
 }
-export declare function ComparisonInput({ value, usePercentage, disableAutofocus, onValueChange, onEnterKeyPress, onBlur, hasError, ariaDescribedBy, separators }: IComparisonInputProps): ReactElement;
+export declare function ComparisonInput({ value, usePercentage, disableAutofocus, onValueChange, onEnterKeyPress, onBlur, hasError, ariaDescribedBy, separators, conditionNumber }: IComparisonInputProps): ReactElement;
 export {};

package/esm/MeasureValueFilter/ComparisonInput.js

@@ -1,15 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { InputWithNumberFormat } from "@gooddata/sdk-ui-kit";
-export function ComparisonInput({ value, usePercentage, disableAutofocus, onValueChange, onEnterKeyPress, onBlur, hasError, ariaDescribedBy, separators, }) {
+import { InputWithNumberFormat, useIdPrefixed } from "@gooddata/sdk-ui-kit";
+export function ComparisonInput({ value, usePercentage, disableAutofocus, onValueChange, onEnterKeyPress, onBlur, hasError, ariaDescribedBy, separators, conditionNumber, }) {
     const intl = useIntl();
-    return (_jsx(InputWithNumberFormat, { className: "s-mvf-comparison-value-input", dataTestId: "mvf-comparison-value-input", value: value ?? undefined, onEnterKeyPress: onEnterKeyPress, onChange: (val) => onValueChange(val), onBlur: onBlur ? () => onBlur() : undefined, hasError: hasError, isSmall: true, autofocus: !disableAutofocus, suffix: usePercentage ? "%" : "", accessibilityConfig: {
-            suffixAriaLabel: usePercentage
-                ? intl.formatMessage({
-                    id: "input.unit.percent",
-                })
-                : undefined,
-            ariaDescribedBy,
-            ariaInvalid: hasError ? true : undefined,
-        }, separators: separators }));
+    // Label is provided via a hidden element referenced by aria-labelledby (rather than a direct
+    // aria-label string), following the codebase convention for input labelling.
+    const labelId = useIdPrefixed("mvf-comparison-value-label");
+    const baseLabel = intl.formatMessage({ id: "mvf.comparisonInput.ariaLabel" });
+    const labelText = conditionNumber === undefined
+        ? baseLabel
+        : intl.formatMessage({ id: "mvf.input.ariaLabel.withCondition" }, { label: baseLabel, number: conditionNumber });
+    return (_jsxs(_Fragment, { children: [
+            _jsx(InputWithNumberFormat, { className: "s-mvf-comparison-value-input", dataTestId: "mvf-comparison-value-input", autocomplete: "off", value: value ?? undefined, onEnterKeyPress: onEnterKeyPress, onChange: (val) => onValueChange(val), onBlur: onBlur ? () => onBlur() : undefined, hasError: hasError, isSmall: true, autofocus: !disableAutofocus, suffix: usePercentage ? "%" : "", accessibilityConfig: {
+                    ariaLabelledBy: labelId,
+                    suffixAriaLabel: usePercentage
+                        ? intl.formatMessage({
+                            id: "input.unit.percent",
+                        })
+                        : undefined,
+                    ariaDescribedBy,
+                    ariaInvalid: hasError ? true : undefined,
+                }, separators: separators }), _jsx("span", { className: "sr-only", id: labelId, children: labelText })
+        ] }));
 }

package/esm/MeasureValueFilter/ConditionInputSection.d.ts

@@ -2,6 +2,11 @@ import { type ISeparators } from "@gooddata/sdk-model";
 import { type IMeasureValueFilterValue, type MeasureValueFilterOperator } from "./types.js";
 export interface IConditionInputSectionProps {
     index: number;
+    /**
+     * 1-based condition position, passed to the value inputs to disambiguate their accessible
+     * names when a filter has multiple conditions (WCAG 2.4.6). Undefined for a single condition.
+     */
+    conditionNumber?: number;
     condition: {
         operator: MeasureValueFilterOperator;
         value: IMeasureValueFilterValue;

package/esm/MeasureValueFilter/ConditionInputSection.js

@@ -7,7 +7,7 @@ import { ComparisonInput } from "./ComparisonInput.js";
 import { RangeInput } from "./RangeInput.js";
 export const ConditionInputSection = memo(function ConditionInputSection(props) {
     const intl = useIntl();
-    const { index, condition, usePercentage, baseDisableAutofocus, separators, onValueChange, onFromChange, onToChange, onValueBlur, onFromBlur, onToBlur, onApply, } = props;
+    const { index, conditionNumber, condition, usePercentage, baseDisableAutofocus, separators, onValueChange, onFromChange, onToChange, onValueBlur, onFromBlur, onToBlur, onApply, } = props;
     if (!condition || condition.operator === "ALL") {
         return null;
     }
@@ -25,7 +25,7 @@ export const ConditionInputSection = memo(function ConditionInputSection(props)
             })
             : undefined;
         return (_jsxs(_Fragment, { children: [
-                _jsx(ComparisonInput, { value: condition.value.value, usePercentage: usePercentage, onValueChange: (v) => onValueChange(index, v), onEnterKeyPress: onApply, onBlur: () => onValueBlur(index), hasError: shouldShowError, ariaDescribedBy: shouldShowError ? errorId : undefined, disableAutofocus: disableAutofocus, separators: separators }), shouldShowError ? (_jsx("div", { id: errorId, className: "gd-mvf-input-error s-mvf-input-error", "data-testid": errorId, role: "alert", children: validationErrorText })) : null] }));
+                _jsx(ComparisonInput, { value: condition.value.value, usePercentage: usePercentage, onValueChange: (v) => onValueChange(index, v), onEnterKeyPress: onApply, onBlur: () => onValueBlur(index), hasError: shouldShowError, ariaDescribedBy: shouldShowError ? errorId : undefined, disableAutofocus: disableAutofocus, separators: separators, conditionNumber: conditionNumber }), shouldShowError ? (_jsx("div", { id: errorId, className: "gd-mvf-input-error s-mvf-input-error", "data-testid": errorId, role: "alert", children: validationErrorText })) : null] }));
     }
     if (isRangeConditionOperator(condition.operator)) {
         const { from = null, to = null } = condition.value;
@@ -43,7 +43,7 @@ export const ConditionInputSection = memo(function ConditionInputSection(props)
                 errorText: fromErrorText,
             }, toField: {
                 errorText: toErrorText,
-            }, disableAutofocus: disableAutofocus, separators: separators }));
+            }, disableAutofocus: disableAutofocus, separators: separators, conditionNumber: conditionNumber }));
     }
     return null;
 });

package/esm/MeasureValueFilter/Dropdown.d.ts

@@ -29,6 +29,7 @@ interface IDropdownProps extends IMeasureValueFilterCustomComponentProps {
     insightDimensionality?: IDimensionalityItem[];
     isDimensionalityEnabled?: boolean;
     isFilterSummaryEnabled?: boolean;
+    showSimplifiedSummary?: boolean;
     catalogDimensionality?: IDimensionalityItem[];
     loadCatalogDimensionality?: (dimensionality: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
     onDimensionalityChange?: (dimensionality: ObjRefInScope[]) => void;
@@ -38,6 +39,8 @@ interface IDropdownProps extends IMeasureValueFilterCustomComponentProps {
     alignPoints?: IAlignPoint[];
     fullscreenOnMobile?: boolean;
     mobileHeader?: ReactNode;
+    dialogId?: string;
+    isViewMode?: boolean;
 }
 export declare function Dropdown(props: IDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/MeasureValueFilter/Dropdown.js

@@ -13,14 +13,14 @@ const alignPoints = ["bl tl", "tl bl", "br tr", "tr br"];
 const DROPDOWN_ALIGNMENTS = alignPoints.map((align) => ({ align, offset: { x: 1, y: 0 } }));
 const MOBILE_DROPDOWN_ALIGN_POINTS = [{ align: "tl tl" }];
 const DropdownWithIntl = memo(function DropdownWithIntl(props) {
-    const { operator = "ALL", usePercentage, warningMessage, locale, onCancel, anchorEl, separators, format, useShortFormat, measureTitle, displayTreatNullAsZeroOption = false, treatNullAsZeroValue = false, enableOperatorSelection, onApply: onApplyProp, onChange: onChangeProp, withoutApply, BodyComponent, DropdownActionsComponent, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled = true, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, conditions = [], enableMultipleConditions = false, enableRankingWithMvf, applyOnResult, loadMetricDetails, isHeaderEnabled, alignPoints, fullscreenOnMobile, mobileHeader, } = props;
+    const { operator = "ALL", usePercentage, warningMessage, locale, onCancel, anchorEl, separators, format, useShortFormat, measureTitle, displayTreatNullAsZeroOption = false, treatNullAsZeroValue = false, enableOperatorSelection, onApply: onApplyProp, onChange: onChangeProp, withoutApply, BodyComponent, DropdownActionsComponent, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled = true, showSimplifiedSummary = false, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, conditions = [], enableMultipleConditions = false, enableRankingWithMvf, applyOnResult, loadMetricDetails, isHeaderEnabled, alignPoints, fullscreenOnMobile, mobileHeader, dialogId, isViewMode, } = props;
     const isMobile = useMediaQuery("mobileDevice");
     const useFullScreen = !!fullscreenOnMobile && isMobile;
     const onApply = useCallback((conditions, newDimensionality, applyOnResult) => {
         onApplyProp(conditions, newDimensionality, applyOnResult);
     }, [onApplyProp]);
     const selectedOperator = operator === null ? "ALL" : operator;
-    const body = (_jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, enableReturnFocusOnUnmount: true, children: _jsx(DropdownBody, { operator: selectedOperator, conditions: conditions, enableMultipleConditions: enableMultipleConditions, usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, onChange: onChangeProp, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: onCancel, onApply: onApply, separators: separators, format: format, useShortFormat: useShortFormat, measureTitle: measureTitle, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroValue: treatNullAsZeroValue, enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableRankingWithMvf: enableRankingWithMvf, applyOnResult: applyOnResult, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, isMobile: useFullScreen }) }));
+    const body = (_jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, enableReturnFocusOnUnmount: true, children: _jsx(DropdownBody, { operator: selectedOperator, conditions: conditions, enableMultipleConditions: enableMultipleConditions, usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, onChange: onChangeProp, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: onCancel, onApply: onApply, separators: separators, format: format, useShortFormat: useShortFormat, measureTitle: measureTitle, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroValue: treatNullAsZeroValue, enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, showSimplifiedSummary: showSimplifiedSummary, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableRankingWithMvf: enableRankingWithMvf, applyOnResult: applyOnResult, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, isMobile: useFullScreen, isViewMode: isViewMode, dialogId: dialogId }) }));
     if (useFullScreen) {
         return (_jsx(FullScreenOverlay, { alignTo: "body", alignPoints: MOBILE_DROPDOWN_ALIGN_POINTS, onClose: onCancel, children: _jsxs("div", { className: "gd-mobile-dropdown-overlay overlay gd-flex-row-container gd-mvf-mobile-dropdown", children: [mobileHeader ? (_jsx("div", { className: "gd-mobile-dropdown-header gd-flex-item gd-mvf-mobile-dropdown-header gd-is-mobile", children: mobileHeader })) : null, _jsx("div", { className: "gd-mobile-dropdown-content gd-flex-item-stretch gd-flex-row-container gd-mvf-mobile-dropdown-content", children: body })
                 ] }) }));

package/esm/MeasureValueFilter/DropdownBody.d.ts

@@ -27,6 +27,7 @@ interface IDropdownBodyProps extends IMeasureValueFilterCustomComponentProps {
     insightDimensionality?: IDimensionalityItem[];
     isDimensionalityEnabled?: boolean;
     isFilterSummaryEnabled?: boolean;
+    showSimplifiedSummary?: boolean;
     catalogDimensionality?: IDimensionalityItem[];
     loadCatalogDimensionality?: (dimensionality: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
     onDimensionalityChange?: (dimensionality: ObjRefInScope[]) => void;
@@ -34,6 +35,9 @@ interface IDropdownBodyProps extends IMeasureValueFilterCustomComponentProps {
     loadMetricDetails?: () => Promise<IMeasureMetadataObject | undefined>;
     isHeaderEnabled?: boolean;
     isMobile?: boolean;
+    isViewMode?: boolean;
+    /** Stable id of the dialog, referenced by the trigger button's aria-controls. */
+    dialogId?: string;
 }
 export declare const DropdownBodyWithIntl: import("react").NamedExoticComponent<IDropdownBodyProps>;
 export declare const DropdownBody: import("react").NamedExoticComponent<IDropdownBodyProps>;

package/esm/MeasureValueFilter/DropdownBody.js

@@ -73,7 +73,7 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
     const conditionsJoinerOr = intl.formatMessage({
         id: "mvf.conditionsJoiner.or",
     });
-    const { operator: propsOperator, conditions: propsConditions, enableMultipleConditions = false, enableRankingWithMvf = false, applyOnResult: initialApplyOnResult, usePercentage, treatNullAsZeroValue, valuePrecision = DefaultValuePrecision, isDimensionalityEnabled = true, isFilterSummaryEnabled = true, insightDimensionality, separators, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, } = props;
+    const { operator: propsOperator, conditions: propsConditions, enableMultipleConditions = false, enableRankingWithMvf = false, applyOnResult: initialApplyOnResult, usePercentage, treatNullAsZeroValue, valuePrecision = DefaultValuePrecision, isDimensionalityEnabled = true, isFilterSummaryEnabled = true, showSimplifiedSummary = false, insightDimensionality, separators, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, } = props;
     // This flag determines if the message, which explains different filter behavior, is shown for the filters
     // created before the dimensionality feature was introduced. The new filters or re-saved filters are
     // considered as "migrated" and the message is not shown.
@@ -552,24 +552,28 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
         isCommitPending.current = true;
         setApplyOnResult(event.target.checked);
     }, [setApplyOnResult]);
-    return (_jsxs("div", { className: cx(MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS, "gd-dialog gd-dropdown overlay s-mvf-dropdown-body", { "gd-is-mobile": props.isMobile }), "data-testid": "mvf-dropdown-body", children: [props.isHeaderEnabled && props.measureTitle && !props.isMobile ? (_jsx(MeasureValueFilterDropdownHeader, { title: props.measureTitle, loadMetricDetails: props.loadMetricDetails })) : null, _jsx("div", { className: "gd-mvf-dropdown-content", children: BodyComponent ? (_jsx(BodyComponent, { onApplyButtonClick: onApply, onCancelButtonClick: onCancel ?? (() => undefined) })) : (_jsxs(_Fragment, { children: [warningMessage ? (_jsx("div", { className: "gd-mvf-dropdown-section", children: _jsx(WarningMessageComponent, { warningMessage: warningMessage }) })) : null, _jsxs("div", { className: "gd-mvf-conditions-scroll-container", children: [(enableMultipleConditions ? state.conditions : state.conditions.slice(0, 1)).map((c, idx) => (_jsxs("div", { className: cx("gd-mvf-dropdown-section", "gd-mvf-condition-section", {
+    return (_jsxs("div", { id: props.dialogId, role: "dialog", "aria-modal": true, "aria-label": props.measureTitle, className: cx(MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS, "gd-dialog gd-dropdown overlay s-mvf-dropdown-body", { "gd-is-mobile": props.isMobile }), "data-testid": "mvf-dropdown-body", children: [props.isHeaderEnabled && props.measureTitle && !props.isMobile ? (_jsx(MeasureValueFilterDropdownHeader, { title: props.measureTitle, loadMetricDetails: props.loadMetricDetails })) : null, _jsx("div", { className: "gd-mvf-dropdown-content", children: BodyComponent ? (_jsx(BodyComponent, { onApplyButtonClick: onApply, onCancelButtonClick: onCancel ?? (() => undefined) })) : (_jsxs(_Fragment, { children: [warningMessage ? (_jsx("div", { className: "gd-mvf-dropdown-section", children: _jsx(WarningMessageComponent, { warningMessage: warningMessage }) })) : null, _jsxs("div", { className: "gd-mvf-conditions-scroll-container", children: [(enableMultipleConditions ? state.conditions : state.conditions.slice(0, 1)).map((c, idx) => (_jsxs("div", { className: cx("gd-mvf-dropdown-section", "gd-mvf-condition-section", {
                                         "gd-mvf-condition-section--multi": enableMultipleConditions,
                                     }), children: [
                                         _jsxs("div", { className: "gd-mvf-condition-header", "data-testid": `mvf-condition-${idx}`, children: [
-                                                _jsx("div", { className: "gd-mvf-condition-operator", children: _jsx(OperatorDropdown, { onSelect: (op) => handleOperatorSelection(idx, op), operator: c.operator, isDisabled: !enableOperatorSelection, isAllOperatorDisabled: isAllOperatorDisabled, isMobile: props.isMobile }) }), enableMultipleConditions ? (_jsx("div", { className: "gd-mvf-condition-action", children: idx === 0 ? (_jsx(ConditionActionButton, { icon: "plus", isMobile: props.isMobile, isDisabled: isAddConditionDisabled, onClick: handleAddCondition, dataTestId: "mvf-add-condition", label: addConditionTooltip, tooltip: isAddConditionDisabled
+                                                _jsx("div", { className: "gd-mvf-condition-operator", children: _jsx(OperatorDropdown, { onSelect: (op) => handleOperatorSelection(idx, op), operator: c.operator, isDisabled: !enableOperatorSelection, isAllOperatorDisabled: isAllOperatorDisabled, isMobile: props.isMobile, isViewMode: props.isViewMode }) }), enableMultipleConditions ? (_jsx("div", { className: "gd-mvf-condition-action", children: idx === 0 ? (_jsx(ConditionActionButton, { icon: "plus", isMobile: props.isMobile, isDisabled: isAddConditionDisabled, onClick: handleAddCondition, dataTestId: "mvf-add-condition", label: addConditionTooltip, tooltip: isAddConditionDisabled
                                                             ? addConditionDisabledTooltip
                                                             : addConditionTooltip })) : (_jsx(ConditionActionButton, { icon: "cross", isMobile: props.isMobile, isDestructive: true, onClick: () => handleRemoveCondition(idx), dataTestId: `mvf-remove-condition-${idx}`, label: removeConditionTooltip, tooltip: removeConditionTooltip })) })) : null] }), c.operator === "ALL" ? null : (_jsxs("div", { className: "gd-mvf-condition-inputs", children: [
-                                                _jsx(ConditionInputSection, { index: idx, condition: c, usePercentage: props.usePercentage ?? false, baseDisableAutofocus: props.disableAutofocus, separators: props.separators, onValueChange: handleValueChange, onFromChange: handleFromChange, onToChange: handleToChange, onValueBlur: handleValueBlur, onFromBlur: handleFromBlur, onToBlur: handleToBlur, onApply: onApply }), idx ===
+                                                _jsx(ConditionInputSection, { index: idx, conditionNumber: (enableMultipleConditions
+                                                        ? state.conditions.length
+                                                        : 1) > 1
+                                                        ? idx + 1
+                                                        : undefined, condition: c, usePercentage: props.usePercentage ?? false, baseDisableAutofocus: props.disableAutofocus, separators: props.separators, onValueChange: handleValueChange, onFromChange: handleFromChange, onToChange: handleToChange, onValueBlur: handleValueBlur, onFromBlur: handleFromBlur, onToBlur: handleToBlur, onApply: onApply }), idx ===
                                                     (enableMultipleConditions
                                                         ? state.conditions.length - 1
-                                                        : 0) && shouldShowTreatNullAsZeroCheckbox ? (_jsx(TreatNullValuesAsZeroCheckbox, { onChange: handleTreatNullAsZeroClicked, checked: enabledTreatNullValuesAsZero, isMobile: props.isMobile, intl: intl })) : null, idx ===
+                                                        : 0) && shouldShowTreatNullAsZeroCheckbox ? (_jsx(TreatNullValuesAsZeroCheckbox, { onChange: handleTreatNullAsZeroClicked, checked: enabledTreatNullValuesAsZero, isMobile: props.isMobile, isViewMode: props.isViewMode, intl: intl })) : null, idx ===
                                                     (enableMultipleConditions
                                                         ? state.conditions.length - 1
                                                         : 0) && enableRankingWithMvf ? (_jsxs("label", { className: "input-checkbox-label gd-mvf-apply-on-result-checkbox", "data-testid": "mvf-apply-on-result", children: [
                                                         _jsx("input", { type: "checkbox", name: "apply-on-result", className: "input-checkbox", checked: applyOnResult, onChange: handleApplyOnResultChange }), _jsx("span", { className: "input-label-text", children: intl.formatMessage({
                                                                 id: "mvf.applyOnResultLabel",
                                                             }) })
-                                                    ] })) : null] })), enableMultipleConditions && idx < state.conditions.length - 1 ? (_jsx("div", { className: "gd-mvf-conditions-joiner", children: conditionsJoinerOr })) : null] }, idx))), isDimensionalityEnabled ? (_jsx(DimensionalitySection, { dimensionality: dimensionality, insightDimensionality: insightDimensionality, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, onDimensionalityChange: handleDimensionalityChange, isMigratedFilter: isMigratedFilter })) : null] }), isFilterSummaryEnabled ? (_jsx(PreviewSection, { measureTitle: props.measureTitle, usePercentage: props.usePercentage, separators: separators, format: props.format, useShortFormat: props.useShortFormat, dimensionality: dimensionality, showAllPreview: enableMultipleConditions, conditions: state.conditions.map(({ operator, value }) => ({
+                                                    ] })) : null] })), enableMultipleConditions && idx < state.conditions.length - 1 ? (_jsx("div", { className: "gd-mvf-conditions-joiner", children: conditionsJoinerOr })) : null] }, idx))), isDimensionalityEnabled ? (_jsx(DimensionalitySection, { dimensionality: dimensionality, insightDimensionality: insightDimensionality, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, onDimensionalityChange: handleDimensionalityChange, isMigratedFilter: isMigratedFilter })) : null] }), isFilterSummaryEnabled ? (_jsx(PreviewSection, { measureTitle: props.measureTitle, showSimplifiedSummary: showSimplifiedSummary, usePercentage: props.usePercentage, separators: separators, format: props.format, useShortFormat: props.useShortFormat, dimensionality: dimensionality, showAllPreview: enableMultipleConditions, conditions: state.conditions.map(({ operator, value }) => ({
                                 operator,
                                 value,
                             })) })) : null] })) }), (() => {

package/esm/MeasureValueFilter/MeasureValueFilter.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
 import { Fragment, memo, useCallback, useEffect, useRef, useState } from "react";
-import { useMediaQuery } from "@gooddata/sdk-ui-kit";
+import { useIdPrefixed, useMediaQuery } from "@gooddata/sdk-ui-kit";
 import { DropdownButton } from "./MeasureValueFilterButton.js";
 import { MeasureValueFilterDropdown } from "./MeasureValueFilterDropdown.js";
 /**
  * @beta
  */
-export const MeasureValueFilter = memo(function MeasureValueFilter({ onCancel = () => { }, filter, measureIdentifier, buttonTitle, buttonSubtitle, buttonTitleExtension, buttonDisabled, measureTitle, usePercentage, warningMessage, locale, separators, format, useShortFormat, displayTreatNullAsZeroOption, treatNullAsZeroDefaultValue, enableOperatorSelection, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, withoutApply, BodyComponent, DropdownActionsComponent, enableMultipleConditions = false, enableRankingWithMvf, onApply, DropdownButtonComponent = DropdownButton, autoOpen, loadMetricDetails, isHeaderEnabled, onChange, alignPoints, fullscreenOnMobile, }) {
+export const MeasureValueFilter = memo(function MeasureValueFilter({ onCancel = () => { }, filter, measureIdentifier, buttonTitle, buttonSubtitle, buttonTitleExtension, buttonDisabled, measureTitle, usePercentage, warningMessage, locale, separators, format, useShortFormat, displayTreatNullAsZeroOption, treatNullAsZeroDefaultValue, enableOperatorSelection, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled, showSimplifiedSummary, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, withoutApply, BodyComponent, DropdownActionsComponent, enableMultipleConditions = false, enableRankingWithMvf, onApply, DropdownButtonComponent = DropdownButton, autoOpen, loadMetricDetails, isHeaderEnabled, onChange, alignPoints, fullscreenOnMobile, isViewMode, }) {
     const [displayDropdown, setDisplayDropdown] = useState(false);
+    const dialogId = useIdPrefixed("mvf-dialog");
     const buttonRef = useRef(null);
     const autoOpenedRef = useRef(false);
     const isMobile = useMediaQuery("mobileDevice");
@@ -33,16 +34,17 @@ export const MeasureValueFilter = memo(function MeasureValueFilter({ onCancel =
     const toggleDropdown = useCallback(() => {
         setDisplayDropdown((state) => !state);
     }, []);
-    const renderDropdownButton = useCallback((onClickHandler) => (_jsx(DropdownButtonComponent, { onClick: onClickHandler, isActive: displayDropdown, buttonTitle: buttonTitle, buttonSubtitle: buttonSubtitle, buttonTitleExtension: buttonTitleExtension, disabled: buttonDisabled })), [
+    const renderDropdownButton = useCallback((onClickHandler) => (_jsx(DropdownButtonComponent, { onClick: onClickHandler, isActive: displayDropdown, buttonTitle: buttonTitle, buttonSubtitle: buttonSubtitle, buttonTitleExtension: buttonTitleExtension, disabled: buttonDisabled, dropdownId: dialogId })), [
         DropdownButtonComponent,
         buttonDisabled,
         buttonSubtitle,
         buttonTitle,
         buttonTitleExtension,
+        dialogId,
         displayDropdown,
     ]);
     return (_jsxs(Fragment, { children: [
-            _jsx("div", { ref: buttonRef, children: renderDropdownButton(toggleDropdown) }), displayDropdown ? (_jsx(MeasureValueFilterDropdown, { onApply: handleApply, onChange: onChange, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: handleCancel, filter: filter, measureIdentifier: measureIdentifier, measureTitle: measureTitle, usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, separators: separators, format: format, useShortFormat: useShortFormat, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroDefaultValue: treatNullAsZeroDefaultValue, enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableMultipleConditions: enableMultipleConditions, enableRankingWithMvf: enableRankingWithMvf, anchorEl: buttonRef.current ?? undefined, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, alignPoints: alignPoints, fullscreenOnMobile: fullscreenOnMobile, 
+            _jsx("div", { ref: buttonRef, children: renderDropdownButton(toggleDropdown) }), displayDropdown ? (_jsx(MeasureValueFilterDropdown, { onApply: handleApply, onChange: onChange, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: handleCancel, filter: filter, measureIdentifier: measureIdentifier, measureTitle: measureTitle, usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, separators: separators, format: format, useShortFormat: useShortFormat, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroDefaultValue: treatNullAsZeroDefaultValue, enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, showSimplifiedSummary: showSimplifiedSummary, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableMultipleConditions: enableMultipleConditions, enableRankingWithMvf: enableRankingWithMvf, anchorEl: buttonRef.current ?? undefined, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, alignPoints: alignPoints, fullscreenOnMobile: fullscreenOnMobile, isViewMode: isViewMode, dialogId: dialogId, 
                 // Mobile header is the same visual button but dismisses via handleCancel
                 // so host onCancel cleanup (e.g. closing the configuration panel,
                 // clearing autoOpen) runs — toggleDropdown would skip that path.

package/esm/MeasureValueFilter/MeasureValueFilterButton.d.ts

@@ -11,5 +11,11 @@ export interface IMeasureValueFilterDropdownButtonProps {
     buttonTitleExtension?: ReactNode;
     disabled?: boolean;
     onClick: () => void;
+    /**
+     * Id of the dropdown dialog this button opens. Wired to `aria-controls` while open.
+     *
+     * @beta
+     */
+    dropdownId?: string;
 }
-export declare function DropdownButton({ isActive, buttonTitle, onClick }: IMeasureValueFilterDropdownButtonProps): ReactElement;
+export declare function DropdownButton({ isActive, buttonTitle, onClick, disabled, dropdownId }: IMeasureValueFilterDropdownButtonProps): ReactElement;

package/esm/MeasureValueFilter/MeasureValueFilterButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cx from "classnames";
-export function DropdownButton({ isActive, buttonTitle, onClick, }) {
+export function DropdownButton({ isActive, buttonTitle, onClick, disabled, dropdownId, }) {
     const className = cx("gd-mvf-dropdown-button", "s-mvf-dropdown-button", "gd-button", "gd-button-secondary", "button-dropdown", "gd-icon-right", { "gd-icon-navigateup": isActive, "gd-icon-navigatedown": !isActive });
-    return (_jsx("button", { className: className, onClick: onClick, children: buttonTitle }));
+    return (_jsx("button", { className: className, onClick: onClick, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": isActive, "aria-controls": isActive ? dropdownId : undefined, children: buttonTitle }));
 }

package/esm/MeasureValueFilter/MeasureValueFilterDropdown.d.ts

@@ -16,6 +16,13 @@ export interface IMeasureValueFilterDropdownProps extends IMeasureValueFilterCom
      * @internal
      */
     mobileHeader?: ReactNode;
+    /**
+     * Stable id assigned to the dropdown dialog so the trigger button can reference it via
+     * `aria-controls`.
+     *
+     * @internal
+     */
+    dialogId?: string;
 }
 /**
  * @beta

package/esm/MeasureValueFilter/MeasureValueFilterDropdown.js

@@ -21,7 +21,7 @@ const getTreatNullAsZeroValue = (filter, treatNullAsZeroDefaultValue, enableMult
 /**
  * @beta
  */
-export const MeasureValueFilterDropdown = memo(function MeasureValueFilterDropdown({ filter, onCancel, onApply, onChange, withoutApply, BodyComponent, DropdownActionsComponent, measureIdentifier, measureTitle, usePercentage, warningMessage, locale, anchorEl, separators, format, useShortFormat, displayTreatNullAsZeroOption = false, treatNullAsZeroDefaultValue = false, enableOperatorSelection = true, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, enableMultipleConditions = false, enableRankingWithMvf, loadMetricDetails, isHeaderEnabled, alignPoints, fullscreenOnMobile, mobileHeader, }) {
+export const MeasureValueFilterDropdown = memo(function MeasureValueFilterDropdown({ filter, onCancel, onApply, onChange, withoutApply, BodyComponent, DropdownActionsComponent, measureIdentifier, measureTitle, usePercentage, warningMessage, locale, anchorEl, separators, format, useShortFormat, displayTreatNullAsZeroOption = false, treatNullAsZeroDefaultValue = false, enableOperatorSelection = true, dimensionality, insightDimensionality, isDimensionalityEnabled, isFilterSummaryEnabled, showSimplifiedSummary, catalogDimensionality, loadCatalogDimensionality, onDimensionalityChange, isLoadingCatalogDimensionality, enableMultipleConditions = false, enableRankingWithMvf, loadMetricDetails, isHeaderEnabled, alignPoints, fullscreenOnMobile, mobileHeader, dialogId, isViewMode, }) {
     const applyOnResult = filter?.measureValueFilter.applyOnResult;
     const buildFilter = useCallback((conditions, newDimensionality, applyOnResult) => {
         const effectiveConditions = enableMultipleConditions ? conditions : conditions?.slice(0, 1);
@@ -79,5 +79,5 @@ export const MeasureValueFilterDropdown = memo(function MeasureValueFilterDropdo
     const handleChange = useCallback((conditions, newDimensionality, applyOnResult) => {
         onChange?.(buildFilter(conditions, newDimensionality, applyOnResult));
     }, [onChange, buildFilter]);
-    return (_jsx(Dropdown, { onApply: handleApply, onChange: onChange ? handleChange : undefined, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: onCancel, operator: (filter && measureValueFilterOperator(filter)) || null, conditions: getConditionsFromFilter(filter, enableMultipleConditions), usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, anchorEl: anchorEl, separators: separators, format: format, useShortFormat: useShortFormat, measureTitle: measureTitle, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroValue: getTreatNullAsZeroValue(filter, treatNullAsZeroDefaultValue, enableMultipleConditions), enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableMultipleConditions: enableMultipleConditions, enableRankingWithMvf: enableRankingWithMvf, applyOnResult: applyOnResult, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, alignPoints: alignPoints, fullscreenOnMobile: fullscreenOnMobile, mobileHeader: mobileHeader }));
+    return (_jsx(Dropdown, { onApply: handleApply, onChange: onChange ? handleChange : undefined, withoutApply: withoutApply, BodyComponent: BodyComponent, DropdownActionsComponent: DropdownActionsComponent, onCancel: onCancel, operator: (filter && measureValueFilterOperator(filter)) || null, conditions: getConditionsFromFilter(filter, enableMultipleConditions), usePercentage: usePercentage, warningMessage: warningMessage, locale: locale, anchorEl: anchorEl, separators: separators, format: format, useShortFormat: useShortFormat, measureTitle: measureTitle, displayTreatNullAsZeroOption: displayTreatNullAsZeroOption, treatNullAsZeroValue: getTreatNullAsZeroValue(filter, treatNullAsZeroDefaultValue, enableMultipleConditions), enableOperatorSelection: enableOperatorSelection, dimensionality: dimensionality, insightDimensionality: insightDimensionality, isDimensionalityEnabled: isDimensionalityEnabled, isFilterSummaryEnabled: isFilterSummaryEnabled, showSimplifiedSummary: showSimplifiedSummary, catalogDimensionality: catalogDimensionality, loadCatalogDimensionality: loadCatalogDimensionality, onDimensionalityChange: onDimensionalityChange, isLoadingCatalogDimensionality: isLoadingCatalogDimensionality, enableMultipleConditions: enableMultipleConditions, enableRankingWithMvf: enableRankingWithMvf, applyOnResult: applyOnResult, loadMetricDetails: loadMetricDetails, isHeaderEnabled: isHeaderEnabled, alignPoints: alignPoints, fullscreenOnMobile: fullscreenOnMobile, mobileHeader: mobileHeader, dialogId: dialogId, isViewMode: isViewMode }));
 });

package/esm/MeasureValueFilter/OperatorDropdown.d.ts

@@ -5,6 +5,7 @@ interface IOperatorDropdownProps {
     isDisabled?: boolean;
     isAllOperatorDisabled?: boolean;
     isMobile?: boolean;
+    isViewMode?: boolean;
 }
 export declare const OperatorDropdown: import("react").NamedExoticComponent<IOperatorDropdownProps>;
 export {};

package/esm/MeasureValueFilter/OperatorDropdown.js

@@ -4,25 +4,35 @@ import { memo, useState } from "react";
 import cx from "classnames";
 import { capitalize } from "lodash-es";
 import { useIntl } from "react-intl";
-import { Button } from "@gooddata/sdk-ui-kit";
+import { DropdownButton, useId } from "@gooddata/sdk-ui-kit";
 import { simplifyText } from "@gooddata/util";
 import { getOperatorIcon, getOperatorTranslationKey } from "./helpers/measureValueFilterOperator.js";
 import { OperatorDropdownBody } from "./OperatorDropdownBody.js";
 export const OperatorDropdown = memo(function OperatorDropdown(props) {
     const intl = useIntl();
     const [opened, setOpened] = useState(false);
+    const id = useId();
+    const buttonId = `mvf-operator-button-${id}`;
+    const listboxId = `mvf-operator-listbox-${id}`;
+    const labelId = `mvf-operator-label-${id}`;
     const renderDropdownButton = () => {
         const { operator, isDisabled } = props;
         const operatorTranslationKey = getOperatorTranslationKey(operator);
         const title = capitalize(operatorTranslationKey === undefined
             ? operator
             : intl.formatMessage({ id: operatorTranslationKey }));
-        const buttonClasses = cx("gd-mvf-operator-dropdown-button", "s-mvf-operator-dropdown-button", `s-mvf-operator-dropdown-button-${simplifyText(operator)}`, "gd-button-primary", "gd-button-small", {
-            "button-dropdown": true,
-            "is-dropdown-open": opened,
-            "is-active": opened,
-        });
-        return (_jsx(Button, { title: title, className: buttonClasses, value: title, onClick: handleOperatorDropdownButtonClick, iconLeft: `gd-icon-${getOperatorIcon(operator)}`, iconRight: opened ? "gd-icon-navigateup" : "gd-icon-navigatedown", disabled: isDisabled }));
+        const buttonClasses = cx("gd-mvf-operator-dropdown-button", "s-mvf-operator-dropdown-button", `s-mvf-operator-dropdown-button-${simplifyText(operator)}`);
+        return (_jsx(DropdownButton, { id: buttonId, title: title, value: title, className: buttonClasses, onClick: handleOperatorDropdownButtonClick, iconLeft: `gd-icon-${getOperatorIcon(operator)}`, disabled: isDisabled, isOpen: opened, dropdownId: listboxId, accessibilityConfig: {
+                // A plain button that toggles a listbox popup. Using role="button" (rather
+                // than the DropdownButton default of "combobox") avoids the WCAG 4.1.2
+                // requirement that a combobox always expose aria-controls — our listbox only
+                // exists in the DOM while open.
+                role: "button",
+                popupType: "listbox",
+                // Compose the accessible name from the visible "Condition" label and the
+                // current operator value rendered inside the button.
+                ariaLabelledBy: `${labelId} ${buttonId}`,
+            } }));
     };
     const handleOperatorSelected = (operator) => {
         closeOperatorDropdown();
@@ -32,5 +42,5 @@ export const OperatorDropdown = memo(function OperatorDropdown(props) {
     const handleOperatorDropdownButtonClick = () => setOpened((state) => !state);
     return (_jsxs(_Fragment, { children: [
             _jsxs("div", { className: "gd-mvf-operator-dropdown", "data-testid": "mvf-operator-section", children: [
-                    _jsx("div", { className: "gd-mvf-operator-dropdown-label", children: intl.formatMessage({ id: "mvf.condition" }) }), renderDropdownButton()] }), opened ? (_jsx(OperatorDropdownBody, { alignTo: ".gd-mvf-operator-dropdown-button", onSelect: handleOperatorSelected, selectedOperator: props.operator, onClose: closeOperatorDropdown, isAllOperatorDisabled: props.isAllOperatorDisabled, isMobile: props.isMobile })) : null] }));
+                    _jsx("div", { className: "gd-mvf-operator-dropdown-label", id: labelId, children: intl.formatMessage({ id: "mvf.condition" }) }), renderDropdownButton()] }), opened ? (_jsx(OperatorDropdownBody, { alignTo: `#${buttonId}`, onSelect: handleOperatorSelected, selectedOperator: props.operator, onClose: closeOperatorDropdown, listboxId: listboxId, labelId: labelId, isAllOperatorDisabled: props.isAllOperatorDisabled, isMobile: props.isMobile, isViewMode: props.isViewMode })) : null] }));
 });

package/esm/MeasureValueFilter/OperatorDropdownBody.d.ts

@@ -4,8 +4,13 @@ interface IOperatorDropdownBodyProps {
     onSelect: (operator: MeasureValueFilterOperator) => void;
     onClose: () => void;
     alignTo: string;
+    /** id of the listbox, referenced by the trigger button's aria-controls. */
+    listboxId: string;
+    /** id of the visible "Condition" label, used as the listbox accessible name. */
+    labelId?: string;
     isAllOperatorDisabled?: boolean;
     isMobile?: boolean;
+    isViewMode?: boolean;
 }
 export declare const OperatorDropdownBody: import("react").NamedExoticComponent<IOperatorDropdownBodyProps>;
 export {};

package/esm/MeasureValueFilter/OperatorDropdownBody.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
-import { Fragment, memo } from "react";
+import { memo, useMemo } from "react";
 import cx from "classnames";
 import { capitalize } from "lodash-es";
 import { defineMessages, useIntl } from "react-intl";
-import { FullScreenOverlay, Overlay, Separator } from "@gooddata/sdk-ui-kit";
+import { Bubble, BubbleHoverTrigger, FullScreenOverlay, Overlay, SingleSelectListItem, UiFocusManager, UiListbox, } from "@gooddata/sdk-ui-kit";
+import { simplifyText } from "@gooddata/util";
 import { MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS } from "./constants.js";
-import { getOperatorTranslationKey } from "./helpers/measureValueFilterOperator.js";
-import { OperatorDropdownItem } from "./OperatorDropdownItem.js";
+import { getOperatorIcon, getOperatorTranslationKey } from "./helpers/measureValueFilterOperator.js";
 const MOBILE_DROPDOWN_ALIGN_POINTS = [{ align: "tl tl" }];
-// Operators grouped as they appear in the picker; a Separator is rendered between groups
+const DISABLED_BUBBLE_ALIGN_POINTS = [{ align: "cr cl" }, { align: "cl cr" }];
+const DESKTOP_LISTBOX_MAX_HEIGHT = 350;
+// Operators grouped as they appear in the picker; a separator is rendered between groups
 // (desktop only — mobile rows already carry a bottom divider).
 const OPERATOR_GROUPS = [
     ["ALL"],
@@ -30,7 +32,29 @@ const OPERATOR_BUBBLE_MESSAGES = {
     BETWEEN: bubbleMessages.BETWEEN,
     NOT_BETWEEN: bubbleMessages.NOT_BETWEEN,
 };
-export const OperatorDropdownBody = memo(function OperatorDropdownBody({ onSelect, onClose, selectedOperator, alignTo, isAllOperatorDisabled = false, isMobile = false, }) {
+/**
+ * Renders a single operator as an accessible listbox option (role="option" is supplied by
+ * the enclosing {@link UiListbox}). Preserves the legacy `s-mvf-operator-*` hooks, the operator
+ * icon, the explanatory bubble for range operators and the disabled-state tooltip. The icon and
+ * info bubble are handled by SingleSelectListItem's built-in renderers (which also apply
+ * `aria-hidden` to the decorative icon).
+ */
+function OperatorListItem({ item, isSelected, isFocused, onSelect, }) {
+    const { operator, iconClass, bubbleText, disabledTooltip } = item.data;
+    const isDisabled = !!item.isDisabled;
+    const listItem = (_jsx(SingleSelectListItem, { className: cx("gd-list-item-shortened", `s-mvf-operator-${simplifyText(operator)}`, {
+            "is-disabled": isDisabled,
+        }), title: item.stringTitle, icon: iconClass, info: bubbleText, isSelected: isSelected, isFocused: isFocused, onClick: isDisabled ? undefined : onSelect }));
+    if (isDisabled && disabledTooltip) {
+        return (_jsxs(BubbleHoverTrigger, { tagName: "div", showDelay: 400, hideDelay: 200, children: [listItem, _jsx(Bubble, { className: "bubble-primary", alignPoints: DISABLED_BUBBLE_ALIGN_POINTS, children: disabledTooltip })
+            ] }));
+    }
+    return listItem;
+}
+function OperatorSeparatorItem() {
+    return _jsx(SingleSelectListItem, { type: "separator", accessibilityConfig: { role: "separator" } });
+}
+export const OperatorDropdownBody = memo(function OperatorDropdownBody({ onSelect, onClose, selectedOperator, alignTo, listboxId, labelId, isAllOperatorDisabled = false, isMobile = false, isViewMode = false, }) {
     const intl = useIntl();
     const allOperatorDisabledTooltip = isAllOperatorDisabled
         ? intl.formatMessage({ id: "mvf.operator.all.disabled.tooltip" })
@@ -39,18 +63,59 @@ export const OperatorDropdownBody = memo(function OperatorDropdownBody({ onSelec
     const selectedOperatorTitle = capitalize(selectedOperatorTranslationKey === undefined
         ? selectedOperator
         : intl.formatMessage({ id: selectedOperatorTranslationKey }));
-    const items = (_jsx("div", { className: cx(MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS, "s-mvf-operator-dropdown-body", {
-            "gd-is-mobile": isMobile,
-        }), "data-testid": "mvf-operator-dropdown-body", children: OPERATOR_GROUPS.map((group, groupIdx) => (_jsxs(Fragment, { children: [groupIdx > 0 && !isMobile ? _jsx(Separator, {}) : null, group.map((operator) => {
-                    const bubbleMessage = OPERATOR_BUBBLE_MESSAGES[operator];
-                    return (_jsx(OperatorDropdownItem, { operator: operator, selectedOperator: selectedOperator, onClick: onSelect, bubbleText: bubbleMessage ? intl.formatMessage(bubbleMessage) : undefined, isDisabled: operator === "ALL" ? isAllOperatorDisabled : undefined, disabledTooltip: operator === "ALL" ? allOperatorDisabledTooltip : undefined, isMobile: isMobile }, operator));
-                })] }, groupIdx))) }));
+    const items = useMemo(() => {
+        const result = [];
+        OPERATOR_GROUPS.forEach((group, groupIdx) => {
+            if (groupIdx > 0 && !isMobile) {
+                result.push({
+                    type: "static",
+                    id: `mvf-operator-separator-${groupIdx}`,
+                    data: null,
+                });
+            }
+            group.forEach((operator) => {
+                const translationKey = getOperatorTranslationKey(operator);
+                const title = translationKey === undefined ? operator : intl.formatMessage({ id: translationKey });
+                const bubbleMessage = OPERATOR_BUBBLE_MESSAGES[operator];
+                const isDisabled = operator === "ALL" ? isAllOperatorDisabled : false;
+                result.push({
+                    type: "interactive",
+                    id: operator,
+                    stringTitle: capitalize(title),
+                    isDisabled,
+                    data: {
+                        operator,
+                        iconClass: isMobile ? undefined : `gd-icon-${getOperatorIcon(operator)}`,
+                        bubbleText: bubbleMessage && !isMobile && !isViewMode
+                            ? intl.formatMessage(bubbleMessage)
+                            : undefined,
+                        disabledTooltip: isDisabled ? allOperatorDisabledTooltip : undefined,
+                    },
+                });
+            });
+        });
+        return result;
+    }, [allOperatorDisabledTooltip, intl, isAllOperatorDisabled, isMobile, isViewMode]);
+    const ariaAttributes = {
+        id: listboxId,
+        "aria-labelledby": labelId,
+    };
+    const body = (
+    // Focus moves into the listbox on open and returns to the trigger on close, while Tab
+    // stays inside the popup — matching the listbox APG pattern used by the text filter.
+    _jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, enableReturnFocusOnUnmount: true, children: _jsx("div", { className: cx(MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS, "s-mvf-operator-dropdown-body", { "gd-is-mobile": isMobile }), children: _jsx(UiListbox, { shouldKeyboardActionPreventDefault: true, shouldKeyboardActionStopPropagation: true, isDisabledFocusable: true, maxHeight: isMobile ? undefined : DESKTOP_LISTBOX_MAX_HEIGHT, dataTestId: "mvf-operator-dropdown-body", 
+                // Put the per-operator testid on the role="option" <li> (which carries
+                // aria-disabled) rather than the inner item, so disabled-state assertions read
+                // the attribute off the element that actually exposes it.
+                itemDataTestId: (item) => item.type === "interactive"
+                    ? `mvf-operator-${simplifyText(item.data.operator)}`
+                    : undefined, items: items, selectedItemId: selectedOperator, onSelect: (item) => onSelect(item.data.operator), onClose: onClose, ariaAttributes: ariaAttributes, InteractiveItemComponent: OperatorListItem, StaticItemComponent: OperatorSeparatorItem }) }) }));
     if (isMobile) {
         return (_jsx(FullScreenOverlay, { alignTo: "body", alignPoints: MOBILE_DROPDOWN_ALIGN_POINTS, onClose: onClose, children: _jsxs("div", { className: "gd-mobile-dropdown-overlay overlay gd-flex-row-container gd-mvf-mobile-dropdown", children: [
                     _jsx("div", { className: "gd-mobile-dropdown-header gd-flex-item gd-mvf-mobile-dropdown-header", children: _jsxs("button", { type: "button", className: "gd-mvf-operator-mobile-header s-mvf-operator-mobile-header", onClick: onClose, children: [
                                 _jsx("span", { className: "gd-mvf-operator-mobile-header__label", children: intl.formatMessage({ id: "mvf.condition" }) }), _jsx("span", { className: "gd-mvf-operator-mobile-header__value", children: selectedOperatorTitle }), _jsx("span", { className: "gd-mvf-operator-mobile-header__chevron gd-icon-navigateup" })
-                            ] }) }), _jsx("div", { className: "gd-mobile-dropdown-content gd-flex-item-stretch gd-mvf-mobile-dropdown-content", children: items })
+                            ] }) }), _jsx("div", { className: "gd-mobile-dropdown-content gd-flex-item-stretch gd-mvf-mobile-dropdown-content", children: body })
                 ] }) }));
     }
-    return (_jsx(Overlay, { closeOnOutsideClick: true, alignTo: alignTo, alignPoints: [{ align: "bl tl" }], onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: items }) }));
+    return (_jsx(Overlay, { closeOnOutsideClick: true, alignTo: alignTo, alignPoints: [{ align: "bl tl" }], onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: body }) }));
 });

package/esm/MeasureValueFilter/PreviewSection.d.ts

@@ -3,6 +3,11 @@ import { type MeasureValueFilterOperator } from "./types.js";
 import { type IDimensionalityItem } from "./typings.js";
 interface IPreviewSectionProps {
     measureTitle?: string;
+    /**
+     * When true, renders a simplified summary: the "Preview:" header and the metric title are
+     * omitted, so only the conditions (and dimensionality, if any) are shown.
+     */
+    showSimplifiedSummary?: boolean;
     usePercentage?: boolean;
     separators?: ISeparators;
     format?: string;