@gooddata/sdk-ui-filters 11.39.0-alpha.3 → 11.39.0

package/esm/FilterGroup/FilterGroup.js

@@ -203,7 +203,7 @@ export function FilterGroup(props) {
                 ariaLabel: groupAriaLabel,
             }, renderItem: renderItem, onKeyDownSelect: handleItemKeyboardAction, closeDropdown: closeDropdown, isMobile: isMobile }) })), [filters, renderItem, handleKeyDown, handleKeyDownCapture, handleItemKeyboardAction, groupAriaLabel]);
     const isMobile = useMediaQuery("mobileDevice");
-    const renderButton = useCallback(({ toggleDropdown, isOpen, buttonRef, dropdownId }) => (_jsx("div", { className: cx({ "gd-is-mobile": isMobile && isOpen }), children: _jsx(AttributeFilterDropdownButton, { title: title, subtitle: subtitle, isLoaded: !isAnyFilterError, isOpen: isOpen, selectedItemsCount: selectedItemsCount, totalItemsCount: totalItemsCount, showSelectionCount: selectedItemsCount !== undefined || totalItemsCount !== undefined, icon: _jsx(UiIcon, { type: "folder", size: 12, color: "currentColor" }), dropdownId: dropdownId, buttonRef: buttonRef, onClick: toggleDropdown, isError: isAnyFilterError, ariaLabel: groupAriaLabelWithState }) })), [
+    const renderButton = useCallback(({ toggleDropdown, isOpen, buttonRef, dropdownId }) => (_jsx("div", { className: cx({ "gd-is-mobile": isMobile && isOpen }), children: _jsx(AttributeFilterDropdownButton, { title: title, subtitle: subtitle, isLoaded: !isAnyFilterError, isOpen: isOpen, selectedItemsCount: selectedItemsCount, totalItemsCount: totalItemsCount, showSelectionCount: selectedItemsCount !== undefined || totalItemsCount !== undefined, icon: _jsx(UiIcon, { type: "folderSmall", size: 12, color: "complementary-6" }), dropdownId: dropdownId, buttonRef: buttonRef, onClick: toggleDropdown, isError: isAnyFilterError, ariaLabel: groupAriaLabelWithState }) })), [
         title,
         subtitle,
         isAnyFilterError,

package/esm/MeasureValueFilter/Dropdown.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 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";
@@ -35,6 +36,8 @@ interface IDropdownProps extends IMeasureValueFilterCustomComponentProps {
     loadMetricDetails?: () => Promise<IMeasureMetadataObject | undefined>;
     isHeaderEnabled?: boolean;
     alignPoints?: IAlignPoint[];
+    fullscreenOnMobile?: boolean;
+    mobileHeader?: ReactNode;
 }
 export declare function Dropdown(props: IDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/MeasureValueFilter/Dropdown.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
 import { memo, useCallback } from "react";
 import { IntlWrapper } from "@gooddata/sdk-ui";
-import { Overlay, UiFocusManager } from "@gooddata/sdk-ui-kit";
+import { FullScreenOverlay, Overlay, UiFocusManager, useMediaQuery, } from "@gooddata/sdk-ui-kit";
 import { DropdownBody } from "./DropdownBody.js";
 const alignPoints = ["bl tl", "tl bl", "br tr", "tr br"];
 /*
@@ -11,13 +11,21 @@ const alignPoints = ["bl tl", "tl bl", "br tr", "tr br"];
  *  thin layer on top of goodstrap (?)
  */
 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, } = 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 isMobile = useMediaQuery("mobileDevice");
+    const useFullScreen = !!fullscreenOnMobile && isMobile;
     const onApply = useCallback((conditions, newDimensionality, applyOnResult) => {
         onApplyProp(conditions, newDimensionality, applyOnResult);
     }, [onApplyProp]);
     const selectedOperator = operator === null ? "ALL" : operator;
-    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 }) }) }));
+    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 }) }));
+    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 })
+                ] }) }));
+    }
+    return (_jsx(Overlay, { alignTo: anchorEl, alignPoints: alignPoints ?? DROPDOWN_ALIGNMENTS, closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, onClose: onCancel, children: body }));
 });
 export function Dropdown(props) {
     return (_jsx(IntlWrapper, { locale: props.locale, children: _jsx(DropdownWithIntl, { ...props }) }));

package/esm/MeasureValueFilter/DropdownBody.d.ts

@@ -33,6 +33,7 @@ interface IDropdownBodyProps extends IMeasureValueFilterCustomComponentProps {
     isLoadingCatalogDimensionality?: boolean;
     loadMetricDetails?: () => Promise<IMeasureMetadataObject | undefined>;
     isHeaderEnabled?: boolean;
+    isMobile?: boolean;
 }
 export declare const DropdownBodyWithIntl: import("react").NamedExoticComponent<IDropdownBodyProps>;
 export declare const DropdownBody: import("react").NamedExoticComponent<IDropdownBodyProps>;

package/esm/MeasureValueFilter/DropdownBody.js

@@ -18,6 +18,19 @@ import { TreatNullValuesAsZeroCheckbox } from "./TreatNullValuesAsZeroCheckbox.j
 import { WarningMessageComponent } from "./WarningMessage.js";
 const DefaultValuePrecision = 6;
 const ALIGN_POINTS = [{ align: "cr cl" }];
+/**
+ * Plus / cross button next to a condition row. On mobile, skip the hover tooltip wrapper —
+ * tooltips aren't usable on touch and the Bubble's internal Overlay caused a re-positioning
+ * feedback loop when a new condition row was inserted into the fullscreen overlay.
+ */
+function ConditionActionButton({ icon, isMobile, isDisabled, isDestructive, onClick, dataTestId, label, tooltip, }) {
+    const button = (_jsx(UiIconButton, { icon: icon, size: isMobile ? "medium" : "small", variant: "tertiary", isDisabled: isDisabled, isDesctructive: isDestructive, onClick: onClick, dataTestId: dataTestId, label: label }));
+    if (isMobile) {
+        return button;
+    }
+    return (_jsxs(BubbleHoverTrigger, { children: [button, _jsx(Bubble, { alignPoints: ALIGN_POINTS, children: tooltip })
+        ] }));
+}
 const toFormCondition = (condition) => {
     if (isComparisonCondition(condition)) {
         return {
@@ -539,21 +552,17 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
         isCommitPending.current = true;
         setApplyOnResult(event.target.checked);
     }, [setApplyOnResult]);
-    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", {
+    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", {
                                         "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 }) }), enableMultipleConditions ? (_jsx("div", { className: "gd-mvf-condition-action", children: idx === 0 ? (_jsxs(BubbleHoverTrigger, { children: [
-                                                            _jsx(UiIconButton, { icon: "plus", size: "small", variant: "tertiary", isDisabled: isAddConditionDisabled, onClick: handleAddCondition, dataTestId: "mvf-add-condition", label: addConditionTooltip }), _jsx(Bubble, { alignPoints: ALIGN_POINTS, children: isAddConditionDisabled
-                                                                    ? addConditionDisabledTooltip
-                                                                    : addConditionTooltip })
-                                                        ] })) : (_jsxs(BubbleHoverTrigger, { children: [
-                                                            _jsx(UiIconButton, { icon: "cross", size: "small", variant: "tertiary", isDesctructive: true, onClick: () => handleRemoveCondition(idx), dataTestId: `mvf-remove-condition-${idx}`, label: removeConditionTooltip }), _jsx(Bubble, { alignPoints: ALIGN_POINTS, children: removeConditionTooltip })
-                                                        ] })) })) : null] }), c.operator === "ALL" ? null : (_jsxs("div", { className: "gd-mvf-condition-inputs", 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
+                                                            ? 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 ===
                                                     (enableMultipleConditions
                                                         ? state.conditions.length - 1
-                                                        : 0) && shouldShowTreatNullAsZeroCheckbox ? (_jsx(TreatNullValuesAsZeroCheckbox, { onChange: handleTreatNullAsZeroClicked, checked: enabledTreatNullValuesAsZero, intl: intl })) : null, idx ===
+                                                        : 0) && shouldShowTreatNullAsZeroCheckbox ? (_jsx(TreatNullValuesAsZeroCheckbox, { onChange: handleTreatNullAsZeroClicked, checked: enabledTreatNullValuesAsZero, isMobile: props.isMobile, 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: [

package/esm/MeasureValueFilter/MeasureValueFilter.js

@@ -1,15 +1,18 @@
 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 { 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, }) {
+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, }) {
     const [displayDropdown, setDisplayDropdown] = useState(false);
     const buttonRef = useRef(null);
     const autoOpenedRef = useRef(false);
+    const isMobile = useMediaQuery("mobileDevice");
+    const useFullScreen = !!fullscreenOnMobile && isMobile;
     useEffect(() => {
         if (autoOpen && !autoOpenedRef.current) {
             autoOpenedRef.current = true;
@@ -30,6 +33,18 @@ 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 })), [
+        DropdownButtonComponent,
+        buttonDisabled,
+        buttonSubtitle,
+        buttonTitle,
+        buttonTitleExtension,
+        displayDropdown,
+    ]);
     return (_jsxs(Fragment, { children: [
-            _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] }));
+            _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, 
+                // 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.
+                mobileHeader: useFullScreen ? renderDropdownButton(handleCancel) : undefined })) : null] }));
 });

