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

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

@@ -52,7 +52,7 @@ export function ArbitraryValuesInput(props) {
     useEffect(() => {
         if (previousValuesLengthRef.current === 1 && values.length === 0) {
             requestAnimationFrame(() => {
-                inputRef.current?.inputNodeRef?.focus();
+                inputRef.current?.focus();
             });
         }
         previousValuesLengthRef.current = values.length;

package/esm/DateFilter/DateRangePicker/DateRangePickerInputFieldBody.d.ts

@@ -1,10 +1,15 @@
-import { Component, type InputHTMLAttributes } from "react";
-export declare class DateRangePickerInputFieldBody extends Component<InputHTMLAttributes<HTMLInputElement>> {
-    private inputRef;
+import { type InputHTMLAttributes } from "react";
+/**
+ * Imperative API exposed on the DateRangePickerInputFieldBody ref.
+ *
+ * DayPickerInput refs to this component internally and calls these methods.
+ * See https://github.com/gpbl/react-day-picker/issues/748 for more information
+ */
+export interface IDateRangePickerInputFieldBody {
     invokeInputMethod: (key: "blur" | "focus") => void;
     blur: () => void;
     focus: () => void;
-    get value(): string;
-    render(): import("react/jsx-runtime").JSX.Element;
+    readonly value: string;
 }
+export declare const DateRangePickerInputFieldBody: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<IDateRangePickerInputFieldBody>>;
 //# sourceMappingURL=DateRangePickerInputFieldBody.d.ts.map

package/esm/DateFilter/DateRangePicker/DateRangePickerInputFieldBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerInputFieldBody.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/DateRangePicker/DateRangePickerInputFieldBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAa,MAAM,OAAO,CAAC;AAMvE,qBAAa,6BAA8B,SAAQ,SAAS,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAiC;IAE1C,iBAAiB,kCAItB;IAEK,IAAI,aAA8C;IAClD,KAAK,aAA+C;IAE3D,IAAW,KAAK,IAAI,MAAM,CAMzB;IAEe,MAAM,4CAYrB;CACJ"}
+{"version":3,"file":"DateRangePickerInputFieldBody.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/DateRangePicker/DateRangePickerInputFieldBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,mBAAmB,EAA2C,MAAM,OAAO,CAAC;AAI1F;;;;;GAKG;AACH,MAAM,WAAW,8BAA8B;IAC3C,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACnD,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,6BAA6B,kJA4BxC,CAAC"}

package/esm/DateFilter/DateRangePicker/DateRangePickerInputFieldBody.js

@@ -1,28 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// (C) 2007-2025 GoodData Corporation
-import { Component, createRef } from "react";
+// (C) 2007-2026 GoodData Corporation
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import cx from "classnames";
-// This has to be a class because DayPickerInput refs to it internally.
-// See https://github.com/gpbl/react-day-picker/issues/748 for more information
-export class DateRangePickerInputFieldBody extends Component {
-    inputRef = createRef();
-    invokeInputMethod = (key) => {
-        if (this.inputRef.current) {
-            this.inputRef.current[key]();
-        }
-    };
-    blur = () => this.invokeInputMethod("blur");
-    focus = () => this.invokeInputMethod("focus");
-    get value() {
-        if (this.inputRef.current) {
-            return this.inputRef.current.value;
-        }
-        return "";
-    }
-    render() {
-        const { className } = this.props;
-        return (_jsxs("span", { className: cx(className), children: [
-                _jsx("span", { className: "gd-icon-calendar", "aria-hidden": "true" }), _jsx("input", { ...this.props, ref: this.inputRef, className: "input-text s-date-range-picker-input-field" })
-            ] }));
-    }
-}
+export const DateRangePickerInputFieldBody = forwardRef(function DateRangePickerInputFieldBody(props, ref) {
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        const invokeInputMethod = (key) => {
+            inputRef.current?.[key]();
+        };
+        return {
+            invokeInputMethod,
+            blur: () => invokeInputMethod("blur"),
+            focus: () => invokeInputMethod("focus"),
+            get value() {
+                return inputRef.current?.value ?? "";
+            },
+        };
+    }, []);
+    const { className } = props;
+    return (_jsxs("span", { className: cx(className), children: [
+            _jsx("span", { className: "gd-icon-calendar", "aria-hidden": "true" }), _jsx("input", { ...props, ref: inputRef, className: "input-text s-date-range-picker-input-field" })
+        ] }));
+});

package/esm/DateFilter/DynamicSelect/DynamicSelect.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, Component } from "react";
-import { type DynamicSelectItem, type DynamicSelectOption } from "./types.js";
+import { type CSSProperties } from "react";
+import { type DynamicSelectItem } from "./types.js";
 export interface IDynamicSelectProps {
     getItems: (inputValue: string) => DynamicSelectItem[];
     onChange?: (item: number) => void;
@@ -16,17 +16,5 @@ export interface IDynamicSelectProps {
 export interface IDynamicSelectState {
     inputValue: string;
 }
-export declare class DynamicSelect extends Component<IDynamicSelectProps, IDynamicSelectState> {
-    constructor(props: IDynamicSelectProps);
-    inputRef: import("react").RefObject<HTMLDivElement | null>;
-    static defaultProps: Pick<IDynamicSelectProps, "onChange" | "initialIsOpen" | "visibleItemsRange">;
-    onChange: (option: DynamicSelectOption | null) => void;
-    componentDidUpdate: (lastProps: IDynamicSelectProps) => void;
-    focus: () => void;
-    blur: () => void;
-    onInputValueChanged: (inputValue: string) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-    private onBlurHandler;
-    private onChangeHandler;
-}
+export declare function DynamicSelect({ getItems, onChange, initialIsOpen, placeholder, value, className, style, optionClassName, visibleItemsRange, ariaLabel, customValueValidator }: IDynamicSelectProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DynamicSelect.d.ts.map

package/esm/DateFilter/DynamicSelect/DynamicSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSelect.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/DynamicSelect/DynamicSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAoB,SAAS,EAAa,MAAM,OAAO,CAAC;AAenF,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAQ9E,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,iBAAiB,EAAE,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACrD;AAED,MAAM,WAAW,mBAAmB;IAChC,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAClF,YAAY,KAAK,EAAE,mBAAmB,EAerC;IAEM,QAAQ,mDAA+B;IAE9C,OAAc,YAAY,EAAE,IAAI,CAC5B,mBAAmB,EACnB,UAAU,GAAG,eAAe,GAAG,mBAAmB,CACrD,CAIC;IAEK,QAAQ,+CAKb;IAEc,kBAAkB,2CAUhC;IAEK,KAAK,aAIV;IAEK,IAAI,aAIT;IAEK,mBAAmB,+BAIxB;IAEc,MAAM,4CAyGrB;IAED,OAAO,CAAC,aAAa,CAanB;IAEF,OAAO,CAAC,eAAe,CAgBrB;CACL"}
+{"version":3,"file":"DynamicSelect.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/DynamicSelect/DynamicSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAA8D,MAAM,OAAO,CAAC;AAevG,OAAO,EAAE,KAAK,iBAAiB,EAA4B,MAAM,YAAY,CAAC;AAQ9E,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,iBAAiB,EAAE,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACrD;AAED,MAAM,WAAW,mBAAmB;IAChC,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,QAAmB,EACnB,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,SAAS,EACT,KAAK,EACL,eAAe,EACf,iBAA4C,EAC5C,SAAS,EACT,oBAAoB,EACvB,EAAE,mBAAmB,2CA6KrB"}

package/esm/DateFilter/DynamicSelect/DynamicSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
-import { Component, createRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import cx from "classnames";
 import { defaultImport } from "default-import";
 import DefaultDownshift from "downshift";
@@ -11,115 +11,44 @@ import { findRelativeDateFilterOptionByValue } from "./utils.js";
 // In ESM, default exports of CJS modules are wrapped in default properties instead of being exposed directly.
 // https://github.com/microsoft/TypeScript/issues/52086#issuecomment-1385978414
 const Downshift = defaultImport(DefaultDownshift);
-export class DynamicSelect extends Component {
-    constructor(props) {
-        super(props);
-        const selectedItem = props.value === undefined
+export function DynamicSelect({ getItems, onChange = () => { }, initialIsOpen = false, placeholder, value, className, style, optionClassName, visibleItemsRange = defaultVisibleItemsRange, ariaLabel, customValueValidator, }) {
+    const [inputValue, setInputValue] = useState(() => {
+        const selectedItem = value === undefined
             ? null
             : findRelativeDateFilterOptionByValue(
             // pass the current value to make sure the searched options include it even if it is outside the default range
-            props.getItems(props.value.toString()), props.value);
-        this.state = {
-            inputValue: selectedItem ? itemToString(selectedItem) : props.value ? props.value.toString() : "",
-        };
-    }
-    inputRef = createRef();
-    static defaultProps = {
-        onChange: () => { },
-        initialIsOpen: false,
-        visibleItemsRange: defaultVisibleItemsRange,
-    };
-    onChange = (option) => {
-        const { onChange } = this.props;
-        if (option && onChange) {
-            onChange(option.value);
-        }
-    };
-    componentDidUpdate = (lastProps) => {
-        const { value, getItems } = this.props;
-        if (lastProps.value !== value && value !== undefined) {
+            getItems(value.toString()), value);
+        return selectedItem ? itemToString(selectedItem) : value ? value.toString() : "";
+    });
+    const inputRef = useRef(null);
+    // keep the input value in sync with the controlled value prop, but not on the initial render
+    const prevValue = useRef(value);
+    useEffect(() => {
+        if (prevValue.current !== value && value !== undefined) {
             const defaultItems = getItems(value.toString());
-            const inputValue = findRelativeDateFilterOptionByValue(defaultItems, value)?.label || value.toString();
-            this.setState({
-                inputValue,
-            });
+            setInputValue(findRelativeDateFilterOptionByValue(defaultItems, value)?.label || value.toString());
         }
-    };
-    focus = () => {
-        if (this.inputRef.current) {
-            this.inputRef.current.focus();
-        }
-    };
-    blur = () => {
-        if (this.inputRef.current) {
-            this.inputRef.current.blur();
-        }
-    };
-    onInputValueChanged = (inputValue) => {
-        if (inputValue !== this.state.inputValue) {
-            this.setState({ inputValue });
+        prevValue.current = value;
+    }, [value, getItems]);
+    const onInputValueChanged = useCallback((newInputValue) => {
+        setInputValue((currentInputValue) => newInputValue === currentInputValue ? currentInputValue : newInputValue);
+    }, []);
+    const handleChange = useCallback((option) => {
+        if (option && onChange) {
+            onChange(option.value);
         }
-    };
-    render() {
-        const { initialIsOpen, placeholder, getItems, value = null, className, style, optionClassName, visibleItemsRange, ariaLabel, } = this.props;
-        const items = getItems(this.state.inputValue);
-        // this is important to correctly find out selected option. It is different than 'items'.
-        const itemsByValue = value === null ? [] : getItems(value.toString());
-        // Downshift requires null as empty selected item, if we would pass undefined it would change
-        // from controlled to uncontrolled component
-        const selectedItem = (value !== null && findRelativeDateFilterOptionByValue(itemsByValue, value)) || null;
-        const selectableItems = getSelectableItems(items);
-        const isFiltered = this.state.inputValue.trim() !== "";
-        return (_jsx(Downshift, { onChange: this.onChange, itemToString: itemToString, initialIsOpen: initialIsOpen, selectedItem: selectedItem, itemCount: selectableItems.length, inputValue: this.state.inputValue, 
-            // automatically highlight (and therefore scroll to) the middle option if default items are displayed
-            defaultHighlightedIndex: selectedItem || isFiltered ? 0 : getMedianIndex(selectableItems), children: ({ getInputProps, getMenuProps, getItemProps, isOpen, openMenu, closeMenu, inputValue: downshiftInputValue, highlightedIndex, setHighlightedIndex, selectItem, }) => {
-                // Without this, highlight is not properly reset during filtering
-                const effectiveHighlightedIndex = highlightedIndex === null || highlightedIndex > selectableItems.length - 1
-                    ? 0
-                    : highlightedIndex;
-                const effectiveInputValue = downshiftInputValue ?? "";
-                const menuProps = {
-                    items,
-                    selectedItem: selectedItem,
-                    highlightedIndex: effectiveHighlightedIndex,
-                    getItemProps: getItemProps,
-                    getMenuProps: getMenuProps,
-                    className: "gd-dynamic-select-menu",
-                    optionClassName,
-                    inputValue: effectiveInputValue,
-                    setHighlightedIndex,
-                    visibleItemsRange,
-                };
-                return (_jsxs("div", { className: cx("gd-dynamic-select", className), style: style, "aria-labelledby": undefined, children: [
-                        _jsx("div", { className: "gd-dynamic-select-input-wrapper", children: _jsx("input", { type: "text", className: "s-relative-range-input gd-input-field", "aria-label": ariaLabel, ...getInputProps({
-                                    "aria-labelledby": undefined,
-                                    ref: this.inputRef,
-                                    placeholder: selectedItem ? selectedItem.label : placeholder,
-                                    value: effectiveInputValue,
-                                    onFocus: () => {
-                                        this.setState({ inputValue: "" });
-                                        openMenu();
-                                    },
-                                    onChange: (event) => this.onChangeHandler(event, selectItem),
-                                    onBlur: () => {
-                                        this.onBlurHandler(selectedItem, selectItem, closeMenu);
-                                    },
-                                }) }) }), isOpen && items.length > 0 ? (_jsx(ScrollableSelectMenu, { ...menuProps })) : null] }));
-            } }));
-    }
-    onBlurHandler = (selectedItem, selectItem, closeMenu) => {
-        const { customValueValidator, value } = this.props;
+    }, [onChange]);
+    const onBlurHandler = useCallback((selectedItem, selectItem, closeMenu) => {
         if (customValueValidator) {
             closeMenu();
-            this.onInputValueChanged(value?.toString() ?? "");
+            onInputValueChanged(value?.toString() ?? "");
         }
         else {
             selectItem(selectedItem);
-            this.onInputValueChanged(selectedItem.label);
+            onInputValueChanged(selectedItem.label);
         }
-    };
-    onChangeHandler = (event, selectItem) => {
-        const { customValueValidator } = this.props;
+    }, [customValueValidator, value, onInputValueChanged]);
+    const onChangeHandler = useCallback((event, selectItem) => {
         const currentValue = event.target.value;
         if (customValueValidator?.(currentValue)) {
             selectItem({
@@ -130,6 +59,52 @@ export class DynamicSelect extends Component {
         }
         // Downshifts onInputValueChanged fires twice and with an old value,
         // so we need to use our own callback
-        this.onInputValueChanged(currentValue);
-    };
+        onInputValueChanged(currentValue);
+    }, [customValueValidator, onInputValueChanged]);
+    const effectiveValue = value ?? null;
+    const items = getItems(inputValue);
+    // this is important to correctly find out selected option. It is different than 'items'.
+    const itemsByValue = effectiveValue === null ? [] : getItems(effectiveValue.toString());
+    // Downshift requires null as empty selected item, if we would pass undefined it would change
+    // from controlled to uncontrolled component
+    const selectedItem = (effectiveValue !== null && findRelativeDateFilterOptionByValue(itemsByValue, effectiveValue)) ||
+        null;
+    const selectableItems = getSelectableItems(items);
+    const isFiltered = inputValue.trim() !== "";
+    return (_jsx(Downshift, { onChange: handleChange, itemToString: itemToString, initialIsOpen: initialIsOpen, selectedItem: selectedItem, itemCount: selectableItems.length, inputValue: inputValue, 
+        // automatically highlight (and therefore scroll to) the middle option if default items are displayed
+        defaultHighlightedIndex: selectedItem || isFiltered ? 0 : getMedianIndex(selectableItems), children: ({ getInputProps, getMenuProps, getItemProps, isOpen, openMenu, closeMenu, inputValue: downshiftInputValue, highlightedIndex, setHighlightedIndex, selectItem, }) => {
+            // Without this, highlight is not properly reset during filtering
+            const effectiveHighlightedIndex = highlightedIndex === null || highlightedIndex > selectableItems.length - 1
+                ? 0
+                : highlightedIndex;
+            const effectiveInputValue = downshiftInputValue ?? "";
+            const menuProps = {
+                items,
+                selectedItem: selectedItem,
+                highlightedIndex: effectiveHighlightedIndex,
+                getItemProps: getItemProps,
+                getMenuProps: getMenuProps,
+                className: "gd-dynamic-select-menu",
+                optionClassName,
+                inputValue: effectiveInputValue,
+                setHighlightedIndex,
+                visibleItemsRange,
+            };
+            return (_jsxs("div", { className: cx("gd-dynamic-select", className), style: style, "aria-labelledby": undefined, children: [
+                    _jsx("div", { className: "gd-dynamic-select-input-wrapper", children: _jsx("input", { type: "text", className: "s-relative-range-input gd-input-field", "aria-label": ariaLabel, ...getInputProps({
+                                "aria-labelledby": undefined,
+                                ref: inputRef,
+                                placeholder: selectedItem ? selectedItem.label : placeholder,
+                                value: effectiveInputValue,
+                                onFocus: () => {
+                                    setInputValue("");
+                                    openMenu();
+                                },
+                                onChange: (event) => onChangeHandler(event, selectItem),
+                                onBlur: () => {
+                                    onBlurHandler(selectedItem, selectItem, closeMenu);
+                                },
+                            }) }) }), isOpen && items.length > 0 ? (_jsx(ScrollableSelectMenu, { ...menuProps })) : null] }));
+        } }));
 }

package/esm/DateFilter/Select/ScrollableSelectMenu.d.ts

@@ -1,4 +1,3 @@
-import { Component } from "react";
 import { type ControllerStateAndHelpers } from "downshift";
 import { type ISelectItem, type ISelectItemOption } from "./types.js";
 export interface IOptionGetterProps<V> {
@@ -17,13 +16,5 @@ export interface ISelectMenuProps<V> extends IOptionGetterProps<V> {
 }
 export declare const defaultVisibleItemsRange = 3;
 export declare const getMedianIndex: (array: any[]) => number;
-export declare class ScrollableSelectMenu<V extends object> extends Component<ISelectMenuProps<V>> {
-    static defaultProps: Partial<ISelectMenuProps<any>>;
-    private listRef;
-    render(): import("react/jsx-runtime").JSX.Element;
-    scrollToIndex: (index?: number | undefined) => void;
-    scrollToTop: () => void;
-    componentDidUpdate: (lastProps: ISelectMenuProps<V>) => void;
-    componentDidMount(): void;
-}
+export declare function ScrollableSelectMenu<V extends object>({ items, selectedItem, highlightedIndex, getItemProps, getMenuProps, className, optionClassName, visibleItemsRange, inputValue, setHighlightedIndex }: ISelectMenuProps<V>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ScrollableSelectMenu.d.ts.map

package/esm/DateFilter/Select/ScrollableSelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableSelectMenu.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/Select/ScrollableSelectMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,SAAS,EAAa,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAM3D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,iBAAiB,EAAwB,MAAM,YAAY,CAAC;AAG5F,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,kBAAkB,CAAC,CAAC,CAAC;IAC9D,YAAY,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAgE1C,eAAO,MAAM,cAAc,0BAAyD,CAAC;AAErF,qBAAa,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAEtF,OAAc,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAGxD;IAEF,OAAO,CAAC,OAAO,CAAsC;IAErC,MAAM,4CAuDrB;IAEM,aAAa,uCAqBlB;IAEK,WAAW,aAKhB;IAEc,kBAAkB,2CAwChC;IAEc,iBAAiB,IAAI,IAAI,CAQxC;CACJ"}
+{"version":3,"file":"ScrollableSelectMenu.d.ts","sourceRoot":"","sources":["../../../src/DateFilter/Select/ScrollableSelectMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,WAAW,CAAC;AAM3D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,iBAAiB,EAAwB,MAAM,YAAY,CAAC;AAG5F,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AACD,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,kBAAkB,CAAC,CAAC,CAAC;IAC9D,YAAY,EAAE,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAgE1C,eAAO,MAAM,cAAc,0BAAyD,CAAC;AAErF,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,eAAe,EACf,iBAA4C,EAC5C,UAAU,EACV,mBAAmB,EACtB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CA4IrB"}

package/esm/DateFilter/Select/ScrollableSelectMenu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // (C) 2019-2026 GoodData Corporation
-import { Component, createRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 import cx from "classnames";
 import { range } from "lodash-es";
 import { SelectHeading } from "./SelectHeading.js";
@@ -46,41 +46,16 @@ const getItemHeight = (items) => (index) => {
     return itemHeightByTypeMap[itemType];
 };
 export const getMedianIndex = (array) => Math.floor(array.length / 2);
-export class ScrollableSelectMenu extends Component {
-    // static cannot have <V>
-    static defaultProps = {
-        selectedItem: undefined,
-        visibleItemsRange: defaultVisibleItemsRange,
-    };
-    listRef = createRef();
-    render() {
-        const { items, selectedItem, highlightedIndex, getItemProps, getMenuProps, className, optionClassName, visibleItemsRange, } = this.props;
-        const Option = optionGetter({
-            items,
-            selectedItem: selectedItem,
-            highlightedIndex,
-            getItemProps,
-            optionClassName,
-        });
-        const middleItemIndex = getMedianIndex(getSelectableItems(items));
-        const visibleIndexes = range(Math.max(middleItemIndex - visibleItemsRange, 0), Math.min(middleItemIndex + visibleItemsRange + 1, items.length));
-        const itemHeightFn = getItemHeight(items);
-        const listHeight = visibleIndexes.reduce((totalHeight, itemIndex) => totalHeight + itemHeightFn(itemIndex), 0);
-        return (_jsx("div", { ...getMenuProps({ className: cx("gd-select-menu-wrapper", className) }), children: _jsx("div", { className: "gd-select-menu s-select-menu", children: _jsx("div", { className: "List", ref: this.listRef, style: {
-                        height: listHeight,
-                        width: "100%",
-                        overflowY: items.length === 1 ? "hidden" : "auto",
-                    }, children: items.map((_, index) => (_jsx(Option, { index: index, style: { height: itemHeightFn(index) } }, `item-${index}`))) }) }) }));
-    }
-    scrollToIndex = (index = this.props.highlightedIndex) => {
-        if (this.listRef.current) {
-            const { items } = this.props;
+export function ScrollableSelectMenu({ items, selectedItem, highlightedIndex, getItemProps, getMenuProps, className, optionClassName, visibleItemsRange = defaultVisibleItemsRange, inputValue, setHighlightedIndex, }) {
+    const listRef = useRef(null);
+    const scrollToIndex = useCallback((index = highlightedIndex) => {
+        if (listRef.current) {
             const selectableOptions = getSelectableItems(items);
             const optionIndex = index === null ? getMedianIndex(getSelectableItems(items)) : index;
             const highlightedOption = selectableOptions[optionIndex];
             const actualItemIndex = items.indexOf(highlightedOption);
             if (actualItemIndex >= 0) {
-                const container = this.listRef.current;
+                const container = listRef.current;
                 const heightFn = getItemHeight(items);
                 const itemOffset = items
                     .slice(0, actualItemIndex)
@@ -90,15 +65,35 @@ export class ScrollableSelectMenu extends Component {
                 container.scrollTo({ top: targetTop });
             }
         }
-    };
-    scrollToTop = () => {
-        if (!this.listRef.current) {
+    }, [highlightedIndex, items]);
+    const scrollToTop = useCallback(() => {
+        if (!listRef.current) {
             return;
         }
-        this.listRef.current.scrollTo({ top: 0 });
-    };
-    componentDidUpdate = (lastProps) => {
-        const { highlightedIndex, items, setHighlightedIndex, inputValue } = this.props;
+        listRef.current.scrollTo({ top: 0 });
+    }, []);
+    const isMounted = useRef(false);
+    const prev = useRef({ items, highlightedIndex, inputValue });
+    // componentDidMount; layout effect so it runs in the commit phase, as the class lifecycle did
+    useLayoutEffect(() => {
+        if (inputValue) {
+            scrollToIndex();
+        }
+        else {
+            const medianIndex = getMedianIndex(getSelectableItems(items));
+            setHighlightedIndex(medianIndex);
+            scrollToIndex(medianIndex);
+        }
+        // this must run only once on mount, exactly as componentDidMount did
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // componentDidUpdate: runs after every commit except the initial one
+    useLayoutEffect(() => {
+        if (!isMounted.current) {
+            isMounted.current = true;
+            return;
+        }
+        const lastProps = prev.current;
         const lastSelectibleLastItemIndex = getSelectableItems(lastProps.items).length - 1;
         const selectiblelastItemIndex = getSelectableItems(items).length - 1;
         const lastHighlightIsAtStart = lastProps.highlightedIndex === 0;
@@ -119,29 +114,36 @@ export class ScrollableSelectMenu extends Component {
             // We need to set highlight to 0 manually after filtering
             setHighlightedIndex(0);
         }
-        const hasOnlyOneItem = this.props.items.length === 1;
+        const hasOnlyOneItem = items.length === 1;
         if (isInputValueReset) {
             // We need to restore explicitly medianIndex scroll position immediately after inputValue reset
             // even though setHighlightedIndex(medianIndex) is called, because it takes effect after one tick
-            this.scrollToIndex(medianIndex);
+            scrollToIndex(medianIndex);
         }
         else if (isHighlightLoopedBack || isHighlightLoopedForward) {
-            this.scrollToIndex();
+            scrollToIndex();
         }
         else if (hasOnlyOneItem) {
             // if there is only one item, we need to explicitly scroll to top
             // in order to handle error messages being scrolled out of view
-            this.scrollToTop();
-        }
-    };
-    componentDidMount() {
-        if (this.props.inputValue) {
-            this.scrollToIndex();
+            scrollToTop();
         }
-        else {
-            const medianIndex = getMedianIndex(getSelectableItems(this.props.items));
-            this.props.setHighlightedIndex(medianIndex);
-            this.scrollToIndex(medianIndex);
-        }
-    }
+        prev.current = { items, highlightedIndex, inputValue };
+    });
+    const Option = optionGetter({
+        items,
+        selectedItem: selectedItem,
+        highlightedIndex,
+        getItemProps,
+        optionClassName,
+    });
+    const middleItemIndex = getMedianIndex(getSelectableItems(items));
+    const visibleIndexes = range(Math.max(middleItemIndex - visibleItemsRange, 0), Math.min(middleItemIndex + visibleItemsRange + 1, items.length));
+    const itemHeightFn = getItemHeight(items);
+    const listHeight = visibleIndexes.reduce((totalHeight, itemIndex) => totalHeight + itemHeightFn(itemIndex), 0);
+    return (_jsx("div", { ...getMenuProps({ className: cx("gd-select-menu-wrapper", className) }), children: _jsx("div", { className: "gd-select-menu s-select-menu", children: _jsx("div", { className: "List", ref: listRef, style: {
+                    height: listHeight,
+                    width: "100%",
+                    overflowY: items.length === 1 ? "hidden" : "auto",
+                }, children: items.map((_, index) => (_jsx(Option, { index: index, style: { height: itemHeightFn(index) } }, `item-${index}`))) }) }) }));
 }

package/package.json

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

package/styles/css/attributeFilter.css

@@ -842,6 +842,17 @@ button.gd-list-item {
   color: var(--gd-palette-complementary-8, #464e56);
   text-decoration: underline;
 }
+.gd-list-item:has(.gd-list-item-suffix) {
+  justify-content: flex-start;
+}
+.gd-list-item:has(.gd-list-item-suffix) > span {
+  flex-grow: 0;
+}
+.gd-list-item .gd-list-item-suffix {
+  flex: 0 0 auto;
+  margin-left: 5px;
+  color: var(--gd-palette-complementary-6);
+}
 .gd-list-item.gd-list-item-separator, .gd-list-item.gd-list-item-header {
   cursor: default;
 }