@cube-dev/ui-kit 0.66.1 → 0.67.0

package/es/utils/react/mergeProps.js

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

package/es/utils/react/sharedStore.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.67.0
+ * Released under the MIT license.
+ */
+
+import { useSyncExternalStore } from 'react';
+import { useEvent } from '../../_internal/hooks/use-event';
+/**
+ * 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 function createSharedStore(name, initialState) {
+    const cacheKey = `__sharedStore_${name}__`;
+    const existing = cacheKey && globalThis[cacheKey];
+    const holder = existing ?? {
+        state: initialState,
+        listeners: new Set(),
+    };
+    /* Warn if someone tries to “re-initialise” with a different value */
+    if (process.env.NODE_ENV === 'development' &&
+        existing &&
+        existing.state !== initialState) {
+        console.warn(`[createSharedStore] Store "${name}" already exists – ` +
+            'the new initialState is ignored to preserve hot-reload state.');
+    }
+    if (cacheKey && !existing) {
+        globalThis[cacheKey] = holder;
+    }
+    const getSnapshot = () => holder.state;
+    const subscribe = (cb) => {
+        holder.listeners.add(cb);
+        return () => holder.listeners.delete(cb);
+    };
+    const setStore = (update) => {
+        holder.state =
+            typeof update === 'function'
+                ? update(holder.state)
+                : update;
+        holder.listeners.forEach((l) => l());
+    };
+    const useSharedStore = () => {
+        return [useSyncExternalStore(subscribe, getSnapshot), useEvent(setStore)];
+    };
+    return useSharedStore;
+}
+
+        

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useEventBus.js

@@ -0,0 +1,124 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.67.0
+ * Released under the MIT license.
+ */
+
+import React, { createContext, useCallback, useContext, useEffect, useRef, } from 'react';
+const EventBusContext = createContext(null);
+/**
+ * EventBusProvider provides a global event system for the application.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <EventBusProvider>
+ *       <YourComponents />
+ *     </EventBusProvider>
+ *   );
+ * }
+ * ```
+ */
+export function EventBusProvider({ children }) {
+    const listeners = useRef({});
+    const off = useCallback((event, listener) => {
+        const eventListeners = listeners.current[event];
+        if (eventListeners) {
+            listeners.current[event] = eventListeners.filter((l) => l !== listener);
+            // Clean up empty event arrays
+            if (listeners.current[event].length === 0) {
+                delete listeners.current[event];
+            }
+        }
+    }, []);
+    const emit = useCallback((event, data) => {
+        // Use setTimeout to ensure async emission after current render cycle
+        setTimeout(() => {
+            const eventListeners = listeners.current[event];
+            if (eventListeners) {
+                eventListeners.forEach((listener) => listener(data));
+            }
+        }, 0);
+    }, []);
+    const on = useCallback((event, listener) => {
+        if (!listeners.current[event]) {
+            listeners.current[event] = [];
+        }
+        listeners.current[event].push(listener);
+        // Return cleanup function
+        return () => {
+            off(event, listener);
+        };
+    }, [off]);
+    const contextValue = {
+        emit,
+        on,
+        off,
+    };
+    return React.createElement(EventBusContext.Provider, { value: contextValue }, children);
+}
+/**
+ * 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 function useEventBus() {
+    const context = useContext(EventBusContext);
+    if (!context) {
+        throw new Error('useEventBus must be used within an EventBusProvider');
+    }
+    return context;
+}
+/**
+ * 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 function useEventListener(event, listener, deps = []) {
+    const { on } = useEventBus();
+    useEffect(() => {
+        const unsubscribe = on(event, listener);
+        return unsubscribe;
+    }, [event, on, ...deps]);
+}
+
+        

package/es/utils/react/useId.js

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

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { AriaMenuTriggerProps, Placement, PositionProps } from 'react-aria';
+import { AriaMenuTriggerProps, PositionProps } from 'react-aria';
 import { MenuTriggerState } from 'react-stately';
 export type { AriaMenuTriggerProps };
 export type CubeMenuTriggerProps = AriaMenuTriggerProps & PositionProps & {
@@ -8,9 +8,8 @@ export type CubeMenuTriggerProps = AriaMenuTriggerProps & PositionProps & {
         ReactElement | ((state: MenuTriggerState) => ReactElement),
         ReactElement
     ];
-    direction?: Placement;
-    align?: 'start' | 'end';
     closeOnSelect?: boolean;
+    isDummy?: boolean;
 };
 /**
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,

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

@@ -9,4 +9,6 @@ export * from './Action/Action';
 export * from './Menu';
 export * from './CommandMenu';
 export * from './use-action';
+export * from './use-anchored-menu';
+export * from './use-context-menu';
 export { Button, ButtonGroup };

package/types/components/actions/use-anchored-menu.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, ComponentType, ReactElement, RefObject } from 'react';
+import { MenuTrigger } from './Menu';
+export interface UseAnchoredMenuReturn<P, T> {
+    /** Ref to attach to the anchor element for positioning the menu. */
+    anchorRef: RefObject<HTMLElement>;
+    /**
+     * Programmatically opens the menu with the provided props.
+     * @param props - Props to pass to the menu component
+     * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)
+     */
+    open(props: P, triggerProps?: T): void;
+    /**
+     * Updates the props of the currently open menu.
+     * Props are merged if defaults are provided.
+     */
+    update(props: P, triggerProps?: T): void;
+    /** Closes the menu programmatically. */
+    close(): void;
+    /** Current open/closed state of the menu. */
+    isOpen: boolean;
+    /**
+     * JSX element that must be rendered in your component tree.
+     * Contains the MenuTrigger and positioning logic.
+     */
+    get rendered(): ReactElement | null;
+}
+/**
+ * Generic hook to manage an anchored menu component.
+ *
+ * @param Component - A React component that represents the menu content (Menu or CommandMenu).
+ * @param defaultTriggerProps - Default props to pass to the MenuTrigger.
+ * @returns An object with `anchorRef` to position the menu, `open` function to open the menu with provided props, `close` function to close the menu, and `rendered` JSX element to include in your component tree.
+ */
+export declare function useAnchoredMenu<P, T = ComponentProps<typeof MenuTrigger>>(Component: ComponentType<P>, defaultTriggerProps?: Omit<ComponentProps<typeof MenuTrigger>, 'children' | 'isOpen' | 'onOpenChange' | 'targetRef'>): UseAnchoredMenuReturn<P, T>;

