@cube-dev/ui-kit 0.66.0 → 0.67.0

package/es/components/actions/Menu/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.0
+ * @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.0
+ * @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.0
+ * @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.0
+ * @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;
+        },
+    };
+}
+
+        

package/es/components/actions/use-context-menu.js

@@ -0,0 +1,206 @@
+/**
+ * @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, Fragment as _Fragment } 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 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 function useContextMenu(Component, defaultTriggerProps, defaultMenuProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [componentProps, setComponentProps] = useState(null);
+    const [triggerProps, setTriggerProps] = useState(null);
+    const [anchorPosition, setAnchorPosition] = useState(null);
+    const targetRef = useRef(null);
+    const invisibleAnchorRef = useRef(null);
+    const setupRef = useRef(false);
+    // 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);
+                setAnchorPosition(null);
+            }
+        });
+        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('useContextMenu: MenuTrigger must be rendered. Use `rendered` property to include it in your component tree.');
+        }
+    }
+    // Helper function to calculate position relative to targetRef, taking the
+    // element's scroll offset into account. Without the scroll offset the menu
+    // would be rendered at the wrong place inside scrollable containers.
+    const calculatePosition = (event) => {
+        const container = targetRef.current;
+        // If no event is provided, position at the center of the element
+        if (!event) {
+            if (!container) {
+                return { x: 0, y: 0 };
+            }
+            const containerRect = container.getBoundingClientRect();
+            const scrollLeft = container.scrollLeft;
+            const scrollTop = container.scrollTop;
+            const computed = window.getComputedStyle(container);
+            const borderLeft = parseFloat(computed.borderLeftWidth) || 0;
+            const borderTop = parseFloat(computed.borderTopWidth) || 0;
+            // Position at the center of the element's content area
+            const x = container.clientWidth / 2 + scrollLeft;
+            const y = container.clientHeight / 2 + scrollTop;
+            // Clamp to the full scroll size
+            const clampedX = Math.max(0, Math.min(x, container.scrollWidth));
+            const clampedY = Math.max(0, Math.min(y, container.scrollHeight));
+            return { x: clampedX, y: clampedY };
+        }
+        // If the target reference is missing, fall back to viewport coordinates.
+        if (!container) {
+            const { clientX = 0, clientY = 0 } = event;
+            return { x: clientX, y: clientY };
+        }
+        const containerRect = container.getBoundingClientRect();
+        // Get coordinates from the event (viewport-relative)
+        const { clientX, clientY } = event;
+        // Take the element's scroll offset into account so that the coordinates are
+        // relative to the **content** box, not the visible viewport of the
+        // element.
+        const scrollLeft = container.scrollLeft;
+        const scrollTop = container.scrollTop;
+        const computed = window.getComputedStyle(container);
+        const borderLeft = parseFloat(computed.borderLeftWidth) || 0;
+        const borderTop = parseFloat(computed.borderTopWidth) || 0;
+        const x = clientX - containerRect.left - borderLeft + scrollLeft;
+        const y = clientY - containerRect.top - borderTop + scrollTop;
+        // Clamp to the full scroll size so that the invisible anchor always stays
+        // inside the element regardless of the scroll position.
+        const clampedX = Math.max(0, Math.min(x, container.scrollWidth));
+        const clampedY = Math.max(0, Math.min(y, container.scrollHeight));
+        return { x: clampedX, y: clampedY };
+    };
+    // 'open' accepts props, trigger props, and optional event for positioning, then opens the menu
+    const open = useEvent((props, triggerProps, event) => {
+        setupCheck();
+        // Ensure the target element can serve as a positioning context for the
+        // invisible target element. If the consumer hasn't explicitly set
+        // `position: relative | absolute | fixed | sticky` we switch it to
+        // `relative` so that absolutely-positioned children are laid out correctly.
+        if (targetRef.current) {
+            const computedStyle = window.getComputedStyle(targetRef.current);
+            if (computedStyle.position === 'static') {
+                targetRef.current.style.position = 'relative';
+            }
+        }
+        // Prevent default context menu if it's a context menu event
+        if (event &&
+            'preventDefault' in event &&
+            typeof event.preventDefault === 'function') {
+            event.preventDefault();
+        }
+        const { x, y } = calculatePosition(event);
+        setAnchorPosition({ x, y });
+        // Merge defaultMenuProps with provided props
+        const finalProps = defaultMenuProps
+            ? { ...defaultMenuProps, ...props }
+            : props;
+        setComponentProps(finalProps);
+        setTriggerProps(triggerProps ?? null);
+        setIsOpen(true);
+    });
+    const update = useEvent((props, triggerProps) => {
+        setupCheck();
+        // Merge defaultMenuProps with provided props
+        const finalProps = defaultMenuProps
+            ? { ...defaultMenuProps, ...props }
+            : props;
+        setComponentProps(finalProps);
+        setTriggerProps(triggerProps ?? null);
+    });
+    const close = useEvent(() => {
+        setIsOpen(false);
+        setAnchorPosition(null);
+    });
+    // Context menu event handler
+    const onContextMenu = useEvent((event) => {
+        event.preventDefault();
+        if (isOpen) {
+            const pos = calculatePosition(event);
+            setAnchorPosition(pos);
+        }
+        else {
+            open(defaultMenuProps, undefined, event);
+        }
+    });
+    // Bind the onContextMenu event to targetRef
+    useEffect(() => {
+        const element = targetRef.current;
+        if (!element)
+            return;
+        element.addEventListener('contextmenu', onContextMenu);
+        return () => {
+            element.removeEventListener('contextmenu', onContextMenu);
+        };
+    }, [onContextMenu]);
+    // Render the menu only when componentProps is set
+    const renderedMenu = useMemo(() => {
+        if (!componentProps || !anchorPosition)
+            return null;
+        return (_jsxs(_Fragment, { children: [_jsx("span", { ref: invisibleAnchorRef, style: {
+                        position: 'absolute',
+                        left: `${anchorPosition.x}px`,
+                        top: `${anchorPosition.y}px`,
+                        width: '0px',
+                        height: '0px',
+                        lineHeight: '0',
+                        pointerEvents: 'none',
+                        visibility: 'hidden',
+                    } }), _jsxs(MenuTrigger, { isDummy: true, isOpen: isOpen, targetRef: invisibleAnchorRef, offset: 0, crossOffset: 0, placement: triggerProps?.placement ||
+                        defaultTriggerProps?.placement ||
+                        'bottom start', onOpenChange: setIsOpen, ...mergeProps(defaultTriggerProps, triggerProps || undefined), children: [_jsx(VisuallyHidden, { children: _jsx(Pressable, { children: _jsx("button", { "aria-label": "Open context menu" }) }) }), _jsx(Component, { ...componentProps })] })] }));
+    }, [
+        componentProps,
+        triggerProps,
+        isOpen,
+        defaultTriggerProps,
+        anchorPosition,
+    ]);
+    return {
+        targetRef,
+        open,
+        update,
+        close,
+        isOpen,
+        get rendered() {
+            setupRef.current = true;
+            return renderedMenu;
+        },
+    };
+}
+
+        

package/es/components/content/ActiveZone/ActiveZone.js

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

package/es/components/content/Alert/Alert.js

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

package/es/components/content/Alert/index.js

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

package/es/components/content/Alert/types.js

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

package/es/components/content/Alert/use-alert.js

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

package/es/components/content/Avatar/Avatar.js

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

package/es/components/content/Badge/Badge.js

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

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/CopyPasteBlock/CopyPasteBlock.js

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

package/es/components/content/CopyPasteBlock/index.js

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

package/es/components/content/CopySnippet/CopySnippet.js

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

package/es/components/content/CopySnippet/index.js

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/HotKeys/HotKeys.js

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

package/es/components/content/HotKeys/index.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

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

package/es/components/fields/Checkbox/CheckboxGroup.js

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

package/es/components/fields/Checkbox/context.js

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