@cube-dev/ui-kit 0.0.0-canary-02c5666 → 0.0.0-canary-e806858

package/es/utils/react/useEventBus.js

@@ -0,0 +1,124 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
+ * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * 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.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * Released under the MIT license.
  */
 

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-02c5666
+ * @cube-dev/ui-kit v0.0.0-canary-e806858
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.0.0-canary-02c5666';
+    const version = '0.0.0-canary-e806858';
     // 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.0.0-canary-02c5666",
+  "version": "0.0.0-canary-e806858",
   "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,17 @@
+import { ComponentProps, ComponentType } from 'react';
+import { MenuTrigger } from './Menu';
+/**
+ * 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'>): {
+    anchorRef: import("react").RefObject<HTMLDivElement>;
+    open: (props: P, triggerProps?: T | undefined) => void;
+    update: (props: P, triggerProps?: T | undefined) => void;
+    close: () => void;
+    isOpen: boolean;
+    readonly rendered: import("react/jsx-runtime").JSX.Element | null;
+};

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

@@ -0,0 +1,17 @@
+import { ComponentProps, ComponentType, MouseEvent, PointerEvent } from 'react';
+import { MenuTrigger } from './Menu';
+/**
+ * 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.
+ * @returns An object with `anchorRef` to position the menu container, `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<P, T = ComponentProps<typeof MenuTrigger>>(Component: ComponentType<P>, defaultTriggerProps?: Omit<ComponentProps<typeof MenuTrigger>, 'children' | 'isOpen' | 'onOpenChange' | 'targetRef'>): {
+    anchorRef: import("react").RefObject<HTMLDivElement>;
+    open: (event: MouseEvent<Element, globalThis.MouseEvent> | PointerEvent<Element>, props: P, triggerProps?: T | undefined) => void;
+    update: (props: P, triggerProps?: T | undefined) => void;
+    close: () => void;
+    isOpen: boolean;
+    readonly rendered: import("react/jsx-runtime").JSX.Element | null;
+};

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;