@cube-dev/ui-kit 0.66.1 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @cube-dev/ui-kit
 
+## 0.67.0
+
+### Minor Changes
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useEventBus hook to emit global events and subscribe to them.
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useContextMenu hook to invoke a context menu in the exact place of the click.
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useAnchoredMenu hook to programmatically invoke a menu anchored to the specific element.
+
 ## 0.66.1
 
 ### Patch Changes

package/es/_internal/hooks/index.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/_internal/hooks/use-chained-callback.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/_internal/hooks/use-debounced-value.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/_internal/hooks/use-deprecation-warning.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/_internal/hooks/use-effect-once.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/_internal/hooks/use-event.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/_internal/hooks/use-is-first-render.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/_internal/hooks/use-sync-ref.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/_internal/hooks/use-timer/index.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/_internal/hooks/use-timer/timer.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/_internal/hooks/use-timer/use-timer.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/_internal/hooks/use-update-effect.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/_internal/hooks/use-warn.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/_internal/index.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/components/Block.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/components/GlobalStyles.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/components/GridProvider.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/components/HiddenInput.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/components/OpenTrasition.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/components/Root.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.
  */
 
@@ -14,6 +14,7 @@ import { TrackingProvider } from '../providers/TrackingProvider';
 import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
 import { TOKENS } from '../tokens';
 import { useViewportSize } from '../utils/react';
+import { EventBusProvider } from '../utils/react/useEventBus';
 import { GlobalStyles } from './GlobalStyles';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';
 import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider';
@@ -83,7 +84,7 @@ export function Root(allProps) {
                             ? height + 'px'
                             : '100dvh',
                         ...style,
-                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) })] }) }) }) }));
+                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
 }
 
         

package/es/components/actions/Action/Action.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/components/actions/Button/Button.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/components/actions/Button/index.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/components/actions/ButtonGroup/ButtonGroup.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/components/actions/CommandMenu/CommandMenu.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/components/actions/CommandMenu/index.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/components/actions/CommandMenu/styled.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.
  */
 