package/esm/MeasureValueFilter/MeasureValueFilterDropdown.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type IMeasureValueFilterCommonProps } from "./typings.js";
 /**
  * @beta
@@ -5,6 +6,16 @@ import { type IMeasureValueFilterCommonProps } from "./typings.js";
 export interface IMeasureValueFilterDropdownProps extends IMeasureValueFilterCommonProps {
     onCancel: () => void;
     anchorEl?: HTMLElement | string;
+    /**
+     * Element rendered at the top of the dropdown overlay when displayed in fullscreen mobile mode.
+     *
+     * @remarks
+     * Typically the host's dropdown button — composed by the parent {@link MeasureValueFilter}
+     * so the trigger appears as the overlay header on small viewports.
+     *
+     * @internal
+     */
+    mobileHeader?: ReactNode;
 }
 /**
  * @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, }) {
+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, }) {
     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 }));
+    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 }));
 });

package/esm/MeasureValueFilter/OperatorDropdown.d.ts

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

package/esm/MeasureValueFilter/OperatorDropdown.js

@@ -32,5 +32,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 })) : null] }));
+                    _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] }));
 });

package/esm/MeasureValueFilter/OperatorDropdownBody.d.ts

@@ -5,6 +5,7 @@ interface IOperatorDropdownBodyProps {
     onClose: () => void;
     alignTo: string;
     isAllOperatorDisabled?: boolean;
+    isMobile?: boolean;
 }
 export declare const OperatorDropdownBody: import("react").NamedExoticComponent<IOperatorDropdownBodyProps>;
 export {};

package/esm/MeasureValueFilter/OperatorDropdownBody.js

@@ -1,16 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
-import { memo } from "react";
-import { useIntl } from "react-intl";
-import { Overlay, Separator } from "@gooddata/sdk-ui-kit";
+import { Fragment, memo } 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 { MEASURE_VALUE_FILTER_OPERATOR_DROPDOWN_BODY_CLASS } from "./constants.js";
+import { getOperatorTranslationKey } from "./helpers/measureValueFilterOperator.js";
 import { OperatorDropdownItem } from "./OperatorDropdownItem.js";
-export const OperatorDropdownBody = memo(function OperatorDropdownBody({ onSelect, onClose, selectedOperator, alignTo, isAllOperatorDisabled = false, }) {
+const MOBILE_DROPDOWN_ALIGN_POINTS = [{ align: "tl tl" }];
+// 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"],
+    ["GREATER_THAN", "GREATER_THAN_OR_EQUAL_TO"],
+    ["LESS_THAN", "LESS_THAN_OR_EQUAL_TO"],
+    ["BETWEEN", "NOT_BETWEEN"],
+    ["EQUAL_TO", "NOT_EQUAL_TO"],
+];
+// Operators that surface an explanatory hover bubble next to their label.
+// Declared via `defineMessages` so static i18n analysis (e.g. i18n-toolkit) sees these IDs
+// as referenced and validates their presence in translation bundles — a plain `string` map
+// is invisible to the extractor because it never reaches an `intl.formatMessage({ id })` call site.
+const bubbleMessages = defineMessages({
+    BETWEEN: { id: "mvf.operator.between.tooltip.bubble" },
+    NOT_BETWEEN: { id: "mvf.operator.notBetween.tooltip.bubble" },
+});
+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, }) {
     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: `${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 })
-                ] }) }) }));
+    const selectedOperatorTranslationKey = getOperatorTranslationKey(selectedOperator);
+    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))) }));
+    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 })
+                ] }) }));
+    }
+    return (_jsx(Overlay, { closeOnOutsideClick: true, alignTo: alignTo, alignPoints: [{ align: "bl tl" }], onClose: onClose, children: _jsx("div", { className: "gd-dropdown overlay", children: items }) }));
 });

package/esm/MeasureValueFilter/OperatorDropdownItem.d.ts

@@ -6,6 +6,7 @@ interface IOperatorDropdownItemOwnProps {
     isDisabled?: boolean;
     disabledTooltip?: string;
     onClick: (identifier: MeasureValueFilterOperator) => void;
+    isMobile?: boolean;
 }
 export declare const OperatorDropdownItem: import("react").NamedExoticComponent<IOperatorDropdownItemOwnProps>;
 export {};

package/esm/MeasureValueFilter/OperatorDropdownItem.js

@@ -8,7 +8,7 @@ import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
 import { simplifyText } from "@gooddata/util";
 import { getOperatorIcon, getOperatorTranslationKey } from "./helpers/measureValueFilterOperator.js";
 const BUBBLE_ALIGN_POINTS = [{ align: "cr cl" }, { align: "cl cr" }];
-export const OperatorDropdownItem = memo(function OperatorDropdownItem({ operator, selectedOperator, bubbleText, isDisabled = false, disabledTooltip, onClick = () => { }, }) {
+export const OperatorDropdownItem = memo(function OperatorDropdownItem({ operator, selectedOperator, bubbleText, isDisabled = false, disabledTooltip, onClick = () => { }, isMobile = false, }) {
     const intl = useIntl();
     const handleOnClick = (e) => {
         if (isDisabled) {
@@ -29,8 +29,7 @@ export const OperatorDropdownItem = memo(function OperatorDropdownItem({ operato
     });
     const operatorTranslationKey = getOperatorTranslationKey(operator);
     const title = operatorTranslationKey === undefined ? operator : intl.formatMessage({ id: operatorTranslationKey });
-    const itemContent = (_jsxs("div", { className: className, onClick: handleOnClick, "aria-disabled": isDisabled, "data-testid": `mvf-operator-${simplifyText(operator)}`, children: [
-            _jsx("div", { className: `gd-icon-${getOperatorIcon(operator)}`, title: title }), _jsx("span", { title: title, children: capitalize(title) }), bubbleText ? renderBubble(bubbleText) : null] }));
+    const itemContent = (_jsxs("div", { className: className, onClick: handleOnClick, "aria-disabled": isDisabled, "data-testid": `mvf-operator-${simplifyText(operator)}`, children: [isMobile ? null : _jsx("div", { className: `gd-icon-${getOperatorIcon(operator)}`, title: title }), _jsx("span", { title: title, children: capitalize(title) }), bubbleText && !isMobile ? renderBubble(bubbleText) : null] }));
     // Wrap disabled item with tooltip if provided
     if (isDisabled && disabledTooltip) {
         return (_jsxs(BubbleHoverTrigger, { tagName: "div", showDelay: 400, hideDelay: 200, children: [itemContent, _jsx(Bubble, { className: "bubble-primary", alignPoints: BUBBLE_ALIGN_POINTS, children: disabledTooltip })

package/esm/MeasureValueFilter/TreatNullValuesAsZeroCheckbox.d.ts

@@ -3,6 +3,7 @@ import { type WrappedComponentProps } from "react-intl";
 interface ITreatNullValuesAsZeroCheckboxProps {
     checked?: boolean;
     onChange: (checked: boolean) => void;
+    isMobile?: boolean;
 }
-export declare function TreatNullValuesAsZeroCheckbox({ checked, onChange, intl }: ITreatNullValuesAsZeroCheckboxProps & WrappedComponentProps): ReactElement;
+export declare function TreatNullValuesAsZeroCheckbox({ checked, onChange, isMobile, intl }: ITreatNullValuesAsZeroCheckboxProps & WrappedComponentProps): ReactElement;
 export {};

package/esm/MeasureValueFilter/TreatNullValuesAsZeroCheckbox.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bubble, BubbleHoverTrigger } from "@gooddata/sdk-ui-kit";
-export function TreatNullValuesAsZeroCheckbox({ checked = false, onChange, intl, }) {
+export function TreatNullValuesAsZeroCheckbox({ checked = false, onChange, isMobile = false, intl, }) {
     const handleOnChange = (e) => onChange(e.target.checked);
     return (_jsxs("label", { className: "input-checkbox-label gd-mvf-treat-null-values-as-zero s-treat-null-values-as-zero", "data-testid": "mvf-treat-null-values-as-zero", children: [
-            _jsx("input", { type: "checkbox", name: "treat-null-values-as", className: "input-checkbox", checked: checked, onChange: handleOnChange }), _jsxs("span", { className: "input-label-text", children: [intl.formatMessage({ id: "mvf.treatNullValuesAsZeroLabel" }), _jsxs(BubbleHoverTrigger, { showDelay: 400, hideDelay: 200, children: [
+            _jsx("input", { type: "checkbox", name: "treat-null-values-as", className: "input-checkbox", checked: checked, onChange: handleOnChange }), _jsxs("span", { className: "input-label-text", children: [intl.formatMessage({ id: "mvf.treatNullValuesAsZeroLabel" }), isMobile ? null : (_jsxs(BubbleHoverTrigger, { showDelay: 400, hideDelay: 200, children: [
                             _jsx("span", { className: "inlineBubbleHelp" }), _jsx(Bubble, { className: "bubble-primary", alignPoints: [{ align: "tc bl" }], children: intl.formatMessage({ id: "mvf.treatNullValuesAsZeroTooltip" }) })
-                        ] })
-                ] })
+                        ] }))] })
         ] }));
 }

package/esm/MeasureValueFilter/typings.d.ts

@@ -285,6 +285,18 @@ export interface IMeasureValueFilterCommonProps extends IMeasureValueFilterCusto
      * @beta
      */
     alignPoints?: IAlignPoint[];
