@gooddata/sdk-ui-kit 11.42.0-alpha.1 → 11.42.0-alpha.3

package/esm/@ui/UiCombobox/UiComboboxListItem.js

@@ -7,20 +7,14 @@ import { useComboboxState } from "./UiComboboxContext.js";
 /** @internal */
 export function UiComboboxListItem(props) {
     const { option } = props;
-    const { registerItemRef, getItemProps, selectOption, activeOption, selectedOption } = useComboboxState();
+    const { registerItemRef, setActiveIndex, selectOption, activeOption, selectedOption } = useComboboxState();
     const isDisabled = Boolean(option.disabled);
     const isActive = activeOption?.id === option.id;
     const isSelected = selectedOption?.id === option.id;
-    return (_jsx(UiComboboxListItemImpl, { ...props, isActive: isActive, isSelected: isSelected, isDisabled: isDisabled, getItemProps: getItemProps, registerItemRef: registerItemRef, selectOption: selectOption }));
+    return (_jsx(UiComboboxListItemImpl, { ...props, isActive: isActive, isSelected: isSelected, isDisabled: isDisabled, registerItemRef: registerItemRef, setActiveIndex: setActiveIndex, selectOption: selectOption }));
 }
 export const UiComboboxListItemImpl = memo(function UiComboboxListItemImpl(props) {
-    const { option, index, className, children, onClick, isActive, isSelected, isDisabled, getItemProps, registerItemRef, selectOption, ...htmlProps } = props;
-    // https://floating-ui.com/docs/useRole#component-roles
-    const itemProps = getItemProps({
-        ...htmlProps,
-        active: isActive,
-        selected: isSelected,
-    });
+    const { option, index, className, children, onClick, onMouseMove, isActive, isSelected, isDisabled, registerItemRef, setActiveIndex, selectOption, ...htmlProps } = props;
     function handleClick(event) {
         if (isDisabled) {
             event.preventDefault();
@@ -29,27 +23,23 @@ export const UiComboboxListItemImpl = memo(function UiComboboxListItemImpl(props
         selectOption(option, index);
         onClick?.(event);
     }
-    return (_jsx("li", { ...itemProps, ref: (node) => {
+    function handleMouseMove(event) {
+        if (!isActive) {
+            setActiveIndex(index);
+        }
+        onMouseMove?.(event);
+    }
+    return (_jsx("li", { ...htmlProps, ref: (node) => {
             registerItemRef(node, index);
-        }, id: option.id, role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, className: cx(e("item", { isActive, isSelected, isDisabled }), className), onClick: handleClick, children: children ?? (_jsxs(_Fragment, { children: [
+        }, id: option.id, role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, className: cx(e("item", { isActive, isSelected, isDisabled }), className), onClick: handleClick, onMouseMove: handleMouseMove, children: children ?? (_jsxs(_Fragment, { children: [
                 _jsx(UiComboboxListItemLabel, { children: option.label }), option.creatable ? _jsx(UiComboboxListItemCreatableLabel, {}) : null] })) }));
 });
-/**
- * Renders the primary label content within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export function UiComboboxListItemLabel(props) {
     const { children, className, ...htmlProps } = props;
     return (_jsx("span", { ...htmlProps, className: cx(e("item-label"), className), children: children }));
 }
-/**
- * Renders the "creatable" label suffix within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export function UiComboboxListItemCreatableLabel(props) {
     const { children = "(create new)", className, ...htmlProps } = props;
     return (_jsx("span", { ...htmlProps, className: cx(e("item-creatable"), className), children: children }));

package/esm/@ui/UiCombobox/UiComboboxPopup.d.ts

@@ -1,6 +1,9 @@
-import type { HTMLAttributes } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 /** @internal */
-export type UiComboboxPopupProps = HTMLAttributes<HTMLDivElement>;
+export interface IUiComboboxPopupProps {
+    children?: ReactNode;
+    style?: CSSProperties;
+}
 /** @internal */
-export declare function UiComboboxPopup({ style, className, children, ...htmlProps }: UiComboboxPopupProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function UiComboboxPopup({ children, style }: IUiComboboxPopupProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=UiComboboxPopup.d.ts.map

package/esm/@ui/UiCombobox/UiComboboxPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiComboboxPopup.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxPopup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,gBAAgB;AAChB,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAElE,gBAAgB;AAChB,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,kDAiBjG"}
+{"version":3,"file":"UiComboboxPopup.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxPopup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAM3D,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,gBAAgB;AAChB,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,kDAwBzE"}

package/esm/@ui/UiCombobox/UiComboboxPopup.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2025-2026 GoodData Corporation
-import cx from "classnames";
-import { e } from "./comboboxBem.js";
+import { UiFloatingPanel } from "../UiFloatingPanel/UiFloatingPanel.js";
 import { useComboboxState } from "./UiComboboxContext.js";
 /** @internal */
-export function UiComboboxPopup({ style, className, children, ...htmlProps }) {
-    const { isOpen, setFloatingRef, getFloatingProps, floatingStyles, availableOptions } = useComboboxState();
-    if (!isOpen || availableOptions.length === 0) {
+export function UiComboboxPopup({ children, style }) {
+    const { isOpen, setIsOpen, anchorRef, shouldRenderPopup } = useComboboxState();
+    if (!shouldRenderPopup) {
         return null;
     }
-    return (_jsx("div", { ...getFloatingProps({ ...htmlProps, onMouseDown: (e) => e.preventDefault() }), ref: setFloatingRef, style: { ...style, ...floatingStyles }, className: cx(e("popup"), className), "data-open": isOpen, children: children }));
+    return (_jsx(UiFloatingPanel, { anchor: anchorRef, isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", width: "same-as-anchor", padding: "listbox", closeOnOutsideClick: true, accessibilityConfig: { role: undefined }, style: style, children: _jsx("div", { onMouseDown: (event) => event.preventDefault(), children: children }) }));
 }

package/esm/@ui/UiCombobox/types.d.ts

@@ -1,5 +1,4 @@
-import type { ReferenceType, UseInteractionsReturn } from "@floating-ui/react";
-import type { CSSProperties, KeyboardEvent } from "react";
+import type { KeyboardEvent, RefObject } from "react";
 /** @internal */
 export interface IUiComboboxOption {
     id: string;
@@ -22,7 +21,10 @@ export interface IUiComboboxParams {
      */
     defaultValue?: string;
     /**
-     * Event handler called when the selected value of the combobox changes.
+     * Called whenever the input value changes — on typing, on Escape reset,
+     * and when an option is selected. The combobox is fully controlled when
+     * paired with `value`; consumers that need to distinguish selection from
+     * typing should inspect the current `selectedOption` state.
      */
     onValueChange?: (value: string) => void;
     /**
@@ -45,13 +47,19 @@ export interface IUiComboboxState {
     selectOption: (option: IUiComboboxOption, index?: number) => void;
     isOpen: boolean;
     setIsOpen: (isOpen: boolean) => void;
-    setReferenceRef: (node: ReferenceType | null) => void;
-    setFloatingRef: (node: HTMLDivElement | null) => void;
+    /**
+     * Drives popup visibility. Sync combobox sets it to `availableOptions.length > 0`;
+     * async sources keep it `true` so status rows (loading / error / no-match) can show.
+     */
+    shouldRenderPopup: boolean;
+    /** Anchor for the popup — typically the input's outer wrapper, so the popup matches the visible field width. */
+    anchorRef: RefObject<HTMLElement | null>;
     registerItemRef: (node: HTMLElement | null, index: number) => void;
-    getReferenceProps: UseInteractionsReturn["getReferenceProps"];
-    getFloatingProps: UseInteractionsReturn["getFloatingProps"];
-    getItemProps: UseInteractionsReturn["getItemProps"];
-    floatingStyles: CSSProperties;
     creatable: boolean;
+    /**
+     * Stable id of the `<ul role="listbox">`. The input advertises it via
+     * `aria-controls`; the listbox sets it as its `id`.
+     */
+    listboxId: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/esm/@ui/UiCombobox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE1D,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,cAAc,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC9C,YAAY,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,eAAe,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnE,iBAAiB,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;IAC9D,gBAAgB,EAAE,qBAAqB,CAAC,kBAAkB,CAAC,CAAC;IAC5D,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAC;IACpD,cAAc,EAAE,aAAa,CAAC;IAE9B,SAAS,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,gBAAgB;AAChB,MAAM,WAAW,iBAAiB;IAC9B;;OAEG;IACH,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,gBAAgB;AAChB,MAAM,WAAW,gBAAgB;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB,gBAAgB,EAAE,iBAAiB,EAAE,CAAC;IACtC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,YAAY,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,cAAc,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC9C,YAAY,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kHAAgH;IAChH,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnE,SAAS,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;CACrB"}

package/esm/@ui/UiCombobox/useCombobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/useCombobox.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAqB,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGzF,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,gBAAgB,CA0IvE"}
+{"version":3,"file":"useCombobox.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/useCombobox.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAkBtE,gBAAgB;AAChB,wBAAgB,WAAW,CAAC,MAAM,EAAE,iBAAiB,GAAG,gBAAgB,CAuEvE"}

package/esm/@ui/UiCombobox/useCombobox.js

@@ -1,169 +1,74 @@
 // (C) 2025-2026 GoodData Corporation
-import { useCallback, useMemo, useRef, useState } from "react";
-import { autoUpdate, flip, size, useClick, useDismiss, useFloating, useInteractions, useListNavigation, useRole, } from "@floating-ui/react";
-import { normalizeValue } from "./utils.js";
+import { useId, useMemo } from "react";
+import { makeKeyboardNavigation } from "../@utils/keyboardNavigation.js";
+import { useComboboxChrome } from "./useComboboxChrome.js";
+import { useComboboxSelection } from "./useComboboxSelection.js";
+// Omit handlers where we want default behavior to fall through —
+// `makeKeyboardNavigation` preventDefaults every registered action.
+const comboboxKeys = makeKeyboardNavigation({
+    onArrowDown: [{ code: "ArrowDown" }],
+    onArrowUp: [{ code: "ArrowUp" }],
+    onEnter: [{ code: ["Enter", "NumpadEnter"] }],
+    onEscape: [{ code: "Escape" }],
+});
 /** @internal */
 export function useCombobox(params) {
     const { value, defaultValue = "", onValueChange, options, creatable = false } = params;
-    const [inputValue, setInputValue] = useControlledValue({ value, defaultValue, onValueChange });
-    const isInputValueEmpty = inputValue.length === 0;
-    const [isOpen, setIsOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(null);
-    const [selectedOption, setSelectedOption] = useState(undefined);
-    const resetState = useCallback(() => {
-        setInputValue(defaultValue);
-        setActiveIndex(null);
-        setSelectedOption(undefined);
-    }, [defaultValue, setInputValue]);
-    const availableOptions = useMemo(() => {
-        const value = normalizeValue(inputValue);
-        const selectedValue = selectedOption ? normalizeValue(selectedOption.label) : undefined;
-        // Show all options when there is no value or the value is the same as the selected value
-        if (!value || value === selectedValue) {
-            return options;
-        }
-        const matchedOptions = options.filter((option) => normalizeValue(option.label).includes(value));
-        const hasExactMatch = matchedOptions.some((option) => normalizeValue(option.label) === value);
-        // Add a creatable option if there are multiple matches and none matches the input exactly
-        if (creatable && !hasExactMatch) {
-            matchedOptions.push({
-                id: `creatable/${inputValue}`,
-                label: inputValue,
-                creatable: true,
-            });
-        }
-        return matchedOptions;
-    }, [options, inputValue, selectedOption, creatable]);
-    const activeOption = activeIndex == null ? undefined : availableOptions[activeIndex];
-    const { setReferenceRef, setFloatingRef, floatingStyles, getReferenceProps, getFloatingProps, getItemProps, registerItemRef, } = useComboboxFloating({ isOpen, setIsOpen, activeIndex, setActiveIndex });
-    const handleSelectOption = useCallback((option, index) => {
-        if (index !== undefined) {
-            setActiveIndex(index);
-        }
-        setSelectedOption(option);
-        setIsOpen(false);
-        setInputValue(option.label);
-    }, [setInputValue]);
-    const handleInputChange = useCallback((inputValue) => {
-        setInputValue(inputValue);
-        setIsOpen(true);
-    }, [setInputValue]);
-    const handleInputKeyDown = useCallback((event) => {
-        if (event.key === "Escape" && !isOpen && !isInputValueEmpty) {
-            event.stopPropagation();
-            resetState();
-        }
-        if (event.key === "Enter" && activeOption) {
-            event.preventDefault();
-            handleSelectOption(activeOption);
-        }
-    }, [activeOption, isInputValueEmpty, isOpen, handleSelectOption, resetState]);
-    const handleInputBlur = useCallback(() => {
-        if (inputValue && selectedOption && inputValue !== selectedOption.label && !creatable) {
-            setInputValue(selectedOption.label);
-        }
-        setIsOpen(false);
-    }, [inputValue, selectedOption, setInputValue, creatable]);
-    return useMemo(() => ({
-        availableOptions,
-        inputValue,
-        isOpen,
-        setIsOpen,
-        onInputChange: handleInputChange,
-        onInputKeyDown: handleInputKeyDown,
-        onInputBlur: handleInputBlur,
-        activeIndex,
-        setActiveIndex,
-        activeOption,
-        selectedOption,
-        selectOption: handleSelectOption,
-        setReferenceRef,
-        setFloatingRef,
-        registerItemRef,
-        getReferenceProps,
-        getFloatingProps,
-        getItemProps,
-        floatingStyles,
+    const listboxId = useId();
+    const selection = useComboboxSelection({
+        options,
+        value,
+        defaultValue,
+        onValueChange,
         creatable,
-    }), [
-        availableOptions,
-        inputValue,
-        isOpen,
-        handleInputChange,
-        handleInputKeyDown,
-        handleInputBlur,
-        activeIndex,
+        setIsOpen: (open) => chrome.setIsOpen(open),
+    });
+    const chrome = useComboboxChrome(selection.availableOptions);
+    const activeOption = chrome.activeOption;
+    const onInputKeyDown = useMemo(() => {
+        // Leave Enter unhandled when there's no selectable target so creatable
+        // flows like UiTags (add tag on unhandled Enter) can react to it.
+        const onEnter = chrome.isOpen && activeOption
+            ? activeOption.disabled
+                ? () => undefined
+                : () => selection.selectOption(activeOption)
+            : undefined;
+        // Leave Escape unhandled when idle so the enclosing modal can dismiss.
+        const hasSomethingToClose = chrome.isOpen || selection.inputValue.length > 0;
+        const onEscape = hasSomethingToClose
+            ? (event) => {
+                event.nativeEvent.stopPropagation();
+                if (chrome.isOpen) {
+                    chrome.setIsOpen(false);
+                    return;
+                }
+                selection.resetState();
+            }
+            : undefined;
+        return comboboxKeys({
+            onArrowDown: () => chrome.focusByDelta(1),
+            onArrowUp: () => chrome.focusByDelta(-1),
+            onEnter,
+            onEscape,
+        });
+    }, [chrome, selection, activeOption]);
+    return useMemo(() => ({
+        availableOptions: selection.availableOptions,
+        inputValue: selection.inputValue,
+        isOpen: chrome.isOpen,
+        setIsOpen: chrome.setIsOpen,
+        onInputChange: selection.onInputChange,
+        onInputKeyDown,
+        onInputBlur: selection.onInputBlur,
+        activeIndex: chrome.activeIndex,
+        setActiveIndex: chrome.setActiveIndex,
         activeOption,
-        selectedOption,
-        handleSelectOption,
-        setReferenceRef,
-        setFloatingRef,
-        registerItemRef,
-        getReferenceProps,
-        getFloatingProps,
-        getItemProps,
-        floatingStyles,
+        selectedOption: selection.selectedOption,
+        selectOption: selection.selectOption,
+        anchorRef: chrome.anchorRef,
+        registerItemRef: chrome.registerItemRef,
+        shouldRenderPopup: selection.availableOptions.length > 0,
         creatable,
-    ]);
-}
-function useControlledValue(params) {
-    const { value, defaultValue, onValueChange } = params;
-    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-    const isControlled = value !== undefined;
-    const controlledValue = isControlled ? value : uncontrolledValue;
-    const setControlledValue = useCallback((newValue) => {
-        if (isControlled) {
-            onValueChange?.(newValue);
-        }
-        else {
-            setUncontrolledValue(newValue);
-        }
-    }, [isControlled, onValueChange]);
-    return [controlledValue, setControlledValue];
-}
-function useComboboxFloating(params) {
-    const { isOpen, setIsOpen, activeIndex, setActiveIndex } = params;
-    const listRef = useRef([]);
-    const { refs, floatingStyles, context } = useFloating({
-        placement: "bottom-start",
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        whileElementsMounted: autoUpdate,
-        middleware: [
-            flip(),
-            size({
-                apply({ rects, elements }) {
-                    elements.floating.style.width = `${rects.reference.width}px`;
-                },
-            }),
-        ],
-    });
-    const listNav = useListNavigation(context, {
-        listRef,
-        activeIndex,
-        onNavigate: setActiveIndex,
-        virtual: true,
-        loop: true,
-    });
-    const click = useClick(context);
-    const dismiss = useDismiss(context);
-    const role = useRole(context, { role: "combobox" });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        listNav,
-        click,
-        dismiss,
-        role,
-    ]);
-    const registerItemRef = useCallback((node, index) => {
-        listRef.current[index] = node;
-    }, []);
-    return {
-        setReferenceRef: refs.setReference,
-        setFloatingRef: refs.setFloating,
-        floatingStyles,
-        getReferenceProps,
-        getFloatingProps,
-        getItemProps,
-        registerItemRef,
-    };
+        listboxId,
+    }), [chrome, selection, onInputKeyDown, activeOption, creatable, listboxId]);
 }

package/esm/@ui/UiCombobox/useComboboxChrome.d.ts

@@ -0,0 +1,20 @@
+import type { IUiComboboxOption, IUiComboboxState } from "./types.js";
+type IUseComboboxChromeReturn = Pick<IUiComboboxState, "isOpen" | "setIsOpen" | "activeIndex" | "setActiveIndex" | "anchorRef" | "registerItemRef"> & {
+    /** The currently highlighted option, or undefined. */
+    activeOption: IUiComboboxOption | undefined;
+    /** Open the popup if needed and move the highlight by `delta`, wrapping around. */
+    focusByDelta: (delta: 1 | -1) => void;
+};
+/**
+ * Owns popup open/close, highlight, and scroll. The highlight is tracked by
+ * option **id**, not index: when the option list changes (async results arrive,
+ * a row is filtered out) a highlighted row that's gone simply resolves to no
+ * index, so the highlight can never point at a different row than the user
+ * navigated to. Callers pass the current `options` so the id ⇄ index mapping
+ * and `focusByDelta` wrapping stay in sync with what's rendered.
+ *
+ * @internal
+ */
+export declare function useComboboxChrome(options: IUiComboboxOption[]): IUseComboboxChromeReturn;
+export {};
+//# sourceMappingURL=useComboboxChrome.d.ts.map

package/esm/@ui/UiCombobox/useComboboxChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxChrome.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/useComboboxChrome.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEtE,KAAK,wBAAwB,GAAG,IAAI,CAChC,gBAAgB,EAChB,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,iBAAiB,CAC9F,GAAG;IACA,sDAAsD;IACtD,YAAY,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,mFAAmF;IACnF,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,iBAAiB,EAAE,GAAG,wBAAwB,CA6FxF"}

package/esm/@ui/UiCombobox/useComboboxChrome.js

@@ -0,0 +1,89 @@
+// (C) 2026 GoodData Corporation
+import { useCallback, useMemo, useRef, useState } from "react";
+/**
+ * Owns popup open/close, highlight, and scroll. The highlight is tracked by
+ * option **id**, not index: when the option list changes (async results arrive,
+ * a row is filtered out) a highlighted row that's gone simply resolves to no
+ * index, so the highlight can never point at a different row than the user
+ * navigated to. Callers pass the current `options` so the id ⇄ index mapping
+ * and `focusByDelta` wrapping stay in sync with what's rendered.
+ *
+ * @internal
+ */
+export function useComboboxChrome(options) {
+    const [isOpen, setIsOpenState] = useState(false);
+    const [activeId, setActiveId] = useState(null);
+    // A highlight only has meaning while the popup is open, so closing always
+    // drops it — reopening then starts fresh. This is the single point that
+    // keeps a stale highlight from surviving Escape / blur / reset and being
+    // Enter-selected on the next open.
+    const setIsOpen = useCallback((open) => {
+        setIsOpenState(open);
+        if (!open) {
+            setActiveId(null);
+        }
+    }, []);
+    const anchorRef = useRef(null);
+    const itemRefs = useRef([]);
+    // Target index for when the scroll request runs before the item mounts.
+    const pendingScrollIndexRef = useRef(null);
+    const activeIndex = activeId == null ? null : options.findIndex((o) => o.id === activeId);
+    // findIndex returns -1 for a vanished row; surface that as "no highlight".
+    const safeActiveIndex = activeIndex != null && activeIndex >= 0 ? activeIndex : null;
+    const activeOption = safeActiveIndex == null ? undefined : options[safeActiveIndex];
+    const scrollIndexIntoView = useCallback((index) => {
+        const node = itemRefs.current[index];
+        if (node) {
+            pendingScrollIndexRef.current = null;
+            node.scrollIntoView({ block: "nearest" });
+        }
+        else {
+            pendingScrollIndexRef.current = index;
+        }
+    }, []);
+    const registerItemRef = useCallback((node, index) => {
+        itemRefs.current[index] = node;
+        if (node != null && pendingScrollIndexRef.current === index) {
+            pendingScrollIndexRef.current = null;
+            node.scrollIntoView({ block: "nearest" });
+        }
+    }, []);
+    const setActiveIndex = useCallback((index) => setActiveId(index == null ? null : (options[index]?.id ?? null)), [options]);
+    const focusByDelta = useCallback((delta) => {
+        const total = options.length;
+        if (total === 0) {
+            setIsOpen(true);
+            return;
+        }
+        // Resolve against the current list so a stale/removed highlight still
+        // produces a sensible next target.
+        const current = safeActiveIndex;
+        const next = !isOpen || current == null
+            ? delta === 1
+                ? 0
+                : total - 1
+            : (current + delta + total) % total;
+        setIsOpen(true);
+        setActiveId(options[next]?.id ?? null);
+        scrollIndexIntoView(next);
+    }, [isOpen, options, safeActiveIndex, scrollIndexIntoView, setIsOpen]);
+    return useMemo(() => ({
+        isOpen,
+        setIsOpen,
+        activeIndex: safeActiveIndex,
+        activeOption,
+        setActiveIndex,
+        anchorRef,
+        registerItemRef,
+        focusByDelta,
+    }), [
+        isOpen,
+        setIsOpen,
+        safeActiveIndex,
+        activeOption,
+        setActiveIndex,
+        anchorRef,
+        registerItemRef,
+        focusByDelta,
+    ]);
+}

package/esm/@ui/UiCombobox/useComboboxSelection.d.ts

@@ -0,0 +1,23 @@
+import type { IUiComboboxOption } from "./types.js";
+/** @internal */
+export interface IUseComboboxSelectionParams {
+    options: IUiComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    creatable?: boolean;
+    setIsOpen: (open: boolean) => void;
+}
+/**
+ * @internal
+ */
+export declare function useComboboxSelection({ options, value, defaultValue, onValueChange, creatable, setIsOpen }: IUseComboboxSelectionParams): {
+    availableOptions: IUiComboboxOption[];
+    inputValue: string;
+    onInputChange: (next: string) => void;
+    onInputBlur: () => void;
+    selectedOption: IUiComboboxOption | undefined;
+    selectOption: (option: IUiComboboxOption) => void;
+    resetState: () => void;
+};
+//# sourceMappingURL=useComboboxSelection.d.ts.map

package/esm/@ui/UiCombobox/useComboboxSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxSelection.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/useComboboxSelection.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAGpD,gBAAgB;AAChB,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,SAAiB,EACjB,SAAS,EACZ,EAAE,2BAA2B;;;;;;;;EA4E7B"}

package/esm/@ui/UiCombobox/useComboboxSelection.js

@@ -0,0 +1,78 @@
+// (C) 2026 GoodData Corporation
+import { useCallback, useMemo, useState } from "react";
+import { normalizeValue } from "./utils.js";
+/**
+ * @internal
+ */
+export function useComboboxSelection({ options, value, defaultValue = "", onValueChange, creatable = false, setIsOpen, }) {
+    const [inputValue, setInputValue] = useControlledValue({ value, defaultValue, onValueChange });
+    const [selectedOption, setSelectedOption] = useState(undefined);
+    const resetState = useCallback(() => {
+        setInputValue(defaultValue);
+        setSelectedOption(undefined);
+    }, [defaultValue, setInputValue]);
+    const availableOptions = useMemo(() => {
+        const value = normalizeValue(inputValue);
+        const selectedValue = selectedOption ? normalizeValue(selectedOption.label) : undefined;
+        // Show all options when there is no value or the value is the same as the selected value
+        if (!value || value === selectedValue) {
+            return options;
+        }
+        const matchedOptions = options.filter((option) => normalizeValue(option.label).includes(value));
+        const hasExactMatch = matchedOptions.some((option) => normalizeValue(option.label) === value);
+        // Add a creatable option if there are multiple matches and none matches the input exactly
+        if (creatable && !hasExactMatch) {
+            matchedOptions.push({
+                id: `creatable/${inputValue}`,
+                label: inputValue,
+                creatable: true,
+            });
+        }
+        return matchedOptions;
+    }, [options, inputValue, selectedOption, creatable]);
+    const selectOption = useCallback((option) => {
+        // Hover sets the highlight without checking `disabled`, so without
+        // this guard a disabled row could be Enter-confirmed even though
+        // clicking it is blocked in the list item.
+        if (option.disabled) {
+            return;
+        }
+        setSelectedOption(option);
+        setIsOpen(false);
+        setInputValue(option.label);
+    }, [setIsOpen, setInputValue]);
+    const onInputChange = useCallback((next) => {
+        setInputValue(next);
+        setIsOpen(true);
+    }, [setInputValue, setIsOpen]);
+    const onInputBlur = useCallback(() => {
+        if (inputValue && selectedOption && inputValue !== selectedOption.label && !creatable) {
+            setInputValue(selectedOption.label);
+        }
+        setIsOpen(false);
+    }, [inputValue, selectedOption, setInputValue, creatable, setIsOpen]);
+    return useMemo(() => ({
+        availableOptions,
+        inputValue,
+        onInputChange,
+        onInputBlur,
+        selectedOption,
+        selectOption,
+        resetState,
+    }), [availableOptions, inputValue, onInputChange, onInputBlur, selectedOption, selectOption, resetState]);
+}
+function useControlledValue(params) {
+    const { value, defaultValue, onValueChange } = params;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const controlledValue = isControlled ? value : uncontrolledValue;
+    const setControlledValue = useCallback((newValue) => {
+        if (isControlled) {
+            onValueChange?.(newValue);
+        }
+        else {
+            setUncontrolledValue(newValue);
+        }
+    }, [isControlled, onValueChange]);
+    return [controlledValue, setControlledValue];
+}

package/esm/@ui/UiDropdown/UiDropdown.js

@@ -5,7 +5,7 @@ import { usePropState } from "@gooddata/sdk-ui";
 import { isElementTextInput } from "../../utils/domUtilities.js";
 import { useId } from "../../utils/useId.js";
 import { bem } from "../@utils/bem.js";
-import { UiFloatingElement } from "../UiFloatingElement/UiFloatingElement.js";
+import { UiFloatingPanel } from "../UiFloatingPanel/UiFloatingPanel.js";
 import { UiFocusManager } from "../UiFocusManager/UiFocusManager.js";
 import { resolveRef } from "../UiFocusManager/utils.js";
 const { e } = bem("gd-ui-kit-dropdown");
@@ -118,9 +118,9 @@ export function UiDropdown({ renderButton, renderBody, isOpen: isOpenProp, onOpe
         },
     }), [closeDropdown, dropdownId]);
     return (_jsxs(_Fragment, { children: [
-            _jsx("div", { ref: buttonWrapperRef, id: buttonId, className: e("button", { fullWidth: !!fullWidthButton }), onKeyDown: handleKeyDown, children: renderButton(buttonRenderProps) }), _jsx(UiFloatingElement, { anchor: buttonWrapperRef, isOpen: isOpen, onClose: closeDropdown, placement: placement, offset: offset, alignPoints: alignPoints, closeOnOutsideClick: closeOnOutsideClick, closeOnEscape: closeOnEscape, closeOnParentScroll: closeOnParentScroll, closeOnMouseDrag: closeOnMouseDrag, ignoreClicksOn: ignoreClicksOnByClass, zIndex: zIndex, width: width, accessibilityConfig: {
+            _jsx("div", { ref: buttonWrapperRef, id: buttonId, className: e("button", { fullWidth: !!fullWidthButton }), onKeyDown: handleKeyDown, children: renderButton(buttonRenderProps) }), _jsx(UiFloatingPanel, { anchor: buttonWrapperRef, isOpen: isOpen, onClose: closeDropdown, placement: placement, offset: offset, alignPoints: alignPoints, closeOnOutsideClick: closeOnOutsideClick, closeOnEscape: closeOnEscape, closeOnParentScroll: closeOnParentScroll, closeOnMouseDrag: closeOnMouseDrag, ignoreClicksOn: ignoreClicksOnByClass, zIndex: zIndex, width: width, accessibilityConfig: {
                     role: accessibilityConfig?.popupRole ?? "dialog",
                     ariaLabelledBy: buttonId,
-                }, children: _jsx(UiFocusManager, { tabOutHandler: enableFocusTrap ? undefined : handleTabOut, enableFocusTrap: enableFocusTrap, enableAutofocus: autofocusOnOpen ? { initialFocus } : false, enableReturnFocusOnUnmount: { returnFocusTo: returnFocusTo ?? buttonRef }, children: _jsx("div", { className: e("body"), children: renderBody(bodyRenderProps) }) }) })
+                }, children: _jsx(UiFocusManager, { tabOutHandler: enableFocusTrap ? undefined : handleTabOut, enableFocusTrap: enableFocusTrap, enableAutofocus: autofocusOnOpen ? { initialFocus } : false, enableReturnFocusOnUnmount: { returnFocusTo: returnFocusTo ?? buttonRef }, children: renderBody(bodyRenderProps) }) })
         ] }));
 }

package/esm/@ui/UiFloatingElement/UiFloatingElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiFloatingElement.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFloatingElement/UiFloatingElement.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAS1D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAA0B,EAC1B,WAAW,EACX,QAAqB,EACrB,MAAM,EACN,QAAe,EACf,mBAA0B,EAC1B,aAAqB,EACrB,mBAA2B,EAC3B,gBAAwB,EACxB,cAAuC,EACvC,kBAAkB,EAClB,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,KAAc,EACd,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,iBAAiB,EACpB,EAAE,uBAAuB,kDA0FzB"}
+{"version":3,"file":"UiFloatingElement.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiFloatingElement/UiFloatingElement.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAS1D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAA0B,EAC1B,WAAW,EACX,QAAqB,EACrB,MAAM,EACN,QAAe,EACf,mBAA0B,EAC1B,aAAqB,EACrB,mBAA2B,EAC3B,gBAAwB,EACxB,cAAuC,EACvC,kBAAkB,EAClB,MAAM,EAAE,UAAU,EAClB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,KAAc,EACd,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,iBAAiB,EACpB,EAAE,uBAAuB,kDA+FzB"}