@cube-dev/ui-kit 0.84.0 → 0.85.1

package/types/components/content/ItemBase/ItemBase.d.ts

@@ -10,8 +10,18 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
     suffix?: ReactNode;
     description?: ReactNode;
     descriptionPlacement?: 'inline' | 'block' | 'auto';
+    /**
+     * Whether the item is selected.
+     * @default false
+     */
     isSelected?: boolean;
-    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | (string & {});
+    /**
+     * Actions to render inline or placeholder mode for ItemButton wrapper.
+     * - ReactNode: renders actions inline as part of the grid layout
+     * - true: placeholder mode for ItemButton (enables --actions-width calculation)
+     */
+    actions?: ReactNode | true;
+    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'inline' | number | (string & {});
     type?: 'item' | 'primary' | 'secondary' | 'outline' | 'neutral' | 'clear' | 'link' | (string & {});
     theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
     variant?: ItemVariant;
@@ -46,6 +56,10 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
      * and makes the component disabled.
      */
     isLoading?: boolean;
+    /**
+     * When true, applies card styling with increased border radius.
+     */
+    isCard?: boolean;
     /**
      * @private
      * Default tooltip placement for the item.
@@ -57,10 +71,11 @@ export interface CubeItemBaseProps extends BaseProps, ContainerStyleProps {
      */
     labelRef?: RefObject<HTMLElement>;
 }