+    /**
+     * When `true`, the dropdown takes the entire screen on mobile devices.
+     *
+     * @remarks
+     * Hosts that render the MVF inside responsive surfaces (e.g. dashboards) opt in to
+     * switch the overlay to a full-screen presentation on mobile viewports.
+     *
+     * Defaults to `false`.
+     *
+     * @beta
+     */
+    fullscreenOnMobile?: boolean;
 }
 /**
  * These customization properties allow you to specify custom components that the MeasureValueFilter

package/esm/internal.d.ts

@@ -7,4 +7,6 @@ export { CalendarTypeTabs } from "./DateFilter/DateFilterBody/CalendarTypeTabs.j
 export { normalizeSelectedFilterOption } from "./DateFilter/utils/FilterOptionNormalization.js";
 export { ListItem } from "./DateFilter/ListItem/ListItem.js";
 export { ListItemTooltip } from "./DateFilter/ListItemTooltip/ListItemTooltip.js";
+export { DimensionalitySection } from "./MeasureValueFilter/DimensionalitySection.js";
 export { MeasureValueFilterDetailsBubble } from "./MeasureValueFilter/MeasureValueFilterDetailsBubble.js";
+export type { IDimensionalityItem } from "./MeasureValueFilter/typings.js";

package/esm/internal.js

@@ -9,4 +9,5 @@ export { CalendarTypeTabs } from "./DateFilter/DateFilterBody/CalendarTypeTabs.j
 export { normalizeSelectedFilterOption } from "./DateFilter/utils/FilterOptionNormalization.js";
 export { ListItem } from "./DateFilter/ListItem/ListItem.js";
 export { ListItemTooltip } from "./DateFilter/ListItemTooltip/ListItemTooltip.js";
+export { DimensionalitySection } from "./MeasureValueFilter/DimensionalitySection.js";
 export { MeasureValueFilterDetailsBubble } from "./MeasureValueFilter/MeasureValueFilterDetailsBubble.js";

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

@@ -3759,6 +3759,18 @@ export declare interface IMeasureValueFilterCommonProps extends IMeasureValueFil
      * @beta
      */
     alignPoints?: IAlignPoint[];
