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

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

@@ -1,6 +1,24 @@
-import { type InputHTMLAttributes } from "react";
+import { type FocusEvent, type KeyboardEvent, type MouseEvent } from "react";
 /** @internal */
-export type UiComboboxInputProps = InputHTMLAttributes<HTMLInputElement>;
-/** @internal */
-export declare const UiComboboxInput: import("react").ForwardRefExoticComponent<UiComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface IUiComboboxInputProps {
+    /** Accessible name for the input. */
+    "aria-label"?: string;
+    /** Visible placeholder. */
+    placeholder?: string;
+    /** Form field name forwarded to the underlying input. */
+    name?: string;
+    autoFocus?: boolean;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (event: MouseEvent<HTMLInputElement>) => void;
+    dataTestId?: string;
+}
+/**
+ * Binds `UiTextInput` to the surrounding `UiCombobox` state: value, keyboard
+ * handler, open/close, ARIA combobox+listbox attributes.
+ *
+ * @internal
+ */
+export declare const UiComboboxInput: import("react").ForwardRefExoticComponent<IUiComboboxInputProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=UiComboboxInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UiComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,mBAAmB,EAG3B,MAAM,OAAO,CAAC;AAQf,gBAAgB;AAChB,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEzE,gBAAgB;AAChB,eAAO,MAAM,eAAe,mHAqD3B,CAAC"}
+{"version":3,"file":"UiComboboxInput.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,UAAU,EAIlB,MAAM,OAAO,CAAC;AAMf,gBAAgB;AAChB,MAAM,WAAW,qBAAqB;IAClC,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,oHAsF3B,CAAC"}

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

@@ -1,37 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// (C) 2025 GoodData Corporation
-import { forwardRef, } from "react";
-import { useMergeRefs } from "@floating-ui/react";
-import cx from "classnames";
-import { e } from "./comboboxBem.js";
+// (C) 2025-2026 GoodData Corporation
+import { forwardRef, useCallback, } from "react";
+import { UiTextInput } from "../UiTextInput/UiTextInput.js";
 import { useComboboxState } from "./UiComboboxContext.js";
-/** @internal */
+/**
+ * Binds `UiTextInput` to the surrounding `UiCombobox` state: value, keyboard
+ * handler, open/close, ARIA combobox+listbox attributes.
+ *
+ * @internal
+ */
 export const UiComboboxInput = forwardRef(function UiComboboxInput(props, forwardedRef) {
-    const { type, className, ...htmlInputProps } = props;
-    const { inputValue, onInputChange, onInputKeyDown, onInputBlur, setReferenceRef, getReferenceProps, activeOption, } = useComboboxState();
-    const ref = useMergeRefs([forwardedRef, setReferenceRef]);
-    const referenceProps = getReferenceProps({
-        ...htmlInputProps,
-        autoComplete: "off",
-        autoCapitalize: "none",
-        autoCorrect: "off",
-        // Most of the aria attributes already come from `getReferenceProps`
-        "aria-activedescendant": activeOption?.id,
-        "aria-autocomplete": "list",
-        onKeyDown: handleKeyDown,
-        onBlur: handleBlur,
-    });
-    function handleChange(event) {
-        onInputChange(event.target.value);
-        htmlInputProps.onChange?.(event);
-    }
-    function handleKeyDown(event) {
+    const { "aria-label": ariaLabel, placeholder, name, autoFocus, onKeyDown: callerOnKeyDown, onFocus: callerOnFocus, onBlur: callerOnBlur, onClick: callerOnClick, dataTestId, } = props;
+    const { inputValue, onInputChange, onInputKeyDown, onInputBlur, isOpen, setIsOpen, anchorRef, activeOption, listboxId, } = useComboboxState();
+    const handleKeyDown = useCallback((event) => {
         onInputKeyDown(event);
-        htmlInputProps.onKeyDown?.(event);
-    }
-    function handleBlur(event) {
+        if (!event.isDefaultPrevented()) {
+            callerOnKeyDown?.(event);
+        }
+    }, [onInputKeyDown, callerOnKeyDown]);
+    const handleBlur = useCallback((event) => {
         onInputBlur();
-        htmlInputProps.onBlur?.(event);
-    }
-    return (_jsx("input", { ...referenceProps, ref: ref, className: cx(e("input"), className), type: type ?? "text", value: inputValue, onChange: handleChange }));
+        callerOnBlur?.(event);
+    }, [onInputBlur, callerOnBlur]);
+    // Click toggles open state (matches floating-ui's default `useClick`),
+    // so the user can also click to close. Focus alone doesn't open —
+    // Tab / programmatic focus shouldn't expand the listbox.
+    const handleClick = useCallback((event) => {
+        setIsOpen(!isOpen);
+        callerOnClick?.(event);
+    }, [isOpen, setIsOpen, callerOnClick]);
+    return (_jsx(UiTextInput, { inputRef: forwardedRef, wrapperRef: anchorRef, value: inputValue, onChange: onInputChange, name: name, placeholder: placeholder, autoFocus: autoFocus, 
+        // Browser autofill would overlap the listbox; the combobox
+        // owns its own typeahead so we suppress all native suggestions.
+        autoComplete: "off", autoCapitalize: "none", autoCorrect: "off", dataTestId: dataTestId, onKeyDown: handleKeyDown, onFocus: callerOnFocus, onBlur: handleBlur, onClick: handleClick, accessibilityConfig: {
+            role: "combobox",
+            ariaAutocomplete: "list",
+            ariaExpanded: isOpen,
+            ariaActiveDescendant: activeOption?.id,
+            ariaHaspopup: "listbox",
+            ariaControls: listboxId,
+            ariaLabel,
+        } }));
 });

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

