@gooddata/sdk-ui-filters 11.37.0-alpha.1 → 11.37.0-alpha.3

package/esm/AttributeFilter/Components/Addons/AttributeFilterDependencyTooltip.js

@@ -4,7 +4,7 @@ import { Bubble, BubbleHoverTrigger, IconBoldHyperlink } from "@gooddata/sdk-ui-
  * @internal
  */
 export function AttributeFilterDependencyTooltip({ tooltipContent, ariaLabel, }) {
-    return (_jsx("span", { className: "gd-attribute-filter-dropdown-button-icon-tooltip", "aria-label": ariaLabel, children: _jsxs(BubbleHoverTrigger, { children: [
-                _jsx(IconBoldHyperlink, { width: 12, height: 16 }), _jsx(Bubble, { arrowOffsets: { "bc tl": [-12, 9], "bc tr": [12, 9] }, alignPoints: [{ align: "bc tl" }, { align: "bc tr" }], children: _jsx("div", { className: "gd-attribute-filter-dropdown-button-icon-tooltip__content", children: tooltipContent }) })
+    return (_jsx("span", { className: "gd-attribute-filter-dropdown-button-icon-tooltip", children: _jsxs(BubbleHoverTrigger, { children: [
+                _jsx(IconBoldHyperlink, { width: 12, height: 16, ariaLabel: ariaLabel }), _jsx(Bubble, { arrowOffsets: { "bc tl": [-12, 9], "bc tr": [12, 9] }, alignPoints: [{ align: "bc tl" }, { align: "bc tr" }], children: _jsx("div", { className: "gd-attribute-filter-dropdown-button-icon-tooltip__content", children: tooltipContent }) })
             ] }) }));
 }

package/esm/FilterGroup/FilterGroup.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import { type IRenderDropdownListItemProps } from "@gooddata/sdk-ui-kit";
 import type { IAttributeFilterProps } from "../AttributeFilter/AttributeFilter.js";
+import { type IMeasureValueFilterProps } from "../MeasureValueFilter/MeasureValueFilter.js";
 /**
  * @public
  */
@@ -8,9 +9,17 @@ export interface IFilterGroupProps<P> {
     title: string;
     filters: P[];
     getFilterIdentifier: (filter: P) => string;
-    hasSelectedElements: (filter: P) => boolean;
+    isFilterActive: (filter: P) => boolean;
+    /**
+     * @deprecated
+     * Use isFilterActive instead.
+     */
+    hasSelectedElements?: (filter: P) => boolean;
     getTitleExtension?: (filterIdentifier: string, filterTitle?: string) => ReactNode;
-    renderFilter: (filter: P, AttributeFilterComponent?: ComponentType<IAttributeFilterProps>) => ReactElement;
+    /**
+     * @beta
+     */
+    renderFilter: (filter: P, AttributeFilterComponent?: ComponentType<IAttributeFilterProps>, MeasureValueFilterComponent?: ComponentType<IMeasureValueFilterProps>) => ReactElement;
 }
 /**
  * @internal

package/esm/FilterGroup/FilterGroup.js

@@ -9,6 +9,8 @@ import { AttributeFilterButton } from "../AttributeFilter/AttributeFilterButton.
 import { AttributeFilterDropdownButton, } from "../AttributeFilter/Components/DropdownButton/AttributeFilterDropdownButton.js";
 import { AttributeFilterElementsSearchBar } from "../AttributeFilter/Components/ElementsSelect/AttributeFilterElementsSearchBar.js";
 import { ATTRIBUTE_DISPLAY_FORM_DROPDOWN_BODY_CLASS, ATTRIBUTE_FILTER_DROPDOWN_BODY_CLASS, ATTRIBUTE_FILTER_DROPDOWN_BUBBLE_CLASS, } from "../AttributeFilter/constants.js";
+import { MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS, MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS, MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS, } from "../MeasureValueFilter/constants.js";
+import { MeasureValueFilter, } from "../MeasureValueFilter/MeasureValueFilter.js";
 import { FilterButtonCustomIcon } from "../shared/components/internal/FilterButtonCustomIcon.js";
 import { useFilterGroupStatus } from "./useFilterGroupStatus.js";
 const GROUP_ALIGN_POINTS = [
@@ -28,9 +30,12 @@ const ITEM_ALIGN_POINTS = [
  * Closing the group dropdown must be prevented when interacting with the nested filter dropdown content.
  */
 const IGNORE_CLICKS_ON_BY_CLASS = [
-    ATTRIBUTE_FILTER_DROPDOWN_BODY_CLASS,
-    ATTRIBUTE_DISPLAY_FORM_DROPDOWN_BODY_CLASS,
-    ATTRIBUTE_FILTER_DROPDOWN_BUBBLE_CLASS,
+    `.${ATTRIBUTE_FILTER_DROPDOWN_BODY_CLASS}`,
+    `.${ATTRIBUTE_DISPLAY_FORM_DROPDOWN_BODY_CLASS}`,
+    `.${ATTRIBUTE_FILTER_DROPDOWN_BUBBLE_CLASS}`,
+    `.${MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS}`,
+    `.${MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS}`,
+    `.${MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS}`,
 ];
 function isEditableElement(target) {
     return (target instanceof HTMLElement &&
@@ -42,7 +47,8 @@ function isEditableElement(target) {
  * @public
  */
 export function FilterGroup(props) {
-    const { title, filters, getFilterIdentifier, hasSelectedElements, getTitleExtension, renderFilter } = props;
+    const { title, filters, getFilterIdentifier, isFilterActive: propsIsFilterActive, hasSelectedElements, getTitleExtension, renderFilter, } = props;
+    const isFilterActive = propsIsFilterActive ?? hasSelectedElements;
     const intl = useIntl();
     const [isOpen, setIsOpen] = useState(false);
     const filterItemRefs = useRef(new Map());
@@ -55,7 +61,7 @@ export function FilterGroup(props) {
         if (isAnyFilterError) {
             return intl.formatMessage({ id: "gs.list.notAvailableAbbreviation" });
         }
-        const activeFilters = filters.filter((filter) => hasSelectedElements(filter));
+        const activeFilters = filters.filter((filter) => isFilterActive(filter));
         const activeFiltersCount = activeFilters.length;
         if (activeFiltersCount === 0) {
             return intl.formatMessage({ id: "gs.list.allAndCount" }, { count: filters.length });
@@ -63,12 +69,12 @@ export function FilterGroup(props) {
         else {
             return `(${activeFiltersCount}/${availableFilterIdentifiers.length})`;
         }
-    }, [filters, isAnyFilterError, hasSelectedElements, intl, availableFilterIdentifiers]);
+    }, [filters, isAnyFilterError, isFilterActive, intl, availableFilterIdentifiers]);
     const { selectedItemsCount, totalItemsCount } = useMemo(() => {
         if (isAnyFilterError) {
             return {};
         }
-        const activeFilters = filters.filter((filter) => hasSelectedElements(filter));
+        const activeFilters = filters.filter((filter) => isFilterActive(filter));
         const activeFiltersCount = activeFilters.length;
         if (activeFiltersCount === 0) {
             return { totalItemsCount: filters.length };
@@ -76,7 +82,7 @@ export function FilterGroup(props) {
         else {
             return { selectedItemsCount: activeFiltersCount, totalItemsCount: filters.length };
         }
-    }, [filters, isAnyFilterError, hasSelectedElements]);
+    }, [filters, isAnyFilterError, isFilterActive]);
     const errorHandler = useCallback((filterIdentifier) => (error) => {
         setFilterError(filterIdentifier, error);
     }, [setFilterError]);
@@ -140,11 +146,37 @@ export function FilterGroup(props) {
         });
         return result;
     }, [availableFilterIdentifiers, getTitleExtension, errorHandler, initLoadingChangedHandler]);
+    const measureValueFilterComponentsByIdentifier = useMemo(() => {
+        const result = new Map();
+        availableFilterIdentifiers.forEach((filterIdentifier) => {
+            if (result.has(filterIdentifier)) {
+                return;
+            }
+            function MeasureValueFilterComponent(measureValueFilterProps) {
+                const setFilterItemRef = useCallback((element) => {
+                    filterItemRefs.current.set(filterIdentifier, element);
+                }, []);
+                const DropdownButtonComponent = useCallback(function DropdownButtonComponent({ buttonTitle, buttonSubtitle, buttonTitleExtension, disabled, isActive, onClick, }) {
+                    const titleExtension = getTitleExtension?.(filterIdentifier, buttonTitle);
+                    return (_jsx(FilterGroupItem, { title: buttonTitle, subtitle: buttonSubtitle ?? undefined, isOpen: isActive, isLoaded: true, disabled: disabled, titleExtension: _jsxs(_Fragment, { children: [buttonTitleExtension, titleExtension] }), onClick: onClick, buttonRef: setFilterItemRef }));
+                }, [setFilterItemRef]);
+                return (_jsx(MeasureValueFilter, { ...measureValueFilterProps, alignPoints: ITEM_ALIGN_POINTS, DropdownButtonComponent: measureValueFilterProps.DropdownButtonComponent ?? DropdownButtonComponent }));
+            }
+            result.set(filterIdentifier, MeasureValueFilterComponent);
+        });
+        return result;
+    }, [availableFilterIdentifiers, getTitleExtension]);
     const renderItem = useCallback(({ item }) => {
         const identifier = getFilterIdentifier(item);
         const AttributeFilterComponent = attributeFilterComponentsByIdentifier.get(identifier);
-        return renderFilter(item, AttributeFilterComponent);
-    }, [attributeFilterComponentsByIdentifier, getFilterIdentifier, renderFilter]);
+        const MeasureValueFilterComponent = measureValueFilterComponentsByIdentifier.get(identifier);
+        return renderFilter(item, AttributeFilterComponent, MeasureValueFilterComponent);
+    }, [
+        attributeFilterComponentsByIdentifier,
+        measureValueFilterComponentsByIdentifier,
+        getFilterIdentifier,
+        renderFilter,
+    ]);
     const handleKeyDownCapture = useCallback((e) => {
         if (isSpaceKey(e) && isEditableElement(e.target)) {
             e.stopPropagation();

package/esm/MeasureValueFilter/Dropdown.d.ts

@@ -1,5 +1,6 @@
 import { type IMeasureMetadataObject, type MeasureValueFilterCondition, type ObjRefInScope } from "@gooddata/sdk-model";
 import { type ISeparators } from "@gooddata/sdk-ui";
+import { type IAlignPoint } from "@gooddata/sdk-ui-kit";
 import { type MeasureValueFilterOperator } from "./types.js";
 import { type IDimensionalityItem, type IMeasureValueFilterCustomComponentProps, type IMeasureValueFilterDropdownCallback, type WarningMessage } from "./typings.js";
 interface IDropdownProps extends IMeasureValueFilterCustomComponentProps {
@@ -33,6 +34,7 @@ interface IDropdownProps extends IMeasureValueFilterCustomComponentProps {
     isLoadingCatalogDimensionality?: boolean;
     loadMetricDetails?: () => Promise<IMeasureMetadataObject | undefined>;
     isHeaderEnabled?: boolean;
+    alignPoints?: IAlignPoint[];
 }
 export declare function Dropdown(props: IDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/MeasureValueFilter/Dropdown.js

@@ -12,12 +12,12 @@ const alignPoints = ["bl tl", "tl bl", "br tr", "tr br"];
  */
 const DROPDOWN_ALIGNMENTS = alignPoints.map((align) => ({ align, offset: { x: 1, y: 0 } }));
 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, } = 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, } = props;
     const onApply = useCallback((conditions, newDimensionality, applyOnResult) => {
         onApplyProp(conditions, newDimensionality, applyOnResult);
     }, [onApplyProp]);
     const selectedOperator = operator === null ? "ALL" : operator;
-    return (_jsx(Overlay, { alignTo: anchorEl, alignPoints: DROPDOWN_ALIGNMENTS, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, onClose: onCancel, children: _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 }) }) }));
+    return (_jsx(Overlay, { alignTo: anchorEl, alignPoints: alignPoints ?? DROPDOWN_ALIGNMENTS, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, onClose: onCancel, children: _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 }) }) }));
 });
 export function Dropdown(props) {
     return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(DropdownWithIntl, { ...props }) }));

