@gooddata/sdk-ui-filters 11.36.0-alpha.3 → 11.36.0-alpha.7

package/esm/AttributeFilter/Components/Addons/AttributeFilterDependencyTooltip.d.ts

@@ -4,8 +4,13 @@ import { type ReactNode } from "react";
  */
 export interface IAttributeFilterDependencyTooltipProps {
     tooltipContent: ReactNode;
+    /**
+     * Accessible label for the dependency icon wrapper. Already-localized string announced
+     * by screen readers in place of the visible icon.
+     */
+    ariaLabel?: string;
 }
 /**
  * @internal
  */
-export declare function AttributeFilterDependencyTooltip({ tooltipContent }: IAttributeFilterDependencyTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function AttributeFilterDependencyTooltip({ tooltipContent, ariaLabel }: IAttributeFilterDependencyTooltipProps): import("react/jsx-runtime").JSX.Element;

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

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

package/esm/AttributeFilter/Components/DropdownButton/AttributeFilterDropdownButton.d.ts

@@ -134,6 +134,13 @@ export interface IAttributeFilterDropdownButtonProps {
      * @beta
      */
     dropdownId?: string;
+    /**
+     * Overrides the accessible name of the button. When omitted, the name is derived from the
+     * rendered title.
+     *
+     * @beta
+     */
+    ariaLabel?: string;
 }
 /**
  * Dropdown button for the AttributeFilter.
@@ -147,4 +154,4 @@ export interface IAttributeFilterDropdownButtonProps {
  *
  * @beta
  */
-export declare function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId }: IAttributeFilterDropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId, ariaLabel }: IAttributeFilterDropdownButtonProps): import("react/jsx-runtime").JSX.Element;

package/esm/AttributeFilter/Components/DropdownButton/AttributeFilterDropdownButton.js

@@ -19,7 +19,7 @@ import { AttributeFilterButtonTooltip } from "./AttributeFilterButtonTooltip.js"
  *
  * @beta
  */
-export function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount = true, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId, }) {
+export function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount = true, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId, ariaLabel, }) {
     const intl = useIntl();
     const subtitleSelectedItemsRef = useRef(null);
     const [displayItemCount, setDisplayItemCount] = useState(false);
@@ -55,7 +55,7 @@ export function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCoun
         }
         buttonRef.current = element;
     }, [buttonRef]);