package/types/components/actions/use-context-menu.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, ComponentType, MouseEvent, PointerEvent, ReactElement, RefObject } from 'react';
+import { MenuTrigger } from './Menu';
+type NativeMouseEvent = globalThis.MouseEvent;
+type NativePointerEvent = globalThis.PointerEvent;
+export interface UseContextMenuReturn<E extends HTMLElement = HTMLElement, P extends object = {}, T = ComponentProps<typeof MenuTrigger>> {
+    /** Container element that receives context menu events. Attach this ref to your target element. */
+    targetRef: RefObject<E>;
+    /**
+     * Programmatically opens the menu at the specified coordinates or element center.
+     * Runtime props are merged with defaultMenuProps (runtime props take precedence).
+     *
+     * @param props - Props to pass to the menu component (optional, defaults to defaultMenuProps)
+     * @param triggerProps - Additional props for MenuTrigger (merged with defaultTriggerProps)
+     * @param event - The pointer/mouse event containing coordinates for positioning (optional, centers on element if not provided)
+     */
+    open(props?: P, triggerProps?: T, event?: NativeMouseEvent | NativePointerEvent | MouseEvent | PointerEvent): void;
+    /**
+     * Updates the props of the currently open menu without repositioning.
+     * Props are merged with defaultMenuProps.
+     */
+    update(props: P, triggerProps?: T): void;
+    /** Closes the menu programmatically. */
+    close(): void;
+    /** Current open/closed state of the menu. */
+    isOpen: boolean;
+    /**
+     * JSX element that must be rendered in your component tree.
+     * Contains the MenuTrigger and positioning logic.
+     * IMPORTANT: Must be placed directly inside the target container (the element with targetRef).
+     */
+    get rendered(): ReactElement | null;
+}
+/**
+ * Generic hook to manage a context menu component that opens at pointer coordinates.
+ *
+ * @param Component - A React component that represents the menu content (Menu or CommandMenu).
+ * @param defaultTriggerProps - Default props to pass to the MenuTrigger.
+ * @param defaultMenuProps - Default props to pass to the Menu component.
+ * @returns An object with `targetRef` to attach to the container element, `open` function to open the menu at event coordinates, `close` function to close the menu, and `rendered` JSX element to include in your component tree.
+ */
+export declare function useContextMenu<E extends HTMLElement = HTMLElement, P extends object = {}, T = ComponentProps<typeof MenuTrigger>>(Component: ComponentType<P>, defaultTriggerProps?: Omit<ComponentProps<typeof MenuTrigger>, 'children' | 'isOpen' | 'onOpenChange' | 'targetRef'>, defaultMenuProps?: P): UseContextMenuReturn<E, P, T>;
+export {};

package/types/components/content/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import { BaseProps, ContainerStyleProps } from '../../../tasty';
-export interface CubeCardProps extends BaseProps, ContainerStyleProps {
+import { AllBaseProps, ContainerStyleProps } from '../../../tasty';
+export interface CubeCardProps extends Omit<AllBaseProps, 'title' | 'value' | 'placeholder' | 'text'>, ContainerStyleProps {
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CubeCardProps & import("react").RefAttributes<unknown>>;

package/types/components/content/CopyPasteBlock/CopyPasteBlock.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { PositionStyleProps, Styles } from '../../../tasty';
 import { CubeCardProps } from '../Card/Card';
-export interface CubeCopyPasteBlockProps extends CubeCardProps, PositionStyleProps {
+export interface CubeCopyPasteBlockProps extends Omit<CubeCardProps, 'onPaste' | 'onCopy'>, PositionStyleProps {
     padding?: Styles['padding'];
     /** The code snippet */
     value?: string;

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

@@ -34,7 +34,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 +47,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/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/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,5 @@ 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';

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