@gooddata/sdk-ui-filters 11.45.0-alpha.1 → 11.45.0-alpha.2

package/esm/MeasureValueFilter/DimensionalitySection.d.ts

@@ -1,10 +1,5 @@
 import { type ObjRefInScope } from "@gooddata/sdk-model";
 import type { IDimensionalityItem } from "./typings.js";
-/**
- * Compare two-dimensionality arrays for equality (order-insensitive).
- * Returns true if they contain the same identifiers regardless of order.
- */
-export declare const areDimensionalitySetsEqual: (a: IDimensionalityItem[] | undefined, b: IDimensionalityItem[] | undefined) => boolean;
 interface IDimensionalitySectionProps {
     /**
      * Current dimensionality items in the filter.

package/esm/MeasureValueFilter/DimensionalitySection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DimensionalitySection.d.ts","sourceRoot":"","sources":["../../src/MeasureValueFilter/DimensionalitySection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,qBAAqB,CAAC;AAI1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA2CxD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yFAetC,CAAC;AAkBF,UAAU,2BAA2B;IACjC;;OAEG;IACH,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC;;OAEG;IACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C;;OAEG;IACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C;;OAEG;IACH,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAChG;;OAEG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;OAEG;IACH,sBAAsB,EAAE,CAAC,cAAc,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IACxE;;;OAGG;IACH,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,mEAsPhC,CAAC"}
+{"version":3,"file":"DimensionalitySection.d.ts","sourceRoot":"","sources":["../../src/MeasureValueFilter/DimensionalitySection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAkB,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGxD,UAAU,2BAA2B;IACjC;;OAEG;IACH,cAAc,EAAE,mBAAmB,EAAE,CAAC;IACtC;;OAEG;IACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C;;OAEG;IACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C;;OAEG;IACH,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAChG;;OAEG;IACH,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC;;OAEG;IACH,sBAAsB,EAAE,CAAC,cAAc,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IACxE;;;OAGG;IACH,gBAAgB,EAAE,OAAO,CAAC;CAC7B;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,mEAgJhC,CAAC"}

package/esm/MeasureValueFilter/DimensionalitySection.js

@@ -1,45 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2025-2026 GoodData Corporation
-import { memo, useCallback, useMemo, useRef, useState, } from "react";
+import { memo } from "react";
 import { useIntl } from "react-intl";
-import { areObjRefsEqual, objRefToString } from "@gooddata/sdk-model";
+import { objRefToString } from "@gooddata/sdk-model";
 import { Bubble, BubbleHoverTrigger, UiButton, UiIconButton, UiTag } from "@gooddata/sdk-ui-kit";
 import { AttributePicker } from "./AttributePicker.js";
-import { useLazyCatalogDimensionality } from "./useLazyCatalogDimensionality.js";
-function WithAddButton({ children, appendAddButton, isDisabled, tooltip, buttonRef, onClick, }) {
-    if (!appendAddButton) {
-        return children;
-    }
-    return (_jsxs("div", { className: "gd-mvf-dimensionality-add-wrapper", children: [children, _jsxs(BubbleHoverTrigger, { children: [
-                    _jsx(UiIconButton, { ref: buttonRef, icon: "plus", size: "small", variant: "tertiary", isDisabled: isDisabled, onClick: onClick, dataTestId: "mvf-dimensionality-plus" }), _jsx(Bubble, { alignPoints: [{ align: "bc tc" }], children: tooltip })
-                ] })
-        ] }));
-}
-/**
- * Compare two-dimensionality arrays for equality (order-insensitive).
- * Returns true if they contain the same identifiers regardless of order.
- */
-export const areDimensionalitySetsEqual = (a, b) => {
-    const aItems = a ?? [];
-    const bItems = b ?? [];
-    if (aItems.length !== bItems.length) {
-        return false;
-    }
-    // Check that every item in 'a' exists in 'b'
-    return aItems.every((aItem) => bItems.some((bItem) => areObjRefsEqual(aItem.identifier, bItem.identifier)));
-};
-const areDimensionalityItemsDeepEqual = (availableItem, filterItem) => {
-    if (availableItem.ref && filterItem.ref) {
-        return areObjRefsEqual(availableItem.ref, filterItem.ref);
-    }
-    if (availableItem.ref) {
-        return areObjRefsEqual(availableItem.ref, filterItem.identifier);
-    }
-    if (filterItem.ref) {
-        return areObjRefsEqual(availableItem.identifier, filterItem.ref);
-    }
-    return areObjRefsEqual(availableItem.identifier, filterItem.identifier);
-};
+import { WithAddButton, useDimensionalityEditor } from "./useDimensionalityEditor.js";
 /**
  * @internal
  * Dimensionality section for the measure value filter dropdown.
@@ -47,108 +13,29 @@ const areDimensionalityItemsDeepEqual = (availableItem, filterItem) => {
  */
 export const DimensionalitySection = memo(function DimensionalitySection({ dimensionality, insightDimensionality, catalogDimensionality, loadCatalogDimensionality, isLoadingCatalogDimensionality, onDimensionalityChange, isMigratedFilter, }) {
     const intl = useIntl();
-    // Ref for the inline add button (plus icon next to last tag)
-    const inlineAddButtonRef = useRef(null);
-    // AttributePicker state - stores whether it's open and which button triggered it
-    const [isAttributePickerOpen, setIsAttributePickerOpen] = useState(false);
-    const [anchorType, setAnchorType] = useState("standalone");
-    // Store standalone button anchor separately since it's not a ref
-    const [standaloneAnchor, setStandaloneAnchor] = useState(null);
-    const { lazyCatalogDimensionality, isLoadingLazyCatalogDimensionality } = useLazyCatalogDimensionality({
-        isOpen: isAttributePickerOpen,
-        dimensionality,
-        loadCatalogDimensionality,
+    const { inlineAddButtonRef, isAttributePickerOpen, actualAnchor, shouldShowResetButton, availableInsightItems, availableCatalogItems, isLoadingCatalogForPicker, handleRemove: handleRemoveDimensionality, handleReset: handleResetDimensionality, handleOpenInlinePicker: handleOpenInlineAttributePicker, handleOpenStandalonePicker: handleOpenStandaloneAttributePicker, handleClosePicker: handleCloseAttributePicker, handleAddItems: handleAddDimensionalityItems, } = useDimensionalityEditor({
+        items: dimensionality,
+        insightItems: insightDimensionality,
+        catalogItems: catalogDimensionality,
+        loadCatalog: loadCatalogDimensionality,
+        isLoadingCatalog: isLoadingCatalogDimensionality,
+        onChange: onDimensionalityChange,
     });
-    /**
-     * Check if the current dimensionality differs from the insight defaults (order-insensitive).
-     * Reset button should be visible when they differ.
-     */
-    const shouldShowResetButton = useMemo(() => {
-        return !areDimensionalitySetsEqual(dimensionality, insightDimensionality);
-    }, [dimensionality, insightDimensionality]);
-    /**
-     * Compute available items for the AttributePicker.
-     * Keep insight items and catalog items separate so the picker does not need to guess origin.
-     */
-    const availableInsightItems = useMemo(() => {
-        return (insightDimensionality ?? []).filter((availableItem) => !dimensionality.some((filterItem) => areDimensionalityItemsDeepEqual(availableItem, filterItem)));
-    }, [insightDimensionality, dimensionality]);
-    const availableCatalogItems = useMemo(() => {
-        const effectiveCatalog = loadCatalogDimensionality
-            ? (lazyCatalogDimensionality ?? [])
-            : (catalogDimensionality ?? []);
-        const selectedFilteredOut = effectiveCatalog.filter((availableItem) => !dimensionality.some((filterItem) => areDimensionalityItemsDeepEqual(availableItem, filterItem)));
-        // Prevent duplicates between "From visualization" and catalog lists.
-        // Insight items may be represented as LocalIdRefs; when available, use `ref` (display-form ObjRef)
-        // for stable deduplication against catalog candidates (which use ObjRefs).
-        const insightRefKeys = new Set(availableInsightItems
-            .map((i) => (i.ref ? objRefToString(i.ref) : undefined))
-            .filter((x) => !!x));
-        const insightTitlesWithoutRef = new Set(availableInsightItems.filter((i) => !i.ref).map((i) => i.title));
-        return selectedFilteredOut.filter((item) => {
-            const itemKey = objRefToString(item.identifier);
-            if (insightRefKeys.has(itemKey)) {
-                return false;
-            }
-            // Fallback for environments where insight items do not provide refs.
-            return !insightTitlesWithoutRef.has(item.title);
-        });
-    }, [
-        catalogDimensionality,
-        dimensionality,
-        availableInsightItems,
-        lazyCatalogDimensionality,
-        loadCatalogDimensionality,
-    ]);
-    const handleRemoveDimensionality = useCallback((index) => {
-        const newDimensionality = dimensionality.filter((_, i) => i !== index);
-        onDimensionalityChange(newDimensionality);
-    }, [dimensionality, onDimensionalityChange]);
-    /**
-     * Reset dimensionality to insight defaults (bucket attributes).
-     */
-    const handleResetDimensionality = useCallback(() => {
-        const newDimensionality = insightDimensionality ?? [];
-        onDimensionalityChange(newDimensionality);
-    }, [insightDimensionality, onDimensionalityChange]);
-    const handleOpenInlineAttributePicker = useCallback(() => {
-        setAnchorType("inline");
-        setIsAttributePickerOpen(true);
-    }, []);
-    const handleOpenStandaloneAttributePicker = useCallback((event) => {
-        setAnchorType("standalone");
-        setStandaloneAnchor(event.currentTarget);
-        setIsAttributePickerOpen(true);
-    }, []);
-    const handleCloseAttributePicker = useCallback(() => {
-        setIsAttributePickerOpen(false);
-        setStandaloneAnchor(null);
-    }, []);
-    const handleAddDimensionalityItems = useCallback((items) => {
-        const newDimensionality = [...dimensionality, ...items];
-        onDimensionalityChange(newDimensionality);
-        setIsAttributePickerOpen(false);
-        setStandaloneAnchor(null);
-    }, [dimensionality, onDimensionalityChange]);
     const addButtonTooltip = intl.formatMessage({ id: "mvf.dimensionality.addButton.tooltip" });
     const resetButtonTooltip = intl.formatMessage({
         id: "mvf.dimensionality.reset.tooltip",
     });
-    // Determine the actual anchor element to use
-    const actualAnchor = anchorType === "inline" ? inlineAddButtonRef.current : standaloneAnchor;
     return (_jsxs("div", { className: "gd-mvf-dropdown-section gd-mvf-dimensionality s-mvf-dimensionality", "data-testid": "mvf-dimensionality", children: [
             _jsx("div", { className: "gd-mvf-dimensionality-header", children: _jsx("label", { children: intl.formatMessage({ id: "mvf.dimensionality.forEach" }) }) }), dimensionality.length > 0 ? (_jsxs("div", { className: "gd-mvf-dimensionality-items", children: [dimensionality.map((item, index) => {
                         // Select icon and color based on item type: date items get date icon (blue)
                         const isDateItem = item.type === "chronologicalDate" || item.type === "genericDate";
                         const icon = isDateItem ? "date" : "ldmAttribute";
                         const iconColor = isDateItem ? "primary" : "warning";
-                        return (_jsx(WithAddButton, { appendAddButton: index === dimensionality.length - 1, isDisabled: false, tooltip: addButtonTooltip, buttonRef: inlineAddButtonRef, onClick: handleOpenInlineAttributePicker, children: _jsx("div", { className: "gd-mvf-dimensionality-tag-wrapper", children: _jsx(UiTag, { variant: "outlined", size: "large", iconBefore: icon, iconBeforeColor: iconColor, label: item.title, isDeletable: true, onDelete: () => handleRemoveDimensionality(index), dataTestId: `dimensionality-tag-${index}` }) }) }, objRefToString(item.identifier)));
+                        return (_jsx(WithAddButton, { appendAddButton: index === dimensionality.length - 1, isDisabled: false, tooltip: addButtonTooltip, buttonRef: inlineAddButtonRef, onClick: handleOpenInlineAttributePicker, dataTestId: "mvf-dimensionality-plus", children: _jsx("div", { className: "gd-mvf-dimensionality-tag-wrapper", children: _jsx(UiTag, { variant: "outlined", size: "large", iconBefore: icon, iconBeforeColor: iconColor, label: item.title, isDeletable: true, onDelete: () => handleRemoveDimensionality(index), dataTestId: `dimensionality-tag-${index}` }) }) }, objRefToString(item.identifier)));
                     }), shouldShowResetButton ? (_jsx("div", { className: "gd-mvf-dimensionality-reset-button", children: _jsxs(BubbleHoverTrigger, { children: [
                                 _jsx(UiIconButton, { icon: "history", size: "small", variant: "tertiary", onClick: handleResetDimensionality, label: resetButtonTooltip, dataTestId: "mvf-dimensionality-reset" }), _jsx(Bubble, { alignPoints: [{ align: "cr cl" }], children: resetButtonTooltip })
                             ] }) })) : null] })) : (_jsxs("div", { className: "gd-mvf-dimensionality-empty-actions", children: [
                     _jsx(UiButton, { label: intl.formatMessage({ id: "mvf.dimensionality.addAttributes" }), variant: "tertiary", size: "small", iconBefore: "plus", onClick: handleOpenStandaloneAttributePicker }), shouldShowResetButton ? (_jsxs(BubbleHoverTrigger, { children: [
                             _jsx(UiButton, { size: "small", variant: "tertiary", iconBefore: "history", label: intl.formatMessage({ id: "mvf.dimensionality.reset" }), onClick: handleResetDimensionality, dataTestId: "mvf-dimensionality-reset" }), _jsx(Bubble, { alignPoints: [{ align: "cr cl" }], children: resetButtonTooltip })
-                        ] })) : null] })), isMigratedFilter ? null : (_jsx("div", { role: "status", "aria-live": "polite", className: "gd-message information gd-mvf-backward-compatibility-message", "data-testid": "mvf-backward-compatibility-note", children: _jsx("div", { className: "gd-message-text", children: intl.formatMessage({ id: "mvf.dimensionality.backwardCompatibilityNote" }) }) })), isAttributePickerOpen && actualAnchor ? (_jsx(AttributePicker, { anchorElement: actualAnchor, onAdd: handleAddDimensionalityItems, onCancel: handleCloseAttributePicker, availableInsightItems: availableInsightItems, availableCatalogItems: availableCatalogItems, isLoadingCatalogDimensionality: loadCatalogDimensionality
-                    ? isLoadingLazyCatalogDimensionality
-                    : isLoadingCatalogDimensionality })) : null] }));
+                        ] })) : null] })), isMigratedFilter ? null : (_jsx("div", { role: "status", "aria-live": "polite", className: "gd-message information gd-mvf-backward-compatibility-message", "data-testid": "mvf-backward-compatibility-note", children: _jsx("div", { className: "gd-message-text", children: intl.formatMessage({ id: "mvf.dimensionality.backwardCompatibilityNote" }) }) })), isAttributePickerOpen && actualAnchor ? (_jsx(AttributePicker, { anchorElement: actualAnchor, onAdd: handleAddDimensionalityItems, onCancel: handleCloseAttributePicker, availableInsightItems: availableInsightItems, availableCatalogItems: availableCatalogItems, isLoadingCatalogDimensionality: isLoadingCatalogForPicker })) : null] }));
 });

