@cube-dev/ui-kit 0.67.0 → 0.69.0

package/es/utils/promise.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -16,5 +16,6 @@ export { wrapNodeIfPlain } from './wrapNodeIfPlain';
 export { useViewportSize } from './useViewportSize';
 export { useQaProps } from './useQaProps';
 export { useEventBus, useEventListener, EventBusProvider } from './useEventBus';
+export { useControlledFocusVisible } from './useControlledFocusVisible';
 
         

package/es/utils/react/interactions.js

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

package/es/utils/react/useControlledFocusVisible.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.69.0
+ * Released under the MIT license.
+ */
+
+import { useEffect } from 'react';
+import { useFocusVisible } from 'react-aria';
+import { createSharedStore } from './sharedStore';
+// Create a shared store for the controlled focus visible state
+const useControlledFocusVisibleStore = createSharedStore('controlledFocusVisible', {
+    isManuallyActivated: false,
+});
+/**
+ * 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 function useControlledFocusVisible() {
+    // Get the original focus visible state from react-aria
+    const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});
+    // Get the shared store state and setter
+    const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();
+    // Reset manual activation when original focus visible becomes false
+    useEffect(() => {
+        if (!originalIsFocusVisible && isManuallyActivated) {
+            setStore({ isManuallyActivated: false });
+        }
+    }, [originalIsFocusVisible, isManuallyActivated, setStore]);
+    // Function to manually activate focus visible state
+    const activateFocusVisible = () => {
+        setStore({ isManuallyActivated: true });
+    };
+    // Return combined state: true if either original is true OR manually activated
+    return {
+        isFocusVisible: originalIsFocusVisible || isManuallyActivated,
+        activateFocusVisible,
+    };
+}
+
+        

package/es/utils/react/useEventBus.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.0
  * 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.67.0
+ * @cube-dev/ui-kit v0.69.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.69.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.69.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.69.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.67.0';
+    const version = '0.69.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.69.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?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | (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: {
@@ -28,31 +28,38 @@ export declare const DEFAULT_BUTTON_STYLES: {
     readonly flow: "column";
     readonly preset: {
         readonly '': "t3m";
-        readonly '[data-size="large"]': "t2m";
+        readonly '[data-size="xsmall"]': "t4";
+        readonly '[data-size="xlarge"]': "t2m";
     };
     readonly textDecoration: "none";
     readonly transition: "theme";
     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 (1.5x - 1bw)";
+        readonly '[data-size="small"] | [data-size="xsmall"]': ".5x (1x - 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 width: {
         readonly '': "initial";
-        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 '[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-type="link"]': "initial";
     };
     readonly height: {
         readonly '': "initial";
-        readonly '[data-size="small"]': "4x 4x";
-        readonly '[data-size="medium"]': "5x 5x";
-        readonly '[data-size="large"]': "6x 6x";
-        readonly '[data-type="link"]': "auto";
+        readonly '[data-size="xsmall"]': "@size-xs @size-xs";
+        readonly '[data-size="small"]': "@size-sm @size-sm";
+        readonly '[data-size="medium"]': "@size-md @size-md";
+        readonly '[data-size="large"]': "@size-lg @size-lg";
+        readonly '[data-size="xlarge"]': "@size-xl @size-xl";
+        readonly '[data-type="link"]': "initial";
     };
     readonly whiteSpace: "nowrap";
     readonly radius: {

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

@@ -21,7 +21,7 @@ export interface CubeCommandMenuProps<T> extends BaseProps, ContainerStyleProps,
     isLoading?: boolean;
     shouldFilter?: boolean;
     autoFocus?: boolean | FocusStrategy;
-    size?: 'small' | 'medium' | (string & {});
+    size?: 'medium' | 'large' | (string & {});
     /** Currently selected keys (controlled) */
     selectedKeys?: string[];
     /** Initially selected keys (uncontrolled) */

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;
@@ -26,7 +29,7 @@ export interface CubeMenuProps<T> extends BasePropsWithoutChildren, ContainerSty
     autoFocus?: boolean | FocusStrategy;
     shouldUseVirtualFocus?: boolean;
     /** Size of the menu items */
-    size?: 'small' | 'medium' | (string & {});
+    size?: 'medium' | 'large' | (string & {});
     /** Currently selected keys (controlled) */
     selectedKeys?: string[];
     /** Initially selected keys (uncontrolled) */

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

@@ -30,7 +30,7 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
      * Has no effect when `items` is provided.
      */
     filter?: FilterFn;
-    size?: 'small' | 'medium' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'large' | (string & {});
     suffixPosition?: 'before' | 'after';
     menuTrigger?: MenuTriggerAction;
     allowsCustomValue?: boolean;

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';