@@ -7,6 +7,6 @@ import { useComboboxState } from "./UiComboboxContext.js";
 import { UiComboboxListItem } from "./UiComboboxListItem.js";
 /** @internal */
 export function UiComboboxList({ children, className, ...htmlProps }) {
-    const { availableOptions } = useComboboxState();
-    return (_jsx("ul", { role: "listbox", ...htmlProps, className: cx(e("list"), className), tabIndex: -1, children: availableOptions.map((option, index) => children ? (_jsx(Fragment, { children: children(option, index) }, option.id)) : (_jsx(UiComboboxListItem, { option: option, index: index }, option.id))) }));
+    const { availableOptions, listboxId } = useComboboxState();
+    return (_jsx("ul", { role: "listbox", ...htmlProps, id: listboxId, className: cx(e("list"), className), tabIndex: -1, children: availableOptions.map((option, index) => children ? (_jsx(Fragment, { children: children(option, index) }, option.id)) : (_jsx(UiComboboxListItem, { option: option, index: index }, option.id))) }));
 }

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

@@ -11,28 +11,18 @@ type UiComboboxListItemImplProps = IUiComboboxListItemProps & {
     isActive: boolean;
     isSelected: boolean;
     isDisabled: boolean;
-    getItemProps: IUiComboboxState["getItemProps"];
     registerItemRef: IUiComboboxState["registerItemRef"];
+    setActiveIndex: IUiComboboxState["setActiveIndex"];
     selectOption: IUiComboboxState["selectOption"];
 };
 export declare const UiComboboxListItemImpl: import("react").NamedExoticComponent<UiComboboxListItemImplProps>;
 /** @internal */
 export type UiComboboxListItemLabelProps = HTMLAttributes<HTMLSpanElement>;
-/**
- * Renders the primary label content within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export declare function UiComboboxListItemLabel(props: UiComboboxListItemLabelProps): import("react/jsx-runtime").JSX.Element;
 /** @internal */
 export type UiComboboxListItemCreatableLabelProps = HTMLAttributes<HTMLSpanElement>;
-/**
- * Renders the "creatable" label suffix within a combobox list item.
- * Use this component for composable customization of list item content.
- *
- * @internal
- */
+/** @internal */
 export declare function UiComboboxListItemCreatableLabel(props: UiComboboxListItemCreatableLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=UiComboboxListItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UiComboboxListItem.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAyB,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGtE,gBAAgB;AAChB,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC3E,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,wBAAwB,2CAmBjE;AAED,KAAK,2BAA2B,GAAG,wBAAwB,GAAG;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC/C,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,sBAAsB,mEAuDjC,CAAC;AAEH,gBAAgB;AAChB,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAO1E;AAED,gBAAgB;AAChB,MAAM,MAAM,qCAAqC,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpF;;;;;GAKG;AACH,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,qCAAqC,2CAO5F"}
+{"version":3,"file":"UiComboboxListItem.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiCombobox/UiComboboxListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAyB,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAGtE,gBAAgB;AAChB,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC3E,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,gBAAgB;AAChB,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,wBAAwB,2CAoBjE;AAED,KAAK,2BAA2B,GAAG,wBAAwB,GAAG;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACrD,cAAc,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACnD,YAAY,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,sBAAsB,mEAyDjC,CAAC;AAEH,gBAAgB;AAChB,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAE3E,gBAAgB;AAChB,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAO1E;AAED,gBAAgB;AAChB,MAAM,MAAM,qCAAqC,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpF,gBAAgB;AAChB,wBAAgB,gCAAgC,CAAC,KAAK,EAAE,qCAAqC,2CAO5F"}

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,CA+EvE"}

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

@@ -1,169 +1,81 @@
 // (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 chrome = useComboboxChrome();
+    const selection = useComboboxSelection({
+        options,
+        value,
+        defaultValue,
+        onValueChange,
         creatable,
-    }), [
-        availableOptions,
-        inputValue,
-        isOpen,
-        handleInputChange,
-        handleInputKeyDown,
-        handleInputBlur,
-        activeIndex,
+        setIsOpen: chrome.setIsOpen,
+        setActiveIndex: chrome.setActiveIndex,
+    });
+    // Clamp on read so a filter that shrinks the list doesn't leave us
+    // pointing past the end (Enter would otherwise be a silent no-op).
+    const optionCount = selection.availableOptions.length;
+    const safeActiveIndex = chrome.activeIndex == null ? null : Math.min(chrome.activeIndex, optionCount - 1);
+    const activeOption = safeActiveIndex == null || optionCount === 0
+        ? undefined
+        : selection.availableOptions[safeActiveIndex];
+    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, optionCount),
+            onArrowUp: () => chrome.focusByDelta(-1, optionCount),
+            onEnter,
+            onEscape,
+        });
+    }, [chrome, selection, activeOption, optionCount]);
+    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: optionCount > 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, optionCount]);
 }

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

@@ -0,0 +1,9 @@
+import type { IUiComboboxState } from "./types.js";
+type IUseComboboxChromeReturn = Pick<IUiComboboxState, "isOpen" | "setIsOpen" | "activeIndex" | "setActiveIndex" | "anchorRef" | "registerItemRef"> & {
+    /** Open the popup if needed and move highlight by `delta`, wrapping at `total`. */
+    focusByDelta: (delta: 1 | -1, total: number) => void;
+};
+/** @internal */
+export declare function useComboboxChrome(): 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,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,KAAK,wBAAwB,GAAG,IAAI,CAChC,gBAAgB,EAChB,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,iBAAiB,CAC9F,GAAG;IACA,mFAAmF;IACnF,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,gBAAgB;AAChB,wBAAgB,iBAAiB,IAAI,wBAAwB,CAmE5D"}