package/esm/MeasureValueFilter/DropdownBody.js

@@ -7,6 +7,7 @@ import { isComparisonCondition, isComparisonConditionOperator, isRangeCondition,
 import { IntlWrapper } from "@gooddata/sdk-ui";
 import { Bubble, BubbleHoverTrigger, UiIconButton } from "@gooddata/sdk-ui-kit";
 import { ConditionInputSection } from "./ConditionInputSection.js";
+import { MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS } from "./constants.js";
 import { DimensionalitySection, areDimensionalitySetsEqual } from "./DimensionalitySection.js";
 import { intervalIncludesZero } from "./helpers/intervalIncludesZero.js";
 import { MeasureValueFilterDropdownActions } from "./MeasureValueFilterDropdownActions.js";
@@ -538,7 +539,7 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
         isCommitPending.current = true;
         setApplyOnResult(event.target.checked);
     }, [setApplyOnResult]);
-    return (_jsxs("div", { className: "gd-mvf-dropdown-body gd-dialog gd-dropdown overlay s-mvf-dropdown-body", "data-testid": "mvf-dropdown-body", children: [props.isHeaderEnabled && props.measureTitle ? (_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", { className: `${MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS} gd-dialog gd-dropdown overlay s-mvf-dropdown-body`, "data-testid": "mvf-dropdown-body", children: [props.isHeaderEnabled && props.measureTitle ? (_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: [

package/esm/MeasureValueFilter/MeasureValueFilter.d.ts

@@ -1,9 +1,13 @@
+import { type ReactNode } from "react";
 import { type IMeasureValueFilterCommonProps, type IMeasureValueFilterCustomComponentsProps } from "./typings.js";
 /**
  * @beta
  */
 export interface IMeasureValueFilterProps extends IMeasureValueFilterCommonProps, IMeasureValueFilterCustomComponentsProps {
     buttonTitle: string;
+    buttonSubtitle?: string;
+    buttonTitleExtension?: ReactNode;
+    buttonDisabled?: boolean;
     onCancel?: () => void;
     /**
      * When toggled from falsy to truthy, opens the dropdown once. A re-render with

package/esm/MeasureValueFilter/MeasureValueFilter.js

@@ -6,7 +6,7 @@ import { MeasureValueFilterDropdown } from "./MeasureValueFilterDropdown.js";
 /**
  * @beta
  */
-export const MeasureValueFilter = memo(function MeasureValueFilter({ onCancel = () => { }, filter, measureIdentifier, buttonTitle, 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, }) {
+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, }) {
     const [displayDropdown, setDisplayDropdown] = useState(false);
     const buttonRef = useRef(null);
     const autoOpenedRef = useRef(false);
@@ -31,5 +31,5 @@ export const MeasureValueFilter = memo(function MeasureValueFilter({ onCancel =
         setDisplayDropdown((state) => !state);
     }, []);
     return (_jsxs(Fragment, { children: [
-            _jsx("div", { ref: buttonRef, children: _jsx(DropdownButtonComponent, { onClick: toggleDropdown, isActive: displayDropdown, buttonTitle: buttonTitle }) }), 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 })) : null] }));
+            _jsx("div", { ref: buttonRef, children: _jsx(DropdownButtonComponent, { onClick: toggleDropdown, isActive: displayDropdown, buttonTitle: buttonTitle, buttonSubtitle: buttonSubtitle, buttonTitleExtension: buttonTitleExtension, disabled: buttonDisabled }) }), 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 })) : null] }));
 });