-export declare function useAutoTooltip({ tooltip, children, labelProps, }: {
+export declare function useAutoTooltip({ tooltip, children, labelProps, isDynamicLabel, }: {
     tooltip: CubeItemBaseProps['tooltip'];
     children: ReactNode;
     labelProps?: Props;
+    isDynamicLabel?: boolean;
 }): {
     labelRef: (element: HTMLElement | null) => void;
     labelProps: {
@@ -71,5 +86,8 @@ export declare function useAutoTooltip({ tooltip, children, labelProps, }: {
     hasTooltip: boolean;
     renderWithTooltip: (renderElement: (tooltipTriggerProps?: HTMLAttributes<HTMLElement>, tooltipRef?: RefObject<HTMLElement>) => ReactNode, defaultTooltipPlacement: OverlayProps["placement"]) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 };
-declare const _ItemBase: import("react").ForwardRefExoticComponent<CubeItemBaseProps & import("react").RefAttributes<HTMLElement>>;
+declare const _ItemBase: import("react").ForwardRefExoticComponent<CubeItemBaseProps & import("react").RefAttributes<HTMLElement>> & {
+    Action: import("react").ForwardRefExoticComponent<Omit<import("../../actions/ItemAction").CubeItemActionProps, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+    Badge: import("react").ForwardRefExoticComponent<import("../ItemBadge").CubeItemBadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+};
 export { _ItemBase as ItemBase };

package/types/components/content/ItemBase/index.d.ts

@@ -1 +1,2 @@
 export * from './ItemBase';
+export * from '../ItemBadge';

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

@@ -1,4 +1,4 @@
-import { Key } from '@react-types/shared';
+import { FocusableRef, Key } from '@react-types/shared';
 import React, { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
 import { Section as BaseSection } from 'react-stately';
 import { FieldBaseProps } from '../../../shared';
@@ -23,6 +23,8 @@ export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyl
     placeholder?: string;
     /** Whether the input should have autofocus */
     autoFocus?: boolean;
+    /** HTML autocomplete attribute for the input */
+    autoComplete?: string;
     /** Callback fired when focus enters the component (input, trigger, or popover). Does not receive event object. */
     onFocus?: () => void;
     /** Callback fired when focus leaves the component entirely. Does not receive event object. */
@@ -69,7 +71,7 @@ export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyl
     /** Ref for accessing the popover element */
     popoverRef?: RefObject<HTMLDivElement>;
     /** Ref for accessing the trigger button element */
-    triggerRef?: RefObject<HTMLButtonElement>;
+    triggerRef?: FocusableRef<HTMLButtonElement>;
     /** Custom styles for the input */
     inputStyles?: Styles;
     /** Custom styles for the trigger button */

package/types/components/fields/DatePicker/DateInputBase.d.ts

@@ -13,6 +13,7 @@ interface CubeDateAtomInputProps extends ContainerStyleProps {
     size?: 'small' | 'medium' | 'large' | (string & {});
     validationState?: ValidationState;
     isLoading?: boolean;
+    suffix?: React.ReactNode;
 }
 declare const _DateInputBase: React.ForwardRefExoticComponent<CubeDateAtomInputProps & React.RefAttributes<unknown>>;
 export { _DateInputBase as DateInputBase };

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

@@ -56,7 +56,7 @@ export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase
     /** Additional modifiers for styling the ListBox */
     mods?: Record<string, boolean>;
     /** Size variant of the ListBox */
-    size?: 'medium' | 'large';
+    size?: 'small' | '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.

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

@@ -86,7 +86,10 @@ declare const __Select: (<T extends object>(props: CubeSelectProps<object> & {
     Item: typeof Item;
     Section: typeof SelectSectionComponent;
 } & {
-    Item: <T>(props: import("../../Item").CubeItemProps<T>) => ReactElement;
+    Item: (<T>(props: import("../../Item").CubeItemProps<T>) => ReactElement) & {
+        Action: React.ForwardRefExoticComponent<Omit<import("../../actions").CubeItemActionProps, "ref"> & React.RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+        Badge: React.ForwardRefExoticComponent<import("../../content/ItemBase").CubeItemBadgeProps & React.RefAttributes<HTMLDivElement>>;
+    };
     Section: any;
 };
 export { __Select as Select };

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/helpers/DisplayTransition/DisplayTransition.d.ts

@@ -7,6 +7,10 @@ export type DisplayTransitionProps = {
     duration?: number;
     /** Fires after enter settles or after exit completes (unmount). */
     onRest?: (transition: 'enter' | 'exit') => void;
+    /** Fires when phase changes. */
+    onPhaseChange?: (phase: Phase) => void;
+    /** Fires when isShown (derived from phase) changes. */
+    onToggle?: (isShown: boolean) => void;
     /** Keep calling children during "unmounted" (you decide what to render). */
     exposeUnmounted?: boolean;
     /** If false and initially shown, start at "entered" (no first-mount animation/SSR pop). */
@@ -20,5 +24,5 @@ export type DisplayTransitionProps = {
         ref: RefCallback<HTMLElement>;
     }) => ReactNode;
 };
-export declare function DisplayTransition({ isShown: targetShown, duration, onRest, exposeUnmounted, animateOnMount, respectReducedMotion, children, }: DisplayTransitionProps): ReactNode;
+export declare function DisplayTransition({ isShown: targetShown, duration, onRest, onPhaseChange, onToggle, exposeUnmounted, animateOnMount, respectReducedMotion, children, }: DisplayTransitionProps): ReactNode;
 export {};

package/types/data/item-themes.d.ts

@@ -1,5 +1,6 @@
 import { Styles } from 'src/tasty';
 export declare const VALIDATION_STYLES: Styles;
+export declare const ITEM_ACTION_BASE_STYLES: Styles;
 export declare const DEFAULT_PRIMARY_STYLES: Styles;
 export declare const DEFAULT_SECONDARY_STYLES: Styles;
 export declare const DEFAULT_OUTLINE_STYLES: Styles;

package/types/index.d.ts

@@ -9,6 +9,8 @@ export { Block } from './components/Block';
 export type { CubeBlockProps } from './components/Block';
 export { ItemBase } from './components/content/ItemBase/ItemBase';
 export type { CubeItemBaseProps } from './components/content/ItemBase/ItemBase';
+export { ItemBadge } from './components/content/ItemBadge/ItemBadge';
+export type { CubeItemBadgeProps } from './components/content/ItemBadge/ItemBadge';
 export { ActiveZone } from './components/content/ActiveZone/ActiveZone';
 export type { CubeActiveZoneProps } from './components/content/ActiveZone/ActiveZone';
 export * from './components/content/CopySnippet';
@@ -125,7 +127,7 @@ export { Portal } from './components/portal';
 export type { PortalProps } from './components/portal';
 export * from './components/fields';
 export type { TagName, AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, } from './tasty';
-export * from './utils/react';
+export * from './utils';
 export * from './tasty';
 export { default as copy } from 'clipboard-copy';
 export * from '@react-aria/ssr';

package/types/tokens.d.ts

@@ -5,6 +5,13 @@ export declare const SIZES: {
     LG: number;
     XL: number;
 };
+export declare const SIZES_MAP: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+};
 declare const TOKENS: {
     'font-size': string;
     'line-height': string;

package/types/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './react';
+export { chainRaf } from './raf';
+export { toFlatTree } from './tree';
+export { propDeprecationWarning } from './warnings';
+export { extractModule } from './modules';
+export { timeout } from './promise';
+export { random, generateRandomId } from './random';
+export { range } from './range';
+export { ResizeSensor } from './ResizeSensor';

package/types/utils/raf.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Chains N requestAnimationFrame calls and returns a cancel function.
+ * Useful for ensuring layout is complete before performing operations.
+ *
+ * @param callback - The function to call after N frames
+ * @param count - Number of RAF cycles to wait (default: 1)
+ * @returns A function to cancel the pending RAF call
+ *
+ * @example
+ * const cancel = chainRaf(() => {
+ *   updatePosition();
+ * }, 3);
+ *
+ * // Later, if needed:
+ * cancel();
+ */
+export declare function chainRaf(callback: () => void, count?: number): () => void;

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

@@ -1,290 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
- * 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, form, ...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/utils/transitions.js

@@ -1,63 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.84.0
- * Released under the MIT license.
- */
-
-const DIRECTION_MAP = {
-    initial: 'top center',
-    top: 'bottom center',
-    right: 'center left',
-    left: 'center right',
-    bottom: 'top center',
-};
-const TRANSLATE_MAP = {
-    initial: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-    top: 'translate(0px, calc(1 * var(--overlay-offset)))',
-    right: 'translate(calc(-1 * var(--overlay-offset)), 0px)',
-    left: 'translate(calc(1 * var(--overlay-offset)), 0px)',
-    bottom: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-};
-export const getOverlayTransitionCSS = ({ suffix = '', placement = 'initial', minScale = 0.8, minOffset = '8px', } = {}) => `
-  &${suffix} {
-    transform: var(--overlay-position);
-    transform-origin: ${DIRECTION_MAP[placement]};
-    --overlay-offset: ${minOffset};
-    --overlay-hidden-x-scale: ${placement === 'top' || placement === 'bottom' || placement === 'initial'
-    ? '1'
-    : minScale};
-    --overlay-hidden-y-scale: ${placement === 'left' || placement === 'right' ? '1' : minScale};
-    --overlay-translate-visible: translate(0px, 0px);
-    --overlay-translate-hidden: ${TRANSLATE_MAP[placement]};
-    --overlay-transition: 120ms;
-    --overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
-    --overlay-normal-scale: scale(1, 1);
-  }
-
-  &.cube-overlay-transition-enter${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-  }
-
-  &.cube-overlay-transition-enter-active${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-    transition: transform var(--overlay-transition) cubic-bezier(0, .66, 0, .66), opacity var(--overlay-transition) cubic-bezier(0, .66, 0, .66);
-    pointer-events: none;
-  }
-
-  &.cube-overlay-transition-exit${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-  }
-
-  &.cube-overlay-transition-exit-active${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-    pointer-events: none;
-    transition: transform var(--overlay-transition) cubic-bezier(.66, 0, .66, 0), opacity var(--overlay-transition) cubic-bezier(.66, 0, .66, 0);
-  }
-`;
-
-        

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

@@ -1,49 +0,0 @@
-import { ForwardedRef, ReactElement, RefObject } from 'react';
-import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
-import { FieldBaseProps } from '../../../shared';
-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 MenuTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeLegacyComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, Omit<AriaComboBoxProps<T>, 'errorMessage'>, Omit<AriaTextFieldProps, 'errorMessage'>, FieldBaseProps {
-    defaultSelectedKey?: string | null;
-    selectedKey?: string | null;
-    onSelectionChange?: (selectedKey: string | null) => void;
-    onInputChange?: (inputValue: string) => void;
-    inputValue?: string;
-    placeholder?: string;
-    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;
-    /**
-     * 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;
-    size?: 'small' | 'medium' | 'large' | (string & {});
-    suffixPosition?: 'before' | 'after';
-    menuTrigger?: MenuTriggerAction;
-    allowsCustomValue?: boolean;
-    /** 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;
-}
-export declare const LegacyComboBox: (<T>(props: CubeLegacyComboBoxProps<T> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement) & {
-    Item: typeof Item;
-    Section: typeof BaseSection;
-};
-export {};

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

@@ -1 +0,0 @@
-export * from './LegacyComboBox';

package/types/utils/transitions.d.ts

@@ -1,8 +0,0 @@
-export interface OverlayTransitionCSSProps {
-    suffix?: string;
-    placement?: string;
-    minScale?: string | number;
-    minOffset?: string;
-    forChild?: boolean;
-}
-export declare const getOverlayTransitionCSS: ({ suffix, placement, minScale, minOffset, }?: OverlayTransitionCSSProps) => string;