package/esm/MeasureValueFilter/DropdownBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBody.d.ts","sourceRoot":"","sources":["../../src/MeasureValueFilter/DropdownBody.tsx"],"names":[],"mappings":"AAOA,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAChB,KAAK,2BAA2B,EAChC,KAAK,aAAa,EAKrB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,EAAiC,KAAK,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAC5F,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,uCAAuC,EAC5C,KAAK,mCAAmC,EACxC,KAAK,cAAc,EACtB,MAAM,cAAc,CAAC;AAGtB,UAAU,kBAAmB,SAAQ,uCAAuC;IACxE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,UAAU,EAAE,2BAA2B,EAAE,CAAC;IAC1C,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,mCAAmC,CAAC;IAC7C,QAAQ,CAAC,EAAE,mCAAmC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACvC,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAChG,sBAAsB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACnE,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,sBAAsB,GAAG,SAAS,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAoHD,eAAO,MAAM,oBAAoB,0DA44B/B,CAAC;AAEH,eAAO,MAAM,YAAY,0DAMvB,CAAC"}
+{"version":3,"file":"DropdownBody.d.ts","sourceRoot":"","sources":["../../src/MeasureValueFilter/DropdownBody.tsx"],"names":[],"mappings":"AAOA,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAChB,KAAK,2BAA2B,EAChC,KAAK,aAAa,EAKrB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,EAAiC,KAAK,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAC5F,OAAO,EACH,KAAK,mBAAmB,EACxB,KAAK,uCAAuC,EAC5C,KAAK,mCAAmC,EACxC,KAAK,cAAc,EACtB,MAAM,cAAc,CAAC;AAItB,UAAU,kBAAmB,SAAQ,uCAAuC;IACxE,QAAQ,EAAE,0BAA0B,CAAC;IACrC,UAAU,EAAE,2BAA2B,EAAE,CAAC;IAC1C,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,mCAAmC,CAAC;IAC7C,QAAQ,CAAC,EAAE,mCAAmC,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACvC,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C,yBAAyB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IAChG,sBAAsB,CAAC,EAAE,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACnE,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,sBAAsB,GAAG,SAAS,CAAC,CAAC;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAoHD,eAAO,MAAM,oBAAoB,0DA04B/B,CAAC;AAEH,eAAO,MAAM,YAAY,0DAMvB,CAAC"}

