@cube-dev/ui-kit 0.0.0-canary-e521c67 → 0.0.0-canary-810714b

package/types/components/fields/ComboBox/ComboBox.d.ts

@@ -1,105 +1,44 @@
-import { Key } from '@react-types/shared';
-import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
-import { Section as BaseSection, Item } from 'react-stately';
+import { ForwardedRef, ReactElement, RefObject } from 'react';
+import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
+import { Section as BaseSection } from 'react-stately';
 import { FieldBaseProps } from '../../../shared';
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { Item } from '../../Item';
+import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
+import type { CubeSelectBaseProps } from '../Select';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
-export type PopoverTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps {
-    /** The selected key in controlled mode */
-    selectedKey?: string | null;
-    /** The default selected key in uncontrolled mode */
+export type MenuTriggerAction = 'focus' | 'input' | 'manual';
+export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, Omit<AriaComboBoxProps<T>, 'errorMessage'>, Omit<AriaTextFieldProps, 'errorMessage'>, FieldBaseProps {
     defaultSelectedKey?: string | null;
-    /** Callback fired when selection changes */
-    onSelectionChange?: (key: string | null) => void;
-    /** The input value in controlled mode */
+    selectedKey?: string | null;
+    onSelectionChange?: (selectedKey: string | null) => void;
+    onInputChange?: (inputValue: string) => void;
     inputValue?: string;
-    /** Callback fired when input value changes */
-    onInputChange?: (value: string) => void;
-    /** Placeholder text for the input */
     placeholder?: string;
-    /** Whether the input should have autofocus */
-    autoFocus?: boolean;
-    /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */
-    popoverTrigger?: PopoverTriggerAction;
-    /** Items for the listbox (alternative to children) */
-    items?: Iterable<T>;
-    /** Children for the listbox (static items or render function) */
-    children?: ReactNode | ((item: T) => ReactElement);
+    icon?: ReactElement;
+    multiLine?: boolean;
+    autoComplete?: string;
+    wrapperRef?: RefObject<HTMLDivElement>;
+    inputRef?: RefObject<HTMLInputElement>;
+    /** The ref for the list box popover. */
+    popoverRef?: RefObject<HTMLDivElement>;
+    /** The ref for the list box. */
+    listBoxRef?: RefObject<HTMLElement>;
+    /** An optional keyboard delegate implementation, to override the default. */
+    keyboardDelegate?: KeyboardDelegate;
+    loadingState?: LoadingState;
     /**
-     * Custom filter function for determining if an option should be included.
-     * Pass `false` to disable internal filtering completely.
+     * The filter function used to determine if a option should be included in the combo box list.
+     * Has no effect when `items` is provided.
      */
-    filter?: FilterFn | false;
-    /** Whether to allow entering custom values that are not in the predefined options */
+    filter?: FilterFn;
+    size?: 'small' | 'medium' | 'large' | (string & {});
+    suffixPosition?: 'before' | 'after';
+    menuTrigger?: MenuTriggerAction;
     allowsCustomValue?: boolean;
-    /** Whether to commit custom value on blur in allowsCustomValue mode (default: true) */
-    shouldCommitOnBlur?: boolean;
-    /** Whether the combobox is clearable using ESC key or clear button */
+    /** Whether the combo box is clearable using ESC keyboard button or clear button inside the input */
     isClearable?: boolean;
     /** Callback called when the clear button is pressed */
     onClear?: () => void;
-    /** Left input icon */
-    icon?: ReactElement;
-    /** Input decoration before the main input */
-    prefix?: ReactNode;
-    /** Input decoration after the main input */
-    suffix?: ReactNode;
-    /** Whether to hide the trigger button */
-    hideTrigger?: boolean;
-    /** Size of the combobox */
-    size?: 'small' | 'medium' | 'large' | (string & {});
-    /** Ref for accessing the input element */
-    inputRef?: RefObject<HTMLInputElement>;
-    /** Ref for accessing the wrapper element */
-    wrapperRef?: RefObject<HTMLDivElement>;
-    /** Ref for accessing the listbox element */
-    listBoxRef?: RefObject<HTMLDivElement>;
-    /** Ref for accessing the popover element */
-    popoverRef?: RefObject<HTMLDivElement>;
-    /** Ref for accessing the trigger button element */
-    triggerRef?: RefObject<HTMLButtonElement>;
-    /** Custom styles for the input */
-    inputStyles?: Styles;
-    /** Custom styles for the trigger button */
-    triggerStyles?: Styles;
-    /** Custom styles for the field wrapper */
-    fieldStyles?: Styles;
-    /** Custom styles for the listbox */
-    listBoxStyles?: Styles;
-    /** Custom styles for the popover overlay */
-    overlayStyles?: Styles;
-    /** Custom styles for individual options */
-    optionStyles?: Styles;
-    /** Custom styles for sections */
-    sectionStyles?: Styles;
-    /** Custom styles for section headings */
-    headingStyles?: Styles;
-    /** Whether the combobox is disabled */
-    isDisabled?: boolean;
-    /** Whether the combobox is in loading state */
-    isLoading?: boolean;
-    /** Validation state of the combobox */
-    validationState?: 'valid' | 'invalid';
-    /** Keys of disabled items */
-    disabledKeys?: Iterable<Key>;
-    /** Whether to flip the popover placement */
-    shouldFlip?: boolean;
-    /** Placement direction for the popover */
-    direction?: 'bottom' | 'top';
-    /** Offset for the popover */
-    overlayOffset?: number;
-    /** Whether the combobox is read-only */
-    isReadOnly?: boolean;
-    /** Suffix position goes before or after the validation and loading statuses */
-    suffixPosition?: 'before' | 'after';
-    /**
-     * Sort selected item to the top when the popover opens.
-     * Only works when using the `items` prop (data-driven mode).
-     * Ignored when using JSX children.
-     * @default true when items are provided, false when using JSX children
-     */
-    sortSelectedToTop?: boolean;
 }
 export declare const ComboBox: (<T>(props: CubeComboBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/types/components/fields/ComboBox/index.d.ts

@@ -1,2 +1 @@
-export { ComboBox } from './ComboBox';
-export type { CubeComboBoxProps } from './ComboBox';
+export * from './ComboBox';

package/types/components/fields/FilterListBox/FilterListBox.d.ts

@@ -4,7 +4,6 @@ import { Section as BaseSection, Item } from 'react-stately';
 import { Styles } from '../../../tasty';
 import { CubeItemProps } from '../../Item';
 import { CubeListBoxProps } from '../ListBox/ListBox';
-import type { Collection, Node } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
 export interface CubeFilterListBoxProps<T> extends CubeListBoxProps<T>, FieldBaseProps {
@@ -65,12 +64,6 @@ export interface CubeFilterListBoxProps<T> extends CubeListBoxProps<T>, FieldBas
      * Use with `searchValue` for controlled search input.
      */
     onSearchChange?: (value: string) => void;
-    /**
-     * Pre-built collection to use instead of creating a new one.
-     * Used internally by FilterPicker to avoid duplicate collection creation.
-     * @internal
-     */
-    _internalCollection?: Collection<Node<any>>;
 }
 export declare const FilterListBox: (<T>(props: CubeFilterListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/types/components/fields/FilterPicker/FilterPicker.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
+import { ForwardedRef, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { Section as BaseSection, ListState } from 'react-stately';
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
 import { CubeItemButtonProps } from '../../actions';
@@ -47,20 +47,13 @@ export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>
         selectionMode?: 'single' | 'multiple';
     }) => ReactNode) | false;
     /** Ref to access internal ListBox state (from FilterListBox) */
-    listStateRef?: RefObject<ListState<T>>;
+    listStateRef?: MutableRefObject<ListState<T>>;
     /** Additional modifiers for styling the FilterPicker */
     mods?: Record<string, boolean>;
     /** Whether the filter picker is clearable using a clear button in the rightIcon slot */
     isClearable?: boolean;
     /** Callback called when the clear button is pressed */
     onClear?: () => void;
-    /**
-     * Sort selected items to the top when the popover opens.
-     * Only works when using the `items` prop (data-driven mode).
-     * Ignored when using JSX children.
-     * @default true when items are provided, false when using JSX children
-     */
-    sortSelectedToTop?: boolean;
 }
 export declare const FilterPicker: (<T>(props: CubeFilterPickerProps<T> & {
     ref?: ForwardedRef<HTMLElement>;

package/types/components/fields/ListBox/ListBox.d.ts

@@ -57,11 +57,6 @@ export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase
     mods?: Record<string, boolean>;
     /** Size variant of the ListBox */
     size?: 'medium' | 'large';
-    /**
-     * When `true`, clicking an already-selected item keeps it selected instead of toggling it off.
-     * Useful when embedding ListBox inside components like ComboBox.
-     */
-    disableSelectionToggle?: boolean;
     /**
      * Whether to use virtual focus for keyboard navigation.
      * When true, DOM focus stays outside individual option elements (useful for searchable lists).

package/types/components/fields/Select/Select.d.ts

@@ -61,7 +61,7 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     size?: 'small' | 'medium' | 'large' | (string & {});
     placeholder?: string;
 }
-export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, triggerRef, isDisabled, ...otherProps }: {
+export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, triggerRef, ...otherProps }: {
     [x: string]: any;
     state: any;
     popoverRef: any;
@@ -75,7 +75,6 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
     minWidth: any;
     size?: string | undefined;
     triggerRef: any;
-    isDisabled: any;
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;

package/types/components/fields/Switch/Switch.d.ts

@@ -3,8 +3,9 @@ import { FieldBaseProps } from '../../../shared';
 import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
 export interface CubeSwitchProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps, AriaSwitchProps {
     inputStyles?: Styles;
+    fieldStyles?: Styles;
     isLoading?: boolean;
-    size?: 'large' | 'small';
+    size?: 'large' | 'medium' | 'small';
 }
 /**
  * Switches allow users to turn an individual option on or off.

package/types/components/fields/index.d.ts

@@ -12,7 +12,6 @@ export * from './Slider';
 export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
-export * from './LegacyComboBox';
 export * from './ListBox';
 export * from './FilterListBox';
 export * from './FilterPicker';

package/types/components/layout/Prefix.d.ts

@@ -4,4 +4,4 @@ export interface CubePrefixProps extends BaseProps, ContainerStyleProps {
     onWidthChange?: Function;
     outerGap?: CSSProperties['gap'];
 }
-export declare const Prefix: import("react").ForwardRefExoticComponent<CubePrefixProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Prefix: import("react").ForwardRefExoticComponent<CubePrefixProps & import("react").RefAttributes<unknown>>;

package/types/components/layout/Suffix.d.ts

@@ -4,4 +4,4 @@ export interface CubeSuffixProps extends BaseProps, ContainerStyleProps {
     onWidthChange?: Function;
     outerGap?: CSSProperties['gap'];
 }
-export declare const Suffix: import("react").ForwardRefExoticComponent<CubeSuffixProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Suffix: import("react").ForwardRefExoticComponent<CubeSuffixProps & import("react").RefAttributes<unknown>>;

package/types/components/overlays/Tooltip/TooltipTrigger.d.ts

@@ -39,11 +39,6 @@ export interface CubeTooltipTriggerProps extends TooltipTriggerProps {
      * By default, opens for both focus and hover. Can be made to open only for focus.
      */
     trigger?: 'focus';
-    /**
-     * When true, FocusableProvider won't be applied to the trigger.
-     * Useful when trigger already handles focus or uses render props pattern.
-     */
-    disableFocusableProvider?: boolean;
 }
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing

package/types/components/overlays/Tooltip/context.d.ts

@@ -1,12 +1,10 @@
-import React, { HTMLAttributes, RefCallback, RefObject } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { TooltipTriggerState } from 'react-stately';
 import { PlacementAxis } from '../../../shared';
 import { Props } from '../../../tasty';
-type Phase = 'enter' | 'entered' | 'exit' | 'unmounted';
 interface TooltipContextProps {
     state?: TooltipTriggerState;
     ref?: RefObject<HTMLDivElement>;
-    transitionRef?: RefCallback<HTMLDivElement>;
     placement?: PlacementAxis;
     arrowProps?: HTMLAttributes<HTMLElement>;
     overlayProps?: Props;
@@ -14,9 +12,6 @@ interface TooltipContextProps {
     minOffset?: string | number;
     isMaterial?: boolean;
     isLight?: boolean;
-    phase?: Phase;
-    isShown?: boolean;
-    updatePosition?: () => void;
 }
 export declare const TooltipContext: React.Context<TooltipContextProps>;
 export {};

package/types/index.d.ts

@@ -28,8 +28,6 @@ export { ResizablePanel } from './components/layout/ResizablePanel';
 export type { CubeResizablePanelProps } from './components/layout/ResizablePanel';
 export { Root } from './components/Root';
 export type { CubeRootProps } from './components/Root';
-export { DisplayTransition } from './components/helpers/DisplayTransition/DisplayTransition';
-export type { DisplayTransitionProps } from './components/helpers/DisplayTransition/DisplayTransition';
 export type { NavigationAdapter, NavigateLike, Path, To, NavigateArg, NavigateOptions, RelativeRoutingType, } from './providers/navigation.types';
 export { defaultNavigationAdapter } from './providers/navigationAdapter.default';
 export { PrismCode } from './components/content/PrismCode/PrismCode';

package/types/utils/react/index.d.ts

@@ -5,7 +5,7 @@ export { mergeProps } from './mergeProps';
 export { modAttrs } from '../../tasty';
 export { useSlotProps, SlotProvider, ClearSlots } from './Slots';
 export { useLayoutEffect } from './useLayoutEffect';
-export { useCombinedRefs, mergeRefs } from './useCombinedRefs';
+export { useCombinedRefs } from './useCombinedRefs';
 export { wrapNodeIfPlain } from './wrapNodeIfPlain';
 export { useViewportSize } from './useViewportSize';
 export { useQaProps } from './useQaProps';

package/types/utils/react/useCombinedRefs.d.ts

@@ -1,3 +1,2 @@
-import { Ref, RefObject } from 'react';
-export declare function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): (value: T | null) => void;
-export declare function useCombinedRefs<T>(...refs: Array<Ref<T> | undefined>): RefObject<T>;
+import { RefObject } from 'react';
+export declare function useCombinedRefs(...refs: any[]): RefObject<any>;

package/es/components/fields/LegacyComboBox/LegacyComboBox.js

@@ -1,290 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e521c67
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
-import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
-import { Section as BaseSection, useComboBoxState } from 'react-stately';
-import { useEvent } from '../../../_internal/index';
-import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
-import { useProviderProps } from '../../../provider';
-import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
-import { generateRandomId } from '../../../utils/random';
-import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
-import { useFocus } from '../../../utils/react/interactions';
-import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemAction } from '../../actions';
-import { useFieldProps, useFormProps, wrapWithField } from '../../form';
-import { Item } from '../../Item';
-import { OverlayWrapper } from '../../overlays/OverlayWrapper';
-import { InvalidIcon } from '../../shared/InvalidIcon';
-import { ValidIcon } from '../../shared/ValidIcon';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
-import { ListBoxPopup } from '../Select';
-const LegacyComboBoxWrapperElement = tasty({
-    styles: INPUT_WRAPPER_STYLES,
-});
-const InputElement = tasty({
-    as: 'input',
-    styles: DEFAULT_INPUT_STYLES,
-});
-const TriggerElement = tasty({
-    as: 'button',
-    type: 'neutral',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        placeContent: 'center',
-        placeSelf: 'stretch',
-        radius: '(1r - 1bw) right',
-        padding: '0',
-        width: '3x',
-        boxSizing: 'border-box',
-        color: {
-            '': '#dark-02',
-            hovered: '#dark-02',
-            pressed: '#purple',
-            disabled: '#dark.30',
-        },
-        border: 'left',
-        reset: 'button',
-        margin: 0,
-        fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            pressed: '#purple.10',
-            disabled: '#clear',
-        },
-        cursor: 'pointer',
-    },
-});
-const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
-export const LegacyComboBox = forwardRef(function LegacyComboBox(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        valuePropsMapper: ({ value, onChange }) => {
-            return {
-                selectedKey: !props.allowsCustomValue ? value ?? null : undefined,
-                inputValue: props.allowsCustomValue ? value ?? '' : undefined,
-                onInputChange(val) {
-                    if (!props.allowsCustomValue) {
-                        return;
-                    }
-                    onChange(val);
-                },
-                onSelectionChange(val) {
-                    if (val == null && props.allowsCustomValue) {
-                        return;
-                    }
-                    onChange(val);
-                },
-            };
-        },
-    });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, ...otherProps } = props;
-    let isAsync = loadingState != null;
-    let { contains } = useFilter({ sensitivity: 'base' });
-    let comboBoxStateProps = {
-        ...props,
-        defaultFilter: filter || contains,
-        filter: undefined,
-        allowsEmptyCollection: isAsync,
-        menuTrigger,
-    };
-    let state = useComboBoxState(comboBoxStateProps);
-    // Generate a unique ID for this combobox instance
-    const comboBoxId = useMemo(() => generateRandomId(), []);
-    // Get event bus for menu synchronization
-    const { emit, on } = useEventBus();
-    // Listen for other menus opening and close this one if needed
-    useEffect(() => {
-        const unsubscribe = on('popover:open', (data) => {
-            // If another menu is opening and this combobox is open, close this one
-            if (data.menuId !== comboBoxId && state.isOpen) {
-                state.close();
-            }
-        });
-        return unsubscribe;
-    }, [on, comboBoxId, state]);
-    // Emit event when this combobox opens
-    useEffect(() => {
-        if (state.isOpen) {
-            emit('popover:open', { menuId: comboBoxId });
-        }
-    }, [state.isOpen, emit, comboBoxId]);
-    styles = extractStyles(otherProps, PROP_STYLES, styles);
-    ref = useCombinedRefs(ref);
-    wrapperRef = useCombinedRefs(wrapperRef);
-    inputRef = useCombinedRefs(inputRef);
-    triggerRef = useCombinedRefs(triggerRef);
-    popoverRef = useCombinedRefs(popoverRef);
-    listBoxRef = useCombinedRefs(listBoxRef);
-    let { overlayProps, placement, updatePosition } = useOverlayPosition({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = useComboBox({
-        ...comboBoxStateProps,
-        inputRef,
-        buttonRef: triggerRef,
-        listBoxRef,
-        popoverRef,
-        menuTrigger,
-    }, state);
-    let { isFocused, focusProps } = useFocus({ isDisabled });
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    // Get props for the button based on the trigger props from useComboBox
-    let { buttonProps, isPressed: isTriggerPressed } = useButton(triggerProps, triggerRef);
-    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
-    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
-    useLayoutEffect(() => {
-        if (state.isOpen) {
-            updatePosition();
-        }
-    }, [state.isOpen, state.collection.size]);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
-    let validation = cloneElement(validationIcon);
-    // Clear button logic
-    let hasValue = props.allowsCustomValue
-        ? state.inputValue !== ''
-        : state.selectedKey != null;
-    let showClearButton = isClearable && hasValue && !isDisabled && !props.isReadOnly;
-    // Clear function
-    let clearValue = useEvent(() => {
-        // Always clear input value in state so UI resets to placeholder
-        state.setInputValue('');
-        // Notify external input value only when custom value mode is enabled
-        if (props.allowsCustomValue) {
-            props.onInputChange?.('');
-        }
-        props.onSelectionChange?.(null);
-        state.setSelectedKey(null);
-        // Close the popup if it's open
-        if (state.isOpen) {
-            state.close();
-        }
-        // Focus back to the input
-        inputRef.current?.focus();
-        props.onClear?.();
-    });
-    let comboBoxWidth = wrapperRef?.current?.offsetWidth;
-    if (icon) {
-        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
-        if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
-        }
-        else {
-            prefix = icon;
-        }
-    }
-    let mods = useMemo(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        hovered: isHovered,
-        focused: isFocused,
-        loading: isLoading,
-        prefix: !!prefix,
-        suffix: true,
-        clearable: showClearButton,
-    }), [
-        isInvalid,
-        validationState,
-        isDisabled,
-        isHovered,
-        isFocused,
-        isLoading,
-        prefix,
-        showClearButton,
-    ]);
-    // If input is not full and the user presses Enter, pick the first option.
-    let onKeyPress = useEvent((e) => {
-        if (!props.onSelectionChange) {
-            return;
-        }
-        if (e.key === 'Enter') {
-            if (!props.allowsCustomValue) {
-                if (state.isOpen) {
-                    // If there is a selected option then do nothing. It will be selected on Enter anyway.
-                    if (listBoxRef.current?.querySelector('li[aria-selected="true"]')) {
-                        return;
-                    }
-                    const option = [...state.collection][0]?.key;
-                    if (option && selectedKey !== option) {
-                        props.onSelectionChange?.(option);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    }
-                }
-                else if (inputRef.current?.value &&
-                    ![...state.collection]
-                        .map((i) => i.textValue)
-                        .includes(inputRef.current?.value)) {
-                    // If the input value is not in the collection, we need to prevent the submitting of the form.
-                    // Also, we reset value manually.
-                    e.preventDefault();
-                    props.onSelectionChange?.(null);
-                }
-                // If a custom value is allowed, we need to check if the input value is in the collection.
-            }
-            else if (props.allowsCustomValue) {
-                const inputValue = inputRef?.current?.value;
-                const item = [...state.collection].find((item) => item.textValue.toLowerCase() === inputValue?.toLowerCase());
-                props.onSelectionChange?.(item ? item.key : inputRef?.current?.value ?? '');
-            }
-        }
-    });
-    let onBlur = useEvent((e) => {
-        // If the input value is not in the collection, we need to reset the value.
-        if (!props.allowsCustomValue &&
-            inputRef.current?.value &&
-            ![...state.collection]
-                .map((i) => i.textValue)
-                .includes(inputRef.current?.value)) {
-            props.onSelectionChange?.(null);
-        }
-    });
-    useEffect(() => {
-        inputRef.current?.addEventListener('keydown', onKeyPress, true);
-        inputRef.current?.addEventListener('blur', onBlur, true);
-        return () => {
-            inputRef.current?.removeEventListener('keydown', onKeyPress, true);
-            inputRef.current?.removeEventListener('blur', onBlur, true);
-        };
-    }, []);
-    let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
-    let comboBoxField = (_jsxs(LegacyComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'LegacyComboBox', mods: mods, styles: wrapperStyles, style: {
-            zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "LegacyComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "LegacyComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
-                            pressed: isTriggerPressed,
-                            focused: isTriggerFocused,
-                            hovered: isTriggerHovered,
-                            disabled: isDisabled,
-                            loading: isLoading,
-                        }, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(DownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth, triggerRef: triggerRef }) })] }));
-    return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, { labelProps }));
-});
-const LegacyComboBoxSectionComponent = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-LegacyComboBox.Item = Item;
-LegacyComboBox.Section = LegacyComboBoxSectionComponent;
-Object.defineProperty(LegacyComboBox, 'cubeInputType', {
-    value: 'LegacyComboBox',
-    enumerable: false,
-    configurable: false,
-});
-
-        

package/es/components/fields/LegacyComboBox/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e521c67
- * Released under the MIT license.
- */
-
-export * from './LegacyComboBox';
-
-