@cube-dev/ui-kit 0.66.1 → 0.68.0

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;
@@ -34,7 +40,7 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     size?: 'small' | 'medium' | 'default' | 'large' | string;
     placeholder?: string;
 }
-export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, ...otherProps }: {
+export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, triggerRef, ...otherProps }: {
     [x: string]: any;
     state: any;
     popoverRef: any;
@@ -47,6 +53,7 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
     placement: any;
     minWidth: any;
     size?: string | undefined;
+    triggerRef: any;
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;

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/components/overlays/Dialog/index.d.ts

@@ -2,4 +2,4 @@ export * from './DialogContainer';
 export * from './DialogForm';
 export * from './DialogTrigger';
 export * from './Dialog';
-export * from './dialog-container';
+export * from './use-dialog-container';

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

@@ -1 +1,5 @@
 export declare function random(min: number, max: number): number;
+/**
+ * Generates a unique random ID using current timestamp and random number
+ */
+export declare function generateRandomId(): string;

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

@@ -8,3 +8,7 @@ export { useCombinedRefs } from './useCombinedRefs';
 export { wrapNodeIfPlain } from './wrapNodeIfPlain';
 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/sharedStore.d.ts

@@ -0,0 +1,11 @@
+/** Like React.setState: either a value or a function of the previous value */
+type Updater<S> = S | ((prev: S) => S);
+/**
+ * Create a shared store that survives hot-reloads.
+ *
+ * Pass a unique `name` once per logical store module:
+ *   export const useSidebarStore = createSharedStore('sidebar', { open: false });
+ */
+export declare function createSharedStore<S>(name: string, initialState: S): UseSharedStoreHook<S>;
+type UseSharedStoreHook<S> = () => readonly [S, (u: Updater<S>) => void];
+export {};

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;

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

@@ -0,0 +1,74 @@
+import React, { ReactNode } from 'react';
+export type EventBusListener<T = any> = (data: T) => void;
+export interface EventBusContextValue {
+    emit: <T = any>(event: string, data?: T) => void;
+    on: <T = any>(event: string, listener: EventBusListener<T>) => () => void;
+    off: <T = any>(event: string, listener: EventBusListener<T>) => void;
+}
+export interface EventBusProviderProps {
+    children: ReactNode;
+}
+/**
+ * EventBusProvider provides a global event system for the application.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <EventBusProvider>
+ *       <YourComponents />
+ *     </EventBusProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function EventBusProvider({ children }: EventBusProviderProps): React.FunctionComponentElement<React.ProviderProps<EventBusContextValue | null>>;
+/**
+ * Hook to access the event bus functionality.
+ * Must be used within an EventBusProvider.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const { emit, on } = useEventBus();
+ *
+ *   const handleClick = () => {
+ *     emit('user-action', { type: 'click', target: 'button' });
+ *   };
+ *
+ *   useEffect(() => {
+ *     const unsubscribe = on('data-updated', (data) => {
+ *       console.log('Data updated:', data);
+ *     });
+ *
+ *     return unsubscribe;
+ *   }, [on]);
+ *
+ *   return <button onClick={handleClick}>Click me</button>;
+ * }
+ * ```
+ */
+export declare function useEventBus(): EventBusContextValue;
+/**
+ * Convenience hook for subscribing to events with automatic cleanup.
+ * The listener will be automatically unsubscribed when the component unmounts
+ * or when the dependencies change.
+ *
+ * @param event - The event name to listen for
+ * @param listener - The callback function to execute when the event is emitted
+ * @param deps - Dependency array for the effect (similar to useEffect)
+ *
+ * @example
+ * ```tsx
+ * function NotificationComponent() {
+ *   const [message, setMessage] = useState('');
+ *
+ *   useEventListener('notification', (data) => {
+ *     setMessage(data.message);
+ *   }, []);
+ *
+ *   return <div>{message}</div>;
+ * }
+ * ```
+ */
+export declare function useEventListener<T = any>(event: string, listener: EventBusListener<T>, deps?: React.DependencyList): void;