package/esm/MeasureValueFilter/MeasureValueFilterButton.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement, type ReactNode } from "react";
 /**
  * Props passed to the MeasureValueFilter dropdown button (header) component.
  *
@@ -7,6 +7,9 @@ import { type ReactElement } from "react";
 export interface IMeasureValueFilterDropdownButtonProps {
     isActive: boolean;
     buttonTitle: string;
+    buttonSubtitle?: string;
+    buttonTitleExtension?: ReactNode;
+    disabled?: boolean;
     onClick: () => void;
 }
 export declare function DropdownButton({ isActive, buttonTitle, onClick }: IMeasureValueFilterDropdownButtonProps): ReactElement;

package/esm/MeasureValueFilter/MeasureValueFilterDetailsBubble.js

@@ -4,6 +4,7 @@ import { useCallback, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { UiIconButton, UiTooltip } from "@gooddata/sdk-ui-kit";
 import { messages } from "../locales.js";
+import { MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS } from "./constants.js";
 import { useMeasureValueFilterDetails } from "./useMeasureValueFilterDetails.js";
 /**
  * Info bubble showing metric details when the question icon is hovered/focused.
@@ -16,7 +17,7 @@ export function MeasureValueFilterDetailsBubble({ title, requestHandler, }) {
     const { details, isLoading, error } = useMeasureValueFilterDetails({ isOpen, requestHandler });
     const handleOpen = useCallback(() => setIsOpen(true), []);
     const handleClose = useCallback(() => setIsOpen(false), []);
-    const tooltipContent = (_jsx("div", { className: "gd-mvf-details-bubble s-mvf-details-bubble", children: _jsxs("div", { className: "gd-mvf-details-bubble__content", children: [
+    const tooltipContent = (_jsx("div", { className: `${MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS} s-mvf-details-bubble`, children: _jsxs("div", { className: "gd-mvf-details-bubble__content", children: [
                 _jsxs("div", { className: "gd-mvf-details-bubble__section", children: [
                         _jsx("h3", { className: "gd-mvf-details-bubble__title", children: details?.title ?? title }), details?.description ? (_jsx("p", { className: "gd-mvf-details-bubble__description", children: details.description })) : null] }), _jsxs("div", { className: "gd-mvf-details-bubble__section", children: [
                         _jsx("span", { className: "gd-mvf-details-bubble__key", children: _jsx(FormattedMessage, { ...messages["measureValueFilterDetailsType"] }) }), _jsx("span", { className: "gd-mvf-details-bubble__value", children: _jsx(FormattedMessage, { ...messages["measureValueFilterDetailsTypeValue"] }) })

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, }) {
+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, }) {
     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 }));
+    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 }));
 });

package/esm/MeasureValueFilter/OperatorDropdownBody.js

@@ -3,13 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { useIntl } from "react-intl";
 import { Overlay, Separator } from "@gooddata/sdk-ui-kit";
+import { MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS } from "./constants.js";
 import { OperatorDropdownItem } from "./OperatorDropdownItem.js";
 export const OperatorDropdownBody = memo(function OperatorDropdownBody({ onSelect, onClose, selectedOperator, alignTo, isAllOperatorDisabled = false, }) {
     const intl = useIntl();
     const allOperatorDisabledTooltip = isAllOperatorDisabled
         ? intl.formatMessage({ id: "mvf.operator.all.disabled.tooltip" })
         : undefined;
-    return (_jsx(Overlay, { closeOnOutsideClick: true, alignTo: alignTo, alignPoints: [{ align: "bl tl" }], onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsxs("div", { className: "gd-mvf-operator-dropdown-body s-mvf-operator-dropdown-body", "data-testid": "mvf-operator-dropdown-body", children: [
+    return (_jsx(Overlay, { closeOnOutsideClick: true, alignTo: alignTo, alignPoints: [{ align: "bl tl" }], onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: _jsxs("div", { className: `${MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS} s-mvf-operator-dropdown-body`, "data-testid": "mvf-operator-dropdown-body", children: [
                     _jsx(OperatorDropdownItem, { operator: "ALL", selectedOperator: selectedOperator, onClick: onSelect, isDisabled: isAllOperatorDisabled, disabledTooltip: allOperatorDisabledTooltip }), _jsx(Separator, {}), _jsx(OperatorDropdownItem, { operator: "GREATER_THAN", selectedOperator: selectedOperator, onClick: onSelect }), _jsx(OperatorDropdownItem, { operator: "GREATER_THAN_OR_EQUAL_TO", selectedOperator: selectedOperator, onClick: onSelect }), _jsx(Separator, {}), _jsx(OperatorDropdownItem, { operator: "LESS_THAN", selectedOperator: selectedOperator, onClick: onSelect }), _jsx(OperatorDropdownItem, { operator: "LESS_THAN_OR_EQUAL_TO", selectedOperator: selectedOperator, onClick: onSelect }), _jsx(Separator, {}), _jsx(OperatorDropdownItem, { operator: "BETWEEN", selectedOperator: selectedOperator, onClick: onSelect, bubbleText: intl.formatMessage({ id: "mvf.operator.between.tooltip.bubble" }) }), _jsx(OperatorDropdownItem, { operator: "NOT_BETWEEN", selectedOperator: selectedOperator, onClick: onSelect, bubbleText: intl.formatMessage({ id: "mvf.operator.notBetween.tooltip.bubble" }) }), _jsx(Separator, {}), _jsx(OperatorDropdownItem, { operator: "EQUAL_TO", selectedOperator: selectedOperator, onClick: onSelect }), _jsx(OperatorDropdownItem, { operator: "NOT_EQUAL_TO", selectedOperator: selectedOperator, onClick: onSelect })
                 ] }) }) }));
 });

package/esm/MeasureValueFilter/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS = "gd-mvf-dropdown-body";
+export declare const MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS = "gd-mvf-operator-dropdown-body";
+export declare const MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS = "gd-mvf-details-bubble";

package/esm/MeasureValueFilter/constants.js

@@ -0,0 +1,6 @@
+// (C) 2026 GoodData Corporation
+// Those classes are extracted to constants because they are used in FilterGroup component
+// to prevent group dropdown from closing when clicking on the nested attribute filterdropdown content.
+export const MEASURE_VALUE_FILTER_DROPDOWN_BODY_CLASS = "gd-mvf-dropdown-body";
+export const MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS = "gd-mvf-operator-dropdown-body";
+export const MEASURE_VALUE_FILTER_DETAILS_BUBBLE_CLASS = "gd-mvf-details-bubble";

package/esm/MeasureValueFilter/typings.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType } from "react";
 import { type IMeasureMetadataObject, type IMeasureValueFilter, type MeasureValueFilterCondition, type ObjRef, type ObjRefInScope } from "@gooddata/sdk-model";
 import { type ISeparators } from "@gooddata/sdk-ui";
+import { type IAlignPoint } from "@gooddata/sdk-ui-kit";
 import { type IMeasureValueFilterDropdownButtonProps } from "./MeasureValueFilterButton.js";
 /**
  * Type of dimensionality item for display purposes.
@@ -274,6 +275,16 @@ export interface IMeasureValueFilterCommonProps extends IMeasureValueFilterCusto
      * @beta
      */
     isHeaderEnabled?: boolean;
