@cube-dev/ui-kit 0.69.1 → 0.69.2

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/tasty/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/tokens.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/type-checks.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/ResizeSensor.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/modules.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/promise.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/random.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/range.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/Slots.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/chain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/interactions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/isTextOnly.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/mapProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/mergeProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/nullableValue.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/sharedStore.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useCombinedRefs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useControlledFocusVisible.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useId.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useIsDarwin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useKeySymbols.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useLayoutEffect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useQaProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/useViewportSize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/react/wrapNodeIfPlain.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/transitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/tree.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.2
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.69.1';
+    const version = '0.69.2';
     // 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.69.1",
+  "version": "0.69.2",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/actions/Button/Button.d.ts

@@ -12,8 +12,16 @@ export interface CubeButtonProps extends CubeActionProps {
 export type ButtonVariant = 'default.primary' | 'default.secondary' | 'default.outline' | 'default.neutral' | 'default.clear' | 'default.link' | 'danger.primary' | 'danger.secondary' | 'danger.outline' | 'danger.neutral' | 'danger.clear' | 'danger.link' | 'success.primary' | 'success.secondary' | 'success.outline' | 'success.neutral' | 'success.clear' | 'success.link' | 'special.primary' | 'special.secondary' | 'special.outline' | 'special.neutral' | 'special.clear' | 'special.link';
 export declare const DEFAULT_BUTTON_STYLES: {
     readonly display: "inline-grid";
-    readonly placeItems: "center stretch";
-    readonly placeContent: "center";
+    readonly flow: "column";
+    readonly placeItems: "center start";
+    readonly placeContent: {
+        readonly '': "center";
+        readonly 'right-icon | suffix': "center stretch";
+    };
+    readonly gridColumns: {
+        readonly '': "initial";
+        readonly 'left-icon | loading | prefix': "max-content";
+    };
     readonly position: "relative";
     readonly margin: 0;
     readonly boxSizing: "border-box";
@@ -25,7 +33,6 @@ export declare const DEFAULT_BUTTON_STYLES: {
         readonly '': ".75x";
         readonly '[data-size="small"]': ".5x";
     };
-    readonly flow: "column";
     readonly preset: {
         readonly '': "t3m";
         readonly '[data-size="xsmall"]': "t4";
@@ -37,19 +44,19 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly outlineOffset: 1;
     readonly padding: {
         readonly '': ".5x (1.5x - 1bw)";
-        readonly '[data-size="small"] | [data-size="xsmall"]': ".5x (1x - 1bw)";
+        readonly '[data-size="small"] | [data-size="xsmall"]': ".5x (1.25x - 1bw)";
         readonly '[data-size="medium"]': ".5x (1.5x - 1bw)";
-        readonly '[data-size="large"]': ".5x (2x - 1bw)";
-        readonly '[data-size="xlarge"]': ".5x (2.25x - 1bw)";
-        readonly 'single-icon-only | [data-type="link"]': 0;
+        readonly '[data-size="large"]': ".5x (1.75x - 1bw)";
+        readonly '[data-size="xlarge"]': ".5x (2x - 1bw)";
+        readonly 'single-icon | [data-type="link"]': 0;
     };
     readonly width: {
         readonly '': "initial";
-        readonly '[data-size="xsmall"] & single-icon-only': "@size-xs @size-xs";
-        readonly '[data-size="small"] & single-icon-only': "@size-sm @size-sm";
-        readonly '[data-size="medium"] & single-icon-only': "@size-md @size-md";
-        readonly '[data-size="large"] & single-icon-only': "@size-lg @size-lg";
-        readonly '[data-size="xlarge"] & single-icon-only': "@size-xl @size-xl";
+        readonly '[data-size="xsmall"] & single-icon': "@size-xs @size-xs";
+        readonly '[data-size="small"] & single-icon': "@size-sm @size-sm";
+        readonly '[data-size="medium"] & single-icon': "@size-md @size-md";
+        readonly '[data-size="large"] & single-icon': "@size-lg @size-lg";
+        readonly '[data-size="xlarge"] & single-icon': "@size-xl @size-xl";
         readonly '[data-type="link"]': "initial";
     };
     readonly height: {
@@ -66,6 +73,17 @@ export declare const DEFAULT_BUTTON_STYLES: {
         readonly '': true;
         readonly '[data-type="link"] & !focused': 0;
     };
+    readonly ButtonIcon: {
+        readonly width: "max-content";
+    };
+    readonly '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
+        readonly marginLeft: "-.5x";
+        readonly placeSelf: "center start";
+    };
+    readonly '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
+        readonly marginRight: "-.5x";
+        readonly placeSelf: "center end";
+    };
 };
 export declare const DEFAULT_PRIMARY_STYLES: Styles;
 export declare const DEFAULT_SECONDARY_STYLES: Styles;

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 { 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) */
+    /** Ref to access internal ListBox state (from FilterListBox) */
     listStateRef?: MutableRefObject<any | null>;
-    /** Mods for the FilterPicker */
+    /** 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

@@ -4,64 +4,72 @@ import { Section as BaseSection, Item } from 'react-stately';
 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, BasePropsWithoutChildren {
+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>;