@@ -28,7 +28,6 @@ export const StyledCommandMenu = tasty({
             'popover | tray': '0px 5px 15px #dark.05',
         },
         overflow: 'hidden',
-        width: '20x 50x',
         height: {
             '': 'initial',
             popover: 'initial max-content (50vh - 4x)',

package/es/components/actions/Menu/Menu.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/components/actions/Menu/MenuItem.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/components/actions/Menu/MenuSection.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/components/actions/Menu/MenuTrigger.js

@@ -1,48 +1,58 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PressResponder } from '@react-aria/interactions';
 import { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';
-import { forwardRef, Fragment, useRef } from 'react';
+import { forwardRef, Fragment, useEffect, useMemo, useRef, } from 'react';
 import { DismissButton, useMenuTrigger, useOverlayPosition, } from 'react-aria';
 import { useMenuTriggerState } from 'react-stately';
+import { generateRandomId } from '../../../utils/random';
 import { SlotProvider } from '../../../utils/react';
+import { useEventBus } from '../../../utils/react/useEventBus';
 import { Popover, Tray } from '../../overlays/Modal';
 import { MenuContext } from './context';
 function MenuTrigger(props, ref) {
     const menuPopoverRef = useRef(null);
     const triggerRef = useRef();
     const domRef = useDOMRef(ref);
-    const menuTriggerRef = domRef || triggerRef;
+    const menuTriggerRef = props.targetRef || domRef || triggerRef;
     const menuRef = useRef(null);
-    const { children, align = 'start', shouldFlip = true, direction = 'bottom', closeOnSelect, trigger = 'press', isDisabled, } = props;
+    const { children, shouldFlip = true, closeOnSelect, trigger = 'press', isDisabled, isDummy, } = props;
+    // Generate a unique ID for this menu instance
+    const menuId = useMemo(() => generateRandomId(), []);
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
     if (!Array.isArray(children) || children.length > 2) {
         throw new Error('MenuTrigger must have exactly 2 children');
     }
     let [menuTrigger, menu] = children;
     const state = useMenuTriggerState(props);
+    // Listen for other menus opening and close this one if needed
+    useEffect(() => {
+        const unsubscribe = on('menu:open', (data) => {
+            // If another menu is opening and this menu is open, close this one
+            if (data.menuId !== menuId && state.isOpen && !isDummy) {
+                state.close();
+            }
+        });
+        return unsubscribe;
+    }, [on, menuId, state]);
+    // Emit event when this menu opens
+    useEffect(() => {
+        if (state.isOpen && !isDummy) {
+            emit('menu:open', { menuId });
+        }
+    }, [state.isOpen, emit, menuId, isDummy]);
     if (typeof menuTrigger === 'function') {
         menuTrigger = menuTrigger(state);
     }
     const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
-    let initialPlacement;
-    switch (direction) {
-        case 'left':
-        case 'right':
-        case 'start':
-        case 'end':
-            initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}`;
-            break;
-        case 'bottom':
-        case 'top':
-        default:
-            initialPlacement = `${direction} ${align}`;
-    }
+    let initialPlacement = props.placement ?? 'bottom start';
     const isMobile = useIsMobileDevice();
     const { overlayProps: positionProps, placement } = useOverlayPosition({
         targetRef: menuTriggerRef,
@@ -53,8 +63,8 @@ function MenuTrigger(props, ref) {
         isOpen: state.isOpen && !isMobile,
         onClose: state.close,
         containerPadding: props.containerPadding,
-        offset: props.offset || 8,
-        crossOffset: props.crossOffset,
+        offset: props.offset ?? 8,
+        crossOffset: props.crossOffset ?? 0,
     });
     const menuContext = {
         ...menuProps,
@@ -80,9 +90,26 @@ function MenuTrigger(props, ref) {
         overlay = (_jsx(Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }));
     }
     else {
-        overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, onClose: state.close, children: contents }));
+        overlay = (_jsx(Popover, { ref: menuPopoverRef, hideArrow: true, isNonModal: true, isOpen: state.isOpen, style: positionProps.style, placement: placement, shouldCloseOnInteractOutside: (el) => {
+                const menuTriggerEl = el.closest('[data-menu-trigger]');
+                // If no menu trigger was clicked, allow closing
+                if (!menuTriggerEl)
+                    return true;
+                // For dummy triggers (like useAnchoredMenu), check if the clicked element
+                // is the target element or its descendant
+                if (isDummy &&
+                    (menuTriggerEl === menuTriggerRef.current ||
+                        menuTriggerRef.current?.contains(el))) {
+                    return true;
+                }
+                // If the same trigger that opened this menu was clicked, allow closing
+                if (menuTriggerEl === menuTriggerRef.current)
+                    return true;
+                // Otherwise, don't close (let event mechanism handle it)
+                return false;
+            }, onClose: state.close, children: contents }));
     }
-    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: _jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }) }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
+    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: !isDummy ? (_jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, "data-menu-trigger": true, isPressed: state.isOpen, children: menuTrigger })) : null }), _jsx(MenuContext.Provider, { value: menuContext, children: overlay })] }));
 }
 /**
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,

package/es/components/actions/Menu/context.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/components/actions/Menu/index.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/components/actions/Menu/styled.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/components/actions/index.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.
  */
 
@@ -13,6 +13,8 @@ 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/es/components/actions/use-action.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/components/actions/use-anchored-menu.js

@@ -0,0 +1,98 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.67.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable } from '@react-aria/interactions';
+import { useEffect, useMemo, useRef, useState, } from 'react';
+import { VisuallyHidden } from 'react-aria';
+import { useEvent } from '../../_internal';
+import { generateRandomId } from '../../utils/random';
+import { mergeProps } from '../../utils/react';
+import { useEventBus } from '../../utils/react/useEventBus';
+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 function useAnchoredMenu(Component, defaultTriggerProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [componentProps, setComponentProps] = useState(null);
+    const [triggerProps, setTriggerProps] = useState(null);
+    const anchorRef = useRef(null);
+    const setupRef = useRef(false);
+    useEffect(() => {
+        const el = anchorRef.current;
+        if (el) {
+            el.dataset.menuTrigger = '';
+            return () => {
+                delete el.dataset.menuTrigger;
+            };
+        }
+    }, []);
+    // Generate a unique ID for this menu instance
+    const menuId = useMemo(() => generateRandomId(), []);
+    // Get event bus for menu synchronization
+    const { emit, on } = useEventBus();
+    // Listen for other menus opening and close this one if needed
+    useEffect(() => {
+        const unsubscribe = on('menu:open', (data) => {
+            // If another menu is opening and this menu is open, close this one
+            if (data.menuId !== menuId && isOpen) {
+                setIsOpen(false);
+            }
+        });
+        return unsubscribe;
+    }, [on, menuId, isOpen]);
+    // Emit event when this menu opens
+    useEffect(() => {
+        if (isOpen) {
+            emit('menu:open', { menuId });
+        }
+    }, [isOpen, emit, menuId]);
+    function setupCheck() {
+        if (!setupRef.current) {
+            throw new Error('useAnchoredMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.');
+        }
+    }
+    // 'open' accepts props required by the Component and opens the menu
+    const open = useEvent((props, triggerProps) => {
+        setupCheck();
+        setComponentProps(props);
+        setTriggerProps(triggerProps ?? null);
+        setIsOpen(true);
+    });
+    const update = useEvent((props, triggerProps) => {
+        setupCheck();
+        setComponentProps(props);
+        setTriggerProps(triggerProps ?? null);
+    });
+    const close = useEvent(() => {
+        setIsOpen(false);
+    });
+    // Render the menu only when componentProps is set
+    const renderedMenu = useMemo(() => {
+        if (!componentProps)
+            return null;
+        return (_jsxs(MenuTrigger, { isDummy: true, isOpen: isOpen, targetRef: anchorRef, placement: "bottom start", onOpenChange: setIsOpen, ...mergeProps(defaultTriggerProps, triggerProps || undefined), children: [_jsx(VisuallyHidden, { children: _jsx(Pressable, { children: _jsx("button", { "aria-label": "context-menu" }) }) }), _jsx(Component, { ...componentProps })] }));
+    }, [componentProps, triggerProps, isOpen, defaultTriggerProps]);
+    return {
+        anchorRef,
+        open,
+        update,
+        close,
+        isOpen,
+        get rendered() {
+            setupRef.current = true;
+            return renderedMenu;
+        },
+    };
+}
+
+