+    /**
+     * Optional alignment points for the dropdown overlay.
+     *
+     * @remarks
+     * Mirrors the attribute filter alignment hook so hosts can position the MVF dropdown
+     * differently in nested surfaces, for example inside a dashboard filter group.
+     *
+     * @beta
+     */
+    alignPoints?: IAlignPoint[];
 }
 /**
  * These customization properties allow you to specify custom components that the MeasureValueFilter

package/esm/sdk-ui-filters.d.ts

@@ -3416,9 +3416,17 @@ export declare interface IFilterGroupProps<P> {
     title: string;
     filters: P[];
     getFilterIdentifier: (filter: P) => string;
-    hasSelectedElements: (filter: P) => boolean;
+    isFilterActive: (filter: P) => boolean;
+    /**
+     * @deprecated
+     * Use isFilterActive instead.
+     */
+    hasSelectedElements?: (filter: P) => boolean;
     getTitleExtension?: (filterIdentifier: string, filterTitle?: string) => ReactNode;
-    renderFilter: (filter: P, AttributeFilterComponent?: ComponentType<IAttributeFilterProps>) => ReactElement;
+    /**
+     * @beta
+     */
+    renderFilter: (filter: P, AttributeFilterComponent?: ComponentType<IAttributeFilterProps>, MeasureValueFilterComponent?: ComponentType<IMeasureValueFilterProps>) => ReactElement;
 }
 
 /**
@@ -3741,6 +3749,16 @@ export declare interface IMeasureValueFilterCommonProps extends IMeasureValueFil
      * @beta
      */
     isHeaderEnabled?: boolean;