-    return (_jsx(UiControlButton, { title: `${buttonTitle ?? ""}`, titleClassName: "s-attribute-filter-button-title", subtitle: subtitleNode, subtitleExtension: subtitleExtension, icon: filterIcon, titleExtension: titleSlotExtension, isOpen: isOpen, isDraggable: isDraggable, isError: isError, disabled: disabled, disabledTooltip: disabled ? intl.formatMessage({ id: "filters.locked.filter.tooltip" }) : undefined, onClick: onClick, buttonRef: handleButtonRef, buttonId: buttonId, dropdownId: dropdownId, className: cx("gd-attribute-filter-dropdown-button__next", "s-attribute-filter", `s-${simplifyText(title ?? "")}`, {
+    return (_jsx(UiControlButton, { title: `${buttonTitle ?? ""}`, titleClassName: "s-attribute-filter-button-title", subtitle: subtitleNode, subtitleExtension: subtitleExtension, icon: filterIcon, titleExtension: titleSlotExtension, isOpen: isOpen, isDraggable: isDraggable, isError: isError, disabled: disabled, disabledTooltip: disabled ? intl.formatMessage({ id: "filters.locked.filter.tooltip" }) : undefined, onClick: onClick, buttonRef: handleButtonRef, buttonId: buttonId, dropdownId: dropdownId, ariaLabel: ariaLabel, className: cx("gd-attribute-filter-dropdown-button__next", "s-attribute-filter", `s-${simplifyText(title ?? "")}`, {
             "gd-message error": isError,
             "gd-is-filtering": isFiltering,
             "gd-is-active": isOpen,

package/esm/AttributeFilter/Components/TextFilterBody/ArbitraryValuesInput.js

@@ -75,7 +75,10 @@ export function ArbitraryValuesInput(props) {
                     "gd-chips-input__container--warning": hasValuesLimitReachedWarning && !hasValuesLimitExceededError,
                     "gd-chips-input__container--with-values": hasValues,
                     "gd-chips-input__container--empty": !hasValues,
-                }), children: [hasValues ? (_jsx("div", { className: "gd-chips-input__chips-frame", onPaste: handlePaste, ref: chipsContainerRef, children: _jsx("div", { className: "gd-chips-input__chips", role: "group", "aria-labelledby": groupValuesId, ref: valuesGroupRef, onBlur: makeValuesGroupUnfocusable, children: values.map((value, index) => (_jsx(UiTag, { label: getDisplayLabel(value), isDeletable: true, isDisabled: disabled, dataTestId: `s-text-filter-value-tag-${index}`, tabIndex: -1, onDelete: () => handleRemoveValue(value, index), onDeleteKeyDown: (event) => {
+                }), children: [hasValues ? (_jsx("div", { className: "gd-chips-input__chips-frame", onPaste: handlePaste, ref: chipsContainerRef, children: _jsx("div", { className: "gd-chips-input__chips", role: "group", "aria-labelledby": groupValuesId, ref: valuesGroupRef, onBlur: makeValuesGroupUnfocusable, children: values.map((value, index) => (_jsx(UiTag, { label: getDisplayLabel(value), isDeletable: true, isDisabled: disabled, dataTestId: `s-text-filter-value-tag-${index}`, tabIndex: -1, onDelete: (e) => {
+                                    e.preventDefault();
+                                    handleRemoveValue(value, index);
+                                }, onDeleteKeyDown: (event) => {
                                     if (event.key === "Enter" || event.key === " ") {
                                         event.preventDefault();
                                         event.stopPropagation();
@@ -96,6 +99,9 @@ export function ArbitraryValuesInput(props) {
                         "gd-chips-input__autocomplete-item--active": index === activeAutocompleteIndex,
                     }), role: "option", "aria-selected": index === activeAutocompleteIndex, 
                     // Prevent the input from blurring when clicking a suggestion.
-                    onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelectSuggestion(suggestion), children: highlightMatch(suggestion, inputValue) }, suggestion))))) : null }), _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", role: "status", children: valuesAnnouncement })
+                    onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
+                        e.preventDefault();
+                        handleSelectSuggestion(suggestion);
+                    }, children: highlightMatch(suggestion, inputValue) }, suggestion))))) : null }), _jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", role: "status", children: valuesAnnouncement })
         ] }));
 }

package/esm/FilterGroup/FilterGroup.js

@@ -94,8 +94,24 @@ export function FilterGroup(props) {
                 return;
             }
             function AttributeFilterComponent(attributeFilterProps) {
+                // When the filter swaps between Loading / Error / DropdownButton renderings,
+                // the focused DOM node is unmounted. Capture focus on ref-cleanup and
+                // re-apply it when the replacement mounts, so the user doesn't visually lose focus.
+                const wasFocusedRef = useRef(false);
                 const setFilterItemRef = useCallback((element) => {
+                    if (element === null) {
+                        const prev = filterItemRefs.current.get(filterIdentifier);
+                        wasFocusedRef.current =
+                            !!prev &&
+                                (prev === document.activeElement || prev.contains(document.activeElement));
+                        filterItemRefs.current.set(filterIdentifier, null);
+                        return;
+                    }
                     filterItemRefs.current.set(filterIdentifier, element);
+                    if (wasFocusedRef.current) {
+                        wasFocusedRef.current = false;
+                        element.focus();
+                    }
                 }, []);
                 const onError = useCallback((error) => errorHandler(filterIdentifier)(error), []);
                 const onInitLoadingChanged = useCallback((loading) => {
@@ -109,8 +125,8 @@ export function FilterGroup(props) {
                     return (_jsx(CustomDropdownButtonComponent, { ...props, titleExtension: _jsxs(_Fragment, { children: [props.titleExtension, titleExtension, _jsx(FilterButtonCustomIcon, { customIcon: props.customIcon, disabled: props.disabled })
                             ] }), buttonRef: handleButtonRef }));
                 }, [attributeFilterProps.DropdownButtonComponent, setFilterItemRef]);
-                const LoadingComponent = useCallback(() => _jsx(FilterGroupItem, { isLoading: true }), []);
-                const ErrorComponent = useCallback(() => _jsx(FilterGroupItem, { isError: true }), []);
+                const LoadingComponent = useCallback(() => _jsx(FilterGroupItem, { isLoading: true, buttonRef: setFilterItemRef }), [setFilterItemRef]);
+                const ErrorComponent = useCallback(() => _jsx(FilterGroupItem, { isError: true, buttonRef: setFilterItemRef }), [setFilterItemRef]);
                 const ElementsSearchBarComponent = useCallback((props) => (_jsx(AttributeFilterElementsSearchBar, { ...props, onKeyDown: (e) => {
                         // allow space key to be handled by filter search bar
                         // and not stolen by filter group dropdown keyboard navigation
@@ -124,10 +140,10 @@ export function FilterGroup(props) {
         });
         return result;
     }, [availableFilterIdentifiers, getTitleExtension, errorHandler, initLoadingChangedHandler]);
-    const renderItem = useCallback(({ item, rowIndex }) => {
+    const renderItem = useCallback(({ item }) => {
         const identifier = getFilterIdentifier(item);
         const AttributeFilterComponent = attributeFilterComponentsByIdentifier.get(identifier);
-        return (_jsx("div", { role: "row", "aria-rowindex": rowIndex + 1, children: _jsx("div", { role: "gridcell", children: renderFilter(item, AttributeFilterComponent) }) }));
+        return renderFilter(item, AttributeFilterComponent);
     }, [attributeFilterComponentsByIdentifier, getFilterIdentifier, renderFilter]);
     const handleKeyDownCapture = useCallback((e) => {
         if (isSpaceKey(e) && isEditableElement(e.target)) {
@@ -148,12 +164,22 @@ export function FilterGroup(props) {
         }
         filterItem.click();
     }, [getFilterIdentifier]);
-    const renderBody = useCallback(({ isMobile, closeDropdown }) => (_jsx("div", { onKeyDownCapture: handleKeyDownCapture, onKeyDown: handleKeyDown, children: _jsx(DropdownList, { className: "gd-filter-group-body", items: filters, maxHeight: 450, itemHeight: 53, accessibilityConfig: {
-                role: "grid",
-                ariaLabel: title,
-            }, renderItem: renderItem, onKeyDownSelect: handleItemKeyboardAction, closeDropdown: closeDropdown, isMobile: isMobile }) })), [filters, renderItem, handleKeyDown, handleKeyDownCapture, handleItemKeyboardAction, title]);
+    const groupAriaLabel = intl.formatMessage({ id: "filterGroup.aria.label" }, { title });
+    const groupAriaLabelWithState = intl.formatMessage({ id: "filterGroup.aria.label.withState" }, { title, state: subtitle });
+    const renderBody = useCallback(({ isMobile, closeDropdown }) => (_jsx("div", { role: "dialog", "aria-label": groupAriaLabel, onKeyDownCapture: handleKeyDownCapture, onKeyDown: handleKeyDown, children: _jsx(DropdownList, { className: "gd-filter-group-body", items: filters, maxHeight: 450, itemHeight: 53, accessibilityConfig: {
+                role: "list",
+                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 }) })), [title, subtitle, isAnyFilterError, selectedItemsCount, totalItemsCount, isMobile]);
+    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 }) })), [
+        title,
+        subtitle,
+        isAnyFilterError,
+        selectedItemsCount,
+        totalItemsCount,
+        isMobile,
+        groupAriaLabelWithState,
+    ]);
     return (_jsx(Dropdown, { isOpen: isOpen, className: "gd-filter-group", closeOnParentScroll: true, closeOnMouseDrag: true, closeOnOutsideClick: true, closeOnEscape: true, ignoreClicksOnByClass: IGNORE_CLICKS_ON_BY_CLASS, enableEventPropagation: true, alignPoints: GROUP_ALIGN_POINTS, fullscreenOnMobile: true, autofocusOnOpen: true, renderButton: renderButton, renderBody: renderBody, onOpenStateChanged: setIsOpen }));
 }
 /**

package/esm/MeasureValueFilter/MeasureValueFilterDetailsBubble.js

@@ -28,7 +28,7 @@ export function MeasureValueFilterDetailsBubble({ title, requestHandler, }) {
     return (_jsx("span", { className: "gd-mvf-details-bubble__trigger", children: _jsx(UiTooltip, { anchor: _jsx("span", { className: "s-mvf-details-trigger", children: _jsx(UiIconButton, { icon: "question", size: "xsmall", variant: "tertiary", iconColor: "complementary-7", label: intl.formatMessage(messages["measureValueFilterDetailsInfoButtonLabel"]), accessibilityConfig: {
                         ariaLabel: intl.formatMessage(messages["measureValueFilterDetailsInfoButtonLabel"]),
                         ariaExpanded: isOpen,
-                    }, dataTestId: "mvf-details-trigger" }) }), content: tooltipContent, triggerBy: ["hover", "focus"], onOpen: handleOpen, onClose: handleClose, arrowPlacement: "left", showArrow: false, behaviour: "tooltip", variant: "none", accessibilityConfig: {
+                    }, dataTestId: "mvf-details-trigger" }) }), content: tooltipContent, triggerBy: ["hover", "focus"], hoverCloseDelay: 0, onOpen: handleOpen, onClose: handleClose, arrowPlacement: "left", showArrow: false, behaviour: "tooltip", variant: "none", accessibilityConfig: {
                 ariaLabel: intl.formatMessage(messages["measureValueFilterDetailsInfoButtonLabel"]),
             } }) }));
 }

package/esm/internal.d.ts

@@ -7,3 +7,4 @@ 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 { MeasureValueFilterDetailsBubble } from "./MeasureValueFilter/MeasureValueFilterDetailsBubble.js";

package/esm/internal.js

@@ -9,3 +9,4 @@ 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 { MeasureValueFilterDetailsBubble } from "./MeasureValueFilter/MeasureValueFilterDetailsBubble.js";

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

@@ -184,7 +184,7 @@ export declare function AttributeFilterDeleteButton({ onDelete }: IAttributeFilt
 /**
  * @internal
  */
-export declare function AttributeFilterDependencyTooltip({ tooltipContent }: IAttributeFilterDependencyTooltipProps): JSX.Element;
+export declare function AttributeFilterDependencyTooltip({ tooltipContent, ariaLabel }: IAttributeFilterDependencyTooltipProps): JSX.Element;
 
 /**
  * This component displays two buttons Apply and Cancel.
@@ -218,7 +218,7 @@ export declare function AttributeFilterDropdownBody({ onApplyButtonClick, onCanc
  *
  * @beta
  */
-export declare function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId }: IAttributeFilterDropdownButtonProps): JSX.Element;
+export declare function AttributeFilterDropdownButton({ isOpen, title, selectedItemsCount, totalItemsCount, showSelectionCount, subtitle, disabled, customIcon, isFiltering, isLoading, isLoaded, isError, isDraggable, icon, TooltipContentComponent, titleExtension, onClick, className, buttonRef, buttonId, dropdownId, ariaLabel }: IAttributeFilterDropdownButtonProps): JSX.Element;
 
 /**
  * It displays three state a checkbox and allow select all or none elements that respect current search criteria.
@@ -2008,6 +2008,11 @@ export declare interface IAttributeFilterDeleteButtonProps {
  */
 export declare interface IAttributeFilterDependencyTooltipProps {
     tooltipContent: ReactNode;
+    /**
+     * Accessible label for the dependency icon wrapper. Already-localized string announced
+     * by screen readers in place of the visible icon.
+     */
+    ariaLabel?: string;
 }
 
 /**
@@ -2213,6 +2218,13 @@ export declare interface IAttributeFilterDropdownButtonProps {
      * @beta
      */
     dropdownId?: string;
+    /**
+     * Overrides the accessible name of the button. When omitted, the name is derived from the
+     * rendered title.
+     *
+     * @beta
+     */
+    ariaLabel?: string;
 }
 
 /**

package/package.json

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

package/styles/css/filterGroup.css

@@ -16,12 +16,12 @@
   overscroll-behavior: contain;
   margin: 0;
 }
-.dropdown-body .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper .gd-filter-group-item,
-.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper .gd-filter-group-item {
+.dropdown-body .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item .gd-filter-group-item,
+.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item .gd-filter-group-item {
   border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
 }
-.dropdown-body .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper:last-child .gd-filter-group-item,
-.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper:last-child .gd-filter-group-item {
+.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 {
   border-bottom: none;
 }
 .dropdown-body .gd-infinite-list.gd-filter-group-body .gd-attribute-filter__next,

package/styles/css/main.css

@@ -9541,12 +9541,12 @@ div.gd-empty-item-bubble {
   overscroll-behavior: contain;
   margin: 0;
 }
-.dropdown-body .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper .gd-filter-group-item,
-.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper .gd-filter-group-item {
+.dropdown-body .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item .gd-filter-group-item,
+.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .gd-ui-kit-paged-virtual-list__item .gd-filter-group-item {
   border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
 }
-.dropdown-body .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper:last-child .gd-filter-group-item,
-.gd-mobile-dropdown-content .gd-infinite-list.gd-filter-group-body .fixedDataTableRowLayout_rowWrapper:last-child .gd-filter-group-item {
+.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 {
   border-bottom: none;
 }
 .dropdown-body .gd-infinite-list.gd-filter-group-body .gd-attribute-filter__next,

package/styles/scss/filterGroup.scss

@@ -19,7 +19,7 @@
     overscroll-behavior: contain;
     margin: 0;
 
-    & .fixedDataTableRowLayout_rowWrapper {
+    & .gd-ui-kit-paged-virtual-list__item {
         .gd-filter-group-item {
             border-bottom: 1px solid variables.$gd-border-color;
         }