@cube-dev/ui-kit 0.0.0-canary-8dfe8a6 → 0.0.0-canary-143cd5a

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8dfe8a6
+ * @cube-dev/ui-kit v0.0.0-canary-143cd5a
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.0.0-canary-8dfe8a6';
+    const version = '0.0.0-canary-143cd5a';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-8dfe8a6",
+  "version": "0.0.0-canary-143cd5a",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

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

@@ -1,44 +1,107 @@
-import { ForwardedRef, ReactElement, RefObject } from 'react';
-import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
-import { Section as BaseSection } from 'react-stately';
+import { Key } from '@react-types/shared';
+import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
+import { Section as BaseSection, Item } from 'react-stately';
 import { FieldBaseProps } from '../../../shared';
-import { Item } from '../../Item';
-import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
-import type { CubeSelectBaseProps } from '../Select';
+import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { CubeItemProps } from '../../Item';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
-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;
+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;
-    onSelectionChange?: (selectedKey: string | null) => void;
-    onInputChange?: (inputValue: string) => void;
+    /** The default selected key in uncontrolled mode */
+    defaultSelectedKey?: string | null;
+    /** Callback fired when selection changes */
+    onSelectionChange?: (key: string | null) => void;
+    /** The input value in controlled mode */
     inputValue?: string;
+    /** Callback fired when input value changes */
+    onInputChange?: (value: string) => void;
+    /** Placeholder text for the input */
     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;
+    /** 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);
     /**
-     * The filter function used to determine if a option should be included in the combo box list.
-     * Has no effect when `items` is provided.
+     * Custom filter function for determining if an option should be included.
+     * Pass `false` to disable internal filtering completely.
      */
-    filter?: FilterFn;
-    size?: 'small' | 'medium' | 'large' | (string & {});
-    suffixPosition?: 'before' | 'after';
-    menuTrigger?: MenuTriggerAction;
+    filter?: FilterFn | false;
+    /** Whether to allow entering custom values that are not in the predefined options */
     allowsCustomValue?: boolean;
-    /** Whether the combo box is clearable using ESC keyboard button or clear button inside the input */
+    /** Whether the combobox is clearable using ESC key or clear button */
     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 input wrapper */
+    wrapperStyles?: Styles;
+    /** Custom styles for the trigger button */
+    triggerStyles?: 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';
+    /** Custom label to display when no results are found after filtering */
+    emptyLabel?: ReactNode;
+    /** 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';
+    /**
+     * Props to apply to existing custom values.
+     */
+    customValueProps?: Partial<CubeItemProps<T>>;
+    /**
+     * Props to apply to new custom values.
+     */
+    newCustomValueProps?: Partial<CubeItemProps<T>>;
 }
 export declare const ComboBox: (<T>(props: CubeComboBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

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

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

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

@@ -0,0 +1,49 @@
+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

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

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

@@ -57,6 +57,11 @@ 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/index.d.ts

@@ -12,6 +12,7 @@ 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';