+    /**
+     * Optional alignment points for the dropdown overlay.
+     *
+     * @remarks
+     * Mirrors the attribute filter alignment hook so hosts can position the MVF dropdown
+     * differently in nested surfaces, for example inside a dashboard filter group.
+     *
+     * @beta
+     */
+    alignPoints?: IAlignPoint[];
 }
 
 /**
@@ -3860,6 +3878,9 @@ export declare interface IMeasureValueFilterDropdownActionsProps {
 export declare interface IMeasureValueFilterDropdownButtonProps {
     isActive: boolean;
     buttonTitle: string;
+    buttonSubtitle?: string;
+    buttonTitleExtension?: ReactNode;
+    disabled?: boolean;
     onClick: () => void;
 }
 
@@ -3876,6 +3897,9 @@ export declare interface IMeasureValueFilterDropdownProps extends IMeasureValueF
  */
 export declare interface IMeasureValueFilterProps extends IMeasureValueFilterCommonProps, IMeasureValueFilterCustomComponentsProps {
     buttonTitle: string;
+    buttonSubtitle?: string;
+    buttonTitleExtension?: ReactNode;
+    buttonDisabled?: boolean;
     onCancel?: () => void;
     /**
      * When toggled from falsy to truthy, opens the dropdown once. A re-render with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-filters",
-  "version": "11.37.0-alpha.1",
+  "version": "11.37.0-alpha.3",
   "description": "GoodData.UI SDK - Filter Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -47,11 +47,11 @@
     "ts-invariant": "0.10.3",
     "tslib": "2.8.1",
     "uuid": "11.1.0",
-    "@gooddata/sdk-backend-spi": "11.37.0-alpha.1",
-    "@gooddata/sdk-model": "11.37.0-alpha.1",
-    "@gooddata/sdk-ui": "11.37.0-alpha.1",
-    "@gooddata/sdk-ui-kit": "11.37.0-alpha.1",
-    "@gooddata/util": "11.37.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.37.0-alpha.3",
+    "@gooddata/sdk-model": "11.37.0-alpha.3",
+    "@gooddata/sdk-ui-kit": "11.37.0-alpha.3",
+    "@gooddata/util": "11.37.0-alpha.3",
+    "@gooddata/sdk-ui": "11.37.0-alpha.3"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -93,12 +93,12 @@
     "typescript": "5.9.3",
     "vitest": "4.1.0",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.37.0-alpha.1",
-    "@gooddata/oxlint-config": "11.37.0-alpha.1",
-    "@gooddata/reference-workspace": "11.37.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.37.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.37.0-alpha.1",
-    "@gooddata/stylelint-config": "11.37.0-alpha.1"
+    "@gooddata/eslint-config": "11.37.0-alpha.3",
+    "@gooddata/oxlint-config": "11.37.0-alpha.3",
+    "@gooddata/reference-workspace": "11.37.0-alpha.3",
+    "@gooddata/sdk-backend-mockingbird": "11.37.0-alpha.3",
+    "@gooddata/sdk-ui-theme-provider": "11.37.0-alpha.3",
+    "@gooddata/stylelint-config": "11.37.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",