+    /**
+     * When `true`, the dropdown takes the entire screen on mobile devices.
+     *
+     * @remarks
+     * Hosts that render the MVF inside responsive surfaces (e.g. dashboards) opt in to
+     * switch the overlay to a full-screen presentation on mobile viewports.
+     *
+     * Defaults to `false`.
+     *
+     * @beta
+     */
+    fullscreenOnMobile?: boolean;
 }
 
 /**
@@ -3890,6 +3902,16 @@ export declare interface IMeasureValueFilterDropdownButtonProps {
 export declare interface IMeasureValueFilterDropdownProps extends IMeasureValueFilterCommonProps {
     onCancel: () => void;
     anchorEl?: HTMLElement | string;
+    /**
+     * Element rendered at the top of the dropdown overlay when displayed in fullscreen mobile mode.
+     *
+     * @remarks
+     * Typically the host's dropdown button — composed by the parent {@link MeasureValueFilter}
+     * so the trigger appears as the overlay header on small viewports.
+     *
+     * @internal
+     */
+    mobileHeader?: ReactNode;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-filters",
-  "version": "11.39.0-alpha.3",
+  "version": "11.39.0",
   "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.39.0-alpha.3",
-    "@gooddata/sdk-model": "11.39.0-alpha.3",
-    "@gooddata/sdk-ui": "11.39.0-alpha.3",
-    "@gooddata/sdk-ui-kit": "11.39.0-alpha.3",
-    "@gooddata/util": "11.39.0-alpha.3"
+    "@gooddata/sdk-ui": "11.39.0",
+    "@gooddata/sdk-model": "11.39.0",
+    "@gooddata/sdk-backend-spi": "11.39.0",
+    "@gooddata/sdk-ui-kit": "11.39.0",
+    "@gooddata/util": "11.39.0"
   },
   "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.39.0-alpha.3",
