@cube-dev/ui-kit 0.67.0 → 0.68.0

package/es/utils/transitions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.68.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.68.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.67.0';
+    const version = '0.68.0';
     // 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.67.0",
+  "version": "0.68.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -34,6 +34,7 @@
     "@react-types/shared": "^3.27.0",
     "@sparticuz/chromium": "^137.0.1",
     "@tabler/icons-react": "^3.31.0",
+    "@tanstack/react-virtual": "^3.13.12",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vitejs/plugin-react": "^4.3.2",
     "clipboard-copy": "^4.0.1",

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

@@ -7,7 +7,7 @@ export interface CubeButtonProps extends CubeActionProps {
     isLoading?: boolean;
     isSelected?: boolean;
     type?: 'primary' | 'secondary' | 'danger' | 'link' | 'clear' | 'outline' | 'neutral' | (string & {});
-    size?: 'small' | 'medium' | 'large' | (string & {});
+    size?: 'tiny' | 'small' | 'medium' | 'large' | (string & {});
 }
 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: {
@@ -35,20 +35,23 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly reset: "button";
     readonly outlineOffset: 1;
     readonly padding: {
-        readonly '': "0 (2x - 1bw)";
-        readonly '[data-size="small"]': "0 (1x - 1bw)";
-        readonly '[data-size="medium"]': "0 (1.5x - 1bw)";
-        readonly '[data-size="large"]': "0 (2.25x - 1bw)";
+        readonly '': ".5x (2x - 1bw)";
+        readonly '[data-size="tiny"]': ".5x (1x - 1bw)";
+        readonly '[data-size="small"]': ".5x (1x - 1bw)";
+        readonly '[data-size="medium"]': ".5x (1.5x - 1bw)";
+        readonly '[data-size="large"]': ".5x (2.25x - 1bw)";
         readonly 'single-icon-only | [data-type="link"]': 0;
     };
     readonly width: {
         readonly '': "initial";
+        readonly '[data-size="tiny"] & single-icon-only': "3.5x 3.5x";
         readonly '[data-size="small"] & single-icon-only': "4x 4x";
         readonly '[data-size="medium"] & single-icon-only': "5x 5x";
         readonly '[data-size="large"] & single-icon-only': "6x 6x";
     };
     readonly height: {
         readonly '': "initial";
+        readonly '[data-size="tiny"]': "3.5x 3.5x";
         readonly '[data-size="small"]': "4x 4x";
         readonly '[data-size="medium"]': "5x 5x";
         readonly '[data-size="large"]': "6x 6x";

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

@@ -10,6 +10,9 @@ export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerSty
     selectionIcon?: MenuSelectionType;
     header?: ReactNode;
     footer?: ReactNode;
+    menuStyles?: Styles;
+    headerStyles?: Styles;
+    footerStyles?: Styles;
     styles?: Styles;
     itemStyles?: Styles;
     sectionStyles?: Styles;

package/types/components/actions/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import { Key, Node } from '@react-types/shared';
 import { TreeState } from 'react-stately';
 import { Styles } from '../../../tasty';
-export type MenuSelectionType = 'checkbox' | 'radio';
+export type MenuSelectionType = 'checkbox' | 'radio' | 'checkmark';
 export interface MenuItemProps<T> {
     item: Node<T>;
     state: TreeState<T>;

package/types/components/actions/Menu/styled.d.ts

@@ -1,3 +1,4 @@
+export declare const StyledMenuWrapper: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledMenu: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledDivider: import("react").ComponentType<Omit<import("../../../tasty").Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
 export declare const StyledHeader: import("react").ComponentType<{

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

@@ -0,0 +1,51 @@
+import { Key } from '@react-types/shared';
+import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
+import { Section as BaseSection, Item } from 'react-stately';
+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 {
+    /** 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 */
+    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) */
+    isLoading?: boolean;
+    /** Ref for the search input */
+    searchInputRef?: RefObject<HTMLInputElement>;
+    /** Children (ListBox.Item and ListBox.Section elements) */
+    children?: ReactNode;
+    /** Allow entering a custom value that is not present in the options */
+    allowsCustomValue?: boolean;
+    /** Mods for the FilterListBox */
+    mods?: Record<string, boolean>;
+    /**
+     * Optional callback fired when the user presses `Escape` 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.
+     */
+    isCheckable?: boolean;
+    /**
+     * Callback fired when an option is clicked but not on the checkbox area.
+     * Used by FilterPicker to close the popover on non-checkbox clicks.
+     */
+    onOptionClick?: (key: Key) => void;
+}
+export declare const FilterListBox: (<T>(props: CubeFilterListBoxProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+    Item: typeof Item;
+    Section: typeof BaseSection;
+};
+export {};

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

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

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

@@ -0,0 +1,55 @@
+import React, { ForwardedRef, ReactElement, ReactNode } from 'react';
+import { Section as BaseSection, Item } from 'react-stately';
+import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
+import { CubeFilterListBoxProps } from '../FilterListBox/FilterListBox';
+import type { FieldBaseProps } from '../../../shared';
+export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'children'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps {
+    /** Placeholder text when no selection is made */
+    placeholder?: string;
+    /** Icon to show in the trigger */
+    icon?: ReactElement;
+    /** Type of button styling */
+    type?: 'outline' | 'clear' | 'primary' | 'secondary' | 'neutral' | (string & {});
+    /** Button theme */
+    theme?: 'default' | 'special';
+    /** Size of the component */
+    size?: 'small' | 'medium' | 'large';
+    /** Children (FilterListBox.Item and FilterListBox.Section elements) */
+    children?: ReactNode;
+    /** Custom styles for the list box */
+    listBoxStyles?: Styles;
+    /** Custom styles for the popover */
+    popoverStyles?: Styles;
+    /** Whether the filter picker is checkable */
+    isCheckable?: boolean;
+    /**
+     * 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.
+     *
+     * 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.
+     */
+    renderSummary?: ((args: {
+        selectedLabels: string[];
+        selectedKeys: (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 */
+    mods?: Record<string, boolean>;
+}
+export declare const FilterPicker: (<T>(props: CubeFilterPickerProps<T> & {
+    ref?: ForwardedRef<HTMLElement>;
+}) => ReactElement) & {
+    Item: typeof Item;
+    Section: typeof BaseSection;
+};

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

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

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

@@ -1,23 +1,10 @@
-import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
+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 type { CollectionBase, Key } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
-type FilterFn = (textValue: string, inputValue: string) => boolean;
 export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps {
-    /** Whether the ListBox is searchable */
-    isSearchable?: boolean;
-    /** 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 */
-    filter?: FilterFn;
-    /** Custom label to display when no results are found after filtering */
-    emptyLabel?: ReactNode;
-    /** Custom styles for the search input */
-    searchInputStyles?: Styles;
     /** Custom styles for the list container */
     listStyles?: Styles;
     /** Custom styles for options */
@@ -28,20 +15,60 @@ export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelect
     headingStyles?: Styles;
     /** Whether the ListBox is disabled */
     isDisabled?: boolean;
-    /** Whether the ListBox as a whole is loading (generic loading indicator) */
-    isLoading?: boolean;
     /** The selected key(s) */
     selectedKey?: Key | null;
-    selectedKeys?: Key[] | 'all';
+    selectedKeys?: Key[];
     /** Default selected key(s) */
     defaultSelectedKey?: Key | null;
-    defaultSelectedKeys?: Key[] | 'all';
+    defaultSelectedKeys?: Key[];
     /** Selection change handler */
     onSelectionChange?: (key: Key | null | Key[]) => void;
-    /** Ref for the search input */
-    searchInputRef?: RefObject<HTMLInputElement>;
     /** Ref for the list */
-    listRef?: RefObject<HTMLElement>;
+    listRef?: RefObject<HTMLDivElement>;
+    /**
+     * 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.
+     * Set to false for components that keep DOM focus outside (e.g. searchable FilterListBox).
+     */
+    focusOnHover?: boolean;
+    /** Custom header content */
+    header?: ReactNode;
+    /** Custom footer content */
+    footer?: ReactNode;
+    /** Custom styles for the header */
+    headerStyles?: Styles;
+    /** Custom styles for the footer */
+    footerStyles?: Styles;
+    /** Mods for the ListBox */
+    mods?: Record<string, boolean>;
+    /** Size of the ListBox */
+    size?: 'small' | 'medium';
+    /**
+     * 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).
+     * Defaults to false for backward compatibility.
+     */
+    shouldUseVirtualFocus?: boolean;
+    /**
+     * Optional 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.
+     */
+    isCheckable?: boolean;
+    /**
+     * Callback fired when an option is clicked but not on the checkbox area.
+     * Used by FilterPicker to close the popover on non-checkbox clicks.
+     */
+    onOptionClick?: (key: Key) => void;
 }
 export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
@@ -49,4 +76,3 @@ export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
     Item: typeof Item;
     Section: typeof BaseSection;
 };
-export {};

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

@@ -14,11 +14,17 @@ export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLa
     loadingIndicator?: ReactNode;
     overlayOffset?: number;
     hideTrigger?: boolean;
+    /**
+     *  @deprecated Use `triggerStyles` instead
+     */
     inputStyles?: Styles;
     optionStyles?: Styles;
     triggerStyles?: Styles;
     listBoxStyles?: Styles;
     overlayStyles?: Styles;
+    /**
+     *  @deprecated Use `styles` instead
+     */
     wrapperStyles?: Styles;
     direction?: 'top' | 'bottom';
     shouldFlip?: boolean;

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

@@ -13,4 +13,6 @@ export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
 export * from './ListBox';
+export * from './FilterListBox';
+export * from './FilterPicker';
 export * from './TextInputMapper';

package/types/icons/ChartKPIIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ChartKPIIcon: {
+    (props: import("./Icon").CubeIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/icons/index.d.ts

@@ -26,6 +26,7 @@ export { ChartBoxPlotIcon } from './ChartBoxPlotIcon';
 export { ChartBubbleIcon } from './ChartBubbleIcon';
 export { ChartDonut2Icon } from './ChartDonut2Icon';
 export { ChartFunnelIcon } from './ChartFunnelIcon';
+export { ChartKPIIcon } from './ChartKPIIcon';
 export { ChartPie2Icon } from './ChartPie2Icon';
 export { ChartScatterIcon } from './ChartScatterIcon';
 export { CheckCircleFilledIcon } from './CheckCircleFilledIcon';

package/types/shared/form.d.ts

@@ -68,6 +68,8 @@ export interface FieldBaseProps extends FormBaseProps {
     insideForm?: boolean;
     fieldProps?: Props;
     messageStyles?: Styles;
+    /** If true, the input component will be wrapped in a field wrapper even if it doesn't have a label. */
+    forceField?: boolean;
 }
 export interface FormBaseProps {
     /** Styles of the label */

package/types/tasty/utils/styles.d.ts

@@ -88,6 +88,7 @@ export declare const CUSTOM_UNITS: {
     lh: string;
     rp: string;
     gp: string;
+    sf: (num: any) => string;
     dvh: (num: any) => string;
     sp: (num: any) => string;
 };

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

@@ -10,3 +10,5 @@ export { useViewportSize } from './useViewportSize';
 export { useQaProps } from './useQaProps';
 export { useEventBus, useEventListener, EventBusProvider } from './useEventBus';
 export type { EventBusListener, EventBusContextValue } from './useEventBus';
+export { useControlledFocusVisible } from './useControlledFocusVisible';
+export type { UseControlledFocusVisibleResult } from './useControlledFocusVisible';

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

@@ -0,0 +1,10 @@
+export interface UseControlledFocusVisibleResult {
+    isFocusVisible: boolean;
+    activateFocusVisible: () => void;
+}
+/**
+ * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,
+ * but also returns activateFocusVisible function that manually switches the state to true
+ * until the original flag is switched to false.
+ */
+export declare function useControlledFocusVisible(): UseControlledFocusVisibleResult;