package/esm/MeasureValueFilter/DropdownBody.js

@@ -8,13 +8,14 @@ import { IntlWrapper } from "@gooddata/sdk-ui";
 import { UiIconButton, UiTooltip } 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 { DimensionalitySection } from "./DimensionalitySection.js";
 import { intervalIncludesZero } from "./helpers/intervalIncludesZero.js";
 import { MeasureValueFilterDropdownActions } from "./MeasureValueFilterDropdownActions.js";
 import { MeasureValueFilterDropdownHeader } from "./MeasureValueFilterDropdownHeader.js";
 import { OperatorDropdown } from "./OperatorDropdown.js";
 import { PreviewSection } from "./PreviewSection.js";
 import { TreatNullValuesAsZeroCheckbox } from "./TreatNullValuesAsZeroCheckbox.js";
+import { areDimensionalitySetsEqual, isEmptyDimensionalityInvalid } from "./useDimensionalityEditor.js";
 import { WarningMessageComponent } from "./WarningMessage.js";
 const DefaultValuePrecision = 6;
 /**
@@ -248,8 +249,7 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
         // disable the Apply button when the filter has no currently set dimensionality but insight has it
         // (e.g., non-headline insight that can have the dimensionality) but only when supported via ff
         if (isDimensionalityEnabled &&
-            state.dimensionality.length === 0 &&
-            (insightDimensionality?.length ?? 0) > 0) {
+            isEmptyDimensionalityInvalid(state.dimensionality, insightDimensionality)) {
             return true;
         }
         const effectiveConditions = enableMultipleConditions
@@ -276,8 +276,7 @@ export const DropdownBodyWithIntl = memo(function DropdownBodyWithIntl(props) {
         }
         // Check for empty dimensionality first
         if (isDimensionalityEnabled &&
-            state.dimensionality.length === 0 &&
-            (insightDimensionality?.length ?? 0) > 0) {
+            isEmptyDimensionalityInvalid(state.dimensionality, insightDimensionality)) {
             return intl.formatMessage({ id: "mvf.applyButton.tooltip.emptyDimensionality" });
         }
         // Check for invalid conditions

package/esm/MeasureValueFilter/useDimensionalityEditor.d.ts

@@ -0,0 +1,72 @@
+import { type MouseEvent, type ReactNode, type RefObject } from "react";
+import { type ObjRefInScope } from "@gooddata/sdk-model";
+import type { IDimensionalityItem } from "./typings.js";
+/**
+ * Compare two dimensionality arrays for equality (order-insensitive).
+ * Returns true if they contain the same identifiers regardless of order.
+ */
+export declare const areDimensionalitySetsEqual: (a: IDimensionalityItem[] | undefined, b: IDimensionalityItem[] | undefined) => boolean;
+/**
+ * An empty dimensionality selection is only valid when the insight itself has no attributes. When the
+ * insight has attributes they are always the fallback, so an explicitly empty selection must be blocked
+ * (the Apply button is disabled). Shared by the measure value filter and the ranking filter "out of" section.
+ */
+export declare const isEmptyDimensionalityInvalid: (selection: IDimensionalityItem[] | undefined, insightDimensionality: IDimensionalityItem[] | undefined) => boolean;
+interface IWithAddButtonProps {
+    children: ReactNode;
+    appendAddButton: boolean;
+    isDisabled: boolean;
+    tooltip: string;
+    buttonRef: RefObject<HTMLButtonElement | null>;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Test id of the inline "+" button - differs between the measure value filter and the ranking filter. */
+    dataTestId: string;
+}
+/**
+ * Renders the children and, when {@link IWithAddButtonProps.appendAddButton} is set, an inline "+" button
+ * that opens the attribute picker. Shared by the measure value filter dimensionality and the ranking filter
+ * "out of" sections.
+ */
+export declare function WithAddButton({ children, appendAddButton, isDisabled, tooltip, buttonRef, onClick, dataTestId }: IWithAddButtonProps): ReactNode;
+/**
+ * Inputs for {@link useDimensionalityEditor}. Neutral names so both the measure value filter (dimensionality)
+ * and the ranking filter ("out of" attributes) can use it.
+ */
+export interface IUseDimensionalityEditorParams {
+    /** The currently selected dimensionality items. */
+    items: IDimensionalityItem[];
+    /** Insight default items (from buckets), used for the reset action and the "From visualization" list. */
+    insightItems?: IDimensionalityItem[];
+    /** Catalog items, used when not lazily loaded via {@link IUseDimensionalityEditorParams.loadCatalog}. */
+    catalogItems?: IDimensionalityItem[];
+    /** Lazily loads catalog items valid for the current selection (on picker open). */
+    loadCatalog?: (items: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
+    /** Whether eagerly-provided catalog items are loading (only used when {@link loadCatalog} is absent). */
+    isLoadingCatalog?: boolean;
+    /** Called whenever the selection changes (add / remove / reset). */
+    onChange: (items: IDimensionalityItem[]) => void;
+}
+/**
+ * Shared state and logic for the dimensionality-items editor used by both the measure value filter
+ * dimensionality section and the ranking filter "out of" attributes section: the attribute-picker open/anchor
+ * state, the reset visibility, the available insight/catalog items (deduplicated against the current
+ * selection and against each other), and the add/remove/reset/open/close handlers. The two filter sections
+ * supply this with neutrally-named inputs and render their own (test-id / class / header) markup around it.
+ */
+export declare function useDimensionalityEditor({ items, insightItems, catalogItems, loadCatalog, isLoadingCatalog, onChange }: IUseDimensionalityEditorParams): {
+    inlineAddButtonRef: RefObject<HTMLButtonElement | null>;
+    isAttributePickerOpen: boolean;
+    actualAnchor: HTMLElement | null;
+    shouldShowResetButton: boolean;
+    availableInsightItems: IDimensionalityItem[];
+    availableCatalogItems: IDimensionalityItem[];
+    isLoadingCatalogForPicker: boolean | undefined;
+    handleRemove: (index: number) => void;
+    handleReset: () => void;
+    handleOpenInlinePicker: () => void;
+    handleOpenStandalonePicker: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+    handleClosePicker: () => void;
+    handleAddItems: (added: IDimensionalityItem[]) => void;
+};
+export {};
+//# sourceMappingURL=useDimensionalityEditor.d.ts.map

package/esm/MeasureValueFilter/useDimensionalityEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDimensionalityEditor.d.ts","sourceRoot":"","sources":["../../src/MeasureValueFilter/useDimensionalityEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,qBAAqB,CAAC;AAG1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGxD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yFAetC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,qHAG+C,CAAC;AAkBzF,UAAU,mBAAmB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACxD,0GAA0G;IAC1G,UAAU,EAAE,MAAM,CAAC;CACtB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,eAAe,EACf,UAAU,EACV,OAAO,EACP,SAAS,EACT,OAAO,EACP,UAAU,EACb,EAAE,mBAAmB,GAAG,SAAS,CAsBjC;AAED;;;GAGG;AACH,MAAM,WAAW,8BAA8B;IAC3C,mDAAmD;IACnD,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,yGAAyG;IACzG,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,yGAAyG;IACzG,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,mFAAmF;IACnF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACzE,yGAAyG;IACzG,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oEAAoE;IACpE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;CACpD;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACpC,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACX,EAAE,8BAA8B;;;;;;;;;;;;;;EAmHhC"}

package/esm/MeasureValueFilter/useDimensionalityEditor.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2025-2026 GoodData Corporation
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { areObjRefsEqual, objRefToString } from "@gooddata/sdk-model";
+import { Bubble, BubbleHoverTrigger, UiIconButton } from "@gooddata/sdk-ui-kit";
+import { useLazyCatalogDimensionality } from "./useLazyCatalogDimensionality.js";
+/**
+ * Compare two dimensionality arrays for equality (order-insensitive).
+ * Returns true if they contain the same identifiers regardless of order.
+ */
+export const areDimensionalitySetsEqual = (a, b) => {
+    const aItems = a ?? [];
+    const bItems = b ?? [];
+    if (aItems.length !== bItems.length) {
+        return false;
+    }
+    // Check that every item in 'a' exists in 'b'
+    return aItems.every((aItem) => bItems.some((bItem) => areObjRefsEqual(aItem.identifier, bItem.identifier)));
+};
+/**
+ * An empty dimensionality selection is only valid when the insight itself has no attributes. When the
+ * insight has attributes they are always the fallback, so an explicitly empty selection must be blocked
+ * (the Apply button is disabled). Shared by the measure value filter and the ranking filter "out of" section.
+ */
+export const isEmptyDimensionalityInvalid = (selection, insightDimensionality) => (selection?.length ?? 0) === 0 && (insightDimensionality?.length ?? 0) > 0;
+const areDimensionalityItemsDeepEqual = (availableItem, filterItem) => {
+    if (availableItem.ref && filterItem.ref) {
+        return areObjRefsEqual(availableItem.ref, filterItem.ref);
+    }
+    if (availableItem.ref) {
+        return areObjRefsEqual(availableItem.ref, filterItem.identifier);
+    }
+    if (filterItem.ref) {
+        return areObjRefsEqual(availableItem.identifier, filterItem.ref);
+    }
+    return areObjRefsEqual(availableItem.identifier, filterItem.identifier);
+};
+/**
+ * Renders the children and, when {@link IWithAddButtonProps.appendAddButton} is set, an inline "+" button
+ * that opens the attribute picker. Shared by the measure value filter dimensionality and the ranking filter
+ * "out of" sections.
+ */
+export function WithAddButton({ children, appendAddButton, isDisabled, tooltip, buttonRef, onClick, dataTestId, }) {
+    if (!appendAddButton) {
+        return children;
+    }
+    return (_jsxs("div", { className: "gd-mvf-dimensionality-add-wrapper", children: [children, _jsxs(BubbleHoverTrigger, { children: [
+                    _jsx(UiIconButton, { ref: buttonRef, icon: "plus", size: "small", variant: "tertiary", isDisabled: isDisabled, onClick: onClick, dataTestId: dataTestId }), _jsx(Bubble, { alignPoints: [{ align: "bc tc" }], children: tooltip })
+                ] })
+        ] }));
+}
+/**
+ * Shared state and logic for the dimensionality-items editor used by both the measure value filter
+ * dimensionality section and the ranking filter "out of" attributes section: the attribute-picker open/anchor
+ * state, the reset visibility, the available insight/catalog items (deduplicated against the current
+ * selection and against each other), and the add/remove/reset/open/close handlers. The two filter sections
+ * supply this with neutrally-named inputs and render their own (test-id / class / header) markup around it.
+ */
+export function useDimensionalityEditor({ items, insightItems, catalogItems, loadCatalog, isLoadingCatalog, onChange, }) {
+    // Ref for the inline add button (the "+" next to the last tag).
+    const inlineAddButtonRef = useRef(null);
+    // Attribute picker state - whether it is open and which button (inline vs standalone) triggered it.
+    const [isAttributePickerOpen, setIsAttributePickerOpen] = useState(false);
+    const [anchorType, setAnchorType] = useState("standalone");
+    const [standaloneAnchor, setStandaloneAnchor] = useState(null);
+    const { lazyCatalogDimensionality, isLoadingLazyCatalogDimensionality } = useLazyCatalogDimensionality({
+        isOpen: isAttributePickerOpen,
+        dimensionality: items,
+        loadCatalogDimensionality: loadCatalog,
+    });
+    // Reset is offered whenever the current selection differs from the insight defaults (order-insensitive).
+    const shouldShowResetButton = useMemo(() => !areDimensionalitySetsEqual(items, insightItems), [items, insightItems]);
+    // Keep insight items and catalog items separate so the picker does not need to guess their origin.
+    const availableInsightItems = useMemo(() => (insightItems ?? []).filter((availableItem) => !items.some((filterItem) => areDimensionalityItemsDeepEqual(availableItem, filterItem))), [insightItems, items]);
+    const availableCatalogItems = useMemo(() => {
+        const effectiveCatalog = loadCatalog ? (lazyCatalogDimensionality ?? []) : (catalogItems ?? []);
+        const selectedFilteredOut = effectiveCatalog.filter((availableItem) => !items.some((filterItem) => areDimensionalityItemsDeepEqual(availableItem, filterItem)));
+        // Prevent duplicates between the "From visualization" and catalog lists. Insight items may be
+        // LocalIdRefs; when available, use `ref` (display-form ObjRef) for stable deduplication against
+        // catalog candidates (which use ObjRefs).
+        const insightRefKeys = new Set(availableInsightItems
+            .map((i) => (i.ref ? objRefToString(i.ref) : undefined))
+            .filter((x) => !!x));
+        const insightTitlesWithoutRef = new Set((insightItems ?? []).filter((i) => !i.ref).map((i) => i.title));
+        return selectedFilteredOut.filter((item) => {
+            const itemKey = objRefToString(item.identifier);
+            if (insightRefKeys.has(itemKey)) {
+                return false;
+            }
+            // Fallback for environments where insight items do not provide refs.
+            return !insightTitlesWithoutRef.has(item.title);
+        });
+    }, [catalogItems, items, insightItems, availableInsightItems, lazyCatalogDimensionality, loadCatalog]);
+    const handleRemove = useCallback((index) => {
+        onChange(items.filter((_, i) => i !== index));
+    }, [items, onChange]);
+    const handleReset = useCallback(() => {
+        onChange(insightItems ?? []);
+    }, [insightItems, onChange]);
+    const handleOpenInlinePicker = useCallback(() => {
+        setAnchorType("inline");
+        setIsAttributePickerOpen(true);
+    }, []);
+    const handleOpenStandalonePicker = useCallback((event) => {
+        setAnchorType("standalone");
+        setStandaloneAnchor(event.currentTarget);
+        setIsAttributePickerOpen(true);
+    }, []);
+    const handleClosePicker = useCallback(() => {
+        setIsAttributePickerOpen(false);
+        setStandaloneAnchor(null);
+    }, []);
+    const handleAddItems = useCallback((added) => {
+        onChange([...items, ...added]);
+        setIsAttributePickerOpen(false);
+        setStandaloneAnchor(null);
+    }, [items, onChange]);
+    const actualAnchor = anchorType === "inline" ? inlineAddButtonRef.current : standaloneAnchor;
+    const isLoadingCatalogForPicker = loadCatalog ? isLoadingLazyCatalogDimensionality : isLoadingCatalog;
+    return {
+        inlineAddButtonRef,
+        isAttributePickerOpen,
+        actualAnchor,
+        shouldShowResetButton,
+        availableInsightItems,
+        availableCatalogItems,
+        isLoadingCatalogForPicker,
+        handleRemove,
+        handleReset,
+        handleOpenInlinePicker,
+        handleOpenStandalonePicker,
+        handleClosePicker,
+        handleAddItems,
+    };
+}

package/esm/RankingFilter/RankingAttributesSection.d.ts

@@ -0,0 +1,44 @@
+import { type ObjRefInScope } from "@gooddata/sdk-model";
+import type { IDimensionalityItem } from "../MeasureValueFilter/typings.js";
+/**
+ * @internal
+ */
+export interface IRankingAttributesSectionProps {
+    /**
+     * Current "out of" attribute items in the filter.
+     */
+    attributes: IDimensionalityItem[];
+    /**
+     * Insight default attribute items (from buckets).
+     */
+    insightAttributes?: IDimensionalityItem[];
+    /**
+     * Catalog attribute items (from computeValidObjects).
+     */
+    catalogAttributes?: IDimensionalityItem[];
+    /**
+     * Optional callback to load catalog attribute items lazily (e.g. on picker open).
+     */
+    loadCatalogAttributes?: (attributes: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
+    /**
+     * Whether catalog attributes are currently being loaded.
+     */
+    isLoadingCatalogAttributes?: boolean;
+    /**
+     * Callback when the "out of" attributes change.
+     */
+    onAttributesChange: (attributes: IDimensionalityItem[]) => void;
+    /**
+     * Whether the filter already has its own "out of" attributes (or the insight has none). When false, the
+     * ranking currently follows the visualization's attributes and an informational note is shown - mirroring
+     * the measure value filter dimensionality. Defaults to true (no note).
+     */
+    isMigratedFilter?: boolean;
+}
+/**
+ * @internal
+ * "Out of" attributes section for the ranking filter dropdown. Allows users to rank "out of" the insight's
+ * own attributes (default) or custom attributes picked from the catalog, with a reset to defaults.
+ */
+export declare const RankingAttributesSection: import("react").NamedExoticComponent<IRankingAttributesSectionProps>;
+//# sourceMappingURL=RankingAttributesSection.d.ts.map

package/esm/RankingFilter/RankingAttributesSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RankingAttributesSection.d.ts","sourceRoot":"","sources":["../../src/RankingFilter/RankingAttributesSection.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAkB,MAAM,qBAAqB,CAAC;AAIzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAG5E;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC3C;;OAEG;IACH,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C;;OAEG;IACH,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;IACxF;;OAEG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,kBAAkB,EAAE,CAAC,UAAU,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,sEA0InC,CAAC"}

package/esm/RankingFilter/RankingAttributesSection.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2025-2026 GoodData Corporation
+import { memo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { objRefToString } from "@gooddata/sdk-model";
+import { Bubble, BubbleHoverTrigger, UiButton, UiIconButton, UiTag } from "@gooddata/sdk-ui-kit";
+import { AttributePicker } from "../MeasureValueFilter/AttributePicker.js";
+import { WithAddButton, useDimensionalityEditor } from "../MeasureValueFilter/useDimensionalityEditor.js";
+/**
+ * @internal
+ * "Out of" attributes section for the ranking filter dropdown. Allows users to rank "out of" the insight's
+ * own attributes (default) or custom attributes picked from the catalog, with a reset to defaults.
+ */
+export const RankingAttributesSection = memo(function RankingAttributesSection({ attributes, insightAttributes, catalogAttributes, loadCatalogAttributes, isLoadingCatalogAttributes, onAttributesChange, isMigratedFilter = true, }) {
+    const intl = useIntl();
+    const { inlineAddButtonRef, isAttributePickerOpen, actualAnchor, shouldShowResetButton, availableInsightItems, availableCatalogItems, isLoadingCatalogForPicker, handleRemove: handleRemoveAttribute, handleReset: handleResetAttributes, handleOpenInlinePicker: handleOpenInlineAttributePicker, handleOpenStandalonePicker: handleOpenStandaloneAttributePicker, handleClosePicker: handleCloseAttributePicker, handleAddItems: handleAddAttributeItems, } = useDimensionalityEditor({
+        items: attributes,
+        insightItems: insightAttributes,
+        catalogItems: catalogAttributes,
+        loadCatalog: loadCatalogAttributes,
+        isLoadingCatalog: isLoadingCatalogAttributes,
+        onChange: onAttributesChange,
+    });
+    const addButtonTooltip = intl.formatMessage({ id: "mvf.dimensionality.addButton.tooltip" });
+    const resetButtonTooltip = intl.formatMessage({ id: "mvf.dimensionality.reset.tooltip" });
+    return (_jsxs("div", { className: "gd-mvf-dimensionality gd-rf-attributes s-rf-attributes", "data-testid": "rf-attributes", children: [
+            _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.outOf" }) }), attributes.length > 0 ? (_jsxs("div", { className: "gd-mvf-dimensionality-items", children: [attributes.map((item, index) => {
+                        const isDateItem = item.type === "chronologicalDate" || item.type === "genericDate";
+                        const icon = isDateItem ? "date" : "ldmAttribute";
+                        const iconColor = isDateItem ? "primary" : "warning";
+                        return (_jsx(WithAddButton, { appendAddButton: index === attributes.length - 1, isDisabled: false, tooltip: addButtonTooltip, buttonRef: inlineAddButtonRef, onClick: handleOpenInlineAttributePicker, dataTestId: "rf-attributes-plus", children: _jsx("div", { className: "gd-mvf-dimensionality-tag-wrapper", children: _jsx(UiTag, { variant: "outlined", size: "large", iconBefore: icon, iconBeforeColor: iconColor, label: item.title, isDeletable: true, onDelete: () => handleRemoveAttribute(index), dataTestId: `rf-attributes-tag-${index}` }) }) }, objRefToString(item.identifier)));
+                    }), shouldShowResetButton ? (_jsx("div", { className: "gd-mvf-dimensionality-reset-button", children: _jsxs(BubbleHoverTrigger, { children: [
+                                _jsx(UiIconButton, { icon: "history", size: "small", variant: "tertiary", onClick: handleResetAttributes, label: resetButtonTooltip, dataTestId: "rf-attributes-reset" }), _jsx(Bubble, { alignPoints: [{ align: "cr cl" }], children: resetButtonTooltip })
+                            ] }) })) : null] })) : (_jsxs("div", { className: "gd-mvf-dimensionality-empty-actions", children: [
+                    _jsx(UiButton, { label: intl.formatMessage({ id: "mvf.dimensionality.addAttributes" }), variant: "tertiary", size: "small", iconBefore: "plus", onClick: handleOpenStandaloneAttributePicker }), shouldShowResetButton ? (_jsxs(BubbleHoverTrigger, { children: [
+                            _jsx(UiButton, { size: "small", variant: "tertiary", iconBefore: "history", label: intl.formatMessage({ id: "mvf.dimensionality.reset" }), onClick: handleResetAttributes, dataTestId: "rf-attributes-reset" }), _jsx(Bubble, { alignPoints: [{ align: "cr cl" }], children: resetButtonTooltip })
+                        ] })) : null] })), isMigratedFilter ? null : (_jsx("div", { role: "status", "aria-live": "polite", className: "gd-message information gd-rf-attributes-backward-compatibility-message", "data-testid": "rf-backward-compatibility-note", children: _jsx("div", { className: "gd-message-text", children: intl.formatMessage({ id: "rankingFilter.outOf.backwardCompatibilityNote" }) }) })), isAttributePickerOpen && actualAnchor ? (_jsx(AttributePicker, { anchorElement: actualAnchor, onAdd: handleAddAttributeItems, onCancel: handleCloseAttributePicker, availableInsightItems: availableInsightItems, availableCatalogItems: availableCatalogItems, isLoadingCatalogDimensionality: isLoadingCatalogForPicker })) : null] }));
+});