-    "@gooddata/oxlint-config": "11.39.0-alpha.3",
-    "@gooddata/reference-workspace": "11.39.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.39.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.39.0-alpha.3",
-    "@gooddata/stylelint-config": "11.39.0-alpha.3"
+    "@gooddata/eslint-config": "11.39.0",
+    "@gooddata/oxlint-config": "11.39.0",
+    "@gooddata/reference-workspace": "11.39.0",
+    "@gooddata/sdk-ui-theme-provider": "11.39.0",
+    "@gooddata/stylelint-config": "11.39.0",
+    "@gooddata/sdk-backend-mockingbird": "11.39.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/styles/css/filterGroup.css

@@ -22,6 +22,7 @@
 }
 .dropdown-body .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item:last-child .gd-filter-group-item,
 .gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item:last-child .gd-filter-group-item {
+  height: 53px;
   border-bottom: none;
 }
 .dropdown-body .gd-infinite-list.gd-filter-group-body .gd-attribute-filter__next,

package/styles/css/filterGroup.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/filterGroup.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;AAAA;EACI;;AAGJ;AAAA;EACI;;AAIR;AAAA;EACI;;AAGJ;AAAA;EACI;;AAGJ;AAAA;EACI;;;AAIR;EACI","file":"filterGroup.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/filterGroup.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGI;AAAA;EACI;;AAGJ;AAAA;EACI;EACA;;AAIR;AAAA;EACI;;AAGJ;AAAA;EACI;;AAGJ;AAAA;EACI;;;AAIR;EACI","file":"filterGroup.css"}