@cube-dev/ui-kit 0.69.0 → 0.69.2

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

@@ -5,35 +5,35 @@ import { Styles } from '../../../tasty';
 import { CubeListBoxProps } from '../ListBox/ListBox';
 import type { FieldBaseProps } from '../../../shared';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
-export interface CubeFilterListBoxProps<T> extends Omit<CubeListBoxProps<T>, 'children'>, FieldBaseProps {
+export interface CubeFilterListBoxProps<T> extends CubeListBoxProps<T>, FieldBaseProps {
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
     /** Whether the search input should have autofocus */
     autoFocus?: boolean;
-    /** The filter function used to determine if an option should be included in the filtered list */
+    /** Custom filter function for determining if an option should be included in search results */
     filter?: FilterFn;
     /** Custom label to display when no results are found after filtering */
     emptyLabel?: ReactNode;
     /** Custom styles for the search input */
     searchInputStyles?: Styles;
-    /** Whether the FilterListBox as a whole is loading (generic loading indicator) */
+    /** Whether the FilterListBox is in loading state (shows loading icon in search input) */
     isLoading?: boolean;
-    /** Ref for the search input */
+    /** Ref for accessing the search input element */
     searchInputRef?: RefObject<HTMLInputElement>;
-    /** Children (ListBox.Item and ListBox.Section elements) */
-    children?: ReactNode;
-    /** Allow entering a custom value that is not present in the options */
+    /** Whether to allow entering custom values that are not present in the predefined options */
     allowsCustomValue?: boolean;
-    /** Mods for the FilterListBox */
+    /** Additional modifiers for styling the FilterListBox */
     mods?: Record<string, boolean>;
+    /** Custom styles for the list box */
+    listBoxStyles?: Styles;
     /**
-     * Optional callback fired when the user presses `Escape` while the search input is empty.
+     * Callback fired when the user presses Escape key while the search input is empty.
      * Can be used by parent components (e.g. FilterPicker) to close an enclosing Dialog.
      */
     onEscape?: () => void;
     /**
-     * Whether the options in the FilterListBox are checkable.
-     * This adds a checkbox icon to the left of the option.
+     * Whether to show checkboxes for multiple selection mode.
+     * This adds a checkbox icon to the left of each option.
      */
     isCheckable?: boolean;
     /**

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

@@ -1,50 +1,54 @@
-import React, { ForwardedRef, ReactElement, ReactNode } from 'react';
+import { ForwardedRef, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { Section as BaseSection, Item } from 'react-stately';
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { CubeButtonProps } from '../../actions';
 import { CubeFilterListBoxProps } from '../FilterListBox/FilterListBox';
 import type { FieldBaseProps } from '../../../shared';
-export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'children'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps {
+export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps, Pick<CubeButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon'> {
     /** Placeholder text when no selection is made */
     placeholder?: string;
-    /** Icon to show in the trigger */
+    /** Icon to show in the trigger button */
     icon?: ReactElement;
-    /** Type of button styling */
+    /** Button styling type */
     type?: 'outline' | 'clear' | 'primary' | 'secondary' | 'neutral' | (string & {});
     /** Button theme */
     theme?: 'default' | 'special';
-    /** Size of the component */
+    /** Size of the picker component */
     size?: 'small' | 'medium' | 'large';
-    /** Children (FilterListBox.Item and FilterListBox.Section elements) */
-    children?: ReactNode;
-    /** Custom styles for the list box */
+    /** Custom styles for the list box popover */
     listBoxStyles?: Styles;
-    /** Custom styles for the popover */
+    /** Custom styles for the popover container */
     popoverStyles?: Styles;
-    /** Whether the filter picker is checkable */
+    /** Custom styles for the trigger button */
+    triggerStyles?: Styles;
+    /** Whether to show checkboxes for multiple selection mode */
     isCheckable?: boolean;
+    /** Whether to flip the popover placement */
+    shouldFlip?: boolean;
     /**
-     * Custom renderer for the summary shown inside the trigger **when there is a selection**.
+     * Custom renderer for the summary shown inside the trigger when there is a selection.
      *
      * For `selectionMode="multiple"` the function receives:
      *  - `selectedLabels`: array of labels of the selected items.
-     *  - `selectedKeys`: array of keys of the selected items.
+     *  - `selectedKeys`: array of keys of the selected items or "all".
      *
      * For `selectionMode="single"` the function receives:
      *  - `selectedLabel`: label of the selected item.
      *  - `selectedKey`: key of the selected item.
      *
      * The function should return a `ReactNode` that will be rendered inside the trigger.
+     * Set to `false` to hide the summary text completely.
      */
     renderSummary?: ((args: {
         selectedLabels: string[];
-        selectedKeys: (string | number)[];
+        selectedKeys: 'all' | (string | number)[];
         selectedLabel?: string;
         selectedKey?: string | number | null;
         selectionMode: 'single' | 'multiple';
     }) => ReactNode) | false;
-    /** Optional ref to access internal ListBox state (from FilterListBox) */
-    listStateRef?: React.MutableRefObject<any | null>;
-    /** Mods for the FilterPicker */
+    /** Ref to access internal ListBox state (from FilterListBox) */
+    listStateRef?: MutableRefObject<any | null>;
+    /** Additional modifiers for styling the FilterPicker */
     mods?: Record<string, boolean>;
 }
 export declare const FilterPicker: (<T>(props: CubeFilterPickerProps<T> & {

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

@@ -1,67 +1,75 @@
 import { ForwardedRef, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
 import { AriaListBoxProps } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
-import { Styles } from '../../../tasty';
+import { BasePropsWithoutChildren, Styles } from '../../../tasty';
 import type { CollectionBase, Key } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
-export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps {
+export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, FieldBaseProps, BasePropsWithoutChildren {
     /** Custom styles for the list container */
     listStyles?: Styles;
-    /** Custom styles for options */
+    /** Custom styles for individual options */
     optionStyles?: Styles;
-    /** Custom styles for sections */
+    /** Custom styles for section containers */
     sectionStyles?: Styles;
     /** Custom styles for section headings */
     headingStyles?: Styles;
     /** Whether the ListBox is disabled */
     isDisabled?: boolean;
-    /** The selected key(s) */
+    /** The selected key in controlled single selection mode */
     selectedKey?: Key | null;
-    selectedKeys?: Key[];
-    /** Default selected key(s) */
+    /** The selected keys in controlled multiple selection mode. Use "all" to select all items or an array of keys */
+    selectedKeys?: 'all' | Key[];
+    /** The default selected key in uncontrolled single selection mode */
     defaultSelectedKey?: Key | null;
-    defaultSelectedKeys?: Key[];
-    /** Selection change handler */
-    onSelectionChange?: (key: Key | null | Key[]) => void;
-    /** Ref for the list */
+    /** The default selected keys in uncontrolled multiple selection mode. Use "all" to select all items or an array of keys */
+    defaultSelectedKeys?: 'all' | Key[];
+    /** Callback fired when selection changes */
+    onSelectionChange?: (key: Key | null | 'all' | Key[]) => void;
+    /** The selection mode of the ListBox */
+    selectionMode?: 'single' | 'multiple';
+    /** Ref for accessing the list DOM element */
     listRef?: RefObject<HTMLDivElement>;
+    /** Whether to disallow empty selection */
+    disallowEmptySelection?: boolean;
+    /** Whether to wrap focus when reaching the end of the list */
+    shouldFocusWrap?: boolean;
     /**
      * Ref to access the internal ListState instance.
      * This allows parent components to access selection state and other list functionality.
      */
     stateRef?: MutableRefObject<any | null>;
     /**
-     * When true (default) moving the pointer over an option will move DOM focus to that option.
+     * Whether moving the pointer over an option will move DOM focus to that option.
      * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).
+     * Defaults to true.
      */
     focusOnHover?: boolean;
-    /** Custom header content */
+    /** Custom header content displayed above the list */
     header?: ReactNode;
-    /** Custom footer content */
+    /** Custom footer content displayed below the list */
     footer?: ReactNode;
     /** Custom styles for the header */
     headerStyles?: Styles;
     /** Custom styles for the footer */
     footerStyles?: Styles;
-    /** Mods for the ListBox */
+    /** Additional modifiers for styling the ListBox */
     mods?: Record<string, boolean>;
-    /** Size of the ListBox */
+    /** Size variant of the ListBox */
     size?: 'medium' | 'large';
     /**
-     * When true, ListBox will use virtual focus. This keeps actual DOM focus
-     * outside of the individual option elements (e.g. for searchable lists
-     * where focus stays within an external input).
+     * Whether to use virtual focus for keyboard navigation.
+     * When true, DOM focus stays outside individual option elements (useful for searchable lists).
      * Defaults to false for backward compatibility.
      */
     shouldUseVirtualFocus?: boolean;
     /**
-     * Optional callback fired when the user presses Escape key.
+     * Callback fired when the user presses Escape key.
      * When provided, this prevents React Aria's default Escape behavior (selection reset).
      */
     onEscape?: () => void;
     /**
-     * Whether the options in the ListBox are checkable.
-     * This adds a checkbox icon to the left of the option.
+     * Whether to show checkboxes for multiple selection mode.
+     * This adds a checkbox icon to the left of each option.
      */
     isCheckable?: boolean;
     /**
@@ -69,6 +77,15 @@ export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelect
      * Used by FilterPicker to close the popover on non-checkbox clicks.
      */
     onOptionClick?: (key: Key) => void;
+    /**
+     * Whether to show the "Select All" option in multiple selection mode.
+     * This adds a select all option to the header that allows selecting/deselecting all items.
+     */
+    showSelectAll?: boolean;
+    /**
+     * Label for the "Select All" option. Defaults to "Select All".
+     */
+    selectAllLabel?: ReactNode;
 }
 export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

package/types/components/overlays/Dialog/DialogTrigger.d.ts

@@ -38,6 +38,7 @@ export interface CubeDialogTriggerProps extends OverlayTriggerProps, PositionPro
     onOpenChange?: (isOpen: boolean) => void;
     defaultOpen?: boolean;
     shouldFlip?: boolean;
+    shouldUpdatePosition?: boolean;
 }
 /**
  * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's