package/esm/RankingFilter/RankingFilterDropdown.d.ts

@@ -1,6 +1,7 @@
 import { type IRankingFilter, type ObjRefInScope } from "@gooddata/sdk-model";
+import { type IDimensionalityItem } from "../MeasureValueFilter/typings.js";
 import { type IAttributeDropdownItem, type ICustomGranularitySelection, type IMeasureDropdownItem, type RenderMeasureDropdownBody } from "./types.js";
-export declare const prepareRankingFilterState: (filter: IRankingFilter) => IRankingFilter;
+export declare const prepareRankingFilterState: (filter: IRankingFilter, keepAllAttributes?: boolean) => IRankingFilter;
 /**
  * @beta
  */
@@ -22,6 +23,15 @@ export interface IRankingFilterDropdownProps {
      * with a custom body (e.g. a grouped, searchable catalog picker).
      */
     renderMeasureDropdownBody?: RenderMeasureDropdownBody;
+    isAttributesSectionEnabled?: boolean;
+    /** Current "out of" attributes (titled), seeded by the host (filter's own, or insight defaults). */
+    attributes?: IDimensionalityItem[];
+    /** Insight default "out of" attributes (for the reset action). */
+    insightAttributes?: IDimensionalityItem[];
+    /** Catalog "out of" attributes (used when not lazily loaded via loadCatalogAttributes). */
+    catalogAttributes?: IDimensionalityItem[];
+    /** Lazily loads catalog "out of" attributes valid for the current selection (on picker open). */
+    loadCatalogAttributes?: (attributes: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
 }
 /**
  * @beta

package/esm/RankingFilter/RankingFilterDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RankingFilterDropdown.d.ts","sourceRoot":"","sources":["../../src/RankingFilter/RankingFilterDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAK9E,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EACjC,MAAM,YAAY,CAAC;AAKpB,eAAO,MAAM,yBAAyB,4CAiBrC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,cAAc,EAAE,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,0BAA0B,CAAC,EAAE,2BAA2B,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;CACzD;AAkDD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,2BAA2B,2CAMvE"}
+{"version":3,"file":"RankingFilterDropdown.d.ts","sourceRoot":"","sources":["../../src/RankingFilter/RankingFilterDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAI9E,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAG5E,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EACjC,MAAM,YAAY,CAAC;AAKpB,eAAO,MAAM,yBAAyB,yEAqBrC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,cAAc,EAAE,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAChC,0BAA0B,CAAC,EAAE,2BAA2B,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IAItD,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,oGAAoG;IACpG,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;CAC3F;AA8DD;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,2BAA2B,2CAMvE"}

package/esm/RankingFilter/RankingFilterDropdown.js

@@ -6,10 +6,11 @@ import { Overlay } from "@gooddata/sdk-ui-kit";
 import { RankingFilterDropdownBody } from "./RankingFilterDropdownBody.js";
 const alignPoints = ["bl tl", "tl bl", "br tr", "tr br"];
 const DROPDOWN_ALIGNMENTS = alignPoints.map((align) => ({ align, offset: { x: 1, y: 0 } }));
-export const prepareRankingFilterState = (filter) => {
+export const prepareRankingFilterState = (filter, keepAllAttributes = false) => {
     const { measure, attributes, operator, value, applyOnResult, strictLimitOfRows } = filter.rankingFilter;
-    const firstAttribute = attributes?.[0];
-    const attributesProp = firstAttribute ? { attributes: [firstAttribute] } : {};
+    // The legacy single-attribute UI keeps only the first attribute; the multi-attribute mode keeps them all.
+    const keptAttributes = keepAllAttributes ? attributes : attributes?.slice(0, 1);
+    const attributesProp = keptAttributes?.length ? { attributes: keptAttributes } : {};
     const applyOnResultProp = applyOnResult === undefined ? {} : { applyOnResult };
     const strictLimitOfRowsProp = strictLimitOfRows === undefined ? {} : { strictLimitOfRows };
     return {
@@ -23,13 +24,13 @@ export const prepareRankingFilterState = (filter) => {
         },
     };
 };
-function RankingFilterDropdownComponent({ measureItems, attributeItems, filter, onApply, onCancel = () => { }, anchorEl, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf, enableRankingStrictLimit, renderMeasureDropdownBody, }) {
-    const [rankingFilter, setRankingFilter] = useState(prepareRankingFilterState(filter));
+function RankingFilterDropdownComponent({ measureItems, attributeItems, filter, onApply, onCancel = () => { }, anchorEl, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf, enableRankingStrictLimit, renderMeasureDropdownBody, isAttributesSectionEnabled, attributes, insightAttributes, catalogAttributes, loadCatalogAttributes, }) {
+    const [rankingFilter, setRankingFilter] = useState(prepareRankingFilterState(filter, !!isAttributesSectionEnabled));
     const handleApply = (rankingFilter) => {
         setRankingFilter(rankingFilter);
         onApply(rankingFilter);
     };
-    return (_jsx(Overlay, { closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, alignTo: anchorEl, alignPoints: DROPDOWN_ALIGNMENTS, onClose: onCancel, ignoreClicksOnByClass: [".gd-rf-inner-overlay-dropdown"], children: _jsx(RankingFilterDropdownBody, { measureItems: measureItems, attributeItems: attributeItems, filter: rankingFilter, onApply: handleApply, onCancel: onCancel, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, customGranularitySelection: customGranularitySelection, enableRankingWithMvf: enableRankingWithMvf, enableRankingStrictLimit: enableRankingStrictLimit, renderMeasureDropdownBody: renderMeasureDropdownBody }) }));
+    return (_jsx(Overlay, { closeOnOutsideClick: true, closeOnParentScroll: true, closeOnMouseDrag: true, alignTo: anchorEl, alignPoints: DROPDOWN_ALIGNMENTS, onClose: onCancel, ignoreClicksOnByClass: [".gd-rf-inner-overlay-dropdown"], children: _jsx(RankingFilterDropdownBody, { measureItems: measureItems, attributeItems: attributeItems, filter: rankingFilter, onApply: handleApply, onCancel: onCancel, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, customGranularitySelection: customGranularitySelection, enableRankingWithMvf: enableRankingWithMvf, enableRankingStrictLimit: enableRankingStrictLimit, renderMeasureDropdownBody: renderMeasureDropdownBody, isAttributesSectionEnabled: isAttributesSectionEnabled, attributes: attributes, insightAttributes: insightAttributes, catalogAttributes: catalogAttributes, loadCatalogAttributes: loadCatalogAttributes }) }));
 }
 /**
  * @beta

package/esm/RankingFilter/RankingFilterDropdownBody.d.ts

@@ -1,4 +1,5 @@
 import { type IRankingFilter, type ObjRefInScope } from "@gooddata/sdk-model";
+import { type IDimensionalityItem } from "../MeasureValueFilter/typings.js";
 import { type IAttributeDropdownItem, type ICustomGranularitySelection, type IMeasureDropdownItem, type RenderMeasureDropdownBody } from "./types.js";
 interface IRankingFilterDropdownBodyComponentProps {
     measureItems: IMeasureDropdownItem[];
@@ -12,7 +13,20 @@ interface IRankingFilterDropdownBodyComponentProps {
     enableRankingWithMvf?: boolean;
     enableRankingStrictLimit?: boolean;
     renderMeasureDropdownBody?: RenderMeasureDropdownBody;
+    isAttributesSectionEnabled?: boolean;
+    /**
+     * Current "out of" attributes (titled), seeded by the host: the filter's own attributes, or the insight
+     * defaults when the filter has none ("reuses insight attributes"). Used as the initial selection and the
+     * Apply baseline; carrying titles lets the preview render them (including catalog attributes).
+     */
+    attributes?: IDimensionalityItem[];
+    /** Insight default "out of" attributes (bucket attributes/dates), used for the reset action. */
+    insightAttributes?: IDimensionalityItem[];
+    /** Catalog "out of" attributes (used when not lazily loaded via loadCatalogAttributes). */
+    catalogAttributes?: IDimensionalityItem[];
+    /** Lazily loads catalog "out of" attributes valid for the current selection (on picker open). */
+    loadCatalogAttributes?: (attributes: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
 }
-export declare function RankingFilterDropdownBody({ measureItems, attributeItems, filter, onApply, onCancel, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf, enableRankingStrictLimit, renderMeasureDropdownBody }: IRankingFilterDropdownBodyComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function RankingFilterDropdownBody({ measureItems, attributeItems, filter, onApply, onCancel, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf, enableRankingStrictLimit, renderMeasureDropdownBody, isAttributesSectionEnabled, attributes, insightAttributes, catalogAttributes, loadCatalogAttributes }: IRankingFilterDropdownBodyComponentProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RankingFilterDropdownBody.d.ts.map

package/esm/RankingFilter/RankingFilterDropdownBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RankingFilterDropdownBody.d.ts","sourceRoot":"","sources":["../../src/RankingFilter/RankingFilterDropdownBody.tsx"],"names":[],"mappings":"AAQA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,aAAa,EAGrB,MAAM,qBAAqB,CAAC;AAO7B,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EACjC,MAAM,YAAY,CAAC;AAwCpB,UAAU,wCAAwC;IAC9C,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,cAAc,EAAE,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,0BAA0B,CAAC,EAAE,2BAA2B,CAAC;IACzD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;CACzD;AAED,wBAAgB,yBAAyB,CAAC,EACtC,YAAY,EACZ,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAA4B,EAC5B,wBAAgC,EAChC,yBAAyB,EAC5B,EAAE,wCAAwC,2CA4K1C"}
+{"version":3,"file":"RankingFilterDropdownBody.d.ts","sourceRoot":"","sources":["../../src/RankingFilter/RankingFilterDropdownBody.tsx"],"names":[],"mappings":"AAQA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,aAAa,EAGrB,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAW5E,OAAO,EACH,KAAK,sBAAsB,EAC3B,KAAK,2BAA2B,EAChC,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EACjC,MAAM,YAAY,CAAC;AAwCpB,UAAU,wCAAwC;IAC9C,YAAY,EAAE,oBAAoB,EAAE,CAAC;IACrC,cAAc,EAAE,sBAAsB,EAAE,CAAC;IACzC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,0BAA0B,CAAC,EAAE,2BAA2B,CAAC;IACzD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,yBAAyB,CAAC,EAAE,yBAAyB,CAAC;IAItD,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,gGAAgG;IAChG,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC1C,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,OAAO,CAAC,mBAAmB,EAAE,CAAC,CAAC;CAC3F;AAED,wBAAgB,yBAAyB,CAAC,EACtC,YAAY,EACZ,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAA4B,EAC5B,wBAAgC,EAChC,yBAAyB,EACzB,0BAAkC,EAClC,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACxB,EAAE,wCAAwC,2CA+P1C"}

package/esm/RankingFilter/RankingFilterDropdownBody.js

@@ -1,15 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2020-2026 GoodData Corporation
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import cx from "classnames";
 import { isEmpty, isEqual, xorWith } from "lodash-es";
 import { FormattedMessage, useIntl } from "react-intl";
 import { areObjRefsEqual, newRankingFilter, } from "@gooddata/sdk-model";
 import { Bubble, BubbleHoverTrigger, Button } from "@gooddata/sdk-ui-kit";
+import { areDimensionalitySetsEqual, isEmptyDimensionalityInvalid, } from "../MeasureValueFilter/useDimensionalityEditor.js";
 import { AttributeDropdown } from "./AttributeDropdown/AttributeDropdown.js";
 import { MeasureDropdown } from "./MeasureDropdown/MeasureDropdown.js";
 import { OperatorDropdown } from "./OperatorDropdown/OperatorDropdown.js";
 import { Preview } from "./Preview.js";
+import { RankingAttributesSection } from "./RankingAttributesSection.js";
 import { ValueDropdown } from "./ValueDropdown/ValueDropdown.js";
 const isApplyButtonDisabled = (filter, filterState, enableRankingWithMvf, applyOnResult, enableRankingStrictLimit, strictLimitOfRows) => {
     const rankingFilter = filter.rankingFilter;
@@ -30,13 +32,38 @@ const isApplyButtonDisabled = (filter, filterState, enableRankingWithMvf, applyO
         applyOnResultNotChanged &&
         strictLimitOfRowsNotChanged);
 };
-export function RankingFilterDropdownBody({ measureItems, attributeItems, filter, onApply, onCancel = () => { }, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf = false, enableRankingStrictLimit = false, renderMeasureDropdownBody, }) {
+export function RankingFilterDropdownBody({ measureItems, attributeItems, filter, onApply, onCancel = () => { }, onDropDownItemMouseOver, onDropDownItemMouseOut, customGranularitySelection, enableRankingWithMvf = false, enableRankingStrictLimit = false, renderMeasureDropdownBody, isAttributesSectionEnabled = false, attributes, insightAttributes, catalogAttributes, loadCatalogAttributes, }) {
     const intl = useIntl();
     const rankingFilter = filter.rankingFilter;
     const [value, setValue] = useState(rankingFilter.value);
     const [operator, setOperator] = useState(rankingFilter.operator);
     const [measure, setMeasureIdentifier] = useState(rankingFilter.measure);
-    const [attribute, setAttributeIdentifier] = useState(rankingFilter.attributes?.[0]);
+    // Legacy mode edits a single attribute (by ref); the custom section edits many titled attributes.
+    // In multi-attribute mode the host seeds the selection (filter's own attributes or, when it has none,
+    // the insight defaults — "reuses the insight attributes"). The titles travel with the items so the
+    // preview can render them; nothing is persisted until the user changes the seeded selection.
+    const [attribute, setAttribute] = useState(rankingFilter.attributes?.[0]);
+    const [attributeItemsState, setAttributeItemsState] = useState(attributes ?? []);
+    // The host seeds the "out of" selection from the filter / insight defaults, which can resolve after this
+    // dropdown has mounted. Re-seed when that prop changes, but only while the user has not diverged from the
+    // previously seeded set, so a late-arriving seed is reflected without clobbering in-progress edits.
+    const seededAttributesRef = useRef(attributes);
+    useEffect(() => {
+        if (seededAttributesRef.current === attributes) {
+            return;
+        }
+        const previousSeed = seededAttributesRef.current ?? [];
+        seededAttributesRef.current = attributes;
+        setAttributeItemsState((current) => areDimensionalitySetsEqual(current, previousSeed) ? (attributes ?? []) : current);
+    }, [attributes]);
+    // Mirrors the measure value filter: when the filter has no "out of" attributes of its own but the insight
+    // has some, the ranking currently follows the visualization's attributes and an informational note is
+    // shown. The note is dismissed once the user changes the selection (the filter then carries its own set).
+    const [isMigratedFilter, setIsMigratedFilter] = useState((rankingFilter.attributes?.length ?? 0) > 0 || (insightAttributes?.length ?? 0) === 0);
+    const handleAttributesChange = useCallback((items) => {
+        setAttributeItemsState(items);
+        setIsMigratedFilter(true);
+    }, []);
     const [applyOnResult, setApplyOnResult] = useState(rankingFilter.applyOnResult ?? true);
     // A new filter prioritizes the strict ("+ flag") condition; an existing filter keeps its stored value.
     const [strictLimitOfRows, setStrictLimitOfRows] = useState(rankingFilter.strictLimitOfRows ?? false);
@@ -44,11 +71,33 @@ export function RankingFilterDropdownBody({ measureItems, attributeItems, filter
         setOperator(selectedOperator);
         setStrictLimitOfRows(selectedStrictLimitOfRows);
     }, []);
+    // Apply baseline for the "out of" attributes: the seeded selection in multi mode, the stored filter
+    // otherwise. Keeping the seeded set as the baseline means reusing the insight defaults (unchanged)
+    // leaves Apply disabled and persists nothing.
+    const baselineAttributes = isAttributesSectionEnabled
+        ? (attributes ?? []).map((item) => item.identifier)
+        : (rankingFilter.attributes ?? []);
+    const isAttributesSelectionInvalid = isAttributesSectionEnabled && isEmptyDimensionalityInvalid(attributeItemsState, insightAttributes);
     const selectedMeasure = measureItems.find((item) => areObjRefsEqual(item.ref, measure));
     const selectedAttribute = attributeItems.find((item) => areObjRefsEqual(item.ref, attribute));
+    // The preview reflects the live "out of" attributes. Multi-attribute titles are carried by the items
+    // (catalog-aware), joined into a single preview label.
+    const previewAttribute = isAttributesSectionEnabled
+        ? attributeItemsState.length > 0
+            ? {
+                title: attributeItemsState.map((item) => item.title).join(", "),
+                ref: attributeItemsState[0].identifier,
+            }
+            : undefined
+        : selectedAttribute;
     const getFilterState = useCallback(() => {
-        const baseFilter = attribute
-            ? newRankingFilter(measure, [attribute], operator, value)
+        const attributeRefs = isAttributesSectionEnabled
+            ? attributeItemsState.map((item) => item.identifier)
+            : attribute
+                ? [attribute]
+                : [];
+        const baseFilter = attributeRefs.length
+            ? newRankingFilter(measure, attributeRefs, operator, value)
             : newRankingFilter(measure, operator, value);
         // Add applyOnResult / strictLimitOfRows only when their flags are enabled
         return {
@@ -60,6 +109,8 @@ export function RankingFilterDropdownBody({ measureItems, attributeItems, filter
         };
     }, [
         measure,
+        isAttributesSectionEnabled,
+        attributeItemsState,
         attribute,
         operator,
         value,
@@ -75,19 +126,31 @@ export function RankingFilterDropdownBody({ measureItems, attributeItems, filter
     const handleApplyOnResultChange = useCallback((event) => {
         setApplyOnResult(event.target.checked);
     }, [setApplyOnResult]);
-    return (_jsxs("div", { className: "gd-dialog gd-dropdown overlay gd-rf-dropdown-body s-rf-dropdown-body", children: [
-            _jsx("div", { className: "gd-rf-dropdown-header", children: _jsx(FormattedMessage, { id: "rankingFilter.topBottom" }) }), _jsxs("div", { className: "gd-rf-dropdown-section", children: [enableRankingStrictLimit ? (_jsx("div", { className: "gd-rf-dropdown-section-title gd-rf-dropdown-section-title-first", children: _jsx(FormattedMessage, { id: "rankingFilter.condition" }) })) : null, _jsxs("div", { className: cx("gd-rf-value-section", {
+    return (_jsxs("div", { className: "gd-dialog gd-dropdown overlay gd-rf-dropdown-body s-rf-dropdown-body", children: [isAttributesSectionEnabled ? null : (_jsx("div", { className: "gd-rf-dropdown-header", children: _jsx(FormattedMessage, { id: "rankingFilter.topBottom" }) })), _jsxs("div", { className: "gd-rf-dropdown-section", children: [enableRankingStrictLimit ? (_jsx("div", { className: "gd-rf-dropdown-section-title gd-rf-dropdown-section-title-first", children: _jsx(FormattedMessage, { id: "rankingFilter.condition" }) })) : null, _jsxs("div", { className: cx("gd-rf-value-section", {
                             "gd-rf-value-section--strict-limit": enableRankingStrictLimit,
                         }), children: [
                             _jsx(OperatorDropdown, { selectedValue: operator, selectedStrictLimitOfRows: strictLimitOfRows, enableRankingStrictLimit: enableRankingStrictLimit, limitValue: value, onSelect: handleConditionSelect }), _jsx(ValueDropdown, { selectedValue: value, onSelect: setValue }), enableRankingStrictLimit ? null : (_jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [
                                     _jsx("span", { className: "gd-icon-circle-question gd-rf-value-tooltip-icon s-rf-value-tooltip-icon" }), _jsx(Bubble, { className: `bubble-primary gd-rf-tooltip-bubble s-rf-value-tooltip`, alignPoints: [{ align: "cr cl" }, { align: "cl cr" }], children: _jsx(FormattedMessage, { id: "rankingFilter.valueTooltip" }) })
-                                ] }))] }), _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.outOf" }) }), _jsx(AttributeDropdown, { items: attributeItems, selectedItemRef: attribute, onSelect: setAttributeIdentifier, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, customGranularitySelection: customGranularitySelection }), _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.basedOn" }) }), _jsx(MeasureDropdown, { items: measureItems, selectedItemRef: measure, onSelect: setMeasureIdentifier, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, renderMeasureDropdownBody: renderMeasureDropdownBody }), enableRankingWithMvf ? (_jsx("div", { className: "gd-rf-apply-on-result", children: _jsxs("label", { className: "input-checkbox-label gd-rf-apply-on-result-checkbox", "data-testid": "rf-apply-on-result", children: [
+                                ] }))] }), isAttributesSectionEnabled ? (
+                    // The section renders its own "Out of" header, chips, catalog picker and reset.
+                    _jsx(RankingAttributesSection, { attributes: attributeItemsState, insightAttributes: insightAttributes, catalogAttributes: catalogAttributes, loadCatalogAttributes: loadCatalogAttributes, onAttributesChange: handleAttributesChange, isMigratedFilter: isMigratedFilter })) : (_jsxs(_Fragment, { children: [
+                            _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.outOf" }) }), _jsx(AttributeDropdown, { items: attributeItems, selectedItemRef: attribute, onSelect: setAttribute, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, customGranularitySelection: customGranularitySelection })
+                        ] })), _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.basedOn" }) }), _jsx(MeasureDropdown, { items: measureItems, selectedItemRef: measure, onSelect: setMeasureIdentifier, onDropDownItemMouseOver: onDropDownItemMouseOver, onDropDownItemMouseOut: onDropDownItemMouseOut, renderMeasureDropdownBody: renderMeasureDropdownBody }), enableRankingWithMvf ? (_jsx("div", { className: "gd-rf-apply-on-result", children: _jsxs("label", { className: "input-checkbox-label gd-rf-apply-on-result-checkbox", "data-testid": "rf-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: "rankingFilter.applyOnResultLabel",
                                     }) })
-                            ] }) })) : null, _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.preview" }) }), _jsx(Preview, { measure: selectedMeasure, attribute: selectedAttribute, operator: operator, value: value, enableRankingStrictLimit: enableRankingStrictLimit, strictLimitOfRows: strictLimitOfRows })
+                            ] }) })) : null, _jsx("div", { className: "gd-rf-dropdown-section-title", children: _jsx(FormattedMessage, { id: "rankingFilter.preview" }) }), _jsx(Preview, { measure: selectedMeasure, attribute: previewAttribute, operator: operator, value: value, enableRankingStrictLimit: enableRankingStrictLimit, strictLimitOfRows: strictLimitOfRows })
                 ] }), _jsxs("div", { className: "gd-rf-dropdown-footer", children: [
-                    _jsx(Button, { className: "gd-button-secondary gd-button-small s-rf-dropdown-cancel", onClick: () => onCancel(), value: intl.formatMessage({ id: "cancel" }) }), _jsx(Button, { className: "gd-button-action gd-button-small s-rf-dropdown-apply", onClick: applyHandler, value: intl.formatMessage({ id: "apply" }), disabled: isApplyButtonDisabled(filter, getFilterState(), enableRankingWithMvf, applyOnResult, enableRankingStrictLimit, strictLimitOfRows) })
+                    _jsx(Button, { className: "gd-button-secondary gd-button-small s-rf-dropdown-cancel", onClick: () => onCancel(), value: intl.formatMessage({ id: "cancel" }) }), _jsx(Button, { className: "gd-button-action gd-button-small s-rf-dropdown-apply", onClick: applyHandler, value: intl.formatMessage({ id: "apply" }), disabled: isAttributesSelectionInvalid ||
+                            isApplyButtonDisabled(
+                            // Compare against the seeded baseline so reusing the insight defaults (unchanged)
+                            // keeps Apply disabled and does not persist the defaults.
+                            {
+                                rankingFilter: {
+                                    ...rankingFilter,
+                                    attributes: baselineAttributes.length ? baselineAttributes : undefined,
+                                },
+                            }, getFilterState(), enableRankingWithMvf, applyOnResult, enableRankingStrictLimit, strictLimitOfRows) })
                 ] })
         ] }));
 }

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

@@ -4091,6 +4091,15 @@ export declare interface IRankingFilterDropdownProps {
      * with a custom body (e.g. a grouped, searchable catalog picker).
      */
     renderMeasureDropdownBody?: RenderMeasureDropdownBody;
+    isAttributesSectionEnabled?: boolean;
+    /** Current "out of" attributes (titled), seeded by the host (filter's own, or insight defaults). */
+    attributes?: IDimensionalityItem[];
+    /** Insight default "out of" attributes (for the reset action). */
+    insightAttributes?: IDimensionalityItem[];
+    /** Catalog "out of" attributes (used when not lazily loaded via loadCatalogAttributes). */
+    catalogAttributes?: IDimensionalityItem[];
+    /** Lazily loads catalog "out of" attributes valid for the current selection (on picker open). */
+    loadCatalogAttributes?: (attributes: ObjRefInScope[]) => Promise<IDimensionalityItem[]>;
 }
 
 /**

package/package.json

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